Initial steps
- Download vs code- https://code.visualstudio.com/download
- Clone repository from github- git clone git@github.com:KhairunNaharNowrin/End-to-End-Testing-With-Cypress.git
- Now open the project folder in VS Code.
Set the environment
- 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
- 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.
- 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
- 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.
Top comments (0)