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

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

Playwright とは

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

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

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

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

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

環境

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

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 をご参照ください。

生成されたコードによるテスト実行

以下のテストコードの箇所にテスト実行ボタンが表示されるので押下するとテストが実行されます。

テスト実行後は以下のようになり実行結果が確認できます。

すべてのテストを実行したい場合は以下のコマンドを実行します。

npx playwright test

テスト結果の確認 (レポートの表示)

テストが完了したら、以下のコマンドを実行することでテスト結果のレポートが表示されます。

npx playwright show-report

指定のURLにアクセスするとHTML がlocalhostで見られるようになります。

各ブラウザでのテスト状況などがわかるので便利ですね。失敗した場合のテストは失敗箇所がわかるようになっています。

まとめ

Playwrightの特徴とインストール、ブラウザ操作でのコード生成、テスト実行・結果確認までご紹介しました。

About 安藤浩 1 Article

2023年10月にサイオステクノロジーに入社。主にバックエンド側のWebアプリ(C#, Python, Typescript)開発を経験。趣味は家庭菜園。