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

How to find button element in a table grid

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

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

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

你试试下面的代码,

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

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

您可以使用 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

比那更容易。

您可以通过 .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