🎭Playwright 超入門

ようやくPlaywightを触ってみました。
ここまで手軽に導入できるとは思いませんでした。
敷居が低すぎてびっくりしました。

■リンク集
- Playwright : https://playwright.dev/docs/intro
- Playwright VSCode Plugin : https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright

Transcript

1. Playwright 超入門 VSCodeの拡張機能を活用して、簡単にE2Eテストを実行する方法を紹 介します。 1
2. 他のE2Eテストツール Selenium: 長年の実績があるが、やや設定が複雑 Cypress: モダンで開発者フレンドリー、ただしマルチブラウザ非対 応 2
3. Playwrightとは？ Microsoftが開発したE2Eテストフレームワーク Chromium、Firefox、WebKitなど複数のブラウザをサポート ヘッドレス/ヘッドフル両方で動作可能 3
4. Playwrightのインストール npm init playwright@latest 指示に従ってセットアップ 必要なブラウザや設定を選択 設定を一つ一つ聞いてくるのでいくつか答えて設定をする 4
5. VSCode拡張機能の活用 「Playwright Test for VSCode」拡張をインストール テストの作成・実行・デバッグがVSCode内で完結 MSが作ったツールらしくVSCodeとの相性が抜群 5
6. コード自動生成機能 ブラウザ操作を記録し、自動でテストコードを生成 コマンド例: npx playwright codegen GUIで操作しながらコードを取得 VSCodeを使うと専用のブラウザが立ち上がり操作をテストコード に落としてくれるのでPlaywrightの書き方があまりわからなくても 直感的に始められる 6
7. 簡単なテストの作成 import { test, expect } from '@playwright/test'; test('トップページが表示される', async ({ page }) => { // この単位でテストを書く await page.goto('https://example.com'); // ページへのアクセス await expect(page).toHaveTitle(/Example/); // 検証 }); 7
8. テストの実行 npx playwright test 成功・失敗の結果がコンソールに表示 スクリーンショットや動画も取得可能 8
9. デバッグモード npx playwright test --debug 実際のブラウザを開きながらステップ実行 開発中のテスト修正が容易に VSCodeであればボタンからデバッグ実行できる 9
10. 並列実行とレポート機能 デフォルトで並列実行される HTMLレポートの生成: npx playwright show-report コードのどこがどのくらいの時間で実行できたか成功・失敗したか が出力される 個人的には使い道がわかってない。。。 10
11. まとめ Playwrightは強力なE2Eテストツール VSCode拡張で簡単にテスト作成 自動記録やデバッグ機能を活用して簡単にE2Eテストを導入しよ う。 Playwightの公式Doc良いので使うなら一度読むのをおすすめしま す。 11
12. リンク集 Playwright : https://playwright.dev/docs/intro Playwright VSCode Plugin : https://marketplace.visualstudio.com/items?itemName=ms- playwright.playwright 12