Cypress 是当前最火热的前端端对端测试框架之一，它的使用相对简单，易于上手，且功能强大。然而，当遇到需要手动交互的弹框时，Cypress 就面临一定的挑战，因为弹框不属于页面的 DOM 结构，无法直接定位和操作。
在本文中，我们将探讨如何在 Cypress 中处理弹框交互。
弹框类型
在开始处理弹框之前，我们需要了解不同类型的弹框。
JavaScript 弹框
JavaScript 弹框通常包括 alert、confirm 和 prompt 三种，它们都是默认弹窗，阻止了页面的正常操作，直至被关闭为止。在处理这种类型的弹框时，我们需要使用 window.alert、window.confirm 和 window.prompt 方法来获取它们的状态。
HTML 弹框
HTML 弹框是在页面加载时就创建好的一个 HTML 元素，一般位于页面底部或顶部，对页面的操作并不会被阻碍。在处理这种类型的弹框时，我们需要使用 Cypress 的 cy.get 方法来获取它们的 DOM 元素。
模态框
模态框是一种比较特殊的弹框，它是在当前页面打开一个弹出层，通过模拟页面的响应来防止用户操作页面。模态框和 HTML 弹框有些相似，需要使用 Cypress 的 cy.get 方法来获取它们的 DOM 元素，不过处理方式则需要特别注意。
处理弹框交互
处理 JavaScript 弹框
使用 Cypress 的 window 命名空间可以访问浏览器环境下的全局变量，因此我们可以使用 cy.window 和 cy.stub 方法模拟弹框。下面是一个处理 window.alert 案例的示例代码：
it('should handle window.alert', () => {
const stub = cy.stub()
cy.on('window:alert', stub)
cy.get('button').click()
.then(() => {
expect(stub.getCall(0)).to.be.calledWith('Hello, world!')
})
})如果需要测试 window.confirm 或 window.prompt，可以使用 Cypress 的 cy.window 方法和 cy.stub 方法类似地处理。
处理 HTML 弹框
在处理 HTML 弹框时，我们可以使用 Cypress 的 cy.get 方法定位到弹框元素，并使用 cy.contains 方法检查其中的文本内容，然后用 cy.get('button') 方法模拟点击关闭按钮。下面是一个处理 HTML 弹框的示例代码：
it('should handle HTML dialog', () => {
cy.get('#myModal').should('be.visible')
cy.contains('Some text in the modal.').should('be.visible')
cy.get('.close').click()
cy.get('#myModal').should('not.be.visible')
})处理模态框
处理模态框需要先使用 Cypress 的 cy.get 方法获取模态框元素，然后模拟模态框的打开和关闭。模拟打开模态框需要执行模态框触发器的交互操作，例如点击按钮或链接，而模拟关闭模态框需要执行模态框内部关闭按钮的交互操作。下面是一个处理模态框的示例代码：
it('should handle modal', () => {
cy.get('#myModal').should('not.be.visible')
cy.contains('Open Modal').click()
cy.get('#myModal').should('be.visible')
cy.get('.close').click()
cy.get('#myModal').should('not.be.visible')
})总结
本文介绍了在 Cypress 中处理弹框的几种方法，并通过示例代码演示了如何处理不同类型的弹框。需要注意的是，在处理弹框时需要深入了解它们的特性及各自的处理方法，以确保测试脚本的可靠性和有效性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6540de827d4982a6eba70bfa