【Laravel Dusk】テストの生成と基本的な操作

はじめに

E2Eテストを行う際に、初めてLaravel Duskを使う機会がありました。
テストを生成する方法やよく使うメソッド、アサートなど、忘れないよう備忘録として残したいと思います。

目次

・ コマンド
　- テストを生成
　- テストを実行
・ ブラウザ
　- ブラウザの生成
　- URIに移動
　- ウィンドウのサイズ変更
　- 認証
　- スクリーンショットの取得
・ 要素の操作
　- Duskセレクタ
　- 値の取得と設定
　- テキストの取得
　- フォーム操作
　- ボタンの押下
　- 待機
・ アサート
　- assertSee/assertDontSee
　- assertSeeIn/assertDontSeeIn
　- assertChecked/assertNotChecked
　- assertSelected/assertNotSelected
　- assertInputValue/assertInputValueIsNot

コマンド

テストを生成

php artisan dusk:make クラス名

テストを生成するにはArtisanコマンドのdusk:makeを使います。
生成されたテストはtests/Browserの配下に置かれます。
tests/Browserの配下でディレクトリに分けたい場合は、コマンドのクラス名の部分をディレクトリ名/クラス名と変更すると実現できます。

テストを生成するとデフォルトで下記のようなソースコードが実装されています。
下記で言うとtestExample()が一つのテストとなるので、その中にテスト内容を実装していきます。

tests/Browser/IndexTest.php

use Laravel\Dusk\Browser;
use Tests\DuskTestCase;

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

テストを実行

php artisan dusk

テストを実行するにはArtisanコマンドのduskを使います。
実行するとtests/Browserの配下にあるテストが全て実行されます。
特定のディレクトリやテストファイルのみ実行したい場合は、コマンドの後ろにパスを指定します。

php artisan dusk test/Browser/ディレクトリ名/クラス名

ブラウザ

ブラウザの生成

use Laravel\Dusk\Browser;

public function testExample()
{
    $this->browse(function (Browser $browser) {
        // ブラウザテスト内容
    });
}

$this->browse(テスト内容を実装したクロージャ);

ブラウザを生成するにはテスト内からbrowse()メソッドを呼び出します。
引数には行いたいテスト内容のクロージャを実装します。

URIに移動

use Laravel\Dusk\Browser;

public function testExample()
{
    $this->browse(function (Browser $browser) {
        $browser->visit('/login');
        // or
        $browser->visitRoute('login');
    });
}

$this->visit(パス);
$this->visitRoute(名前付きルートの名前);

特定のURIに移動するには、visit()メソッドを使用し、引数には移動先のパスを指定します。
名前付きルートへの移動はvisitRoute()メソッドを使用します。

ウィンドウのサイズ変更

use Laravel\Dusk\Browser;

public function testExample()
{
    $this->browse(function (Browser $browser) {
        $browser->resize(1920, 1080);
        $browser->maximize();
    });
}

$this->resize(横, 縦);
$this->maximize();

ウィンドウサイズの変更はresize()メソッドを使用し、引数には縦横のサイズを指定します。
またサイズを最大化するにはmaximize()メソッドを使用します。

認証

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

public function testExample()
{
    $this->browse(function (Browser $browser) {
        $browser->loginAs(User::find(1));
    });
}

$this->loginAs(モデル or モデルインスタンスに関連づけられた主キー);

テストを行うシステムにログインするにはloginAs()メソッドを使用します。
loginAs()の引数には、ログインするモデルまたはモデルインスタンスに関連づけられた主キーを指定します。

スクリーンショットの取得

use Laravel\Dusk\Browser;

public function testExample()
{
    $this->browse(function (Browser $browser) {
        $browser->screenshot('filename');
    });
}

$this->screenshot(ファイル名);

ブラウザのスクリーンショットを取るにはscreenshot()メソッドを使用します。
スクリーンショットはtests/Browser/screenshotsに保存されます。
screenshot()の引数には保存したいファイル名を指定し、tests/Browser/screenshots配下でディレクトリを分けたい場合はディレクトリ名/ファイル名を指定します。

要素の操作

Duskセレクタ

例えばボタンをクリックするテストを行いたい場合下記のようなテストを実装します。

// HTML
<div class="search-page">
    <button>検索</button>
</div>

// TEST
public function testExample()
{
    $this->browse(function (Browser $browser) {
        $browser->click('.index-page button');
    });
}

クリックしたい要素のCSSセレクタをclick()メソッドの引数に指定しなければなりません。
しかし実際により複雑なHTMLとなるとCSSセレクタを指定することが難しくなります。
そのような場合にDuskセレクタを使用すると、簡単に要素を操作することができます。

// HTML
<div class="search-page">
    <button dusk="search-button">検索</button>
</div>

// TEST
public function testExample()
{
    $this->browse(function (Browser $browser) {
        $browser->click('@search-button');
    });
}

対象となるHTML要素にdusk属性を追加し、テストでの要素指定には@と属性名を指定することで、簡単に要素の操作をすることができます。

値の取得と設定

use Laravel\Dusk\Browser;

public function testExample()
{
    $this->browse(function (Browser $browser) {
        $value = $browser->value('@user-name');
        $browser->value('@user-name', 'テストユーザ');
    });
}

取得 ： $this->value(セレクタ);
設定 ： $this->value(セレクタ, 設定値);

要素の値を取得、設定するにはvalue()メソッドを使用します。
取得する際は引数にセレクタを指定し、設定する際はセレクタと設定したい値を指定します。

テキストの取得

use Laravel\Dusk\Browser;

public function testExample()
{
    $this->browse(function (Browser $browser) {
        $text = $browser->text('@title');
    });
}

取得 ： $this->text(セレクタ);

要素の表示テキストを取得するにはtext()メソッドを使用し、引数にはセレクタを指定します。

