LaravelのDuskで外部サイトをブラウザテスト

から
Daisuke Yoshimoto
-
0
2139

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)経由でブラウザテストができるようになりました。

関連記事同じ著者から