Skip to content

Nightmareを使ったブラウザ自動テスト実装のコツ3つ

Nightmareの使い方と実装のコツを紹介します。

PhantomJSとの比較

ブラウザテストの自動化という目的では、よくPhantomJSの名前があがります。

PhantomJSはUIを持たないWebKitベースのブラウザで、ドキュメントも多く手軽に導入できるので、私もテスト目的でしばらく採用していました。

しかし少々不便なところもあり、たとえばPromiseやAsync/Awaitが実装されていないので、順番に遷移しながらページを確認するテストを書きたいときに思うように実装できずもどかしい思いをすることがありました。

そこで、Node.jsの文法で書けるようなブラウザ自動化ライブラリを探していたところNightmareを見つけ、実際に使ってみましたので使いかたを紹介させてもらいます。

導入方法

GitHubに詳細が載っています。

公式:http://www.nightmarejs.org/

GitHub:https://github.com/segmentio/nightmare#api

導入は簡単です。

必要に応じて –save, –save-devなどのオプションを指定してください。

実装例

GitHubにもExampleが載っていますので、まずはそちらをお試しください。

基本形

GitHubのExampleでは使われていませんが、ブラウザ操作というのは非同期で行われるものなので、基本的にPromiseを使いながら実装していくとよいです。

例えば、GitHubのExampleをPromiseでラップすると次のようになります。

このとき、Promiseを返す関数の外でNightmareインスタンスを作成するのがコツです。

ページ遷移を含む場合

続いて、ページを評価しながら遷移するような実装を紹介します。

まず、ページの評価にはevaluateメソッドを使います。

evaluateメソッドを使うことで、Nightmareで表示したページ内でJavaScriptを動作させ、Node.jsのプログラム側へ値を渡すことができます。

このとき、渡された値は続くthenメソッドの引数から参照できるのですが、thenやcatchの先にはtypeやclickなどのメソッドをチェーンでつなげることができません。

そのため、ページの中身を評価したあとでクリックイベントを発行してページ遷移するような実装をするためには、次のように実装する必要があります。

Nightmareインスタンスには、一度作成されるとendメソッドを呼ぶまでそのブラウザを参照し続けるという特徴があるので、それを利用します。

ログインが必要なページを含む場合

続いて、ログインが必要なページに対する実装方法を紹介します。

ログインの仕組みにもよりますが、クッキーを使った一般的なサイトであれば、次のような流れで実装できます。

  1. Nightmareで一度ログインページにアクセスし、実際にログイン
  2. ログイン後、ブラウザのクッキーを取得し、Nightmareを閉じる
  3. クッキーをプログラム側で保持
  4. テスト用のNightmareインスタンスを新しく作成し、保持しているクッキーをセット
  5. ログインが必要なページにアクセス

一度取得したクッキーを保持しておくことで、それ以降使いまわすことができるようになります。

ただ、cookies.setメソッドはページを開いた後でないとクッキーを設定することができないので、一度アクセスしたいページをgotoで開き、クッキーをセットしてから改めてそのページを開きなおすように実装します。

以上、実際にNightmareを使ってみて感じた実装上のポイントでした。

これらの仕組みをクラス化しておくと使いやすくて便利です。

Comments are closed.