Gitlab CI で Nightwatch テストを実行する

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

概要

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

前提条件

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

設定ガイド

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

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

Gitlab CI アカウントにログインしたら、「新規プロジェクト」をクリックします。以下のオプションが表示されます。

Gitlab CI Project options

Github のリポジトリに対してパイプラインを実行したいので、「外部リポジトリの CI/CD を実行」をクリックします。

次の画面で、テストと package.json ファイルが存在する Github の URL を入力します。プロジェクト名や URL などのその他の詳細を入力し、下記のように`プロジェクトの作成`をクリックします。

Gitlab CI Github

これで、Gitlab CI プロジェクトの設定は完了です。

ステップ 2：nightwatch.conf.js ファイルの更新

chrome 環境の下にある google chrome オプションに`--no-sandbox`と`--disable-dev-shm-usage`引数を追加します。

chrome: {
    desiredCapabilities : {
    browserName : 'chrome',
    'goog:chromeOptions' : {
        // More info on Chromedriver: https://sites.google.com/a/chromium.org/chromedriver/
        //
        // w3c:false tells Chromedriver to run using the legacy JSONWire protocol (not required in Chrome 78)
        w3c: true,
        args: [
        '--no-sandbox',
        '--disable-dev-shm-usage'
        //'--ignore-certificate-errors',
        //'--allow-insecure-localhost',
        //'--headless'
        ]
    }
},

ステップ 3：.gitlab-ci.yml ファイルを更新し、コミットしてパイプラインを実行します

`CI/CD` -> `エディター`をクリックします。新しい gitlab-ci.yml ファイルを作成し、以下のファイルの内容をファイルにコピーします。

# This file is a template, and might need editing before it works on your project.
# You can copy and paste this template into a new `.gitlab-ci.yml` file.
# You should not add this template to an existing `.gitlab-ci.yml` file by using the `include:` keyword.
#
# To contribute improvements to CI/CD templates, please follow the Development guide at:
# https://docs.gitlab.com/ee/development/cicd/templates.html
# This specific template is located at:
# https://gitlab.com/gitlab-org/gitlab/-/blob/master/lib/gitlab/ci/templates/Nodejs.gitlab-ci.yml

# Official framework image. Look for the different tagged releases at:
# https://hub.docker.com/r/library/node/tags/
image: node:14.19.0

cache:
  paths:
    - node_modules/

test_async:
  before_script:
    - apt-get update -q -y
    - apt-get --yes install xvfb
  script:
    # Installing Google Chrome
    - curl -sS -L https://dl.google.com/linux/linux_signing_key.pub | apt-key add -
    - echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google.list
    - apt-get update -q -y
    - apt-get install -y google-chrome-stable
    # Installing chromedriver
    - npm install chromedriver

    # Installing Geckodriver
    - npm install geckodriver

    # installing all the packages
    - npm install 
    # Ensuring everything is installed
    - ./node_modules/.bin/chromedriver --version
    - ./node_modules/.bin/nightwatch --version
    - /usr/bin/google-chrome --version
    # Install display manager
    - Xvfb -ac :99 -screen 0 1280x1024x16 &
    - export DISPLAY=:99
    # Run nightwatch tests
    - npx nightwatch tests/ecosia.js --env chrome

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

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

  1. Chrome ブラウザをインストールしています。
  2. ChromeDriver をインストールしています。
  3. 次のステップでは、`Nightwatch`、ドライバパッケージ、その他の必要なパッケージを含む package.json のすべてのパッケージがインストールされます。
  4. バックグラウンドで `xvfb` をインストールして実行しています。
  5. セットアップが完了すると、パイプラインは `npx nightwatch <テストへのパス>` コマンドでテストを実行します。

ステップ 4：結果の表示

特定のパイプライン実行のシェルログで実行出力を確認できます。

Gitlab CI Results