Laravel Dusk

イントロダクション
インストール
- ChromeDriverインストールの管理
- 他のブラウザの使用
はじめに
ブラウザの基本
要素の操作
利用可能なアサーション
ページ
コンポーネント
- コンポーネントの生成
- コンポーネントの使用
継続的インテグレーション

イントロダクション

Laravel Duskは、表現力豊かで使いやすいブラウザ自動化およびテストAPIを提供します。デフォルトで、DuskはローカルコンピュータにJDKやSeleniumをインストールする必要はありません。代わりに、DuskはスタンドアロンのChromeDriverインストールを使用します。しかし、他のSelenium互換ドライバを自由に使用することもできます。

インストール

始めるには、Google Chromeをインストールし、プロジェクトにlaravel/dusk Composer依存関係を追加する必要があります。

1composer require laravel/dusk --dev

composer require laravel/dusk --dev

Duskのサービスプロバイダを手動で登録する場合、本番環境では絶対に登録しないでください。登録すると、任意のユーザーがアプリケーションで認証できるようになる可能性があります。

Duskパッケージをインストールした後、dusk:install Artisanコマンドを実行してください。dusk:installコマンドは、tests/Browserディレクトリ、Duskのテスト例、およびお使いのオペレーティングシステム用のChrome Driverバイナリをインストールします。

1php artisan dusk:install

php artisan dusk:install

次に、アプリケーションの.envファイルでAPP_URL環境変数を設定します。この値は、ブラウザでアプリケーションにアクセスする際に使用するURLと一致している必要があります。

ローカル開発環境の管理にLaravel Sailを使用している場合は、Duskテストの設定と実行に関するSailのドキュメントも参照してください。

ChromeDriverインストールの管理

dusk:installコマンドによってLaravel Duskがインストールするバージョンとは異なるバージョンのChromeDriverをインストールしたい場合は、dusk:chrome-driverコマンドを使用できます。

 1# Install the latest version of ChromeDriver for your OS...
 2php artisan dusk:chrome-driver
 3 
 4# Install a given version of ChromeDriver for your OS...
 5php artisan dusk:chrome-driver 86
 6 
 7# Install a given version of ChromeDriver for all supported OSs...
 8php artisan dusk:chrome-driver --all
 9 
10# Install the version of ChromeDriver that matches the detected version of Chrome / Chromium for your OS...
11php artisan dusk:chrome-driver --detect

# Install the latest version of ChromeDriver for your OS...
php artisan dusk:chrome-driver

# Install a given version of ChromeDriver for your OS...
php artisan dusk:chrome-driver 86

# Install a given version of ChromeDriver for all supported OSs...
php artisan dusk:chrome-driver --all

# Install the version of ChromeDriver that matches the detected version of Chrome / Chromium for your OS...
php artisan dusk:chrome-driver --detect

Duskはchromedriverバイナリが実行可能である必要があります。Duskの実行に問題がある場合は、次のコマンドを使用してバイナリが実行可能であることを確認してください: chmod -R 0755 vendor/laravel/dusk/bin/。

他のブラウザの使用

デフォルトでは、DuskはGoogle ChromeとスタンドアロンのChromeDriverインストールを使用してブラウザテストを実行します。しかし、独自のSeleniumサーバを起動し、任意のブラウザに対してテストを実行することもできます。

始めるには、アプリケーションのベースDuskテストケースであるtests/DuskTestCase.phpファイルを開きます。このファイル内で、startChromeDriverメソッドの呼び出しを削除できます。これにより、Duskが自動的にChromeDriverを起動するのを停止します。

1/**
2 * Prepare for Dusk test execution.
3 *
4 * @beforeClass
5 */
6public static function prepare(): void
7{
8    // static::startChromeDriver();
9}

/**
 * Prepare for Dusk test execution.
 *
 * @beforeClass
 */
public static function prepare(): void
{
    // static::startChromeDriver();
}

次に、driverメソッドを変更して、選択したURLとポートに接続するように変更できます。さらに、WebDriverに渡される「desired capabilities」を変更することもできます。

 1use Facebook\WebDriver\Remote\RemoteWebDriver;
 2 
 3/**
 4 * Create the RemoteWebDriver instance.
 5 */
 6protected function driver(): RemoteWebDriver
 7{
 8    return RemoteWebDriver::create(
 9        'https://:4444/wd/hub', DesiredCapabilities::phantomjs()
10    );
11}

use Facebook\WebDriver\Remote\RemoteWebDriver;

/**
 * Create the RemoteWebDriver instance.
 */
protected function driver(): RemoteWebDriver
{
    return RemoteWebDriver::create(
        'https://:4444/wd/hub', DesiredCapabilities::phantomjs()
    );
}

はじめに

テストの生成

Duskテストを生成するには、dusk:make Artisanコマンドを使用します。生成されたテストはtests/Browserディレクトリに配置されます。

1php artisan dusk:make LoginTest

php artisan dusk:make LoginTest

作成するテストのほとんどは、アプリケーションのデータベースからデータを取得するページと対話しますが、DuskテストではRefreshDatabaseトレイトを使用しないでください。RefreshDatabaseトレイトは、HTTPリクエスト間で適用または利用できないデータベーストランザクションを利用します。代わりに、DatabaseMigrationsトレイトとDatabaseTruncationトレイトの2つのオプションがあります。

データベースマイグレーションの使用

DatabaseMigrationsトレイトは、各テストの前にデータベースマイグレーションを実行します。しかし、各テストでデータベーステーブルを削除して再作成するのは、通常、テーブルを切り捨てるよりも時間がかかります。

1<?php
2 
3use Illuminate\Foundation\Testing\DatabaseMigrations;
4use Laravel\Dusk\Browser;
5 
6uses(DatabaseMigrations::class);
7 
8//

<?php

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

uses(DatabaseMigrations::class);

//

 1<?php
 2 
 3namespace Tests\Browser;
 4 
 5use Illuminate\Foundation\Testing\DatabaseMigrations;
 6use Laravel\Dusk\Browser;
 7use Tests\DuskTestCase;
 8 
 9class ExampleTest extends DuskTestCase
10{
11    use DatabaseMigrations;
12 
13    //
14}

<?php

namespace Tests\Browser;

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

class ExampleTest extends DuskTestCase
{
    use DatabaseMigrations;

    //
}

Duskテストを実行する際に、SQLiteのインメモリデータベースは使用できません。ブラウザは独自のプロセス内で実行されるため、他のプロセスのインメモリデータベースにアクセスすることはできません。

データベースの切り捨ての使用

DatabaseTruncationトレイトは、最初のテストでデータベースをマイグレーションし、データベーステーブルが適切に作成されていることを保証します。しかし、後続のテストでは、データベースのテーブルは単に切り捨てられ、すべてのデータベースマイグレーションを再実行するよりも速度が向上します。

1<?php
2 
3use Illuminate\Foundation\Testing\DatabaseTruncation;
4use Laravel\Dusk\Browser;
5 
6uses(DatabaseTruncation::class);
7 
8//

<?php

use Illuminate\Foundation\Testing\DatabaseTruncation;
use Laravel\Dusk\Browser;

uses(DatabaseTruncation::class);

//

 1<?php
 2 
 3namespace Tests\Browser;
 4 
 5use App\Models\User;
 6use Illuminate\Foundation\Testing\DatabaseTruncation;
 7use Laravel\Dusk\Browser;
 8use Tests\DuskTestCase;
 9 
10class ExampleTest extends DuskTestCase
11{
12    use DatabaseTruncation;
13 
14    //
15}

<?php

namespace Tests\Browser;

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

class ExampleTest extends DuskTestCase
{
    use DatabaseTruncation;

    //
}

デフォルトでは、このトレイトはmigrationsテーブルを除くすべてのテーブルを切り捨てます。切り捨てるテーブルをカスタマイズしたい場合は、テストクラスに$tablesToTruncateプロパティを定義できます。

Pestを使用している場合は、ベースのDuskTestCaseクラスまたはテストファイルが拡張するクラスにプロパティやメソッドを定義する必要があります。

1/**
2 * Indicates which tables should be truncated.
3 *
4 * @var array
5 */
6protected $tablesToTruncate = ['users'];

/**
 * Indicates which tables should be truncated.
 *
 * @var array
 */
protected $tablesToTruncate = ['users'];

あるいは、テストクラスに$exceptTablesプロパティを定義して、切り捨てから除外するテーブルを指定することもできます。

1/**
2 * Indicates which tables should be excluded from truncation.
3 *
4 * @var array
5 */
6protected $exceptTables = ['users'];

/**
 * Indicates which tables should be excluded from truncation.
 *
 * @var array
 */
protected $exceptTables = ['users'];

テーブルを切り捨てるデータベース接続を指定するには、テストクラスに$connectionsToTruncateプロパティを定義できます。

1/**
2 * Indicates which connections should have their tables truncated.
3 *
4 * @var array
5 */
6protected $connectionsToTruncate = ['mysql'];

/**
 * Indicates which connections should have their tables truncated.
 *
 * @var array
 */
protected $connectionsToTruncate = ['mysql'];

データベースの切り捨てが実行される前後にコードを実行したい場合は、テストクラスにbeforeTruncatingDatabaseまたはafterTruncatingDatabaseメソッドを定義できます。

 1/**
 2 * Perform any work that should take place before the database has started truncating.
 3 */
 4protected function beforeTruncatingDatabase(): void
 5{
 6    //
 7}
 8 
 9/**
10 * Perform any work that should take place after the database has finished truncating.
11 */
12protected function afterTruncatingDatabase(): void
13{
14    //
15}

/**
 * Perform any work that should take place before the database has started truncating.
 */
protected function beforeTruncatingDatabase(): void
{
    //
}

/**
 * Perform any work that should take place after the database has finished truncating.
 */
protected function afterTruncatingDatabase(): void
{
    //
}

テストの実行

ブラウザテストを実行するには、dusk Artisanコマンドを実行します。

1php artisan dusk

php artisan dusk

前回duskコマンドを実行したときにテストが失敗した場合は、dusk:failsコマンドを使用して最初に失敗したテストを再実行することで時間を節約できます。

1php artisan dusk:fails

php artisan dusk:fails

duskコマンドは、Pest / PHPUnitテストランナーが通常受け入れるすべての引数を受け入れます。たとえば、特定のグループのテストのみを実行できます。

1php artisan dusk --group=foo

php artisan dusk --group=foo

ローカル開発環境の管理にLaravel Sailを使用している場合は、Duskテストの設定と実行に関するSailのドキュメントを参照してください。

ChromeDriverの手動起動

デフォルトでは、Duskは自動的にChromeDriverを起動しようとします。これが特定のシステムで機能しない場合は、duskコマンドを実行する前に手動でChromeDriverを起動できます。ChromeDriverを手動で起動することを選択した場合は、tests/DuskTestCase.phpファイルの次の行をコメントアウトする必要があります。

1/**
2 * Prepare for Dusk test execution.
3 *
4 * @beforeClass
5 */
6public static function prepare(): void
7{
8    // static::startChromeDriver();
9}

/**
 * Prepare for Dusk test execution.
 *
 * @beforeClass
 */
public static function prepare(): void
{
    // static::startChromeDriver();
}

さらに、ChromeDriverを9515以外のポートで起動する場合は、同じクラスのdriverメソッドを変更して正しいポートを反映させる必要があります。

 1use Facebook\WebDriver\Remote\RemoteWebDriver;
 2 
 3/**
 4 * Create the RemoteWebDriver instance.
 5 */
 6protected function driver(): RemoteWebDriver
 7{
 8    return RemoteWebDriver::create(
 9        'https://:9515', DesiredCapabilities::chrome()
10    );
11}

