はじめに
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。
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イメージからコンテナを起動した後に、テストを実行するようになっています。
# 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
実行すると、通常と同様にテスト結果が表示されます。
