More than 5 years have passed since last update.

ブラウザテストツール総まとめ・2016年夏版

Last updated at 2016-08-22Posted at 2016-07-30

WebサイトやWebアプリケーションの文脈(フロント寄り)で、E2E関連ツールを整理してみます。いろいろありすぎるようでいて、「結局Seleniumかよっ」ていう話ですが...。ただ、クロスブラウザテストが不要であればNightmareは簡便な選択肢としてオススメです。個人的な見解はまとめ参照。

(当初『E2Eは「End to end」の略ですよ。まとめ』と題したのですが、「E2E」という用語がそれほど浸透していない?ようなので、改題しました)

以下、目次を兼ねて並べてみました。E2Eの文脈でないものも一部含みますが、全体像を把握するために入れてあります。変なところあれば、コメントでご指摘くださいませ。

テストプラットフォーム | 対応ブラウザ | 開発言語 | GitHub★
:-- | :--: | :--: | --: | --:
Selenium Standalone Server | 各種 | Java | 3,977
DalekJS | 各種 | JavaScript | 695

GitHubのスターは2016年7月30日調べ。ただし、登場年によるバイアスが激しいので、この件に関してはあまり参考にならないですね...。

E2Eテストツール

Nightwatch

総合的なE2Eテストツール。WebDriver実装(独自)と、アサーションライブラリが一体となっているのが、使いやすいような使いにくいような。

書き方はこんな感じ。

module.exports = {
  'Demo test Google' : function (client) {
    client
      .url('http://www.google.com')
      .waitForElementVisible('body', 1000)
      .assert.title('Google')
      .assert.visible('input[type=text]')
      .setValue('input[type=text]', 'rembrandt van rijn')
      .waitForElementVisible('button[name=btnG]', 1000)
      .click('button[name=btnG]')
      .pause(1000)
      .assert.containsText('ol#rso li:first-child',
        'Rembrandt - Wikipedia')
      .end();
  }
};

Protractor

UIテストの定番。AngularJSのために作られたフレームワーク。AngularJS以外からだと、余計な機能もあるが、Reactなどと合わせて使う人も多い。内部的には、selenium-webdriverを使っている。

実際のテストはこんな感じ。テストフレームワークのデフォルトはJasmineだけど、他のと組み合わせてもOK。Mochaとか。

describe('angularjs homepage todo list', function() {
  it('should add a todo', function() {
    browser.get('https://angularjs.org');

    element(by.model('todoList.todoText')).sendKeys('write first protractor test');
    element(by.css('[value="add"]')).click();

    var todoList = element.all(by.repeater('todo in todoList.todos'));
    expect(todoList.count()).toEqual(3);
    expect(todoList.get(2).getText()).toEqual('write first protractor test');

    // You wrote your first test, cross it off the list
    todoList.get(2).element(by.css('input')).click();
    var completedAmount = element.all(by.css('.done-true'));
    expect(completedAmount.count()).toEqual(2);
  });
});

WebdriverIO

Selenium 2.0 bindings for NodeJS。公式のselenium-webdriverより、だいぶ書きやすい。あくまでもブラウザの自動化ツールなので、テストフレームワークは自分の好きなものと組み合わせて使う。ちなみに、Codecept・Chimp・Spectronなどは、内部的にこのWebdriverIOを使っている。

書き方はこんな感じ。

browser
  .get("http://www.google.com")
  .elementById('q')
  .sendKeys('webdriver')
  .elementById('btnG')
  .click()

CodeceptJS

比較的後発で、Codeception(PHP製)を元に作られたJavaScriptのツール。「同期的に」書けるのがウリ。ただ、書き方が独特なので好き嫌いが分かれそう。

実際のテストはこんな感じ。

Feature('CodeceptJS Demonstration');

Scenario('submit form successfully', (I) =>
  I.amOnPage('/documentation')
  I.fillField('Email', 'hello@world.com')
  I.fillField('Password', '123456')
  I.checkOption('Active')
  I.checkOption('Male');
  I.click('Create User')
  I.see('User is valid')
  I.dontSeeInCurrentUrl('/documentation')
});

Karma

AngularJSのために生まれたテストフレームワーク。E2Eというより、ユニットテスト的な使い方が基本。ただ、境界はあいまいなので、E2E的に使っているケースもあり。launcherを切り替えることで様々なブラウザが使え、PhantomJSやElectronでのヘッドレステストも可能。

Chimp

CasperJS

PhantomJSとSlimerJSを透過的に使えるツール。でも、モバイルどうするの...。

Zombie

jsdomベースのテストツール。そろそろ開発止まってる...?

