Dockerを使ってTestCafeを動かす #testcafe

はじめに

Dockerを使ってTestCafe（TypeScriptで記述）を動かします。TestCafeのDockerイメージに含まれているChromium, FireFoxを使った簡易な方法です。

クロスブラウザテストや、docker-composeを使って複数のコンテナを構築、といった内容は含まれませんのでご容赦ください。

使用するツール

Docker、Node.jsはインストール済のものとします。

Windows 10 Pro
Docker
Node.js
TestCafe
TypeScript

ディレクトリ構成

大まかにこんな感じ。

.
└── testcafe
    ├── Dockerfile
    ├── .testcaferc.json
    ├── package.json
    ├── node_modules
    ├── datadriven     # データ駆動テスト用のデータ
    ├── pages          # ページモジュール
    └── features       # テストスクリプト（.ts）

手順

１．TestCafeとTypeScriptをインストール
２．テストスクリプトを用意
３．TestCafeのDockerイメージをpull
４．Dockerイメージからコンテナを作成・実行
５．（おまけ）Dockerfileを書いてTestCafeを動かす

TestCafeとTypeScriptをインストール

今回はnpmを使いました。ローカルインストールするために--save-devのオプションを付けています。

npm install --save-dev testcafe

npm install --save-dev typescript

テストスクリプトを用意

TestCafeサンプルサイトのh1要素のテキストを確認する簡易なもの。
ローカルだとnpx testcafe chrome .\features\test.ts等で実行できます。ローカルインストールとグローバルインストールのコマンド詳細はInstall TestCafe。

test.ts

import { Selector } from 'testcafe';

fixture('TestCafe tutorials')
    .page('https://devexpress.github.io/testcafe/example/');

test('h1 text is Example', async (t) => {
    const h1 = Selector('h1');
    await t.expect(h1.innerText).eql('Example');
});

TestCafeのDockerイメージをpull

TestCafeのDockerイメージをpullします。

docker pull testcafe/testcafe

Dockerイメージからコンテナを作成・実行

TestCafeのDockerイメージには、ChromiumとFirefoxがインストールされているのでこれを使います。それ以外のブラウザを使う場合は別途インストールが必要です。

docker run -v ${TEST_FOLDER}:/tests -it testcafe/testcafe ${TESTCAFE_ARGS}

パラメタ

-v ${TEST_FOLDER}:/tests
- ホスト側のTEST_FOLDERをコンテナ内の/testsディレクトリにマウントします
-it testcafe/testcafe
- インタラクティブモードでTestCafeを実行します
${TESTCAFE_ARGS}
- testcafeコマンドに渡す引数
- TestCafeのCommand Line Interfaceが使えます

この時、テストに必要なファイル（Pageモジュール、Node.jsモジュール等）はホストディレクトリかそのサブディレクトリに配置します。それ以外に配置すると、コンテナからアクセスできません。

実際のコマンドはこんな感じ。testcafeディレクトリまでcdで移動して実行。実行後にコンテナを削除したいので--rmを追加しています。

docker run -v ${PWD}:/tests -it --rm testcafe/testcafe chromium /tests/features/test.ts

実行結果はこんな感じ。

FireFoxでも動きます。

Dockerfileを書いてTestCafeを動かす

先ほどと同様に、TestCafeのDockerイメージを使います。各行の詳細は以下に書きますが、Dockerイメージからコンテナを起動した後に、テストを実行するようになっています。

Dockerfile

# testcafeイメージを取得し、ベースイメージとする
FROM testcafe/testcafe

# Dockerコンテナ内に作業用フォルダを作成する
WORKDIR /tests

# ローカルのtestcafeディレクトリ下をDockerコンテナ内の作業フォルダ直下にコピー
COPY ./ /tests

# テストを実行
CMD ["chromium", "/tests/features/test.ts"]

Dockerfileを使ってDockerイメージをビルドします。適当に名前とタグを付けました。

docker build ./ -t testcafe/testcafe:1.0

実行するとステータスが流れます。

> docker build ./ -t testcafe/testcafe:1.0
[+] Building 43.0s (8/8) FINISHED
 => [internal] load build definition from Dockerfile                              0.0s 
 => => transferring dockerfile: 549B                                              0.0s 
...略

Dockerイメージが生成されていることを確認しておきます。

docker image ls

Dockerイメージを指定して、コンテナを起動。ここでも使い捨てるために--rmを付けています。

docker run --rm testcafe/testcafe:1.0

実行すると、通常と同様にテスト結果が表示されます。

Dockerを使ってTestCafeを動かす