Laravel 11/Dusk 8中Dusk测试无法触发onbeforeunload事件

问题概述 #

在Laravel Dusk测试场景下，页面跳转时无法触发onbeforeunload事件，与手动操作浏览器的表现完全不一致。

重现步骤 #

1. 创建包含onbeforeunload事件处理逻辑的路由：

Route::get('/leave', function () {
    return '<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Page</title>
    </head>
    <body>
        <h1 id="head">Test page</h1>
        <a href="/">page</a>

        <script>
            window.onbeforeunload = function(e) {
                e = e || window.event;

                if (e) {
                    e.returnValue = "Go?";
                }

                return "Go?";
            };
        </script>
    </body>
    </html>';
});

2. 编写对应的Dusk测试用例：

public function testLeave(): void
{
    $this->browse(function (Browser $browser) {
        $browser->visit('/leave')
            ->pause(15000);
    });
}

3. 运行Dusk测试。

预期行为 #

测试过程中跳转页面时，应当触发onbeforeunload事件，并弹出确认对话框。

实际行为 #

无论是通过编程方式点击链接，还是使用Dusk的导航方法跳转页面，onbeforeunload事件均未触发，也不会显示确认对话框。

补充信息 #

• Laravel 10 + Dusk 7环境下无此问题，测试可正常触发该事件；
• 手动操作浏览器时，onbeforeunload事件能正常触发；
• 移除DuskTestCase.php中的--headless=new参数后，可直接观察浏览器的实际行为。

问题分析与解决建议 #

该问题大概率和Chrome的新无头模式（--headless=new）有关，Dusk 8在Laravel 11中默认启用了该模式，而新无头模式对页面卸载类事件的处理逻辑和旧版有所差异。

可行解决方案 #

1. 回退到旧无头模式：在DuskTestCase.php的driver方法中，将--headless=new替换为--headless=old，或者直接移除该参数（以可视化模式运行测试）。
2. 模拟事件触发并验证：如果需要在新无头模式下完成测试，可以通过Dusk的script方法手动触发onbeforeunload事件，直接验证返回值，无需依赖浏览器原生对话框：

public function testLeave(): void
{
    $this->browse(function (Browser $browser) {
        $browser->visit('/leave');
        
        $result = $browser->script('return window.onbeforeunload(new Event("beforeunload"));');
        $this->assertEquals('Go?', $result[0]);
    });
}

版本信息 #

• Dusk 8.2.6
• Laravel 11.25
• PHP 8.3.3
• PHPUnit 11.3.6

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