E2E テスト CodeceptJS を日本語対応した Docker 環境でサクッと動かす

この記事は Akerun Advent Calendar 2020 - Qiita の 8 日目の記事です。

こんにちわ。わたくしは 2020 年 10 月にできたての SRE チームに入社しました。

私の座席の目の前には QA チームの皆様がいらっしゃいます。

WEB ブラウザのポチポチの日々から解放すべく

E2E テスト自動化の CodeceptJS の導入に至りました。

github.com

そのような CodeceptJS の導入をしてみようという皆様のお役に立てますと幸いです。

さて困った

本家のリポジトリの Dockerfile で起動し CodeceptJS を実行するや否や、日本語対応していませんでした。

日本語のフォントなどを導入する必要がありそうです。

そこで、日本語に対応した Dockerfile を作りました。

https://github.com/Photosynth-inc/CodeceptJS

実行手順

以下をローカル環境で実行するとテストが実施できます。

HOME ディレクトリ以下の work 配下で実施します。

$ cd mkdir ~/work && cd work

Docker 環境を構築します。

$ git clone git@github.com:Photosynth-inc/CodeceptJS.git
$ cd CodeceptJS
$ docker build --no-cache  . -t codeceptjs 

設定ファイルを作成します。

$ mkdir ~/work/e2e && cd ~/work/e2e
$ vi codecept.conf.js
exports.config = {
  tests: './*_test.js',
  output: './output',
  helpers: {
    Nightmare: {
    }
  },
  plugins: {
    allure: {
       enabled: true
    },
    stepByStepReport: {
      enabled: true,
      deleteSuccessful: false,
      fullPageScreenshots: true,
    },
    retryFailedStep: {
       enabled: true
    },
  },
}

テストコードを作成します。

$ vi sample_test.js
Feature('サンプル');

Scenario('Akerun', ({ I }) => {
   I.amOnPage('https://connect.akerun.com/');
   I.click('利用規約');
   I.see('あいうえお');
});

テストコードを実行します（失敗例）

$ docker run -v $PWD:/tests codeceptjs codeceptjs run --steps
CodeceptJS v3.0.2
Using test root "/tests"

サンプル --
  Akerun
    I am on page "https://connect.akerun.com/"
    I click "利用規約"
    I see "あいうえお"
  ✖ FAILED in 9026ms

失敗すると outputs ディレクトリに失敗したスクリーンショット画像が保存されます。

おまけ

さらに、allure を利用すればもっと可視化され便利になります。

allure によるレポートを生成します。

$ docker run -v $PWD:/tests codeceptjs allure generate /tests/output --clean --output allure-report
Report successfully generated to allure-report

表示には WEB サーバが必要なので、ローカルで一時的に以下のようにサービスを立ち上げます。

$ cd allure-report/

$ sudo python -m SimpleHTTPServer 8000
Serving HTTP on 0.0.0.0 port 8000 ...

WEB ブラウザから http://localhost:8000 にアクセスすると以下のようなレポートを参照することができます。

いかがでしたでしょうか？

そんな、株式会社フォトシンスでは、一緒にプロダクトを成長させる様々なレイヤのエンジニアを募集しています。

hrmos.co

またお会いましょう。