CypressError：重试超时：cy.click() 失败，因为此元素与 DOM 分离

Question

一旦收到后端响应，下拉菜单基本上需要很长时间才能加载。如果我等待大约 8 秒，那么它就起作用了。但是，不想在这里硬编码等待。知道可能会出什么问题吗？我也无法识别css。

cy.get('input').last().type(`{selectall}${value}`);
        cy.get('mat-option > span').then(option => {
            if (option.get(0).textContent === 'Loading...') {
                cy.wait(5000);
            }
        });   

cy.containsCaseInsensitive(value, 'mat-option').first().scrollIntoView().debug().click();

错误日志——

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

<mat-option _ngcontent-gcj-c21="" class="mat-option ng-star-inserted" role="option" ng-reflect-value="[object Object]" tabindex="0" id="mat-option-104" aria-disabled="false" style="">...</mat-option>

Cypress requires elements be attached in the DOM to interact with them.

The previous command that ran was:

  > cy.debug()

This DOM element likely became detached somewhere between the previous and current command.

Common situations why this happens:
  - Your JS framework re-rendered asynchronously
  - Your app code reacted to an event firing and removed the element

You typically need to re-query for the element or add 'guards' which delay Cypress from running new commands.

https://on.cypress.io/element-has-detached-from-dom

Answer 1

我遇到了同样的问题，但你可以通过以下方式解决

cy.get('.mySelector').should('be.visible').click({force:true});

Answer 2

我确实遇到了同样的问题，让 cypress 等待一段时间直到页面加载解决了分离元素的问题

例子

cy.wait(3000)
cy.get(growth.tpsl_input_sessionName).clear().type(sessionName);

Answer 3

你可以尝试用这种方式

cy.get('input').last().type(`{selectall}${value}`);
        cy.get('mat-option > span').then(option => {
            //if (option.get(0).textContent === 'Loading...') {
                //cy.wait(5000);
            //}

            cy.containsCaseInsensitive(value, 'mat-option').first().scrollIntoView().debug().click();
        });