1 Playwright でテストを楽に実装したい Cybozu Frontend Day yudai yamamoto (@_yy616)

2 ⾃⼰紹介 ⾃⼰紹介 • やまさん (@yy616) • 23新卒 • サイボウズOfficeフロントエンド刷新 (DOGO) • フロントエンドエンジニア • デザインシステム / ⽣成AI • ⼀汁⼀菜の⽣活を実践中

3 Agenda • 導⼊ • 前提知識 • テストの実装を楽にしたい • テストのデバックを楽にしたい • まとめ

導⼊ 主な業務内容

導⼊ 主な業務内容 いろいろ苦戦したが⼀番苦戦したのはテスト実装 😇

6 うわっ…私のフロントエンドテストの実装⼒、なさすぎ…︖ しかし、そんな⾃分でもだんだん実装が進められるようになり、ノウハウも少しずつ溜まってきた 配属当時の状況 • Playwrightの使⽤経験なし • そもそも Integarion Test 実装経験なし • (そもそもフロントエンド開発の実務経験なし) 導⼊

7 そこで、Integration Test on Playwright を攻略するために、 個⼈的におすすめと思っている実装⽅法を紹介 😃 誰に︓ Playwright⼊⾨者 or フロントエンドテストの経験が浅い⼈ 🙌 なんと⾔って欲しい︓ Playwright で Integration Test 書くのに抵抗なくなったと⾔って欲しい 導⼊

8 前提知識

9 前提知識 • MicrosoftによるE2Eテストフレームワーク • Chromium、WebKit、Firefox などの複数のブラウザに対応 • スクリーンショット、ビデオレコーディングにも対応 Playwright

10 • Playwright の作成元である Microsoft が公式に提供している拡張機能 • VSCode 内で直接ブラウザテストの記録や実⾏をできるようになる • コードの⾃動⽣成やデバックなどの機能も備わっている Playwright Test for VSCode 前提知識

11 • Playwrightでは、基本的にこの拡張とセットで利⽤することが推奨されている • 以降では VSCode およびこの拡張を使ってテストを書くことを前提とする Playwright Test for VSCode 前提知識

12 テストの実装を楽にしたい

13 テストの実装を楽にしたい • ブラウザ上での操作をもとにリアルタイムでテストコードを⾃動⽣成してくれる強⼒な機能 • テストの記録や実⾏を⼿軽に⾏うことが可能で効率的にコードを書ける Test Generator

14 テストの実装を楽にしたい 1. VS Code サイドバーの「Show brower」にチェッ クを⼊れ、「Record at cursor」を押す 2. ブラウザに移動し、テストしたいユーザーのアクショ ンを記録 3. 記録ができたらキャンセルボタンをクリックするか、 ブラウザ ウィンドウを閉じる このボタンを押すとレコード開始 👉 参考 : Playwright の VSCode 拡張を使って効率的にテストを書く @ryo_manba Test Generator の利⽤⽅法

15 テストの実装を楽にしたい 実際に⽣成する様⼦

16 テストの実装を楽にしたい 個⼈流テストコード作成のフロー 1. Test Generator で雛形を⽣成 2. ⽣成した雛形コードを既存実装に沿った形に修正 3. Assertion を⼿動で追加 4. VSCode 拡張のブラウザモードやデバック機能などで動きを確認 Test Generator で⽣成 動作確認 ⽣成コードの修正 Assertionの追加

17 補⾜ • Test Genarator の⽣成対象は操作系（クリックやテキスト⼊⼒など）が基本 • v1.40.0 (2023/11/17) から Assertion も⼀部⽣成可能になった https://github.com/microsoft/playwright/issues/14913 • 具体的には以下の Assertion が対応済み。今後他のAssertionの対応にも期待 expect(locator).toBeVisible() expect(locator).toHaveValue(value) expect(locator).toContainText(text) テストの実装を楽にしたい

18 テストのデバックを楽にしたい

19 Playwright におけるデバック⽅法 • VSCode 拡張を使って VSCode 上でデバッグする⽅法 • Playwright Inspector を使う⽅法 • Playwright Trace Viewer を使う⽅法 • Developer Tool を使う⽅法 👈 今⽇話すのはこちら テストのデバックを楽にしたい

20 Live Debugging テストのデバックを楽にしたい • 「Show Browser」をオンにしてテストを実⾏した後、VSCode 内のいずれかの Locator をクリックすると、ブラウザ上でその Locator がハイライトで表⽰される ハイライト表⽰される👉

21 Debug Mode • ブレークポイントを使⽤できる。⾚⾊の点の位置がブレークポイント。 • テストをステップ実⾏したり、テストを⼀時停⽌したり、テストを再実⾏したりできる。 テストのデバックを楽にしたい

22 特定のブラウザで実⾏する • テストを実⾏するブラウザを選択できる • モバイルにも対応しているため多⾓的な確認ができる テストのデバックを楽にしたい

23 正直あまり使っていないので紹介しませんが、使いこなせれば強⼒だと思うので概要だけ その他の⽅法 Playwright Trace Viewer テスト実⾏のトレース（実⾏履歴）を視覚的に分析できる テスト中に発⽣したイベント、ネットワークリクエスト、コンソールログ、スクリーン ショット、DOMの変更など、さまざまな情報を提供 Playwright Inspector GUIでテストの流れを視覚的に確認しながら、セレクタの正確性やAPIの挙動をリアルタイム で検証できる テストのデバックを楽にしたい

24 まとめ

25 まとめ • VS Code 拡張を使うことで効率的にテストを書ける • コード⽣成の機能を使うことで簡単にテストの雛形を作成できる • VS Code Debugger を使うと効率的なデバックができる • テスト実装のTipsを実践していき、快適なテストライフを⽬指そう

26 まとめ ありがとうございました︕