如何在 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()
你试试下面的代码,
首先我们会找出您邮箱的索引
然后在“编辑”按钮中应用索引
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 行为变化而改变,这意味着它不会与元素的行为或样式耦合。
另外说明一下,这个元素是测试代码直接使用的
比那更容易。
您可以通过 .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 个用户,每一行都有一个编辑按钮。我想通过电子邮件查找特定用户,然后单击该行中的编辑按钮。你能帮我找到 Cypress 测试的编辑按钮吗?
所以你可以做这样的事情。首先,获取电子邮件的父行 tr
,然后在该行中获取“编辑”按钮并单击它。
cy.contains('td', 'joe9.smith@yourdomain.co.nz')
.parent('tr')
.children('td')
.find('a')
.click()
你试试下面的代码,
首先我们会找出您邮箱的索引
然后在“编辑”按钮中应用索引
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 行为变化而改变,这意味着它不会与元素的行为或样式耦合。
另外说明一下,这个元素是测试代码直接使用的
比那更容易。
您可以通过 .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