賽普拉斯：使用另一個元素作為參考從表中獲取元素

Question

好的，這就是這種情況。 我有一個網頁，我在其中向表格添加元素，當我添加該元素時，網頁會自動為其分配一個數字。

我的問題是：我怎樣才能得到那個號碼？ 因為它是自動生成的，所以我無法知道它會是哪個數字。 表是這樣的：

姓名 編號
橙色 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，因為我知道它的名稱（我自己給出了它的名稱，using.type() 然后嘗試獲取 Lemon 右側的元素，這將是一個我不知道它會是什么數字的數字。

那可能嗎？ 有更好的方法嗎？

Answer 1

在不知道確切的數字內容是什么或包含元素的顯着特征的情況下，您將需要相對選擇命令之一，

兄弟姐妹

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

下一個

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

Answer 2

你可以試試這個

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

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