Implement Cypress framework with SauceDemo tests and GitHub Pages deployment

Author: JoanEsquivel

.eslintrc.js

@@ -0,0 +1,27 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  plugins: [
+    '@typescript-eslint',
+    'cypress'
+  ],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:cypress/recommended'
+  ],
+  env: {
+    node: true,
+    browser: true,
+    'cypress/globals': true
+  },
+  rules: {
+    '@typescript-eslint/no-namespace': 'off',
+    'cypress/no-assigning-return-values': 'error',
+    'cypress/no-unnecessary-waiting': 'warn',
+    'cypress/assertion-before-screenshot': 'warn',
+    'no-console': 'warn',
+    'no-unused-vars': 'warn',
+    '@typescript-eslint/no-unused-vars': ['warn']
+  }
+}; 

.github/workflows/cypress.yml

@@ -11,53 +11,72 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
-
+        uses: actions/checkout@v4
+      
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
-
-      - name: Install Dependencies
+          node-version: 20
+          cache: 'npm'
+      
+      - name: Install dependencies
         run: npm ci
-
-      - name: Create env file
-        run: |
-          echo '{
-            "standardUsername": "standard_user",
-            "lockedOutUsername": "locked_out_user",
-            "password": "secret_sauce"
-          }' > cypress.env.json
-
+      
       - name: Cypress run
-        uses: cypress-io/github-action@v5
+        uses: cypress-io/github-action@v6
         with:
+          build: npm run build
           browser: chrome
           headed: false
-
-      - name: Upload Test Results
+        env:
+          # pass GitHub token to enable accurate reporting of test status
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      
+      - name: Upload screenshots if test fails
+        uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+      
+      - name: Upload Mochawesome reports
         uses: actions/upload-artifact@v3
         if: always()
         with:
-          name: cypress-report
-          path: cypress/reports/html
-          retention-days: 30
-          
+          name: cypress-reports
+          path: cypress/reports
+
   deploy-report:
     needs: cypress-run
     runs-on: ubuntu-latest
+    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
+    permissions:
+      pages: write      # to deploy to Pages
+      id-token: write   # to verify the deployment originates from an appropriate source
+      contents: read    # to read the repository contents
+    
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
-        
-      - name: Download Cypress Reports
+        uses: actions/checkout@v4
+      
+      - name: Download reports artifact
         uses: actions/download-artifact@v3
         with:
-          name: cypress-report
-          path: cypress/reports/html
-          
-      - name: Deploy to GitHub Pages
-        uses: JamesIves/github-pages-deploy-action@v4
+          name: cypress-reports
+          path: cypress/reports
+      
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
         with:
-          folder: cypress/reports/html
-          branch: gh-pages 
+          path: './cypress/reports/html'
+      
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2 

.gitignore

@@ -1,34 +1,24 @@
-# Dependencies
+# Dependency directories
 node_modules/
 
-# Cypress
-cypress/videos/
-cypress/screenshots/
+# Environment configuration
 cypress.env.json
 
-# Reports
-cypress/reports/
-
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
+# Cypress generated files
+cypress/videos/
+cypress/screenshots/
 
-# IDE files
-.idea/
+# IDE specific files
 .vscode/
-*.sublime-project
-*.sublime-workspace
+.idea/
+*.swp
+*.swo
 
-# macOS files
+# OS specific files
 .DS_Store
-.AppleDouble
-.LSOverride 
+Thumbs.db
+
+# Debug logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log* 

README.md

@@ -1,66 +1,102 @@
-# SauceDemo Cypress Test Automation
+# SauceDemo Cypress Tests
 
