Laravel+Duskでブラウザテスト

jsのテストを書くのに使ったので調べたことをメモがてら投稿。

以下の記事を参考にしてます。
【Laravel 5.4】Laravel Duskによるブラウザテストの作成方法

概要

ChromeDriverを利用したブラウザの自動操作ができる機能。
（Seleniumのドライバを利用したテストも可能)
https://readouble.com/laravel/5.5/ja/dusk.html

使い方(簡易)

インストール
composer require --dev laravel/dusk

サンプルコードのインストール
php artisan dusk:install

テストコードの作成
php artisan dusk:make LoginTest

テストコードの記述
DuskのBrowserクラスのインスタンスでいろいろ操作してテスト書く。

例：「/login」ページに遷移してid,passwordに値を入れて「Login」というラベルのボタンを押してログイン。ログイン後に「/home」ページに遷移したことを確認するテスト

$this->browse(function ($browser) use ($user) {
            $browser->visit('/login')
                    ->type('email', '[e-mail]')
                    ->type('password', 'secret')
                    ->press('Login')
                    ->assertPathIs('/home');
        });

テストコードの実行
php artisan dusk
※PHPUnitテストランナが通常受け付ける引数も受付できるので指定グループや指定ディレクトリ内、指定ファイルのみという実行も行える

Tips

SPとしてテストする方法

RemoteWebDriverインスタンスの生成時にオプションでUAを設定する

/**
 * RemoteWebDriverインスタンスの生成
 *
 * @return \Facebook\WebDriver\Remote\RemoteWebDriver
 */
protected function driver()
{
    $options = (new ChromeOptions)->addArguments([
        '--disable-gpu',
        '--headless'
    ]);
    $ua = 'Mozilla/5.0 (Linux; Android 4.4.2; Nexus 4 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.114 Mobile Safari/537.36';
    $options->setExperimentalOption('mobileEmulation', ['userAgent' => $ua]);

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

Browserクラス

↓の記事がまとまっててわかりやすかった。
Laravel5.4のブラウザテスト（Laravel Dusk）で使えるメソッドを調べる

metaのチェック

タイトルの取得

$browser->driver->getTitle()

metaの取得

$browser->driver->findElement(WebDriverBy::xpath("//meta[@name='description']"))->getAttribute('content')

selenium環境（windows)

seleniumのダウンロード
以下からスタンドアローン版をダウンロード
http://www.seleniumhq.org/download/

chromedriverのダウンロード
以下からダウンロード
https://sites.google.com/a/chromium.org/chromedriver/downloads

ダウンロードしたファイルを配置
起動時にフルパスで書くので適当でOK
seleniumサーバー起動

java -Dwebdriver.chrome.driver="C:\chromedriver_win32\chromedriver.exe" -jar selenium-server-standalone-3.8.1.jar -enablePassThrough false

ベースDuskテストケース「tests/DuskTestCase.php」の編集

/**
 * Duskテスト実行準備
 *
 * @beforeClass
 * @return void
 */
public static function prepare()
{
    // static::startChromeDriver();
}
/**
 * RemoteWebDriverインスタンスの生成
 *
 * @return \Facebook\WebDriver\Remote\RemoteWebDriver
 */
protected function driver()
{
        $options = (new ChromeOptions)->addArguments([
            '--disable-gpu',
            '--headless',
            '--no-sandbox',
            '--disable-setuid-sandbox',
//            '--window-size=1200x600',
        ]);

        $this->setUseUserAgent($options);

        return RemoteWebDriver::create(
            'http://localhost:4444/wd/hub',
            DesiredCapabilities::chrome()->setCapability(
                ChromeOptions::CAPABILITY,
                $options
            )->setCapability('acceptInsecureCerts', true),    // オレオレSSL対応のため
            30 * 1000,
            30 * 1000
        );
}

その後いくつか問題があったのでちょっと変更。

selenium環境（Linux)

seleniumの取得

https://selenium-release.storage.googleapis.com/3.9/selenium-server-standalone-3.9.1.jar

chromedriverの取得

https://sites.google.com/a/chromium.org/chromedriver/downloads
https://chromedriver.storage.googleapis.com/index.html?path=2.37/

※入ってるchromeのバージョンあわせる必要がある

Google Chromeのインストール
/etc/yum.repos.d/google-chrome.repoの作成

[google-chrome]
name=google-chrome
baseurl=http://dl.google.com/linux/chrome/rpm/stable/$basearch
enabled=1
gpgcheck=1
gpgkey=https://dl-ssl.google.com/linux/linux_signing_key.pub

sudo yum install -y google-chrome-unstable libOSMesa google-noto-cjk-fonts

起動
java -Dwebdriver.chrome.driver=/vagrant/chromedriver -jar selenium-server-standalone-3.8.1.jar -enablePassThrough false

※CUIで実施するときの追加するオプション
--no-sandbox

↓を参考
CUI 環境で Selenium と Headless Chrome を使用する場合の Tips