Add Cypress tests for SauceDemo with GitHub Actions workflow

Author: JoanEsquivel

.github/workflows/cypress.yml

@@ -11,33 +11,48 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v2
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v2
         with:
-          node-version: 18
+          node-version: 16
 
       - name: Install dependencies
-        run: npm install
+        run: npm ci
 
-      - name: Create cypress.env.json
+      # Create cypress.env.json file using GitHub secrets
+      - name: Create Cypress environment file
         run: |
           echo '{
-            "standard_username": "standard_user",
-            "locked_out_username": "locked_out_user",
-            "password": "secret_sauce"
+            "users": {
+              "standard": {
+                "username": "standard_user",
+                "password": "secret_sauce"
+              },
+              "locked": {
+                "username": "locked_out_user",
+                "password": "secret_sauce"
+              }
+            }
           }' > cypress.env.json
 
-      - name: Run Cypress Tests
-        uses: cypress-io/github-action@v5
+      - name: Cypress run
+        uses: cypress-io/github-action@v4
         with:
           browser: chrome
-          headless: true
+          headed: false
 
-      - name: Upload Mochawesome Report
-        uses: actions/upload-artifact@v3
+      - name: Upload screenshots on failure
+        uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+
+      - name: Upload Mochawesome report
+        uses: actions/upload-artifact@v2
         if: always()
         with:
-          name: mochawesome-report
+          name: cypress-report
           path: cypress/reports 

.gitignore

@@ -1,41 +1,23 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
 # Dependencies
 node_modules/
-.pnp/
-.pnp.js
 
-# Cypress
+# Cypress generated files
 cypress/videos/
 cypress/screenshots/
 cypress/downloads/
 cypress/reports/
 
-# Environment
+# Environment variables (contains credentials)
 cypress.env.json
 
-# Testing
-coverage/
-.nyc_output/
-mochawesome-report/
-
-# Build
-.next/
-out/
-build/
-dist/
+# OS specific files
+.DS_Store
+Thumbs.db
 
-# Editors
-.vscode/
+# IDE specific files
 .idea/
-*.swp
-*.swo
+.vscode/
 
-# OS
-.DS_Store
-Thumbs.db 
+# Log files
+*.log
+npm-debug.log* 

README.md

@@ -1,89 +1,65 @@
-# Sauce Demo Cypress Tests
+# SauceDemo Cypress Tests
 
-This repository contains automated tests for the Sauce Demo website using Cypress with TypeScript.
+This project contains automated tests for the SauceDemo website using Cypress with TypeScript and follows the Page Object Model pattern.
 
-## Features
+## Test Scenarios
 
-- TypeScript for type safety
-- Page Object Model (POM) design pattern
-- Custom Cypress commands
-- Mochawesome reporting
-- GitHub Actions integration
-- Environment variables for credentials
+1. Valid Login - Tests successful login with standard_user
+2. Locked Out User - Tests error message when logging in with locked_out_user
 
 ## Project Structure
 
 ```
-├── .github/workflows     # GitHub Actions workflow files
-├── cypress               # Cypress test files
-│   ├── e2e               # Test specifications
-│   ├── fixtures          # Test data
-│   ├── support           # Support files
-│   │   ├── commands      # Custom commands
-│   │   ├── pages         # Page Object Models
-├── .gitignore            # Git ignore file
-├── cypress.config.ts     # Cypress configuration
-├── cypress.env.json      # Environment variables (gitignored)
-├── package.json          # Project dependencies
-├── tsconfig.json         # TypeScript configuration
-└── README.md             # Project documentation
+├── cypress/
+│   ├── e2e/               # Test files
+│   ├── fixtures/          # Test data
+│   ├── pages/             # Page Objects
+│   └── support/           # Support files and commands
+├── .github/workflows/     # GitHub Actions workflows
+├── cypress.config.ts      # Cypress configuration
+├── cypress.env.json       # Environment variables (not committed to git)
+├── package.json           # Project dependencies
+└── tsconfig.json          # TypeScript configuration
 ```
 
 ## Prerequisites
 
