Comment gérer plusieurs fenêtres dans Cypress

Introduction

La gestion de plusieurs fenêtres ou onglets est l'un des scénarios les plus courants lors de la réalisation de tests de bout en bout pour des applications Web. Cela peut se produire lorsque cliquer sur un lien ouvre un nouvel onglet ou une fenêtre contextuelle. Cependant, Cypress, par défaut, exécute les tests dans un seul onglet du navigateur et ne prend pas en charge l'interaction directe avec plusieurs fenêtres ou onglets du navigateur.

Dans cet article, nous explorerons comment gérer plusieurs fenêtres dans Cypress en utilisant quelques solutions de contournement et bonnes pratiques pour imiter le comportement multi-onglets et assurer le bon fonctionnement de vos tests.

Limite du guichet unique de Cypress

Cypress ne fournit pas de support natif pour les tests multi-fenêtres en raison de la façon dont il est conçu pour s'exécuter dans un seul onglet. Le raisonnement derrière cette conception est de maintenir la cohérence, la fiabilité et l’isolation des tests. Cependant, avec quelques astuces intelligentes, vous pouvez toujours simuler des interactions multi-fenêtres, ainsi que vérifier le comportement déclenché par de nouveaux onglets ou fenêtres.

Techniques de gestion de plusieurs fenêtres dans Cypress

Examinons quelques approches courantes pour gérer plusieurs fenêtres dans Cypress :

1. Intercepter et affirmer sur les liens sans ouvrir de nouveaux onglets
2. Stub ou simulation d'appels de nouvelle fenêtre
3. Simuler le changement d'emplacement de la fenêtre

1. Intercepter et affirmer sur les liens sans ouvrir de nouveaux onglets
Un scénario courant consiste à cliquer sur un lien qui ouvre un nouvel onglet. Au lieu de laisser le navigateur ouvrir le nouvel onglet, vous pouvez intercepter l'URL qui est censée être ouverte dans le nouvel onglet, affirmer le lien et visiter l'URL dans le même onglet.

Exemple :
Imaginez que vous ayez une page Web avec un lien comme celui-ci :

<a href="https://example.com" target="_blank">Visit Example</a>

Lorsque vous cliquez sur ce lien, un nouvel onglet s'ouvre normalement. Pour gérer cela dans Cypress :

describe('Handle multiple windows by intercepting', () => {
  it('should intercept the link and open in the same tab', () => {
    cy.visit('/');

    // Find the link and assert that it has the correct href
    cy.get('a[target="_blank"]').should('have.attr', 'href', 'https://example.com');

    // Instead of opening a new tab, you can visit the link in the same window
    cy.get('a[target="_blank"]').invoke('removeAttr', 'target').click();

    // Now verify that you are on the new page
    cy.url().should('include', 'https://example.com');
  });
});

Dans cet exemple :

Invoke('removeAttr', 'target') garantit que le lien ne s'ouvre pas dans un nouvel onglet mais dans celui actuel.
Cypress peut alors visiter la nouvelle page dans la même fenêtre, ce qui facilite la poursuite de l'interaction avec les éléments de la nouvelle page.

2. Fenêtre Stub ou Mock.Ouvrir les appels
Certaines applications utilisent JavaScript pour ouvrir par programme de nouveaux onglets via window.open(). Vous pouvez intercepter ces appels et empêcher le navigateur d'ouvrir une nouvelle fenêtre en supprimant la fonction window.open.

Exemple :

describe('Handle window.open', () => {
  it('should stub the window.open and visit the URL directly', () => {
    cy.visit('/');

    // Stub the window.open function
    cy.window().then((win) => {
      cy.stub(win, 'open').as('windowOpen');
    });

    // Click the button that triggers window.open
    cy.get('#open-new-tab-button').click();

    // Check that the window.open call was made with the expected URL
    cy.get('@windowOpen').should('be.calledWith', 'https://example.com');

    // Instead of opening a new window, we can visit the URL directly in the current tab
    cy.visit('https://example.com');

    // Now verify the URL and page content
    cy.url().should('include', 'https://example.com');
  });
});

Dans cet exemple :

Nous supprimons la méthode window.open à l'aide de cy.stub() de Cypress et l'empêchons d'ouvrir une nouvelle fenêtre.
Vous pouvez ensuite affirmer que window.open a été appelé avec la bonne URL et rediriger le test vers l'URL cible à l'aide de cy.visit().

3. Simuler le changement d'emplacement de la fenêtre
Si l'application modifie window.location pour accéder à une autre page ou fenêtre, Cypress peut directement l'intercepter et la gérer. Cette méthode est particulièrement utile lorsque des redirections de fenêtres sont impliquées.

Exemple :

describe('Simulate window.location change', () => {
  it('should simulate window location change', () => {
    cy.visit('/');

    // Trigger an event that changes the window location
    cy.window().then((win) => {
      win.location.href = 'https://example.com';
    });

    // Assert that the URL has changed
    cy.url().should('include', 'https://example.com');
  });
});

Meilleures pratiques pour gérer plusieurs fenêtres dans Cypress

1. Utilisez les redirections intelligemment : Essayez toujours de rediriger vers la nouvelle URL à l'aide de cy.visit() au lieu d'ouvrir de nouvelles fenêtres ou de nouveaux onglets. Cela aidera à maintenir la stabilité et l’isolement des tests.
2. Évitez d'ouvrir de nouvelles fenêtres : L'ouverture d'un nouvel onglet ou d'une nouvelle fenêtre peut perturber l'environnement de test contrôlé fourni par Cypress. Au lieu de cela, supprimez l'attribut target="_blank" ou simulez window.open.
3. Toujours affirmer les URL : Lors de la gestion des liens ou des redirections de fenêtres, affirmez toujours la modification de l'URL pour vous assurer que Cypress se trouve sur la bonne page après l'interaction.
4. Stub des dépendances externes : Pour les applications qui impliquent plusieurs fenêtres avec des services externes, envisagez de stubber les services ou interactions externes pour un test plus fiable.

Conclusion

Bien que Cypress ne prenne pas directement en charge les tests multi-fenêtres, vous pouvez toujours gérer plusieurs fenêtres et onglets en interceptant et en supprimant les appels qui ouvriraient normalement de nouveaux onglets ou fenêtres. En modifiant le comportement pour rester dans un seul onglet, vous pouvez conserver les principes fondamentaux de Cypress en matière de stabilité et de fiabilité des tests.

Ces solutions de contournement, telles que la suppression de l'attribut target="_blank", le stubbing window.open ou la simulation des changements d'emplacement de fenêtre, constituent un moyen puissant de gérer efficacement les scénarios multi-fenêtres. Commencez dès aujourd'hui à intégrer ces techniques dans vos tests Cypress pour relever facilement le défi multi-fenêtres !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!