Umgang mit mehreren Fenstern in Cypress

Einführung

Der Umgang mit mehreren Fenstern oder Registerkarten ist eines der häufigsten Szenarios bei der Durchführung von End-to-End-Tests für Webanwendungen. Dies kann passieren, wenn durch Klicken auf einen Link ein neuer Tab oder ein Popup-Fenster geöffnet wird. Allerdings führt Cypress Tests standardmäßig in einem einzigen Browser-Tab aus und unterstützt keine direkte Interaktion mit mehreren Browserfenstern oder -tabs.

In diesem Beitrag untersuchen wir, wie Sie mit mehreren Fenstern in Cypress umgehen, indem wir einige Problemumgehungen und Best Practices verwenden, um das Multi-Tab-Verhalten nachzuahmen und einen reibungslosen Ablauf Ihrer Tests zu gewährleisten.

Cypresss Einzelfensterbeschränkung

Cypress bietet keine native Unterstützung für Tests in mehreren Fenstern, da es so konzipiert ist, dass es auf einer einzigen Registerkarte ausgeführt werden kann. Der Grund für dieses Design besteht darin, Konsistenz, Zuverlässigkeit und Testisolation aufrechtzuerhalten. Mit einigen cleveren Tricks können Sie jedoch immer noch Interaktionen mit mehreren Fenstern simulieren und das durch neue Tabs oder Fenster ausgelöste Verhalten überprüfen.

Techniken zum Umgang mit mehreren Fenstern in Cypress

Sehen wir uns ein paar gängige Ansätze für den Umgang mit mehreren Fenstern in Cypress an:

1. Links abfangen und bestätigen, ohne neue Tabs zu öffnen
2. Neue Fensteraufrufe blockieren oder simulieren
3. Simulieren Sie die Positionsänderung des Fensters

1. Abfangen und Bestätigen von Links, ohne neue Tabs zu öffnen
Ein häufiges Szenario ist das Klicken auf einen Link, der einen neuen Tab öffnet. Anstatt den Browser den neuen Tab öffnen zu lassen, können Sie die URL abfangen, die im neuen Tab geöffnet werden soll, den Link bestätigen und die URL im selben Tab besuchen.

Beispiel:
Stellen Sie sich vor, Sie haben eine Webseite mit einem Link wie diesem:

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

Wenn Sie auf diesen Link klicken, wird normalerweise ein neuer Tab geöffnet. Um dies in Cypress zu handhaben:

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

In diesem Beispiel:

Der invoke('removeAttr', 'target') stellt sicher, dass der Link nicht in einem neuen Tab, sondern im aktuellen geöffnet wird.
Cypress kann dann die neue Seite im selben Fenster besuchen, sodass Sie problemlos weiter mit Elementen auf der neuen Seite interagieren können.

2. Stub- oder Mock-window.open-Aufrufe
Einige Anwendungen verwenden JavaScript, um neue Tabs programmgesteuert über window.open() zu öffnen. Sie können diese Aufrufe abfangen und verhindern, dass der Browser ein neues Fenster öffnet, indem Sie die Funktion window.open stoppen.

Beispiel:

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

In diesem Beispiel:

Wir stoppen die window.open-Methode mit Cypresss cy.stub() und verhindern, dass sie ein neues Fenster öffnet.
Anschließend können Sie bestätigen, dass window.open mit der richtigen URL aufgerufen wurde, und den Test mit cy.visit().

zur Ziel-URL umleiten

3. Fensterpositionsänderung simulieren
Wenn die Anwendung window.location ändert, um zu einer anderen Seite oder einem anderen Fenster zu navigieren, kann Cypress dies direkt abfangen und verarbeiten. Diese Methode ist besonders nützlich, wenn Fensterumleitungen beteiligt sind.

Beispiel:

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

Best Practices für den Umgang mit mehreren Fenstern in Cypress

1. Weiterleitungen intelligent nutzen: Versuchen Sie immer, mit cy.visit() zur neuen URL umzuleiten, anstatt tatsächlich neue Fenster oder Tabs zu öffnen. Dies wird dazu beitragen, die Teststabilität und -isolation aufrechtzuerhalten.
2. Vermeiden Sie das Öffnen neuer Fenster: Das Öffnen eines neuen Tabs oder Fensters kann die von Cypress bereitgestellte kontrollierte Testumgebung stören. Entfernen Sie stattdessen das Attribut target="_blank" oder simulieren Sie window.open.
3. URLs immer bestätigen: Bestätigen Sie beim Umgang mit Links oder Fensterumleitungen immer die URL-Änderung, um sicherzustellen, dass Cypress nach der Interaktion auf der richtigen Seite ist.
4. Stub externer Abhängigkeiten: Für Anwendungen, die mehrere Fenster mit externen Diensten umfassen, sollten Sie für einen zuverlässigeren Test das Stubbing der externen Dienste oder Interaktionen in Betracht ziehen.

Abschluss

Auch wenn Cypress Multi-Window-Tests nicht direkt unterstützt, können Sie dennoch mit mehreren Fenstern und Tabs umgehen, indem Sie die Aufrufe abfangen und blockieren, die normalerweise neue Tabs oder Fenster öffnen würden. Indem Sie das Verhalten so ändern, dass es innerhalb einer einzigen Registerkarte bleibt, können Sie die Grundprinzipien von Cypress in Bezug auf Teststabilität und -zuverlässigkeit beibehalten.

Diese Problemumgehungen, wie das Entfernen des Attributs „target="_blank", das Stubbing von window.open oder das Simulieren von Fensterpositionsänderungen, bieten eine leistungsstarke Möglichkeit, Szenarien mit mehreren Fenstern effektiv zu handhaben. Beginnen Sie noch heute damit, diese Techniken in Ihre Cypress-Tests zu integrieren, um die Multi-Window-Herausforderung mit Leichtigkeit zu meistern!

Das obige ist der detaillierte Inhalt vonUmgang mit mehreren Fenstern in Cypress. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!