Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Playwrightでテストを楽に実装したい
Search
yudai yamamoto
February 11, 2024
0
45
Playwrightでテストを楽に実装したい
Cybozu Frontend Day 2024.2
yudai yamamoto
February 11, 2024
Tweet
Share
More Decks by yudai yamamoto
See All by yudai yamamoto
2024年における生成AIエンジニアとは何者か
yyo616
9
3.1k
大規模言語データの前処理とLLM-as-a-Judge の活用
yyo616
4
1k
Docusaurus を使った開発ドキュメントの作成と運用
yyo616
0
380
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
27
8.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Building Flexible Design Systems
yeseniaperezcruz
324
37k
Designing for Performance
lara
604
68k
From Idea to $5000 a Month in 5 Months
shpigford
378
46k
Typedesign – Prime Four
hannesfritz
39
2.3k
Music & Morning Musume
bryan
46
6k
The Pragmatic Product Professional
lauravandoore
30
6.2k
Unsuck your backbone
ammeep
667
57k
The Invisible Customer
myddelton
119
13k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
Transcript
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 まとめ ありがとうございました︕