Laravel Dusk是Laravel官方提供的浏览器自动化测试工具，用于模拟用户操作进行端到端测试。它通过安装Dusk包并生成测试文件来编写测试用例，支持访问页面、填写表单、点击按钮及断言结果。使用DatabaseMigrations等trait可确保测试数据隔离，其API设计直观，集成智能等待和失败截图功能，提升测试稳定性与调试效率。通过Page Objects模式可提高测试可维护性，将页面元素与操作封装复用。在CI/CD中运行时需配置无头Chrome、Chromedriver及环境依赖，建议使用Docker保证环境一致，并利用JUnit报告与截图实现快速反馈。执行命令为php artisan dusk，适用于本地或持续集成环境中的自动化测试验证。
Laravel Dusk是Laravel官方提供的一个浏览器自动化测试工具，它允许你像真实用户一样与你的应用进行交互，通过模拟点击、填写表单、导航等操作，来验证应用程序的端到端功能。简单来说，它就是让你的代码去“扮演”一个用户，然后看看你的网站是不是按照预期那样工作。浏览器测试，也就是所谓的端到端（E2E）测试，主要是通过自动化脚本在真实的浏览器环境中运行你的应用，检查从前端界面到后端逻辑的整个流程是否顺畅无误。
解决方案
要进行浏览器测试，尤其是使用Laravel Dusk，核心在于配置环境、编写测试脚本和执行这些脚本。
首先，你需要确保你的Laravel项目已经安装了Dusk。这通常通过Composer完成：
composer require --dev laravel/dusk php artisan dusk:install
安装完成后，Dusk会在你的
tests
目录下创建一个
Browser
文件夹，里面包含一个示例测试文件。
接着，我们就可以开始编写一个简单的浏览器测试了。假设我们有一个登录页面，我们需要测试用户能否成功登录。
// tests/Browser/LoginTest.php <?php namespace TestsBrowser; use appModelsUser; // 假设你有User模型 use IlluminateFoundationTestingDatabaseMigrations; use LaravelDuskBrowser; use TestsDuskTestCase; class LoginTest extends DuskTestCase { use DatabaseMigrations; // 确保每次测试都有干净的数据库状态 /** * 测试用户能否成功登录。 * * @return void */ public function testUserCanLogin() { $user = User::factory()->create([ // 创建一个测试用户 'email' => 'test@example.com', 'password' => bcrypt('password'), ]); $this->browse(function (Browser $browser) use ($user) { $browser->visit('/login') // 访问登录页面 ->type('email', $user->email) // 填写邮箱 ->type('password', 'password') // 填写密码 ->press('Login') // 点击登录按钮 ->assertPathIs('/home') // 断言跳转到了/home页面 ->assertSee('Dashboard'); // 断言页面上显示了"Dashboard"文本 }); } /** * 测试用户输入错误凭据时无法登录。 * * @return void */ public function testUserCannotLoginWithInvalidCredentials() { $this->browse(function (Browser $browser) { $browser->visit('/login') ->type('email', 'wrong@example.com') ->type('password', 'wrong-password') ->press('Login') ->assertPathIs('/login') // 断言还在登录页面 ->assertSee('These credentials do not match our records.'); // 断言显示错误信息 }); } }
这段代码首先创建了一个测试用户，然后模拟用户访问登录页，输入凭据，点击登录。最后，通过断言（
assertPathIs
和
assertSee
）来验证操作结果是否符合预期。
要运行这些测试，你只需在命令行中执行：
php artisan dusk
Dusk会自动启动一个Chromium浏览器（通常是无头模式，也就是没有图形界面的模式），执行你的测试，并报告结果。如果测试失败，Dusk还会自动截屏，帮助你定位问题。
为什么选择Laravel Dusk进行端到端测试？
老实说，对于Laravel开发者而言，Dusk的吸引力是巨大的。它不仅仅是一个浏览器自动化工具，更是深度融入了Laravel生态系统。我个人觉得，它最大的优势在于其无缝的集成体验和简洁直观的API。
首先，作为Laravel的官方工具，Dusk与框架的其他部分协同工作得天衣无缝。你不需要为了进行E2E测试而引入一个完全独立的、可能需要额外配置的框架。Dusk直接利用了Laravel的测试环境，比如数据库迁移（
DatabaseMigrations
trait），这让测试数据的准备变得异常简单。你可以在测试开始前轻松地创建、填充或清空数据库，确保每次测试都在一个干净、可预测的状态下运行。
其次，Dusk的API设计非常“Laravel化”，如果你熟悉Laravel的其他组件，你会发现Dusk的语法非常流畅和直观。它提供了一系列链式调用的方法，比如
visit()
、
type()
、
press()
、
assertSee()
等等，这些方法高度抽象了浏览器操作，让编写测试用例更像是用自然语言描述用户行为，而不是与复杂的Selenium或WebDriver API直接打交道。这种设计大大降低了学习曲线，让开发者能够更快地投入到测试编写中。
再者，Dusk在处理一些浏览器测试中常见的痛点上做得很好，比如等待元素。在现代Web应用中，大量的JavaScript异步加载使得页面元素并非总是立即可用。Dusk内置了智能等待机制，例如
waitFor()
、
waitUntilMissing()
等，它会在执行操作前自动等待元素出现或消失，这大大减少了测试的“假阳性”失败（即因为元素未加载完成而失败，而非实际功能错误）。这玩意儿真的能省去不少调试时间。
最后，Dusk在测试失败时提供的自动截图功能简直是救命稻草。当测试在CI/CD管道中运行，你无法直观看到浏览器界面时，一张失败时的截图能让你迅速定位到问题所在，无论是UI布局错误、JavaScript报错还是后端返回异常，都能一目了然。这种即时反馈对于快速迭代和修复bug至关重要。
编写高质量Dusk测试用例的关键技巧有哪些？
编写Dusk测试用例，不只是让它们能跑起来，更重要的是让它们稳定、可维护、易读。我个人在实践中总结了一些关键技巧，能让你的Dusk测试真正发挥价值。
一个非常重要的概念是Page Objects（页面对象）模式。随着你的应用越来越复杂，测试用例会越来越多，直接在测试文件中操作各种CSS选择器和XPath会变得非常臃肿和难以维护。Page Objects模式的核心思想是将页面的元素和交互逻辑封装成一个类。比如，你可以创建一个
LoginPage
类，里面定义了登录页的邮箱输入框、密码输入框、登录按钮等元素，以及登录操作的方法。
// tests/Browser/Pages/LoginPage.php <?php namespace TestsBrowserPages; use LaravelDuskBrowser; class LoginPage extends Page { /** * 获取页面的URL。 * * @return string */ public function url() { return '/login'; } /** * 断言浏览器处于此页面。 * * @param LaravelDuskBrowser $browser * @return void */ public function assert(Browser $browser) { $browser->assertPathIs($this->url()); } /** * 获取页面元素的选择器。 * * @return array<string, string> */ public function elements() { return [ '@emailField' => 'input[name="email"]', '@passwordField' => 'input[name="password"]', '@loginButton' => 'button[type="submit"]', ]; } /** * 执行登录操作。 * * @param LaravelDuskBrowser $browser * @param string $email * @param string $password * @return void */ public function login(Browser $browser, string $email, string $password) { $browser->type('@emailField', $email) ->type('@passwordField', $password) ->press('@loginButton'); } }
然后在你的测试中，你可以这样使用：
// tests/Browser/LoginTest.php use TestsBrowserPagesLoginPage; // ... $this->browse(function (Browser $browser) use ($user) { $browser->visit(new LoginPage()) ->on(new LoginPage()) // 进入LoginPage上下文 ->login($user->email, 'password') // 调用Page Object中的方法 ->assertPathIs('/home'); });
这样一来，如果登录页面的某个选择器变了，你只需要修改
LoginPage
这一个文件，而不是散落在各个测试用例中的几十个地方。这大大提高了测试的可维护性。
另一个关键是测试数据的管理。Dusk测试通常涉及数据库操作，比如创建用户、文章等。每次运行测试时，你都希望有一个干净、一致的数据库状态。使用
DatabaseMigrations
和
DatabaseTransactions
（或者
RefreshDatabase
）trait，结合Laravel的工厂（Factories）和数据填充（Seeders），可以高效地管理测试数据。确保你的测试是原子性的，即每个测试用例都是独立的，不依赖于其他测试用例的执行顺序或状态。
还有，要充分利用Dusk提供的断言（Assertions）。除了
assertSee()
和
assertPathIs()
，还有很多实用的断言，比如
assertInputValue()
（检查表单输入框的值）、
assertChecked()
（检查复选框是否被选中）、
assertSourceHas()
（检查页面源码是否包含某个字符串）等等。选择最能精确验证你期望结果的断言，避免模糊的断言，这能让你的测试更健壮。
最后，对于异步操作和JavaScript密集型页面，智能等待是必不可少的。不要简单地使用
sleep()
，那会使测试变得缓慢且不稳定。优先使用
waitFor()
、
waitUntilMissing()
、
waitForText()
、
waitForLocation()
等Dusk内置的等待方法。这些方法会轮询检查条件，一旦满足就继续执行，比固定等待时间要高效和可靠得多。
在持续集成（CI/CD）环境中运行Dusk测试的实践建议
将Dusk测试集成到CI/CD流程中，是确保代码质量和快速交付的关键一步。但在实际操作中，CI环境与本地开发环境往往存在差异，这可能导致测试失败或运行不稳定。我在这方面也踩过不少坑，所以有些经验想分享。
首先，无头浏览器是CI环境的标配。在CI服务器上，通常没有图形界面来运行完整的浏览器。Dusk默认就会尝试使用无头模式的Chrome。你需要确保CI服务器上安装了Google Chrome浏览器和对应的Chromedriver。很多CI服务（如GitHub Actions、GitLab CI）都提供了预构建的Docker镜像，或者有方便的配置方式来安装这些依赖。例如，在GitHub Actions中，你可以使用
setup-chrome
这样的action来快速配置。
# 示例：GitHub Actions配置 jobs: dusk: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: shivammathur/setup-php@v2 with: php-version: '8.2' extensions: dom, curl, libxml, mbstring, zip, pcntl, pdo, pdo_mysql ini-values: post_max_size=256M, upload_max_filesize=256M - name: Install Node.js uses: actions/setup-node@v3 with: node-version: '18' - name: Install Composer Dependencies run: composer install --no-dev --no-interaction --prefer-dist - name: Install NPM Dependencies run: npm install - name: Build Assets run: npm run build - name: Install Chrome run: | sudo apt-get update sudo apt-get install -y google-chrome-stable - name: Install Chromedriver run: | CHROME_VERSION=$(google-chrome --version | grep -oP 'd+.d+.d+' | head -1) wget "https://edgedl.me.gvt1.com/edgedl/chrome/chrome-for-testing/`echo $CHROME_VERSION | cut -d'.' -f1`/linux64/chromedriver-linux64.zip" unzip chromedriver-linux64.zip sudo mv chromedriver-linux64/chromedriver /usr/local/bin/chromedriver sudo chmod +x /usr/local/bin/chromedriver - name: Prepare Laravel Environment run: | cp .env.example .env php artisan key:generate php artisan migrate --force php artisan db:seed --force # 如果你的测试需要seed数据 - name: Run Dusk Tests run: php artisan dusk
其次，环境配置的一致性至关重要。CI环境通常是临时的、隔离的，你需要确保所有运行Dusk测试所需的依赖（如PHP版本、Composer依赖、Node.js及NPM依赖，甚至数据库服务）都已正确安装和配置。使用Docker容器来构建CI环境是一个非常好的实践，它可以确保你的CI环境与本地开发环境尽可能地保持一致，减少“在我机器上能跑”的问题。
另外，处理网络延迟和资源限制。CI服务器的性能可能不如你的开发机，网络延迟也可能更高。这可能会导致一些原本在本地通过的Dusk测试在CI上失败，因为页面加载时间、JavaScript执行时间可能更长。Dusk的智能等待机制在这里再次发挥作用，但你可能需要适当调整一些
waitFor()
的超时时间，或者确保你的CI环境有足够的资源。如果测试经常因为超时而失败，那可能意味着你的CI环境不够稳定，或者你的测试本身对时间过于敏感。
最后，测试报告和通知。当Dusk测试在CI上运行失败时，你需要及时知道。大多数CI/CD平台都集成了测试报告功能，Dusk本身也能生成JUnit XML格式的报告。配置CI系统来解析这些报告，并在测试失败时发送通知（例如邮件、Slack消息），这样团队就能快速响应，避免问题蔓延。同时，利用Dusk失败时自动截屏的功能，将这些截图作为CI构建产物保存下来，对于远程调试非常有用。
总而言之，在CI/CD中运行Dusk测试，关键在于环境的标准化和稳定性。投入时间去优化你的CI配置，确保它能可靠地运行Dusk测试，这将在长期内为你节省大量时间和精力。
以上就是Laravel Dusk是什么？浏览器测试如何做？的详细内容，更多请关注css mysql php linux javascript word laravel java js 前端 php JavaScript laravel composer css chrome npm junit 封装 xml 字符串 JS 对象 异步 选择器 github docker gitlab 数据库 ui bug 自动化