如何使用Laravel Dusk进行浏览器自动化测试？ (页面交互与断言)

laravel Dusk 本质是封装 Facebook WebDriver 的 php 客户端，后台启动真实浏览器进行端到端测试，需处理加载延迟、元素可见性等真实环境问题；启动失败主因是 chromeDriver 与 Chrome 版本不匹配或缺少 GUI 环境，CI 中须启用 headless 模式；visit() 后应使用 waitFor() 等显式等待而非直接 see()；动态交互需注意 select/attach 限制，优先用 script() 调用 js；测试间会话共享，需 tearDown 时清理 cookies 或 quit 浏览器。

直接说结论：Laravel Dusk 本质是封装了 Facebook WebDriver 的 PHP 客户端，它不运行在浏览器里，而是在后台启动 Chrome 或 firefox 实例，通过 http 协议控制真实浏览器完成交互和断言——这意味着你写的测试代码必须考虑页面加载延迟、元素可见性、路由跳转时机等真实环境问题，而不是像单元测试那样“秒执行”。

如何正确启动 Dusk 并避免 FacebookWebDriverExceptionsessionNotCreatedException

Dusk 启动失败最常见的原因是 ChromeDriver 版本与系统 Chrome 不匹配，或未配置好 display（linux/macos）或缺少 GUI 环境（CI 场景）。

• 本地开发：确保 chromedriver 在 $PATH 中，且版本与 Chrome 一致（可通过 chrome --version 和 chromedriver --version 核对）
• CI 环境（如 gitHub Actions）：必须显式安装匹配的 Chrome + ChromeDriver，并启用 headless 模式。Dusk 默认会尝试启动 GUI 浏览器，CI 上会失败
• 在 tests/DuskTestCase.php 中修改 driver() 方法，强制使用 headless 模式：

protected function driver() {     $options = (new ChromeOptions)->addArguments([         '--disable-gpu',         '--headless',         '--no-sandbox',         '--window-size=1920,1080',     ]);      return RemoteWebDriver::create(         'http://localhost:9515',         DesiredCapabilities::chrome()->setCapability(             ChromeOptions::CAPABILITY, $options         )     ); }

注意：http://localhost:9515 是 ChromeDriver 默认监听地址；若用 php artisan dusk:install 下载的驱动未自动启动，需手动运行 chromedriver --port=9515。

visit() 后为什么 see() 总失败？

visit() 只触发导航，不等待页面 dom 加载完成或 vue/react 渲染完毕。常见现象是页面已跳转，但元素还没出现，导致 see()、assertSee() 报错 “Element not found”。

• 不要依赖 see() 判断文字是否在页面上——它只检查 DOM 文本节点，不处理 css display: none 或 Vue v-if 动态隐藏
• 优先用 waitForText() 或 waitFor() 显式等待关键元素出现：

$browser->visit('/login')     ->type('email', 'test@example.com')     ->type('password', 'secret')     ->press('Login')     ->waitFor('#dashboard', 10) // 等待 ID 为 dashboard 的元素在 10 秒内出现     ->assertSee('Welcome back');

如果页面由 JS 渲染（如 Inertia / Livewire），还要加 ->pause(500) 或 ->waitUntilMissing('.loading') 避免竞态。

如何对动态表单、下拉选择、文件上传做可靠交互？

Dusk 提供的 select()、attach()、check() 等方法底层靠 CSS 选择器定位，一旦 html 结构变化（比如加了 class="form-control" 或用了 Shadow DOM），就会失效。

• select() 要求 元素必须是原生标签，不能是第三方组件（如 Select2、Vue Multiselect）包裹后的伪下拉
• 文件上传必须用绝对路径：$browser->attach('avatar', '/absolute/path/to/image.jpg'); —— 相对路径会报 File not found
• 对 JS 组件交互，绕过 Dusk 封装，直接执行 JS 获取状态或触发事件：

$browser->script("document.querySelector('[data-testid="submit-btn"]').click();"); // 或读取 Vue 实例数据（假设挂载在 window.app） $browser->script("return window.app.$data.form.email"); // 返回当前邮箱值

注意：script() 返回值会被序列化为 json，复杂对象可能丢失方法或原型链。

最常被忽略的一点：Dusk 测试默认共享同一个浏览器会话（Session），多个 Browser 实例之间 cookie 和 localStorage 是互通的。如果你在某个测试里登录了用户，下一个测试没显式退出或清理，就可能因缓存状态导致断言误判。务必在 tearDown() 或 afterEach() 中调用 $this->browse(function (Browser $browser) { $browser->driver->manage()->deleteAllCookies(); });，或更彻底地用 $browser->quit() 销毁实例。