如何单击具有特定名称的同一元素上的按钮？

Question

这是 ant-react 项目。 html:

<div class="list">
  <div class="item">
    <div>
        <div>
            <div class="head">
                 <span>name 1</span>   
            </div>
            <div class="body">
                <div>
                    <button>done</button>
                </div> 
           </div>
        </div>
    </div>
  </div>
  <div class="item">
    <div>
        <div>
            <div class="head">
                 <span>name 2</span>   
            </div>
            <div class="body">
                <div>
                    <button>done</button>
                </div> 
           </div>
        </div>
    </div>
</div>

js:

cy.get(`div:contains('name1')`)
  .should('be.visible')
  .invoke('show') 
  .should('be.visible') 
  .find('button:contains("Done")').eq(0).click({ multiple: true })

项目元素很多。我需要单击名称为“名称 1”的元素的 'Done' 按钮。但每次我得到错误：

Timed out retrying after 4050ms: cy.click() failed because this element is detached from the DOM.

...

Cypress 需要在 DOM 中附加元素才能与它们交互。

我该怎么做？

Answer 1

你可以这样做。第一个父级将转到 <div class="head">，下一个父级将移至正上方的 div。现在使用 within 我们将确保点击 Done 按钮 name 1.

cy.contains('span', 'name1')
  .parent()
  .parent()
  .within(() => {
    cy.contains('button', 'done').click()
  })

如何单击具有特定名称的同一元素上的按钮？

How can I click on a button on the same element with a specific name?

reactjs

antd

cypress