如何使用Codeceptjs和Puppeteer在col3中基于文本检查col1中的框

问题描述

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

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

我想通过一列中的文本标识表中的一行。

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

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

我正在尝试弄清楚如何构造这种结构，以使我仍然可以通过使用locate找到我要查找的行，然后单击该行第一列中的复选框。

如果有更好的方法/方法来做到这一点，我会很高兴。

任何帮助将不胜感激。

谢谢， 鲍勃

解决方法

经过我的多次尝试和错误，这实际上很容易实现并且效果很好。

这是我想出的。如果其他人对如何改善此问题有任何建议，我总是持开放态度。

找到一行，在已识别行的col1中选中一个复选框

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');
        })
      }
    }
  },