如何在 Cypress 中處理多個窗口-js教程-PHP中文網

How to Handle Multiple Windows in Cypress

介紹

處理多個視窗或標籤是對 Web 應用程式執行端對端測試時最常見的場景之一。單擊連結以開啟新分頁或彈出視窗時可能會發生這種情況。但是，Cypress 預設會在單一瀏覽器標籤中執行測試，不支援與多個瀏覽器視窗或標籤直接互動。

在這篇文章中，我們將探索如何使用一些解決方法和最佳實踐來處理 Cypress 中的多個窗口，以模仿多選項卡行為並保持測試順利運行。

賽普拉斯的單一窗口限制

Cypress 不提供多視窗測試的本機支持，因為它的架構是在單一選項卡中運行。這種設計背後的原因是為了保持一致性、可靠性和測試隔離。然而，透過一些聰明的技巧，您仍然可以模擬多視窗交互，以及驗證新分頁或視窗觸發的行為。

Cypress 中處理多個視窗的技術

讓我們來看看 Cypress 中處理多個視窗的一些常見方法：

在不開啟新分頁的情況下攔截並斷言連結
存根或模擬新視窗呼叫
模擬視窗位置變化

1。在不開啟新分頁的情況下攔截並斷言連結
常見的情況是點擊開啟新分頁的連結。您可以攔截應該在新選項卡中打開的 URL，斷言鏈接，然後在同一選項卡中訪問該 URL，而不是讓瀏覽器打開新選項卡。

範例：
想像一下您有一個如下連結的網頁：

<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 呼叫
某些應用程式使用 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 中處理多個視窗的最佳實踐

巧妙地使用重定向：總是嘗試使用 cy.visit() 重定向到新 URL，而不是實際開啟新視窗或標籤。這將有助於保持測試穩定性和隔離。
避免開啟新視窗： 開啟新分頁或視窗可能會破壞賽普拉斯提供的受控測試環境。相反，刪除 target="_blank" 屬性或模擬 window.open。
總是斷言 URL： 處理連結或視窗重新導向時，請務必斷言 URL 更改，以確保互動後 Cypress 位於正確的頁面上。
存根外部依賴關係： 對於涉及多個視窗和外部服務的應用程序，請考慮存根外部服務或互動以獲得更可靠的測試。