Laravel Dusk + Selenium + Dockerでブラウザテスト(Laravel6.0)


Laravel6.0 + Docker開発環境でブラウザテストを自動化する方法について解説します。
前提条件として、LaravelのDocker開発環境が構築済みで、Laravelのウェルカムページにアクセスできる必要があります。

開発環境

Laravel6.0
PHP7.3.10
macOS
Docker19.03.2
docker-selenium images:
 ・selenium/hub:3.141.59-vanadium
 ・selenium/node-chrome:3.141.59-vanadium
Google Chrome

Laravel Duskのインストール

composer.jsonのrequire-devにLaravel duskを追加します。
(この時、requireの方に追加しないように注意しましょう。本番環境にDuskをインストールするとセキュリティ的によくないです。)

"require-dev": {
        "laravel/dusk": "^5.5",
    }

 その後、composer installでライブラリをインストールしましょう。

docker-seleniumでブラウザテスト用サーバーを立てる

docker-compose.ymlを編集します。


version: '3.7'

services:
  dev:
    build:
      context: "./docker/dev/"
    image: project/dev
    container_name: project-dev
    volumes:
      - "./project:/project"
    ports:
      - 8000:80

  selenium-hub:
      image: selenium/hub:3.141.59-vanadium
      container_name: selenium-hub
      ports: 
          - 4444:4444

  chrome:
    image: selenium/node-chrome:3.141.59-vanadium
    container_name: selenium-chrome
    volumes:
      - /dev/shm:/dev/shm
    depends_on:
      - selenium-hub
    environment:
      - HUB_HOST=selenium-hub
      - HUB_PORT=4444

Laravel Duskの設定を行う。

project/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;

    public static function prepare()
    {
        // static::startChromeDriver();
    }

    protected function baseUrl(){
        return 'http://project-dev:80';
    }

    protected function driver()
    {
        $options = (new ChromeOptions)->addArguments([
            '--disable-gpu',
            '--headless',
        ]);

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

デフォルトでは、project/tests/Browser/ExampleTest.phpに書かれている以下のテストが実行されます。

<?php

namespace Tests\Browser;

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

class ExampleTest extends DuskTestCase
{
    public function testBasicExample()
    {
        $this->browse(function (Browser $browser) {
            $browser->visit('/')
                    ->assertSee('Laravel');
        });
    }
}

これでブラウザテストの準備が整いました!!
早速コンテナを立ち上げ、php artisan duskを実行してみましょう。
問題なくブラウザテストが通ったら完了です。