22
20

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でブラウザテスト

Last updated at Posted at 2018-04-25

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

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

22
20
0

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
22
20

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?