最近、「WebdriverIO がいい」という話を耳にしたので使ってみました。
軽く実案件の自動テストにも組み込んでみたのですが、 かなり使いやすいと感じたので簡単に使い方をご紹介します。
UI操作を自動化するためのJSライブラリです。(執筆現在の最新バージョンはv4.2.8)
ブラウザ操作を同期的に記述でき、APIもシンプルに記述できるよう配慮されているため、
複雑になりがちなUI操作のテストコードをかなりシンプルに記述することができます。
今回は以下の環境・バージョンで試しました。
OS : Mac OS El Capitan 10.11.6(15G31)
NodeJS : v6.4.0
Chrome バージョン 52.0.2743.116 (64-bit)
webdriverio : 4.2.8
selenium-standalone : 5.6.1
※ selenium standalone serverをjavascriptから立てるためのライブラリです。
今回はローカルにselenium standalone serverを立ててでテストを実行する想定で書いていますが、
リモートマシンやSelenium Gridだけでなく、
テスティングクラウドサービス(Sause Labs/Browserstack/Testingbot)等との連携も可能です。
(npm initは完了しているものとして)、ひとまずWebdriverIOをインストールしましょう。
$ npm install webdriverio --save-dev
また、selenium standalone serverを立ち上げる必要があるので、selenium-standaloneをインストールしておきます。
$ npm install selenium-standalone --save-dev
次に、wdioを実行するための設定ファイルを作成します。
npm initやkarma initのように、対話的に設定ファイルを作成できるwdioのconfigコマンドが用意されているので利用しましょう。
$ ./node_modules/.bin/wdio config
質問内容は以下のとおりです。
※ ライブラリやadapterをインストールするか?という質問は省略しています
先ほど指定した場所にテストを作成・配置し、以下のコマンドでwdio testrunnerを実行します。
wdio.conf.jsのserviceにselenium-standaloneを登録しておくとテスト実行時に自動でselenium standalone serverが立ち上がります
$ ./node_modules/.bin/wdio
典型的な操作をいくつかピックアップしてご紹介していきます。
※ browserオブジェクトについて
wdio test runnerを使用した場合、webdriverのインスタンスにbrowserというグローバル変数でアクセスできるようになります。(参考 )
describe('WDIOのテスト', () => {
it('画面の表示', () => {
browser.url('/index.html');
expect(browser.getTitle()).toBe('Hello WebdriverIO');
});
});
describe('Login Page', () => {
beforeEach(() => {
browser.url('/index.html');
});
it('should translate to todo list when submit correct userid & password', () => {
let title = browser.setValue('#userid', 'test@example.com')
.setValue('#password', 'password')
.click('#login')
.getTitle();
expect(title).toBe('Login Succeeded');
});
});
describe('Login Page', () => {
beforeEach(() => {
browser.url('/login.php');
});
it('should have right title', () => {
browser.saveScreenshot('./images/login.png');
});
});
また、こちらのページを参考にPage Objectを作成しておくと、より読みやすく変更に強いテストが作成できそうです。
他のテストランナーと組み合わせる場合は非同期なAPIとなります。
以下のサンプルのようにco + generatorで同期的に書くこともできますが、いちいちyieldで止める必要があるので少々不便になります。
例:jasmine + jasmine-co + webdriverioを組み合わせて使用する場合のサンプルです。
require('jasmine-co').install();
const webdriverio = require('webdriverio');
const browser = webdriverio.remote({
desiredCapabilities: { browserName: 'chrome' },
baseUrl: 'http://127.0.0.1:8000'
});
describe('Login Page', () => {
beforeAll(function* () {
yield browser.init();
});
beforeEach(function* () {
yield browser.url('/login.php');
});
it('should have right title', function* () {
let title = yield browser.getTitle();
expect(title).toBe('Login Page');