賽普拉斯：我怎樣才能 select 具有特定條件的列表元素？

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://imgur.com/a/VRHw1dR

Answer 1

$ele.find('.orderTemplate-name').contains('automated test title')報錯

$ele.find(...).contains 不是 function

因為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 分離錯誤很可能是由於刪除后重新呈現造成的。

這個 function 可能會得到更好的結果

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)
})