-- Node.js (v16 or higher)
-- npm (v7 or higher)
+- Node.js (v14 or later)
+- npm (v6 or later)
 
 ## Installation
 
-1. Clone the repository:
-   ```
-   git clone <repository-url>
-   ```
-
+1. Clone the repository
 2. Install dependencies:
-   ```
-   npm install
-   ```
-
-3. Create a `cypress.env.json` file in the root directory with the following content:
-   ```json
-   {
-     "standard_username": "standard_user",
-     "locked_out_username": "locked_out_user",
-     "password": "secret_sauce"
-   }
-   ```
+
+```bash
+npm install
+```
 
 ## Running Tests
 
-To run tests in the Cypress Test Runner:
+### Run tests in headless mode:
 
-```
-npm run cypress:open
+```bash
+npm run cy:run
 ```
 
-To run tests in headless mode:
+### Open Cypress Test Runner:
 
-```
-npm run cypress:run
+```bash
+npm run cy:open
 ```
 
-To run tests in a specific browser:
-
-```
-npm run cypress:run:chrome
-```
+## CI/CD
 
-## Reports
+This project uses GitHub Actions for continuous integration. The workflow:
 
-After running tests in headless mode, the Mochawesome report will be generated in the `cypress/reports` directory.
+1. Runs on pushes to the master branch and pull requests
+2. Installs dependencies
+3. Runs Cypress tests in headless mode
+4. Generates and uploads Mochawesome reports
+5. Uploads screenshots on test failure
 
-## CI/CD
+## Test Reporting
 
-The repository is configured with GitHub Actions to run tests on every push to the master branch.
-The workflow will:
-1. Install dependencies
-2. Create the necessary environment variables
-3. Run Cypress tests in headless mode
-4. Upload the test reports as artifacts 
+The project uses cypress-mochawesome-reporter for generating HTML reports. After running tests, reports can be found in the `cypress/reports` directory. 

cypress.config.ts

@@ -4,26 +4,25 @@ export default defineConfig({
   reporter: 'cypress-mochawesome-reporter',
   reporterOptions: {
     charts: true,
-    reportPageTitle: 'Sauce Demo Test Report',
+    reportPageTitle: 'SauceDemo Tests',
     embeddedScreenshots: true,
     inlineAssets: true,
-    saveAllAttempts: false,
   },
   e2e: {
-    baseUrl: 'https://www.saucedemo.com',
-    pageLoadTimeout: 120000,
     setupNodeEvents(on, config) {
       require('cypress-mochawesome-reporter/plugin')(on);
 
-      // Task for logging
+      // Task for detailed logging
       on('task', {
         log(message) {
-          console.log(message);
+          console.log(`LOG: ${message}`);
           return null;
-        },
+        }
       });
-      
-      return config;
     },
+    baseUrl: 'https://www.saucedemo.com',
+    viewportWidth: 1280,
+    viewportHeight: 720,
+    defaultCommandTimeout: 5000,
   },
 }); 

cypress/e2e/lockedOutUser.cy.ts

@@ -0,0 +1,34 @@
+/// <reference types="cypress" />
+
+describe('Sauce Demo - Locked Out User', () => {
+  beforeEach(() => {
+    cy.task('log', 'Starting Locked Out User Test');
+    cy.visit('/');
+  });
+
+  it('should show error message for locked out user', () => {
+    // Load test data
+    cy.fixture('testData.json').then((testData) => {
+      // Get credentials from environment variables
+      const username = Cypress.env('users').locked.username;
+      const password = Cypress.env('users').locked.password;
+
+      // Login with locked out user credentials
+      cy.task('log', `Typing username: ${username}`);
+      cy.get('#user-name').type(username);
+      
+      cy.task('log', `Typing password: ${password}`);
+      cy.get('#password').type(password);
+      
+      cy.task('log', 'Clicking login button');
+      cy.get('#login-button').click();
+
+      // Verify error message
+      cy.get('[data-test="error"]')
+        .should('be.visible')
+        .and('contain.text', testData.lockedOutUser.errorMessage);
+      
+      cy.task('log', 'Locked Out User Test Completed Successfully');
+    });
+  });
+});