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', '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)で使えるメソッドを調べる
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