Project Overview

The customer management system used by the client is operated on a UI system built with React.js.
Although the system itself has been running stably, due to frequent customizations and the addition of new features, the client required the introduction of UI automated testing to reduce the risk of defects after modifications and to ensure quality.

The purpose of this project is to design and implement an automated testing framework that streamlines the necessary UI verification for each update and continuously enhances the system’s reliability.

Technology Stack and Development Tools Used

• Programming Languages: Java, JavaScript
• Frontend Framework: React.js
• Backend Framework: Java
• Databases: Oracle, PostgreSQL
• Task Management Tool: Redmine
• Communication Tool: Slack
• Automated Testing Tool: Cypress

Client Challenges

Since specifications needed to be customized for each end user, it was necessary to improve operational efficiency as much as possible.

・Risk of defects after modifications:
Changes or customizations to the UI often led to unintended defects if test cases were missing.

・Increase in manual testing workload:
Every update required full UI revalidation, which consumed a significant amount of time and effort.

・Verification of UI–API integration:
As UI and API were operated separately, verifying their interactions was complex.

・Maintaining development speed:
Shortening verification time was crucial to accelerate development cycles.

Client Requirements

For this project, the client requested the following:

• Establish an automated testing system for UI that enables high accuracy and efficient operations
  The client required automation of the UI tests, which were previously performed manually during specification updates, to ensure high precision and efficient operations.

• Easily integrate into existing development processes and support UI–API integration testing
  The system needed to integrate seamlessly into the existing development workflow while supporting verifications that required API integration.

• Meet specified requirements
  Minimize the risk of defects after each update, improve testing efficiency compared to manual testing, and reduce the likelihood of conflicts when adding new features, ensuring scalability and flexibility.

Our Proposal and Approach

• Research and selection of automated testing tools
  Based on the characteristics of the current system (UI: React.js, API: separated), Cypress was adopted as it excels in verifying UI–API interactions. It was also evaluated highly for its ability to conduct realistic verifications, visualize communication flows, and easily generate reports.

• Design and implementation of the automated testing framework
  Developed test scenarios for major functional flows and adopted a test code structure that is resilient to changes, easy to maintain, and highly extensible.

• Smooth delivery and detailed operational guidance
  Verification was conducted on representative real-use cases. Operation manuals were delivered alongside, enabling the client to easily utilize and manage the system.