ブラウザテストをPlaywright（javascript）でやる

経緯

laravelでブラウザテストを行おうと勉強をしていたらDUSKってのを使うってコトを知った

調べているとPlaywrightっていう別の方法を知った

• DUSKより、複雑なことが出来るのがPlaywright
• laravel限定のDUSKに対して、Playwrightはlaravel限定じゃない

...ということらしいので、Playwrightをまず覚える
気が向けばDUSKに手を出す…という結論に至った

ちなみにPlaywrightは「プレイライト」と読むっぽい

目標

laravel限定という訳ではないとはいえ、laravel利用＋ソース管理しているのでテスト用のファイルも同じトコにまとめておきたい

• laravelのartisanコマンドを使ってPlaywrightを実行
• laravelの「tests/」配下にPlaywright用のテストファイルを置く ← ソース管理＋artisanコマンドで実行させるため

手順

Playwrightを実行させるにはnode.jsが必要とのこと

1. node.jsのインストール
2. Playwrightの初期設定の実行
3. ひとまず実行

node.jsのインスト

node.jsの公式からDLしてインストール

Playwrightの初期設定の実行

ターミナル（PowerShellなど）から実行。適当なフォルダを作ってそこで実行

> npm init playwright@latest

※管理者権限で実行する必要があるかも？ CMDのほうが無難かも？

初期設定の実行時に聞かれる内容

▼下記のような感じで聞かれた

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

• 使用言語
• 保存先のPATH
• git管理するか？
• 専用ブラウザをインストールするか？

保存先

ブラウザだけ共通の場所にインストールされるけど、それ以外の各ファイルは初期化コマンド実行場所に作成される

▼ブラウザ以外
C:\hoge\
├── tests\ ← テストファイル
├── playwright.config.js ← Playwright 設定
├── package.json ← 依存関係の定義
├── package-lock.json ← バージョン固定（あれば）

別のフォルダで別のテストをしたいとき

同じやりかたでOK。ターミナル（PowerShellなど）から実行。適当なフォルダを作ってそこで実行

> npm init playwright@latest

ひとまず実行

「tests/example.spec.js」というのがいたので、とりあえず実行して動作確認が可能

> npx playwright test

アンチウィルス系のソフトをいれていたら仕事をするかもしれない
※avastをいれているので、隔離されそうになった

テスト結果がブラウザで表示されない

初回のテスト実行はサービスでブラウザを開いてくれるそうだ
2回目以降のテストは「ブラウザで開いてね」と依頼が必要だそうだ

> npx playwright show-report

テストの挙動を見たいなら「--headed」を追加して実行

> npx playwright test --headed

テストを実行して結果を見る

2回コマンドを叩く必要がある

▼テスト実行

> npx playwright test

※テスト中の実際の挙動は興味ないので「--headed」はつけない

▼テストの実行結果をブラウザで表示

> npx playwright show-report