PlaywrightとDockerを使用したエンドツーエンドのテストの実行方法を教えてください。

著者は、寄付の一環として『Open Sourcing Mental Illness』を寄付先に選びました。

はじめに

Playwrightは、Chromium、Firefox、Webkitを含むさまざまなブラウザでのエンドツーエンドのテストにおいて、優れたツールです。WebkitはSafariブラウザの中核であるため、Playwrightのクロスブラウザの機能は、ウェブアプリのテストにおいて良い選択肢となります。Playwrightには、ブラウザとの自動的な対話をサポートする機能があり、ウェブドライバを手動でインストールする必要はありません。また、Java、Python、NodeJSなど複数のプログラミング言語をサポートしています。Playwrightの柔軟性は、ソフトウェアが要件を満たしているかを確認するためのウェブスクレイピングツールやエンドツーエンドのテストにも利用することができます。

Playwrightを実行するには、NodeJSランタイムやPlaywrightコアフレームワーク、Playwrightテストランナーなど、適切な環境が必要です。お使いのオペレーティングシステムによっては、Playwrightをサポートするための依存関係が必要な場合があります。Dockerはオープンソースのコンテナ化プラットフォームであり、異なるオペレーティングシステム用の複数の環境を作成する必要がなく、Playwright環境を提供することができます。

このチュートリアルでは、エンドツーエンドテストにPlaywrightとTypeScriptを使用するための環境をセットアップし、テストを作成して実行し、複数の形式でテストレポートをエクスポートし、Dockerを使用してテストを展開します。チュートリアルの最後までには、Playwrightを使用して自動化テストを行い、Dockerでテスト環境をラッピングして既存のCI/CDパイプラインにテストを統合することができるようになります。

前提条件

このチュートリアルに従うためには、以下が必要です。

• One Ubuntu 20.04 server with a sudo-enabled account set up by following the Ubuntu 20.04 initial server setup guide. You need a sudo-enabled account to install NodeJS and Docker on your server.
• Node.js set up on your server. If you are on Ubuntu 22.04, install the latest version of Node.js in How To Install Node.js on Ubuntu 20.04. For other operating systems, see the How to Install Node.js and Create a Local Development Environment series.
• Docker installed on your server, which you can set up by following Steps 1-4 in How To Install and Use Docker on Ubuntu 20.04. In Step 4, you will run docker run hello-world to ensure that Docker is properly installed and ready to use.
• Familiarity with end-to-end testing for web applications.
• Familiarity with Typescript for writing the test. If you would like to learn more about TypeScript, you can review the How To Code in TypeScript tutorial series.
• (Optional) Visual Studio Code, which has robust features support such as code navigation and compiler error warning when working in Typescript. This tutorial uses nano throughout.

ステップ1 – 環境の準備

エンドツーエンドテストを実装する前に、Playwrightのプロジェクト環境を準備する必要があります。

最初に、このプロジェクト用のフォルダを作成してください。

1. mkdir playwright-with-docker

 

新しいフォルダに移動してください。

1. cd playwright-with-docker

 

新しいノードの環境を初期化してください。

1. npm init

 

新しいプロジェクトに関する情報を入力するように促されます。プロジェクト名やバージョン、アプリケーションの設定、テストのコマンドなどが必要です。

新しいプロジェクトに関連する以下のプロンプトに対する回答を入力するように求められます。

package name: (playwright-docker) version: (1.0.0) description: entry point: (index.js) test command: git repository: keywords: author: license: (ISC)

このような結果を見ることができます。

