Nightwatch.jsでE2Eテストを回したときにうまく動かないたった一つの理由

この記事は1955文字で約5分で読めます

エラーをよく読もう・・

前回書いた記事ChromeDriverがGoogleChrome v76 に対応していないらしい。の解決編です。

出てくるエラーでググってもそれっぽいものが出てこないので苦しい戦いでしたが、

そもそもchromedriverを利用するプログラムNightwatch.jsに思考が至らなかったのがまずかったです。

それでは解決編をどうぞ。

エラーのおさらい
もう少しちゃんとエラーを見てみる
chromedriver=2.46.628388の謎
Nightwatch.jsのChromeテストの挙動
試しにnode_moduleの中に入っているChromeDriverを最新のものと置き換える
実行！
あとがき

エラーのおさらい

当方ではVue.js(TypeScript + Vuex)でフロントエンドアプリをこじんまり作っていてCircleCIでE2Eテストを回していましたが、急にFailedが出るようになり、CIが通らなくなりました。

CircleCIで出ているエラーを見てみると次のようなエラーが出ていました。

{ value:
   { message:
      'session not created: Chrome version must be between 71 and 75\n  (Driver info: chromedriver=2.46.628388 (4a34a70827ac54148e092aafb70504c4ea7ae926),platform=Linux 4.15.0-1043-aws x86_64) (WARNING: The server did not provide any stacktrace information)\nCommand duration or timeout: 668 milliseconds\nBuild info: version: \'3.141.59\', revision: \'e82be7d358\', time: \'2018-11-14T08:25:53\'\nSystem info: host: \'5d045d2f1712\', ip: \'192.168.32.3\', os.name: \'Linux\', os.arch: \'amd64\', os.version: \'4.15.0-1043-aws\', java.version: \'11.0.4\'\nDriver info: driver.version: unknown',
     error: 'session not created' },
  status: 33 }

本エラーを詳しく見ていくと、GoogleChromeのバージョンをv71～v75の間にしなさいというもので、いろいろなサイトを見るとChromeのバージョンアップに合わせてChromeDriverのバージョンも上げないといけない、ということを知りました。

GitHub Issue #4800 Message: session not created: Chrome version must be between 71 and 75

そこで、前回の記事内で下記のことを実施しました。

が、しかし結局直りませんでした。

もう少しちゃんとエラーを見てみる

もう少しちゃんとエラーを見てみます。すると、あることに気が付きます。

ChromeBetaにバージョンアップしてChromeDriverもバージョンアップしたのにエラーメッセージに出ているChromeDriverのバージョンが想定のものと違う・・

自前Build環境の作成時に入れたChromeDriverのバージョンは77.0.3865.40でした。

ちゃんとこちらはCIのログに出力されていまして、Chromeのバージョンとも合っています。

$ #!/bin/bash -eo pipefail
  echo "Node $(node -v)"
  echo "NPM v$(npm --version)"
  chromedriver -v
  google-chrome --version

Node v10.16.3
NPM v6.9.0
ChromeDriver 77.0.3865.40 (f484704e052e0b556f8030b65b953dce96503217-refs/branch-heads/3865@{#442})Google Chrome 77.0.3865.56 beta

ただエラーのほうでは Driver info: chromedriver=2.46.628388 となっており明らかにバージョンが違います。

chromedriver=2.46.628388の謎

ChromeDriverの配布サイトに行くと、2.46のChromeDriverはSupports Chrome v71-73なことがわかります。

あれれ、おかしいぞ・・・。

Nightwatch.jsのChromeテストの挙動

いよいよ怪しくなってきたので、エラーが出ていない箇所のCIログも追っていきます。

すると npm install する際の動作ログに怪しい動作が見当たりました。

> chromedriver@2.46.0 install /home/circleci/workspace/node_modules/chromedriver
> node install.js

Current existing ChromeDriver binary is unavailable, proceding with download and extraction.
Downloading from file:  https://chromedriver.storage.googleapis.com/2.46/chromedriver_linux64.zip
Saving to file: /tmp/2.46/chromedriver/chromedriver_linux64.zip
Received 782K...
Received 1573K...
Received 2357K...
Received 3141K...
Received 3925K...
Received 4709K...
Received 5277K total.
Extracting zip contents
Copying to target path /home/circleci/workspace/node_modules/chromedriver/lib/chromedriver
Fixing file permissions
Done. ChromeDriver binary available at /home/circleci/workspace/node_modules/chromedriver/lib/chromedriver/chromedriver

node_module内にChromeDriverをダウンロードしている??

まさか、Nightwatch.jsはこれを使っているのでは?? バージョンもあっているし

試しにnode_moduleの中に入っているChromeDriverを最新のものと置き換える

以前作った自前Bulid環境をふんだんに使ってみます。

Dockerfileを次のように変更します。

# install chrome

RUN curl --silent --show-error --location --fail --retry 3 --output /tmp/google-chrome-stable_current_amd64.deb https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb \    && (sudo dpkg -i /tmp/google-chrome-stable_current_amd64.deb || sudo apt-get -fy install)  \
    && rm -rf /tmp/google-chrome-stable_current_amd64.deb \
    && google-chrome --version

#  Install ChromeDriver
RUN CHROME_VERSION="$(google-chrome --version)" \
    && export CHROMEDRIVER_RELEASE="$(echo $CHROME_VERSION | sed 's/^Google Chrome //')" && export CHROMEDRIVER_RELEASE=${CHROMEDRIVER_RELEASE%%.*} \
    && CHROMEDRIVER_VERSION=$(curl --silent --show-error --location --fail --retry 4 --retry-delay 5 http://chromedriver.storage.googleapis.com/LATEST_RELEASE_${CHROMEDRIVER_RELEASE}) \
    && curl --silent --show-error --location --fail --retry 4 --retry-delay 5 --output /tmp/chromedriver_linux64.zip "http://chromedriver.storage.googleapis.com/$CHROMEDRIVER_VERSION/chromedriver_linux64.zip" \
    && cd /tmp \
    && unzip chromedriver_linux64.zip \
    && rm -rf chromedriver_linux64.zip \
    && sudo cp chromedriver /usr/local/bin/chromedriver \    && sudo chmod +x chromedriver \    && sudo chmod +x /usr/local/bin/chromedriver \
    && chromedriver --version

とりあえず、ChromeBetaではなく、安定版を入れるように変更しました。
最新のChromeDriverを/tmp領域に実行権限を入れたまま放置するようにしました。

続いてCI側です。

CircleCIのconfig.ymlを次のように変えました。

      - run:
          name: Install dependencies
          command: npm install
      - run:          name: Fix ChromeDriver with nightwatch.js          command: mv -f /tmp/chromedriver node_modules/chromedriver/lib/chromedriver/chromedriver