赛普拉斯：使用另一个元素作为参考从 table 获取一个元素

Question

好的，情况是这样的。我有一个网页，我在其中向 table 添加元素，当我添加该元素时，网页会自动为其分配一个数字。

我的问题是：我怎样才能得到那个号码？因为它是自动生成的，所以我无法知道它会是哪个数字。 table 是这样的：

姓名号码
橙色 35
苹果 452
柠檬 77

和代码：

<tr data-id="77">
                    <td class="col col-md-5 text-left">
                        Lemon
                    </td>
                    <td class="col col-md-5 text-left">
                        77
                    </td>
</tr>

如您所见，数字 77 没有唯一标识符，当我创建 Lemon 时，我无法知道该数字是多少。

我的第一个想法是获取左侧的元素，即 Lemon，因为我知道它的名字（是我给出了它的名称，使用 .type() 然后尝试获取右侧的元素柠檬，这将是一个我不知道它会是多少的数字。

这可能吗？有更好的方法吗？

Answer 1

你可以试试这个

cy.get('[data-id="77"] td:nth-child(2)').should('have.text', '77')

Answer 2

在不知道确切的数字内容是什么或包含元素的显着特征的情况下，您将需要一个相对选择命令，

Siblings

cy.contains('td', 'Lemon')
  .siblings().eq(0)
  .invoke('text')
  .then(lemonText => {
    const lemonNumber = +lemonText.trim();
    // do something with lemonNumber
})

Next

cy.contains('td', 'Lemon')
  .next('td')
  .invoke('text')
  .then(lemonText => {
    const lemonNumber = +lemonText.trim();
    // do something with lemonNumber
})

Answer 3

部分选项：

cy.contains('td.col', 'lemon').siblings('td.col').invoke('text').as('lemonNumber');
// or
cy.contains('td.col', 'lemon').parent('tr').invoke('data', 'id').as('lemonNumber');
// or for each row
cy.get('tr').each((row, index) => {
  cy.wrap(row).contains('td', /\w+/).invoke('text').as('rowName' + index);
  cy.wrap(row).contains('td', /\d+/).invoke('text').as('rowNumber' + index);
});

赛普拉斯：使用另一个元素作为参考从 table 获取一个元素

Cypress : Getting an element from a table using another element as reference

javascript

testing

html-table

tr

cypress