フォーム操作

use Laravel\Dusk\Browser;

public function testExample()
{
    $this->browse(function (Browser $browser) {
        // 入力
        $browser->type('name', 'テストユーザ');
        // 入力値をクリア
        $browser->clear('name');
        // ドロップダウンの選択
        $browser->select('size', 'Large');
        // チェックボックスをチェックする
        $browser->check('terms');
    });
}

$this->type(name属性, 入力値);

入力フィールドへのテキストの入力にはtype()メソッドを使用し、第一引数には入力フィールドのname属性を、第二引数には入力値を指定します。

$this->clear(name属性);

入力値をクリアするにはclear()メソッドを使用し、引数には入力フィールドのname属性を指定します。

$this->select(name属性, optionのvalue値);

ドロップダウンを選択するにはselect()メソッドを使用し、第一引数にはselect要素のname属性を、第二引数には選択するoptionのvalue値を指定します。

$this->check(name属性);

チェックボックスをチェックするにはcheck()メソッドを使用し、引数にはチェックボックスのname属性を指定します。
チェックを解除するにはuncheck()メソッドを使用します。

ボタンの押下

use Laravel\Dusk\Browser;

public function testExample()
{
    $this->browse(function (Browser $browser) {
        $browser->press('検索');
    });
}

$this->press(表示テキスト or セレクタ);

ボタン要素を押下するにはpress()メソッドを使用します。
引数にはボタンの表示テキストもしくはセレクタを指定することができます。
press()メソッドはボタン要素にのみ使用できるため、その他要素のクリックにはclick()要素を使用します。

待機

use Laravel\Dusk\Browser;

public function testExample()
{
    $this->browse(function (Browser $browser) {
        // セレクタの待機
        $browser->waitFor('@user-name');
        $browser->waitFor('@user-name', 1);
        // テキストの待機
        $browser->waitForText('Hello World!');
        $browser->waitForText('Hello World!', 2);
    });
}

$this->waitFor(セレクタ); / $this->waitFor(セレクタ, 秒数);
$this->waitForText(テキスト); / $this->waitForText(テキスト, 秒数);

特定の要素が表示されるまでテストの実行を待機(一時停止)するにはwaitFor()メソッドを使用します。
引数には待機したい対象の要素のセレクタを指定し、最長5秒テストを一時停止します。
待機時間を指定したい場合は第二引数に秒数を指定します。
指定したテキストが表示されるまで待機したい場合はwaitForText()メソッドを使用します。
引数には対象のテキストを指定し、セレクタの待機と同じく時間を指定したい場合は第二引数に指定します。

アサート

assertSee/assertDontSee

use Laravel\Dusk\Browser;

public function testExample()
{
    $this->browse(function (Browser $browser) {
        $browser->assertSee('ログインユーザ/テストA');
        $browser->assertDontSee('ログインユーザ/テストB');
    });
}

$this->assertSee(テキスト);
$this->assertDontSee(テキスト);

特定のテキストが画面上に存在することを宣言するにはassertSee()メソッドを、存在しないことを宣言するにはassertDontSee()メソッドを使用します。
引数にはどちらも対象のテキストを指定します。

assertSeeIn/assertDontSeeIn

use Laravel\Dusk\Browser;

public function testExample()
{
    $this->browse(function (Browser $browser) {
        $browser->assertSeeIn('@login-user', 'ログインユーザ/テストA');
        $browser->assertDontSeeIn('@login-user', 'ログインユーザ/テストB');
    });
}

$this->assertSeeIn(セレクタ, テキスト);
$this->assertDontSeeIn(セレクタ, テキスト);

特定のテキストがセレクタに含まれていることを宣言するにはassertSeeIn()メソッドを、含まれていないことを宣言するにはassertDontSeeIn()メソッドを使用します。
引数にはどちらも対象のセレクタとテキストを指定します。

assertChecked/assertNotChecked

use Laravel\Dusk\Browser;

public function testExample()
{
    $this->browse(function (Browser $browser) {
        $browser->assertChecked('red');
        $browser->assertNotChecked('blue');
    });
}

$this->assertChecked(セレクタ or name属性);
$this->assertNotChecked(セレクタ or name属性);

特定のチェックボックスがチェック済みであることを宣言するにはassertChecked()メソッドを、チェックされていないことを宣言するにはassertNotChecked()メソッドを使用します。
引数にはどちらもセレクタ または name属性を指定します。

assertSelected/assertNotSelected

use Laravel\Dusk\Browser;

public function testExample()
{
    $this->browse(function (Browser $browser) {
        $browser->assertSelected('@age', '10');
        $browser->assertNotSelected('@age', '20');
    });
}

$this->assertSelected(セレクタ or name属性, 選択値);
$this->assertNotSelected(セレクタ or name属性, 選択値);

特定のドロップダウンで特定の値が選択されていることを宣言するにはassertSelected()メソッドを、選択されていないことを宣言するにはassertNotSelected()メソッドを使用します。
引数にはどちらもセレクタ または name属性と選択するoptionのvalue値を指定します。

assertInputValue/assertInputValueIsNot

use Laravel\Dusk\Browser;

public function testExample()
{
    $this->browse(function (Browser $browser) {
        $browser->assertInputValue('@name', 'テストユーザ');
        $browser->assertInputValueIsNot('name', '管理者ユーザ');
    });
}

$this->assertInputValue(セレクタ or name属性, 入力値);
$this->assertInputValueIsNot(セレクタ or name属性, 入力値);

特定の入力フィールドが特定の値を持っていることを宣言するにはassertInputValue()メソッドを、持っていないことを宣言するにはassertInputValueIsNot()メソッドを使用します。
引数にはどちらもセレクタ または name属性と入力値を指定します。

参考