[Webサイト制作] Nightwatch.jsを使ってフロントエンドをテストする

ブラウザを自動運転することでフロントエンドのテストを自動で実行したい。そう思ってツールを探していたところ、Nightwatch.jsが良さげ。ちなみにこういうテストはE2E(エンドツーエンド)テストと呼ばれるらしい。

Nightwatch.js | Node.js powered End-to-End testing framework
http://nightwatchjs.org/

Getting Started | Nightwatch.js
http://nightwatchjs.org/gettingstarted

環境を作って試してみる。

Node.jsのインストール

今回のテストマシンはMac。Node.jsは既に入っていたので軽く動作確認。

$ node -v
v6.9.4
$ vi hello.js
console.log(‘Hello World’);
$ node hello.js
Hello World

$ node -v

v6.9.4

$ vi hello.js

console.log(‘Hello World’);

$ node hello.js

Hello World

Nightwatch.jsのインストール

$ sudo npm install -g nightwatch

1	$ sudo npm install -g nightwatch

JDK 8のインストール

Java SE Development Kit 8 – Downloads
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

Java SE Development Kit 8u131をダウンロード
dk-8u131-macosx-x64.dmg (Mac OS X 226.57 MB)

インストーラを使ってインストール

$ java -version
java version "1.8.0_131"
Java(TM) SE Runtime Environment (build 1.8.0_131-b11)
Java HotSpot(TM) 64-Bit Server VM (build 25.131-b11, mixed mode)

$ java -version

java version "1.8.0_131"

Java(TM) SE Runtime Environment (build 1.8.0_131-b11)

Java HotSpot(TM) 64-Bit Server VM (build 25.131-b11, mixed mode)

Seleniumのインストール

Selenium – Web Browser Automation
http://www.seleniumhq.org/

Selenium Standalone Serverをダウンロード
selenium-server-standalone-3.4.0.jar (version 3.4.0)

実行する

$ java -jar selenium-server-standalone-3.4.0.jar

1	$ java -jar selenium-server-standalone-3.4.0.jar

ブラウザ毎にWebDriverのインストール

Selenium WebDriver
http://www.seleniumhq.org/projects/webdriver/

Nightwatch.jsは標準でFirefoxで実行される
Firefox以外のブラウザで実行するにはドライバが必要

設定ファイルの作成

とりあえずサンプルの設定ファイルをコピペ。

Getting Started | Nightwatch.js
http://nightwatchjs.org/gettingstarted#settings-file

$ vi nightwatch.json
{
  "src_folders" : ["tests"],
  "output_folder" : "reports",
  "custom_commands_path" : "",
  "custom_assertions_path" : "",
  "page_objects_path" : "",
  "globals_path" : "",

  "selenium" : {
    "start_process" : false,
    "server_path" : "",
    "log_path" : "",
    "port" : 4444,
    "cli_args" : {
      "webdriver.chrome.driver" : "",
      "webdriver.gecko.driver" : "",
      "webdriver.edge.driver" : ""
    }
  },

  "test_settings" : {
    "default" : {
      "launch_url" : "http://localhost",
      "selenium_port"  : 4444,
      "selenium_host"  : "localhost",
      "silent": true,
      "screenshots" : {
        "enabled" : false,
        "path" : ""
      },
      "desiredCapabilities": {
        "browserName": "firefox",
        "marionette": true
      }
    },

    "chrome" : {
      "desiredCapabilities": {
        "browserName": "chrome"
      }
    },

    "edge" : {
      "desiredCapabilities": {
        "browserName": "MicrosoftEdge"
      }
    }
  }
}

$ vi nightwatch.json

{

"src_folders" : ["tests"],

"output_folder" : "reports",

"custom_commands_path" : "",

"custom_assertions_path" : "",

"page_objects_path" : "",

"globals_path" : "",

"selenium" : {

"start_process" : false,

"server_path" : "",

"log_path" : "",

"port" : 4444,

"cli_args" : {

"webdriver.chrome.driver" : "",

"webdriver.gecko.driver" : "",

"webdriver.edge.driver" : ""

}

"test_settings" : {

"default" : {

"launch_url" : "http://localhost",

"selenium_port" : 4444,

"selenium_host" : "localhost",

"silent": true,

"screenshots" : {

"enabled" : false,

"path" : ""

"desiredCapabilities": {

"browserName": "firefox",

"marionette": true

}

"chrome" : {

"desiredCapabilities": {

"browserName": "chrome"

}

"edge" : {

"desiredCapabilities": {

"browserName": "MicrosoftEdge"

}

テストコードを書く

$ vi demo.js
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();
  }
};

$ vi demo.js

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();

}

};

テストを実行

$ nightwatch

1	$ nightwatch

参考サイト

javascript – switch to a frame with Nightwatch.js – Stack Overflow
https://stackoverflow.com/questions/27548030/switch-to-a-frame-with-nightwatch-js

Nightwatch.jsをE2Eテストフレームワークとして実プロジェクトに適用する時のtipsまとめ | MMMブログ
http://blog.mmmcorp.co.jp/blog/2015/09/24/use-nightwatch/

WebアプリのUIテストを手軽に自動化できるNightwatch.jsの使い方 – WPJ
https://www.webprofessional.jp/javascript-functional-testing-nightwatch-js/

姫路のホームページ製作屋WILDWEST-SERVICE
https://www.wildwest-service.com/nightwatch/

以下はフロントエンドテストに関する参考ページ

フロントエンドにテストを導入 – Qiita
http://qiita.com/howdy39/items/cdd5b252096f5a2fa438

フロントエンドのテストに真面目に向き合う – Qiita
http://qiita.com/okmttdhr/items/cc58e83c259aa0049538

Node.jsのインストール

Nightwatch.jsのインストール

JDK 8のインストール

Seleniumのインストール

ブラウザ毎にWebDriverのインストール

設定ファイルの作成

テストコードを書く

テストを実行

参考サイト

関連記事