初めてのE2E テスト( nightmare )でハマったことと解決策

この記事は Willgate Advent Calendar 2018 - Qiita の23日目の記事です。素で忘れていたため、2日遅れの記事となってしまいました…反省ですね。

皆さんは普段から E2E テスト書いていますか？ 僕は、業務で初めて nightmare を使った E2E テストを書きました。

今後 E2E テストを書く上で忘れないよう、ハマったことと解決策をいくつかピックアップして書きます！

なお、今回のE2E テストというのは Web ブラウザの E2E テストを指すものとします。

「 input type="date" で上手く日付を入力できない」

.type("input[name='date']", "2018/12/25") を入力すると…

年が6桁まで入力され、"201812/02/05"という入力になってしまいました。

input type="date" は約 27 万年まで入力することができる

input type="date" は、約 27 万年まで入力することができます。

何故そうなるかは、こちらのサイトに詳しく書いてあります。 unarist.hatenablog.com

Date 型の最大値が約 27 万なので、約 27 万年まで入力できてしまうということですね。

max="9999-12-31" を 指定する

解決策も上記の参考サイトに書いてありました。

max="9999-12-31" を 指定することによって、年が 4 桁までしか入力できなくなり nightmare でもスムーズに入力できるようになります。

E2E テストでなくても、年を 6 桁で使用することは通常ないと思いますので max 属性の指定をお勧めします。

「window.confirm() が表示されない」

js で window.confirm() によるダイアログの確認はよく使用されているかと思いますが、nightmare のテスト中では window.confirm() が表示されません。

デフォルトで表示できないようになっている

Nightmare の Readme に、こんな一文が書いてあります。

Nightmare disables window.confirm from popping up by default, (略)

github.com

そもそもデフォルトでは、表示できないようになっているんですね。

デフォルトというからには、どこか設定を変えれば表示されるのでしょうか？（残念ながら、僕は見つけることができませんでした）

window.confirm() の処理を書き換える js ファイルを読み込む

今回の場合は .inject() を使用して、window.confirm() のダイアログで OK を押したように振る舞うメソッドを用意しました。以下は使用例です。

// hoge.js
clickSubmit = () => {
    var url = 'https://hoge.com/huga/create';
    $('.piyo-form').attr('action', url);
    $('.piyo-form').submit();
}

// (略)
.inject('js', 'hoge.js')
.click('.submit-btn') 
.evaluate(() => {
    clickSubmit();
    return true;
})
// (略)

.inject() を使うと、テスト中限定で css や js ファイルを読み込むことができます。

今回は window.confirm() の話でしたが、window.alert() や window.prompt() でも同じ方法で対処することができます。

E2E テストで悩んでいることを、E2E テストツール単体で全て解決する必要はない

今回対処した方法は、max 属性の設定だったり、メソッドの追加だったり…。

nightmare を使った tips というよりは、Web ブラウザでの E2E テスト全般の tips というような感じになったと感じます。

今後も E2E テストで悩むことがあったら、nightmare を使った解決策だけに限らず、広い視野で解決策を探りたいと思います。