Dusk - opensource-workshop/connect-cms GitHub Wiki

How to browser test

本番環境にDuskをインストールしてはいけません

Laravel 6.x Laravel Dusk

Note: 本番環境にDuskをインストールしてはいけません。インストールすると、アプリケーションに対する未認証でのアクセスを許すようになります。

目次

準備

開発ライブラリ インストール

・Windows（コマンドプロンプト）の場合
set COMPOSER=composer-dev.json
composer install

・Linuxの場合1
COMPOSER=composer-dev.json php -d allow_url_fopen=1 composer install

・Linuxの場合2
COMPOSER=composer-dev.json composer install

クロームドライバーをインストール

php artisan dusk:chrome-driver
  • ※ 2023/11/13現在, Laravel8では最新クロームのドライバーが上記コマンドが取得できないため、ローカルなら手動で入れ替える。
  • クロームドライバーダウンロード
  • windowsの場合：/vendor/laravel/dusk/bin/chromedriver-win.exe に上書きする

クロームもインストールする。

.env.dusk.local作成

既にConnect-CMSがインストール済みで、.env がある事を前提に説明します。
.env をコピーして .env.dusk.local 作成します。

これがないと、本番DBがクリアされるので、要注意！

cd /var/www/html/connect-cms/
cp .env .env.dusk.local
vi .env.dusk.local

APP_ENV=local                ← localに変更します。

APP_DEBUG=false              ← falseに変更します。（押そうとしてるボタンが `phpdebugbar-header` と被って押せないエラーの回避と、trueよりもHTMLの量が減りテストが若干早くなります。）

APP_URL=http://localhost     ← この値は、ブラウザからアクセスするアプリケーションで使用するURLと一致させます。

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=test          ← 作成したテストDB(test)、ユーザ、パスワードに変更
DB_USERNAME=homestead     ← 同上
DB_PASSWORD=secret        ← 同上

# dusk use uploads dir.
UPLOADS_DIRECTORY_BASE=uploads_dusk/        ← これがないと、本番用uploads フォルダにテストの画像が追加されます。

テストDB作成

テストDB test を作成します。

テストDB初期化

php artisan config:clear
php artisan migrate --env=dusk.local
php artisan db:seed --env=dusk.local

テスト実行

クラス指定して１つだけテスト実行

・Windows（コマンドプロンプト）の場合
php artisan dusk tests\Browser\Manage\IndexManageTest.php

・Linuxの場合
php artisan dusk tests/Browser/Manage/IndexManageTest.php

・Linux＋Dockerの場合
APP_ENV=local php artisan dusk tests/Browser/Manage/IndexManageTest.php

※ スクリーンショットの保存先
tests\Browser\screenshots

※ duskの場合、--env=dusk.local を指定しなくても、.env.dusk.local があれば自動的に .env にその設定が反映されます。
※ .env.dusk.local の local は、.env の APP_ENV=local の local です。APP_ENV=production の場合、 .env.dusk.production が自動的に .env に設定が反映されます。

テストメソッド１つだけ指定してテスト実行

php artisan dusk tests\Browser\User\HeaderAreaTest.php --filter testInvoke

グループ指定でまとめてテスト実行

### 一般プラグインのテスト
php artisan dusk --group=user

### 管理プラグインのテスト
php artisan dusk --group=manage

### コアのテスト
php artisan dusk --group=core

tests\Browser 配下のファイル末尾Test.phpを全てテスト実行

php artisan dusk

失敗したテストを再実行

php artisan dusk:fails

batでまとめてテスト実行

> tests\bin\connect-cms-test.bat

// ※ 初回はこっち
> tests\bin\connect-cms-test.bat fresh

tips

【重要】.env.duck.localが.envに反映される仕組み

Laravel5.7: ブラウザテストを記述する#重要-envのコピー

ブラウザテストを実行すると .envファイルの内容が一時的に書き換わります。 具体的には下記の流れをたどるようです。

  1. .envのコピーが作られ、.env.backupと命名される。
  2. .envの内容が.env.duck.localの内容に置き換わる。
  3. ブラウザテスト終了。
  4. .envの内容が.env.backupに置き換わり、元に戻る。
  5. .env.backupが削除される。

手動でテストDB初期化

テスト実行時に１度だけ、自動で下記を実行するため、テストDB初期化不要です。 
php artisan config:clear
php artisan migrate --env=dusk.local

### 全テーブルを空にする
php artisan db:seed --class=TruncateAllTables --env=dusk.local

php artisan db:seed --env=dusk.local
手動でテストDB初期化等を行うなら、下記コマンドです。 
## キャッシュクリア
php artisan cache:clear
php artisan config:clear

