如何在 table 网格中查找按钮元素

Question

我是柏树的新手。我有 table 个用户，每一行都有一个编辑按钮。我想通过电子邮件查找特定用户，然后单击该行中的编辑按钮。你能帮我找到 Cypress 测试的编辑按钮吗？

Answer 1

所以你可以做这样的事情。首先，获取电子邮件的父行 tr，然后在该行中获取“编辑”按钮并单击它。

cy.contains('td', 'joe9.smith@yourdomain.co.nz')
  .parent('tr')
  .children('td')
  .find('a')
  .click()

Answer 2

你试试下面的代码，

首先我们会找出您邮箱的索引

然后在“编辑”按钮中应用索引

let position = 0;
cy.get('table > tr').should(($eachTr) => {
let count  = $eachTr.length;
    for(let i=0; i<count; i++ ){
        const text = $eachTr.text();
        if(text.includes('your email')){
            position = i;
        }
    }
});

cy.contains('EDIT').eq(position).click();

Answer 3

您可以使用 data-* 属性为您的选择器提供上下文并将它们与 CSS 或 JS 更改隔离。

在您的 html 文件中：

<a data-cy={uniqueId}>Edit</button>

在你的赛普拉斯测试文件中：

cy.get('[data-cy=${uniqueId}]').click()

为什么要用这个？

向元素添加 data-* 属性为我们提供了一个仅用于测试的目标选择器。

data-* 属性不会因 CSS 样式或 JS 行为变化而改变，这意味着它不会与元素的行为或样式耦合。

另外说明一下，这个元素是测试代码直接使用的

来源：best practices from official cypress doc

Answer 4

比那更容易。

您可以通过 .contains().

找到正确的行（<tr> 而不是 <td>）

然后在该行

中找到<a>

cy.contains('tr', 'Joei Smithi')  // whichever bit of text id's them, 
                                  // but specify 'tr' as the element
                                  // Checks all the row children, but returns the row
  .find('a')                      // Now find() looks only in that row, and any depth
  .click()                        // hit it

如何在 table 网格中查找按钮元素

How to find button element in a table grid

cypress

getelementsbytagname

findelement