- Introduction
- Video Tutorial
- Prerequisites
- Getting Started
- Running Tests
- Project Structure
- Configuration
- Continuous Integration
- Reporting
- Other Projects
- Technical Documents
- Contacts
This repository contains a Test Automation Framework built using Cypress and Javascript for automated testing of web applications.
Click on the image above to watch the tutorials.
-
Clone the repository:
git clone https://github.com/rajatt95/TestAutomationFramework_YT_Rajat_Web_Cypress_JS.git
-
Navigate to the project directory:
cd TestAutomationFramework_YT_Rajat_Web_Cypress_JS
-
Install dependencies:
npm install
-
Open Cypress Test Runner:
npm run cy:open
-
Run tests in different browsers:
npm run cy:tests:CHROME
npm run cy:tests:FIREFOX
npm run cy:tests:EDGE
npm run cy:tests:ELECTRON
-
Run tests in different modes (Headless):
npm run cy:tests:ELECTRON:HEADLESS
The tests follow a modular and maintainable structure:
|-- .github
| |-- workflows
| |-- 01_ui_tests_chrome.yml
| |-- 02_ui_tests_select_one.yml.yml
| |-- 03_ui_tests_ALL.yml
|-- cypress
| |-- e2e
| |-- Sauce_Demo
| |-- components.cy.js
| |-- login.cy.js
| |-- fixtures
| |-- login_credentials.json
| |-- reports
| |-- support
| |-- pages
| |-- BasePage.js
| |-- CartPage.js
| |-- Components.js
| |-- LoginPage.js
| |-- ProductsPage.js
| |-- utils
| |-- VerificationUtils.js
| |-- WaitUtils.js
| |-- commands.js
| |-- e2e.js
|-- .gitignore
|-- cypress.config.js
|-- package.json
cypress/e2e
: Contains the actual test files. You can organize your tests into subdirectories as needed.cypress/fixtures
: Contains external fixtures (e.g., login credentials data) that can be used to mock data during tests.cypress/support
: Contains custom commands and global configuration.cypress/support/pages
: Contains the Page Object Model (POM) classes representing web pages and their elements.cypress/support/utils
: Contains the Utilities that provides methods for asserting different conditions on web elements, waits.cypress/reports
: Contains the report for tests.
- Modify
cypress.config.json
for Cypress configuration settings. - Customize
commands.js
and other files incypress/support
for reusable commands.
This project is configured for CI using Github Actions. Check the configuration in .github/workflows/*.yml
01_ui_tests_chrome.yml
02_ui_tests_select_one.yml
03_ui_tests_ALL.yml
Mochawesome report (Screenshots and Videos are attached by default on test failure) is stored in the cypress/reports
directory.
Feel free to reach out if you have any questions, or suggestions, or just want to chat!
Thanks for visiting my GitHub profile! π