Docker Laravel PHP テスト

Laradoc環境でLaravel/Duskを使用してスクリーンショットが撮れる自動テストの導入

Laradoc環境でLaravel/Duskを使用してスクリーンショットが撮れる自動テストの導入のメモ

Dockerファイルの修正

まずLaradocの.envファイルを修正。

WORKSPACE_INSTALL_DUSK_DEPSをfalse→trueに変更

…
# WORKSPACE_INSTALL_DUSK_DEPS=false
WORKSPACE_INSTALL_DUSK_DEPS=true
…

ChromeDriverのバージョンの変更をしたい場合はChromeDriver - WebDriver for Chromeで最新バージョンを確認してWORKSPACE_CHROME_DRIVER_VERSIONを適切なバージョンに切り替えてください。

…
# WORKSPACE_CHROME_DRIVER_VERSION=2.42
WORKSPACE_CHROME_DRIVER_VERSION=76.0.3809.25
…

WorkspaceのDockerfile（workspace/Dockerfile）の編集を行います。

既存のままでは正常にインストールすることが出来ないので、↓に変更してください。

###########################################################################
# Dusk Dependencies:
###########################################################################

USER root

ARG CHROME_DRIVER_VERSION=stable
ENV CHROME_DRIVER_VERSION ${CHROME_DRIVER_VERSION}
ARG INSTALL_DUSK_DEPS=true

RUN if [ ${INSTALL_DUSK_DEPS} = true ]; then \
  apt-get update \
  && apt-get -y install zip wget unzip xdg-utils \
    libxpm4 libxrender1 libgtk2.0-0 libnss3 libgconf-2-4 xvfb \
    gtk2-engines-pixbuf xfonts-cyrillic xfonts-100dpi xfonts-75dpi \
    xfonts-base xfonts-scalable x11-apps fonts-ipafont \
  && wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb \
  && dpkg -i --force-depends google-chrome-stable_current_amd64.deb \
  && apt-get -y -f install \
  && dpkg -i --force-depends google-chrome-stable_current_amd64.deb \
  && rm google-chrome-stable_current_amd64.deb \
  && wget https://chromedriver.storage.googleapis.com/${CHROME_DRIVER_VERSION}/chromedriver_linux64.zip \
  && unzip chromedriver_linux64.zip \
  && mv chromedriver /usr/local/bin/ \
  && rm chromedriver_linux64.zip \
;fi

※ChromeDriverと日本語用フォントのインストールを行ってくれます。

Dockerコマンドを使用してWorkspaceを再構築すれば自動的にインストールされるはずです。

docker-compose up -d --build workspace

こちらを使用すればLaradoc環境以外でもインストールすることが可能かと思います。

apt-get update && apt-get -y install zip wget unzip xdg-utils libxpm4 libxrender1 libgtk2.0-0 libnss3 libgconf-2-4 xvfb gtk2-engines-pixbuf xfonts-cyrillic xfonts-100dpi xfonts-75dpi xfonts-base xfonts-scalable x11-apps fonts-ipafont && wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb && dpkg -i --force-depends google-chrome-stable_current_amd64.deb && apt-get -y -f install && dpkg -i --force-depends google-chrome-stable_current_amd64.deb && rm google-chrome-stable_current_amd64.deb && wget https://chromedriver.storage.googleapis.com/${CHROME_DRIVER_VERSION}/chromedriver_linux64.zip && unzip chromedriver_linux64.zip && mv chromedriver /usr/local/bin/ && rm chromedriver_linux64.zip

Laravel Duskインストール

Laravel Duskのインストール方法（Laravel導入済み前提）

composerでLaravel Duskをダウンロード

composer require --dev laravel/dusk

以下のコマンドを実行するとtestディレクトリにサンプルテストを含んだディレクトリが作成されます。

php artisan dusk:install

.envファイルをコピーして.env.dusk.local作成。

.env.dusk.localのAPP_URLのテスト対象を変更します。

「/laravel/tests/DuskTestCase.php」を編集してChromeDriverのオプションの追加をします。

<?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',
            '--no-sandbox',
            '--disable-setuid-sandbox',
            '--window-size=1980, 1080',
        ]);

        return RemoteWebDriver::create(
            'http://127.0.0.1:9515', DesiredCapabilities::chrome()->setCapability(
                ChromeOptions::CAPABILITY, $options
            )
        );
    }
}

※37行目はウィンドウサイズなのでスマホ、PCなどのテストの際は変更するようにしてください。

Duskの実行

php artisan dusk

これでサンプルテストを実行してくれれば一応の完了。

スクリーンショットのテストとしてサンプルテスト（/tests/Browser/ExampleTest.php）の21行目にスクリーンショットを取るようにします。

<?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')
                    ->screenshot('test');
        });
    }
}

実行すると「/tests/Browser/screenshots/test.png」が作成されます。

以下が自動テストで撮影されたスクリーンショットです。（Goolgeのトップを撮影しています）

参考

WORKSPACE_INSTALL_DUSK_DEPS causes 'docker-compose build workspace' to fail #1497

Laravel 5.7 Laravel Dusk