23
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-10-28

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を実行してみましょう。
問題なくブラウザテストが通ったら完了です。

23
19
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?