Laravel DuskでE2Eテスト（フォーム入力編）

Laravel Dusk を使って、実際にフォームを入力してみる E2E テストを書いてみました。
今回紹介するのは、自分の開発で実際に使った「お問い合わせフォーム」の例です。

「ちゃんと値を入力できるか」を確認するだけでも、E2E テストとしては結構安心感が出てきます。

dusk属性をフォームに付ける

Dusk では dusk="..." という専用属性を付けて、テスト用のセレクタとして利用できます。
id や class だと CSS や JS の変更に巻き込まれて壊れやすいので、Dusk 専用のフックを付けておくのが安全です。

Blade 側はこんな感じ

<form dusk="contact-form" method="POST" action="/contact">
  @csrf
  <input type="text" name="name" dusk="name">
  <input type="tel" name="tel" dusk="tel">
  <input type="email" name="email" dusk="email">
  <textarea name="msg" dusk="msg"></textarea>
</form>

テストコード（入力まで）

次に、Dusk のテストコードです。
フォームを開いて、各フィールドに入力していきます。

$this->browse(function (Browser $browser) {
    $browser->visit('/contact')
        ->waitFor('@contact-form', 10)
        ->type('@name',  'テスト太郎')
        ->type('@tel',   '09012345678')
        ->type('@email', 'test@example.com')
        ->type('@msg',   'こんにちは！');
});

• visit('/contact') でページにアクセス
• waitFor('@contact-form', 10) で要素が出るまで最大10秒待機
• type('@name', 'テスト太郎') で入力

実際に「入力されていく様子」が見えるので、テストが動いてる感があって楽しいです。

まとめ

ここまでで「フォーム入力の自動化」ができました。
次はこの内容を実際に送信して、Thanksページまで遷移できるかを確認していきます。

今回は以上です。