πŸ› οΈJobsity Challenge: Test Automation with Cypress for Magento E-Commerce πŸ›’

June 25, 2024 Β· View on GitHub

Unveiling_the_New_Jobsity_Brand_Your_Vision_Our_Talent_In_38f2525cd2 (1)

Welcome to the Jobsity Challenge! This project involves creating automation scripts for "Orders and Returns" validations on a Magento E-Commerce website. The objective is to ensure the robustness and reliability of the e-commerce platform by leveraging cutting-edge tools and best practices in test automation.

πŸ“š Table of Contents

πŸš€ #Project Overview

This repository contains the test automation scripts for the "Orders and Returns" functionalities of a Magento E-Commerce site. The scripts are designed using the Page Object Model (POM) design pattern to enhance code reusability and maintainability.

πŸ› οΈ Tech Stack

  • TypeScript & JavaScript
  • Cypress: The idea behind selecting this tool is because it's fast, reliable and a featured tool.
  • POM Design Pattern
  • FakerJS: To generate Dynamic Data
  • Docker-Compose
  • GitHub Actions
  • Allure Report: A flexible lightweight multi-language test report tool.

🏁 Getting Started

Prerequisites

Ensure you have the following installed on your local machine:

  • Node.js
  • Docker
  • Docker-Compose

Installation

  1. Clone the repository:

    git clone https://github.com/Moaaz-Adel/Jobsity-Challenge.git
    
  2. Change the current directory to be inside the cloned repo:

    cd Jobsity-Challenge
    
  3. Install dependencies:

    npm install
    

πŸ“‚ Project Structure

Jobsity-Challenge/
β”‚
β”œβ”€β”€ cypress/
β”‚   β”œβ”€β”€ fixtures/          # Test data files
β”‚   β”œβ”€β”€ e2e/               # Test cases
β”‚   β”œβ”€β”€ plpages          # Page Obejects
β”‚   β”œβ”€β”€ support/           # Custom commands and POM
β”‚
β”œβ”€β”€ docker-compose.yml     # Docker Compose configuration
β”œβ”€β”€  cypress.config.ts      # Cypress Configureation
β”œβ”€β”€ package.json           # Project dependencies
β”œβ”€β”€ tsconfig.json          # TypeScript configuration
└── README.md              # Project documentation

▢️ Running the Tests

To run the tests Locally type the following commands:

  1. Interactive Mode: npx cypress open (open the tests with the browser)
  2. Headless Mode Without generating Allure Report
    1. npm run cy:test:run
    2. Will generate a mocha report only (Report located in "cypress/reports/index.html")
  3. Headless mode with Allure Report Enabled:
    1. npm run cy:test:report
    2. Will generate an allure report automatically & Mocha report
  4. One Command to run Tests in Headless Mode, Generate report and serve it automatically:
    npm run allure:clear ; npm run cy:test:run ; npm run allure:generate ; npm run allure:serve
    

Test Result:

image

Note

Test Run Screen Records available on Notion

πŸ₯‰ Using Docker-Compose

Just run the following Command:

    docker-compose run e2e-chrome

And to run on different browsers replace "chrome" with:

  • e2e-firefox
  • e2e-electron

Note: You can run on all browsers using the command without specifying the browser type:

    docker-compose run

and to try different browsers replace chrome with:

e2e-firefox e2e-electron

βš™οΈ Continuous Integration

The configuration file for GitHub Actions is located in .github/workflows/.

Triggering CI Pipeline On each pull request or push to the main branch, the CI pipeline will be triggered automatically.

image

Tip

Test Run Screen Records available on Notion

πŸƒβ€β™‚οΈ Test Results:

Allure Report (If allure is installed):

image

Mocha Awesome (Always will be generated):

image

πŸ“Š Reporting

Generate Allure Report Run the tests with Allure:

    npx cypress run --env allure=true

Generate the report:

    allure generate allure-results --clean

Serve the report:

    allure Serve

Notes:

All interactions are configured and refactored to include:

"Retries" to decrease Flakeness

The refactored methods are documented for ease of use and understanding

Following Page Object Model (POM) Design Pattern

Following Coding Standards and Best Practices

Happy Testing! πŸš€βœ¨