Experience Report: Migrating Angular E2E Tests from Protractor to Cypress

Background of Migration from Protractor to Cypress

Protractor, the existing official Angular support library, required migration due to its discontinuation in 2022 and changes in JavaScript standards that rendered existing features such as asynchronous handling unnecessary. Accordingly, Cypress, recommended in the Angular documentation, was selected. Cypress's Automatic Waiting feature simplified the writing of asynchronous code and resolved intermittent rendering failure issues, thereby improving test reliability. Additionally, fast execution times were secured through features such as Headless mode.

Test Strategy and Implementation

To reduce the maintenance burden of Visual Regression testing, functional tests that traverse the DOM tree were adopted. Instead of the Page Object pattern, data-cy attributes were used to traverse the DOM, and a Webpack plugin was used to remove these attributes during the build process so they would not be exposed. In situations where API calls were difficult, Cypress's Intercept feature was used to wait for responses or apply Mocking.

Scenario Composition and Results

The tests were composed of 8 independent scenarios at the page level, designed to allow dependencies within a scenario while maintaining independence between scenarios. This enabled file-level test execution, improving development efficiency. The introduction of Cypress reduced the frequency of test failures and saved maintenance resources, but due to trial and error in refactoring caused by a lack of initial learning, the importance of securing time for preliminary learning was emphasized.