use Facebook\WebDriver\Remote\RemoteWebDriver;

/**
 * Create the RemoteWebDriver instance.
 */
protected function driver(): RemoteWebDriver
{
    return RemoteWebDriver::create(
        'https://:9515', DesiredCapabilities::chrome()
    );
}

環境の処理

テスト実行時にDuskに独自の環境ファイルの使用を強制するには、プロジェクトのルートに.env.dusk.{environment}ファイルを作成します。たとえば、local環境からduskコマンドを開始する場合は、.env.dusk.localファイルを作成する必要があります。

テストを実行すると、Duskは.envファイルをバックアップし、Dusk環境を.envにリネームします。テストが完了すると、.envファイルは復元されます。

ブラウザの基本

ブラウザの作成

まず、アプリケーションにログインできることを確認するテストを書いてみましょう。テストを生成した後、ログインページに移動し、資格情報を入力し、「Login」ボタンをクリックするように変更できます。ブラウザインスタンスを作成するには、Duskテスト内でbrowseメソッドを呼び出します。

 1<?php
 2 
 3use App\Models\User;
 4use Illuminate\Foundation\Testing\DatabaseMigrations;
 5use Laravel\Dusk\Browser;
 6 
 7uses(DatabaseMigrations::class);
 8 
 9test('basic example', function () {
10    $user = User::factory()->create([
11        'email' => '[email protected]',
12    ]);
13 
14    $this->browse(function (Browser $browser) use ($user) {
15        $browser->visit('/login')
16            ->type('email', $user->email)
17            ->type('password', 'password')
18            ->press('Login')
19            ->assertPathIs('/home');
20    });
21});

<?php

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

uses(DatabaseMigrations::class);

test('basic example', function () {
    $user = User::factory()->create([
        'email' => '[email protected]',
    ]);

    $this->browse(function (Browser $browser) use ($user) {
        $browser->visit('/login')
            ->type('email', $user->email)
            ->type('password', 'password')
            ->press('Login')
            ->assertPathIs('/home');
    });
});

 1<?php
 2 
 3namespace Tests\Browser;
 4 
 5use App\Models\User;
 6use Illuminate\Foundation\Testing\DatabaseMigrations;
 7use Laravel\Dusk\Browser;
 8use Tests\DuskTestCase;
 9 
10class ExampleTest extends DuskTestCase
11{
12    use DatabaseMigrations;
13 
14    /**
15     * A basic browser test example.
16     */
17    public function test_basic_example(): void
18    {
19        $user = User::factory()->create([
20            'email' => '[email protected]',
21        ]);
22 
23        $this->browse(function (Browser $browser) use ($user) {
24            $browser->visit('/login')
25                ->type('email', $user->email)
26                ->type('password', 'password')
27                ->press('Login')
28                ->assertPathIs('/home');
29        });
30    }
31}

<?php

namespace Tests\Browser;

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

class ExampleTest extends DuskTestCase
{
    use DatabaseMigrations;

    /**
     * A basic browser test example.
     */
    public function test_basic_example(): void
    {
        $user = User::factory()->create([
            'email' => '[email protected]',
        ]);

        $this->browse(function (Browser $browser) use ($user) {
            $browser->visit('/login')
                ->type('email', $user->email)
                ->type('password', 'password')
                ->press('Login')
                ->assertPathIs('/home');
        });
    }
}

上記の例でわかるように、browseメソッドはクロージャを受け入れます。ブラウザインスタンスはDuskによってこのクロージャに自動的に渡され、アプリケーションとの対話やアサーションを行うための主要なオブジェクトです。

複数のブラウザの作成

テストを適切に実行するために複数のブラウザが必要になる場合があります。たとえば、Websocketと対話するチャット画面をテストするには、複数のブラウザが必要になる場合があります。複数のブラウザを作成するには、browseメソッドに渡されるクロージャのシグネチャにブラウザ引数を追加するだけです。

 1$this->browse(function (Browser $first, Browser $second) {
 2    $first->loginAs(User::find(1))
 3        ->visit('/home')
 4        ->waitForText('Message');
 5 
 6    $second->loginAs(User::find(2))
 7        ->visit('/home')
 8        ->waitForText('Message')
 9        ->type('message', 'Hey Taylor')
10        ->press('Send');
11 
12    $first->waitForText('Hey Taylor')
13        ->assertSee('Jeffrey Way');
14});

$this->browse(function (Browser $first, Browser $second) {
    $first->loginAs(User::find(1))
        ->visit('/home')
        ->waitForText('Message');

    $second->loginAs(User::find(2))
        ->visit('/home')
        ->waitForText('Message')
        ->type('message', 'Hey Taylor')
        ->press('Send');

    $first->waitForText('Hey Taylor')
        ->assertSee('Jeffrey Way');
});

visitメソッドは、アプリケーション内の特定のURIに移動するために使用できます。

1$browser->visit('/login');

$browser->visit('/login');

visitRouteメソッドを使用して、名前付きルートに移動できます。

1$browser->visitRoute($routeName, $parameters);

$browser->visitRoute($routeName, $parameters);

backおよびforwardメソッドを使用して、「戻る」および「進む」ナビゲーションができます。

1$browser->back();
2 
3$browser->forward();

$browser->back();

$browser->forward();

refreshメソッドを使用してページをリフレッシュできます。

1$browser->refresh();

$browser->refresh();

ブラウザウィンドウのリサイズ

resizeメソッドを使用してブラウザウィンドウのサイズを調整できます。

1$browser->resize(1920, 1080);

$browser->resize(1920, 1080);

maximizeメソッドを使用してブラウザウィンドウを最大化できます。

1$browser->maximize();

$browser->maximize();

fitContentメソッドは、ブラウザウィンドウをそのコンテンツのサイズに合わせてリサイズします。

1$browser->fitContent();

$browser->fitContent();

テストが失敗すると、Duskはスクリーンショットを撮る前に自動的にブラウザをコンテンツに合わせてリサイズします。テスト内でdisableFitOnFailureメソッドを呼び出すことで、この機能を無効にできます。

1$browser->disableFitOnFailure();

$browser->disableFitOnFailure();

moveメソッドを使用して、ブラウザウィンドウを画面上の別の位置に移動できます。

1$browser->move($x = 100, $y = 100);

$browser->move($x = 100, $y = 100);

ブラウザマクロ

さまざまなテストで再利用できるカスタムブラウザメソッドを定義したい場合は、Browserクラスのmacroメソッドを使用できます。通常、このメソッドはサービスプロバイダのbootメソッドから呼び出す必要があります。

 1<?php
 2 
 3namespace App\Providers;
 4 
 5use Illuminate\Support\ServiceProvider;
 6use Laravel\Dusk\Browser;
 7 
 8class DuskServiceProvider extends ServiceProvider
 9{
10    /**
11     * Register Dusk's browser macros.
12     */
13    public function boot(): void
14    {
15        Browser::macro('scrollToElement', function (string $element = null) {
16            $this->script("$('html, body').animate({ scrollTop: $('$element').offset().top }, 0);");
17 
18            return $this;
19        });
20    }
21}

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Laravel\Dusk\Browser;

class DuskServiceProvider extends ServiceProvider
{
    /**
     * Register Dusk's browser macros.
     */
    public function boot(): void
    {
        Browser::macro('scrollToElement', function (string $element = null) {
            $this->script("$('html, body').animate({ scrollTop: $('$element').offset().top }, 0);");

            return $this;
        });
    }
}

macro関数は、最初の引数として名前を、2番目の引数としてクロージャを受け入れます。マクロのクロージャは、Browserインスタンスでマクロをメソッドとして呼び出すときに実行されます。

1$this->browse(function (Browser $browser) use ($user) {
2    $browser->visit('/pay')
3        ->scrollToElement('#credit-card-details')
4        ->assertSee('Enter Credit Card Details');
5});

$this->browse(function (Browser $browser) use ($user) {
    $browser->visit('/pay')
        ->scrollToElement('#credit-card-details')
        ->assertSee('Enter Credit Card Details');
});

認証

多くの場合、認証が必要なページをテストします。DuskのloginAsメソッドを使用すると、すべてのテストでアプリケーションのログイン画面を操作するのを回避できます。loginAsメソッドは、認証可能なモデルに関連付けられた主キーまたは認証可能なモデルインスタンスを受け入れます。

1use App\Models\User;
2use Laravel\Dusk\Browser;
3 
4$this->browse(function (Browser $browser) {
5    $browser->loginAs(User::find(1))
6        ->visit('/home');
7});

use App\Models\User;
use Laravel\Dusk\Browser;

$this->browse(function (Browser $browser) {
    $browser->loginAs(User::find(1))
        ->visit('/home');
});

loginAsメソッドを使用した後、ユーザーセッションはファイル内のすべてのテストで維持されます。

クッキー

cookieメソッドを使用して、暗号化されたクッキーの値を取得または設定できます。デフォルトでは、Laravelによって作成されたすべてのクッキーは暗号化されています。

1$browser->cookie('name');
2 
3$browser->cookie('name', 'Taylor');

$browser->cookie('name');

$browser->cookie('name', 'Taylor');

plainCookieメソッドを使用して、暗号化されていないクッキーの値を取得または設定できます。

1$browser->plainCookie('name');
2 
3$browser->plainCookie('name', 'Taylor');

$browser->plainCookie('name');

$browser->plainCookie('name', 'Taylor');

deleteCookieメソッドを使用して、指定されたクッキーを削除できます。

1$browser->deleteCookie('name');

$browser->deleteCookie('name');

JavaScriptの実行

scriptメソッドを使用して、ブラウザ内で任意のJavaScriptステートメントを実行できます。

1$browser->script('document.documentElement.scrollTop = 0');
2 
3$browser->script([
4    'document.body.scrollTop = 0',
5    'document.documentElement.scrollTop = 0',
6]);
7 
8$output = $browser->script('return window.location.pathname');

$browser->script('document.documentElement.scrollTop = 0');

$browser->script([
    'document.body.scrollTop = 0',
    'document.documentElement.scrollTop = 0',
]);

$output = $browser->script('return window.location.pathname');

スクリーンショットの撮影

screenshotメソッドを使用してスクリーンショットを撮り、指定されたファイル名で保存できます。すべてのスクリーンショットはtests/Browser/screenshotsディレクトリに保存されます。

1$browser->screenshot('filename');

$browser->screenshot('filename');

responsiveScreenshotsメソッドは、さまざまなブレークポイントで一連のスクリーンショットを撮るために使用できます。

1$browser->responsiveScreenshots('filename');

$browser->responsiveScreenshots('filename');

screenshotElementメソッドは、ページ上の特定の要素のスクリーンショットを撮るために使用できます。

1$browser->screenshotElement('#selector', 'filename');

$browser->screenshotElement('#selector', 'filename');

コンソール出力のディスクへの保存

storeConsoleLogメソッドを使用して、現在のブラウザのコンソール出力を指定されたファイル名でディスクに書き込むことができます。コンソール出力はtests/Browser/consoleディレクトリに保存されます。

1$browser->storeConsoleLog('filename');

$browser->storeConsoleLog('filename');

ページソースのディスクへの保存

storeSourceメソッドを使用して、現在のページのソースを指定されたファイル名でディスクに書き込むことができます。ページソースはtests/Browser/sourceディレクトリに保存されます。

