WebアプリのUIテストができるSeleniumですが、それをラップして色々なAPIを提供してくれるのがNightwatch.jsです。アプリをJavaScriptで書いていて、テストも同じ言語で書きたい人には特におすすめです。

ただNighwatch単体だと不十分なところがあり、さらなるラッパーを探してたところhttps://github.com/sethmcl/nightwatchを発見。使ってみたところ動かず；そこで少し修正したものを公開します。特徴は下記のとおり。

• Selenium Serverを事前に動かさなくていい。
• ChromeとかIEでテストできる。
• APIが簡単に作れる。

使い方

まずgithubからクローンしてください。

$ git clone https://github.com/shoarai/nightwatch.git
$ cd nightwatch
$ npm install

下記のコマンドで、デフォルトのテストが動きます。
Selenium Serverも組み込まれていて、勝手に動いて勝手に止まります。

$ npm test

ブラウザ選び

デフォルトのテストはFirefoxで動きますが、Google Chrome、Internet Explorerも選べます。Nigthwatchfile.jsを修正してください。

test_settings: {
  default: {
    ...
      desiredCapabilities: {
      browserName: 'firefox',
      // browserName: 'chrome',
      // browserName: 'internet explorer',
      ...

WindowsでChromeを使いたい場合は下記も修正してください。

selenium: {
  cli_args: {
    // 'webdriver.chrome.driver': './node_modules/.bin/chromedriver',      // in Mac
    'webdriver.chrome.driver': './node_modules/.bin/chromedriver.cmd',  // in Windows
    ...

APIを作る

tests/spec/search.jsでは、pageオブジェクトにあるhomepageとsearch_resultsの2つのモジュールを使っています。これらを使うためにはbeforeにある処理が必要です。

var path = require('path');
module.exports = {
  tags: ['sanity', 'search'],
  before: function(client) {
    require('nightwatch-pages')(client, path.resolve(__dirname, '..', 'pages'));
  },
  'Bing search from homepage': function (client) {
    var searchTerm = 'selenium';
    client
      .page.homepage.load()
      .page.homepage.search(searchTerm)
      .page.search_results.assertResults(searchTerm)
      .page.search_results.navImages()
      .saveScreenshot('./screen/selenium.png')
      .end();
  }
};

tests/pages/search_results.jsに上記のsearch_resultsモジュールの関数が書いてあります。新しいモジュールを追加したい場合は、tests/pagesにモジュール名にしたい名前のファイルを追加してください。

module.exports = {
  selectors: {
    'resultDiv': '#b_results',
    'navImages': 'nav ul li:nth-child(2) a'
  },
  assertResults: function (text) {
    return this.client.assert.containsText(this.selectors.resultDiv, text);
  },
  navImages: function () {
    return this.client.click(this.selectors.navImages);
  }
};

以上です。よりよいテスト自動化を。