Help us understand the problem. What is going on with this article?

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', '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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away