[Playwright] 0から勉強して導入した話
はじめに
この記事では、社内 PJ にPlaywright を導入した体験談 についてをまとめております。
結論
導入背景
なぜ、Playwright を導入するようになったのか?
新規のプログラムに対しては、以前からバックエンド側でユニットテストを実施しておりました。
しかし、既存のプログラムは一部フロントエンド側で計算処理を行っていたため、満足するユニットテストを実施する事が出来なかった。
ですが、Playwright の導入により、
既存のプログラムに対して、フロントエンド側/バックエンド側の計算処理のテストを実施することが可能になるから
良かった点
1. 各環境のテスト工数の軽減
現 PJ のリリースまでのテストフローは下記の通りでした。
- ローカル環境でテストを行う
- DEV 環境でテストを行う
- STG 環境でテストを行う
- PRD 環境でテストを行う
最低でも 4 回同じ内容のテストを以前までは、手動手動確認で行っておりましたが、(丸一日手動テストする日もありました)
Playwright(自動化テスト)のおかげで 2~4 まではテストの実行結果を見守るだけになりました。
2. デグレに対するストレス軽減
Playwright をコーディング最中にプログラムミスや意図しない挙動を発覚することがありました。
以前は、手動確認だったので 1 から手動確認を行っており苦労しました。
しかし、これまで作成した Playwright を再度実行するだけで良くなりました。
苦労した点
1. HTML のエレメント要素がぐちゃぐちゃ
既存のプログラムは、綺麗に表示されていれば問題ない HTML になっていました。
そのため、目的のデータを取得したいのに label 等がなく苦肉の策でデータを取得する Playwright になってしまった。
2. ロード時間
各機能やページに対してロードを示すデータが異なっていたため、それらを内包する関数の作成が難しかった
また、ロード待機関数をちゃんと作成してもロード中のデータを取得しようとしundefinedでテストが失敗するケースが散見されました。
工夫した点
1. ラッパー関数を作成
Playwright の既存関数を使用しても何も問題はないのですが、行数が増えたり、可読性が低下によって、
Playwright が他メンバーに受け入れにくいを避けるためにシンプルなテスト攻勢を意識しました。
- await page.goto('https://www.google.com');
+ await openPage(page, 'https://www.google.com');
2. sleep 時間をむやみに使わない
ページが完全に表示されるまで、多めの sleep 時間を設けることでロード時間の対処することはできます。
しかし、テスト件数が何百件の場合、テスト件数 * 多めの sleep 時間 = 何時間 という単位になります。
なので、sleep 時間を極力使用せず、下記コードのように活用しました。
// ネットワークがアイドル状態になるのを待つ
await page.waitForLoadState('networkidle');
YouTube のご案内
ポモドーロタイマー（25 分勉強＋ 5 分休憩）を活用した作業・勉強配信を行っています。
集中したいときや、誰かと一緒に頑張りたいときに、ぜひご活用ください。
ご興味のある方は、ぜひお気軽に遊びに来てください！
「Zenn から来ました!!」とコメントを貰えると泣いて喜びます 🤣
Discussion