This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help init` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterward to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (test) playwright-docker version: (1.0.0) description: A project for using playwright for end-to-end testing purpose with docker for deployment entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to /your-path/test/package.json: { “name”: “playwright-docker”, “version”: “1.0.0”, “description”: “A project for using playwright for end-to-end testing purpose with docker for deployment”, “main”: “index.js”, “scripts”: { “test”: “echo \”Error: no test specified\” && exit 1″ }, “author”: “license”: “ISC” } Is this OK? (yes) yes

必要な情報を追加した後、はいと入力するかEnterを押して、package.jsonファイルのセットアップを確認してください。

次に、プロジェクトに必要な依存関係をインストールしてください。 (Tsugini, purojekuto ni hitsuyō na izonkankei o insutōru shite kudasai.)

1. npm install –save-dev playwright
2. npm install –save-dev typescript

 

これらのコマンドは、サンプルプロジェクト内にPlaywrightとTypeScriptをインストールします。–save-devフラグは、アプリケーションの実行に必須ではない依存関係をインストールするために使用されます。

次に、Node.JSのタイプ定義をインストールしてください。

1. npm install –save-dev @types/node

 

次に、設定ファイルのTOMLを扱うライブラリをインストールしてください。

1. npm install –save-dev toml

 

TOMLは、アプリケーションの設定に使用されるファイルタイプの一つです。.tomlファイルは人が読める形式であり、アプリケーションは内容を最初に読まなくても更新することができます。

次に、ホストシステムのためにPlaywrightの依存関係をインストールしてください。

1. npx playwright install-deps

 

指示が表示されたら、sudoのパスワードを入力してください。

この後のチュートリアルの手順で使用するために、Playwrightのテストランナーをインストールしてください。

1. npm install –save-dev @playwright/test

 

最後に、Playwrightのサポートされているブラウザをインストールしてください。

1. npx playwright install

 

このコマンドを使用すると、複数のブラウザでテストを実行することができます。

TypeScriptの設定ファイルを準備するために、nanoやお好みのテキストエディターでtsconfig.jsonを開いてください。

1. sudo nano tsconfig.json

 

現在のファイルは空です。このプロジェクトに更新するために、以下のコードを追加してください。

{
  "compilerOptions": {
    "strict": true,
    "module": "commonjs"
  },
  "include": ["tests"]
}

tsconfig.jsonファイルは、NodeJSランタイムに現在のディレクトリがTypescriptプロジェクトであることを伝えます。compilerOptionsは、プロジェクトをコンパイルするためにNodeJSが必要とする条件の一覧です。moduleは、ファイルをJavascriptにコンパイルする際にコンパイラに使用するモジュール構文を指定します。strictフィールドは、Typescriptコードの型チェックを有効にし、変数やメソッドのデータ値と型が一致することを保証します。includeは、アプリケーションに含まれるファイルのリストまたはパターンを表示します。この場合、アプリケーションはtestsディレクトリ内のすべてのファイルを含める必要があります。

作業が終わったら、ファイルを保存して閉じてください。

環境が整ったら、テストの作成を始めることができます。

ステップ2：テストの作成

最初のステップで準備したPlaywrightのテスト環境を使用して、Silicon Cloud vServersのページに関連する３つのテスト例を作成します。

作成するTypeScriptのテストは、以下の3つの項目を検証します。

• Verify three options for signing up for new Silicon Cloud accounts: Sign up with Email, Sign up with Google, Sign up with Github.
• Verify that Silicon Cloud supports two types of packages: Basic and Premium.
• Verify that there are four basic virtual machine costs: 1 CPU, 2 CPUs, 4 CPUs, 8 CPUs.

同じテストファイルに3つのテストを含めることもできますが、このチュートリアルでは、それぞれのテストが異なる目的を果たすため、3つの別々のファイルを使用します。

テストファイルをすべて保持するために、新しいディレクトリを “tests” という名前で作成してください。

mkdir tests

テストディレクトリに移動してください。

cd tests

このステップでは、異なる目的のために3つのテストを実行する予定ですので、プロジェクト内のtestsディレクトリにそれぞれのテストファイルを作成します。

• signUpMethods.spec.ts will implement the test for verifying the number of supported methods for users to sign up.
• multiplePackages.spec.ts will implement the test to verify the number of packages customers can choose.
• pricingComparison.spec.ts will verify the number of basic virtual machine costs.

テストの設定ファイルはconfigTypes.tsという名前であり、またテストディレクトリにも配置されます。このファイルでは、複数のブラウザとそのページとの対話のためのグローバル変数や、テストで使用されるいくつかの設定値（例：テスト対象アプリのURL）を定義します。このチュートリアルでは、テスト対象のURLにDIGITAL_OCEAN_URLを使用します。

configTypes.tsを作成してください。

1. nano configTypes.ts

 

現在空のconfigTypes.tsファイルに、次のコードを追加してください。

import { Browser, Page } from "playwright";

import fs from 'fs';
import toml from 'toml';
const config = toml.parse(fs.readFileSync('./config.toml', 'utf-8'));

declare global {
  const page: Page;
  const browser: Browser;
  const browserName: string;
}

export default {
  DIGITAL_OCEAN_URL: config.digital_ocean_url ?? '',
  };

最初に、インポートの機能はプロジェクトのホームディレクトリにある./config.tomlから設定内容を読み込みます。

最終的なエンドツーエンドテストにおいて、ページとブラウザのインスタンスを初期化するために、ページ、ブラウザ、ブラウザ名のグローバル変数を宣言します。

最終的に、config.tomlからdigital_ocean_urlキーで読み込んだ値を使ってDIGITAL_OCEAN_URLをエクスポートし、後でテストでこのURLを使用できるようにします。

作業が終わったら、ファイルを保存し閉じてください。

最初のテストでは、nanoまたはお好みのテキストエディタを使用して、signUpMethods.spec.tsファイルを作成し、開きます。

1. nano signUpMethods.spec.ts

 

以下のコードを空のファイルに追加してください。

import endpoint from "./configTypes"
import { test, expect } from '@playwright/test'

test("Expect to have 3 options for signing up", async ({ page }) => {

  // Go to the vServers product page of Silicon Cloud web page
  await page.goto(endpoint.DIGITAL_OCEAN_URL);

  // Wait for the page to load
  await page.waitForLoadState('networkidle');

  // Get the number of signUp options
  const number_subscriptions_allowed = await page.locator('.SignupButtonsStyles__ButtonContainer-sc-yg5bly-0 > a').count()

  // Verify that number equals 3
  expect(number_subscriptions_allowed).toBe(3)
});

signUpMethods.spec.tsファイルには、vServersページに3つのサインアップオプションがあるかどうかを評価するテストのコードが含まれています。最初の2行でテストとexpectメソッドをインポートします。

テストは非同期または同期で書くことができます。テストを非同期に書くことは、次のステップを実行するためにテストの各ステップの終了を待つ必要がないため、テストのスピードを最適化するのに役立ちます。ステップが関連するウェブ上のインタラクションに関連しているため、各要素が実行される前にユーザーインターフェースに表示されることを確認する必要があります。そのため、各アクションが呼び出される前にawaitメソッドを含める必要があります。

テストは、4つのアクションを持つテストブロックで定義されています。最初のawaitキーワードは、configTypes.tsファイルで定義されているDIGITAL_OCEAN_URLにテストが移動するように、page.goto()関数を使用しています。グローバル変数のpageをasync宣言に入れることで、テスト全体でpageインスタンスを初期化する必要なく使用できます。

２つ目のawaitキーワードは、待機中のテストがpage.waitForLoadState()関数を使用してページの読み込みを待つように指示します。まだ完了していないAPI呼び出しがある場合、利用できない要素がページに存在する可能性があり、その要素が見つからないためにテストが失敗する可能性があります。

以下の内容を日本語で言い換えます。１つのオプションのみ必要です。
あなたは、number_subscriptions_allowedを定義し、page.locator()関数を使用して、サインアップオプションの数を検索するようにします。サインアップオプションのコンポーネントはCSSセレクター（この場合、サインアップボタン）によって見つけます。これにより、それが含む子要素の数を取得することができます。

最後に、expectメソッドはpage.locator()によって見つかったオプションの数を予想される出力である3と検証します。

ファイルを保存して閉じる。

次に、2つ目のテストを書きます。multiplePackages.spec.tsファイルを作成して開きます。

1. nano multiplePackages.spec.ts

 

空のファイルに、以下のコードを追加してください。

import endpoint from "./configTypes"
import { test, expect } from '@playwright/test'

test("Expect to have 3 packages for subscription", async ({ page }) => {

  // Go to the vServers product page of Silicon Cloud web page
  await page.goto(endpoint.DIGITAL_OCEAN_URL);

  // Wait for the page to load
  await page.waitForLoadState('networkidle');

  // Get the number of packages to be 2 (Basic and Premium)
  const number_subscriptions_allowed = await page.locator('.CPUInfoStyles__StyledLeftCpuInfo-sc-ooo7a2-4 > div').count()

  // Verify that number equals 2
  expect(number_subscriptions_allowed).toBe(2)
});

プレイライトの依存関係から、signUpMethods.spec.tsファイルと同様に、テストの設定とテスト関数をインポートします。

このテストでは、page.goto()を使用して最初にDIGITAL_OCEAN_URLに移動します。そして、page.waitForLoadState()を使用してページがすべてのネットワーク呼び出しを完了するのを待ちます。

Web UI内のsubscriptionコンポーネントの子要素を見つけ、その情報をnumber_subscriptions_allowed変数に保存します。

最終的に、number_subscriptions_allowedの値を2という予想される出力と比較します。

作業が完了したら、ファイルを保存して閉じてください。

その後、pricingComparison.spec.tsファイルを作成して開き、第3のテストを定義します。

1. nano pricingComparison.spec.ts

 

空のファイルに以下のコードを追加してください。

import endpoint from "./configTypes"
import { test, expect } from '@playwright/test'

test("Expect to have 3 packages for subscription", async ({ page }) => {

  // Go to the vServers product page of Silicon Cloud web page
  await page.goto(endpoint.DIGITAL_OCEAN_URL);

  // Wait for the page to load
  await page.waitForLoadState('networkidle');

  // Get the number of basic virtual machine costs (1 CPU, 2 CPU, 4 CPU, 8 CPU)
  const number_subscriptions_allowed = await page.locator('.PricingComparisonToolStyles__StyledCpuSelector-sc-1k0sndv-7 > button').count()

  // Verify that number equals 4
  expect(number_subscriptions_allowed).toBe(4)
});

このテストの非同期関数は、前のテストと同じページ.goto()のURLとページ.waitForLoadState()の指示を使用しています。このテストは、vServersページで利用可能なサブスクリプションパッケージに関連しているため、コードブロックの後半部分ではそのテストを設定しています。

このテストでは、価格オプションコンポーネントの子要素の数を取得し、その値をnumber_subscriptions_allowed変数に格納します。number_subscriptions_allowedの値が4（現在サポートされているサブスクリプションの数）と等しいことを検証します。

ファイルを保存して閉じてください。

テストでは、configTypes.tsからDIGITAL_OCEAN_URLを使用し、configTypes.tsは./config.tomlファイルからdigital_ocean_urlの値を読み込みます。

プロジェクトのホームディレクトリにconfig.tomlファイルを作成します。ホームディレクトリに移動してください。

1. cd ..

 

それから、config.tomlファイルを作成してください。

1. nano config.toml

 

以下のコンテンツをconfig.tomlファイルにコピーしてください。

digital_ocean_url="https://www.digitalocean.com/products/droplets"

ファイルを保存して閉じる。

プロジェクトのディレクトリツリーは、現在以下のようになります。

このステップでは、使用する3つのテストを書きました。また、テストに依存するconfig.tomlファイルを定義しました。次のステップでテストを実行します。

ステップ3 — テストの実行

CLIでPlaywrightテストランナーを使用するための多くのオプションがあります。全てのブラウザでテストを実行したり、並列化を無効にしたり、一連のテストファイルを実行したり、デバッグモードで実行したりすることができます。このステップでは、全てのブラウザでテストを実行します。

最初に、このコマンドを実行してください。

1. npx playwright test –browser=all

 

テストの結果はこうして表示されるはずです。

Running 9 tests using 1 worker ✓ [chromium] › tests/multiplePackages.spec.ts:4:1 › Expect to have 3 packages for subscription (6s) ✓ [chromium] › tests/pricingComparison.spec.ts:4:1 › Expect to have 3 packages for subscription (4s) ✓ [chromium] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (3s) ✓ [firefox] › tests/multiplePackages.spec.ts:4:1 › Expect to have 3 packages for subscription (9s) ✓ [firefox] › tests/pricingComparison.spec.ts:4:1 › Expect to have 3 packages for subscription (5s) ✓ [firefox] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (7s) ✓ [webkit] › tests/multiplePackages.spec.ts:4:1 › Expect to have 3 packages for subscription (7s) ✓ [webkit] › tests/pricingComparison.spec.ts:4:1 › Expect to have 3 packages for subscription (6s) ✓ [webkit] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (6s) 9 passed (1m)

チェックマークは、3つのブラウザ（Chromium、Firefox、Webkit）でのすべてのテストが合格したことを示しています。

現在のサーバーが使用しているコアの数とテストの現在の設定によって、労働者の数が決まります。playwright.config.tsファイルで、労働者の数を制限することができます。テストの設定に関する詳細については、Playwrightの製品ドキュメントを参照してください。

プレイライトのテストランナーは、JenkinsやCircleCIなどのCIツールに統合可能なテストレポートのいくつかのオプションを提供しています。テストレポートに関する詳細については、プレイライトのテストレポーターのドキュメントページを参照してください。

このチュートリアルでは、CLIでテストを表示するよりも読みやすいHTMLレポートファイルを使用してテストを実行します。

HTMLテストレポートを作成するために、このコマンドを実行してください。

1. npx playwright test –browser=all –reporter=html

 

こんな結果が見えるでしょう。

Running 9 tests using 2 workers 9 passed (40s) To open last HTML report run: npx playwright show-report

HTMLレポートを表示するには、次を実行してください。

1. npx playwright show-report

 

次のような出力が表示されます。

Serving HTML report at http://your_ip_address:9323. Press Ctrl+C to quit.

あなたは今、ポート9323を介してレポートにアクセスできるはずです。

ブラウザでレポートが読み込まれると、各テストがChromium、Firefox、およびWebkitの3つのブラウザで実行されたことがわかります。各ブラウザでの各テストの実行時間と、テスト全体の実行時間が分かります。

詳細を見るには、レポート名をクリックしてください。

詳細セクションでは、テストの実行手順はデフォルトでBefore HooksとAfter Hooksのステップを備えています。Before Hooksセクションは、コンソールへのログインやテストデータの読み取りなどの初期セットアップによく使用されます。テストの実行後、After Hooksセクションではテスト環境内のテストデータをクリーンアップすることがよくあります。テストの各ステップには、page.goto（）を使用してURLを訪問し、page.waitForLoadState（）でページの読み込みを待機し、locator.count（）でサインアップ方法をカウントし、expect.toBeと一致する値を検証するための詳細があります。

このステップでは、3つのテストを実行し、合格状態を確認し、テスト結果をCLIとHTML形式の両方で表示しました。次に、Dockerでテストを自動化します。

ステップ4 – Dockerを使用してテストを展開する

テスト自動化を実施する際には、環境の問題に直面することがあります。テストエンジニアのローカルマシンでは正常にテストが実行されるが、環境の互換性の問題によりCI/CDパイプラインに統合すると失敗する場合があります。この問題を回避するために、このステップでDockerコンテナを使用して自動化テストを実行することができます。Dockerのローカル環境でテストが正常に実行される場合、CI/CDパイプラインでの互換性の問題を回避する可能性が高いです。

最初に、後でDockerで実行する必要があるテストスクリプトを追加するためにpackage.jsonファイルを更新します。ファイルを開いてください。

1. nano package.json

 

パッケージのjsonファイルのスクリプトセクションに、ハイライトされた行を追加してください。

...
 "scripts": {
  "test": "playwright test --browser=all",
  "test-html-report": "playwright test --browser=all --reporter=html",
  "test-json-report": "PLAYWRIGHT_JSON_OUTPUT_NAME=results.json playwright test --browser=chromium --reporter=json"
  },

これらのスクリプトは、完全なコマンドを入力する代わりに、カスタムテストを実行します。HTMLでレポーター表示を含めてテストを実行する必要がある場合、次のコマンドを実行できるようになります。

1. npm run test-html-report

 

完全なコマンドの代わりに

1. npx playwright test –browser=all –reporter=html

 

あなたの現在のpackage.jsonは、次のように表示されます：

{
  "name": "playwright-docker",
  "version": "1.0.0",
  "description": "A project for using playwright for end-to-end testing purpose with docker for deployment",
  "main": "index.js",
  "scripts": {
  "test": "playwright test --browser=all",
  "test-html-report": "playwright test --browser=all --reporter=html",
  "test-json-report": "PLAYWRIGHT_JSON_OUTPUT_NAME=results.json playwright test --browser=chromium --reporter=json"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
  "@playwright/test": "^1.22.2",
  "@types/node": "^17.0.35",
  "playwright": "^1.22.1",
  "toml": "^3.0.0",
  "typescript": "^4.6.4"
  }
}

ファイルを保存して閉じてください。

次に、現在のディレクトリにDockerfileを作成し、開きます。

1. nano Dockerfile

 

それに次の内容を追加してください。

# Get the base image of Node version 16
FROM node:16

# Get the latest version of Playwright
FROM mcr.microsoft.com/playwright:focal
 
# Set the work directory for the application
WORKDIR /app
 
# Set the environment path to node_modules/.bin
ENV PATH /app/node_modules/.bin:$PATH

# COPY the needed files to the app folder in Docker image
COPY package.json /app/
COPY tests/ /app/tests/
COPY tsconfig.json /app/
COPY config.toml /app/

# Get the needed libraries to run Playwright
RUN apt-get update && apt-get -y install libnss3 libatk-bridge2.0-0 libdrm-dev libxkbcommon-dev libgbm-dev libasound-dev libatspi2.0-0 libxshmfence-dev

# Install the dependencies in Node environment
RUN npm install

最初に、DockerイメージにNodeバージョン16とPlaywrightバージョンfocalのベースイメージを取得します。テスト実行にはNodeとPlaywrightが必要です。

それでは、コンテナ内でプロジェクトディレクトリ名を設定します。この場合、それはWORKDIRです。WORKDIR /appと設定することで、ファイルはすべてコンテナ内の/appディレクトリ内に配置されます。

Dockerコンテナの環境パスをENV PATHで設定します。この場合、node_modulesディレクトリに設定します。

それでは、必要なすべてのファイルをDockerイメージの/appディレクトリにコピーします。

プレイライターを実行するためにはいくつかの依存関係が必要ですので、Dockerイメージにもそれらの依存関係をインストールします。

ファイルを保存して閉じる。

次に、自動化プロジェクトのためのイメージを構築します。

1. docker build -t playwright-docker .

 

Dockerはカレントディレクトリ内のDockerfileを見つけ、その中の指示に従ってイメージをビルドします。-tフラグはplaywright-dockerという名前でDockerイメージにタグを付けます。.はDockerに対して現在のディレクトリ内のDockerfileを探すよう指示します。Dockerイメージのビルドに関しては、Dockerの製品ドキュメントを参照してください。

ビルドの出力（簡素化されたもの）は、以下のように見えるだろう。

Sending build context to Docker daemon 76.61MB … added 6 packages, and audited 7 packages in 6s found 0 vulnerabilities Removing intermediate container 87520d179fd1 —> 433ae116d06a Successfully built 433ae116d06a Successfully tagged playwright-docker:latest

テストがWindowsやMacOS上で正しく実行されない場合があるかもしれません。それは、初期設定中に依存関係の競合や欠落が原因です。しかし、テストを実行するためにDockerを使用すれば、このような環境設定の問題を防ぐことができます。Dockerを使用すると、ベースイメージに必要なすべての依存関係が含まれます。Dockerがインストールされている限り、テストは異なるオペレーティングシステム上で実行できます。

Dockerイメージが正常に作成されたかを確認してください。 (Dockerイメージが正常に作成されているかどうかを確認してください。)

1. docker image ls

 

以下のような結果が得られるべきです。

REPOSITORY TAG IMAGE ID CREATED SIZE playwright-docker latest 433ae116d06a 5 minutes ago 1.92GB mcr.microsoft.com/playwright focal bb9872cfd272 2 days ago 1.76GB node 16 c6b745e900c7 6 days ago 907MB

テストイメージのplaywright-docker、Microsoft Playwright、およびNodeイメージが利用可能です。また、Dockerのインストール要件として、Ubuntuおよびhello-worldのイメージも利用できるかもしれません。

ドッカーのコンテナでテストコマンドを実行するために、docker runを使用してください。

1. docker run -it playwright-docker:latest npm run test

 

docker run コマンドは、指定された Docker イメージを実行します。この例では、playwright-docker:latestというイメージを使用し、コマンドは npm run test です。docker run はまず Docker コンテナを起動し、その後必要なコマンドを実行します。詳細は Docker の製品ドキュメントをご覧ください。

結果はこのようになります。

> playwright-docker@1.0.0 test > playwright test –browser=all Running 9 tests using 2 workers ✓ [chromium] › tests/pricingComparison.spec.ts:4:1 › Expect to have 4 pricing options (7s) ✓ [chromium] › tests/multiplePackages.spec.ts:4:1 › Expect to have 2 packages for subscription (8s) ✓ [chromium] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (8s) ✓ [firefox] › tests/multiplePackages.spec.ts:4:1 › Expect to have 2 packages for subscription (9s) ✓ [firefox] › tests/pricingComparison.spec.ts:4:1 › Expect to have 4 pricing options (8s) ✓ [firefox] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (5s) ✓ [webkit] › tests/multiplePackages.spec.ts:4:1 › Expect to have 2 packages for subscription (8s) ✓ [webkit] › tests/pricingComparison.spec.ts:4:1 › Expect to have 4 pricing options (10s) ✓ [webkit] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (7s) 9 passed (41s)

テストは現在、Docker環境で正常に実行されています。リモートリポジトリのコードを安全に更新できますし、システム管理者は自動化テストをCI/CDパイプラインに統合できます。

この記事で作成したファイルも、このリポジトリで確認することができます。

結論

「Playwrightを使用してエンドツーエンドテストを行い、そのテストをDockerでデプロイしました。Playwrightについては、Playwrightドキュメントを参照してください。」

Dockerについてもっと学びたい場合は、Dockerのエコシステムについて読むことができます。Docker製品のドキュメントには、Dockerファイルの書き方に関するベストプラクティスやDockerファイルのリファレンスガイドもあります。Dockerを使用した作業を続けるためには、他のDockerチュートリアルも試してみることができます。