Add Cypress tests with Page Object Model for SauceDemo

Author: JoanEsquivel

.github/workflows/cypress.yml

@@ -11,18 +11,17 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - name: Install dependencies
-        run: npm ci
+        run: npm install
 
-      # Create cypress.env.json file using GitHub secrets
-      - name: Create Cypress environment file
+      - name: Create env file
         run: |
           echo '{
             "users": {
@@ -37,22 +36,8 @@ jobs:
             }
           }' > cypress.env.json
 
-      - name: Cypress run
-        uses: cypress-io/github-action@v4
+      - name: Run Cypress tests
+        uses: cypress-io/github-action@v5
         with:
           browser: chrome
-          headed: false
-
-      - 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: cypress-report
-          path: cypress/reports 
+          headless: true 

.gitignore

@@ -1,23 +1,22 @@
-# Dependencies
+# Dependency directories
 node_modules/
 
-# Cypress generated files
+# TypeScript compiled files
+*.js
+*.map
+
+# Cypress
 cypress/videos/
 cypress/screenshots/
 cypress/downloads/
-cypress/reports/
-
-# Environment variables (contains credentials)
 cypress.env.json
 
 # OS specific files
 .DS_Store
 Thumbs.db
 
-# IDE specific files
+# Editor directories and files
 .idea/
 .vscode/
-
-# Log files
-*.log
-npm-debug.log* 
+*.swp
+*.swo 

README.md

@@ -1,65 +1,73 @@
 # SauceDemo Cypress Tests
 
-This project contains automated tests for the SauceDemo website using Cypress with TypeScript and follows the Page Object Model pattern.
-
-## Test Scenarios
-
-1. Valid Login - Tests successful login with standard_user
-2. Locked Out User - Tests error message when logging in with locked_out_user
+This project contains Cypress end-to-end tests for the SauceDemo website using TypeScript and the Page Object Model pattern.
 
 ## Project Structure
 
 ```
 ├── 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
+│   ├── e2e/                 # Test files
+│   ├── fixtures/            # Test data
+│   ├── pages/               # Page Object Model files
+│   ├── support/             # Custom commands and utilities
+│   └── tsconfig.json        # TypeScript configuration
+├── cypress.config.ts        # Cypress configuration
+├── cypress.env.json         # Environment variables (not committed to git)
+├── package.json             # Project dependencies and scripts
+└── README.md                # Project documentation
 ```
 
 ## Prerequisites
 
 - Node.js (v14 or later)
 - npm (v6 or later)
 
-## Installation
+## Setup
 
 1. Clone the repository
 2. Install dependencies:
-
-```bash
-npm install
-```
+   ```
+   npm install
+   ```
+3. Create a `cypress.env.json` file with the following content:
+   ```json
+   {
+     "users": {
+       "standard": {
+         "username": "standard_user",
+         "password": "secret_sauce"
+       },
+       "locked": {
+         "username": "locked_out_user",
+         "password": "secret_sauce"
+       }
+     }
+   }
+   ```
 
 ## Running Tests
 
-### Run tests in headless mode:
+### Headless Mode
+
+To run tests in headless mode:
 
-```bash
+```
 npm run cy:run
 ```
 
-### Open Cypress Test Runner:
+### Interactive Mode
+
+To open Cypress in interactive mode:
 
-```bash
+```
 npm run cy:open
 ```
 
-## CI/CD
-
-This project uses GitHub Actions for continuous integration. The workflow:
+## Test Cases
 
-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
+1. **Valid Login**: Tests successful login using standard_user
+2. **Locked Out User**: Tests error handling with locked_out_user
 
-## Test Reporting
+## Logging
 
-The project uses cypress-mochawesome-reporter for generating HTML reports. After running tests, reports can be found in the `cypress/reports` directory. 
+The tests include a custom task for logging which displays detailed information in the terminal during test runs. 

cypress.config.ts

@@ -1,28 +1,17 @@
 import { defineConfig } from 'cypress';
 
 export default defineConfig({
-  reporter: 'cypress-mochawesome-reporter',
-  reporterOptions: {
-    charts: true,
-    reportPageTitle: 'SauceDemo Tests',
-    embeddedScreenshots: true,
-    inlineAssets: true,
-  },
   e2e: {
     setupNodeEvents(on, config) {
-      require('cypress-mochawesome-reporter/plugin')(on);
-      
-      // Task for detailed logging
       on('task', {
         log(message) {
-          console.log(`LOG: ${message}`);
+          console.log(message);
           return null;
         }
       });
     },
     baseUrl: 'https://www.saucedemo.com',
-    viewportWidth: 1280,
-    viewportHeight: 720,
-    defaultCommandTimeout: 5000,
+    chromeWebSecurity: false,
+    video: false
   },
 }); 

cypress/e2e/lockedOutUser.cy.ts

@@ -0,0 +1,46 @@
+/// <reference types="cypress" />
+
+import LoginPage from '../pages/LoginPage';
+import ProductsPage from '../pages/ProductsPage';
+
+describe('SauceDemo Login Tests', () => {
+  beforeEach(() => {
+    cy.task('log', 'Starting a new test');
+    LoginPage.visit();
+  });
+
+  it('should login successfully with valid credentials', () => {
+    cy.task('log', 'Running test: should login successfully with valid credentials');
+    
+    // Get test data from environment
+    cy.fixture('testData.json').then((testData) => {
+      // Login with valid credentials
+      LoginPage.login(
+        Cypress.env('users').standard.username, 
+        Cypress.env('users').standard.password
+      );
+
+      // Verify successful login
+      ProductsPage.getProductsHeader()
+        .should('be.visible')
+        .and('have.text', testData.pageTexts.productsHeader);
+    });
+  });
+
+  it('should show error message for locked out user', () => {
+    cy.task('log', 'Running test: should show error message for locked out user');
+    
+    cy.fixture('testData.json').then((testData) => {
+      // Login with locked out user
+      LoginPage.login(
+        Cypress.env('users').locked.username, 
+        Cypress.env('users').locked.password
+      );
+
+      // Verify error message
+      LoginPage.getErrorMessage()
+        .should('be.visible')
+        .and('have.text', testData.errorMessages.lockedOutUser);
+    });
+  });
+}); 

cypress/e2e/login.cy.ts

@@ -1,15 +1,11 @@
 {
+  "urls": {
+    "baseUrl": "https://www.saucedemo.com"
+  },
   "errorMessages": {
     "lockedOutUser": "Epic sadface: Sorry, this user has been locked out."
   },
-  "pageTitle": {
-    "products": "Products"
-  },
-  "validLogin": {
-    "expectedUrl": "/inventory.html",
-    "headerText": "Products"
-  },
-  "lockedOutUser": {
-    "errorMessage": "Epic sadface: Sorry, this user has been locked out."
+  "pageTexts": {
+    "productsHeader": "Products"
   }
 }