Laravel DuskでE2Eテストを書いてみた（送信編）

前回はフォームに値を入力するところまででした。
今回は続きとして、チェックボックスにチェックを入れて送信、サンクスページに遷移するところまでをテストします。

送信部分のテストコード

入力後の処理はこんな感じになりました。

$browser
    ->script("document.querySelector('[dusk=privacy]').scrollIntoView({block:'center'});")
    ->check('@privacy')
    ->waitFor('@contact-submit', 5)
    ->click('@contact-submit')
    ->acceptDialog()
    ->waitForLocation('/contact/thanks', 10)
    ->assertPathIs('/contact/thanks')
    ->assertQueryStringHas('token');

ポイント解説

• scrollIntoView
  チェックボックスが画面外にあって check() が失敗したので、スクロールで中央まで持ってきました。
• check / click
  チェックボックスにチェックして、送信ボタンをクリック。
• acceptDialog
  ブラウザの確認ダイアログ（送信確認など）が出るので、それをOKにします。
• waitForLocation / assert*
  /contact/thanks に遷移するまで待機し、パスやクエリパラメータを確認。

これで「フォームが送信できて、Thanksページに着いた」ことを保証できます。

まとめ

これでフォームの入力から送信、そしてThanksページへの遷移まで一連の流れをテストできました。
Dusk は実際にブラウザを人間が操作しているように動くので、見ていて面白いし安心感もあります。

開発中は「このページ、ちゃんと送信できるんだっけ？」みたいな不安をなくすのに役立ちました。