Nightwatchで始めるE2Eテスト

はじめに

仕事で毎日お世話になっているE2Eテストフレームワーク、Nightwatch.jsについて、インストールからテストコードを書いてみるところまでを、さくっと紹介します。💁‍♂️

では、さっそく。

インストール

必要なものをインストールしていきます。
Nightwatch本体と、今回はChromeで試したいので、chromedriverを。

$ yarn add -D nightwatch chromedriver

デフォルトではプロジェクト直下のnightwatch.conf.jsを認識してくれますが、大規模プロジェクトでは環境に合わせて設定を変えたいので、以下のようにconfigsに置いておくと良いでしょう。

package.json

{
  "name": "test-nightwatch",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "e2e:test": "nightwatch -c e2e/configs/nightwatch.conf.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "chromedriver": "^78.0.1",
    "nightwatch": "^1.3.1"
  }
}

設定ファイル

ミニマムな設定はこんな感じで。
テスト中はブラウザが立ち上がって動作を見ることができますが、コーディング中や調べ物の最中に裏でテストを走らせておきたい、みたいな時はheadless指定を行うと良いです。

nightwatch.conf.js

module.exports = {
  src_folders: ['./e2e/tests'],

  webdriver: {
    start_process: true,
    port: 9515,
    server_path: require('chromedriver').path
  },

  test_settings: {
    default: {
      desiredCapabilities : {
        browserName : 'chrome',
        chromeOptions: {
          // args: ['headless']
        }
      }
    }
  }
};

テストコード

検索サービスへ飛んで、フォームに検索文字を入力し、出てきた結果から、該当のものをクリックして移動する、という簡単なテスト。

demo.test.js

module.exports = {
  'E2E Demo': (browser) => {
    const textToSearch = 'Nightwatch.js | Node.js powered End-to-End testing framework';
    browser
      .url('https://www.ecosia.org')
      .waitForElementVisible('input[type="search"]')
      .setValue('input[type="search"]', 'nightwatch')
      .click('button[type="submit"]')
      .assert.urlContains('/search')
      .waitForElementVisible('.results')
      .click('xpath', `//a[contains(text(), "${textToSearch}")]`)
      .end();
  }
};

結果

開発や運用が進むと、UIフローが変わったりしますが、ページ移動を含む一連の動作をテスト出来るので、安心して開発に取り組めます。

結果ログもこの通り。
自動で動作テストしてくれるのは、本当に楽ちんですね🤖