Laravel Duskでのブラウザテスト
LaravelのDuskという機能を使って、ブラウザテストをする手順のまとめです。
実行環境はMacOS11.6、Laravel8です。
環境構築
まずDuskをインストールします。
composer require --dev laravel/dusk
次にインストールコマンドを実行します。
php artisan dusk:install
Chromeブラウザをインストールします。
※--detectをつけるとOSと同じバージョンをインストールできるようです。
php artisan dusk:chrome-driver --detect
ローカル環境に対してテストする場合は、.envのAPP_URLを修正します。
APP_URL=http://127.0.0.1:8000
テスト作成
今回は単純にログインフォームにIDとパスワードを入力してログインをテストしてみます。
まず、単純なログインフォームを作ります。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Login</title>
</head>
<body>
<div class="m-3 col-5">
@if ($errors->any())
<div class="alert alert-danger">
<ul class="list-group">
@foreach ($errors->all() as $error)
<li class="list-group-item">{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('login') }}" method="post">
@csrf
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-2 col-form-label">ID</label>
<div class="col-sm-10">
<input type="text" id="id" class="form-control" name="id" value="{{ old('id') }}">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" id="password" class="form-control" name="password">
</div>
</div>
<button type="submit" id="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</body>
</html>
ログインに成功した場合は、成功メッセージを出します。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
</head>
<body>
<div class="m-3 col-5">
Login Success
</div>
</body>
</html>
ログイン画面のテストクラスを作ります。
下記のコマンドを実行するとtests/Bowser/LoginTest.phpができます。
php artisan dusk:make LoginTest
LoginTest.phpにテストメソッドを作ります。
入力フォームはCSSセレクタで名前やidのどちらの指定でも可能です。
public function testLoginSuccess()
{
$this->browse(function (Browser $browser) {
$browser->visit('/login')
->append('#id', 'hoge')
->append('input[name=password]', 'moge')
->press('Submit')
->assertSee('Login Success');
});
}
テスト実行
php artisan dusk