1$browser->storeSource('filename');

$browser->storeSource('filename');

要素の操作

Duskセレクタ

要素と対話するための適切なCSSセレクタを選択することは、Duskテストを作成する上で最も難しい部分の1つです。時間の経過とともに、フロントエンドの変更により、次のようなCSSセレクタがテストを破壊する可能性があります。

1// HTML...
2 
3<button>Login</button>

// HTML...

<button>Login</button>

1// Test...
2 
3$browser->click('.login-page .container div > button');

// Test...

$browser->click('.login-page .container div > button');

Duskセレクタを使用すると、CSSセレクタを覚えるのではなく、効果的なテストの作成に集中できます。セレクタを定義するには、HTML要素にdusk属性を追加します。次に、Duskブラウザと対話するときに、セレクタの前に@を付けて、テスト内で添付された要素を操作します。

1// HTML...
2 
3<button dusk="login-button">Login</button>

// HTML...

<button dusk="login-button">Login</button>

1// Test...
2 
3$browser->click('@login-button');

// Test...

$browser->click('@login-button');

必要に応じて、selectorHtmlAttributeメソッドを介してDuskセレクタが利用するHTML属性をカスタマイズできます。通常、このメソッドはアプリケーションのAppServiceProviderのbootメソッドから呼び出す必要があります。

1use Laravel\Dusk\Dusk;
2 
3Dusk::selectorHtmlAttribute('data-dusk');

use Laravel\Dusk\Dusk;

Dusk::selectorHtmlAttribute('data-dusk');

テキスト、値、属性

値の取得と設定

Duskには、ページ上の要素の現在の値、表示テキスト、および属性と対話するためのいくつかのメソッドが用意されています。たとえば、特定のCSSまたはDuskセレクタに一致する要素の「value」を取得するには、valueメソッドを使用します。

1// Retrieve the value...
2$value = $browser->value('selector');
3 
4// Set the value...
5$browser->value('selector', 'value');

// Retrieve the value...
$value = $browser->value('selector');

// Set the value...
$browser->value('selector', 'value');

inputValueメソッドを使用して、特定のフィールド名を持つ入力要素の「value」を取得できます。

1$value = $browser->inputValue('field');

$value = $browser->inputValue('field');

テキストの取得

textメソッドは、指定されたセレクタに一致する要素の表示テキストを取得するために使用できます。

1$text = $browser->text('selector');

$text = $browser->text('selector');

属性の取得

最後に、attributeメソッドを使用して、指定されたセレクタに一致する要素の属性の値を取得できます。

1$attribute = $browser->attribute('selector', 'value');

$attribute = $browser->attribute('selector', 'value');

フォームの操作

値の入力

Duskには、フォームや入力要素と対話するためのさまざまなメソッドがあります。まず、入力フィールドにテキストを入力する例を見てみましょう。

1$browser->type('email', '[email protected]');

$browser->type('email', '[email protected]');

このメソッドは必要に応じてCSSセレクタを受け入れますが、typeメソッドにCSSセレクタを渡す必要はないことに注意してください。CSSセレクタが提供されない場合、Duskは指定されたname属性を持つinputまたはtextareaフィールドを検索します。

フィールドのコンテンツをクリアせずにテキストを追加するには、appendメソッドを使用できます。

1$browser->type('tags', 'foo')
2    ->append('tags', ', bar, baz');

$browser->type('tags', 'foo')
    ->append('tags', ', bar, baz');

clearメソッドを使用して入力の値をクリアできます。

1$browser->clear('email');

$browser->clear('email');

typeSlowlyメソッドを使用してDuskにゆっくり入力させることができます。デフォルトでは、Duskはキープレス間に100ミリ秒一時停止します。キープレス間の時間をカスタマイズするには、メソッドの3番目の引数として適切なミリ秒数を渡すことができます。

1$browser->typeSlowly('mobile', '+1 (202) 555-5555');
2 
3$browser->typeSlowly('mobile', '+1 (202) 555-5555', 300);

$browser->typeSlowly('mobile', '+1 (202) 555-5555');

$browser->typeSlowly('mobile', '+1 (202) 555-5555', 300);

appendSlowlyメソッドを使用してテキストをゆっくり追加できます。

1$browser->type('tags', 'foo')
2    ->appendSlowly('tags', ', bar, baz');

$browser->type('tags', 'foo')
    ->appendSlowly('tags', ', bar, baz');

ドロップダウン

select要素で利用可能な値を選択するには、selectメソッドを使用できます。typeメソッドと同様に、selectメソッドは完全なCSSセレクタを必要としません。selectメソッドに値を渡すときは、表示テキストではなく、基になるオプション値を渡す必要があります。

1$browser->select('size', 'Large');

$browser->select('size', 'Large');

2番目の引数を省略することで、ランダムなオプションを選択できます。

1$browser->select('size');

$browser->select('size');

selectメソッドの2番目の```php

```引数として配列を指定することで、メソッドに複数のオプションを選択させることができます。

1$browser->select('categories', ['Art', 'Music']);

$browser->select('categories', ['Art', 'Music']);

チェックボックス

チェックボックス入力を「チェック」するには、checkメソッドを使用できます。他の多くの入力関連メソッドと同様に、完全なCSSセレクタは必要ありません。CSSセレクタの一致が見つからない場合、Duskは一致するname属性を持つチェックボックスを検索します。

1$browser->check('terms');

$browser->check('terms');

uncheckメソッドを使用して、チェックボックス入力を「チェック解除」できます。

1$browser->uncheck('terms');

$browser->uncheck('terms');

ラジオボタン

radio入力オプションを「選択」するには、radioメソッドを使用できます。他の多くの入力関連メソッドと同様に、完全なCSSセレクタは必要ありません。CSSセレクタの一致が見つからない場合、Duskは一致するnameおよびvalue属性を持つradio入力を検索します。

1$browser->radio('size', 'large');

$browser->radio('size', 'large');

ファイルの添付

attachメソッドは、file入力要素にファイルを添付するために使用できます。他の多くの入力関連メソッドと同様に、完全なCSSセレクタは必要ありません。CSSセレクタの一致が見つからない場合、Duskは一致するname属性を持つfile入力を検索します。

1$browser->attach('photo', __DIR__.'/photos/mountains.png');

$browser->attach('photo', __DIR__.'/photos/mountains.png');

attach関数を使用するには、サーバーにZip PHP拡張機能がインストールされ、有効になっている必要があります。

ボタンの押下

pressメソッドは、ページ上のボタン要素をクリックするために使用できます。pressメソッドに与えられる引数は、ボタンの表示テキストまたはCSS / Duskセレクタのいずれかです。

1$browser->press('Login');

$browser->press('Login');

フォームを送信する際、多くのアプリケーションは、ボタンが押された後にフォームの送信ボタンを無効にし、フォーム送信のHTTPリクエストが完了したときにボタンを再度有効にします。ボタンを押して、ボタンが再度有効になるのを待つには、pressAndWaitForメソッドを使用できます。

1// Press the button and wait a maximum of 5 seconds for it to be enabled...
2$browser->pressAndWaitFor('Save');
3 
4// Press the button and wait a maximum of 1 second for it to be enabled...
5$browser->pressAndWaitFor('Save', 1);

// Press the button and wait a maximum of 5 seconds for it to be enabled...
$browser->pressAndWaitFor('Save');

// Press the button and wait a maximum of 1 second for it to be enabled...
$browser->pressAndWaitFor('Save', 1);

リンクのクリック

リンクをクリックするには、ブラウザインスタンスでclickLinkメソッドを使用できます。clickLinkメソッドは、指定された表示テキストを持つリンクをクリックします。

1$browser->clickLink($linkText);

$browser->clickLink($linkText);

seeLinkメソッドを使用して、指定された表示テキストを持つリンクがページに表示されているかどうかを判断できます。

1if ($browser->seeLink($linkText)) {
2    // ...
3}

if ($browser->seeLink($linkText)) {
    // ...
}

これらのメソッドはjQueryと対話します。ページでjQueryが利用できない場合、Duskはテスト期間中利用できるように自動的にページにjQueryを注入します。

キーボードの使用

keysメソッドを使用すると、typeメソッドで通常許可されるよりも複雑な入力シーケンスを特定の要素に提供できます。たとえば、Duskに値を入力中に修飾キーを押し続けるように指示できます。この例では、指定されたセレクタに一致する要素にtaylorが入力される間、shiftキーが押されたままになります。taylorが入力された後、swiftは修飾キーなしで入力されます。

1$browser->keys('selector', ['{shift}', 'taylor'], 'swift');

$browser->keys('selector', ['{shift}', 'taylor'], 'swift');

keysメソッドのもう1つの貴重な使用例は、アプリケーションのプライマリCSSセレクタに「キーボードショートカット」の組み合わせを送信することです。

1$browser->keys('.app', ['{command}', 'j']);

$browser->keys('.app', ['{command}', 'j']);

{command}などのすべての修飾キーは{}文字で囲まれ、GitHubで見つかるFacebook\WebDriver\WebDriverKeysクラスで定義されている定数と一致します。

流暢なキーボード操作

DuskはwithKeyboardメソッドも提供しており、Laravel\Dusk\Keyboardクラスを介して複雑なキーボード操作を流暢に実行できます。Keyboardクラスはpress、release、type、およびpauseメソッドを提供します。

1use Laravel\Dusk\Keyboard;
2 
3$browser->withKeyboard(function (Keyboard $keyboard) {
4    $keyboard->press('c')
5        ->pause(1000)
6        ->release('c')
7        ->type(['c', 'e', 'o']);
8});

use Laravel\Dusk\Keyboard;

$browser->withKeyboard(function (Keyboard $keyboard) {
    $keyboard->press('c')
        ->pause(1000)
        ->release('c')
        ->type(['c', 'e', 'o']);
});

キーボードマクロ

テストスイート全体で簡単に再利用できるカスタムキーボード操作を定義したい場合は、Keyboardクラスが提供するmacroメソッドを使用できます。通常、このメソッドはサービスプロバイダのbootメソッドから呼び出す必要があります。

 1<?php
 2 
 3namespace App\Providers;
 4 
 5use Facebook\WebDriver\WebDriverKeys;
 6use Illuminate\Support\ServiceProvider;
 7use Laravel\Dusk\Keyboard;
 8use Laravel\Dusk\OperatingSystem;
 9 
10class DuskServiceProvider extends ServiceProvider
11{
12    /**
13     * Register Dusk's browser macros.
14     */
15    public function boot(): void
16    {
17        Keyboard::macro('copy', function (string $element = null) {
18            $this->type([
19                OperatingSystem::onMac() ? WebDriverKeys::META : WebDriverKeys::CONTROL, 'c',
20            ]);
21 
22            return $this;
23        });
24 
25        Keyboard::macro('paste', function (string $element = null) {
26            $this->type([
27                OperatingSystem::onMac() ? WebDriverKeys::META : WebDriverKeys::CONTROL, 'v',
28            ]);
29 
30            return $this;
31        });
32    }
33}

<?php

namespace App\Providers;

use Facebook\WebDriver\WebDriverKeys;
use Illuminate\Support\ServiceProvider;
use Laravel\Dusk\Keyboard;
use Laravel\Dusk\OperatingSystem;

