2017年6月20日 – 端くれプログラマの備忘録

ブラウザを自動運転することでフロントエンドのテストを自動で実行したい。そう思ってツールを探していたところ、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

APIサーバーを作る必用に迫られていたところへ良く出来たサンプルを見つけたので覚書リンク。APIサーバーの何たるかとLaravelでの実装例を同時に学ぶことができて有益。作者に感謝。

How to Build an API-Only JWT-Powered Laravel App — SitePoint
https://www.sitepoint.com/how-to-build-an-api-only-jwt-powered-laravel-app/

認証にはJWT (JSON Web Token)を使っている。

JSON Web Tokens – jwt.io
https://jwt.io/

このサンプルが利用するモジュールは以下３つ。

GitHub – dingo/api: A RESTful API package for the Laravel and Lumen frameworks.
https://github.com/dingo/api

GitHub – tymondesigns/jwt-auth: JSON Web Token Authentication for Laravel & Lumen
https://github.com/tymondesigns/jwt-auth

GitHub – barryvdh/laravel-cors: Adds CORS (Cross-Origin Resource Sharing) headers support in your Laravel application
https://github.com/barryvdh/laravel-cors

途中段階のプロジェクトがGitHubにある。これをベースに記事を読みながらコードを追加すれば完成する。リポジトリはLaravel 5.4ベースだけど記事は少し古いバージョンのLaravelベースなので、コードを若干いじる必要あり。

GitHub – francescomalatesta/laravel-api-boilerplate-jwt: An API Boilerplate to create a ready-to-use REST API in seconds.
https://github.com/francescomalatesta/laravel-api-boilerplate-jwt

APIのテストにはPostmanが超便利。API開発には必須のツールだな。

Postman | Supercharge your API workflow
https://www.getpostman.com/

同じ作者によって、このAPIサーバーを使ったAngularJS製のフロントエンドのサンプルも公開されている。時間があるときに、こちらも勉強してみたい。

How to Consume Laravel API with AngularJS — SitePoint
https://www.sitepoint.com/how-to-consume-laravel-api-with-angularjs/

端くれプログラマの備忘録

日: 2017年6月20日

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

Node.jsのインストール

Nightwatch.jsのインストール

JDK 8のインストール

Seleniumのインストール

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

設定ファイルの作成

テストコードを書く

テストを実行

参考サイト

[Laravel] 認証にJWTを使ったAPIサーバーのサンプル