本記事は、CTOA若手エンジニアコミュニティで登壇したときの内容です。
内容
- よく言われるE2Eテストの課題
- Playwrightの導入から実行を実演
- 一番の課題とは
CTOA若手エンジニアコミュニティの紹介
本コミュニティはCTO協会エンジニア育成WGの活動の一貫での取り組みとなります。その目的は、若手エンジニアの交流を通し、会社を超えた同期作りやその中での学びを促進することにあります。
参加条件は新卒やインターン生、ないしソフトウェアエンジニアとしてキャリアチェンジしたもののまだ経験が浅い方、その他若手と自認する方となります。
現在はDiscordでのオンラインコミュニティを中心に勉強会や交流などを企画・運営が始まったところで、Discordには約90名ほどが参加しています。
今後、コミュニティの活動として下記のようなものも検討しています。
・オフラインでの勉強会・交流会
・テーマごとの輪読会
・会社の枠を超えての研修
・CTO協会所属のCTOたちとのメンタリング
その他、参加される皆様の要望も汲みながらコミュニティの活動内容は、随時追加していきます。
(今回参加した第４回イベントのPeatixから引用)
3,4ヶ月に1回のペースでオフラインイベントを開催しています。
よく言われるE2Eテストの課題
テスト設計が難しい
「E2Eテストで確認するべき箇所はどのような動作なのか」や確認箇所を決めた後に「テストが広がってしまう」など、テスト設計が１つの課題と言われています。
テスト設計を適切に行えないと、テストのカバー範囲が大きくなってしまいフレーキーな（落ちやすい）テストになってしまいます。逆にテストのカバー範囲が小さすぎてしまうと、テストをする意義や価値がなくなってしまいます。テスト設計が重要であり、テスト設計が難しいと言われる所以です。
しかし、テスト設計には絶対的な正解はなく、作っていく中でより良いテストを作るコツなどを掴んでいくしかないと考えています。そのため今回はテスト設計に関しては述べません。
導入にコストがかかる
E2Eテストを導入するコストには、ツールの導入、テストの作成が含まれています。
今回の登壇の趣旨は、導入コストは意外とかからないと言うことを実演と共にお話しできればと思います。
Playwrightの導入から実行を実演
Playwrightを導入する
今回使うツールは主にPlaywightとVSコードです。
（Playwightをインストールするのには、npm/yarn/pnpmのいずれかが使える環境が必要です。）
npm init playwright@latest
playwrightの最新版を入れることを明示的にして、インストールしていきます。
聞かれること
（当日は時間が限られていたので、全てデフォルトのものを選択しました。）
? Do you want to use TypeScript or JavaScript? …
TypeScriptで書くかJavaScriptで書くかを聞いています。
ご自身で好きな方をインストールしてください。
Where to put your end-to-end tests?
テストディレクトリはなんという名前にするかを聞かれています。
デフォルトではtestsになっています。
Add a GitHub Actions workflow?
GitHub Actionsで実行するためのworkflowファイルは必要かどうが聞かれています。
デフォルトではfalse（いいえ）が選択されています。
Install Playwright browsers (can be done manually via 'npx playwright install')?
Playwight用のブラウザをインストールするかどうかを聞かれています。
デフォルトではtrue(はい)が選択されています。
playwrightを実行
インストールが終わったら、テストを実行してみましょう。
サンプルテストが用意されているのでnpx playwright testで実行できます。
6 passedと表示されているので、テストが成功したことがわかります。
npx playwright testではなにが起こっているのがわからないので、GUIを表示してテスト実行もしてみます。
npx playwright test –debugでブラウザ表示をさせながら実行できます。
テストを作成する
独自のテストを作成していきます。
npx playwright codegenを実行すると、ブラウザが２つ開きます。
大きいブラウザを操作することで、その操作に合ったテストコードが小さなブラウザに表示されます。
これでplaywrightの導入は終了です。
一番の課題とは
導入の簡単さは感じていただけたかと思います。
しかし、E2Eテストの一番の課題は「保守の大変さ」にあります。
保守が大変な訳
例えば、アカウント作成ボタンの文言が「アカウント作成(無料)」から「アカウント作成」に変更されただけで、E2Eテストが落ちるようになってしまいます。
（以下のような質問がありました。
Q,こういった変更に強くするにはどうすれば良いのか。
A,確実に落ちなくするには全ての要素にidをつけることです。しかし、それは現実的ではありません。なので変更が起きやすい箇所にはdata属性をつけることが解決策として挙げられています。）
まとめ
E2Eテストを実演で導入することで、導入の簡単さは実感していただけたかと思います。
このLTで覚えて帰っていただきたいことは
- 大変なのは保守！
と言うことです。
どのE2Eツールを使おうが大変なことは保守であることは、同じだと思います。
各人が各社でE2Eを導入しようとなった時に、今日の話を思い出していただけると幸いです。
参考資料
E2Eテストとは？メリット・デメリットと実施方法を解説 E2Eテストとは？ Playwrightのインストール方法と使い方 なぜE2Eテストでidを使うべきではないのか
ポップアップストアや催事イベント向けの商業スペースを簡単に予約できる「SHOPCOUNTER」と商業施設向けリーシングDXシステム「SHOPCOUNTER Enterprise」を運営しています。エンジニア採用強化中ですので、興味ある方はお気軽にご連絡ください！ counterworks.co.jp/
Discussion