Блог

Это проект ant-react. HTML:

 lt;div class="list"gt;  lt;div class="item"gt;  lt;divgt;  lt;divgt;  lt;div class="head"gt;  lt;spangt;name 1lt;/spangt;   lt;/divgt;  lt;div class="body"gt;  lt;divgt;  lt;buttongt;donelt;/buttongt;  lt;/divgt;   lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="item"gt;  lt;divgt;  lt;divgt;  lt;div class="head"gt;  lt;spangt;name 2lt;/spangt;   lt;/divgt;  lt;div class="body"gt;  lt;divgt;  lt;buttongt;donelt;/buttongt;  lt;/divgt;   lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/divgt;  

JS:

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

Существует множество элементов элементов. Мне нужно нажать на кнопку «Готово» элемента с именем «имя 1». Но каждый раз, когда я получаю ошибку:

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

…

Cypress требует, чтобы элементы были прикреплены в DOM для взаимодействия с ними.

Как я могу это сделать?

Вы можете сделать что-то подобное. Первый родитель перейдет к lt;div class="head"gt; , а следующий родитель переместится div чуть выше. Теперь, используя внутри, мы убедимся, что нажата кнопка Готово name 1 .

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