Playwright测试对话框确认后页面重定向失效问题求助

根因 #

你的问题核心是表单默认提交行为未被阻止：点击submit按钮后，浏览器会先执行myFunction()里的跳转逻辑，但紧接着会触发表单默认的提交刷新动作，导致刚跳转到水果页面又立刻切回原页面。手动测试时浏览器跳转速度快不易察觉，但Playwright能清晰捕捉到这个回退过程。

前端代码修复 #

有两种方式阻止表单默认提交行为：

方式1：通过返回值阻止 #

修改HTML的onSubmit事件，让函数返回false来拦截默认行为：

<div class='row'>
    <form onSubmit="return myFunction()">
        <p>show dialog</p><input id='submitter' type='submit' value='OK'>
    </form>
</div>

<script>
function myFunction() {
    let result = confirm("to fruits page?");
 
    if(result) {
        console.log( 'redirect to fruits');
        document.location.href = "http://localhost:7080/fruits";
    }
    return false; // 阻止表单默认提交刷新
}
</script>

方式2：通过事件对象阻止 #

利用事件参数直接禁用默认行为，灵活性更强：

<div class='row'>
    <form onSubmit="myFunction(event)">
        <p>show dialog</p><input id='submitter' type='submit' value='OK'>
    </form>
</div>

<script>
function myFunction(event) {
    event.preventDefault(); // 优先阻止默认提交
    let result = confirm("to fruits page?");
 
    if(result) {
        console.log( 'redirect to fruits');
        document.location.href = "http://localhost:7080/fruits";
    }
}
</script>

Playwright测试代码优化 #

修复前端后，优化测试逻辑提升可靠性：

test ("test dialog2", async ({page}) => {
    // 监听并确认对话框
    page.on('dialog', async dialog => {
        console.log(dialog.message());
        await dialog.accept();
    });

    // 跳转到初始页面（若cp是自定义页面对象，替换为对应逻辑）
    await page.goto("你的初始页面URL");

    // 点击按钮同时等待页面跳转完成，避免异步时序问题
    await Promise.all([
        page.click('#submitter'),
        page.waitForNavigation({ waitUntil: 'networkidle' })
    ]);

    // 双重断言确保跳转成功
    await expect(page).toHaveURL(/fruits/);
    await expect(page.locator('body')).toContainText(/fruit/i);
});

注：如果cp是自定义页面对象，请确保cp.goto()和cp.formsubmit.click()逻辑正确，否则替换为page的对应方法。

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