Laravel Dusk
LaravelにはFeatureテストやUnitテストのほか、『Laravel Dusk』というブラウザテスト機能があります。
今回はこの『Laravel Dusk』を使って外部サイト(特にテストが作りにくい古いサイト)のブラウザテストを、
手元のLaravelから行ってみたいと思います。
Laradock立ち上げ
まずは作業用ディレクトリに移動して新規ディレクトリ作成します。
@mac
$ cd dusk
$mkdir src
$mkdir data
準備ができたらLaradockをclone。
@mac
$ git clone https://github.com/Laradock/laradock.git
今回はプロジェクトそのものをgit管理しないのでそのままcloneしていますが、
プロジェクトをgit管理する場合には、
$ git submodule add https://github.com/Laradock/laradock.git
として、Laradockをサブモジュール化するのが望ましいかと思います。
laradockディレクトリが出来上がったら、
@mac
$ cd laradock
$ cp env-example .env
で設定ファイルを作成します。編集箇所は以下の通り。
1.Laravelのソース保存先
laradock/.env # Point to the path of your applications code on your host APP_CODE_PATH_HOST=../
このままだと、Laradockと同じ階層にLaravel一式ができてしまうので、
laradock/.env # Point to the path of your applications code on your host #APP_CODE_PATH_HOST=../ APP_CODE_PATH_HOST=../src
に変更してLaravel一式は別ディレクトリに固めます。
また、私はLaradockを複数プロジェクトで運用しているので
laradock/.env
# Choose storage path on your machine. For all storage systems
#DATA_PATH_HOST=~/.laradock/data <- コメントアウト
DATA_PATH_HOST=../data <- sqlデータの格納先(追加)
と
laradock/.env
#Define the prefix of container names. This is useful if you have multiple projects that use laradock to have separate containers per project.
#COMPOSE_PROJECT_NAME=laradock <- コメントアウト
COMPOSE_PROJECT_NAME=dusk <- コンテナ接頭詞(追記)
を変更して複数のLaradockがぶつからない様にしています。
ここまでできたらコンテナ立ち上げ
@mac $ docker-compose up -d nginx ・・・・・・ Creating dusk_docker-in-docker_1 … done Creating dusk_workspace_1 … done Creating dusk_php-fpm_1 … done Creating dusk_nginx_1 … done
この時点ではまだLaravelがインストールされていません。
http://localhostにアクセスしても「404 Not Found」が表示されると思います。
Laravel(+Dusk)インストール
Laravelのインストールは作業用コンテナ(workspace)で行います。
@mac
$ docker-compose exec workspace bash
@container:workspace
/var/www# composer create-project --prefer-dist laravel/laravel ./
これでhttp://localhostにアクセスするとLaravelのデフォルト画面が表示されると思います。
また、Laradockのenvで設定したように、laradockと同じ階層にあるsrcディレクトリにLaravel一式が生成されていると思います。
次にDusk。Duskは公式ですがパッケージ扱いなので、追加でインストールします。
参考:マニュアル(https://readouble.com/laravel/6.x/ja/dusk.html)
@container:workspace
/var/www# composer require --dev laravel/dusk
/var/www# php artisan dusk:install
.srcで確認できますがduskをインストールするとtestディレクトリ内にファイルが追加されます。
dusk実行!!
@container:workspace
/var/www# php artisan dusk
PHPUnit 8.5.8 by Sebastian Bergmann and contributors.
E
1 / 1 (100%)
Time: 887 ms, Memory: 18.00 MB
There was 1 error:
1) Tests\Browser\ExampleTest::testBasicExample
Facebook\WebDriver\Exception\WebDriverCurlException: Curl error thrown for http POST to /session with params: {"capabilities":
{"firstMatch":[{"browserName":"chrome","goog:chromeOptions":{"binary":"","args":["--disable-gpu","--headless","--window-
size=1920,1080"]}}]},"desiredCapabilities":{"browserName":"chrome","platform":"ANY","chromeOptions":{"binary":"","args":["--
disable-gpu","--headless","--window-size=1920,1080"]}}}
Failed to connect to localhost port 9515: Connection refused
あかんやん。。。
ということで色々調整。
Seleniumサーバ用のコンテナを立ち上げて
@container:workspace
/var/www# exit;
@mac
$ docker-compose build selenium
dusk用に環境ファイルを追加。
@mac
$ cd ../src
$ cp .env .env.dusk.local
その他の変更箇所として、
src/.env.dusk.local #APP_URL=http://localhost APP_URL=http://nginx src/tests/DuskTestCase.php public static function prepare() { //static::startChromeDriver(); <-ChromeDriverの自動起動を停止 } //'http://localhost:9515', DesiredCapabilities::chrome()->setCapability( 'http://selenium:4444/wd/hub', DesiredCapabilities::chrome()->setCapability(
ここまでできたら、再度workspaceコンテナへ。
@mac
$ cd ../laradock
$ docker-compose exec workspace bash
@container:workspace
/var/www# php artisan dusk
PHPUnit 8.5.8 by Sebastian Bergmann and contributors.
.
1 / 1 (100%)
Time: 3.83 seconds, Memory: 18.00 MB
OK (1 test, 1 assertion)
これでようやくテストが通りました。通したテストは、
src/tests/Browser/ExampleTest.php $this->browse(function (Browser $browser) { $browser->visit('/') ->assertSee('Laravel'); });
で、『assertSee(‘Laravel’)』でページに指定したテキスト(Laravel)が存在することをチェックしています。
Laravelのデフォルトページには『Laravel』というテキストが存在するのでOKが返ってきました。
外部サイトにアクセスしてみる
ここまでできたらあともう少し。
外部サイトのURL(https://example.com)を指定してブラウザテストをしてみます。
src/.env.dusk.local
#APP_URL=http://nginx
APP_URL=APP_URL=https://example.com/
dusk実行!!
@container:workspace
/var/www# php artisan dusk
PHPUnit 8.5.8 by Sebastian Bergmann and contributors.
F 1 / 1 (100%)
Time: 2.32 seconds, 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.
当然『Laravel』というテキストはないですからエラーになります。テストを
src/tests/Browser/ExampleTest.php
$this->browse(function (Browser $browser) {
$browser->visit('/')
->assertSee('Example Domain');
});
に変更してもう一度dusk!!
@container:workspace
/var/www# php artisan dusk
PHPUnit 8.5.8 by Sebastian Bergmann and contributors.
. 1 / 1 (100%)
Time: 2.51 seconds, Memory: 18.00 MB
OK (1 test, 1 assertion)
無事にテストが通りました。
チェック項目であるassertはもちろん、色々な動きを設定することもできるので、
これでテストしにくいサイトでもLaravel(Dusk)経由でブラウザテストができるようになりました。