Cypress - 网络表

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

在html代码中，表由table tagname表示，行由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 (Open Source) 对应于值 Selenium 的内容，该值位于第一列 AUTOMATION TOOL 中。

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

执行

下面给出的是与表相关的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 列中的值被捕获为开源。发生这种情况是因为它是同一行中出现的元素 Selenium（第一列）的紧随其后的同级元素。