class DuskServiceProvider extends ServiceProvider
{
    /**
     * Register Dusk's browser macros.
     */
    public function boot(): void
    {
        Keyboard::macro('copy', function (string $element = null) {
            $this->type([
                OperatingSystem::onMac() ? WebDriverKeys::META : WebDriverKeys::CONTROL, 'c',
            ]);

            return $this;
        });

        Keyboard::macro('paste', function (string $element = null) {
            $this->type([
                OperatingSystem::onMac() ? WebDriverKeys::META : WebDriverKeys::CONTROL, 'v',
            ]);

            return $this;
        });
    }
}

macro関数は、最初の引数として名前を、2番目の引数としてクロージャを受け入れます。マクロのクロージャは、Keyboardインスタンスでマクロをメソッドとして呼び出すときに実行されます。

1$browser->click('@textarea')
2    ->withKeyboard(fn (Keyboard $keyboard) => $keyboard->copy())
3    ->click('@another-textarea')
4    ->withKeyboard(fn (Keyboard $keyboard) => $keyboard->paste());

$browser->click('@textarea')
    ->withKeyboard(fn (Keyboard $keyboard) => $keyboard->copy())
    ->click('@another-textarea')
    ->withKeyboard(fn (Keyboard $keyboard) => $keyboard->paste());

マウスの使用

要素のクリック

clickメソッドは、指定されたCSSまたはDuskセレクタに一致する要素をクリックするために使用できます。

1$browser->click('.selector');

$browser->click('.selector');

clickAtXPathメソッドは、指定されたXPath式に一致する要素をクリックするために使用できます。

1$browser->clickAtXPath('//div[@class = "selector"]');

$browser->clickAtXPath('//div[@class = "selector"]');

clickAtPointメソッドは、ブラウザの表示領域に対して指定された座標ペアの最上位の要素をクリックするために使用できます。

1$browser->clickAtPoint($x = 0, $y = 0);

$browser->clickAtPoint($x = 0, $y = 0);

doubleClickメソッドは、マウスのダブルクリックをシミュレートするために使用できます。

1$browser->doubleClick();
2 
3$browser->doubleClick('.selector');

$browser->doubleClick();

$browser->doubleClick('.selector');

rightClickメソッドは、マウスの右クリックをシミュレートするために使用できます。

1$browser->rightClick();
2 
3$browser->rightClick('.selector');

$browser->rightClick();

$browser->rightClick('.selector');

clickAndHoldメソッドは、マウスボタンがクリックされて押されたままの状態をシミュレートするために使用できます。その後のreleaseMouseメソッドの呼び出しは、この動作を元に戻し、マウスボタンを離します。

1$browser->clickAndHold('.selector');
2 
3$browser->clickAndHold()
4    ->pause(1000)
5    ->releaseMouse();

$browser->clickAndHold('.selector');

$browser->clickAndHold()
    ->pause(1000)
    ->releaseMouse();

controlClickメソッドは、ブラウザ内でctrl+clickイベントをシミュレートするために使用できます。

1$browser->controlClick();
2 
3$browser->controlClick('.selector');

$browser->controlClick();

$browser->controlClick('.selector');

マウスオーバー

mouseoverメソッドは、指定されたCSSまたはDuskセレクタに一致する要素の上にマウスを移動する必要がある場合に使用できます。

1$browser->mouseover('.selector');

$browser->mouseover('.selector');

ドラッグアンドドロップ

dragメソッドは、指定されたセレクタに一致する要素を別の要素にドラッグするために使用できます。

1$browser->drag('.from-selector', '.to-selector');

$browser->drag('.from-selector', '.to-selector');

または、要素を単一方向にドラッグすることもできます。

1$browser->dragLeft('.selector', $pixels = 10);
2$browser->dragRight('.selector', $pixels = 10);
3$browser->dragUp('.selector', $pixels = 10);
4$browser->dragDown('.selector', $pixels = 10);

$browser->dragLeft('.selector', $pixels = 10);
$browser->dragRight('.selector', $pixels = 10);
$browser->dragUp('.selector', $pixels = 10);
$browser->dragDown('.selector', $pixels = 10);

最後に、要素を指定されたオフセットでドラッグできます。

1$browser->dragOffset('.selector', $x = 10, $y = 10);

$browser->dragOffset('.selector', $x = 10, $y = 10);

JavaScriptダイアログ

DuskにはJavaScriptダイアログと対話するためのさまざまなメソッドが用意されています。たとえば、waitForDialogメソッドを使用してJavaScriptダイアログが表示されるのを待つことができます。このメソッドは、ダイアログが表示されるまで待機する秒数を示すオプションの引数を受け入れます。

1$browser->waitForDialog($seconds = null);

$browser->waitForDialog($seconds = null);

assertDialogOpenedメソッドは、ダイアログが表示され、指定されたメッセージが含まれていることをアサートするために使用できます。

1$browser->assertDialogOpened('Dialog message');

$browser->assertDialogOpened('Dialog message');

JavaScriptダイアログにプロンプトが含まれている場合、typeInDialogメソッドを使用してプロンプトに値を入力できます。

1$browser->typeInDialog('Hello World');

$browser->typeInDialog('Hello World');

開いているJavaScriptダイアログを「OK」ボタンをクリックして閉じるには、acceptDialogメソッドを呼び出します。

1$browser->acceptDialog();

$browser->acceptDialog();

開いているJavaScriptダイアログを「キャンセル」ボタンをクリックして閉じるには、dismissDialogメソッドを呼び出します。

1$browser->dismissDialog();

$browser->dismissDialog();

インラインフレームの操作

iframe内の要素と対話する必要がある場合は、withinFrameメソッドを使用できます。withinFrameメソッドに提供されたクロージャ内で実行されるすべての要素の対話は、指定されたiframeのコンテキストにスコープされます。

1$browser->withinFrame('#credit-card-details', function ($browser) {
2    $browser->type('input[name="cardnumber"]', '4242424242424242')
3        ->type('input[name="exp-date"]', '1224')
4        ->type('input[name="cvc"]', '123')
5        ->press('Pay');
6});

$browser->withinFrame('#credit-card-details', function ($browser) {
    $browser->type('input[name="cardnumber"]', '4242424242424242')
        ->type('input[name="exp-date"]', '1224')
        ->type('input[name="cvc"]', '123')
        ->press('Pay');
});

セレクタのスコープ設定

特定のセレクタ内で複数の操作をスコープ内で実行したい場合があります。たとえば、テーブル内にのみテキストが存在することをアサートし、そのテーブル内のボタンをクリックしたい場合があります。withメソッドを使用してこれを実現できます。withメソッドに与えられたクロージャ内で実行されるすべての操作は、元のセレクタにスコープされます。

1$browser->with('.table', function (Browser $table) {
2    $table->assertSee('Hello World')
3        ->clickLink('Delete');
4});

$browser->with('.table', function (Browser $table) {
    $table->assertSee('Hello World')
        ->clickLink('Delete');
});

現在のスコープ外でアサーションを実行する必要がある場合があります。elsewhereおよびelsewhereWhenAvailableメソッドを使用してこれを実現できます。

 1$browser->with('.table', function (Browser $table) {
 2    // Current scope is `body .table`...
 3 
 4    $browser->elsewhere('.page-title', function (Browser $title) {
 5        // Current scope is `body .page-title`...
 6        $title->assertSee('Hello World');
 7    });
 8 
 9    $browser->elsewhereWhenAvailable('.page-title', function (Browser $title) {
10        // Current scope is `body .page-title`...
11        $title->assertSee('Hello World');
12    });
13});

$browser->with('.table', function (Browser $table) {
    // Current scope is `body .table`...

    $browser->elsewhere('.page-title', function (Browser $title) {
        // Current scope is `body .page-title`...
        $title->assertSee('Hello World');
    });

    $browser->elsewhereWhenAvailable('.page-title', function (Browser $title) {
        // Current scope is `body .page-title`...
        $title->assertSee('Hello World');
    });
});

要素の待機

JavaScriptを多用するアプリケーションをテストする場合、テストを進める前に特定の要素やデータが利用可能になるのを「待つ」必要がしばしばあります。Duskはこれを簡単にします。さまざまなメソッドを使用して、ページ上に要素が表示されるのを待ったり、特定のJavaScript式がtrueと評価されるまで待ったりすることができます。

待機

テストを指定されたミリ秒数だけ一時停止する必要がある場合は、pauseメソッドを使用します。

1$browser->pause(1000);

$browser->pause(1000);

特定の条件がtrueの場合にのみテストを一時停止する必要がある場合は、pauseIfメソッドを使用します。

1$browser->pauseIf(App::environment('production'), 1000);

$browser->pauseIf(App::environment('production'), 1000);

同様に、特定の条件がtrueでない限りテストを一時停止する必要がある場合は、pauseUnlessメソッドを使用できます。

1$browser->pauseUnless(App::environment('testing'), 1000);

$browser->pauseUnless(App::environment('testing'), 1000);

セレクタの待機

waitForメソッドは、指定されたCSSまたはDuskセレクタに一致する要素がページに表示されるまでテストの実行を一時停止するために使用できます。デフォルトでは、例外をスローする前に最大5秒間テストを一時停止します。必要に応じて、メソッドの2番目の引数としてカスタムタイムアウトしきい値を渡すことができます。

1// Wait a maximum of five seconds for the selector...
2$browser->waitFor('.selector');
3 
4// Wait a maximum of one second for the selector...
5$browser->waitFor('.selector', 1);

// Wait a maximum of five seconds for the selector...
$browser->waitFor('.selector');

// Wait a maximum of one second for the selector...
$browser->waitFor('.selector', 1);

指定されたセレクタに一致する要素に指定されたテキストが含まれるまで待つこともできます。

1// Wait a maximum of five seconds for the selector to contain the given text...
2$browser->waitForTextIn('.selector', 'Hello World');
3 
4// Wait a maximum of one second for the selector to contain the given text...
5$browser->waitForTextIn('.selector', 'Hello World', 1);

// Wait a maximum of five seconds for the selector to contain the given text...
$browser->waitForTextIn('.selector', 'Hello World');

// Wait a maximum of one second for the selector to contain the given text...
$browser->waitForTextIn('.selector', 'Hello World', 1);

指定されたセレクタに一致する要素がページからなくなるまで待つこともできます。

1// Wait a maximum of five seconds until the selector is missing...
2$browser->waitUntilMissing('.selector');
3 
4// Wait a maximum of one second until the selector is missing...
5$browser->waitUntilMissing('.selector', 1);

// Wait a maximum of five seconds until the selector is missing...
$browser->waitUntilMissing('.selector');

// Wait a maximum of one second until the selector is missing...
$browser->waitUntilMissing('.selector', 1);

または、指定されたセレクタに一致する要素が有効または無効になるまで待つこともできます。

 1// Wait a maximum of five seconds until the selector is enabled...
 2$browser->waitUntilEnabled('.selector');
 3 
 4// Wait a maximum of one second until the selector is enabled...
 5$browser->waitUntilEnabled('.selector', 1);
 6 
 7// Wait a maximum of five seconds until the selector is disabled...
 8$browser->waitUntilDisabled('.selector');
 9 
10// Wait a maximum of one second until the selector is disabled...
11$browser->waitUntilDisabled('.selector', 1);

// Wait a maximum of five seconds until the selector is enabled...
$browser->waitUntilEnabled('.selector');

// Wait a maximum of one second until the selector is enabled...
$browser->waitUntilEnabled('.selector', 1);

// Wait a maximum of five seconds until the selector is disabled...
$browser->waitUntilDisabled('.selector');

// Wait a maximum of one second until the selector is disabled...
$browser->waitUntilDisabled('.selector', 1);

利用可能な場合のセレクタのスコープ設定

