web-dev-qa-db-fra.com

CYPRESSEURROR: DÉCOMMANDÉES DE TÉMERING: CY.CLICK () Échec du fait que cet élément est détaché du DOM

La liste déroulante prend essentiellement longtemps pour se charger une fois la réponse de la fin de l'arrière. Si je mets une attente d'environ 8 secondes, cela fonctionne. Mais je ne veux pas de faire duper le code l'attente ici. Une idée comme ce qui pourrait se tromper? Je ne pouvais pas identifier le CSS aussi.

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();

Le journal des erreurs -

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

Vous pouvez essayer de cette façon

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

Afin d'attendre une réponse réseau, vous pouvez les demandes de réseau Alias ​​et les attendre.

Découvrez la documentation pour Cyprès ici: 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')

Plus d'exemples sont disponibles dans la documentation en suivant le lien ci-dessus.

0
mpavel