「Laravel Dusk」を使ってブラウザテストを自動化する

エリカ

2019.01.25

こんにちは、ディレクターのエリカです。ブラウザでのテストとか、みなさんどうしてますか？

Laravelはそのあたりも洗練されています。「Laravel Dusk」という機能を使えば、コードベースでブラウザテストを実行することができるんです。

今回は、その手法についてお話ししたいと思います。

「Laravel Dusk」について
「Laravel Dusk」を準備する
「Laravel Dusk」でテストを実行する
まとめ

「Laravel Dusk」について

Laravel Dusk（ダースク：夕暮れ）は、利用が簡単なブラウザの自動操作／テストAPIを提供します。
引用元：https://readouble.com/laravel/5.4/ja/dusk.html

つまり、APIを利用してブラウザを操作し、その結果をテストしていくといったことができるようになります。

今回は、この「Laravel Dusk」の準備から利用するところまでをご紹介します。

「Laravel Dusk」を準備する

まずは、Laradockを使ってLaravelが動く環境をサクッと作っちゃいます。

Laradockの設定

まずは、下記の記事を参考にLaradockを準備します。

PHPフレームワーク「Laradock」で、手軽にLaravel+Dockerな開発環境を構築する

エリカ

2017.08.11

まずはディレクトリを作成し、git init をします。

$ mkdir MyProject && cd MyProject
$ git init

Laravel本体を配置するディレクトリを作成します。

$ mkdir src

Laradockをサブモジュールとしてクローンします。

$ git submodule add https://github.com/Laradock/laradock.git

laradock/.env ファイルを作成します。

$ cd laradock
$ cp env-sample .env

この laradock/.env ファイルを編集します。

###################### General Setup ######################
###########################################################

### Paths #################################################

# Point to the path of your applications code on your host
APP_CODE_PATH_HOST=../src <-- 変更

・
・
・

また、今回の内容と直接関係ありませんが、このファイルで確認しておいたほうがよい項目について少し触れておきます。特に複数のプロジェクトでLaradockを別々に利用する場合は、必要に応じて設定しておいた方がいいかもしれません。

# Choose storage path on your machine. For all storage systems
DATA_PATH_HOST=~/.laradock/data

これは、永続化するデータの保存場所になります。デフォルトのままだとこのようにホームディレクトリの.laradockディレクトリにデータが格納されていきますのが、Laradockを利用するプロジェクトに応じて、それぞれ指定することが可能です。

# Define the prefix of container names. This is useful if you have multiple projects that use laradock to have seperate containers per project.
COMPOSE_PROJECT_NAME=laradock

これは、dockerコンテナ名の接頭辞になります。デフォルトの接頭辞のままだと、Laradockを利用するプロジェクト間で、同じコンテナを利用することになってしまいますが、これもプロジェクトに応じて、それぞれ指定することが可能です。

準備ができましたので、nginx と selenium を指定してdockerコンテナを起動します。

$ docker-compose up -d nginx selenium

ブラウザから、 http://localhost へアクセスすると下記のような 404 not found が表示されましたでしょうか？

次にLaravel本体をインストールします。

Laravelのインストール

先ほど、docker-compose を実行したディレクトリから、下記のコマンドを実行し、workspace コンテナに接続します。workspace コンテナは、nginx コンテナの起動時に同時に起動されるコンテナで、composer や各種CLIの操作ができるコンテナです。

$ docker-compose exec workspace bash

workspace コンテナに接続したら、composer を利用して laravel をインストールします。

/var/www# composer create-project --prefer-dist laravel/laravel ./

このカレントディレクトリ /var/www は、ホストマシン上では前述の laradock/.env で指定した、APP_CODE_PATH_HOST になっていますので、ホストマシンの src ディレクトリにも laravel のファイルが展開されていきます。

これで、ブラウザから、 http://localhost へアクセスするとLaravelのスタート画面が表示されます。

次に、「Laravel Dusk」をインストールします。

「Laravel Dusk」のインストール

先ほど laravel/laravel をインストールを実行したところで、同様に laravel/dusk をインストールします。

/var/www# composer require --dev laravel/dusk

最後に、「Laravel Dusk」用のスキャフォルドを生成します。

artisan dusk:install

src/tests/ 以下に「Laravel Dusk」用のファイルが配置されていますので、こちらを利用して、Laravel Dusk のテストを実行してみます。

Browser
├── Components
├── ExampleTest.php
├── Pages
│   ├── HomePage.php
│   └── Page.php
├── console
└── screenshots

「Laravel Dusk」をdockerコンテナ上で利用する

nginxとseleniumコンテナ間での通信が必要になるので、専用の.envファイルを用意します。

src/.env をコピーして、src/.env.dusk.local を作成し、APP_URLを下記のように変更します。

APP_URL=http://nginx <-- 変更

また、ブラウザテストの実行は、Chromeドライバではなく、seleniumコンテナを利用するように、 src/tests/DuskTestCase.php を編集します。

<?php

namespace Tests;

use Laravel\Dusk\TestCase as BaseTestCase;
use Facebook\WebDriver\Chrome\ChromeOptions;
use Facebook\WebDriver\Remote\RemoteWebDriver;
use Facebook\WebDriver\Remote\DesiredCapabilities;

abstract class DuskTestCase extends BaseTestCase
{
    use CreatesApplication;

    /**
     * Prepare for Dusk test execution.
     *
     * @beforeClass
     * @return void
     */
    public static function prepare()
    {
        //static::startChromeDriver(); <-- 変更
    }

    /**
     * Create the RemoteWebDriver instance.
     *
     * @return \Facebook\WebDriver\Remote\RemoteWebDriver
     */
    protected function driver()
    {
        $options = (new ChromeOptions)->addArguments([
            '--disable-gpu',
            '--headless',
            '--window-size=1920,1080',
        ]);

        return RemoteWebDriver::create(
            'http://selenium:4444/wd/hub', // <-- 変更
            DesiredCapabilities::chrome()->setCapability(
                ChromeOptions::CAPABILITY, $options
            )
        );
    }
}

「Laravel Dusk」でテストを実行する

workspace コンテナにて、artisan dusk を実行します。

下記のテストが実行され、成功します。これは、Laravelのスタート画面へアクセスし、画面上にLaravelの文字が表示されているかがテストされています。

<?php

namespace Tests\Browser;

use Tests\DuskTestCase;
use Laravel\Dusk\Browser;
use Illuminate\Foundation\Testing\DatabaseMigrations;

class ExampleTest extends DuskTestCase
{
    /**
     * A basic browser test example.
     *
     * @return void
     */
    public function testBasicExample()
    {
        $this->browse(function (Browser $browser) {
            $browser->visit('/')
                    ->assertSee('Laravel');
        });
    }
}

ここでは画面の表示しか行っていませんが、さまざまな操作をAPIを利用して書くことができます。リンクをクリックする、フォームに入力する、非同期な操作の実行を待機する、などなど。ブラウザを操作しないことにはできないと思っていたような操作もコードベースで行うことができますし、任意のタイミングでキャプチャも取得することができます。

機会があればそれらを使ったテストの書き方をご紹介できればと思います。