Laravel での E2E テストを学びます。Laravel での E2E テストツールである Laravel Dusk でヘッドレスブラウザを操作します。
前回からの申し送り事項
ToDo リスト一覧画面で実装と確認が漏れていたものがありました。
- 新規登録ボタンの設置
- 新規登録ボタンの自動テスト
これらに取り組みます。
Laravelでのテストの種類
- ユニットテスト
- フューチャーテスト
- ブラウザテスト
今回はブラウザテストを行う必要があります。
テストケース
以下のテストケースを確認します。
- 新規登録ボタンクリックで、新規登録画面に遷移する
ただ、新規登録画面は、まだ作成していません。代わりに「タスク新規登録」という文字を表示するようにします。
Laravel Duskのインストール
ブラウザテストを行うには、Laravel Dusk というツールをインストールする必要があります。
Laravel Dusk の公式ドキュメントの日本語訳は下記にあります。 https://readouble.com/laravel/7.x/ja/dusk.html
以下のコマンドでセットアップができます。
$ composer require --dev laravel/dusk:"^6.0"
$ php artisan dusk:install
Chrome のインストール
$ sudo apt install libappindicator1 libappindicator3-1 fonts-liberation
$ sudo apt --fix-broken install
$ wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
$ sudo dpkg -i --force-depends google-chrome-stable_current_amd64.deb
$ sudo apt install -f
先に必要なライブラリのインストールと依存関係の解消を行います。 その後、chromeの安定版をダウンロードし解答後にインストールします。
コンフィグファイルの設定
.env.testing を コピーして、.env.duskを作成します。
$ cp .env.testing .env.dusk
この設定で、ブラウザテスト時もテスト用のデータベースを使用します。
テストケース
$ php artisan dusk:make TodoListsTest
tests/Browser/TodoListsTest.phpのassertSeeを書き換えます。
// tests/Browser/TodoListsTest.php
/**
* A Dusk test example.
*
* @return void
*/
public function testExample()
{
$this->browse(function (Browser $browser) {
$browser->visit('/') //一覧画面に移動
->clickLink('+ Add') // 一覧画面で新規作成リンクをクリック
->assertSee('タスク新規登録'); // 「タスク新規登録」というテキストが含まれていることを確認
});
}
フューチャーテストだと、ブラウザ上のものをクリックできません。 ブラウザテストだと、上記のようにクリックを行えます。
テストを実行します。
$ php artisan dusk
新規登録ボタンの設置はまだ行っていないのでテストは失敗になります。 ここでは、テストコードが動作することだけを確認しています。
実装
新規登録ボタンを追加していきます。
ルート
web.phpにて、ルートを追加します。
Route::get('/tasks/create',function () {
return 'タスク新規登録';
})->name('task.new');
新規登録画面の代わりに「タスク新規登録」の文字を表示します。
ビュー
新規 ToDo 登録のためのボタンを配置します。
タブヘッダの上部右に配置します。
下記の<!-- 新規登録ボタンの追加 -->の<!-- /新規登録ボタンの追加 --> で囲んだ部分をresources/views/layout/layout.blade.php に追加してください。
<!-- resources/views/layout/layout.blade.php -->
<div class="container">
<div class="row">
<main class="col-md-12 col-lg-12">
<!-- 新規登録ボタンの追加 -->
<div class="mb-3">
@yield('newbutton')
</div>
<!-- /新規登録ボタンの追加 -->
<div class="card">
<div class="card-header d-flex justify-content-between" >
@yield('tab-header')
</div>
<div class="card-body">
@yield('content')
</div>
</div>
</main>
</div>
</div>
「+ ADD」というボタンを表示します。
下記の<!-- 新規登録ボタンの追加 -->の<!-- /新規登録ボタンの追加 --> で囲んだ部分を resources/views/index.blade.php に追加してください。
<!-- resources/views/index.blade.php -->
@extends('layout.layout')
<!-- 新規登録ボタンの追加 -->
@section('newbutton')
<div class="d-flex justify-content-end">
<a class="btn btn-primary" href="{{ route('task.new') }}" role="button">+ Add</a>
</div>
@endsection
<!-- /新規登録ボタンの追加 -->
@include('layout.tab-header')
テスト
テストを実行します。
developer@Ryzen:/var/www/html/todo$ php artisan dusk
PHPUnit 9.5.1 by Sebastian Bergmann and contributors.
F. 2 / 2 (100%)
Time: 00:01.575, Memory: 18.00 MB
There was 1 failure:
1) Tests\Browser\ExampleTest::testBasicExample
Did not see expected text [Laravel] within element [body].
Failed asserting that false is true.
/var/www/html/todo/vendor/laravel/dusk/src/Concerns/MakesAssertions.php:181
/var/www/html/todo/vendor/laravel/dusk/src/Concerns/MakesAssertions.php:152
/var/www/html/todo/tests/Browser/ExampleTest.php:20
/var/www/html/todo/vendor/laravel/dusk/src/Concerns/ProvidesBrowser.php:68
/var/www/html/todo/tests/Browser/ExampleTest.php:21
FAILURES!
Tests: 2, Assertions: 2, Failures: 1.
ExampleTest::testBasicExample が失敗したようです。 これは、｀php artisan dusk:install｀を行ったときに自動で作成されたテストです。 削除します。
developer@Ryzen:/var/www/html/todo$ rm tests/Browser/ExampleTest.php
テストを再実行します。
developer@Ryzen:/var/www/html/todo$ php artisan dusk
PHPUnit 9.5.1 by Sebastian Bergmann and contributors.
. 1 / 1 (100%)
Time: 00:00.721, Memory: 18.00 MB
OK (1 test, 1 assertion)
完成です。