web-dev-qa-db-ja.com

CypressError：この要素がDOMから切り離されているため、タイムアウトした再試行：Cy.Click（）が失敗しました

ドロップダウンは基本的にバックエンド応答が受信された後にロード自体を取得するのに時間がかかります。約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
 _
angularcypress
4
infinite

あなたはこのように試すかもしれません

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();
        });
 _
0
Santosh Anand

ネットワーク応答を待つためには、ネットワーク要求をエイリアスしてそれらを待つことができます。

ここでのサイプレスのドキュメントをチェックしてください. https://docs.cypress.io/guides/guides/Network-requests.html#flake

cy.route('/search*', [{ item: 'Book 1' }, { item: 'Book 2' }]).as('getSearch')

// our autocomplete field is throttled
// meaning it only makes a request after
// 500ms from the last keyPress
cy.get('#autocomplete').type('Book')

// wait for the request + response
// thus insulating us from the
// throttled request
cy.wait('@getSearch')
 _

上記のリンクに従って、ドキュメントでもっと多くの例があります。

0
mpavel