Cypress:如何从列表中选择具有特定条件的元素?

Question

对于以下html:

<tr xpath="1">
<td>
<a class="orderTemplate-name" href="/my-account/saved-carts/0000443027"> td </a>
<div class="orderTemplate-created">
<span> blabla </span><!----><span> blabla </span>
</div>
</td>
<td>
<div class="orderTemplateOrderImage">
<!----><!---->
</div>
</td>
<td>
<div class="orderTemplateActions">
<button class="btn btn-commerce" id="addBtn" type="button">
<cx-icon class="">
<!----><!---->
<svg viewBox="0 0 20 20">
<path fill="currentColor" fill-rule="evenodd" d="blabla"></path>
</svg>
</cx-icon>
</button>
<a class="btn-icon" href="/my-account/saved-carts/0000443027">
<cx-icon class="">
<!----><!---->
<svg viewBox="0 0 20 20">
<path fill="currentColor" fill-rule="evenodd" d="blabla"></path>
</svg>
</cx-icon>
</a>
<button class="btn-icon" id="deleteBtn" type="button">
<cx-icon class="">
<!----><!---->
<svg viewBox="0 0 20 20">
<path fill="currentColor" fill-rule="evenodd" d="blabla"></path>
</svg>
</cx-icon>
</button>
</div>
</td>
</tr>

如果orderTemplate-name包含"自动测试标题"，我想点击deleteBtn。有多个tr，有些有另一个名称，然后"自动测试标题";有些名字相同。我只想删除所有这个名字的。我该怎么做呢?

我试过了:

cy.get('tbody tr').each(($ele) => {
if ($ele.find('.orderTemplate-name').contains('automated test title')) {
cy.get('#deleteBtn').click()
}
})

编辑:

Fody的方法工作得很好，但是<tr>元素的索引存在问题。第一个<tr>首先被索引。如果您删除它，它将跳过下一个<tr>元素，而您将继续执行第三个元素。我附上了一个截图，使这更清楚。这是在第一个元素被删除之后。您可以看到下一个<tr>元素被跳过。https://i.stack.imgur.com/EXylt.jpg

Answer 1

$ele.find('.orderTemplate-name').contains('automated test title')给出错误

ele.find美元(…)。Contains不是函数

因为jQuery中没有.contains()。

您可以使用伪选择器:contains，但是您必须测试结果

的.length

if ($ele.find('.orderTemplate-name:contains("automated test title")').length) {

cy.get('#deleteBtn').click()有点危险，因为它总是从文档的顶部搜索，而不是在行内。

如果删除操作删除行很慢，它可能仍然会找到前面的删除按钮，因为.each()将运行得相当快。

添加.within()来修复

cy.get('tbody tr').each(($row) => {
if ($row.find('.orderTemplate-name:contains("automated test title")').length) {
cy.wrap($row).within(() => {
cy.get('#deleteBtn').click()
})
}
})

更容易在行选择器中添加:contains()条件

cy.get('tbody tr:contains("automated test title")').each(($row) => {
cy.wrap($row).find('#deleteBtn').click()
})

---

我同意你的评论，从dom中分离的错误最有可能是由于删除后重新渲染。

这个函数可能会得到更好的结果

const deleteRow = (selector, rowsToDelete) => {
if (rowsToDelete === 0) return
// Fresh query each iteration
cy.get('tbody tr:contains("automated test title")').eq(0)
.as('rowDeleted')
.find('#deleteBtn').click()

// Need some way to make sure delete action has finished
cy.get('@rowDeleted')
.should('not.exist')
// Do the next one
deleteRow(selector, --rowsToDelete) 
}
const selector = 'tbody tr:contains("automated test title")'
cy.get(selector).then($rows => {  
const rowsToDelete = $rows.length  // obtain the count
deleteRow(selector, rowsToDelete)
})