CircleCI での Nightwatch テストの実行

この記事では、CircleCI で Nightwatch テストを作成して実行する方法について説明します。

概要

CircleCI は、自動化されたテストパイプラインの作成に使用できる CI/CD プラットフォームです。CircleCI は、同じインスタンス上、または BrowserStack や Sauce Labs などのクラウドサービスプロバイダー上でテストを実行するために使用できます。

前提条件

  • CircleCI アカウント
  • Git にアップロードされた Nightwatch プロジェクト

設定ガイド

ここでは、デモとして nightwatch-examples リポジトリを使用します。それでは、以下の手順に従って CI を設定しましょう。

ステップ1：CircleCI プロジェクトの設定

CircleCI アカウントを Github に接続し、左側のメニューで「プロジェクト」をクリックすると、Github のリポジトリ一覧が表示されます。

テストリポジトリの横にある「プロジェクトの設定」をクリックします。

config.yml ダイアログが開いたら、下記のように「編集できる config.yml テンプレートに移動」オプションを選択します。

CircleCI config file

次の画面で、リストからNodeを選択します。

ステップ2：config.yml ファイルの更新、コミット、パイプラインの実行

編集可能な config.yml ファイルが表示されます。下記のファイル内容をファイルにコピーします。

# This config is equivalent to both the '.circleci/extended/orb-free.yml' and the base '.circleci/config.yml'
version: 2.1

# Orbs are reusable packages of CircleCI configuration that you may share across projects, enabling you to create encapsulated, parameterized commands, jobs, and executors that can be used across multiple projects.
# See: https://circleci.com/docs/2.0/orb-intro/
orbs:
  node: circleci/node@4.7
  browser-tools: circleci/browser-tools@1.1.0
jobs:
  test:
    docker:
      - image: cimg/node:lts-browsers
    steps:
      - checkout
      - browser-tools/install-browser-tools
      - node/install-packages
      - run:
          command: npm run test
      - store_test_results:
          path: /tests_output
workflows:
  e2e-test:
    jobs:
      - test

config.yml ファイルをコピーしたら、「コミットして実行」を押します。

設定ファイルの重要な点を理解してみましょう：

  1. Nightwatch の設定に必要な Node と Browser tools の 2 つの orb を使用しています。
  2. ブラウザがプリインストールされている Docker イメージを使用しています。
  3. ステップでは、ブランチのチェックアウト後にブラウザーツールをインストールしています。
  4. 次のステップでは、Nightwatch、ドライバパッケージ、その他の必要なパッケージを含む package.json のすべてのパッケージがインストールされます。
  5. セットアップが完了すると、パイプラインがテストをトリガーします。

ステップ3：結果の確認

実行したばかりのパイプラインビルドをクリックし、ジョブ名（つまりtest）を選択します。「ステップ」タブでnpm run testステップを参照して、テスト出力を確認します。

Circle CI Results