Getting Started with Cypress E2E Testing

Introduction

Cypress is a powerful tool for End-to-End (E2E) & Component testing, enabling you to test the functionality of your web applications in a real browser environment. This guide will walk you through the basics of setting up and running E2E tests with Cypress.

Prerequisites

Before you start, ensure you have the following:

Node.js installed on your machine.
npm (Node Package Manager) for managing dependencies.

Environment Variables

To log in and handle sensitive data securely, you need to configure environment variables. Create a .env file in the root of your project directory and add the necessary environment values. For example:

CYPRESS_ADMIN_EMAIL=user@example.com
CYPRESS_ADMIN_PASSWORD=yourpassword

Note that, when creating env for Cypress, it is very important to have CYPRESS_ as the starting text or else it wont work, just like you would put REACT_ in a react app.

Installation

Initialize Your Project:

If you haven’t already set up a Node.js project, initialize one by running:
Terminal window
```
npm init -y
```

Note that this project already has it setup so no need to run it.

Open Cypress: Before running cypress, ensure that your frontend and backend servers are running. Open Cypress for the first time to generate the necessary folder structure and example tests:
Terminal window
```
npx cypress open
```
This command will open the Cypress Test Runner and create the following directories:
- cypress/fixtures/ – For storing fixture data.
- cypress/integration/ – For storing your test files.
- cypress/support/ – For storing custom commands and configurations.

Writing Tests

Create a Test File: Create a new test file in the cypress/e2e/ directory. For example, you can create a file named example.spec.js.
Write Your Test: Inside the test file, you can write your test using Cypress commands. Here’s an example:

describe('My First Test', () => {
   it('Visits the Invoices Page', () => {
      cy.visit('http://localhost:3000');
      cy.contains('Welcome back!');
   });
});

describe is used to group related tests.
it defines a single test case.
cy.visit navigates to the specified URL.
cy.contains checks for the presence of specific text on the page.

Running Tests

Run Tests in the Cypress Test Runner:

You can run tests interactively by opening the Cypress Test Runner:
Terminal window
```
npx cypress open
```
This will allow you to see your tests running in a browser and view their results.
Run Tests in Headless Mode: To run tests in headless mode (without opening the browser), use:
Terminal window
```
npx cypress run
```
This is useful for Continuous Integration (CI) environments.

Custom Commands

You can define custom commands in the cypress/support/commands.js file to simplify your tests. For example

Cypress.Commands.add('getByData', (selector) => {
return cy.get(`[data-test=${selector}]`);
});

Usage in Tests

cy.getByData('login-email-input').type('user@example.com');

This command selects elements based on the data-test attribute, making your tests more readable and easier to maintain.

Cypress Documentation