Playwrightの紹介

Playwrightの紹介

Transcript

1. Playwright の紹介 Press Space for next page
2. 自己紹介 📝 飯野陽平（wheatandcat ） 🏢 個人事業主 → 法人設立（合同会社UNICORN 代表社員） 💻 Work: シェアフル株式会社CTO 📚 Blog: https://www.wheatandcat.me/ 🛠 今までに作ったもの memoir ペペロミア Atomic Design Check List
3. Playwright とは？ E2E テストのためのNode.js のライブラリ Chromium 、Firefox 、および WebKit ブラウザをサポート テストコードをブラウザ操作から自動生成できるのが強み Microsoft が作成 開発に元Puppeteer の開発者がいるため、インタフェースが似ている
4. 導入 以下のコマンで実行で導入可能 npm init playwright@latest
5. コード 以下のコードで実行できる import { test, expect } from '@playwright/test'; test.describe("check website", () => { test('has title', async ({ page }) => { await page.goto('https://playwright.dev/'); // Expect a title "to contain" a substring. await expect(page).toHaveTitle(/Playwright/); }); test('get started link', async ({ page }) => { await page.goto('https://playwright.dev/'); // Click the get started link. await page.getByRole('link', { name: 'Get started' }).click(); // Expects the URL to contain intro. await expect(page).toHaveURL(/.*intro/); }); });
6. 実行① 以下のコマンドで実行 playwright test
7. 実行② テスト結果は以下のように確認できる
8. 実行③ 対象のテストをクリックで詳細も確認できる
9. 実行④ Trace 機能を使用して確認 Trace Viewer | Playwright playwright test --trace on npx playwright show-report
10. テストコードの自動生成 以下のコマンドで実行 ※ デモをやる Test Generator | Playwright npx playwright codegen
11. 実装 自作のアプリに導入してみたので紹介 PR: e2e で保存したデータを検証
12. 実装したモチベーション アプリで使用しているmarkdown-to-jsx がユニットテストで動作しない Markdown の入力をparse してTODO 管理するアプリなので、markdown-to-jsx の入/ 出力が重要 なので、Playwright で継続的にテストできるように実装
13. 実装内容 ※ デモしながら紹介（トレースも見せる） テストファイルは以下を参照 e2e/todo.spec.ts localStorage のテストは evaluate を使用 Evaluating JavaScript | Playwright CI で実行は以下を参照 .github/workflows/playwright.yml 実行結果は、こちら ` `
14. まとめ E2E テストは保守が大変だが、Playwright はテストコードの生成機能があるので保守しやすい 複数のブラウザをサポートしているので安全性が高い トレース機能があるのでCI でコケた時も原因の発見が容易
15. ご清聴ありがとうございました 🎉