TSUNAGU GROUP TECHNOLOGIES

TGT TechBlogTGT TechBlog

フロントエンドからバックエンドまでの技術ナレッジ

ブラウザーテストを自動化すると毎日が楽しい!Laravel Duskの使い方

こんにちは。インディバルに入社して2年目になるエンジニア(28)です。ショットワークスコンビニの開発をしています。今回はテストを自動化するLaravelのDuskを紹介しようと思います。

1.きっかけ

サービスのリリース毎に同じテストをやっており、そのルーティーンの手間を改善するためにブラウザーテストを自動化しようと考えました。

2.Laravel Duskとは

テストライブラリです。このライブラリはブラウザを自動で立ち上げて、HTTPアクセスを行なったりJavaScriptやDOMを操作することができます。

3.インストール

公式ドキュメントでは、「Laravel DuskはLaravel5.4以上の時に使えます。」
と、公式で書いていますが実際はDuskのバージョンもアップされていて、Laravel5.4ベースでDuskの最新バージョンをインストールできません。
色々調べたところ、Duskの1.1でしたらOKです。では、Duskをインストールしてみます!
3.1 新しいプロジェクトを作成します。

composer create-project Laravel/Laravel --prefer-dist project_name
3.2 プロジェクトに入ります。
cd project_name
3.3 Dusk1.1をインストールします。
composer require --dev Laravel / Dusk v1.1

4.テスト前の準備にしましょう!

4.1 それでは、Duskバッケージを追加します。

composer require Laravel/Dusk

4.2 アプローチします
①config/app.phpファイルにproviders配列を含められます。

App\Providers\RouteServiceProvider::class,
Laravel\Dusk\DuskServiceProvider::class, 
↑全てのアプリケーションにアプローチします。
②app/Providers/AppServiceProviderに下記のコードを追加します。
      public function register()
      {
        if ($this->app->environment('local', 'testing', 'staging')) {
          $this->app->register(DuskServiceProvider::class);
        }
      }
 ↑全てのアプリケーションへのアプローチではないです。
以上で準備完了です。

5.テストを実行!

デフォルトのテストを実行します。(プロジェクトの下で実行してください)

php artisan Dusk
そうすると、エラーが出てきました。。。
エラー文:
Facebook\WebDriver\Exception\UnknownServerException: unknown error: cannot find Chrome binary

Duskをインストール時に、確かにChromeDriverをDuskの下にインストールしましたが、OS側にChromeDriverがないとダメなようなので、ChromeDriverをインストールします。

こちらを参考にしました。
http://macappstore.org/google-chrome/

では、もう一度実行しましょう!
すると!

PHPUnit 5.7.21 by Sebastian Bergmann and contributors.
  ..                                                                  2 / 2 (100%)
  Time: 1.24 minutes, Memory: 12.25MB
  OK (2 tests, 1 assertion)



6.ブラウザーテストがテストできること

●基本
・ブラウザー自動で立ち上がる
・ハイパーリンクへのアクセス
●フォーム
・値を取得/値設定
・テキスト取得
・属性取得
・値を入力
・入力値をクリア
・セレクター、チェックボックス、ラジオボタンの値設定
・ファイルや、キャプチャの追加
●マウス
・クリック
・マウスオーバー
・ドラックドロップ
●待機
・JavaScriptを全て表示した後に、テストをすることが多くて、少し待機することもできます。
・テストを待機。待機する時間も選べます。
・セレクタ待機(指定する値を表示するまで待機。必要であれば、待機する時間を選べます。)
・セレクタが消えるまで待機
・テキスト、ハイパーリンクを表示するまで待機
●アサート
・タイトル、パス、URL、クッキ、テキスト、フィルートの確認
●今いるページのURLを判断
●Ajaxを呼び出すテスト

など

7.自分作ったコード

求人メディアの原稿を作成・公開して、その原稿に対して応募するまでの流れをテストしています。

class LoginTest extends DuskTestCase
{
    /**
     * A Dusk test example.
     *
     * @return void
     */
    public function testExample()
    {
        $this->browse(function (Browser $browser){
            //求人管理画面へのログイン
            $browser->visit('https://********/login')
            ->value('.form-control', '******')
            ->type('password','*******')
            ->click('.btn-info')
            ->clickLink('新規発注')
            ->click('.icon-calendar-right')
            ->click('.day')
            ・
            ・省略(原稿の条件を入力しています)
            ・
            //求人原稿作成ボタンを押す
            ->click('.btn-primary')
            //トップ画面に移動
            $browser->clickLink('トップ')
            //カレンダーを翌月へ移動させる
            ->click('.icon-calendar-right')
            ・
            ・省略
            ・
            ->click('.clickable')
            //作った求人原稿のワークIDを取得
            $value = str_replace($browser->text('.list-group-item'));
            // 作った求人原稿をカスタマーページで応募
            $browser->visit('https://*****/work/'.$value)
         //応募するボタンを押す
            ->click('.c-btn--secondary')
         //ログイン画面に遷移し、emailを入力
            ->type('email', '****.com')
         //パスワードを入力
            ->type('password','******')
         //ログインボタンを押す
            ->click('.btn_basic')
         //2秒待つ
            ->pause(2000)
         //同意チェックボックスをチェック
            ->check('.conditions-consent__label')
            ・
            ・省略
            ・
    
         //下までスクロール
            ->script("window.scrollTo(0, 1500);");
    
            //確認ボタンを押す
              ->click('.entry-submit__btn')
   
         //確認画面に遷移し、下までスクロール
            ->script("window.scrollTo(0, 1500);");
   
          //応募完了ボタン押す
            $browser->click('.c-btn--secondary')
          //2秒待つ
           ->pause(2000)
          //応募完了しましたという文字をチェック
            ->assertSee('応募が完了しました');
            //テスト作成した求人原稿を消す
            $browser->visit('https://*******/work/'.$value)
                    ->click('.btn-info');
            //カスタマーの応募履歴消す
            $browser->visit('https://*********/work/'.$value)
                ->click('.c-btn--small');
        });
    }
}



執筆者プロフィール

ディべロップメント室のエンジニアです。ショットワークスコンビニの開発をやっています。好きなものは甘いものです。インディバルでたくさん新しいことを勉強して、毎日楽しんでいます。