この記事について
既存プロジェクトへの Playwright の導入方法をまとめています。
より具体的な使い方については以下もご参考ください！
はじめに
初めて Playwright を使ってみたのでまとめておきます！
今回は既存のプロジェクトに追加しました。
環境
- Vue.js
- TypeScript
- yarn
- GitHub Actions
- VSCode
選定理由
既存のアプリケーションなので、なるべく手間をかけずに導入したい・・・
ということで、定番の Cypress ではなく自動生成が強みっぽい Playwright にしました。
（今は Playwright の方が定番化しているのかも？）
インストール
公式の手順にしたがって追加します
https://playwright.dev/docs/intro
yarn create playwright
いくつか質問をされるので、以下のように回答しました。
Where to put your end-to-end tests? : tests （デフォルト）
Add a GitHub Actions workflow? (y/N) : true （yを入力）
Install Playwright browsers (can be done manually via 'yarn playwright install')? (Y/n) true
ファイルを見てみると tests tests-examples ２つのディレクトリができていました。
GitHub Actions のワークフローも生成されたようです。
さっそくサンプルテストを実行。
npx playwright test
うまく動いているようです。
npx playwright show-report を実行すると、ブラウザで詳しい結果が表示されました。
VSCode の拡張機能を追加
VSCode を利用しておくなら、入れておくと便利です。
テストを生成してみる
ここでは VSCode の拡張機能を使う方法を紹介します。
（拡張を使わなくても、 npx playwright codegen コマンドで同様のことができそうです。
https://playwright.dev/docs/codegen-intro ）
サイドバーから test タブ（ビーカーのアイコン）を開くと「PLAYWRIGHT」が表示されています。
「Record new」をクリックすると、新しいテストファイルが作成され、記録用の Chromium が起動します。
テストしたいURLを入力して
テストしたい操作を実際に行い、期待した動作になることを確認します。
（今回はメールアドレスとパスワードを入力し、「ログイン」ボタンをクリックしました）
期待通りの動作（ex: 画面遷移）になったことを確認したら、
Assert Visible アイコン（真ん中の目のマーク）をクリックし、
検証したい項目をクリック。
最後に、 Record アイコン（左の赤い●）をクリックすると、以下のようなテストが生成されているのを確認できました。
import { test, expect } from '@playwright/test';
test('test', async ({ page }) => {
await page.goto('http://localhost:4000/signin');
await page.getByPlaceholder('メールアドレス').click();
await page.getByPlaceholder('メールアドレス').fill('user01@example.com');
await page.getByPlaceholder('パスワード').click();
await page.getByPlaceholder('パスワード').fill('User01password');
await page.getByRole('button', { name: 'LOGIN' }).click();
await expect(page.locator('.page-header-container')).toBeVisible();
await expect(page.getByText('ログインしました')).toBeVisible();
});
実行ボタン（▷）を押してテストを実行してみると、無事通ったようです。
あとはひたすらいろんなパターンで操作してテストを追加していくのみ！
思った以上に簡単でした。