web-dev-qa-db-fra.com

Comment vérifier un élément qui peut ne pas exister à l'aide de Cypress

J'écris un test Cypress pour me connecter à un site Web. Il y a des champs de nom d'utilisateur et de mot de passe et un bouton Soumettre. La plupart du temps, les connexions sont simples, mais parfois une boîte de dialogue d'avertissement apparaît en premier qui doit être fermée.

J'ai essayé ceci:

    cy.get('#login-username').type('username');
    cy.get('#login-password').type(`password{enter}`);

    // Check for a possible warning dialog and dismiss it
    if (cy.get('.warning')) {
        cy.get('#warn-dialog-submit').click();
    }

ce qui fonctionne bien, sauf que le test échoue si l'avertissement n'apparaît pas:

CypressError: Timed out retrying: Expected to find element: '.warning', but never found it.

Ensuite, j'ai essayé cela, qui échoue car l'avertissement n'apparaît pas assez rapidement, donc Cypress. $ Ne trouve rien:

    cy.get('#login-username').type('username');
    cy.get('#login-password').type(`password{enter}`);

    // Check for a possible warning dialog and dismiss it
    if (Cypress.$('.warning').length > 0) {
        cy.get('#warn-dialog-submit').click();
    }

Quelle est la bonne façon de vérifier l'existence d'un élément? J'ai besoin de quelque chose comme cy.get qui ne se plaint pas si l'élément est introuvable.

automated-testscypress
19
Charles Anderson

Il existe différents inconvénients à tenter de faire des tests conditionnels sur les éléments DOM et également diverses solutions de contournement dans Cypress. Tout cela est expliqué en détail dans la documentation de Cypress dans Test conditionnel .

Puisqu'il existe plusieurs façons de faire ce que vous essayez de faire, je vous suggère de lire l'intégralité du document et de décider ce qui convient le mieux à votre application et à vos besoins de test.

5
Jennifer Shehane
export function clickIfExist(element) {
    cy.get('body').then((body) => {
        if (body.find(element).length > 0) {
            cy.get(element).click();
        }
    });
}
3
Ran Adler

Je l'ai fait avec du pur js.

 cy.get('body').then((jqBodyWrapper) => {

                if (jqBodyWrapper[0].querySelector('.pager-last a')) {
                    cy.get('.pager-last a').then(jqWrapper => {
                        // hardcoded due to similarities found on page

                        const splitLink = jqWrapper[0].href.split("2C");
                        AMOUNT_OF_PAGES_TO_BE_RETRIEVED = Number(splitLink[splitLink.length - 1]) + 1;
                    })
                } else {
                    AMOUNT_OF_PAGES_TO_BE_RETRIEVED = 1;
                }
            });

J'essaie de vérifier si l'élément existe sur le corps

cy.get('body').then((jqBodyWrapper) => {

Avec une requête js pure

if (jqBodyWrapper[0].querySelector('.pager-last a')) {

Ensuite, je tire mon cy.get

cy.get('.pager-last a').then(jqWrapper => {
0
Patryk Janik