End-to-End Testing With Cypress
Published: 2024-05-07 09:52:23

**<u>Initial steps</u>**

1. Download vs code- https://code.visualstudio.com/download
2. Clone repository from github- git clone git@github.com:KhairunNaharNowrin/End-to-End-Testing-With-Cypress.git
3. Now open the project folder in VS Code.

**<u>Set the environment</u>**

1. Initialize a New Node.js Project: Open a terminal, navigate to your project directory, and run the following command to initialize a new Node.js project:

```
npm init -y
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vmr68t83t7v4t9cwnmbj.png)

2. Install Cypress: Install Cypress as a development dependency in your project using npm:

```
npm install cypress --save-dev
```
3.Opening Cypress: After the installation is complete, you can open Cypress with the following command:

```
npx cypress open

```

- After run this command it will open cypress modal
 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ntzk9hptl41m7zuunt97.png)
- After click on **Continue** button it will open testing type modal. Select **E2E Testing**.
 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kb2wwpcyx35eu9wvc41t.png)
-  After select the **E2E testing** it will oprn Configuration files modal. Click on **"Continue"** button.
 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gflnhmmqgr6x4kza6kaz.png)

- Select preferable browser and Start E2E Testing. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6a4krbl8bptt1334v8rc.png)

- After that select first spec
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/djtz0t2cvxhps9tlh0m1.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jdl43agugon3urbu4ko1.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9dzod1fikgcw7qfdcfpt.png)

4. Opening Cypress: After the installation is complete, you can open Cypress with the following command:

```
npx cypress open

```
This command will open the Cypress Test Runner, where you can write and run your tests.

<u>**Project Setup**</u>

1. Disabling watchForFileChanges: false , in **cypress.confiq.js** improves performance and control by preventing automatic reloading of application files during test runs.

```
module.exports = {
  e2e: {
    watchForFileChanges: false,
    setupNodeEvents(on, config) {
      // implement node event listeners here

    },
  },
};

```
<u>**Page Object Model (POM) pattern:**</u>

```
└── cypress
    ├── fixtures
    │   └── (static data files)
    ├── integration
    │   └── (test files)
    ├── plugins
    │   └── (Cypress plugins)
    ├── support
    │   ├── commands.js
    │   ├── index.js
    │   └── (other support files)
    ├── page objects
    │   ├── LoginPage.js
    │   ├── HomePage.js
    │   └── (other page object files)
    ├── utilities
    │   └── (utility functions)
    └── (other Cypress configuration files)


```

- fixtures: Contains static data files used by tests.
- integration: Contains test files.
- plugins: Contains Cypress plugins.
- support: Contains helper functions, custom commands, and global configuration.
- page objects: Contains page object classes representing different pages of the application.
- utilities: Contains utility functions shared across tests.



**<u>Generating Detailed Reports with Plugins</u>**

<u>Install the Plugin:</u>
```
npm install --save-dev cypress-mochawesome-reporter
```
Update Cypress Configuration: Update **cypress.config.js** to include the reporter configuration.

```
const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      require('cypress-mochawesome-reporter/plugin')(on);
    },
    reporter: 'cypress-mochawesome-reporter',
    reporterOptions: {
      reportDir: 'cypress/reports',
      overwrite: false,
      html: true,
      json: true,
    },
  },
});
```
<u>Create a Report After Running Tests:</u>

```
npx cypress run
```

<u>View the Report:</u>

The report will be saved in the cypress/reports directory.
Open the generated HTML file in a browser to view the detailed report.