案件概要

クライアントが使用している顧客管理システムはReact.js を基盤とする UIシステムを運用しています。
システム自体は安定稼働しているものの、頻繁なカスタマイズや新機能追加に伴い、改修後の不具合リスク低減と品質担保のため、UI 自動テストの導入を求めていました。

本プロジェクトの目的は、更新のたびに必要なUI 検証を効率化し、システムの信頼性を継続的に高める自動テスト基盤を設計・実装することです。

利用した技術スタック及び開発ツール

• プログラミング言語：Java, Javascript
• フロントエンドフレームワーク：React.js
• バックエンドフレームワーク：Jave
• データベース：Oracle, PostgreSQL
• タスク管理ツール：Redmine
• コミュニケーションツール：Slack
• テスト自動化ツール：Cypress

クライアントの課題

エンドユーザーごとに仕様を変更する必要があり、そのためため少しでも作業を効率化する必要がありました。

・改修後の不具合リスク：
UI の変更やカスタマイズにより、テストケースの漏れがあると意図しない不具合が生じやすい

・手動テストの工数増大：
アップデートのたびに UI 全体の再確認が必要で、検証に時間・工数がかかる

・UI と API の連携検証：
UI とAPI を分離運用しており、相互作用の検証が複雑

・開発スピードの確保：
検証時間を短縮し、開発サイクルを短くしたい

クライアントの要望

本プロジェクトに於いてクライアントから下記の要望をいただきました。

• UI 向けの自動テストシステムを構築し、高精度・高効率で運用できること
  現在、仕様のアップデート時に手動で行っているUIテストを自動化をして、高い精度で効率よく運用することが求められました。

• 既存の開発プロセスへ容易に統合でき、UI–API 連携の検証にも対応すること
  今までの開発プロセスでも統合ができるようにして、API連携がひつような検証にも対応ができることが求められました。

• 指定された要件を満たしていること
  各アップデート後の不具合発生リスクを最小化し、手動テストに比べてテスト時間が効率向上。また今後の新機能追加の際には新機能とのコンフリクトする可能性を下げ。拡張性が容易になること。

当社の提案及びアプローチ

• 自動テストツールの調査・選定
  現行システム（UI：React.js、API：分離）の特性を踏まえ、UI と API の相互作用検証に強い Cypress を採用しました。
  実利用に近い検証ができることや通信の可視化、レポート出力などの連携が容易である点なども評価対象としています。

• 自動テスト基盤の設計・実装
  主要機能のフローのテストシナリオ設計を行い、変更に強く、保守・拡張が容易なテストコード構成を採用。

• スムーズな納品と丁寧な運用解説
  代表的な実運用ケースでの検証を実施。
  運用手順もあわせて納品し、クライアントが容易に利用・運用できるようにしました。