CodeceptJS+DockerでWebアプリのテストを自動化する

Sep 13, 2020 14:00 · 1072 words · 3 minute read CodeceptJS Docker

WSL2の登場により、WindowsでもDockerが使いやすくなりました。

WSL 2 について(docs.microsoft.com)

ということで、ローカルで実行していたCodeceptJSをDockerに移行してみました。

移行前の記事はこちら。
CodeceptJS + PuppeteerでWebアプリの動作テストを自動化した

目次

使うもの

  • Docker
  • CodeceptJS
  • NightmareJS

実行環境に合わせたDockerをインストールしておきます。

Get Docker

必要なファイルを配置する

Codeceptjsの実行に必要なファイルを配置します。

  • steps_file.js
  • codecept.conf.js
  • puppeteer-sample_test.js

3ファイルをテスト実行用のディレクトリに配置します。 これらのファイルは、下記の記事で作成したのと同じものです。

CodeceptJS + PuppeteerでWebアプリの動作テストを自動化した

ファイルはこちらにも公開しています。

kapiecii/puppeteer-sample(GitHub)

Docker用に設定を書き換える

上記記事の「codecept.conf.js」は、PuppeteerでChromeを実行する設定になっています。Dockerで実行する場合はこのままでは動かないので、設定を変更します。

今回使うCodeceptjsのコンテナにはNightmareの実行環境が用意されているので、Nightmare用の設定に書き換えます。今回は使いませんでしたが、Selenium Standalone Containerと接続することで、Seleniumでテストを実行することもできるようです。

NightmareJSとは?

CodeceptJsのコンテナ codeception/codeceptjs (dockerhub)

変更前

exports.config = {
  tests: './*_test.js',
  output: './output',
  helpers: {
    Puppeteer: {
      url: 'http://localhost:8000/', 
      show: true, 
    }
  },
  include: {
    I: './steps_file.js'
  },
  bootstrap: null,
  mocha: {},
  name: 'puppeteer-sample'
}

変更後

exports.config = {
  tests: './*_test.js',
  output: './output',
  helpers: {
    Nightmare: {
      url: 'http://localhost:8000/',  
      switches: {
        'ignore-certificate-errors': true
      },
      show: false,
      restart: false
    },
  },
  include: {
    I: './steps_file.js'
  },
  bootstrap: null,
  mocha: {},
  name: 'puppeteer-sample'
}

下記の設定は、NightmareでSSLエラーを無視する設定です。
今回はテスト用のlocalhostにhttpでアクセスしているので本来この設定は不要ですが、実際のテスト実行時には必要になる可能性が高いので記載しています。

      switches: {
        'ignore-certificate-errors': true
      },

実行

テストを実行します。

$ docker run --net=host -v $PWD:/tests codeception/codeceptjs codeceptjs run --steps 

実行すると「output」というディレクトリが作成され、テストの実行結果が保存されます。

最後に

WSL2の登場により、WindowsでもDockerを使いやすくなりました。
これまでは、「Dockerを使う前提にすると、Windowsを使ってる人が使いにくいからやめとくか。。。」という理由であまり使ってきませんでしたが、これからはもっと積極的にDockerを使っていこうと思います。

参照

Codeceptjsの公式ドキュメント
Codeceptjs Docker

tweet Share