Cypress - 警告框

Cypress - 处理 Alerts、Confirmations 和 Prompts

Cypress 提供了强大的机制来与原生浏览器对话框（如 alert、confirmation 弹出窗口和 prompt）进行交互。默认情况下，Cypress 会自动处理这些对话框，但您也可以控制其行为并验证其内容。

Window Alerts (window:alert)

浏览器 alert (window.alert()) 显示一条消息和一个“OK”按钮。Cypress 会自动点击 alert 的“OK”按钮，在测试运行期间不会视觉上显示 alert 对话框。然而，alert 的出现会记录在 Cypress Command Log 中。

要验证 alert 的文本，您需要使用 cy.on() 监听 window:alert 事件。这个事件监听器必须在触发 alert 的操作 之前 注册。

验证 Alert 文本

以下是验证 alert 文本内容的方法：

describe('Alert Handling', () => {
    beforeEach(() => {
        // Visit a page with an alert-triggering button
        // For example, a page with: <button onclick="alert('Please fill out all fields!')">Submit</button>
        cy.visit('/path-to-your-test-page.html'); // Replace with your actual test page
    });

    it('should display an alert with specific text', () => {
        // Listen for the window:alert event
        cy.on('window:alert', (alertText) => {
            // Assert the text of the alert
            expect(alertText).to.equal('Please fill out all fields!');
        );

        // Trigger the action that causes the alert
        cy.get('button#submit-button').click(); // Example selector
    });
});

在 Cypress Command Log 中，您将看到 window:alert 事件被记录，以及您的断言结果。alert 本身不会在视觉上中断测试。

Confirmation 弹出窗口 (window:confirm)

confirmation 弹出窗口 (window.confirm()) 显示一条消息，带有“OK”和“Cancel”按钮。默认情况下，Cypress 会自动点击“OK”。您可以验证 confirmation 消息，并控制是点击“OK”还是“Cancel”。

验证 Confirmation 文本并点击“OK”（默认）

要验证文本并接受 confirmation（点击“OK”）：

describe('Confirmation Pop-up Handling', () => {
    beforeEach(() => {
        cy.visit('https://the-internet.herokuapp.com/javascript_alerts');
    });

    it('should verify confirmation text and accept', () => {
        // Listen for the window:confirm event
        cy.on('window:confirm', (confirmText) => {
            expect(confirmText).to.equal('I am a JS Confirm');
            // Cypress clicks 'OK' by default, but returning true explicitly also works
            // return true;
        });

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

        // Verify the result message after clicking 'OK'
        cy.get('#result').should('have.text', 'You clicked: Ok');
    });
});

验证 Confirmation 文本并点击“Cancel”

要在 confirmation 弹出窗口上点击“Cancel”，您必须从 cy.on('window:confirm', ...) 事件处理程序中返回 false。这会覆盖 Cypress 默认点击“OK”的行为。

describe('Confirmation Pop-up Handling', () => {
    beforeEach(() => {
        cy.visit('https://the-internet.herokuapp.com/javascript_alerts');
    });

    it('should verify confirmation text and cancel', () => {
        // Listen for the window:confirm event and return false to click 'Cancel'
        cy.on('window:confirm', (confirmText) => {
            expect(confirmText).to.equal('I am a JS Confirm');
            return false; // This simulates clicking the 'Cancel' button
        });

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

        // Verify the result message after clicking 'Cancel'
        cy.get('#result').should('have.text', 'You clicked: Cancel');
    });
});

关键要点：在触发对话框的操作 之前 注册 cy.on() 事件监听器。这确保 Cypress 可以正确地拦截事件。

有关事件处理的更多信息，请参阅 Cypress 官方文档中的事件目录：Cypress 事件。