きり丸の技術日記

技術検証したり、資格等をここに残していきます。

トップ > E2E > Node.jsで記述されたPlaywrightの実行環境をDockerで用意する

Node.jsで記述されたPlaywrightの実行環境をDockerで用意する

E2E テスト 技術 Playwright

職場でE2EツールとしてPlaywrightを使用しており、ソースコードをPythonで書いています。そのときのPlaywrightの環境構築手順はこちら。

ただ、Playwright単体はどの言語で書かれても問題ないものの、どうしてもテストライブラリ等のエコシステムは言語により得意不得意があります。フロントエンドはNode.jsで書かれることが多いのか、Playwrightの公式に記載されているテストの書き方はNode.jsが一番充足しています。

作りこめばどの言語でも同じことはできるとは分かっているものの、環境構築に勉強のコストを掛けたくないので、Node.jsで学ぶことにしました。

今回の記事では、Node.jsが動くPlaywrightのDocker環境を用意します。

環境

  • Node.js
    • v14.17.6
  • Playwright
    • 1.14.1
  • GitHub Codespaces
    • 2021/09/20時点

ゴール

  • Playwrightの実行環境をDockerで用意する
  • Node.jsで作成したシナリオを実行する
  • VS Codeの.devcontainerが動くようにする

書かないこと

  • GitHub Codespacesの使い方

手順

VS Codeのdevcontainerで動かす下準備をする

.devcontainerディレクトリを作成します。

.devcontainerディレクトリの配下に、devcontainer.jsonを作成します。

devcontainer.jsonに次の記述を追加して、指定のDockerfileを使用するようにします。

{
  "build": { "dockerfile": "Dockerfile" },
}

Dockerfileを準備する

.devcontainerディレクトリの配下にDockerfileを作成します。

WebDriver等が入っているDockerイメージをMicrosoftから提供されているので利用します。Node.jsで動く状態ではありません。

ですので、Dockerfile内でNode.jsを環境構築する必要があります。

ベースにMicrosoftから提供されているPlaywrightのDockerイメージのFROM mcr.microsoft.com/playwright:focalを使用します。次に、ベースにnpmをインストールします。現状のLTSは12, 14ですので、14に合わせています。環境構築時の最新のバージョンを指定するようにしてください。

なお、ホームディレクトリの修正やマウント設定等が面倒なため、DockerfileではPlaywrightをNode.jsで動かすためのパッケージはインストールしません。

FROM mcr.microsoft.com/playwright:focal
RUN apt-get -y update
RUN apt-get install -y \
    curl \
    gnupg
# 最新のLTSを確認すること
RUN curl -sL https://deb.nodesource.com/setup_14.x | bash -
RUN apt-get install -y nodejs
RUN npm install npm@latest -g

DevContainerを再起動する

GitHub Codepacesで上の作業をしていない場合はスキップしてください。

DevContainerで使用するDockerfileを変更しているため、コンテナをリビルドする必要があります。

Ctrl + Shift + P（または、Shift + Command + P）でヘッダに入力欄が表示されるので、Codespaces: Rebuild Containerを実行します。

Node.jsでPlaywrightを動かすパッケージをインストールする

次のコマンドを実行することで、Node.jsでPlaywrightを動かすパッケージをインストールします。

コマンドを実行したディレクトリでしか実行できませんので注意してください。

npm install -D @playwright/test
npx playwright install

シナリオを準備する

あとは、Playwrightの標準的な使い方になります。

testディレクトリを作成し、sample.spec.tsファイルを作成します。中身はチュートリアルと同じです。

import { test, expect } from '@playwright/test';

test('basic test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  const title = page.locator('.navbar__inner .navbar__title');
  await expect(title).toHaveText('Playwright');
});

実行する

npx playwright testを実行すると、testsディレクトリのテストコードが実行されます。

ここで動作しない場合は何か問題が発生していますので、再度やり直してください。

ソースコード

終わりに

Pythonで作りこんでいましたが、スナップショットテスト等が面倒で結局Node.jsで作りこむことにしました。

正直、Pythonの場合はpipするだけで簡単に構築できたのですが、Node.jsがベースではないイメージでNode.jsを動かそうとすると面倒でした。ほかにも、Dockerfileでnpm installをしようとするとTracker "idealTree" already existsが発生してしまうので、回避したらセットアップが余計に面倒になったのでやめました。

本来であればすべての環境構築をDockerfileに詰め込んで、起動時にマウント設定等を行った方がいいですが、DevContainerの仕様がよく分からなかったので現状はこのように運用しています。

ぜひ、こちらで使ってみてください。

参考情報

類似記事