CircleCIは、テストやビルドを効率的に実施し、設定コードを定義できるようにするために幾つかのDocker ImageやOrbを提供しています。ただ、調べてみると、E2Eテストツールによってどのイメージを使うのが最適かが異なる様子でした。

今回はDockerイメージの選定法について、E2Eテスト、特にSeleniumやPlaywrightなどでのテストに絞って調べてまとめました。必要なツールが設定され、不要なツールは除外されているイメージを選択することで、E2Eテストの実行時間をより短くできます。このポイントを押さえて、開発におけるフィードバックサイクルを高速化させましょう。

TL;DR: Selenium系を使うときだけ、-browsers系イメージを利用する

CircleCIは公式に幾つかの Docker イメージを提供しています。そしてその中には、Selenium系のツールが追加されたイメージも用意されています。このタイプのイメージを利用する場合、cim/node:lts-browsersのように、言語のバージョンを指定するDockerイメージのタグに-browsersを追加するようにしましょう。

Playwrightを利用する場合は、Microsoftが提供する公式イメージを利用することをお勧めします。

CircleCI が提供するDockerイメージについてざっくりおさらい

ここからはDockerイメージの特性について、ドキュメントなどをもとに調べていきましょう。

cimg/node:lts と cimg/node:lts-browsers の違い

CircleCI が提供するイメージ（ Convenience Image ）には、通常版と -browsers バリアントが存在します。CircleCI 公式のリポジトリの、例えば cimg-nodeの README をチェックすると、その違いを以下のように説明しています。

The browsers variant is the same Node.js image but with Java, Selenium, and browser dependencies pre-installed via apt. [^1]

-browsers バリアントには Java(Selenium の実行に必要)、Selenium Server、そしてブラウザ実行に必要なシステム依存パッケージ群がプリインストールされている様子です。ここで注目したいことは、ブラウザ本体(Chrome, Firefox)は含まれていないことです。ブラウザ本体のインストールなどは、次に紹介する Orb を利用して実行します。

circleci/browser-tools orb の役割

Chrome、Firefox、ChromeDriver、GeckoDriver などのブラウザ本体とドライバのインストールは、browser-tools orb を利用します。このOrbと-browserイメージは併用が前提とされています。ドキュメントにも以下のように記載されていました。

Install Chrome, Chrome for Testing, ChromeDriver, Edge, Firefox and geckodriver quickly and easily in your CI environment on CircleCI with the browser-tools orb. This orb is meant to pair with the ‘browser’ variants of convenience images. The convenience images have preinstalled dependencies for the browsers and contain Java and Selenium pre-installed.

https://github.com/CircleCI-Public/browser-tools-orb

CircleCI Developer Hub の cimg/node ドキュメントでも同様の説明があります。

The browsers variant is designed to work in conjunction with the CircleCI Browser Tools orb. You can use the orb to install a version of Google Chrome and/or Firefox into your build. The image contains all of the supporting tools needed to use both the browser and its driver. [^3]

https://circleci.com/developer/images/image/cimg/node

Selenium/WebDriver 向けの構成例

この2つをくみあわせたconfig.ymlの例を見てみましょう。

orbs:
  browser-tools: circleci/browser-tools@1.4

jobs:
  e2e_test:
    docker:
      - image: cimg/node:lts-browsers
    steps:
      - checkout
      - browser-tools/install-chrome
      - browser-tools/install-chromedriver
      - run: npm ci
      - run: npm run test:e2e

この構成では、cimg/node:lts-browsers が Java、Selenium、システム依存パッケージを提供しています。そして Chrome 本体と ChromeDriver についてはbrowser-tools orb がインストールステップなどを提供します。

Playwright を使う場合は、Microsoftのイメージを利用する

CircleCIが提供する-browser系イメージはSeleniumなどを実行するためのツールをインストールし、Orbはブラウザやドライバをインストールします。

ではPlaywrightの場合はどうでしょうか？

Playwright は独自のブラウザ管理機構を持っています。公式ドキュメントも以下のように記載されており、ブラウザのインストールなどもPlaywright側で実行できるようになっています。

3 steps to get your tests running on CI:

1. Ensure CI agent can run browsers: Use our Docker image in Linux agents or install your dependencies using the CLI.
2. Install Playwright:

   npm ci
   npx playwright install --with-deps

3. Run your tests

https://playwright.dev/docs/ci

Playwrightが提供するコマンドでインストールが完了するため、上記のOrbは不要となります。同時にCircleCIが提供する -browser系 Docker イメージも、Playwrightが利用するツールとは異なるために不要といえます。実際、Playwright 公式ドキュメントをチェックすると、CircleCI での実行においても Playwright 公式 Docker イメージの使用を推奨しています。

Running Playwright on CircleCI is very similar to running on GitHub Actions. In order to specify the pre-built Playwright Docker image, simply modify the agent definition with docker: in your config like so:

executors:
  pw-noble-development:
    docker:
      - image: mcr.microsoft.com/playwright:v1.56.1-noble

https://playwright.dev/docs/ci

よって少し直感的ではないかもしれませんが、Playwright系のE2Eテストを実行する場合においては、CircleCIが提供する-browser系イメージやOrbなどを利用しないほうが、コスト・パフォーマンス両方において効率的なパイプライン構成となります。

PlaywrightによるE2EテストをCircleCIで実行する例

では、ここでPlaywrightを利用したE2Eテストを実行する際の設定例を見てみましょう。

version: 2.1

orbs:
  node: circleci/node@5

jobs:
  e2e_test:
    docker:
      - image: mcr.microsoft.com/playwright:v1.57.0-noble
    environment:
      CI: true
    steps:
      - checkout
      - node/install-packages:
          pkg-manager: npm
      - run:
          name: Run E2E tests
          command: npm run test:e2e
      - store_test_results:
          path: test-results
      - store_artifacts:
          path: playwright-report

workflows:
  test:
    jobs:
      - e2e_test

circleci/node Orbを使うことで、package.jsonに設定したライブラリのインストールやキャッシュ処理などを効率化しています。同時にMicrosoftが提供するPlaywrightイメージを活用して、E2Eテストのセットアップについても効率化しました。

まとめ

CircleCI で E2E テスト環境を構築する際は、使用するテストツールに応じて適切な Docker イメージを選択することが重要です。

Selenium/WebDriver の場合は、CircleCI 公式の -browsers バリアントと browser-tools orb の組み合わせが推奨されます。一方、Playwright を使用する場合は、Playwright 公式イメージを選択すべきでしょう。

参考文献

• https://github.com/CircleCI-Public/cimg-node
• https://github.com/CircleCI-Public/browser-tools-orb
• https://circleci.com/developer/images/image/cimg/node
• https://playwright.dev/docs/ci
• https://playwright.dev/docs/docker