Cypress で複数のウィンドウを処理する方法

導入

複数のウィンドウまたはタブの処理は、Web アプリケーションのエンドツーエンド テストを実行する際の最も一般的なシナリオの 1 つです。これは、リンクをクリックして新しいタブまたはポップアップ ウィンドウを開くときに発生する可能性があります。ただし、Cypress はデフォルトで単一のブラウザ タブでテストを実行し、複数のブラウザ ウィンドウまたはタブとの直接対話をサポートしません。

この投稿では、複数のタブの動作を模倣し、テストをスムーズに実行し続けるためのいくつかの回避策とベスト プラクティスを使用して、Cypress で複数のウィンドウを処理する方法を検討します。

Cypress のシングル ウィンドウの制限

Cypress は、単一のタブ内で実行するように設計されているため、マルチウィンドウ テストのネイティブ サポートを提供しません。この設計の背後にある理由は、一貫性、信頼性、およびテストの分離を維持することです。ただし、いくつかの賢いトリックを使えば、マルチウィンドウのインタラクションをシミュレートしたり、新しいタブやウィンドウによってトリガーされる動作を検証したりすることができます。

Cypress で複数のウィンドウを処理するためのテクニック

Cypress で複数のウィンドウを処理するための一般的なアプローチをいくつか見てみましょう:

1. 新しいタブを開かずにリンクをインターセプトしてアサートします
2. 新しいウィンドウ呼び出しのスタブまたはモック
3. ウィンドウの位置の変更をシミュレートします

1.新しいタブを開かずにリンクをインターセプトしてアサートします
一般的なシナリオは、リンクをクリックして新しいタブを開くことです。ブラウザーに新しいタブを開かせる代わりに、新しいタブで開くはずの URL をインターセプトし、リンクをアサートし、同じタブ内の URL にアクセスできます。

例:
次のようなリンクのある Web ページがあると想像してください:

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

このリンクをクリックすると、通常は新しいタブが開きます。 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');
  });
});

この例では:

invoke('removeAttr', 'target') により、リンクが新しいタブではなく現在のタブで開かれるようになります。
その後、Cypress は同じウィンドウ内の新しいページにアクセスできるため、新しいページ上の要素を簡単に操作し続けることができます。

2.スタブまたはモック window.open Calls
一部のアプリケーションは、JavaScript を使用して、window.open() 経由でプログラム的に新しいタブを開きます。 window.open 関数をスタブすることで、これらの呼び出しをインターセプトし、ブラウザーが新しいウィンドウを開くのを防ぐことができます。

例:

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

この例では:

Cypress の cy.stub() を使用して window.open メソッドをスタブ化し、新しいウィンドウが開かないようにします。
その後、window.open が正しい URL で呼び出されたことをアサートし、cy.visit() を使用してテストをターゲット URL にリダイレクトできます。

3.ウィンドウの位置変更をシミュレート
アプリケーションが別のページまたはウィンドウに移動するために window.location を変更すると、Cypress はそれを直接インターセプトして処理できます。この方法は、ウィンドウのリダイレクトが関係する場合に特に便利です。

例:

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

Cypress で複数のウィンドウを処理するためのベスト プラクティス

1. リダイレクトを賢く使用する: 実際に新しいウィンドウやタブを開くのではなく、常に cy.visit() を使用して新しい URL にリダイレクトするようにしてください。これは、テストの安定性と分離を維持するのに役立ちます。
2. 新しいウィンドウを開かないようにします: 新しいタブまたはウィンドウを開くと、サイプレスが提供する制御されたテスト環境が中断される可能性があります。代わりに、target="_blank" 属性を削除するか、window.open.
をモックします。
3. 常に URL をアサートします: リンクまたはウィンドウ リダイレクトを処理するときは、対話後に Cypress が正しいページに表示されるように、常に URL の変更をアサートします。
4. 外部依存関係のスタブ: 複数のウィンドウと外部サービスが関係するアプリケーションの場合、より信頼性の高いテストのために、外部サービスまたは相互作用をスタブ化することを検討してください。

結論

Cypress はマルチ ウィンドウ テストを直接サポートしていませんが、通常は新しいタブやウィンドウを開く呼び出しをインターセプトしてスタブすることで、複数のウィンドウやタブを処理できます。動作を 1 つのタブ内に収まるように変更することで、テストの安定性と信頼性という Cypress の中核原則を維持できます。

target="_blank" 属性の削除、window.open のスタブ化、ウィンドウの位置変更のシミュレートなどのこれらの回避策は、マルチウィンドウのシナリオを効果的に処理する強力な方法を提供します。マルチウィンドウの課題を簡単に克服するために、今すぐこれらのテクニックを Cypress テストに統合し始めてください!

以上がCypress で複数のウィンドウを処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。