Playwright 入門 – インストール、ブラウザ操作でのコード生成、テスト実行

はじめまして！サイオステクノロジーの安藤　浩です。E2Eテストで利用されるPlaywright の入門として、インストールからコード生成、テスト実行の方法についてご紹介させていただきます。

1 Playwright とは
2 環境
3 Playwright のインストール
4 ブラウザ操作でのコード生成
5 生成されたコードによるテスト実行
6 テスト結果の確認 (レポートの表示)
7 まとめ

Playwright とは

Web アプリのテスト、テスト自動化が可能なNode.jsのライブラリのことです。

特徴として以下が挙げられます。

クロスブラウザ対応
非同期処理を適切に処理して、シンプルなテストコードが書ける
ブラウザ操作からコードが生成できる
Visual Regression Test (VRT)に対応

ほかのE2Eテストツールは Selenium, Puppeteer, Cypressなどが挙げられ、比較対象となります。

ここからPlaywright のインストールからブラウザ操作でのテストコード生成、テスト実行、テスト実行結果の確認までご紹介します。

環境

実行環境は以下の通りです。

OS/SW	Version
Windows 10 Pro	22H2
VSCode	1.88.0
Node.js	20.12.2
npm	10.5.1

Playwright のインストール

対象のプロジェクトにディレクトリでPlaywright を導入したい場合、以下のコマンドを実行します。(現時点での最新バージョンは1.43.0 )

npm init playwright@latest

いくつか選択肢が出てくるので、選択して初期化します。例えば、TypeScript か JavaScript でテストコードを書くかというものです。

Getting started with writing end-to-end tests with Playwright:Initializing project in '.'
? Do you want to use TypeScript or JavaScript? ...
> TypeScript
  JavaScript

ここでは以下のように設定しておきます。

√ Do you want to use TypeScript or JavaScript? · TypeScript
√ Where to put your end-to-end tests? · tests
√ Add a GitHub Actions workflow? (y/N) · true
√ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true

ファイル生成後のファイル構成は以下のようになります。

Playwright Test for VSCode というVSCodeの拡張機能があるのでこちらもインストールします。

https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright

この拡張機能を利用して、ブラウザ操作からコード生成する方法を紹介します。

ブラウザ操作でのコード生成

まず、VSCodeでTestingを表示します。VSCodeのメニューのView > Testing から表示できます。

Testingの画面下部にPlaywright の拡張機能が表示されているので、「Show browser」にチェックを入れ、「Record new」を押下します。

その時、Chromiumが起動するのでアドレスバーにテスト対象のアドレスを入力します。ここではPlaywright のホームページ ( https://playwright.dev/ )を指定します。

ページが表示されたら、赤枠の箇所を押下し、マウスカーソルを黒背景のPlaywrightの箇所に移動し押下してみます。

すると、文字列が正しいかというチェックをするアサーションの画面(Assert that element contains text)が表示されるので、赤枠のチェックボタンを押下します。

ここまででVSCode上ではtest-1.spec.ts というファイルが生成され、以下のコードが生成されています。

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

test('test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await expect(page.locator('h1')).toContainText('Playwright');
});

続いて、ブラウザで画面上の「GET STARTED」ボタンを押下し、画面を表示します。

先ほど同様、赤枠の文字列のアサーションのボタンを押下し、「Installation」の箇所を押下します。

アサーションの画面(Assert that element contains text)が表示されるので、赤枠のチェックボタンを押下します。

「Introduction」の箇所も同様にアサーションを追加します。

ブラウザを閉じると最終的に以下のテストコードが生成されます。test-1.spec.ts ファイルを保存しておきます。

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

test('test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await expect(page.locator('h1')).toContainText('Playwright');
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page.locator('h1')).toContainText('Installation');
  await expect(page.locator('#introduction')).toContainText('Introduction');
});

※テストのタイトル (ここでは’test’になっている) などは分かりやすくするため適宜変更してください。詳細は https://playwright.dev/docs/api/class-test をご参照ください。