Comment vérifier si un élément n'est jamais visible dans les tests Cypress e2e ?

Question

Existe-t-il un moyen d'affirmer qu'un élément n'est jamais visible à aucun moment lors du routage dans Cypress ?

J'ai une application web en rendu serveur qui affiche parfois un état de "chargement" alors qu'elle ne le devrait pas. Ainsi, lorsque je navigue entre les pages, un indicateur de "chargement" s'affiche pendant quelques secondes, puis disparaît.

Je sais que les assertions de Cypress peuvent parfois "attendre", mais dans ce cas, cela fait échouer mon assertion car l'indicateur de chargement disparaît et cela fait croire au test qu'il a réussi.

J'utilise ces deux affirmations :

cy.get('[data-test="loading"]').should('not.exist');

cy.get('[data-test="loading"]').should('not.be.visible');

Mais les deux passent car l'indicateur de chargement disparaît.

J'ai consulté toute la documentation, mais il ne semble pas y avoir de méthode pour vérifier qu'un élément est jamais visible. Y a-t-il une méthode qui m'échappe ou un moyen de tester cela d'une autre manière ?

Answer 1

Je suis peut-être fou, et je n'ai pas encore testé cela, mais je voulais lancer cette idée.

Je suppose que vous testez qu'il ne devrait JAMAIS y avoir d'indicateur de chargement et qu'il attend les 4 secondes par défaut et que l'indicateur disparaît, ce qui fait que votre test est réussi. Donc ci-dessous, j'ai mis l'attente à zéro, donc il n'y a pas d'attente. Je ne comprends pas non plus pourquoi vous ne corrigez pas le code pour que vous ne voyiez pas l'indicateur si vous n'êtes pas censé le voir. Peut-être n'avez-vous pas accès au code

cy.get('[data-test="loading"]',{ timeout: 0 }).should('not.exist');

cy.get('[data-test="loading"]',{ timeout: 0 }).should('not.be.visible');

Answer 2

Cypress dispose d'une version allégée de jQuery, ce qui nous permet de surveiller les modifications apportées au parent de l'élément qui ne devrait pas exister.

Les tests de @Maccurt sont appliqués chaque fois qu'un changement se produit.

Pour limiter au maximum les déclenchements de surveillance, il convient de trouver le parent immédiat (ou le plus proche) de l'élément testé.

Note Ceci couvre exists mais ne devrait pas être nécessaire pour les visible teste si l'élément est présent en permanence mais n'est pas visible.

---

Dans cet exemple, un bouton est ajouté à body .
Le premier test consiste à vérifier la présence d'un span (qui n'est jamais ajouté pour que le test réussisse).
Le 2e test de surveillance pour le button et échoue.

describe('watching for an element to not appear', () => {

  const watchAndTest = function(parentSelector, assert) {
    Cypress.$(parentSelector).bind('DOMNodeInserted', function(event) {
      assert()
    });
  }

  it('should succeed because "span" does not exist', () => {
    const parentSelector = 'body'
    const watchForSelector = 'span'
    watchAndTest(parentSelector, 
      () => {
        // Place your 'assert' code here
        cy.get(`${parentSelector} ${watchForSelector}`,{ timeout: 0 })
          .should('not.exist');
      }
    )

    // Place your 'act' code here
    cy.get(parentSelector).then(parent => {
      var newElement = document.createElement('button');
      parent[0].appendChild(newElement)
    })
    Cypress.$(parentSelector).unbind('DOMNodeInserted')
  })

  it('should fail because "button" exists', () => {
    const parentSelector = 'body'
    const watchForSelector = 'button'
    watchAndTest(parentSelector, 
      () => {
        // Place your 'assert' code here
        cy.get(`${parentSelector} ${watchForSelector}`,{ timeout: 0 })
          .should('not.exist');
      }
    )

    // Place your 'act' code here
    cy.get(parentSelector).then(parent => {
      var newElement = document.createElement('button');
      parent[0].appendChild(newElement)
    })
    Cypress.$(parentSelector).unbind('DOMNodeInserted')
  })

})