E2E testing is a valuable part of the SDLC for any frontend application. It can help to ensure that changes to the application do not break existing functionality, and it can also help to identify bugs that might not be caught by unit or integration tests.

Cypress is a great choice for E2E testing because it is easy to use, has a good test runner, and provides a lot of flexibility in how you can write your tests. It is also open source, which means that there is a large community of users and contributors who can help you troubleshoot problems and find new ways to use the framework.

Cypress Directory

The directories and files in a Cypress project contain different configurations that are used to build E2E tests.

• fixtures: This directory is used to store mocks or stubbed responses for your tests. This can be useful for testing APIs or other external resources.
• integration: This directory is where you place your actual test .spec.js files. These files contain the code that you use to interact with your application and verify its behavior.
• plugins: This directory is where you can add plugins to extend Cypress's behavior. Plugins can be used to add new commands, features, or functionality to Cypress.
• screenshots: This directory is where Cypress will store screenshots of your tests. Screenshots can be helpful for debugging tests or identifying visual regressions.
• videos: This directory is where Cypress will store videos of your tests. Videos can be helpful for debugging tests or demonstrating the behavior of your application.
• support: This directory is where you can define "commands" or boilerplate behavior that you can reference in your tests. This can be useful for avoiding the need to repeat startup tasks like login or similar flows.

Configuration

The cypress.json configuration file is used to store any configuration values that you supply to Cypress. The following lines in the cypress.json file:

{
  "projectId": "",
  "baseUrl": "<http://localhost:3000>",
  "testFiles": "**/*.spec.ts"
}

• projectId: This is a 6 character string that helps to uniquely identify your project. You can leave this empty if you are not using Cypress Cloud.
• baseUrl: This is the base URL of your application. All of your test commands will be prefixed with this URL.
• testFiles: This is a string or array of glob patterns that are used to specify the test files that Cypress should run. By default, Cypress will run all of the test files in the integration directory. You can use this option to specify specific test files or to exclude certain test files from being run.

Adding tests

Let's write our first test to see the "local" run of this in action.

Go over to the integrations folder and create a file first_test.spec.ts with the following: