4
votes

CypressError: expiration du délai de relance: cy.click () a échoué car cet élément est détaché du DOM

La liste déroulante prend essentiellement du temps à se charger une fois la réponse du back-end reçue. Si je mets une attente d'environ 8 secondes, cela fonctionne. Mais, ne voulez pas coder en dur l'attente ici. Une idée de ce qui ne va pas? Je n'ai pas non plus pu identifier le css.

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

Le journal des erreurs -

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

angular cypress

0 commentaires

3 Réponses :

0
votes

Vous pouvez essayer de cette manière

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

3 commentaires

Déjà essayé cela. BTW, pourquoi avez-vous pensé que cela fonctionnera de cette façon, juste curieux. Merci d'essayer d'aider. Il ne charge pas la liste déroulante si rapidement, la requête backend prend du temps pour renvoyer les valeurs.

Au lieu de passer le nombre en attente, vous pouvez passer cy.wait ('@ getBooks'). veuillez jeter un œil à docs.cypress.io/guides/guides/network-requests.html#Waiting

c'est un code générique, cela peut être un xhr différent à chaque fois, donc @getBooks ne peux pas utiliser @getBooks

0
votes

Pour attendre une réponse du réseau, vous pouvez aliaser les requêtes du réseau et les attendre.

Consultez la documentation de Cypress 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 commentaires

0
votes

Peut-être une réponse tardive mais peut être utile pour d'autres personnes ayant le même problème, parfois utiliser le wrapper jQuery de Cypress peut être une bonne idée.

Cypress.$('.mySelector').trigger('click');

0 commentaires