Laravel Dusk是什么？浏览器测试如何做？

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 Tests\Browser;

use App\Models\User; // 假设你有User模型
use Illuminate\Foundation\Testing\DatabaseMigrations;
use Laravel\Dusk\Browser;
use Tests\DuskTestCase;

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

其次，Dusk的API设计非常“Laravel化”，如果你熟悉Laravel的其他组件，你会发现Dusk的语法非常流畅和直观。它提供了一系列链式调用的方法，比如

visit()

type()

press()

assertSee()

再者，Dusk在处理一些浏览器测试中常见的痛点上做得很好，比如等待元素。在现代Web应用中，大量的JavaScript异步加载使得页面元素并非总是立即可用。Dusk内置了智能等待机制，例如

waitFor()

waitUntilMissing()

最后，Dusk在测试失败时提供的自动截图功能简直是救命稻草。当测试在CI/CD管道中运行，你无法直观看到浏览器界面时，一张失败时的截图能让你迅速定位到问题所在，无论是UI布局错误、JavaScript报错还是后端返回异常，都能一目了然。这种即时反馈对于快速迭代和修复bug至关重要。

编写高质量Dusk测试用例的关键技巧有哪些？

编写Dusk测试用例，不只是让它们能跑起来，更重要的是让它们稳定、可维护、易读。我个人在实践中总结了一些关键技巧，能让你的Dusk测试真正发挥价值。

DreamStudio

SD兄弟产品！AI 图像生成器

下载

一个非常重要的概念是Page Objects（页面对象）模式。随着你的应用越来越复杂，测试用例会越来越多，直接在测试文件中操作各种CSS选择器和XPath会变得非常臃肿和难以维护。Page Objects模式的核心思想是将页面的元素和交互逻辑封装成一个类。比如，你可以创建一个

LoginPage

// tests/Browser/Pages/LoginPage.php
<?php

namespace Tests\Browser\Pages;

use Laravel\Dusk\Browser;

class LoginPage extends Page
{
    /**
     * 获取页面的URL。
     *
     * @return string
     */
    public function url()
    {
        return '/login';
    }

    /**
     * 断言浏览器处于此页面。
     *
     * @param  \Laravel\Dusk\Browser  $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  \Laravel\Dusk\Browser  $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 Tests\Browser\Pages\LoginPage;

// ...
$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

还有，要充分利用Dusk提供的断言（Assertions）。除了

assertSee()

assertPathIs()

assertInputValue()

assertChecked()

assertSourceHas()

最后，对于异步操作和JavaScript密集型页面，智能等待是必不可少的。不要简单地使用

sleep()

waitFor()

waitUntilMissing()

waitForText()

waitForLocation()

在持续集成（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

# 示例：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()

最后，测试报告和通知。当Dusk测试在CI上运行失败时，你需要及时知道。大多数CI/CD平台都集成了测试报告功能，Dusk本身也能生成JUnit XML格式的报告。配置CI系统来解析这些报告，并在测试失败时发送通知（例如邮件、Slack消息），这样团队就能快速响应，避免问题蔓延。同时，利用Dusk失败时自动截屏的功能，将这些截图作为CI构建产物保存下来，对于远程调试非常有用。

总而言之，在CI/CD中运行Dusk测试，关键在于环境的标准化和稳定性。投入时间去优化你的CI配置，确保它能可靠地运行Dusk测试，这将在长期内为你节省大量时间和精力。