特定のセレクタに一致する要素が表示されるのを待ってから、その要素を操作したい場合があります。たとえば、モーダルウィンドウが利用可能になるまで待ってから、モーダル内の「OK」ボタンを押したい場合があります。whenAvailableメソッドを使用してこれを実現できます。指定されたクロージャ内で実行されるすべての要素操作は、元のセレクタにスコープされます。

1$browser->whenAvailable('.modal', function (Browser $modal) {
2    $modal->assertSee('Hello World')
3        ->press('OK');
4});

$browser->whenAvailable('.modal', function (Browser $modal) {
    $modal->assertSee('Hello World')
        ->press('OK');
});

テキストの待機

waitForTextメソッドは、指定されたテキストがページに表示されるまで待つために使用できます。

1// Wait a maximum of five seconds for the text...
2$browser->waitForText('Hello World');
3 
4// Wait a maximum of one second for the text...
5$browser->waitForText('Hello World', 1);

// Wait a maximum of five seconds for the text...
$browser->waitForText('Hello World');

// Wait a maximum of one second for the text...
$browser->waitForText('Hello World', 1);

waitUntilMissingTextメソッドを使用して、表示されていたテキストがページから削除されるまで待つことができます。

1// Wait a maximum of five seconds for the text to be removed...
2$browser->waitUntilMissingText('Hello World');
3 
4// Wait a maximum of one second for the text to be removed...
5$browser->waitUntilMissingText('Hello World', 1);

// Wait a maximum of five seconds for the text to be removed...
$browser->waitUntilMissingText('Hello World');

// Wait a maximum of one second for the text to be removed...
$browser->waitUntilMissingText('Hello World', 1);

リンクの待機

waitForLinkメソッドは、指定されたリンクテキストがページに表示されるまで待つために使用できます。

1// Wait a maximum of five seconds for the link...
2$browser->waitForLink('Create');
3 
4// Wait a maximum of one second for the link...
5$browser->waitForLink('Create', 1);

// Wait a maximum of five seconds for the link...
$browser->waitForLink('Create');

// Wait a maximum of one second for the link...
$browser->waitForLink('Create', 1);

入力の待機

waitForInputメソッドは、指定された入力フィールドがページに表示されるまで待つために使用できます。

1// Wait a maximum of five seconds for the input...
2$browser->waitForInput($field);
3 
4// Wait a maximum of one second for the input...
5$browser->waitForInput($field, 1);

// Wait a maximum of five seconds for the input...
$browser->waitForInput($field);

// Wait a maximum of one second for the input...
$browser->waitForInput($field, 1);

ページロケーションでの待機

$browser->assertPathIs('/home')のようなパスアサーションを行う際、window.location.pathnameが非同期で更新されている場合、アサーションは失敗する可能性があります。waitForLocationメソッドを使用して、ロケーションが特定の値になるまで待つことができます。

1$browser->waitForLocation('/secret');

$browser->waitForLocation('/secret');

waitForLocationメソッドは、現在のウィンドウのロケーションが完全修飾URLになるまで待つためにも使用できます。

1$browser->waitForLocation('https://example.com/path');

$browser->waitForLocation('https://example.com/path');

名前付きルートのロケーションを待つこともできます。

1$browser->waitForRoute($routeName, $parameters);

$browser->waitForRoute($routeName, $parameters);

ページリロードの待機

アクションを実行した後にページがリロードされるのを待つ必要がある場合は、waitForReloadメソッドを使用します。

1use Laravel\Dusk\Browser;
2 
3$browser->waitForReload(function (Browser $browser) {
4    $browser->press('Submit');
5})
6->assertSee('Success!');

use Laravel\Dusk\Browser;

$browser->waitForReload(function (Browser $browser) {
    $browser->press('Submit');
})
->assertSee('Success!');

ページのリロードを待つ必要性は、通常、ボタンをクリックした後に発生するため、便宜上clickAndWaitForReloadメソッドを使用できます。

1$browser->clickAndWaitForReload('.selector')
2    ->assertSee('something');

$browser->clickAndWaitForReload('.selector')
    ->assertSee('something');

JavaScript式での待機

特定のJavaScript式がtrueと評価されるまでテストの実行を一時停止したい場合があります。waitUntilメソッドを使用することでこれを簡単に実現できます。このメソッドに式を渡す場合、returnキーワードや末尾のセミコロンを含める必要はありません。

1// Wait a maximum of five seconds for the expression to be true...
2$browser->waitUntil('App.data.servers.length > 0');
3 
4// Wait a maximum of one second for the expression to be true...
5$browser->waitUntil('App.data.servers.length > 0', 1);

// Wait a maximum of five seconds for the expression to be true...
$browser->waitUntil('App.data.servers.length > 0');

// Wait a maximum of one second for the expression to be true...
$browser->waitUntil('App.data.servers.length > 0', 1);

Vue式での待機

waitUntilVueおよびwaitUntilVueIsNotメソッドは、Vueコンポーネントの属性が特定の値を持つまで待つために使用できます。

1// Wait until the component attribute contains the given value...
2$browser->waitUntilVue('user.name', 'Taylor', '@user');
3 
4// Wait until the component attribute doesn't contain the given value...
5$browser->waitUntilVueIsNot('user.name', null, '@user');

// Wait until the component attribute contains the given value...
$browser->waitUntilVue('user.name', 'Taylor', '@user');

// Wait until the component attribute doesn't contain the given value...
$browser->waitUntilVueIsNot('user.name', null, '@user');

JavaScriptイベントの待機

waitForEventメソッドは、JavaScriptイベントが発生するまでテストの実行を一時停止するために使用できます。

1$browser->waitForEvent('load');

$browser->waitForEvent('load');

イベントリスナーは現在のスコープにアタッチされます。デフォルトではbody要素です。スコープ付きセレクタを使用する場合、イベントリスナーは一致する要素にアタッチされます。

1$browser->with('iframe', function (Browser $iframe) {
2    // Wait for the iframe's load event...
3    $iframe->waitForEvent('load');
4});

$browser->with('iframe', function (Browser $iframe) {
    // Wait for the iframe's load event...
    $iframe->waitForEvent('load');
});

また、waitForEventメソッドの2番目の引数としてセレクタを指定して、特定の要素にイベントリスナーをアタッチすることもできます。

1$browser->waitForEvent('load', '.selector');

$browser->waitForEvent('load', '.selector');

documentおよびwindowオブジェクトのイベントを待つこともできます。

1// Wait until the document is scrolled...
2$browser->waitForEvent('scroll', 'document');
3 
4// Wait a maximum of five seconds until the window is resized...
5$browser->waitForEvent('resize', 'window', 5);

// Wait until the document is scrolled...
$browser->waitForEvent('scroll', 'document');

// Wait a maximum of five seconds until the window is resized...
$browser->waitForEvent('resize', 'window', 5);

コールバックでの待機

Duskの「wait」メソッドの多くは、基になるwaitUsingメソッドに依存しています。このメソッドを直接使用して、特定のクロージャがtrueを返すまで待つことができます。waitUsingメソッドは、待機する最大秒数、クロージャを評価する間隔、クロージャ、およびオプションの失敗メッセージを受け入れます。

1$browser->waitUsing(10, 1, function () use ($something) {
2    return $something->isReady();
3}, "Something wasn't ready in time.");

$browser->waitUsing(10, 1, function () use ($something) {
    return $something->isReady();
}, "Something wasn't ready in time.");

要素の表示領域へのスクロール

ブラウザの表示領域外にあるため、要素をクリックできない場合があります。scrollIntoViewメソッドは、指定されたセレクタの要素が表示領域内に入るまでブラウザウィンドウをスクロールします。

1$browser->scrollIntoView('.selector')
2    ->click('.selector');

$browser->scrollIntoView('.selector')
    ->click('.selector');

利用可能なアサーション

Duskは、アプリケーションに対して行うことができるさまざまなアサーションを提供します。利用可能なすべてのアサーションは以下のリストに記載されています。

assertTitle assertTitleContains assertUrlIs assertSchemeIs assertSchemeIsNot assertHostIs assertHostIsNot assertPortIs assertPortIsNot assertPathBeginsWith assertPathEndsWith assertPathContains assertPathIs assertPathIsNot assertRouteIs assertQueryStringHas assertQueryStringMissing assertFragmentIs assertFragmentBeginsWith assertFragmentIsNot assertHasCookie assertHasPlainCookie assertCookieMissing assertPlainCookieMissing assertCookieValue assertPlainCookieValue assertSee assertDontSee assertSeeIn assertDontSeeIn assertSeeAnythingIn assertSeeNothingIn assertScript assertSourceHas assertSourceMissing assertSeeLink assertDontSeeLink assertInputValue assertInputValueIsNot assertChecked assertNotChecked assertIndeterminate assertRadioSelected assertRadioNotSelected assertSelected assertNotSelected assertSelectHasOptions assertSelectMissingOptions assertSelectHasOption assertSelectMissingOption assertValue assertValueIsNot assertAttribute assertAttributeMissing assertAttributeContains assertAttributeDoesntContain assertAriaAttribute assertDataAttribute assertVisible assertPresent assertNotPresent assertMissing assertInputPresent assertInputMissing assertDialogOpened assertEnabled assertDisabled assertButtonEnabled assertButtonDisabled assertFocused assertNotFocused assertAuthenticated assertGuest assertAuthenticatedAs assertVue assertVueIsNot assertVueContains assertVueDoesntContain

assertTitle

ページタイトルが指定のテキストと一致することをアサートします。

1$browser->assertTitle($title);

$browser->assertTitle($title);

assertTitleContains

ページタイトルに指定のテキストが含まれていることをアサートします。

1$browser->assertTitleContains($title);

$browser->assertTitleContains($title);

assertUrlIs

現在のURL（クエリ文字列なし）が指定の文字列と一致することをアサートします。

1$browser->assertUrlIs($url);

$browser->assertUrlIs($url);

assertSchemeIs

現在のURLスキームが指定のスキームと一致することをアサートします。

1$browser->assertSchemeIs($scheme);

$browser->assertSchemeIs($scheme);

assertSchemeIsNot

現在のURLスキームが指定のスキームと一致しないことをアサートします。

1$browser->assertSchemeIsNot($scheme);

$browser->assertSchemeIsNot($scheme);

assertHostIs

現在のURLホストが指定のホストと一致することをアサートします。

1$browser->assertHostIs($host);

$browser->assertHostIs($host);

assertHostIsNot

現在のURLホストが指定のホストと一致しないことをアサートします。

1$browser->assertHostIsNot($host);

$browser->assertHostIsNot($host);

assertPortIs

現在のURLポートが指定のポートと一致することをアサートします。

1$browser->assertPortIs($port);

$browser->assertPortIs($port);

assertPortIsNot

現在のURLポートが指定のポートと一致しないことをアサートします。

1$browser->assertPortIsNot($port);

$browser->assertPortIsNot($port);

assertPathBeginsWith

現在のURLパスが指定のパスで始まることをアサートします。

1$browser->assertPathBeginsWith('/home');

$browser->assertPathBeginsWith('/home');

assertPathEndsWith

現在のURLパスが指定のパスで終わることをアサートします。

1$browser->assertPathEndsWith('/home');

$browser->assertPathEndsWith('/home');

assertPathContains

現在のURLパスに指定のパスが含まれていることをアサートします。

1$browser->assertPathContains('/home');

$browser->assertPathContains('/home');

assertPathIs

現在のパスが指定のパスと一致することをアサートします。