## データベース作り直し
php artisan migrate:fresh --env=dusk.local

## データ・初期追加
php artisan db:seed --env=dusk.local

テスト後データを画面で確認

.envの DB_DATABASE を test に切り替える事で、テスト後のデータを画面から確認できます。

DB_DATABASE=test

テストケース実行時のデバック

// [debug コンソール]
fwrite(STDOUT, __METHOD__ . PHP_EOL);

テストケース記載時の注意点など

Bootstrapカスタムラジオボタンの選択は、LabelをClickすることで可能（Input radio のClick はエラーになる）

エラー対応

エラー1

.env.dusk.local で APP_DEBUG=true 時に下記エラーが出る。
原因は、押そうとしてるボタンが phpdebugbar-header と被って押せないため、テストエラーに。

1) Tests\Browser\Manage\PluginManageTest::testInvoke
Facebook\WebDriver\Exception\ElementClickInterceptedException: element click intercepted: Element <button type="submit" class="btn btn-primary form-horizontal">...</button> is not clickable at point (1109, 1060). Other element would receive the click: <div class="phpdebugbar-header">...</div>

対応1-1

.env.dusk.local を APP_DEBUG=false に修正する

vi .env.dusk.local

###APP_DEBUG=true
APP_DEBUG=false

対応1-2

APP_DEBUG=true でもテストが通るように、ウィンドウサイズを一時的に広げる

修正例）

    private function update()
    {
        $this->browse(function (Browser $browser) {
            // bugfix: APP_DEBUG=trueだと,phpdebugbar-header とボタンが被って、ボタンが押せずにテストエラーになるため、ウィンドウサイズを一時的に広げる
            $browser->resize(1920, 1880);

            $browser->press('更新')
                    ->assertTitleContains('Connect-CMS');
            $this->screenshot($browser);

            $browser->resize(1920, 1080);
        });
    }

対応1-3

テストのsetUp()時に $this->closePhpdebugar() を呼ぶ

修正例）

    /**
     * テスト前共通処理
     *
     * @return void
     */
    protected function setUp(): void
    {
        parent::setUp();

        // APP_DEBUG=trueだと,phpdebugbar-header とボタンが被って、ボタンが押せずにテストエラーになるため、phpdebugbarを閉じる
        $this->closePhpdebugar();
    }

エラー2

テスト実行時にConnection refusedエラーが発生 全テスト実行時にまれに発生しました。

1) Tests\Browser\Core\MessageFirstShowTest::testMessageFirstShow
Facebook\WebDriver\Exception\WebDriverCurlException: Curl error thrown for http POST to /session with params: {"capabilities":{"firstMatch":[{"browserName":"chrome","goog:chromeOptions":{"args":["--disable-gpu","--headless","--window-size=1920,1080"]}}]},"desiredCapabilities":{"browserName":"chrome","platform":"ANY","chromeOptions":{"args":["--disable-gpu","--headless","--window-size=1920,1080"]}}}

Failed to connect to localhost port 9515: Connection refused

対応2

再度テスト実施で解消します。 （テストはPCに負荷がかかるため、通信が不安定になったのかもです。）

エラー3

テスト実行すると下記エラーが出る。

ReflectionException: Class TruncateAllTables does not exist

対応3

下記を実行してからもう１回やると、正常に実行されます。

composer dump-autoload

エラー4

テスト実行すると下記エラーが出る。

1) Tests\Browser\Common\WysiwygTest::testInvoke
Facebook\WebDriver\Exception\SessionNotCreatedException: session not created: Chrome version must be between 70 and 73
  (Driver info: chromedriver=2.45.615291 (ec3682e3c9061c10f26ea9e5cdcf3c53f3f74387),platform=Windows NT 10.0.19045 x86_64)

対応4

クロームドライバーをインストール を再実行するとクロームドライバーが更新されて、エラーが解消します。

参考URL

関連ページ

chromedriver-win.exeの別起動

chrome131でエラー

chrome131でduskを使用した実行を行ったところ、以下のエラーが発生。

failed to connect to localhost port 9515: connection refused

いろいろ試してみて、chromedriver-win.exe にポート指定して、別に起動しておくことで実行できた。

  • chromedriver起動
    • 新しくコマンドプロンプトを起動
    • 以下のコマンドでchromedriver-win.exe を起動し、待ち状態になる。
    • C:\Connect-CMS\htdocs\vendor\laravel\dusk\bin>chromedriver-win.exe --port=9515
  • chromeを開いておく
  • duskコマンド実行

公式サイト | 機能一覧・仕様 | FAQ | マニュアル | マーケット | フォーラム

⚠️ **GitHub.com Fallback** ⚠️