BackEnd

Laravelのブラウザテスト「Dusk」をシンプルなCRUDで始めてみよう

投稿日:

はじめに

Laravelでは標準で単体テストを実行できますが、公式パッケージ Laravel Duskを使用すると、ブラウザテスト作成・実行ができるようになります。今回は、CRUDを例に、セットアップと基本的なアクション・アサーションを紹介します。

Laravel Duskのセットアップ

まずは、composerでインストールします。

次に、artisanコマンドで必要なファイルを配置します。

tests/Browswerディレクトリが作成され、ブラウザテストに必要なファイルが配置されます。構造は次のようになっています。

今回は触れませんが、ページやコンポーネントを使用すると、テストをより構造的に実装することができ、同じUIパーツやページをテストする際に、コードを使いまわせるようになります。
また、consoleはブラウザコンソールの内容、screenshotsにはテスト失敗時や、任意のタイミングでスクリーンショットを撮影したときの画像が入ります。

新規登録のテスト

テスト対象となるコード

前提となる機能を実装します。今回は、書籍を登録・更新・削除できるサンプルコードになります。まずは、一覧と新規登録を作成します。

web.php

BookController

BookRequest

index.blade

edit.blade

form.blade

Duskのテストコード

まずは、テスト用のクラスを作成します。

すると、 tests/Browser/BookCreateTest.phpが生成されます。ここに、テストコードを書いていきます。

PHPUnitを使用しているので、メソッド名のプレフィックスに testを付けるか、アノテーションを設定します。
基本的には、 $browserに続けて、動作とアサーションを記述していきます。最初の例では、新規作成画面に遷移し、必要なパラメータを入力します。
2つめの例では、入力せずに送信し、バリデーションエラーの文言をチェックしています。
ここで使用しているメソッドを紹介します。

  • type(テキストボックスのname, 入力内容文字列)
    テキストボックスに入力します。
  • click(セレクタ)
    ボタンをクリックします。セレクタにはCSSセレクタが使用できるので、例えばid等でclick('#register') と指定することもできます。
  • clickLink(テキスト)
    テキストリンクをクリックします。
  • assertPathIs(パス)
    表示されているページのパスが、指定のものと一致するか検証します。読み込みに時間のかかるページの場合は、waitする必要はありませんでした。一方で、JavaScriptで重い処理の直後にこの関数を実行すると、アサーションに失敗しました。(JavaScriptに絡むものは次回以降紹介したいと思います。)
  • assertSee(文字列)
    表示されているページに指定の文字列があるか確認します。

テストの実行

テストを実行するには $ php artisan duskコマンドを使用します。実際にテストを動作させると、次のように出力されます。

失敗すると、エラー内容が表示されます。また、 tests/Browser/screenshots配下に、エラー時のスクリーンショットが保存されます。

更新のテスト

更新のテストでは、更新前の値が正しく入っていること、正しく更新できることをテストします。

テスト対象となるコード

新規作成のテストで作ったコードに追記します。

BookController

index.blade.php

edit.blade.php (新規追加)

Duskのテストコード

新規作成のテストの応用で実装していきます。先ほどの BookCreateTest.phpに追記します。

ここで使用しているメソッドを紹介します。

  • assertValue(セレクタ)
    セレクタの inputタグに、値を指定します。 click()と同じように、CSSセレクタで指定します。
  • click('detail-link:first-of-type')
    先ほども紹介したメソッドですが、CSSセレクタの使い方が異なるので紹介します。一覧画面では複数の詳細リンクがあります。そこで、CSS擬似クラス :first-of-typeを使用して、1つ目の詳細リンクをクリックするようにしています。

JavaScriptを組み合わせた例

ブラウザテストなので、JavaScriptの動作も検証することができます。削除のテストを例にとって、説明します。

テスト対象となるコード

新規作成のテストで作ったコードに追記します。

BookController

index.blade.php

Duskのテストコード

このサンプルでは、削除ボタンを押すと「本当に削除しますか?」というダイアログが表示されてから、削除を行います。その動作をLaravel Duskで実装します。
それでは、先ほどの BookCreateTest.phpに追記します。

ここで使用しているメソッドを紹介します。

  • assertDialogOpened(テキスト)
    ダイアログ(JSのalert/confirm/prompt)のメッセージが、指定のものになっているか検証します。
  • acceptDialog()
    ダイアログのOKボタンを押下します。
  • dismissDialog()
    ダイアログを閉じます。(confirm, promptではキャンセルボタン押下と同じになります。)
  • assertDontSee(テキスト)
    指定したテキストが表示されていないことを検証します。

さいごに

今回のテストコードの全体をここに載せておきます。

今回紹介した以外にも、様々なアクション・アサーションがあります。詳しくは公式ドキュメントを参照してください。
Laravel Dusk: https://laravel.com/docs/master/dusk

おすすめ書籍

PHPフレームワークLaravel入門 第2版 PHPフレームワーク Laravel実践開発 PHPフレームワーク Laravel Webアプリケーション開発 バージョン5.5 LTS対応 よくわかるPHPの教科書 【PHP7対応版】

blog-page_footer_336




blog-page_footer_336




-BackEnd
-,

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

laravel logo

LaravelのArtisanコマンドを自作する

1 はじめに2 コマンドの作成方法3 コマンドの実装3.1 文字列出力3.2 引数3.3 オプション3.4 入力を使用した対話型3.4.1 ask()メソッド3.4.2 secret()メソッド3.4 ...

麻雀で自分が何を切るか学習させる

1 はじめに2 プロジェクト名を決めてみる3 何切る問題で考慮される要素3.1 手牌3.2 ドラ3.3 考慮していない要素(本当は入れたい)4 学習の方法5 さいごに はじめに 前回執筆しました、配牌 ...

laravel logo

Laravelのバッチ処理を作る

1 はじめに2 環境3 artisanコマンド作成4 artisanコマンドをバッチとして登録する5 さいごに6 おすすめ書籍 はじめに こんにちは。webアプリにつきもののバッチ処理ですが、もちろん ...

laravel logo

Laravel Authのパスワードリセット機能をカスタマイズする

1 はじめに2 準備2.1 Auth2.2 mailhog3 ユーザー登録とログイン4 パスワードリセットのカスタマイズ4.1 ルーティング確認4.2 view編集4.3 認証処理の編集5 リセット画 ...

Go言語

Go言語で使えるmigrationライブラリ

1 はじめに2 migrationライブラリ2.1 goose2.2 sql-migrate2.3 migu2.4 pop2.5 sqldef3 sqldefを使ってみる3.1 導入3.2 テーブルを ...

フォロー

follow us in feedly

blog-page_side_responsive

2020年9月
 12345
6789101112
13141516171819
20212223242526
27282930 

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。