如何在 Cypress 中处理多个窗口

介绍

处理多个窗口或选项卡是对 Web 应用程序执行端到端测试时最常见的场景之一。单击链接打开新选项卡或弹出窗口时可能会发生这种情况。但是，Cypress 默认情况下在单个浏览器选项卡中运行测试，不支持与多个浏览器窗口或选项卡直接交互。

在这篇文章中，我们将探索如何使用一些解决方法和最佳实践来处理 Cypress 中的多个窗口，以模仿多选项卡行为并保持测试顺利运行。

赛普拉斯的单一窗口限制

Cypress 不提供对多窗口测试的本机支持，因为它的架构是在单个选项卡中运行。这种设计背后的原因是为了保持一致性、可靠性和测试隔离。然而，通过一些聪明的技巧，您仍然可以模拟多窗口交互，以及验证新选项卡或窗口触发的行为。

Cypress 中处理多个窗口的技术

让我们看一下 Cypress 中处理多个窗口的一些常见方法：

1. 在不打开新选项卡的情况下拦截和断言链接
2. 存根或模拟新窗口调用
3. 模拟窗口位置变化

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 中处理多个窗口的最佳实践

1. 巧妙地使用重定向：始终尝试使用 cy.visit() 重定向到新 URL，而不是实际打开新窗口或选项卡。这将有助于保持测试稳定性和隔离性。
2. 避免打开新窗口： 打开新选项卡或窗口可能会破坏赛普拉斯提供的受控测试环境。相反，删除 target="_blank" 属性或模拟 window.open。
3. 始终断言 URL： 处理链接或窗口重定向时，始终断言 URL 更改，以确保交互后 Cypress 位于正确的页面上。
4. 存根外部依赖关系： 对于涉及多个窗口和外部服务的应用程序，请考虑存根外部服务或交互以获得更可靠的测试。

结论

虽然 Cypress 不直接支持多窗口测试，但您仍然可以通过拦截和存根通常会打开新选项卡或窗口的调用来处理多个窗口和选项卡。通过修改行为以保持在单个选项卡内，您可以维护 Cypress 测试稳定性和可靠性的核心原则。

这些解决方法，例如删除 target="_blank" 属性、存根 window.open 或模拟窗口位置更改，提供了有效处理多窗口场景的强大方法。立即开始将这些技术集成到您的 Cypress 测试中，轻松克服多窗口挑战！

以上是如何在 Cypress 中处理多个窗口的详细内容。更多信息请关注PHP中文网其他相关文章！