时间戳

首页 > 解决方案 > 如何使用 Codeceptjs 和 Puppeteer 根据 col3 中的文本在 col1 中选中复选框

node.js - 如何使用 Codeceptjs 和 Puppeteer 根据 col3 中的文本在 col1 中选中复选框

问题描述

Codeceptjs 和 Puppeteer 相当新。想知道是否有人可以提供一些关于与表格中的元素进行交互的最佳实践的见解？

我有一个表，其中每个数据行的第一列是一个复选框。

我想通过其中一列中的文本来识别表中的一行。

我已经构建了如下所示的方法来删除记录，因为在项目的属性中有一个删除按钮，只需单击该行即可显示。

deleteSite(id) {
    I.click(locate('tr').withText(id));
    I.click(this.button.delete);
    I.wait(3);
  },

我试图弄清楚如何以这样一种方式构造它，即我仍然可以使用定位找到我所追求的行，然后还单击该行第一列中的复选框。

如果有更好的方法/方法来做到这一点，我会全神贯注。

任何帮助将不胜感激。

谢谢，鲍勃

标签： node.jspuppeteercodeceptjs

解决方案

After many trials and mistakes on my part, this is actually quite easy to do and works well.

Here is what I've come up with. If others have suggestions for how this can be improved, I am always open to that.

Locate a row, tick a check box in col1 of identified row

async selectSiteById(siteId) {
    // Get total number of rows in table (body)
    const totalRows = await I.grabAttributeFrom('tbody tr');
    
    //  Loop through all rows of the table
    for (let i = 0; i < totalRows.length; i++) {

      // Get the value of the site ID and store to str
      let str = await I.grabTextFrom(`tbody tr:nth-child(${i+1}) td:nth-child(2)`);

      // Click the checkbox in col1 for the identified row
      if (str === siteId) {
        within(`tbody tr:nth-child(${i+1}) td:nth-child(1) span span`, () => {
          I.click('input');
        })
      }
    }
  },

推荐阅读