Cypress 简明教程

Cypress - Web Tables

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

Cypress is capable of handling the web tables. A table is basically of two types, which are dynamic and static. A static table has a fixed number of columns and rows unlike a dynamic table.

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

In an html code, a table is represented by table tagname, while rows are represented by tr, and columns by td.

To access the rows, the Cypress command is as follows −

 cy.get("tr")

To access the columns, the Cypress command is as follows −

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

To access a particular column, the CSS expression should be as follows −

td:nth-child(column number)

To iterate through the rows/columns of the table, the Cypress command each is used.

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

In Cypress, we have the command next to shift to the immediate following sibling element. This command has to be chained with get command. The command prev is used to shift to the immediate preceding sibling element.

表格的 Html 结构如下所示：

The Html structure of a table is given below −

Example

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

Let us take an example of a table, and verify the content of the second column TYPE (Open Source) corresponding to the value Selenium, which is in the first column AUTOMATION TOOL.

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

The following screen will appear on your computer −

Implementation

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

Given below is the implementation of the Cypress commands related to tables −

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

输出如下 −

The output is as follows −

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

The execution logs show that the value in the column TYPE is captured as Open Source.This happens as it is the immediate following sibling to the element Selenium (first column)which appears in the same row.