Cypress 简明教程

Cypress - Web Tables

Cypress 能够处理网络表格。表格基本上有两种类型，动态和静态。静态表格与动态表格不同，它具有固定数量的列和行。

在 html 代码中，表格由表标记名表示，而行由 tr 表示，列由 td 表示。

  1. 要访问行，Cypress 命令如下所示：

 cy.get("tr")

  1. 要访问列，Cypress 命令如下所示：

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

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

td:nth-child(column number)

  1. 要 iterate through the rows/columns 表格，使用 Cypress 命令 each。

在 Cypress 中，我们有命令 next 至 shift to the immediate following sibling element 。此命令必须与 get 命令链接。prev 命令用于移到紧邻的前一个同级元素。

表格的 Html 结构如下所示：

html structure

Example

让我们举一个表格的示例，并验证与第一列 AUTOMATION TOOL 中的值 Selenium 相对应的第二列 TYPE（Open Source）的内容。

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

automation tool

Implementation

下面是与表格相关的 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');
            })
         }
      })
   });
});

Execution Results

输出如下 −

practice tables

执行日志显示 TYPE 列中的值被捕获为 Open Source。发生这种情况是因为它是与元素 Selenium（第一列）紧邻的后一个同级元素，并且出现在同一行中。