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/duskphp artisan dusk:install
安装完成后，Dusk会在你的
tests
目录下创建一个
Browser
文件夹，里面包含一个示例测试文件。
接着，我们就可以开始编写一个简单的浏览器测试了。假设我们有一个登录页面，我们需要测试用户能否成功登录。
// tests/Browser/LoginTest.phpcreate([ // 创建一个测试用户 '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.phpassertPathIs($this->url()); } /** * 获取页面元素的选择器。 * * @return array */ 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.phpuse 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是什么？浏览器测试如何做？的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/146042.html
微信扫一扫 
支付宝扫一扫 