-This project contains automated tests for the SauceDemo website using Cypress with TypeScript.
+This project contains automated tests for the [SauceDemo](https://www.saucedemo.com) website using Cypress with TypeScript.
 
-## Project Structure
-
-```
-├── cypress/
-│   ├── e2e/               # Test files
-│   ├── fixtures/          # Test data
-│   ├── pages/             # Page objects
-│   ├── support/           # Support files (commands, etc.)
-│   └── reports/           # Test reports (generated)
-├── .gitignore             # Git ignore file
-├── cypress.config.ts      # Cypress configuration
-├── cypress.env.json       # Environment variables (not committed)
-├── package.json           # Project dependencies
-├── README.md              # Project documentation
-└── tsconfig.json          # TypeScript configuration
-```
+## Features
 
-## Test Scenarios
+- Written in TypeScript
+- Page Object Model pattern
+- Custom commands
+- Environment configuration
+- Detailed logging
+- Mochawesome reporting
+- GitHub Actions integration
+- GitHub Pages for test reports
 
-1. **Valid Login Test** - Tests successful login with standard user
-2. **Locked Out User Test** - Tests error message for locked out user
+## Prerequisites
 
-## Setup
+- Node.js (v16 or higher)
+- npm (v8 or higher)
 
-1. Clone the repository
-2. Install dependencies:
+## Installation
 
 ```bash
-npm install
-```
+# Clone the repository
+git clone <repository-url>
 
-3. Create a `cypress.env.json` file with the following content:
+# Navigate to the project directory
+cd cypress-saucedemo
 
-```json
-{
-  "standardUsername": "standard_user",
-  "lockedOutUsername": "locked_out_user",
-  "password": "secret_sauce"
-}
+# Install dependencies
+npm install
 ```
 
 ## Running Tests
 
-### Headless Mode
+```bash
+# Run tests in headless mode
+npm run cy:run
 
-To run all tests in headless mode:
+# Open Cypress Test Runner
+npm run cy:open
 
-```bash
-npm test
+# Run linting
+npm run lint
 ```
 
-### Interactive Mode
+## Project Structure
+
+```
+cypress-saucedemo/
+├── .github/                    # GitHub Actions workflows
+│   └── workflows/
+│       └── cypress.yml         # CI workflow configuration
+├── cypress/
+│   ├── e2e/                    # Test files
+│   │   └── login.cy.ts         # Login tests
+│   ├── fixtures/               # Test data
+│   │   └── testData.json       # Common test data
+│   ├── pages/                  # Page Object Models
+│   │   ├── BasePage.ts         # Base page with common methods
+│   │   ├── LoginPage.ts        # Login page object
+│   │   └── InventoryPage.ts    # Inventory page object
+│   ├── reports/                # Generated test reports (git ignored)
+│   └── support/                # Support files
+│       ├── commands.ts         # Custom commands
+│       └── e2e.ts              # e2e support file
+├── cypress.config.ts           # Cypress configuration
+├── cypress.env.json            # Environment variables (git ignored)
+├── package.json                # Dependencies and scripts
+├── tsconfig.json               # TypeScript configuration
+└── README.md                   # Project documentation
+```
 
-To open Cypress in interactive mode:
+## Test Reports
 
-```bash
-npm run cy:open
+After running the tests, reports are generated in the `cypress/reports` directory. When tests are run in the CI pipeline, the reports are published to GitHub Pages.
+
+## Environment Variables
+
+Sensitive data like credentials are stored in `cypress.env.json` which is git-ignored for security. Create this file locally with the following structure:
+
+```json
+{
+  "users": {
+    "standard": "standard_user",
+    "locked": "locked_out_user",
+    "problem": "problem_user",
+    "performance": "performance_glitch_user"
+  },
+  "password": "secret_sauce"
+}
 ```
 
-## Reports
+## CI/CD
+
+The project uses GitHub Actions for continuous integration. On each push to the `master` branch, the workflow:
 
-Test reports are generated using cypress-mochawesome-reporter and can be found in the `cypress/reports/html` directory after running the tests. 
+1. Installs dependencies
+2. Runs Cypress tests
+3. Uploads screenshots on failure
+4. Generates and publishes test reports
+5. Deploys the report to GitHub Pages 

cypress.config.ts

@@ -4,12 +4,11 @@ export default defineConfig({
   reporter: 'cypress-mochawesome-reporter',
   reporterOptions: {
     charts: true,
-    reportPageTitle: 'SauceDemo Test Report',
+    reportPageTitle: 'SauceDemo Tests',
     embeddedScreenshots: true,
     inlineAssets: true,
   },
   e2e: {
-    baseUrl: 'https://www.saucedemo.com',
     setupNodeEvents(on, config) {
       require('cypress-mochawesome-reporter/plugin')(on);
 
@@ -18,8 +17,15 @@ export default defineConfig({
         log(message) {
           console.log(message);
           return null;
-        }
+        },
       });
     },
+    specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
+    baseUrl: 'https://www.saucedemo.com',
+    viewportWidth: 1280,
+    viewportHeight: 720,
+    video: false,
+    screenshotOnRunFailure: true,
+    pageLoadTimeout: 120000,
   },
 });