Context and Problem Statement¶

End-to-end (E2E) testing is essential for validating that our application works correctly from a user's perspective. We need to select an E2E testing framework that provides reliable test execution, good developer experience, and integrates well with our CI/CD pipeline.

Decision Drivers¶

• Cross-browser testing capabilities
• Reliability and stability of tests
• Developer experience and ease of use
• Integration with our CI/CD pipeline
• Debugging capabilities
• Performance and execution speed
• Community support and documentation

Considered Options¶

• Cypress

Decision Outcome¶

Chosen option: Cypress

We have decided to use Cypress for E2E testing in the Newgotiate UI application due to its developer-friendly experience, robust debugging tools, and strong community support.

Reasoning¶

1. Developer Experience: Cypress provides an intuitive, interactive test runner that makes writing and debugging tests more accessible for developers of all experience levels.

2. Debugging Capabilities: The time-travel debugging, snapshot feature, and detailed error messages in Cypress significantly reduce the time spent debugging test failures.

3. Community and Ecosystem: Cypress has a large community, extensive documentation, and a rich ecosystem of plugins that address most of our testing needs.

4. CI Integration: Cypress Dashboard provides insights into test runs, parallelization, and failure analysis that integrate well with our CI/CD pipeline.

5. Component Testing: Cypress now supports component testing, allowing us to use the same tool for both E2E and component tests.

Implementation Notes¶

• Tests are located in the cypress directory
• We use Cypress Testing Library for more maintainable selectors
• Custom commands are defined in cypress/support/commands.js
• We leverage MSW for API mocking in Cypress tests

Consequences¶

• We need to be mindful of Cypress's same-origin policy limitations
• Team members should be trained on Cypress best practices
• We should establish consistent patterns for test organization and data setup

Pros and Cons of the Options¶

Cypress¶

• Good, because it provides an excellent developer experience with its interactive test runner
• Good, because it has comprehensive debugging tools with time-travel and snapshots
• Good, because it has strong community support and extensive documentation
• Good, because it offers built-in waiting mechanisms that reduce flakiness
• Good, because it now supports component testing alongside E2E testing
• Bad, because it has some limitations with cross-domain testing
• Bad, because it doesn't support testing multiple browser tabs natively
• Bad, because it has historically been limited to Chromium-based browsers (though this has improved)

Links¶

• Cypress Documentation