2/27 PlaywrightでE2Eテストを実装
PlaywrightでE2Eテストを実装しています。
クライアントから以下の点が分からんと言われたので対応策考えながらの実装です。
・classやidはテスト用に整ってないからDOMの取得方法を検討してほしい
・テストケースを綺麗に整えてほしい
DOMの取得方法
まずDOMの取得はdata属性を付与するようにしました。
classやidでも取得できますがテスト用に振り分けた方がより独立性を保てて良さそう。
class名やid名の変更などに影響を受けてしまいますからねぇ。
E2Eテストで有名なcypressのドキュメントを見てみると、
data属性を付与するのがベストだよって書いてました。なるほど。
テスト自動化ツールのAutify社のブログにもidの変更を伴う修正が困難になるので、
data属性がいいぞとのこと。ありがたい記事です。
以上からdata属性を利用することにしました。
ちなみにplaywrightのドキュメント読んでると「data-testid」を付与してあげて
getByTestIdで取得するといいぞって書いてたので習おうと思います。
HTML側
<button data-testid="directions">Itinéraire</button>
playwright側
await page.getByTestId('directions').click();Page Object Model について
テストコード綺麗に整えてほしいとのことだったので、
Page Object Model とやらを導入してみました。
Playwrightのドキュメントの説明はこちら。
ドキュメントだけだとちょっと分かりにくいですね。
要は、
①画面の情報取得や操作に関するオブジェクトクラスと
②テストを実行するテストクラス
に分けるということですね。
①のオブジェクトクラスでは、
テスト中に行いたいクリックや入力などの操作と
そのために必要なDOMの取得などを記載していきます。
②のテストクラスでは、オブジェクトクラスの操作や取得したDOMを呼び出しつつ
アサーションの判定を中心に記載していきます。
こうすることで、テスト判定はテストクラスを見ればよく、
画面の変更があった場合はオブジェクトクラスを修正してあげれば、
それを呼び出すテストクラスが漏れなく修正されるということですね。
画像で視覚的に見やすかった記事
コードを踏まえて分かりやすい記事
E2Eテストで必要そうな情報がまとまったのでセコセコ書いていこうと思います。
