仕事で複数端末/OSを対象にしたWebアプリ開発することになったので、Playwrightについて調査。今回は主にインストール方法をまとめ、後日詳しい使用方法について記載する。
環境
- Windows 11 Home 23H2
- Node.js v20.12.2
Playwrightとは？
Playwrightはe2eテスト自動化の為に作られたライブラリで、以下をサポートしている。
- クロスプラットフォーム： 様々な環境でのテスト実行 (Windows/macOS/Linux)
- クロスブラウザ： モダンなレンダリングエンジンの使用 (Chromium/WebKit/Firefox)
- 複数の開発言語： 複数の開発言語でのAPIの使用 (TypeScript/JavaScript/.NET/Java)
- モバイルWebのテスト： モバイル端末のエミュレート機能 (Android向けGoogle Chrome/iOS向けSafari)
インストール方法
Playwrightをインストールするための要件と手順について、以下にまとめる。
システム要件
- Node.js 18以上
- Windows 10以上
- macOS 13 Ventura, or macOS 14 Sonoma
- Debian 11, Debian 12, Ubuntu 20.04, Ubuntu 22.04, Ubuntu 24.04
手順1. npm経由でインストール
以下のコマンドを実行してインストールを開始する。
npm init playwright@latest途中、構成について尋ねられるので以下のように回答。
Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
√ Do you want to use TypeScript or JavaScript? · TypeScript // TypeScriptを使用するか、JavaScriptを使用するか否か
√ Where to put your end-to-end tests? · tests // e2eテストの配置フォルダ
√ Add a GitHub Actions workflow? (y/N) · false // GitHubアクションを追加するか否か
√ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true // ブラウザをインストールするか否かインストールが完了すると、以下のようなフォルダ構成となる。
node_modules/ // Nodeモジュール
tests/ // テストフォルダ
example.spec.ts // テストコードの例
tests-examples/ // テストの例フォルダ
demo-todo-app.spec.ts // テストコードの例 (TODOアプリ)
package.json
package-lock.json
playwright.config.ts // 設定ファイル手順2. テスト実行
インストール確認を兼ねてテストを実行するには、以下のコマンドを実行する。
npx playwright testインストール直後では、例として同梱されているtests/example.spec.tsがブラウザを起動することなく実行され(headless)、次のような結果が表示される。
Running 6 tests using 6 workers
6 passed (6.4s)
To open last HTML report run:
npx playwright show-report出力結果にある通り、HTMLでレポートを表示するには、以下のコマンドを実行すれば良い。
npx playwright show-reportテストをUIモードで実行するには、コマンドにuiオプションを付与する。
npx playwright test --ui
その他
アップデート
npm install -D @playwright/test@latest
// ブラウザのバイナリとその依存をダウンロード
npx playwright install --with-depsバージョンチェック
npx playwright --version参考
Installation | Playwright
Introduction
playwright.dev