Codeception

http://codeception.com/
https://github.com/codeception/codeception
開発言語はPHP

Capybara

http://jnicklas.github.io/capybara/
開発言語はRuby

Cucumber

異次元方向に向かっているのがCucumber。JavaScript実装も存在する。

Gherkinという自然言語風味なDSLで書く。

# features/my_feature.feature

Feature: Example feature
  As a user of Cucumber.js
  I want to have documentation on Cucumber
  So that I can concentrate on building awesome applications

  Scenario: Reading documentation
    Given I am on the Cucumber.js GitHub repository
    When I go to the README file
    Then I should see "Usage" as the page title

テストプラットフォーム

Selenium Standalone Server

http://www.seleniumhq.org/
https://github.com/SeleniumHQ/selenium
開発言語: Java 😱 (クライアントライブラリについては、複数言語存在)

DalekJS

もともとSeleniumのインターフェースだったWebDriverを、Node環境で独自実装したもの。すごく期待していたんですが、開発止まってる...😱 (誰かその後を知りませんか?)

ヘッドレスブラウザ

クロスブラウザテストは、時間とお金がかかります。そこで、一般的なのが次の布陣です。GitHubで受け付けるプルリクエストも、Travisまでにしておいてクロスブラウザテストを省略することが多いようですね。

ローカル: ヘッドレスブラウザ
Travisとか: ヘッドレスブラウザ
BrowserStack / Saucelabs: クロスブラウザ

しばらく、PhantomJS一択だったのですが、v1.9で永らく足踏みしていた結果、ES5対応も不完全な状態が続いたため、React勢からは完全に見放され「もうjsdomだけでいいよ」的な風潮が生まれたりします。2016年になって無事、PhantomJSもバージョンアップを果たしv2に。ベースとなるWebKitが新しくなりだいぶ使いやすくなりました。

しかし、PhantomJSは早晩、Chromeの度重なるアップデートに着いていけなくなりそうな気配もあります(誰か「違う」と言って!)。ダークホースだったのがElectronで、これをブラウザの代わりに使おうという動きがここしばらく活発です。単体で使うならNightmare押し。ただ、SeleniumからElectronを使うルートがまだいまいち確立されていない2016年夏現在です。

PhantomJS

SlimerJS

Nightmare

最近、エンジンをPhantomJSからElectronに切り替えて注目が集まっている。これ自体でE2Eツールとしても十分使える。

jsdom

Reactのテストでよく使われる。

https://github.com/tmpvar/jsdom
WHATWG DOM と HTML のJavaScriptによる実装。

まとめ

Seleniumから脱却したい気持ちは大きいですが、しばらくは使わざるを得ないようです。ただ、Nightwatch・ProtractorをはじめWebDriverクライアントの使い勝手はだいぶ向上しました。第二のWebDriver実装であるWebdriverIOは、単体で相当シンプルに書けるようになったので、もうラッパーライブラリを使う必要もないかもしれません。

個人的には、しばらく次のような方針で行こうかと思っています。avaかtapeあたりと組み合わせて。mochaでもよし。

シンプルなライブラリ開発: Nightmare
クロスブラウザテストが必要なケース: WebdriverIO

あとはコードカバレッジどうするか...。「統合テストでカバレッジを取らない」のが基本なのでしょうが、フロント中心になるとそうも言ってられないような。Karmaなら簡単に取れるけれど、ページ遷移が扱えないのが困りどころです。

Appendix

以下は、一応メモしておくぐらい。ご参考まで。

クラウドサービス

Seleniumをローカルに立ち上げたくない僕らのためのサービス。モバイルを含めたブラウザの種類が充実。基本有料だけど、オープンソースブロジェクトはたいてい無料。

ほか、結構いっぱいあります。

WebDriver

SeleniumとWebDriverの関係性がややこしく感じるけれど、要はこういうこと。

Selenium 1.0 + WebDriver = Selenium 2.0

WebDriverはSeleniumのインターフェースで、W3Cでも標準化が進められている。各種ブラウザに対応したドライバが存在する。

ChromeDriver
FirefoxDriver
InternetExplorerDriver
PhantomJSDriver (=GhostDriver) すでに開発中止
SafariDriver

など。

Fake (GUI)

http://fakeapp.com/
WebKitベース
動作環境: Mac OS X

アプリケーションテスト (ハイブリッド系)

Spectron: 公式 - GitHub - Electron(デスクトップアプリ)に特化したE2Eテストツール。
Appium: 公式 - GitHub - iOSとAndroidアプリの自動化。ネイティブも、ハイブリッドも。

939

901

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up