[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のインストール

Node.js
https://nodejs.org/ja/

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

Nightwatch.jsのインストール

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)

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

Seleniumのインストール

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

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

実行する

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

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

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

設定ファイルの作成

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

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

テストコードを書く

テストを実行

参考サイト

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です