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


関連記事

Kotlinでのnullの基本的な扱いかた

1 はじめに2 基本的にnullを許容しない3 nullを許容するNullable4 Nullableをnon-nullに変える4.1 nullチェックとスマートキャスト4.2 エルビス演算子4.3 ...

rails

deviseを使ってユーザ登録フォームを作る

1 はじめに1.1 前提条件2 deviseについて2.1 deviseとは2.2 deviseでできること3 登録処理の実装3.1 Gemのインストール3.2 deviseのインストール3.3 デフ ...

rails

Rails Developer Meetup に参加してきました【1日目】

1 はじめに2 発表について2.1 安全かつ高速に進めるマイクロサービス化2.2 Rails in Microservices2.3 MySQL/InnoDB の裏側2.4 H2O/mruby でつく ...

WebアプリからLINEのメッセージを送る方法

1 はじめに2 Messaging APIとは2.1 Messaging APIの仕組み2.2 Webhookイベント2.3 メッセージオブジェクトの種類2.4 料金形態3 LINE Develope ...

docker-syncでファイルの同期を高速化する

1 はじめに2 docker-syncの導入3 設定ファイルの作成3.1 docker-composer.yml3.2 docker-compose-dev.yml3.3 docker-sync.ym ...

フォロー

follow us in feedly

blog-page_side_responsive

2020年9月
 12345
6789101112
13141516171819
20212223242526
27282930 

アプリ情報

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