production.log

ピクスタ株式会社で開発部の部長をやっている星直史のブログです。

WebdriverIOを使ったChromeによるE2Eテスト環境構築の手順 - Amazon Linux -

概要

Amazon LinuxでWebdriverIOによる自動E2Eテストの実験をしようとしていたのですが、 うまくGetting startedできませんでした。

Linux環境においてWebdriverIOのGet Startedはやや説明不足感があるため、今回の記事では、 Amazon LinuxでWebdriverIOを使ったChromeによるE2Eテスト環境構築の手順を書こうと思います。

前提

項目 バージョン
Amazon Linux 2017.9
Java 1.8
selenium-server-standalone 3.12.0
chromedriver 2.40
WebdriverIO 4.13.0
npm 6.1.0
node 10.5.0

手順

まずは作業用のフォルダを作成

mkdir webdriverio-test && cd webdriverio-test

Javaのアップデート

Selenium Server StandaloneをJavaを動かす際、Amazon Linux 2017.9にデフォルトでインストールされているJavaのバージョンが1.7であるため、アップデートが必要になります。

sudo yum update -y
sudo yum install -y java-1.8.0-openjdk-devel.x86_64
sudo alternatives --config java

sudo alternatives --config java を実行すると、1.7か1.8か選択するように聞かれるので1.8を選択。

ChromeDriverのインストール

ざっくりやることは下記の通りです。

  • ChromeDriverをwgetで持ってきて展開
  • Chromeのバイナリをインストール
  • GConf2をインストール

という流れです。

ChromeDriverをwgetで持ってきて展開

wget https://chromedriver.storage.googleapis.com/2.40/chromedriver_linux64.zip
unzip chromedriver_linux64.zip

sudo ln -s /home/user_name/webdriverio-test/chromedriver /usr/local/bin/chromedriver

Chromeのバイナリをインストール

curl https://intoli.com/install-google-chrome.sh | bash

GConf2をインストール

yum install GConf2で入れようとしても、No package GConf2 available.と怒られるので、リポジトリを追加します。 sudo vim /etc/yum.repos.d/centos.repoで新規ファイルを作成し、下記を打ち込んで保存

[CentOS-base]
name=CentOS-6 - Base
mirrorlist=http://mirrorlist.centos.org/?release=6&arch=x86_64&repo=os
gpgcheck=1
gpgkey=http://mirror.centos.org/centos/RPM-GPG-KEY-CentOS-6

#released updates
[CentOS-updates]
name=CentOS-6 - Updates
mirrorlist=http://mirrorlist.centos.org/?release=6&arch=x86_64&repo=updates
gpgcheck=1
gpgkey=http://mirror.centos.org/centos/RPM-GPG-KEY-CentOS-6

#additional packages that may be useful
[CentOS-extras]
name=CentOS-6 - Extras
mirrorlist=http://mirrorlist.centos.org/?release=6&arch=x86_64&repo=extras
gpgcheck=1
gpgkey=http://mirror.centos.org/centos/RPM-GPG-KEY-CentOS-6
sudo rpm --import http://mirror.centos.org/centos/RPM-GPG-KEY-CentOS-6
sudo yum -y install GConf2

WebdriverIO

nvmによるnodeのインストール

sudo yum install -y git
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
source ~/.bashrc
nvm install node

WebdriverIOのインストール

npm install webdriverio

Selenium Server Standaloneをインストールしバックグラウンド実行

curl -O http://selenium-release.storage.googleapis.com/3.12/selenium-server-standalone-3.12.0.jar
java -jar selenium-server-standalone-3.12.0.jar &

実行

test.jsを作成

WebdriverIO公式のtest.jsをコピペして、'firofox'を'chrome'に変更すれば動くだろうと思いきや、 Chromeの場合は、明示的にheadlessモードを指定しなければ動作しませんでした。 そのため、下記の通りに書き換えます。

var webdriverio = require('webdriverio');
var options = {
  desiredCapabilities: {
    browserName: 'chrome',
    chromeOptions: {
      args: ['--headless', '--disable-gpu'],
    },   
  }
};

webdriverio
  .remote(options)
  .init()
  .url('http://www.google.com')
  .getTitle().then(function(title) {
    console.log('Title was: ' + title);
  })
  .end()
  .catch(function(err) {
    console.log(err);
  }); 
node test.js

Title was: Googleと表示されれば、うまくGetting startedができています!

まとめ

WebdriverIOのスタートガイドは、GUI環境上で動かす分には、Chromeが入っていれば、Seleniumが動かすChromeDriverをインストールするだけで動くのですが、CUI上では、Chromeをバイナリでインストールしたり、GConf2を使うためにリポジトリを追加したり、普段やらないようなことをするので骨が折れました。 また、起動時に--headlessを引数で渡さなければ謎のエラーで動作しないことにも地味にハマりました。