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

composer require --dev laravel/dusk
php artisan dusk:install

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

DatabaseMigrations

visit()

type()

press()

assertSee()

waitFor()

waitUntilMissing()

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

DatabaseMigrations

DatabaseTransactions

RefreshDatabase

assertSee()

assertPathIs()

assertInputValue()

assertChecked()

assertSourceHas()

sleep()

waitFor()

waitUntilMissing()

waitForText()

waitForLocation()

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

waitFor()