【TECH BLOG】Cypressのカスタムコマンドを用いたVue.jsの効率的なE2Eテスト実装

こんにちは、EC基盤本部・MA部・MA基盤チームでマーケティングオートメーションのシステムを開発している長澤（@snagasawa_）です。この記事では、CypressによるE2EテストをVue.jsプロジェクトへ導入した取り組みについて、実際の画面を交えてご紹介します。このE2Eテストによって、複雑な入力フォームを自動でテストできるようになり、修正後のバグを検知しやすくなりました。E2Eテストの導入を検討されている方の参考になれば幸いです。

Vue.jsプロジェクトの技術スタック

今回Cypressを導入したプロジェクトの主な技術スタックは以下の通りです。

• Vue.js
• TypeScript
• Vuetify
• Open API

導入背景

E2Eテスト導入の理由は、複雑な入力フォームを動作保証するためです。

我々のチームでは、Line Friendship Manager（以下、LFM）という名前のLINEメッセージ配信ツールを開発・運用しています。詳細は割愛しますが、任意のユーザーセグメントに対してLINEメッセージを配信できる社内向けのマーケティングツールです。このプロダクトでは以下のような複雑な入力フォームが複数画面に渡って存在しています。

続きはこちら