【輪読会レポート】［入門］Webフロントエンド E2E テスト PlaywrightによるWebアプリの自動テストから良いテストの書き方まで 第6章「実践的なテクニック」

はじめに

こんにちは。ラクス フロントエンドチームのたぐちです。

今回は輪読会の実施レポートvol.4です。

書籍と読書範囲

［入門］Webフロントエンド E2E テスト PlaywrightによるWebアプリの自動テストから良いテストの書き方まで(画像はこちらより引用)

今回の読書範囲は第6章 実践的なテクニックのP100～P134です。

議論・意見交換

議論の様子(miro)

学び、ギモン、その他の三軸で付箋を張り付け、付箋の内容を左上から順に読んで議論していきました。
実際の議論順で内容を確認していきます。

学び

• 6.2 認証処理を跨がずにテストをしたいけど、検証環境でフェイクの認証を用意することはできるのか？

• 認証が不要な検証環境欲しいな〜

検証環境でフェイク認証を用意できるのか？という疑問が出ました。
自動ログイン機能があるプロダクトであればそれを活用できそうですが、それ以外ではわざわざ特別な環境を用意しなければならないため、難しそうです。

• P102 画像にgitのcommit hash書き出せるの便利

スクリーンショットに時間やファイル名を入れたい時に便利そうです。
ただし、reg-suitなどのスクリーンショットの比較ツールとの相性は要確認です。

• P113 localStorageやCookieの中身を標準APIでJSONで書き出せるのってなんやかんやでPlaywrightだけ説

少し調べた感じだと、Cypressでは同様の機能は見つけられませんでした。

• P119 abort()でassets系のリクエストも中断できるの良さそう。画像読み込みエラーとかテストサボりがち

SNSサービス等では、画像の削除等で読み込みエラーになりうるので、出番がありそうですね。

• 6.2.1 JWTクレームを使用してテストするパターンを初めて見た気がする

バックエンドのリクエストをモックするパターンはよく見かけますが、本物のリクエストでテスト出来るようにする今回のパターンは初めて拝見したため、勉強になりました。

• 6.2.2 setup用のスクリプトで認証突破してセッション情報使いまわすのすごい便利そう

毎回ログイン実行をしなくて済むので、E2Eテスト実行時間の削減に繋がりそうです。

• リスト6.7 セッション情報使い回すの楽そうだけどテストの実行時間が長くてセッション切れ起こしたらテストがフレーキーになって面倒そう

セッション切れ用の対策（一定時間経過後に再度実施など）をつけられるとテストが不安定にならなくて良さそうです。
そのような機能もサポートされているんですかね？

• 6.3.2 レスポンスの全パターンをモックするのは大変すぎるからやるならユニットテストでやりたい

画面の表示確認のためにレスポンスをモックするのは大変なので、E2Eテストレベルでなく、ユニットテストレベルで実施したいという意見でした。

• 6.4.2 > Windows上でWebKitの挙動を確認したい場合に... そういう使い方もあるのか

Mac特有の問題を修正したい場合に、実装やレビューでWindowsユーザーが対応できない問題があったので、その解決策になりそうです。

• 6.4.3 install-deps初知り CIこれに置き換えたい

依存関係のインストールを別でやる必要がないので、CIなど真っ新な環境での依存関係インストールに役立ちます。

• 6.4.6 JSをオフにする設定、最近Progressive Enhancementの話題をよく聞くから出番ある…かも？

• リスト6.25 JavaScriptの有効化はプログレッシブエンハンスメントできてるかのテストで地味に役立ちそう

JSをオフにする設定は、Progressive Enhancementの話題が増えている今、出番がありそうですね。

• リスト6.21 ジオロケーション設定できるのプロダクトによっては助かりそう

マップ系アプリのテストで重宝しそうです。

ギモン

• スクリーンショットはコンポーネント単体を撮るべきかページ全体を撮るべきかわからない

目的によりますが、ライブラリバージョンアップ時のデグレード防止なら、コンポーネント単位でインタラクションまで確認するのが良さそうな気がしますが、これは意見が分かれそうですね。

• P132 geolocation、使う機会はあるのか...

学びでも記載した内容です。モバイルアプリでは一般的ですが、Webでも需要があるのか気になります。

• P134 プロダクトによって、JS無効化した時のテストは必要かなあ

学びでも記載した内容です。「JS無効でも動作してほしい」という要件があれば必要ですね。

• Playwrightでモバイルのスクショ取る時ってSafeAreaはどうなるんだろう

モバイルは画面の上部や下部にセーフエリアがあるため、端末によってその差が出るのか確認が必要かもしれません。

その他

• Microsoft Edgeがchromiumベースになったの2020年だった(最近のことだと思ってた...)

最近のことのように感じますが、意外と時間が経っていました。
IEの時代が長かったのも時が経つのが早いと感じる一因になっていそうです。

まとめ

今回の輪読会レポートは以上です。
次回開催は07/30(火)の予定ですので、お楽しみに！

---

終わりに

ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っています。ご興味ありましたら是非ご確認をお願いします。

採用情報

https://career-recruit.rakus.co.jp/engineer_jobs/frontend_tokyo/
https://career-recruit.rakus.co.jp/career_engineer/

イベント情報

https://rakus.connpass.com/