Cypress - Prompt 弹窗

Cypress - 处理 Prompt 弹窗

Cypress 可以有效地管理 JavaScript prompt 弹窗 (window.prompt())，这类弹窗允许用户输入文本。与只能接受或关闭的 alert 或 confirm 弹窗不同，prompt 弹窗需要一种编程方式来提供输入。这可以通过结合使用 cy.window() 和 cy.stub() 来实现。

cy.window() 可以访问被测试应用的 window 对象。然后，cy.stub() 将原生的 window.prompt 函数替换为你控制的版本，允许你指定应该 ‘输入’ 到 prompt 中的文本。

示例：与 JS Prompt 交互

考虑一个网页，其中有一个按钮，点击后会触发一个 JavaScript prompt。例如，页面 https://the-internet.herokuapp.com/javascript_alerts 上有一个名为 ‘Click for JS Prompt’ 的按钮。

点击此按钮后，会弹出一个要求输入的 prompt。如果用户输入 ‘Hello Cypress!’ 并点击 ‘OK’，页面上可能会出现 ‘You entered: Hello Cypress!’ 这样的消息。

在 Cypress 中的实现

为了自动化这种交互，包括向 prompt 提供文本和验证结果，你可以编写如下的 Cypress 测试：

describe('JavaScript Prompt 处理', () => {
    beforeEach(() => {
        cy.visit('https://the-internet.herokuapp.com/javascript_alerts');
    });

    it('应该向 prompt 输入文本并验证结果', () => {
        const inputText = 'Hello Cypress!';

        cy.window().then((win) => {
            // 在 window.prompt 被调用前进行 stub
            // 当 prompt 被触发时，这个 stub 会自动被调用
            // 并会返回指定的 'inputText'
            cy.stub(win, 'prompt').returns(inputText);
        });

        // 点击触发 prompt 的按钮
        cy.contains('button', 'Click for JS Prompt').click();

        // 验证应用显示了输入的文本
        cy.get('#result').should('have.text', `You entered: ${inputText}`);
    });

    it('应该处理取消 prompt', () => {
        cy.window().then((win) => {
            // 要模拟点击 'Cancel'，stub 应该返回 null
            cy.stub(win, 'prompt').returns(null);
        });

        cy.contains('button', 'Click for JS Prompt').click();

        // 验证选择 'Cancel'（或没有输入）时的结果
        // 根据应用的逻辑，可能会显示 'You entered: null' 或空字符串
        cy.get('#result').should('have.text', 'You entered: null');
    });
});

执行分析：

1. cy.visit(): 导航到包含 JavaScript alert 的页面。

2. cy.window().then((win) => { ... }): 获取应用的 window 对象。

3. cy.stub(win, 'prompt').returns(inputText): 这是关键步骤。它将浏览器的原生 prompt 函数替换为一个 stub。当应用代码调用 window.prompt() 时，会执行我们的 stub。它会立即返回 inputText 值（或对于取消操作返回 null），模拟用户输入文本并点击 ‘OK’（或 ‘Cancel’）的行为。

4. cy.contains('button', 'Click for JS Prompt').click(): 此操作触发（已被 stub 的）prompt。

5. cy.get('#result').should(...): 验证应用对通过 stub prompt 提供的输入做出了正确响应。

Cypress 命令日志（Command Log）将显示 stub 的应用以及后续的操作和断言。这种方法可以完全控制 prompt 交互，而不会有任何可视弹窗中断测试流程。

有关 stubbing 的更多详细信息，请参阅 Cypress 关于 cy.stub() 的官方文档：cy.stub()。