1$browser->assertPathIs('/home');

$browser->assertPathIs('/home');

assertPathIsNot

現在のパスが指定のパスと一致しないことをアサートします。

1$browser->assertPathIsNot('/home');

$browser->assertPathIsNot('/home');

assertRouteIs

現在のURLが指定の名前付きルートのURLと一致することをアサートします。

1$browser->assertRouteIs($name, $parameters);

$browser->assertRouteIs($name, $parameters);

assertQueryStringHas

指定のクエリ文字列パラメータが存在することをアサートします。

1$browser->assertQueryStringHas($name);

$browser->assertQueryStringHas($name);

指定のクエリ文字列パラメータが存在し、指定の値を持つことをアサートします。

1$browser->assertQueryStringHas($name, $value);

$browser->assertQueryStringHas($name, $value);

assertQueryStringMissing

指定のクエリ文字列パラメータが存在しないことをアサートします。

1$browser->assertQueryStringMissing($name);

$browser->assertQueryStringMissing($name);

assertFragmentIs

URLの現在のハッシュフラグメントが指定のフラグメントと一致することをアサートします。

1$browser->assertFragmentIs('anchor');

$browser->assertFragmentIs('anchor');

assertFragmentBeginsWith

URLの現在のハッシュフラグメントが指定のフラグメントで始まることをアサートします。

1$browser->assertFragmentBeginsWith('anchor');

$browser->assertFragmentBeginsWith('anchor');

assertFragmentIsNot

URLの現在のハッシュフラグメントが指定のフラグメントと一致しないことをアサートします。

1$browser->assertFragmentIsNot('anchor');

$browser->assertFragmentIsNot('anchor');

指定の暗号化されたクッキーが存在することをアサートします。

1$browser->assertHasCookie($name);

$browser->assertHasCookie($name);

指定の暗号化されていないクッキーが存在することをアサートします。

1$browser->assertHasPlainCookie($name);

$browser->assertHasPlainCookie($name);

指定の暗号化されたクッキーが存在しないことをアサートします。

1$browser->assertCookieMissing($name);

$browser->assertCookieMissing($name);

指定の暗号化されていないクッキーが存在しないことをアサートします。

1$browser->assertPlainCookieMissing($name);

$browser->assertPlainCookieMissing($name);

暗号化されたクッキーが指定の値を持つことをアサートします。

1$browser->assertCookieValue($name, $value);

$browser->assertCookieValue($name, $value);

暗号化されていないクッキーが指定の値を持つことをアサートします。

1$browser->assertPlainCookieValue($name, $value);

$browser->assertPlainCookieValue($name, $value);

assertSee

ページに指定のテキストが存在することをアサートします。

1$browser->assertSee($text);

$browser->assertSee($text);

assertDontSee

ページに指定のテキストが存在しないことをアサートします。

1$browser->assertDontSee($text);

$browser->assertDontSee($text);

assertSeeIn

セレクタ内に指定のテキストが存在することをアサートします。

1$browser->assertSeeIn($selector, $text);

$browser->assertSeeIn($selector, $text);

assertDontSeeIn

セレクタ内に指定のテキストが存在しないことをアサートします。

1$browser->assertDontSeeIn($selector, $text);

$browser->assertDontSeeIn($selector, $text);

assertSeeAnythingIn

セレクタ内に何らかのテキストが存在することをアサートします。

1$browser->assertSeeAnythingIn($selector);

$browser->assertSeeAnythingIn($selector);

assertSeeNothingIn

セレクタ内にテキストが存在しないことをアサートします。

1$browser->assertSeeNothingIn($selector);

$browser->assertSeeNothingIn($selector);

assertScript

指定のJavaScript式が指定の値に評価されることをアサートします。

1$browser->assertScript('window.isLoaded')
2        ->assertScript('document.readyState', 'complete');

$browser->assertScript('window.isLoaded')
        ->assertScript('document.readyState', 'complete');

assertSourceHas

ページに指定のソースコードが存在することをアサートします。

1$browser->assertSourceHas($code);

$browser->assertSourceHas($code);

assertSourceMissing

ページに指定のソースコードが存在しないことをアサートします。

1$browser->assertSourceMissing($code);

$browser->assertSourceMissing($code);

assertSeeLink

ページに指定のリンクが存在することをアサートします。

1$browser->assertSeeLink($linkText);

$browser->assertSeeLink($linkText);

assertDontSeeLink

ページに指定のリンクが存在しないことをアサートします。

1$browser->assertDontSeeLink($linkText);

$browser->assertDontSeeLink($linkText);

assertInputValue

指定の入力フィールドが指定の値を持つことをアサートします。

1$browser->assertInputValue($field, $value);

$browser->assertInputValue($field, $value);

assertInputValueIsNot

指定の入力フィールドが指定の値を持たないことをアサートします。

1$browser->assertInputValueIsNot($field, $value);

$browser->assertInputValueIsNot($field, $value);

assertChecked

指定のチェックボックスがチェックされていることをアサートします。

1$browser->assertChecked($field);

$browser->assertChecked($field);

assertNotChecked

指定のチェックボックスがチェックされていないことをアサートします。

1$browser->assertNotChecked($field);

$browser->assertNotChecked($field);

assertIndeterminate

指定のチェックボックスが不確定状態であることをアサートします。

1$browser->assertIndeterminate($field);

$browser->assertIndeterminate($field);

assertRadioSelected

指定のラジオフィールドが選択されていることをアサートします。

1$browser->assertRadioSelected($field, $value);

$browser->assertRadioSelected($field, $value);

assertRadioNotSelected

指定のラジオフィールドが選択されていないことをアサートします。

1$browser->assertRadioNotSelected($field, $value);

$browser->assertRadioNotSelected($field, $value);

assertSelected

指定のドロップダウンで指定の値が選択されていることをアサートします。

1$browser->assertSelected($field, $value);

$browser->assertSelected($field, $value);

assertNotSelected

指定のドロップダウンで指定の値が選択されていないことをアサートします。

1$browser->assertNotSelected($field, $value);

$browser->assertNotSelected($field, $value);

assertSelectHasOptions

指定の値の配列が選択可能であることをアサートします。

1$browser->assertSelectHasOptions($field, $values);

$browser->assertSelectHasOptions($field, $values);

assertSelectMissingOptions

指定の値の配列が選択不可能であることをアサートします。

1$browser->assertSelectMissingOptions($field, $values);

$browser->assertSelectMissingOptions($field, $values);

assertSelectHasOption

指定のフィールドで指定の値が選択可能であることをアサートします。

1$browser->assertSelectHasOption($field, $value);

$browser->assertSelectHasOption($field, $value);

assertSelectMissingOption

指定の値が選択不可能であることをアサートします。

1$browser->assertSelectMissingOption($field, $value);

$browser->assertSelectMissingOption($field, $value);

assertValue

指定のセレクタに一致する要素が指定の値を持つことをアサートします。

1$browser->assertValue($selector, $value);

$browser->assertValue($selector, $value);

assertValueIsNot

指定のセレクタに一致する要素が指定の値を持たないことをアサートします。

1$browser->assertValueIsNot($selector, $value);

$browser->assertValueIsNot($selector, $value);

assertAttribute

指定のセレクタに一致する要素が、提供された属性で指定の値を持つことをアサートします。

1$browser->assertAttribute($selector, $attribute, $value);

$browser->assertAttribute($selector, $attribute, $value);

assertAttributeMissing

指定のセレクタに一致する要素が、提供された属性を欠いていることをアサートします。

1$browser->assertAttributeMissing($selector, $attribute);

$browser->assertAttributeMissing($selector, $attribute);

assertAttributeContains

指定のセレクタに一致する要素が、提供された属性で指定の値を含むことをアサートします。

1$browser->assertAttributeContains($selector, $attribute, $value);

$browser->assertAttributeContains($selector, $attribute, $value);

assertAttributeDoesntContain

指定のセレクタに一致する要素が、提供された属性で指定の値を含まないことをアサートします。

1$browser->assertAttributeDoesntContain($selector, $attribute, $value);

$browser->assertAttributeDoesntContain($selector, $attribute, $value);

assertAriaAttribute

指定のセレクタに一致する要素が、提供されたaria属性で指定の値を持つことをアサートします。

1$browser->assertAriaAttribute($selector, $attribute, $value);

$browser->assertAriaAttribute($selector, $attribute, $value);

例えば、<button aria-label="Add"></button> というマークアップが与えられた場合、aria-label属性に対して次のようにアサートできます。

1$browser->assertAriaAttribute('button', 'label', 'Add')

$browser->assertAriaAttribute('button', 'label', 'Add')

assertDataAttribute

指定のセレクタに一致する要素が、提供されたdata属性で指定の値を持つことをアサートします。

1$browser->assertDataAttribute($selector, $attribute, $value);

$browser->assertDataAttribute($selector, $attribute, $value);

例えば、<tr id="row-1" data-content="attendees"></tr> というマークアップが与えられた場合、data-label属性に対して次のようにアサートできます。

1$browser->assertDataAttribute('#row-1', 'content', 'attendees')

$browser->assertDataAttribute('#row-1', 'content', 'attendees')

assertVisible

指定のセレクタに一致する要素が表示されていることをアサートします。

1$browser->assertVisible($selector);

$browser->assertVisible($selector);

assertPresent

指定のセレクタに一致する要素がソースに存在することをアサートします。

1$browser->assertPresent($selector);

$browser->assertPresent($selector);

assertNotPresent

指定のセレクタに一致する要素がソースに存在しないことをアサートします。

1$browser->assertNotPresent($selector);

$browser->assertNotPresent($selector);

assertMissing

指定のセレクタに一致する要素が表示されていないことをアサートします。

1$browser->assertMissing($selector);

$browser->assertMissing($selector);

assertInputPresent

指定の名前を持つ入力が存在することをアサートします。

1$browser->assertInputPresent($name);

$browser->assertInputPresent($name);

assertInputMissing

指定の名前を持つ入力がソースに存在しないことをアサートします。

1$browser->assertInputMissing($name);

$browser->assertInputMissing($name);

assertDialogOpened

指定のメッセージを持つJavaScriptダイアログが開かれたことをアサートします。

1$browser->assertDialogOpened($message);

$browser->assertDialogOpened($message);

assertEnabled

指定のフィールドが有効であることをアサートします。

1$browser->assertEnabled($field);

$browser->assertEnabled($field);

assertDisabled

指定のフィールドが無効であることをアサートします。

1$browser->assertDisabled($field);

$browser->assertDisabled($field);

assertButtonEnabled

指定のボタンが有効であることをアサートします。

1$browser->assertButtonEnabled($button);

$browser->assertButtonEnabled($button);

assertButtonDisabled

指定のボタンが無効であることをアサートします。

1$browser->assertButtonDisabled($button);

$browser->assertButtonDisabled($button);

assertFocused

指定のフィールドがフォーカスされていることをアサートします。

1$browser->assertFocused($field);

$browser->assertFocused($field);

assertNotFocused

指定のフィールドがフォーカスされていないことをアサートします。

1$browser->assertNotFocused($field);

$browser->assertNotFocused($field);

assertAuthenticated

ユーザーが認証されていることをアサートします。

1$browser->assertAuthenticated();

$browser->assertAuthenticated();

assertGuest

ユーザーが認証されていないことをアサートします。

1$browser->assertGuest();

$browser->assertGuest();

assertAuthenticatedAs

ユーザーが指定のユーザーとして認証されていることをアサートします。

1$browser->assertAuthenticatedAs($user);

