赛普拉斯：使用另一个元素作为参考从表中获取一个元素答案

【问题标题】：Cypress : Getting an element from a table using another element as reference赛普拉斯：使用另一个元素作为参考从表中获取一个元素
【发布时间】：2020-04-03 18:47:01
【问题描述】：

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

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

姓名编号
橙色 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() 然后尝试获取 Lemon 右侧的元素，这将是一个我不知道它会是什么数字的数字。

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

【问题讨论】：

标签： javascript testing html-table cypress tr

【解决方案1】：

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

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
})

【讨论】：

【解决方案2】：

一些选项：

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);
});

【讨论】：

【解决方案3】：

你可以试试这个

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

【讨论】：

这行不通，因为我不知道数字是多少。它生成一个随机数。