こんにちは
こんにちは。人事労務freeeのアプリケーションエンジニアを担当しています、@futoase です。 今回の記事では、「WebdriverIOを利用し、E2Eテスト環境を整える」を目的に書き進めていきます。
WebdriverIO
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があります。合わせてインストールします。
$ 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が立ち上がります。
ここまでで、
- WebdriverIOのセットアップ
- selenium-serverのセットアップ
- Webdriver -> selenium-server -> Chromeのつなぎ込み
以上の確認が行えました。
WebdriverIOを利用し、ウェブアプリケーションの確認を行う
実際にWebdriverIOを利用し、ウェブアプリケーションに対しテストを行います。
サンプル・アプリケーションのセットアップ
テスト用のサービスアプリケーションを作成しました。
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/にアクセスします。
login画面が表示されれば、アプリケーションの起動成功です。
サンプルアプリケーションで確認したいこと
サンプルアプリケーションに対して、確認したいことをまとめます。
- ログインできる。
- 投稿できる。
- ログアウトできる。
この3点をみなせば今回は :ok_hand: ということにします。
WebdriverIOでのシナリオを作成する
ターミナルにて、WebdriverIOのシナリオを作成するための ディレクトリを作成します。
$ midir -p ~/Sandbox/webdriver.io_sample
WebdriverIOのドキュメントにあるPage Object Patternを参考にして、テスト用のシナリオファイル(spec)を書いてみました。
selenium-standalone-server を立ち上げ、テストの準備を行います。
$ selenium-standalone start
selenium-standalone コマンドによりselenium standalone serverが立ち上がったことを確認後、 sample-web-app-specを使って簡単なテストシナリオを実行します。
テストシナリオでは、以下の動作を確認します。
- サービスにログインする
- コメントを書き込む
- ログアウトする
です。
sample-web-app-specを、リポジトリよりgit cloneした後、
$ npm install
を実行し、必要なnpmパッケージをインストールしてください。 インストール後、
$ ./node_modules/.bin/wdio webio.conf.js
というコマンドを実行すると、selenium standalone server経由でchromeを立ち上げ、 アプリケーションに対してテストを実行します。
テストシナリオは、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が置かれており、 好みの設計で書かれているものを見つけて使うと楽です。
外部サービスを利用したE2Eテストについて
外部サービスを利用し、E2Eテストを行うことも可能です。 Sauce Labsのサービス上でテストシナリオを実行することができます。
localhostのアプリケーションをSauce Labsでテストしたい場合は、 SC Proxy を利用することで可能となります。 SC Proxyの説明については本記事では割愛いたします。m(_ _)m
WebdriverIOの魅力
WebdriverIOでテストシナリオを書き、実行基盤を構築した経験から見えてきたものとして
- 豊富なドキュメンテーション
- SaaSとのつなぎ込み
- node.jsを採用
以上3つの魅力があげられると思います。
豊富なドキュメンテーション
WebdriverIOのサイトにありますが、何ができるのか、が明確化されているのでラーニングがしやすかったです。
SaaSとのつなぎ込み
Sauce Labs、Browser Stack, TestingBotなどE2E用SaaS企業からのサポートを受けており、つなぎ込みのためにはドライバを切り替えるだけで良いというのがあります。
Node.jsの採用
こちらは、Chrome DevToolsなどでrenderingされている要素をXPathで抜き出したり、ちょっとした処理をDevTools上でJavaScriptを使って処理した結果を移植する作業がしやすかったためです。
まだ運用は始まったばかりで本格的ではありませんが、E2Eテストでなければ解決できない課題(課金を行った後別サービスですでに課金状態になっているか...など)へのテスト基盤として利用できるよう知見を溜めていきます。
エンジニア採用
弊社 freee K.K. では、エンジニアを積極採用中です。
SET職についても募集をしています。
-
appiumを利用するためには、service pluginをインストールする必要があります。WebdriverIO - Appium Service↩
-
Seleniumとして開発されていたものと、WebDriverとして開発されたものがmergeされ、SeleniumWebDriverとなりました。E2Eテストで利用されたり、integrationテストで利用されるframeworkで多数採用されています。↩