とほほのPlaywright入門
Playwrightとは
- 「プレイライト」と読みます。playwright は「劇作家」を意味します。
- Microsoft が開発した ブラウザ操作テスト用ツールです。
- 類似のツールに Selenium や Google の Puppeteer があります。
- Selenium や Puppeteer よりも後発で洗練された強力な機能を備えています。
- Puppeteer は JavaScript と Python しかサポートしませんが、Playwright は Java や C# もサポートします。
- Puppeteer は Chrome, Firefox, Edge しかサポートしませんが、Playwright は Safari もサポートします。
- 各ツールの人気度の動向は こちら。最近は Playwright が一番人気の様です。
本書の対象バージョン
OS : Windows 11 Node : 22.19.0 Playwright : 1.55.1 (2025年10月)
インストール
下記から [Windowsインストーラー(.msi)] をダウンロードして Node.js をインストールしてください。
[コマンドプロンプト] を起動し、下記を実行してください。問い合わせにはすべて Enter でかまいません。
C:\Users\xxxx> mkdir PlaywrightTest C:\Users\xxxx> cd PlaywrightTest C:\Users\xxxx\PlaywrightTest> npm init playwright@latest
下記のファイルがインストールされます。
├ node_modules # Node.jsのモジュール群 ├ package-lock.json # パッケージの固定化情報 ├ package.json # プロジェクトの基本情報 ├ playwright.config.ts # テストコンフィグレーション ├ tests # テスト対象フォルダ(最小限のテストサンプル) │ └ example.spec.ts └ tests-examples # リッチなテストサンプル └ demo-todo-app.spec.ts
チュートリアル
簡易テストを実行する
[コマンドプロンプト] から下記を実行してください。playwright.config.ts ファイルの testDir で指定されたフォルダ(tests)内のテストを実行します。テストはヘッドレスモード(ブラウザを画面に表示しないモード)で実行されます。
npx playwright test
テストレポートを見る
[コマンドプロンプト] から下記を実行してください。
npx playwright show-report
chromium, firefox, webkit で合計6個のテストに ✓(チェック) がついていれば成功です。
UIからテストする
[コマンドプロンプト] から下記を実行してください。
npx playwright test --ui
画面が開きます。[F5] キーを押すか ▷ ボタンを押すとテストを実行します。
使用方法
ブラウザ表示モードでテストする
--headed を指定するとブラウザをヘッドレスではなくブラウザ画面を表示するモードでテストを実行します。
npx playwright test --headed
ブラウザを指定する
--project はプロジェクト(ブラウザ) を指定します。chromium、firefox、webkit を指定可能です。
npx playwright test --project=chromium
テストするファイルを指定する
ファイル名を指定すると、testDir で指定したディレクトリではなく、引数で指定したファイルのみを実行します。Windows でもパスの区切り文字はスラッシュ(/)で指定してください。
npx playwright test tests/example.spec.ts
テストUIを起動する
--ui を指定するとテストUIを開きます。
npx playwright test --ui
テストスクリプト
基本サンプル
簡単な実行例 (test.ts) を下記に示します。ブラウザを起動し、https://example.com を開き、そのスクリーンショットを取って閉じます。chromium の代わりに firefox や webkit を指定することもできます。
const { chromium } = require('playwright');
(async() => {
const browser = await chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('https://example.com');
// ここに様々な操作を記述します
await page.screenshot({ path: 'screenshot.png' });
await browser.close();
})();
test() を用いていないので npx playwright test ではなく node コマンドで実行します。
node test.ts
スクリーンショットファイル screenshot.png ファイルが作成されていれば成功です。
ブラウザ
非ヘッドレスモードで開く
browserType.launch() のオプション指定により、非ヘッドレスモード(ブラウザを画面に表示するモード)で実行します。
const browser = await chromium.launch({ headless: false });
ウィンドウサイズを指定する
browser.newContext() のオプションで指定できます。
const context = await browser.newContext({ viewport: { width: 800, height: 600 } });
ページ
指定したページを開く
page.goto() は url で指定したページ(URL)を開きます。
await page.goto(url);
ページがロードされるのを待つ
page.waitForLoadState() はページが完全にロードされるのを待ちます。
await page.waitForLoadState();
要素操作
要素を参照する(CSSセレクタ)
page.locator() は selector で示す要素を返します。selector には '#btn1' や 'input[name=q]' など CSS のセレクタを指定できます。
Locator btn1 = page.locator(selector); btn1.click();
要素を参照する(ロール)
page.getByRole() は "送信" ボタン、"住所" 入力欄など、CSSセレクタよりも直感的な方法で要素を特定します。
const btn1 = page.getByRole('button', { name: '送信' });
const txt1 = page.getByRole('textbox', { name: '住所' });
入力欄に文字列を入力する
page.fill() は selector で示す要素に文字列 text を入力します。
await page.fill(selector, text)
要素をクリックする
page.click() は selector で示す要素をクリックします。
await page.click(selector);
リンク
- 公式サイト (英語)
- 公式APIリファレンス (英語)