はじめに
E2Eテスト
を行う際に、初めてLaravel Dusk
を使う機会がありました。
テストを生成する方法やよく使うメソッド、アサートなど、忘れないよう備忘録として残したいと思います。
目次
・ コマンド
- テストを生成
- テストを実行
・ ブラウザ
- ブラウザの生成
- URIに移動
- ウィンドウのサイズ変更
- 認証
- スクリーンショットの取得
・ 要素の操作
- Duskセレクタ
- 値の取得と設定
- テキストの取得
- フォーム操作
- ボタンの押下
- 待機
・ アサート
- assertSee/assertDontSee
- assertSeeIn/assertDontSeeIn
- assertChecked/assertNotChecked
- assertSelected/assertNotSelected
- assertInputValue/assertInputValueIsNot
コマンド
テストを生成
php artisan dusk:make クラス名
テストを生成するにはArtisan
コマンドのdusk:make
を使います。
生成されたテストはtests/Browser
の配下に置かれます。
tests/Browser
の配下でディレクトリに分けたい場合は、コマンドのクラス名
の部分をディレクトリ名/クラス名
と変更すると実現できます。
テストを生成するとデフォルトで下記のようなソースコードが実装されています。
下記で言うとtestExample()
が一つのテストとなるので、その中にテスト内容を実装していきます。
use Laravel\Dusk\Browser;
use Tests\DuskTestCase;
class IndexTest extends DuskTestCase
{
/**
* A Dusk test example.
*
* @return void
*/
public function testExample()
{
$this->browse(function (Browser $browser) {
$browser->visit('/')
->assertSee('Laravel');
});
}
}
テストを実行
php artisan dusk
テストを実行するにはArtisan
コマンドのdusk
を使います。
実行するとtests/Browser
の配下にあるテストが全て実行されます。
特定のディレクトリやテストファイルのみ実行したい場合は、コマンドの後ろにパスを指定します。
php artisan dusk test/Browser/ディレクトリ名/クラス名
ブラウザ
ブラウザの生成
use Laravel\Dusk\Browser;
public function testExample()
{
$this->browse(function (Browser $browser) {
// ブラウザテスト内容
});
}
$this->browse(テスト内容を実装したクロージャ);
ブラウザを生成するにはテスト内からbrowse()
メソッドを呼び出します。
引数には行いたいテスト内容のクロージャ
を実装します。
URIに移動
use Laravel\Dusk\Browser;
public function testExample()
{
$this->browse(function (Browser $browser) {
$browser->visit('/login');
// or
$browser->visitRoute('login');
});
}
$this->visit(パス);
$this->visitRoute(名前付きルートの名前);
特定のURI
に移動するには、visit()
メソッドを使用し、引数には移動先のパス
を指定します。
名前付きルートへの移動はvisitRoute()
メソッドを使用します。
ウィンドウのサイズ変更
use Laravel\Dusk\Browser;
public function testExample()
{
$this->browse(function (Browser $browser) {
$browser->resize(1920, 1080);
$browser->maximize();
});
}
$this->resize(横, 縦);
$this->maximize();
ウィンドウサイズの変更はresize()
メソッドを使用し、引数には縦横のサイズ
を指定します。
またサイズを最大化するにはmaximize()
メソッドを使用します。
認証
use App\Models\User;
use Laravel\Dusk\Browser;
public function testExample()
{
$this->browse(function (Browser $browser) {
$browser->loginAs(User::find(1));
});
}
$this->loginAs(モデル or モデルインスタンスに関連づけられた主キー);
テストを行うシステムにログインするにはloginAs()
メソッドを使用します。
loginAs()
の引数には、ログインするモデル
またはモデルインスタンスに関連づけられた主キー
を指定します。
スクリーンショットの取得
use Laravel\Dusk\Browser;
public function testExample()
{
$this->browse(function (Browser $browser) {
$browser->screenshot('filename');
});
}
$this->screenshot(ファイル名);
ブラウザのスクリーンショットを取るにはscreenshot()
メソッドを使用します。
スクリーンショットはtests/Browser/screenshots
に保存されます。
screenshot()
の引数には保存したいファイル名
を指定し、tests/Browser/screenshots
配下でディレクトリを分けたい場合はディレクトリ名/ファイル名
を指定します。
要素の操作
Duskセレクタ
例えばボタンをクリックするテストを行いたい場合下記のようなテストを実装します。
// HTML
<div class="search-page">
<button>検索</button>
</div>
// TEST
public function testExample()
{
$this->browse(function (Browser $browser) {
$browser->click('.index-page button');
});
}
クリックしたい要素のCSSセレクタ
をclick()
メソッドの引数に指定しなければなりません。
しかし実際により複雑なHTMLとなるとCSSセレクタ
を指定することが難しくなります。
そのような場合にDuskセレクタ
を使用すると、簡単に要素を操作することができます。
// HTML
<div class="search-page">
<button dusk="search-button">検索</button>
</div>
// TEST
public function testExample()
{
$this->browse(function (Browser $browser) {
$browser->click('@search-button');
});
}
対象となるHTML要素にdusk
属性を追加し、テストでの要素指定には@
と属性名を指定することで、簡単に要素の操作をすることができます。
値の取得と設定
use Laravel\Dusk\Browser;
public function testExample()
{
$this->browse(function (Browser $browser) {
$value = $browser->value('@user-name');
$browser->value('@user-name', 'テストユーザ');
});
}
取得 : $this->value(セレクタ);
設定 : $this->value(セレクタ, 設定値);
要素の値を取得、設定するにはvalue()
メソッドを使用します。
取得する際は引数にセレクタ
を指定し、設定する際はセレクタ
と設定したい値
を指定します。
テキストの取得
use Laravel\Dusk\Browser;
public function testExample()
{
$this->browse(function (Browser $browser) {
$text = $browser->text('@title');
});
}
取得 : $this->text(セレクタ);
要素の表示テキストを取得するにはtext()
メソッドを使用し、引数にはセレクタ
を指定します。
フォーム操作
use Laravel\Dusk\Browser;
public function testExample()
{
$this->browse(function (Browser $browser) {
// 入力
$browser->type('name', 'テストユーザ');
// 入力値をクリア
$browser->clear('name');
// ドロップダウンの選択
$browser->select('size', 'Large');
// チェックボックスをチェックする
$browser->check('terms');
});
}
$this->type(name属性, 入力値);
入力フィールドへのテキストの入力にはtype()
メソッドを使用し、第一引数には入力フィールドのname属性
を、第二引数には入力値
を指定します。
$this->clear(name属性);
入力値をクリアするにはclear()
メソッドを使用し、引数には入力フィールドのname属性
を指定します。
$this->select(name属性, optionのvalue値);
ドロップダウンを選択するにはselect()
メソッドを使用し、第一引数にはselect要素のname属性
を、第二引数には選択するoptionのvalue値
を指定します。
$this->check(name属性);
チェックボックスをチェックするにはcheck()
メソッドを使用し、引数にはチェックボックスのname属性
を指定します。
チェックを解除するにはuncheck()
メソッドを使用します。
ボタンの押下
use Laravel\Dusk\Browser;
public function testExample()
{
$this->browse(function (Browser $browser) {
$browser->press('検索');
});
}
$this->press(表示テキスト or セレクタ);
ボタン要素を押下するにはpress()
メソッドを使用します。
引数にはボタンの表示テキスト
もしくはセレクタ
を指定することができます。
press()
メソッドはボタン要素にのみ使用できるため、その他要素のクリックにはclick()
要素を使用します。
待機
use Laravel\Dusk\Browser;
public function testExample()
{
$this->browse(function (Browser $browser) {
// セレクタの待機
$browser->waitFor('@user-name');
$browser->waitFor('@user-name', 1);
// テキストの待機
$browser->waitForText('Hello World!');
$browser->waitForText('Hello World!', 2);
});
}
$this->waitFor(セレクタ); / $this->waitFor(セレクタ, 秒数);
$this->waitForText(テキスト); / $this->waitForText(テキスト, 秒数);
特定の要素が表示されるまでテストの実行を待機(一時停止)するにはwaitFor()
メソッドを使用します。
引数には待機したい対象の要素のセレクタ
を指定し、最長5秒テストを一時停止します。
待機時間を指定したい場合は第二引数に秒数
を指定します。
指定したテキストが表示されるまで待機したい場合はwaitForText()
メソッドを使用します。
引数には対象のテキスト
を指定し、セレクタの待機と同じく時間を指定したい場合は第二引数に指定します。
アサート
assertSee/assertDontSee
use Laravel\Dusk\Browser;
public function testExample()
{
$this->browse(function (Browser $browser) {
$browser->assertSee('ログインユーザ/テストA');
$browser->assertDontSee('ログインユーザ/テストB');
});
}
$this->assertSee(テキスト);
$this->assertDontSee(テキスト);
特定のテキストが画面上に存在することを宣言するにはassertSee()
メソッドを、存在しないことを宣言するにはassertDontSee()
メソッドを使用します。
引数にはどちらも対象のテキスト
を指定します。
assertSeeIn/assertDontSeeIn
use Laravel\Dusk\Browser;
public function testExample()
{
$this->browse(function (Browser $browser) {
$browser->assertSeeIn('@login-user', 'ログインユーザ/テストA');
$browser->assertDontSeeIn('@login-user', 'ログインユーザ/テストB');
});
}
$this->assertSeeIn(セレクタ, テキスト);
$this->assertDontSeeIn(セレクタ, テキスト);
特定のテキストがセレクタに含まれていることを宣言するにはassertSeeIn()
メソッドを、含まれていないことを宣言するにはassertDontSeeIn()
メソッドを使用します。
引数にはどちらも対象のセレクタ
とテキスト
を指定します。
assertChecked/assertNotChecked
use Laravel\Dusk\Browser;
public function testExample()
{
$this->browse(function (Browser $browser) {
$browser->assertChecked('red');
$browser->assertNotChecked('blue');
});
}
$this->assertChecked(セレクタ or name属性);
$this->assertNotChecked(セレクタ or name属性);
特定のチェックボックスがチェック済みであることを宣言するにはassertChecked()
メソッドを、チェックされていないことを宣言するにはassertNotChecked()
メソッドを使用します。
引数にはどちらもセレクタ または name属性
を指定します。
assertSelected/assertNotSelected
use Laravel\Dusk\Browser;
public function testExample()
{
$this->browse(function (Browser $browser) {
$browser->assertSelected('@age', '10');
$browser->assertNotSelected('@age', '20');
});
}
$this->assertSelected(セレクタ or name属性, 選択値);
$this->assertNotSelected(セレクタ or name属性, 選択値);
特定のドロップダウンで特定の値が選択されていることを宣言するにはassertSelected()
メソッドを、選択されていないことを宣言するにはassertNotSelected()
メソッドを使用します。
引数にはどちらもセレクタ または name属性
と選択するoptionのvalue値
を指定します。
assertInputValue/assertInputValueIsNot
use Laravel\Dusk\Browser;
public function testExample()
{
$this->browse(function (Browser $browser) {
$browser->assertInputValue('@name', 'テストユーザ');
$browser->assertInputValueIsNot('name', '管理者ユーザ');
});
}
$this->assertInputValue(セレクタ or name属性, 入力値);
$this->assertInputValueIsNot(セレクタ or name属性, 入力値);
特定の入力フィールドが特定の値を持っていることを宣言するにはassertInputValue()
メソッドを、持っていないことを宣言するにはassertInputValueIsNot()
メソッドを使用します。
引数にはどちらもセレクタ または name属性
と入力値
を指定します。
参考