freeeの開発情報ポータルサイト

WebdriverIOでE2Eテストを行おう

こんにちは

こんにちは。人事労務freeeのアプリケーションエンジニアを担当しています、@futoase です。 今回の記事では、「WebdriverIOを利用し、E2Eテスト環境を整える」を目的に書き進めていきます。

WebdriverIO

f:id:syanbi:20170526150415p:plain

WebdriverIOは、Selenium WebDriverを利用したE2Eテストフレームワークです。Node.jsで作られています。Webアプリケーションだけではなく、mobileアプリケーションに対してもappium1を利用することでE2Eテストを実施することができます。

記事の記載内容について

$ ls

こちらの記載は、iTermやrxvtなどのターミナルにて入力したコマンドを指します。 この場合はlsとなります。$は、プロンプトの表示となります。

こちらの記事が公開された時点での情報のため、 閲覧日時によってはすでに古い情報の可能性があります。

ローカル環境でのセットアップ

WebdriverIOの動作を体験していただくため、 ローカル環境でのセットアップを始めましょう。

※ macOSが動作するハードウェアを前提に記事を書いています。

環境を構築するために必要なソフトウェアは以下です。

  • Git
  • Javaランタイム
  • Node.js
  • Chromeか、Firefoxなどのブラウザ、もしくはヘッドレスブラウザ

それぞれのソフトウェアインストールは割愛します。

WebdriverIOをnpmを利用してインストールします。

$ mkdir -p webdriverio-test
$ cd webdriverio-test
$ npm install webdriverio --save-dev

また、Selenium WebDriver2を使わなくてはいけません。 WebdriverIOと各種ブラウザをブリッジしてくれる便利なライブラリです。

npmパッケージに、Seleniumのセットアップ、起動を簡単に行えるようにするための ラッパー、selenium-standaloneがあります。合わせてインストールします。

github.com

$ npm install selenium-standalone@latest -g
$ selenium-standalone install

selenium-standaloneを利用し、Seleniumをstandalone modeで立ち上げます。

$ selenium-standalone start

これで、WebdriverIOを実行するための環境が揃いました。

WebdriverIO REPL Interface

WebdriverIO REPL Interfaceを利用し、ブラウザを操作することが可能です。 早速やっていきましょう。

$ ./node_modules/.bin/wdio repl chrome

コマンドを実行するとChromeが立ち上がります。

f:id:syanbi:20171010162202p:plain

ここまでで、

  • WebdriverIOのセットアップ
  • selenium-serverのセットアップ
  • Webdriver -> selenium-server -> Chromeのつなぎ込み

以上の確認が行えました。

WebdriverIOを利用し、ウェブアプリケーションの確認を行う

実際にWebdriverIOを利用し、ウェブアプリケーションに対しテストを行います。

サンプル・アプリケーションのセットアップ

テスト用のサービスアプリケーションを作成しました。

bitbucket.org

macOS用のバイナリを用意しています。macOSをご利用の方はこちらを利用すると便利です。

テストアプリ用バイナリ: sample-web-app_darwin_amd64

バイナリダウンロード後、実行権限を付けてください。

$ chmod +x sample-web-app_darwin_amd64

その他のプラットフォームをご利用の場合は、リポジトリのREADME.mdを参照し、ビルドしてください。

ビルド済みバイナリをダウンロードするか、ビルドした後、ターミナルから実行可能なバイナリを叩くことでアプリケーションの起動が行われます。

$ ./sample-web-app_darwin_amd64
starting server...

アプリケーションにアクセスしてみます。http://localhost:8080/にアクセスします。

f:id:syanbi:20171010162501p:plain

login画面が表示されれば、アプリケーションの起動成功です。

サンプルアプリケーションで確認したいこと

サンプルアプリケーションに対して、確認したいことをまとめます。

  • ログインできる。
  • 投稿できる。
  • ログアウトできる。

この3点をみなせば今回は :ok_hand: ということにします。

WebdriverIOでのシナリオを作成する

ターミナルにて、WebdriverIOのシナリオを作成するための ディレクトリを作成します。

$ midir -p ~/Sandbox/webdriver.io_sample

WebdriverIOのドキュメントにあるPage Object Patternを参考にして、テスト用のシナリオファイル(spec)を書いてみました。

bitbucket.org

selenium-standalone-server を立ち上げ、テストの準備を行います。

$ selenium-standalone start

selenium-standalone コマンドによりselenium standalone serverが立ち上がったことを確認後、 sample-web-app-specを使って簡単なテストシナリオを実行します。

テストシナリオでは、以下の動作を確認します。

  1. サービスにログインする
  2. コメントを書き込む
  3. ログアウトする

です。

sample-web-app-specを、リポジトリよりgit cloneした後、

$ npm install

を実行し、必要なnpmパッケージをインストールしてください。 インストール後、

$ ./node_modules/.bin/wdio webio.conf.js

というコマンドを実行すると、selenium standalone server経由でchromeを立ち上げ、 アプリケーションに対してテストを実行します。

f:id:syanbi:20171010225356g:plain

テストシナリオは、Page Object patternを利用しており、WebdriverIOのtemplateを参考に書いています。

例)

import chai from 'chai';
import LoginPage from './../pageobjects/login.page';
var expect = chai.expect;
var date = new Date();

describe('login - comment - logout', function() {
  it('should allow access', function() {
    LoginPage.open();
    LoginPage.username.setValue('user');
    LoginPage.password.setValue('password');
    LoginPage.submit();

    expect(browser.getText('h1')).to.contain('Comments');
  });
});

WebdriverIOにはいくつか、BoilerTemplateが置かれており、 好みの設計で書かれているものを見つけて使うと楽です。

github.com

外部サービスを利用したE2Eテストについて

外部サービスを利用し、E2Eテストを行うことも可能です。 Sauce Labsのサービス上でテストシナリオを実行することができます。

webdriver.io

localhostのアプリケーションをSauce Labsでテストしたい場合は、 SC Proxy を利用することで可能となります。 SC Proxyの説明については本記事では割愛いたします。m(_ _)m

WebdriverIOの魅力

WebdriverIOでテストシナリオを書き、実行基盤を構築した経験から見えてきたものとして

  1. 豊富なドキュメンテーション
  2. SaaSとのつなぎ込み
  3. node.jsを採用

以上3つの魅力があげられると思います。

豊富なドキュメンテーション

WebdriverIOのサイトにありますが、何ができるのか、が明確化されているのでラーニングがしやすかったです。

SaaSとのつなぎ込み

Sauce Labs、Browser Stack, TestingBotなどE2E用SaaS企業からのサポートを受けており、つなぎ込みのためにはドライバを切り替えるだけで良いというのがあります。

Node.jsの採用

こちらは、Chrome DevToolsなどでrenderingされている要素をXPathで抜き出したり、ちょっとした処理をDevTools上でJavaScriptを使って処理した結果を移植する作業がしやすかったためです。

まだ運用は始まったばかりで本格的ではありませんが、E2Eテストでなければ解決できない課題(課金を行った後別サービスですでに課金状態になっているか...など)へのテスト基盤として利用できるよう知見を溜めていきます。

エンジニア採用

弊社 freee K.K. では、エンジニアを積極採用中です。

jobs.freee.co.jp

SET職についても募集をしています。

jobs.jobvite.com


  1. appiumを利用するためには、service pluginをインストールする必要があります。WebdriverIO - Appium Service

  2. Seleniumとして開発されていたものと、WebDriverとして開発されたものがmergeされ、SeleniumWebDriverとなりました。E2Eテストで利用されたり、integrationテストで利用されるframeworkで多数採用されています。