【Laravel／Dusk】waitForを使って無駄なテスト実行時間を短縮する

はじめに

①ボタンをクリック
②GETリクエスト
③レスポンスが返ってきてメッセージ表示

Duskを使ってテストを書いていると、上記のような流れをテストすることはよくあると思います。
このような一連の流れを確認するにはどのように実装するのが良いでしょうか？

例えば①で<button dusk="search-button">検索</button>をクリックして③で検索結果が0件です。というメッセージを確認するテストだとして、下記のように実装してみます。

// パターン1
$browser->click('@search-button');
$browser->assertSee('検索結果は0件です。');

click()で検索ボタンクリックを行い、assertSee()でメッセージを確認するシンプルな内容で、テストも問題なく動くかと思います。

しかし、実行環境などによって②のGETリクエストの結果がすぐに返って来なかった場合(スペックが良くない、遅いPCの環境で実行をした場合など)、assertSee()での確認に失敗する可能性があります。
これでは環境によって結果が異なってしまうので良くありません。

では以下はどうでしょうか？

// パターン2
$browser->click('@search-button');
$browser->pause(3000);
$browser->assertSee('検索結果は0件です。');

パターン1のclick()とassertSee()の間にpause()で3秒待機するようにしてみました。
こちらも問題なくテストが実行されると思います。

しかしpause()は指定した時間分待機するため、3秒以内で実行できても必ず3秒の実行時間が必要となってしまいます。
1件ならまだしも何度もpause()で待機していれば、テスト全体の実行時間は長くなってしまいます。

こんな時にパターン1,2の問題を解決できるのがclickAndWaitForReload()です。

$browser->clickAndWaitForReload('@search-button');
$browser->assertSee('検索結果は0件です。');

clickAndWaitForReload()はボタンをクリックした後リロードするまで待ってくれます。
パターン1のように環境によって左右されることもなく、パターン2のように無駄な待機の時間はありません。

リロードした後に何か確認するようなテストはclickAndWaitForReload()を使ってみてください！

補足

上記のようなボタンクリックイベントからリロードするテストではない場合でも、少し待機して特定のメッセージの確認などを行いたい場面もあると思います。
そのような時もpause()ではなくwaitForメソッドを使うことで、無駄な待機時間をなくすことができます。

waitForメソッドは最長どれくらい待機するかを指定することができます。
第一引数には対象のセレクタやテキストなどを指定し、第二引数に最長で待ちたい秒数を指定することができます。(指定しなければ最長5秒待ちます。)
ぜひ活用してみてください！

// セレクタを最長5秒待つ
$browser->waitFor('@selector');
// セレクタを最長1秒待つ
$browser->waitFor('@selector', 1);

// テキストを最長5秒待つ
$browser->waitForText('Hello World');
// テキストを最長3秒待つ
$browser->waitForText('Hello World', 3);

参考