Shallow Dive by Dozono

WebdriverIO を WSL2 上の Ubuntu で利用する

Posted : 17 Apr 2021

WSL2 上の Ubuntu で WebdriverIO を動かせたので情報を整理。

Nuxt.js のプロジェクトにおいて WebdriverIO を利用したかったのだが、デフォルトの状態ではうまく動作しなかったため調べた内容をまとめる。

なお、WSL2 から Windows 上のブラウザ(Chrome)を起動するのではなく、WSL2 上にインストールしたブラウザ (Chrome) を使ったヘッドレスモードでの情報となる。

結論だけで良い方はこちら

環境

  • Windows 10 Pro 20H2(build 19042.928)
  • WSL2
  • Ubuntu 20.04
  • Node.js

環境の確認

Ubuntu 20.04 on WSL2 インストール直後の環境で各種コマンドを実行する。

dozono@pc4:~$ cat /etc/*-release
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=20.04
DISTRIB_CODENAME=focal
DISTRIB_DESCRIPTION="Ubuntu 20.04.2 LTS"
NAME="Ubuntu"
VERSION="20.04.2 LTS (Focal Fossa)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 20.04.2 LTS"
VERSION_ID="20.04"
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
VERSION_CODENAME=focal
UBUNTU_CODENAME=focal
dozono@pc4:~$

Nuxt.js のプロジェクトを作る

Node.js のインストール

Node.js をインストールする。Node.js 以外の言語の場合は、このコマンドは実行不要。

sudo apt update
sudo apt install nodejs npm

今回はパッケージマネージャでインストールできる Node.js のバージョンを使用するが、必要に応じてステーブルバージョンを利用すれば良い。
(パッケージマネージャ経由のインストールだとかなり古いね・・)

dozono@pc4:~$ node -v
v10.19.0
dozono@pc4:~$ npm -v
6.14.4
dozono@pc4:~$

Nuxt.js のプロジェクト作成

適当に Nuxt.js のプロジェクトを作る。
このとき、WebdriverIO を選択しておく。

dozono@pc4:~$ npx create-nuxt-app nuxt-wdio

create-nuxt-app v3.6.0
✨  Generating Nuxt.js project in nuxt-wdio
? Project name: nuxt-wdio
? Programming language: JavaScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: WebdriverIO
? Rendering mode: Single Page App
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: Git
<中略>

Nuxt.js が動作することを確認する

Nuxt.js が正常動作することを確認するために、適当にコマンドを実行してみる。

dozono@pc4:~$ cd nuxt-wdio/
dozono@pc4:~/nuxt-wdio$ npm run generate

> nuxt-wdio@1.0.0 generate /home/dozono/nuxt-wdio
> nuxt generate

 WARN  You are using an unsupported version of Node.js (v10.19.0). It is recommended to use the latest LTS version (https://nodejs.org/en/about/releases)                          14:48:05

✔ Skipping webpack build as no changes detected               14:48:05
ℹ Generating output directory: dist/                          14:48:06
ℹ Generating pages                                            14:48:06
✔ Generated route "/"                                         14:48:06
✔ Client-side fallback created: 200.html                      14:48:06
dozono@pc4:~/nuxt-wdio$

エラーは出力されない。ちゃんとインストールされている。

WebdriverIO を使ったテストを試してみる(失敗しちゃう)

次は Nuxt.js のプロジェクトを作成した直後の状態で WebdriverIO のテストを実行してみる。

dozono@pc4:~/nuxt-wdio$ npm run test:e2e

> nuxt-wdio@1.0.0 test:e2e /home/dozono/nuxt-wdio
> wdio wdio.conf.js


Execution of 1 spec files started at 2021-04-17T05:44:49.049Z

2021-04-17T05:44:49.052Z INFO @wdio/cli:launcher: Run onPrepare hook
2021-04-17T05:44:49.054Z INFO @wdio/cli:launcher: Run onWorkerStart hook
2021-04-17T05:44:49.055Z INFO @wdio/local-runner: Start worker 0-0 with arg: wdio.conf.js
[0-0] 2021-04-17T05:44:49.673Z INFO @wdio/local-runner: Run worker command: run
[0-0] RUNNING in chrome - /test/e2e/specs/index.spec.js
[0-0] 2021-04-17T05:44:49.792Z INFO devtools:puppeteer: Initiate new session using the DevTools protocol
[0-0] 2021-04-17T05:44:49.793Z INFO devtools: Launch Google Chrome with flags: --enable-automation --disable-popup-blocking --disable-extensions --disable-background-networking --disable-background-timer-throttling --disable-backgrounding-occluded-windows --disable-sync --metrics-recording-only --disable-default-apps --mute-audio --no-first-run --no-default-browser-check --disable-hang-monitor --disable-prompt-on-repost --disable-client-side-phishing-detection --password-store=basic --use-mock-keychain --disable-component-extensions-with-background-pages --disable-breakpad --disable-dev-shm-usage --disable-ipc-flooding-protection --disable-renderer-backgrounding --force-fieldtrials=*BackgroundTracing/default/ --enable-features=NetworkService,NetworkServiceInProcess --disable-features=site-per-process,TranslateUI,BlinkGenPropertyTrees --window-position=0,0 --window-size=1200,900

# この時点で Windows 上の Chrome が起動し、ログ出力が一時停止する。
# WebdriverIO と ブラウザ(Chrome)が通信できていないことが問題だと思われる。

[0-0] 2021-04-17T05:52:22.914Z ERROR @wdio/runner: Error: connect ECONNREFUSED 127.0.0.1:41811
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1107:14)
[0-0] FAILED in chrome - /test/e2e/specs/index.spec.js
2021-04-17T05:52:23.036Z INFO @wdio/cli:launcher: Run onComplete hook

Spec Files:      0 passed, 1 failed, 1 total (100% completed) in 00:00:26

2021-04-17T05:52:23.038Z INFO @wdio/local-runner: Shutting down spawned worker
2021-04-17T05:52:23.292Z INFO @wdio/local-runner: Waiting for 0 to shut down gracefully
2021-04-17T05:52:23.294Z INFO @wdio/local-runner: shutting down
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! nuxt-wdio@1.0.0 test:e2e: `wdio wdio.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the nuxt-wdio@1.0.0 test:e2e script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/dozono/.npm/_logs/2021-04-17T05_52_23_321Z-debug.log
dozono@pc4:~/nuxt-wdio$

起動した Chrome のプロセスを確認する

テスト実行時に起動する Chrome のプロセスを確認してみる。

dozono@pc4:~/nuxt-wdio$ ps aux | grep chrome
dozono   10503  0.0  0.0    812     8 ?        Ss   14:44   0:00 /tools/init /mnt/c/Program Files (x86)/Google/Chrome/Application/chrome.exe --remote-debugging-port=34183 --user-data-dir=C:\Users\kamidozono\AppData\Local\lighthouse.68503328 --enable-automation --disable-popup-blocking --disable-extensions --disable-background-networking --disable-background-timer-throttling --disable-backgrounding-occluded-windows --disable-sync --metrics-recording-only --disable-default-apps --mute-audio --no-first-run --no-default-browser-check --disable-hang-monitor --disable-prompt-on-repost --disable-client-side-phishing-detection --password-store=basic --use-mock-keychain --disable-component-extensions-with-background-pages --disable-breakpad --disable-dev-shm-usage --disable-ipc-flooding-protection --disable-renderer-backgrounding --force-fieldtrials=*BackgroundTracing/default/ --enable-features=NetworkService,NetworkServiceInProcess --disable-features=site-per-process,TranslateUI,BlinkGenPropertyTrees --window-position=0,0 --window-size=1200,900 about:blank
dozono   10683  0.0  0.0   8164   664 pts/0    S+   14:53   0:00 grep --color=auto chrome
dozono@pc4:~/nuxt-wdio$

実行ファイルのパスは /mnt/c/Program Files (x86)/Google/Chrome/Application/chrome.exe である。
つまり、 WSL2 のデフォルト状態で WebdriverIO から Chrome を起動すると、Windows 上の Chrome を起動しようとする。

Ubuntu 上のブラウザを利用できるように構成する

Google Chrome のインストール

Ubuntu に Google Chrome をインストールする。

sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
sudo wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
sudo apt update
sudo apt install -y google-chrome-stable

インストールできたことを確認する。

dozono@pc4:~$ which google-chrome
/usr/bin/google-chrome
dozono@pc4:~$
dozono@pc4:~$ google-chrome --version
Google Chrome 90.0.4430.72
dozono@pc4:~$

wdio.conf.js を編集する

Ubuntu 上の Chrome をヘッドレスモードで実行するように wdio.conf.js を編集する。

$ git diff
diff --git a/wdio.conf.js b/wdio.conf.js
index d68b1bf..013b933 100644
--- a/wdio.conf.js
+++ b/wdio.conf.js
@@ -47,7 +47,11 @@ exports.config = {
     // 5 instances get started at a time.
     maxInstances: 5,
     //
-    browserName: 'chrome'
+    browserName: 'chrome',
+    'goog:chromeOptions': {
+      binary: '/usr/bin/google-chrome',
+      args: ['--headless', '--disable-gpu'],
+    }
     // If outputDir is provided WebdriverIO can capture driver session logs
     // it is possible to configure which logTypes to include/exclude.
     // excludeDriverLogs: ['*'], // pass '*' to exclude all driver session logs
$

テストが通る

$ npm run test:e2e

> nuxt-wdio@1.0.0 test:e2e /home/dozono/nuxt-wdio
> wdio wdio.conf.js


Execution of 1 spec files started at 2021-04-17T06:13:47.125Z

2021-04-17T06:13:47.128Z INFO @wdio/cli:launcher: Run onPrepare hook
2021-04-17T06:13:47.129Z INFO @wdio/cli:launcher: Run onWorkerStart hook
2021-04-17T06:13:47.130Z INFO @wdio/local-runner: Start worker 0-0 with arg: wdio.conf.js
[0-0] 2021-04-17T06:13:47.766Z INFO @wdio/local-runner: Run worker command: run
[0-0] RUNNING in chrome - /test/e2e/specs/index.spec.js
[0-0] 2021-04-17T06:13:47.878Z INFO devtools:puppeteer: Initiate new session using the DevTools protocol
[0-0] 2021-04-17T06:13:47.878Z INFO devtools: Launch Google Chrome with flags: --enable-automation --disable-popup-blocking --disable-extensions --disable-background-networking --disable-background-timer-throttling --disable-backgrounding-occluded-windows --disable-sync --metrics-recording-only --disable-default-apps --mute-audio --no-first-run --no-default-browser-check --disable-hang-monitor --disable-prompt-on-repost --disable-client-side-phishing-detection --password-store=basic --use-mock-keychain --disable-component-extensions-with-background-pages --disable-breakpad --disable-dev-shm-usage --disable-ipc-flooding-protection --disable-renderer-backgrounding --force-fieldtrials=*BackgroundTracing/default/ --enable-features=NetworkService,NetworkServiceInProcess --disable-features=site-per-process,TranslateUI,BlinkGenPropertyTrees --window-position=0,0 --window-size=1200,900 --headless --disable-gpu
[0-0] 2021-04-17T06:13:48.465Z INFO devtools: Connect Puppeteer with browser on port 45829
[0-0] 2021-04-17T06:13:48.573Z INFO devtools: COMMAND navigateTo("http://localhost:3000/")
[0-0] 2021-04-17T06:13:48.787Z INFO devtools: RESULT null
[0-0] 2021-04-17T06:13:48.817Z INFO devtools: COMMAND getTitle()
[0-0] 2021-04-17T06:13:48.823Z INFO devtools: RESULT nuxt-wdio
[0-0] 2021-04-17T06:13:48.829Z INFO devtools: COMMAND deleteSession()
[0-0] 2021-04-17T06:13:48.830Z INFO devtools: RESULT null
[0-0] PASSED in chrome - /test/e2e/specs/index.spec.js
2021-04-17T06:13:48.961Z INFO @wdio/cli:launcher: Run onComplete hook

 "spec" Reporter:
------------------------------------------------------------------
[Chrome Headless 90.0.4430.72 linux #0-0] Running: Chrome Headless (v90.0.4430.72) on linux
[Chrome Headless 90.0.4430.72 linux #0-0] Session ID: 1f9014d5-29df-4746-9802-2ef578fec6f6
[Chrome Headless 90.0.4430.72 linux #0-0]
[Chrome Headless 90.0.4430.72 linux #0-0] » /test/e2e/specs/index.spec.js
[Chrome Headless 90.0.4430.72 linux #0-0] Example test
[Chrome Headless 90.0.4430.72 linux #0-0]    ✓ should open correct app
[Chrome Headless 90.0.4430.72 linux #0-0]
[Chrome Headless 90.0.4430.72 linux #0-0] 1 passing (271ms)


Spec Files:      1 passed, 1 total (100% completed) in 00:00:01

2021-04-17T06:13:48.965Z INFO @wdio/local-runner: Shutting down spawned worker
2021-04-17T06:13:49.220Z INFO @wdio/local-runner: Waiting for 0 to shut down gracefully
2021-04-17T06:13:49.221Z INFO @wdio/local-runner: shutting down
$

その他 参考情報

(オプション) Chrome Driver のインストール

WebdriverIO の実行環境によっては Chrome Driver をインストールする。

まずは、以下のサイトで Stable の Chrome Driver を探す。
ChromeDriver - WebDriver for Chrome

Chrome Driver をインストールする。
※ サンプルのコマンドでは、バージョン90.0.4430.24をインストールする内容となっている。

curl -LO https://chromedriver.storage.googleapis.com/90.0.4430.24/chromedriver_linux64.zip
unzip chromedriver_linux64.zip
sudo mv chromedriver /usr/bin/chromedriver
sudo chown root:root /usr/bin/chromedriver
sudo chmod +x /usr/bin/chromedriver
chromedriver --version

以上