$browser->assertAuthenticatedAs($user);

assertVue

Duskでは、Vueコンポーネントデータの状態に関するアサーションも可能です。たとえば、アプリケーションに次のVueコンポーネントが含まれているとします。

 1// HTML...
 2 
 3<profile dusk="profile-component"></profile>
 4 
 5// Component Definition...
 6 
 7Vue.component('profile', {
 8    template: '<div>{{ user.name }}</div>',
 9 
10    data: function () {
11        return {
12            user: {
13                name: 'Taylor'
14            }
15        };
16    }
17});

// HTML...

<profile dusk="profile-component"></profile>

// Component Definition...

Vue.component('profile', {
    template: '<div>{{ user.name }}</div>',

    data: function () {
        return {
            user: {
                name: 'Taylor'
            }
        };
    }
});

Vueコンポーネントの状態について、次のようにアサートできます。

1test('vue', function () {
2    $this->browse(function (Browser $browser) {
3        $browser->visit('/')
4            ->assertVue('user.name', 'Taylor', '@profile-component');
5    });
6});

test('vue', function () {
    $this->browse(function (Browser $browser) {
        $browser->visit('/')
            ->assertVue('user.name', 'Taylor', '@profile-component');
    });
});

 1/**
 2 * A basic Vue test example.
 3 */
 4public function test_vue(): void
 5{
 6    $this->browse(function (Browser $browser) {
 7        $browser->visit('/')
 8            ->assertVue('user.name', 'Taylor', '@profile-component');
 9    });
10}

/**
 * A basic Vue test example.
 */
public function test_vue(): void
{
    $this->browse(function (Browser $browser) {
        $browser->visit('/')
            ->assertVue('user.name', 'Taylor', '@profile-component');
    });
}

assertVueIsNot

指定されたVueコンポーネントのデータプロパティが、指定された値と一致しないことをアサートします。

1$browser->assertVueIsNot($property, $value, $componentSelector = null);

$browser->assertVueIsNot($property, $value, $componentSelector = null);

assertVueContains

指定されたVueコンポーネントのデータプロパティが配列であり、指定された値を含んでいることをアサートします。

1$browser->assertVueContains($property, $value, $componentSelector = null);

$browser->assertVueContains($property, $value, $componentSelector = null);

assertVueDoesntContain

指定されたVueコンポーネントのデータプロパティが配列であり、指定された値を含んでいないことをアサートします。

1$browser->assertVueDoesntContain($property, $value, $componentSelector = null);

$browser->assertVueDoesntContain($property, $value, $componentSelector = null);

ページ

テストでは、シーケンスでいくつかの複雑なアクションを実行する必要がある場合があります。これにより、テストの読み書きや理解が難しくなる可能性があります。Duskページを使用すると、特定のページで単一のメソッドを介して実行できる表現力豊かなアクションを定義できます。ページでは、アプリケーションまたは単一ページの共通セレクタへのショートカットを定義することもできます。

ページの生成

ページオブジェクトを生成するには、dusk:page Artisanコマンドを実行します。すべてのページオブジェクトは、アプリケーションのtests/Browser/Pagesディレクトリに配置されます。

1php artisan dusk:page Login

php artisan dusk:page Login

ページの設定

デフォルトで、ページにはurl、assert、elementsの3つのメソッドがあります。ここではurlとassertメソッドについて説明します。elementsメソッドについては、後ほど詳しく説明します。

`url` メソッド

urlメソッドは、ページを表すURLのパスを返す必要があります。Duskはブラウザでページに移動する際にこのURLを使用します。

1/**
2 * Get the URL for the page.
3 */
4public function url(): string
5{
6    return '/login';
7}

/**
 * Get the URL for the page.
 */
public function url(): string
{
    return '/login';
}

`assert` メソッド

assertメソッドは、ブラウザが実際にそのページにいることを確認するために必要なアサーションを行うことができます。このメソッド内に何かを配置する必要は必ずしもありませんが、必要に応じてこれらのアサーションを自由に行うことができます。これらのアサーションは、ページに移動する際に自動的に実行されます。

1/**
2 * Assert that the browser is on the page.
3 */
4public function assert(Browser $browser): void
5{
6    $browser->assertPathIs($this->url());
7}

/**
 * Assert that the browser is on the page.
 */
public function assert(Browser $browser): void
{
    $browser->assertPathIs($this->url());
}

ページへの移動

ページが定義されると、visitメソッドを使用してそのページに移動できます。

1use Tests\Browser\Pages\Login;
2 
3$browser->visit(new Login);

use Tests\Browser\Pages\Login;

$browser->visit(new Login);

特定のページにすでにいて、そのページのセレクタやメソッドを現在のテストコンテキストに「ロード」する必要がある場合があります。これは、ボタンを押して明示的に移動することなく特定のページにリダイレクトされる場合によくあります。この状況では、onメソッドを使用してページをロードできます。

1use Tests\Browser\Pages\CreatePlaylist;
2 
3$browser->visit('/dashboard')
4        ->clickLink('Create Playlist')
5        ->on(new CreatePlaylist)
6        ->assertSee('@create');

use Tests\Browser\Pages\CreatePlaylist;

$browser->visit('/dashboard')
        ->clickLink('Create Playlist')
        ->on(new CreatePlaylist)
        ->assertSee('@create');

短縮セレクタ

ページクラス内のelementsメソッドを使用すると、ページ上の任意のCSSセレクタに対して、素早く覚えやすいショートカットを定義できます。たとえば、アプリケーションのログインページの「email」入力フィールドのショートカットを定義してみましょう。

 1/**
 2 * Get the element shortcuts for the page.
 3 *
 4 * @return array<string, string>
 5 */
 6public function elements(): array
 7{
 8    return [
 9        '@email' => 'input[name=email]',
10    ];
11}

/**
 * Get the element shortcuts for the page.
 *
 * @return array<string, string>
 */
public function elements(): array
{
    return [
        '@email' => 'input[name=email]',
    ];
}

ショートカットが定義されると、通常完全なCSSセレクタを使用する場所ならどこでも短縮セレクタを使用できます。

1$browser->type('@email', '[email protected]');

$browser->type('@email', '[email protected]');

グローバル短縮セレクタ

Duskをインストールすると、ベースのPageクラスがtests/Browser/Pagesディレクトリに配置されます。このクラスにはsiteElementsメソッドが含まれており、アプリケーション全体のすべてのページで利用可能なグローバル短縮セレクタを定義するために使用できます。

 1/**
 2 * Get the global element shortcuts for the site.
 3 *
 4 * @return array<string, string>
 5 */
 6public static function siteElements(): array
 7{
 8    return [
 9        '@element' => '#selector',
10    ];
11}

/**
 * Get the global element shortcuts for the site.
 *
 * @return array<string, string>
 */
public static function siteElements(): array
{
    return [
        '@element' => '#selector',
    ];
}

ページメソッド

ページに定義されているデフォルトのメソッドに加えて、テスト全体で使用できる追加のメソッドを定義できます。たとえば、音楽管理アプリケーションを構築しているとします。アプリケーションの一つのページで一般的なアクションは、プレイリストの作成かもしれません。各テストでプレイリストを作成するロジックを再記述する代わりに、ページクラスにcreatePlaylistメソッドを定義できます。

 1<?php
 2 
 3namespace Tests\Browser\Pages;
 4 
 5use Laravel\Dusk\Browser;
 6use Laravel\Dusk\Page;
 7 
 8class Dashboard extends Page
 9{
10    // Other page methods...
11 
12    /**
13     * Create a new playlist.
14     */
15    public function createPlaylist(Browser $browser, string $name): void
16    {
17        $browser->type('name', $name)
18            ->check('share')
19            ->press('Create Playlist');
20    }
21}

<?php

namespace Tests\Browser\Pages;

use Laravel\Dusk\Browser;
use Laravel\Dusk\Page;

class Dashboard extends Page
{
    // Other page methods...

    /**
     * Create a new playlist.
     */
    public function createPlaylist(Browser $browser, string $name): void
    {
        $browser->type('name', $name)
            ->check('share')
            ->press('Create Playlist');
    }
}

メソッドが定義されると、そのページを利用するどのテスト内でも使用できます。ブラウザインスタンスは、カスタムページメソッドの最初の引数として自動的に渡されます。

1use Tests\Browser\Pages\Dashboard;
2 
3$browser->visit(new Dashboard)
4        ->createPlaylist('My Playlist')
5        ->assertSee('My Playlist');

use Tests\Browser\Pages\Dashboard;

$browser->visit(new Dashboard)
        ->createPlaylist('My Playlist')
        ->assertSee('My Playlist');

コンポーネント

コンポーネントはDuskの「ページオブジェクト」に似ていますが、ナビゲーションバーや通知ウィンドウなど、アプリケーション全体で再利用されるUIや機能の部品を対象としています。そのため、コンポーネントは特定のURLに縛られません。

コンポーネントの生成

コンポーネントを生成するには、dusk:component Artisanコマンドを実行します。新しいコンポーネントはtests/Browser/Componentsディレクトリに配置されます。

1php artisan dusk:component DatePicker

php artisan dusk:component DatePicker

上記のように、「日付ピッカー」は、アプリケーション内のさまざまなページで存在する可能性のあるコンポーネントの一例です。テストスイート内の数十のテストで日付を選択するためのブラウザ自動化ロジックを手動で記述するのは面倒になる可能性があります。代わりに、日付ピッカーを表すDuskコンポーネントを定義し、そのロジックをコンポーネント内にカプセル化することができます。

 1<?php
 2 
 3namespace Tests\Browser\Components;
 4 
 5use Laravel\Dusk\Browser;
 6use Laravel\Dusk\Component as BaseComponent;
 7 
 8class DatePicker extends BaseComponent
 9{
10    /**
11     * Get the root selector for the component.
12     */
13    public function selector(): string
14    {
15        return '.date-picker';
16    }
17 
18    /**
19     * Assert that the browser page contains the component.
20     */
21    public function assert(Browser $browser): void
22    {
23        $browser->assertVisible($this->selector());
24    }
25 
26    /**
27     * Get the element shortcuts for the component.
28     *
29     * @return array<string, string>
30     */
31    public function elements(): array
32    {
33        return [
34            '@date-field' => 'input.datepicker-input',
35            '@year-list' => 'div > div.datepicker-years',
36            '@month-list' => 'div > div.datepicker-months',
37            '@day-list' => 'div > div.datepicker-days',
38        ];
39    }
40 
41    /**
42     * Select the given date.
43     */
44    public function selectDate(Browser $browser, int $year, int $month, int $day): void
45    {
46        $browser->click('@date-field')
47            ->within('@year-list', function (Browser $browser) use ($year) {
48                $browser->click($year);
49            })
50            ->within('@month-list', function (Browser $browser) use ($month) {
51                $browser->click($month);
52            })
53            ->within('@day-list', function (Browser $browser) use ($day) {
54                $browser->click($day);
55            });
56    }
57}

<?php

namespace Tests\Browser\Components;

use Laravel\Dusk\Browser;
use Laravel\Dusk\Component as BaseComponent;

class DatePicker extends BaseComponent
{
    /**
     * Get the root selector for the component.
     */
    public function selector(): string
    {
        return '.date-picker';
    }

    /**
     * Assert that the browser page contains the component.
     */
    public function assert(Browser $browser): void
    {
        $browser->assertVisible($this->selector());
    }

