赛普拉斯 |在特定条件下单击行内列中的按钮
Cypress | Click on a button in a column inside a row on specific condition
我有一个包含多行和多列的 table。
我想触发以下场景:
- 获取其任意列与特定关键字匹配的行。
- 单击此行内的按钮。
这是我的 table 结构:
这是我的代码片段
clickOnDeleteIcon(email: string) {
cy.get('tbody.MuiTableBody-root tr td', { timeout: 20000})
.filter(`:contains(${email})`)
.parentsUntil('tbody.MuiTableBody-root tr')
.find('button[title = "Delete"]')
.click()
}
我也试过了
clickOnDeleteIcon(email: string) {
cy.contains('tbody.MuiTableBody-root tr td', email).parent('tr')
.find('button[title = "Delete"]')
.click()
}
但是,我在过滤器中超时
Timed out retrying after 10000ms: Expected to find element: :contains(Julie_Williamson88@gmail.com), but never found it. Queried from element: [ <td.MuiTableCell-root.MuiTableCell-body.MuiTableCell-paddingNone>, 1535 more... ]
filter()
命令使用 css,但 :contains
似乎无效 css,如 here 所述。
您应该使用来自 cypress 的 contains()
命令按文本内容查询元素。
我会这样使用它:
cy.get('tbody.MuitableBody-root')
.contains('tr', email)
.find('button[title="Delete"]')
.click();
你可以这样做:
cy.get('tbody.MuiTableBody-root tr', {
timeout: 15000,
})
.should('be.visible')
.each(($ele, index) => {
if ($ele.text().toLowerCase().trim().includes('ursula_white@gmail.com')) {
cy.wrap($ele).within(() => {
cy.get('[title="Delete"]').click()
})
}
})
我有一个包含多行和多列的 table。
我想触发以下场景:
- 获取其任意列与特定关键字匹配的行。
- 单击此行内的按钮。
这是我的 table 结构:
这是我的代码片段
clickOnDeleteIcon(email: string) {
cy.get('tbody.MuiTableBody-root tr td', { timeout: 20000})
.filter(`:contains(${email})`)
.parentsUntil('tbody.MuiTableBody-root tr')
.find('button[title = "Delete"]')
.click()
}
我也试过了
clickOnDeleteIcon(email: string) {
cy.contains('tbody.MuiTableBody-root tr td', email).parent('tr')
.find('button[title = "Delete"]')
.click()
}
但是,我在过滤器中超时
Timed out retrying after 10000ms: Expected to find element: :contains(Julie_Williamson88@gmail.com), but never found it. Queried from element: [ <td.MuiTableCell-root.MuiTableCell-body.MuiTableCell-paddingNone>, 1535 more... ]
filter()
命令使用 css,但 :contains
似乎无效 css,如 here 所述。
您应该使用来自 cypress 的 contains()
命令按文本内容查询元素。
我会这样使用它:
cy.get('tbody.MuitableBody-root')
.contains('tr', email)
.find('button[title="Delete"]')
.click();
你可以这样做:
cy.get('tbody.MuiTableBody-root tr', {
timeout: 15000,
})
.should('be.visible')
.each(($ele, index) => {
if ($ele.text().toLowerCase().trim().includes('ursula_white@gmail.com')) {
cy.wrap($ele).within(() => {
cy.get('[title="Delete"]').click()
})
}
})