E2E Testing with Cypress

Cypress is an end-to-end testing framework that provides a modern approach to testing web applications. Spryker provides a Cypress boilerplate project with a pre-configured setup, best practices, and examples for testing Spryker-based applications. The boilerplate is built to run against the Spryker B2B Marketplace demo shop, which you then adapt to your own project.

Cypress boilerplate

For comprehensive information on setting up and using Cypress with Spryker, refer to the topics described below. The Cypress-boilerplate tests are built into the Spryker B2B Marketplace demo shop and located in the folder tests/cypress-boilerplate.

The boilerplate does not include the following:

• Complete test coverage: add and adjust the example tests to fit your project.
• Correct locators: the locators in the boilerplate are based on the Spryker B2B Marketplace demo shop. Adjust them to match your project.

Cypress skills in the AI Dev SDK

Two AI Dev SDK skills cover the work described on this page: adopting the boilerplate as your own suite, and the day-to-day test writing that follows.

Run cypress-migration once when you adopt the boilerplate. It handles the adaptation this page describes — replacing the demo shop locators with your project’s and wiring the CI jobs — and then use cypress-tests for ongoing test work.

For the full list of skills and agents, see Workflows, Skills, and Agents.

Topics

• What is E2E testing?: An introduction to end-to-end testing, covering how it works, its benefits, and common use cases.
• Identifying what to test: Guidance on identifying the most important aspects of your application to cover with E2E tests, and what to avoid.
• Cypress boilerplate project structure: The layout of the project and the purpose of each directory and file.
• Getting started with the Cypress boilerplate: Step-by-step instructions for setting up the Cypress boilerplate project on your local machine.
• Cypress best practices: Recommended practices for writing effective and maintainable Cypress tests.
• Cypress boilerplate naming conventions: Guidelines for naming files, folders, and other project elements to maintain consistency and clarity.
• Cypress test writing conventions: What you must, must not, and should do when writing a test.
• Configuration and environment variables: How to configure the Cypress environment and manage environment variables.
• Cypress boilerplate plugins and libraries: An overview of the plugins and libraries used in the project, and their purposes.
• ESLint and Prettier in the Cypress boilerplate: How to set up and use ESLint and Prettier to ensure code quality and consistency.
• HTML reporter: How to set up and configure cypress-mochawesome-reporter to generate HTML reports of your test results.
• Cypress commands vs scenarios: A comparison of Cypress commands and scenarios, with examples and best practices.
• Validate API responses against a schema: How to add schema validation to your tests.
• Debugging Cypress tests: How to debug, pause, and step through test execution, and inspect the inputs and outputs of test steps.
• Integrating Cypress tests into CI: How to integrate Cypress tests into a continuous integration pipeline.

Internal Cypress tests

Cypress tests are used by Spryker for internal testing of the core Spryker features as well. You should remove the mentions of cypress-tests from composer.json. You can re-use and customize these tests for your project, however, Spryker does not guarantee these tests will work on your project, if you keep them. Spryker recommends using boilerplate tests instead of these and extending them to cover your functionality.

The cypress-migration skill performs this replacement, including the composer.json cleanup.