Laravel+Duskでブラウザテスト

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

以下の記事を参考にしてます。
[【Laravel 5.4】Laravel Duskによるブラウザテストの作成方法](https://qiita.com/amymd/items/0a5f2705e29972d0d22e)

#概要
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', 'email@email.com')
                    ->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）で使えるメソッドを調べる](https://qiita.com/yousan/items/3efb5f1c02eedae318b7)

## 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](https://qiita.com/h_digitalhearts/items/bd3a8d5c8e5fb410afd1)