Playwright处理JavaScript对话框异常：按钮点击无响应

问题核心是对话框监听的时机错误：点击操作触发对话框后，页面被阻塞，后续的监听注册代码没机会执行，最终导致流程卡住，看起来像是点击未生效。以下是两种可行的修复方案：

方案一：使用page.waitForEvent（官方推荐，单次对话框场景） #

通过并行处理「等待对话框」和「点击按钮」，彻底避免时序问题：

test('Handle Dialogs', async function({ page }) {
    await page.goto("https://testpages.herokuapp.com/styled/alerts/alert-test.html");
    await page.waitForLoadState('networkidle'); // 确保页面资源完全加载

    // 先创建等待对话框的Promise
    const dialogPromise = page.waitForEvent('dialog');
    // 执行点击操作
    await page.locator("#alertexamples").click();
    // 等待对话框出现并获取实例
    const alert = await dialogPromise;
    
    const text = alert.message();
    console.log("text from alert box:- ", text);
    await alert.accept();
});

方案二：提前注册单次监听（多对话框处理场景） #

如果需要多次处理对话框，提前注册一次性监听器，确保点击前监听已生效：

test('Handle Dialogs', async function({ page }) {
    await page.goto("https://testpages.herokuapp.com/styled/alerts/alert-test.html");
    await page.waitForLoadState('networkidle');

    // 提前注册一次性对话框监听（避免残留影响其他测试）
    page.once("dialog", async (alert) => {
        const text = alert.message();
        console.log("text from alert box:- ", text);
        await alert.accept();
    });

    // 执行点击操作
    await page.locator("#alertexamples").click();
    // 可选：等待对话框处理完成（或根据页面状态判断）
    await page.waitForTimeout(1000);
});

关键优化点： #

• 将waitForLoadState()改为waitForLoadState('networkidle')，确保页面所有资源加载完毕，避免按钮未完全可交互时执行点击。
• 优先使用page.waitForEvent或page.once，而非page.on，避免监听器残留导致的测试污染。

内容的提问来源于stack exchange，提问作者Anil Kumar