Cypress - Web 表格

Cypress 能够处理网页表格。表格基本上分为两种类型：动态和静态。与动态表格不同，静态表格的行和列数量是固定的。

在 html 代码中，表格由 table 标签表示，行由 tr 表示，列由 td 表示。

• 要访问行，Cypress 命令如下：

 cy.get("tr")

• 要访问列，Cypress 命令如下：

 cy.get("td") or cy.get("tr td")

• 要访问特定列，CSS 表达式应如下所示：

td:nth-child(column number)

• 要遍历表格的行/列，使用 Cypress 命令 each。

在 Cypress 中，我们使用命令next来切换到紧邻的下一个兄弟元素。此命令必须与 get 命令链接。命令 prev 用于切换到紧邻的前一个兄弟元素。

表格的 Html 结构如下所示：

示例

让我们以一个表格为例，并验证第二列 TYPE（开源）中对应于第一列 AUTOMATION TOOL 中的值 Selenium 的内容。

您的计算机上将出现以下屏幕：

实现

以下是与表格相关的 Cypress 命令的实现：

describe('Tutorialspoint Test', function () {
   // test case
   it('Scenario 1', function (){
      //URL launch
      cy.visit("https://sqengineer.com/practice-sites/practice-tables-selenium/")
      // identify first column
      cy.get('#table1> tbody > tr > td:nth-child(1)').each(($elm, index, $list)=> {
         // text captured from column1
         const t = $elm.text();
         // matching criteria
         if (t.includes('Selenium')){
            // next sibling captured
            cy.get('#table1 > tbody > tr > td:nth-child(1)')
            .eq(index).next().then(function(d) {
               // text of following sibling
               const r = d.text()
               //assertion
               expect(r).to.contains('Commercial');
            })
         }
      })
   });
});

执行结果

输出如下：

执行日志显示 TYPE 列中的值为 Open Source。这是因为它与同一行中出现的元素 Selenium（第一列）紧邻。