赛普拉斯 |检查搜索关键字是否与显示的 trs 的任何 td 的值匹配

Question

我正在测试一种搜索功能，该功能根据用户的名字、姓氏、角色或电子邮件过滤输入的字符。

我有一个 table 和多个 tr，每个 tr 有多个 td。

我想断言返回的行包含任何 td 中与输入的关键字匹配的值。

我创建了下面的辅助函数，但是 cy.get('td').contains(searchKeyword); 导致浏览器挂起。知道这里的解决方案是什么吗。

 assertCorrectFilterResults(searchKeyword: string) {
            this.elements.tableBody().find("tr").then(rows => {
                rows.toArray().forEach(row => {
                    cy.get('td').contains(searchKeyword);
                })
            });
        };

我的帮手的灵感来自这里提到的解决方案How to get the total number of Rows in a table | Cypress

Table结构

Answer 1

尝试换行。

这将测试所有行是否都包含搜索词。

assertCorrectFilterResults(searchKeyword: string) {
  cy.get('tbody').find("tr").then(rows => {
    rows.toArray().forEach(row => {

      cy.wrap(row).contains(searchKeyword);  // test that one of child <td> has searchKeyword 

    })
  });
};

您可以断言父元素“包含”子元素内的文本，因此

<tr>
  <td></td>
  <td></td>
  <td>Find me!</td>
</tr>

用 .contains(...) 断言 <tr> 将检查所有 <td>.

补充说明

当您在 forEach 中执行 cy.get('td') 时，赛普拉斯实际上从 cy.root() 元素开始搜索（默认情况下是 <body> 元素）。

所以另一种方法是使用 .within()

更改根元素

assertCorrectFilterResults(searchKeyword: string) {
  cy.get('tbody').find("tr").then(rows => {
    rows.toArray().forEach(row => {

      cy.wrap(row).within(() => {
        cy.get('td').contains(searchKeyword);  // now get works only in this row
      })

    })
  });
};

Answer 2

如果您想直接查看 td 元素，您可以直接遍历它们。

与 searchKeyword

完全匹配

cy.get('tbody.MuiTableBody-root tr td').each(($ele) => {
  if($ele.text().trim() == searchKeyword){
    expect($ele.text().trim()).to.equal(searchKeyword)  //Assertion for exact text
  }
})

与 searchKeyword

部分匹配

cy.get('tbody.MuiTableBody-root tr td').each(($ele) => {
  if($ele.text().trim().includes(searchKeyword)){
    expect($ele.text().trim()).to.include(searchKeyword)  //Assertion for partial text
  }
})

Answer 3

触发行中另一个 <td> 中的按钮：

cy.get('tbody.MuiTableBody-root tr')  // note - end this selector at tr
.each(($tr, rowIndex) => {            // row index is passed as 2nd param

  if ($tr.text().includes(searchKeyword)) {

    cy.wrap($tr).within(() => {
      cy.get('td').eq(3)  // for example 4th col has button
        .find('button')   
        .click()
    })
  }
})

赛普拉斯 |检查搜索关键字是否与显示的 trs 的任何 td 的值匹配

Cypress | check that search keywords match the value of any td of the displayed trs

datatables

cypress