tubone

tubone

Boyaki makes a new world


 Recent posts  6 / 53

SepOctNovDecJanオムロン HV-F312で腰の痛みをなくすGithub Actionを使って、簡単CIを作ってみるChromeDriverがGoogleChrome v76 に対応していないらしい。Googleデータポータルを触ってみるHyper-vにMetasploitableの仮想マシンを立ててみるNightwatch.jsでE2Eテストを回したときにうまく動かないたった一つの理由particles.jsをVue.jsで使ってかっこいいページを作るGitPitchを使ってMarkdownからプレゼンテーションを作ってBadgeをレポジトリに貼るSentryを使ってフロントエンドのエラーを確認するJSON Resume + API With GitHubを使って、さくっと職務経歴書チックなもののAPIなど作ってみるGitHubに30日間草を生やし続けた感想Netlify Formを使って、簡易Contact Formを作ってみる10/1は天下一品の日Ansible + Serverspecを使ってMacの環境構築を自動でする (Ansible編)Ansible + Serverspecを使ってMacの環境構築を自動でする (Serverspec編)今日のラーメン台風の時の我が家のセンサー(netatmo)の値をZabbixで見る究極の謝罪はSlackのスタンプを活用しよう! ~明日から使えるSlackスタンプスニペット集~ハロウィーンはえちえちでチンパンジーなイベントじゃない。GitHubと向き合うイベントだ昔ながらのラーメンたべたい珠玉の一杯。たくさん残業した日はこのラーメンを食べろ!docoptはNimでも使えたのお話GitHubに草を生やし続け90日が経ったので感想を書くGoでAWS Lambdaを動かして、GitHubAPIv4(GraphQL)を叩いてみた感想Hadoopゾウさんについて本気出して考えてみたNuxt.jsでparticles-bg-vueを使うNuxt.jsのmodulesをCompositionAPIで使ってみる(@nuxtjs/toast編)くろおびらーめん with チャーシュー飯Nuxt.jsのmodulesをCompositionAPIで使ってみる(@nuxtjs/toast Global Option編)Nuxt.js + Composition APIでVuexのStateをReactiveに使う方法【初学者】Juliaを使って円周率を求める初めてプログラミングをした時のゴミソース見つけた面倒なことはPythonにやらせよう@GitHub API v4を使ったリリース実績取得Gatsby.jsで作ったブログに読み終わるまで○○分を追加した話Google広告設定でみる属性情報であなたをもっと知ろう!Blog用に新しいLogo作った話今年1年を振り返ってGoのEchoでJaegerを使ってボトルネックを調査するGatsby.jsで作ったBlogの投稿をGitHubの草にして表示させるWeb Developer Roadmap 2020を眺めながら今年の目標(Frontend)をだらだら考えるの会AWS X-RayでLambdaのトレースをしつつ、Datadog APMに連携するElixirでパラレルな負荷試験ツールを作るMonWedFri
Elixirでパラレルな負荷試験ツールを作るAWS X-RayでLambdaのトレースをしつつ、Datadog APMに連携するWeb Developer Roadmap 2020を眺めながら今年の目標(Frontend)をだらだら考えるの会Gatsby.jsで作ったBlogの投稿をGitHubの草にして表示させるGoのEchoでJaegerを使ってボトルネックを調査する今年1年を振り返って


 SearchBox

Search your interesting by Algolia in this blog.


 All 145 Tags

ぼやき 19JavaScript 12GitHub 7Vue.js 6TypeScript 6ラーメン 6デブ活 5Nuxt.js 4React 3Gatsby.js 3Auto Provisioning 3Serverspec 3Mac 3AWS 3自動テスト 3Python 3Ansible 3GitHub Action 2Go 2Lambda 2ChromeDriver 2GraphQL 2Netlify 2toast 2Chainer 2Write Code Every Day 2CompositionAPI 2Nim 1particle.js 1JSON Resume 1GitHub Pages 1Resume 1CV 1GitHubAction 1Sentry 1監視 1 1weed 1CI 1GitPitch 1GitHub Badges 1Azusa Colors 1Travis 1天下一品 1E2E Test 1Netlify Form 1Selenium 1Contact Form 1GoogleChrome 1Gatsby 1Googleデータポータル 1BI 1Azure Devops Build Pipeline 1netatmo 1台風 1IoT 1センシング 1Google Apps Script 1API FLASH 1SlackAPI 1Clasp 1Google Analytics 1Jest 1Unit Test 1Slack 1Stamp 1ハロウィーン 1昆布 1健康 1Headless CMS 1腰痛 1仮想化 1Hyper-v 1docopt 1CLI 1Hadoop 1ゾウ 1metasploitable 1powerShell 1RNN 1LSTM 1Chat BOT 1アイマス 1デレマス 1ひなこのーと 1Deep Learing 1OpenCV 1機械学習 1CNN 1分類学習 1顔認識 1AWS認定ソリューションアーキテクトプロフェッショナル 1資格 1勉強法 1E2Eテスト 1particles-bg-vue 1particle 1Proton 1particles.js 1Nightwatch.js 1test 1チャーシュー飯 1modules 1Composition API 1Vuex 1ストアパターン 1Julia 1円周率 1初心者 1The Gauss–Legendre algorithm 1Leibniz formula for π 1ギター 1DTM 1エフェクター 1ATELIERZ 1Caparison 1VOCALOID 1かわいい 1恐竜時代 1ことり隊 1早稲田 1GitHub API v4 1リリース実績 1Estimated Reading Time 1あと何分 1Logo 1SVG 1Server 1Seti@Home 1Google広告設定 1Google 1属性情報 1Persolal Data 1振り返り 1Echo 1Jaeger 1ボトルネック調査 1React Calendar Heatmap 1Frontend 1Web Developer Roadmap 2020 1Elixir 1Load Test 1X-Ray 1Datadog 1APM 1
この記事は405文字2で読めます

エラーをよく読もう・・

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

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

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

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

Table of Contents

エラーのおさらい

当方では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)undefinedplatform=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\'undefined revision: \'e82be7d358\'undefined time: \'2018-11-14T08:25:53\'\nSystem info: host: \'5d045d2f1712\'undefined ip: \'192.168.32.3\'undefined os.name: \'Linux\'undefined os.arch: \'amd64\'undefined os.version: \'4.15.0-1043-aws\'undefined java.version: \'11.0.4\'\nDriver info: driver.version: unknown'undefined
     error: 'session not created' }undefined
  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 unavailableundefined 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
  • npm install後、node_modulesのChromeDriverを最新のもの(/tmpに入れたもの)と置き換えます。

実行!

なんとうまくいきました。

直ったのでOKです。

Img

久しぶりにsuccessを見た・・。

Img

あとがき

Nightwatch.jsの動きが気になったのでもう少し深く見ていくとNightwatch.js自体はChromeDriverを依存パッケージとしては入れないようです。

Package.json

代わりにChromeDriverを入れていたのはvue-cli のテストパッケージでした。

Package.json

また、最新のnpm installできるChromeDriver76.0.1でしたので、もしかしたらnpm updateするだけでよかったのかもしれません。

一応、依存パッケージのアップデートはCI契機(Dependabot Preview )で動かすようにしていたのがあだになったかもしれませんねー。

˚