cypress - 如何在表格网格中查找按钮元素

Question

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

Answer 1

这比那更容易。

您可以找到正确的行（<tr>不是<td>）.contains()。

然后<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 

Answer 2

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

在您的 html 文件中：

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

在您的柏树测试文件中：

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

为什么要用这个？

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

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

此外，它让每个人都清楚，这个元素是由测试代码直接使用的。

来源：来自官方 cypress doc 的最佳实践

Answer 3

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

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

Answer 4

你可以试试下面的代码，

1. 首先我们会找出您的电子邮件的索引

2. 然后在 EDIT 按钮中应用索引

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