自分だけのクイズを作成しよう - Quipha
スポンサーリンク

【Laravel】Duskでブラウザテスト

【Laravel】Duskでブラウザテスト Laravel

当サイトではアフィリエイト広告を利用しています。

スポンサーリンク

はじめに

今回はDuskを利用して、ブラウザテストを実施してみます。

Laravel Sailでの開発環境の構築方法は以下をご覧ください。

Windows
Mac
使用するバージョン
  • Windows 11 or macOS Monterey (M1)
  • Laravel Framework 10
  • Dusk

他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。

スポンサーリンク

【紹介】個人開発

私の個人開発ですがQuiphaというサービスを開発しました。(Laravel, Vue3など)
良かったら、会員登録して動作を試してみて下さい。

また、Laravel 9 実践入門という書籍を出版しました。
Kindle Unlimitedを契約している方であれば、読み放題で無料でご覧いただくことができます

是非多くの方に読んでいただき、Laravelの開発に少しでもお役に立てたら幸いです。

Duskについて

Laravel Duskは、ブラウザテストの自動化およびテストAPIを提供します。
Laravelにインストールし、簡単に自動テストを行うことができます。

Laravel Dusk 10.x Laravel

VS Codeの用意

VS Codeのインストール方法は、以下の記事にまとめましたのでご覧ください。

設定方法は以下を参考にしてください。

Duskのインストール

まずはSailを利用してLaravelプロジェクトを作成します。

以下のコマンドでLaravel/Duskをインストールします。

$ sail composer require --dev laravel/dusk

本番環境へDuskはインストールできません。
インストールすると、アプリケーションに対する未認証でのアクセスを許すようになります。

composer.jsonに追加されました。

    "require-dev": {
..
        "laravel/dusk": "^7.7",
..
    },

以下のコマンドを実行し、Chromeドライバのバイナリを作成します。
完了まで少し時間がかかりました。

$ sail php artisan dusk:install

以下のバイナリが作成されました。

ChromeDriver binary successfully installed for version 114.0.5735.90.

テストを実行するには以下のコマンドを実行します。

$ sail dusk

PHPUnit 10.2.2 by Sebastian Bergmann and contributors.

Runtime:       PHP 8.2.6
Configuration: /var/www/html/phpunit.dusk.xml

.                                                                   1 / 1 (100%)

Time: 00:15.820, Memory: 12.00 MB

OK (1 test, 1 assertion)

正常にテストが完了します。

スポンサーリンク

テストの作成

実際にDBのテーブルにデータを追加し処理を行い、その結果をテストしてみましょう。
今回はログイン機能をテストします。

以下のコマンドを実行し、テストファイルを作成します。

$ sail php artisan dusk:make LoginTest

tests/Browserフォルダに作成されます。

Laravel tests/Browser フォルダ

作成直後は以下のようなコードになっています。

<?php

namespace Tests\Browser;

use Illuminate\Foundation\Testing\DatabaseMigrations;
use Laravel\Dusk\Browser;
use Tests\DuskTestCase;

class LoginTest extends DuskTestCase
{
    /**
     * A Dusk test example.
     */
    public function testExample(): void
    {
        $this->browse(function (Browser $browser) {
            $browser->visit('/')
                    ->assertSee('Laravel');
        });
    }
}

試しにログイン機能をテストするために、以下を参考にログイン機能を導入しましょう。

テストを実行する際にデータを追加し、テストが終了したらデータをクリアします。
そのため、DatabaseMigrationsを利用します。

以降の操作でDBのデータがクリアされますのでご注意ください。
必ずテストデータベースを用意してください。

EmailとPasswordにログイン情報を入力し、「LOG IN」ボタンをクリックします。
ログイン後、ダッシュボードへ遷移することを確認します。

Laravel Breeze Login画面

テストソースを以下のように修正します。

<?php

namespace Tests\Browser;

use Illuminate\Foundation\Testing\DatabaseMigrations;
use Laravel\Dusk\Browser;
use Tests\DuskTestCase;
use App\Models\User;

class LoginTest extends DuskTestCase
{
    // テスト後データクリア
    use DatabaseMigrations;

    /**
     * A Dusk test example.
     */
    public function testExample(): void
    {

        // ログインユーザを作成
        $user = User::factory()->create([
            'email' => 'xxx@laravel.com',
        ]);

        $this->browse(function (Browser $browser) use ($user) {
            // ログイン画面を開く
            $browser->visit('/login')
                // 認証情報
                ->type('email', $user->email)
                ->type('password', 'password')
                // ログインボタンをクリック
                ->press('button[type="submit"]')
                // ダッシュボードへ遷移することを確認
                ->assertPathIs('/dashboard');
        });
    }
}

以下のコマンドでテストを実行します。

$ sail dusk

テストが正常に完了することを確認しましょう。

また、ログイン後の画面のテストもできます。
ログイン後に表示できるプロフィール画面をテストしてみましょう。

Laravel Breeze プロフィール画面

ログインを行い、プロフィール画面のメールアドレスが正しいことを確認します。

    public function testProfile(): void
    {
        // ログインユーザを作成
        $user = User::factory()->create([
            'email' => 'xxx@laravel.com',
        ]);

        $this->browse(function ($browser) {
            // ログイン
            $browser->loginAs(User::find(1))
                ->visit('/profile')
                // ログイン必須のページをチェック
                ->assertPathIs('/profile')
                // Email入力ボックスに正しいメールアドレスがあること
                ->assertValue('#email', 'xxx@laravel.com');
        });
    }

様々なブラウザテストを行うことができます。

その他

初学者へ

Laravelを初めて触る方へ向け、手順やアドバイスをまとめました。

外部サーバーへ公開

作成したアプリは公開して使ってもらいましょう!
Laravelアプリケーションを外部公開する方法をまとめました。

脆弱性対策

脆弱性を抱えたアプリケーションの場合、攻撃を受ける可能性があり大変危険です。
作成したアプリケーションは、脆弱性対策も意識しましょう。

GitHubと連携

GitHubと連携する方法を解説しました。
プロジェクトの管理はGitHubを活用しましょう。

GitHub Copilot

GitHub Copilotを導入し、AIにコーディングをサポートしてもらうこともできます。

さいごに

今回はDuskを利用して、ブラウザテストを実施してみました。
自動テストを活用して、品質の高いアプリケーションを作成しましょう。

他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。

\オススメ/

コメント