End-to-End Testing With Cypress

Initial steps

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

Set the environment

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

1. 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
• After click on Continue button it will open testing type modal. Select E2E Testing.

• After select the E2E testing it will oprn Configuration files modal. Click on "Continue" button.
  

• Select preferable browser and Start E2E Testing.
  

• After that select first spec
  
  
  

1. 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.

Project Setup

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

    },
  },
};

Page Object Model (POM) pattern:

└── 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.

Generating Detailed Reports with Plugins

Install the Plugin:

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,
    },
  },
});

Create a Report After Running Tests:

npx cypress run

View the Report:

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