    /**
     * Get the element shortcuts for the component.
     *
     * @return array<string, string>
     */
    public function elements(): array
    {
        return [
            '@date-field' => 'input.datepicker-input',
            '@year-list' => 'div > div.datepicker-years',
            '@month-list' => 'div > div.datepicker-months',
            '@day-list' => 'div > div.datepicker-days',
        ];
    }

    /**
     * Select the given date.
     */
    public function selectDate(Browser $browser, int $year, int $month, int $day): void
    {
        $browser->click('@date-field')
            ->within('@year-list', function (Browser $browser) use ($year) {
                $browser->click($year);
            })
            ->within('@month-list', function (Browser $browser) use ($month) {
                $browser->click($month);
            })
            ->within('@day-list', function (Browser $browser) use ($day) {
                $browser->click($day);
            });
    }
}

コンポーネントの使用

コンポーネントが定義されると、どのテストからでも日付ピッカー内で簡単に日付を選択できます。そして、日付を選択するために必要なロジックが変更された場合でも、コンポーネントを更新するだけで済みます。

 1<?php
 2 
 3use Illuminate\Foundation\Testing\DatabaseMigrations;
 4use Laravel\Dusk\Browser;
 5use Tests\Browser\Components\DatePicker;
 6 
 7uses(DatabaseMigrations::class);
 8 
 9test('basic example', function () {
10    $this->browse(function (Browser $browser) {
11        $browser->visit('/')
12            ->within(new DatePicker, function (Browser $browser) {
13                $browser->selectDate(2019, 1, 30);
14            })
15            ->assertSee('January');
16    });
17});

<?php

use Illuminate\Foundation\Testing\DatabaseMigrations;
use Laravel\Dusk\Browser;
use Tests\Browser\Components\DatePicker;

uses(DatabaseMigrations::class);

test('basic example', function () {
    $this->browse(function (Browser $browser) {
        $browser->visit('/')
            ->within(new DatePicker, function (Browser $browser) {
                $browser->selectDate(2019, 1, 30);
            })
            ->assertSee('January');
    });
});

 1<?php
 2 
 3namespace Tests\Browser;
 4 
 5use Illuminate\Foundation\Testing\DatabaseMigrations;
 6use Laravel\Dusk\Browser;
 7use Tests\Browser\Components\DatePicker;
 8use Tests\DuskTestCase;
 9 
10class ExampleTest extends DuskTestCase
11{
12    /**
13     * A basic component test example.
14     */
15    public function test_basic_example(): void
16    {
17        $this->browse(function (Browser $browser) {
18            $browser->visit('/')
19                ->within(new DatePicker, function (Browser $browser) {
20                    $browser->selectDate(2019, 1, 30);
21                })
22                ->assertSee('January');
23        });
24    }
25}

<?php

namespace Tests\Browser;

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

class ExampleTest extends DuskTestCase
{
    /**
     * A basic component test example.
     */
    public function test_basic_example(): void
    {
        $this->browse(function (Browser $browser) {
            $browser->visit('/')
                ->within(new DatePicker, function (Browser $browser) {
                    $browser->selectDate(2019, 1, 30);
                })
                ->assertSee('January');
        });
    }
}

継続的インテグレーション

ほとんどのDusk継続的インテグレーションの設定では、Laravelアプリケーションがポート8000の組み込みPHP開発サーバーを使用して提供されることを想定しています。したがって、続行する前に、継続的インテグレーション環境にAPP_URL環境変数の値がhttp://127.0.0.1:8000であることを確認してください。

Heroku CI

Heroku CIでDuskテストを実行するには、次のGoogle ChromeビルドパックとスクリプトをHerokuのapp.jsonファイルに追加します。

 1{
 2  "environments": {
 3    "test": {
 4      "buildpacks": [
 5        { "url": "heroku/php" },
 6        { "url": "https://github.com/heroku/heroku-buildpack-chrome-for-testing" }
 7      ],
 8      "scripts": {
 9        "test-setup": "cp .env.testing .env",
10        "test": "nohup bash -c './vendor/laravel/dusk/bin/chromedriver-linux --port=9515 > /dev/null 2>&1 &' && nohup bash -c 'php artisan serve --no-reload > /dev/null 2>&1 &' && php artisan dusk"
11      }
12    }
13  }
14}

{
  "environments": {
    "test": {
      "buildpacks": [
        { "url": "heroku/php" },
        { "url": "https://github.com/heroku/heroku-buildpack-chrome-for-testing" }
      ],
      "scripts": {
        "test-setup": "cp .env.testing .env",
        "test": "nohup bash -c './vendor/laravel/dusk/bin/chromedriver-linux --port=9515 > /dev/null 2>&1 &' && nohup bash -c 'php artisan serve --no-reload > /dev/null 2>&1 &' && php artisan dusk"
      }
    }
  }
}

Travis CI

Travis CIでDuskテストを実行するには、次の.travis.yml設定を使用します。Travis CIはグラフィカル環境ではないため、Chromeブラウザを起動するためにいくつかの追加手順を実行する必要があります。さらに、php artisan serveを使用してPHPの組み込みウェブサーバーを起動します。

 1language: php
 2 
 3php:
 4  - 8.2
 5 
 6addons:
 7  chrome: stable
 8 
 9install:
10  - cp .env.testing .env
11  - travis_retry composer install --no-interaction --prefer-dist
12  - php artisan key:generate
13  - php artisan dusk:chrome-driver
14 
15before_script:
16  - google-chrome-stable --headless --disable-gpu --remote-debugging-port=9222 https:// &
17  - php artisan serve --no-reload &
18 
19script:
20  - php artisan dusk

language: php

php:
  - 8.2

addons:
  chrome: stable

install:
  - cp .env.testing .env
  - travis_retry composer install --no-interaction --prefer-dist
  - php artisan key:generate
  - php artisan dusk:chrome-driver

before_script:
  - google-chrome-stable --headless --disable-gpu --remote-debugging-port=9222 https:// &
  - php artisan serve --no-reload &

script:
  - php artisan dusk

GitHub Actions

GitHub Actionsを使用してDuskテストを実行している場合は、次の設定ファイルを開始点として使用できます。TravisCIと同様に、php artisan serveコマンドを使用してPHPの組み込みウェブサーバーを起動します。

 1name: CI
 2on: [push]
 3jobs:
 4 
 5  dusk-php:
 6    runs-on: ubuntu-latest
 7    env:
 8      APP_URL: "http://127.0.0.1:8000"
 9      DB_USERNAME: root
10      DB_PASSWORD: root
11      MAIL_MAILER: log
12    steps:
13      - uses: actions/checkout@v4
14      - name: Prepare The Environment
15        run: cp .env.example .env
16      - name: Create Database
17        run: |
18          sudo systemctl start mysql
19          mysql --user="root" --password="root" -e "CREATE DATABASE \`my-database\` character set UTF8mb4 collate utf8mb4_bin;"
20      - name: Install Composer Dependencies
21        run: composer install --no-progress --prefer-dist --optimize-autoloader
22      - name: Generate Application Key
23        run: php artisan key:generate
24      - name: Upgrade Chrome Driver
25        run: php artisan dusk:chrome-driver --detect
26      - name: Start Chrome Driver
27        run: ./vendor/laravel/dusk/bin/chromedriver-linux --port=9515 &
28      - name: Run Laravel Server
29        run: php artisan serve --no-reload &
30      - name: Run Dusk Tests
31        run: php artisan dusk
32      - name: Upload Screenshots
33        if: failure()
34        uses: actions/upload-artifact@v4
35        with:
36          name: screenshots
37          path: tests/Browser/screenshots
38      - name: Upload Console Logs
39        if: failure()
40        uses: actions/upload-artifact@v4
41        with:
42          name: console
43          path: tests/Browser/console

name: CI
on: [push]
jobs:

  dusk-php:
    runs-on: ubuntu-latest
    env:
      APP_URL: "http://127.0.0.1:8000"
      DB_USERNAME: root
      DB_PASSWORD: root
      MAIL_MAILER: log
    steps:
      - uses: actions/checkout@v4
      - name: Prepare The Environment
        run: cp .env.example .env
      - name: Create Database
        run: |
          sudo systemctl start mysql
          mysql --user="root" --password="root" -e "CREATE DATABASE \`my-database\` character set UTF8mb4 collate utf8mb4_bin;"
      - name: Install Composer Dependencies
        run: composer install --no-progress --prefer-dist --optimize-autoloader
      - name: Generate Application Key
        run: php artisan key:generate
      - name: Upgrade Chrome Driver
        run: php artisan dusk:chrome-driver --detect
      - name: Start Chrome Driver
        run: ./vendor/laravel/dusk/bin/chromedriver-linux --port=9515 &
      - name: Run Laravel Server
        run: php artisan serve --no-reload &
      - name: Run Dusk Tests
        run: php artisan dusk
      - name: Upload Screenshots
        if: failure()
        uses: actions/upload-artifact@v4
        with:
          name: screenshots
          path: tests/Browser/screenshots
      - name: Upload Console Logs
        if: failure()
        uses: actions/upload-artifact@v4
        with:
          name: console
          path: tests/Browser/console

Chipper CI

Chipper CIを使用してDuskテストを実行している場合は、次の設定ファイルを開始点として使用できます。PHPの組み込みサーバーを使用してLaravelを実行し、リクエストをリッスンします。

 1# file .chipperci.yml
 2version: 1
 3 
 4environment:
 5  php: 8.2
 6  node: 16
 7 
 8# Include Chrome in the build environment
 9services:
10  - dusk
11 
12# Build all commits
13on:
14   push:
15      branches: .*
16 
17pipeline:
18  - name: Setup
19    cmd: |
20      cp -v .env.example .env
21      composer install --no-interaction --prefer-dist --optimize-autoloader
22      php artisan key:generate
23 
24      # Create a dusk env file, ensuring APP_URL uses BUILD_HOST
25      cp -v .env .env.dusk.ci
26      sed -i "s@APP_URL=.*@APP_URL=http://$BUILD_HOST:8000@g" .env.dusk.ci
27 
28  - name: Compile Assets
29    cmd: |
30      npm ci --no-audit
31      npm run build
32 
33  - name: Browser Tests
34    cmd: |
35      php -S [::0]:8000 -t public 2>server.log &
36      sleep 2
37      php artisan dusk:chrome-driver $CHROME_DRIVER
38      php artisan dusk --env=ci

# file .chipperci.yml
version: 1

environment:
  php: 8.2
  node: 16

# Include Chrome in the build environment
services:
  - dusk

# Build all commits
on:
   push:
      branches: .*

pipeline:
  - name: Setup
    cmd: |
      cp -v .env.example .env
      composer install --no-interaction --prefer-dist --optimize-autoloader
      php artisan key:generate

      # Create a dusk env file, ensuring APP_URL uses BUILD_HOST
      cp -v .env .env.dusk.ci
      sed -i "s@APP_URL=.*@APP_URL=http://$BUILD_HOST:8000@g" .env.dusk.ci

  - name: Compile Assets
    cmd: |
      npm ci --no-audit
      npm run build

  - name: Browser Tests
    cmd: |
      php -S [::0]:8000 -t public 2>server.log &
      sleep 2
      php artisan dusk:chrome-driver $CHROME_DRIVER
      php artisan dusk --env=ci

データベースの使用方法など、Chipper CIでDuskテストを実行する方法の詳細については、公式のChipper CIドキュメントを参照してください。

序文

はじめに

アーキテクチャのコンセプト

基本

より深く知る

セキュリティ

データベース

Eloquent ORM

テスト

パッケージ

Laravel Dusk