Cypress Cucumber POC

A proof of concept to showca the implementation of Cypress as a test framework with Cucumber BDD and Mochawesome reporter integration to test the checkout flow for the "Test Automation - Big Cartel E-commerce Test Store".

---

Table of contents

• Overview
• Test Scenarios
• Pre requisites
• Setup
• Running tests
• Viewing test results
• CI/CD Pipeline
• Additional notes
• Gotcha's
• Unresolved issues - Work in progress

---

Overview

This repository demonstrates:

• Cypress Testing Framework: Utilises Cypress Studio for test recording - follow this guide to record test steps with Cypress Studio.
• Cucumber BDD: Implemented Behaviour-Driven Development for structured, readable test scenarios.
• Mochawesome Reporter: Generates detailed test result reports.
• Local Execution: Run tests locally with multiple browser options.
• CI/CD Integration: Executes tests in a Docker container via GitHub Actions, triggered on push/pull requests to the main branch and daily scheduled runs.

---

Test Scenarios

This project includes Cypress feature tests covering the following e-commerce checkout journeys:

• Contact page: Submit a contact enquiry ➝ triggers recaptcha.
• Search for an item in the store.
• View a product from search results.
• Select colour and age options from dropdowns.
• Increase item quantity.
• Proceed to the cart.
• Verify cart details, including:
  • Correct items.
  • Selected options.
  • Quantities.
  • Item prices and cart totals.

---

Prerequisites

Ensure the following are installed:

1. Node.js (LTS version recommended)
2. npm (Included with Node.js)

---

Setup

1. Clone or Download:
   • Clone this repository: git clone https://github.com/badj/cypress-cucumber-poc.git
   • Alternatively, download the ZIP file and extract it.
2. Navigate to Project Directory:

   cd cypress-cucumber-poc

3. Install Dependencies:

   npm install

---

Running Tests

1. With the Cypress Test Runner:

• For an interactive GUI to select and run specific tests.

  npx cypress open

2. Headless Mode:

• Run tests without opening a browser window (Default Electron Browser)

  npx cypress run

3. Headed Mode - No exit - Alternative Browsers: (Electron/Chrome/Firefox/Edge/Webkit)

• Run tests with the browser open, and the browser remains open when the run completed

  npx cypress run --headed --browser electron --no-exit

  npx cypress run --headed --browser chrome --no-exit

  npx cypress run --headed --browser firefox --no-exit

  npx cypress run --headed --browser edge --no-exit

  npx cypress run --headed --browser webkit --no-exit

4. Headless Mode - Alternative Browsers: (Electron/Chrome/Firefox/Edge/Webkit)

• Run tests with no browser window opening

  npx cypress run --browser electron

  npx cypress run --browser chrome

  npx cypress run --browser firefox

  npx cypress run --browser edge

  npx cypress run --browser webkit

5. Headed Mode - Alternative Browsers: (Electron/Chrome/Firefox/Edge/Webkit)

• Run tests with the browser open and closing the browser when the run completed

  npx cypress run --headed

  npx cypress run --headed --browser chrome

  npx cypress run --headed --browser firefox

  npx cypress run --headed --browser edge

  npx cypress run --headed --browser webkit

---

Viewing Test Results

After the test run completes:

• HTML Report: Generated at cypress/reports/html/ as cypress-cucumber-poc-results.html
  • To open the report automatically after a headless run:

   npx cypress run --reporter-options autoOpen=true

  • To always open the report after a run - set autoOpen to true in the Reporter Option in cypress.config.js:

  reporterOptions: {
       autoOpen: true
    }

• Video Recordings: Available at cypress/reports/html/videos/ and cypress/videos/
• Screenshots: Saved at cypress/reports/screenshots/ for test steps configured to capture screenshots.

---

CI/CD Pipeline

• 
  • Tests are executed in a Docker container using GitHub Actions.
  • Triggers on push/pull requests to the main branch and for daily scheduled runs. See the workflow configuration in .github/workflows/main.yml.

---

Additional Notes

• Ensure all prerequisites are met before running tests.
• For issues or contributions, refer to the GitHub repository.

---

Gotcha's

1. Installing Cypress dependencies using npm install failing due to an unsupported Node.js version

Your current Node.js version is older than the recommended LTS version. Cypress requires a more recent version of Node.js. As of Cypress 14.0.0, the minimum supported Node.js version is typically Node.js 18 or higher.

To resolve the issue:

1. Update Node.js using nvm (Node Version Manager) - Install Node.js 18 (LTS) or a newer version like 20

  nvm install 18

2. Switch to the new version

  nvm use 18

3. Set it as the default version

  nvm alias default 18

4. Verify the Node.js version - Ensure it’s at least v16 or higher.

  node -v

5. Verify npm version:

  npm -v

Additional steps if the steps above do not resolve it:

6. Clear npm Cache and Reinstall Dependencies → The error may be caused by a corrupted npm cache or incomplete dependency installation

This ensures a clean slate for dependency installation, avoiding issues from cached or corrupted files.

  npm cache clean --force

7. Remove the node_modules directory and package-lock.json → Navigate to the project directory

Change to the cypress-cucumber-poc project directory (example for macOS)*:

  cd [path to your repo]/cypress-cucumber-poc

8. Remove the node_modules directory and package-lock.json file:

  rm -rf node_modules package-lock.json

9. Reinstall dependencies:

  npm install

---

Unresolved issues - Work in Progress

1. Firefox runner fails to capture video recording

• Status: Investigating
• Affected Browsers: Firefox
• Severity: Low
• Impact: Video from the test run is not embedded in the test results report due to failed video capture during the Firefox test run.
• Additional Details:
  • Test run succeeds, but is unable to generate/process the video recording(s).
  • Following error printed in console at the end of the test run, during video recording processing:

Warning: We failed capturing this video.
This error will not affect or change the exit code.
Error: Insufficient frames captured to create video.
at ChildProcess.<anonymous> (<embedded>:1012:16262)
at ChildProcess.emit (node:events:518:28)
at ChildProcess._handle.onexit (node:internal/child_process:293:12)

---