事前準備

Nodejsのインストール。voltaなどをインストールしてバージョン管理するのがおすすめです。（注：これは筆者の個人的意見）

System Requirementsは以下の通りです。

Node.js 16+
Windows 10+, Windows Server 2016+ or Windows Subsystem for Linux (WSL).
MacOS 12 Monterey, MacOS 13 Ventura, or MacOS 14 Sonoma.
Debian 11, Debian 12, Ubuntu 20.04 or Ubuntu 22.04, with x86-64 or arm64 architecture.

Playwrightのインストール

のガイドに従ってinstallします。まずは下記コマンド。

npm init playwright@latest

TypescriptかJavaScriptの選択
テストフォルダの名前
Github Action workflowを追加するか
Playwrigh tbrowserをインストールするか

Choose between TypeScript or JavaScript (default is TypeScript)
Name of your Tests folder (default is tests or e2e if you already have a tests folder in your project)
Add a GitHub Actions workflow to easily run tests on CI
Install Playwright browsers (default is true)

を聞かれるのでそれに答えます。すると以下のファイルがインストールされます。

playwright.config.ts
package.json
package-lock.json
tests/
  example.spec.ts
tests-examples/
  demo-todo-app.spec.ts

サンプルテストの実行

プロジェクトが作られるとサンプルコードが入っているのでそれを実行してみます。

By default tests will be run on all 3 browsers, chromium, firefox and webkit using 3 workers. This can be configured in the playwright.config file. Tests are run in headless mode meaning no browser will open up when running the tests. Results of the tests and test logs will be shown in the terminal.

デフォルトでは3つのワーカーを使ってchromium, firefoxさらにwebkitの3つのブラウザの上でテストが走り、それはplaywright.configファイルで設定されているようです。で、実行してもブラウザが出たりしないheadlessモードで結果はターミナルに表示される。とのことです。

npx playwright test

UI付きで実行したい場合

npx playwright test --ui

Test Reportの表示

After your test completes, an HTML Reporter will be generated, which shows you a full report of your tests allowing you to filter the report by browsers, passed tests, failed tests, skipped tests and flaky tests. You can click on each test and explore the test's errors as well as each step of the test. By default, the HTML report is opened automatically if some of the tests failed.

テストを実行するとHTML Reporterが作成されます。Reportでは全結果を見たり成功したテストや失敗したものをフィルタリングしたり、とにかく結果について見られますということですね。テストが失敗した場合、このレポートは勝手に開かれるようです。

npx playwright show-report

Playwrightのバージョンアップ

npm install -D @playwright/test@latest

現在のバージョンの確認

npx playwright --version

Playwright始め方 インストール編