CircleCIでLaravel Duskが常にFailを解決する方法

#CircleCIでLaravel Duskが常にFailを解決する方法

新規開発をスタートさせる際に、github + circleCIを立ち上げるべくググりながら準備をしていました。

意外とスムーズに進んでいたのですが、最後のブラウザテストが全く通らずハマってしまったので、解決方法を共有しておきます:thumbsup_tone2:

## 何が起こったか？

### その1 chromedriverのバージョンが合わない

CircleCI上のchromeのバージョンがdriverのバージョンと合わない。

```
1) Tests\Browser\ExampleTest::testBasicExample
Facebook\WebDriver\Exception\SessionNotCreatedException: session not created: Chrome version must be between 70 and 73
  (Driver info: chromedriver=73.0.3683.68 (47787ec04b6e38e22703e856e101e840b65afe72),platform=Linux 4.15.0-1043-aws x86_64)
```

![スクリーンショット 2019-09-10 16.51.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148102/f8506134-8bc0-ca33-f4ce-39b25b77e29c.png)



### その2 `php artisan dusk` が常にfailになってしまう

ローカルでは `php artisan dusk` が成功するのにcircleci上だと常にfailになってしまう。

```
1) Tests\Browser\ExampleTest::testBasicExample
Did not see expected text [Laravel] within element [body].
Failed asserting that false is true.
```
トップページには「Laravel」の記述があるはずなのにエラーになる

![スクリーンショット 2019-09-10 16.40.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148102/3f158c71-40bb-6b34-c118-f5a41ecde1ee.png)


##解決方法
`.circleci/config.yml` に以下を追記

まずchromedriverは70〜73にしてと言われているので、素直に`php artisan` コマンドで72に変更してあげましょう！

そして、duskの方は開発用サーバーを`php artisan serve`で立ち上げているため、ポート番号が8000番になります。そのため、環境変数APP_URLを指定してあげることで、ブラウザでアプリを見ることができました:bouquet:

```
 - APP_URL: http://localhost:8000

 - run: php artisan dusk:chrome-driver 72 
```


## ファイル全体像

参考リンクを見ながら作成しました（先人に感謝☺️）

### .circleci/config.yml
```
# PHP CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-php/ for more details
#
version: 2
jobs:
  build:
    docker:
      # specify the version you desire here
      - image: circleci/php:7.3.8-apache-node-browsers
      - image: circleci/mysql:5.7

      # Specify service dependencies here if necessary
      # CircleCI maintains a library of pre-built images
      # documented at https://circleci.com/docs/2.0/circleci-images/
      # - image: circleci/mysql:9.4

    environment:
      - APP_DEBUG: true
      - APP_ENV: testing
      - APP_KEY: *****************************************
      - DB_CONNECTION: circle_test
      - APP_URL: http://localhost:8000
      - MYSQL_ALLOW_EMPTY_PASSWORD: true

    working_directory: ~/repo

    steps:
      - checkout

      # Install PHP Extension
      - run: sudo docker-php-ext-install pdo_mysql

      # Download and cache dependencies
      - restore_cache:
          keys:
            - v1-dependencies-{{ checksum "composer.json" }}
            # fallback to using the latest cache if no exact match is found
            - v1-dependencies-

      - run: composer install -n --prefer-dist

      - save_cache:
          paths:
            - ./vendor
          key: v1-dependencies-{{ checksum "composer.json" }}

      - run: php artisan config:cache
      # run seeding
      - run: php artisan migrate
      - run: php artisan db:seed

      #circleCIのchromeは72なので、合わせる
      - run: php artisan dusk:chrome-driver 72

      # run tests!
      - run: php ./vendor/bin/phpunit
      - run:
          name: Start Chrome Driver
          command: ./vendor/laravel/dusk/bin/chromedriver-linux
          background: true
      - run:
          name: Run Laravel Server
          command: php artisan serve
          background: true
      - run:
          name: Run Laravel Dusk Tests
          command: php artisan dusk
```

### /tests/Browser/ExampleTest.php

内容はとてもシンプルで、トップページにアクセスしてLaravelが見えるかどうかです。

```
<?php

namespace Tests\Browser;

use Tests\DuskTestCase;
use Laravel\Dusk\Browser;

class ExampleTest extends DuskTestCase
{
    /**
     * A basic browser test example.
     */
    public function testBasicExample()
    {
        $this->browse(function (Browser $browser) {
            $browser->visit('/')
                    ->assertSee('Laravel');
        });
    }
}

```

## 参考リンク

 https://www.oipapio.com/question-2493022

https://qiita.com/UNILORN/items/c7df4c7d19a0911f6465