Add Cypress tests for SauceDemo website

Author: JoanEsquivel

.github/workflows/cypress.yml

@@ -11,42 +11,53 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v3
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v3
         with:
-          node-version: '20.x'
+          node-version: 18
 
-      - name: Install dependencies
+      - name: Install Dependencies
         run: npm ci
 
       - name: Create env file
         run: |
           echo '{
-            "standardUser": "standard_user",
-            "lockedOutUser": "locked_out_user",
+            "standardUsername": "standard_user",
+            "lockedOutUsername": "locked_out_user",
             "password": "secret_sauce"
           }' > cypress.env.json
 
       - name: Cypress run
-        uses: cypress-io/github-action@v6
+        uses: cypress-io/github-action@v5
         with:
           browser: chrome
-          headless: true
+          headed: false
 
-      - name: Upload test results
+      - name: Upload Test Results
+        uses: actions/upload-artifact@v3
         if: always()
-        uses: actions/upload-artifact@v4
         with:
-          name: cypress-reports
-          path: cypress/reports
+          name: cypress-report
+          path: cypress/reports/html
           retention-days: 30
-
+          
+  deploy-report:
+    needs: cypress-run
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        
+      - name: Download Cypress Reports
+        uses: actions/download-artifact@v3
+        with:
+          name: cypress-report
+          path: cypress/reports/html
+          
       - name: Deploy to GitHub Pages
-        if: success()
-        uses: peaceiris/actions-gh-pages@v3
+        uses: JamesIves/github-pages-deploy-action@v4
         with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./cypress/reports/html
-          enable_jekyll: true 
+          folder: cypress/reports/html
+          branch: gh-pages 

.gitignore

@@ -1,5 +1,34 @@
+# Dependencies
 node_modules/
-cypress.env.json
+
+# Cypress
 cypress/videos/
 cypress/screenshots/
-cypress/reports/ 
+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
+
+# IDE files
+.idea/
+.vscode/
+*.sublime-project
+*.sublime-workspace
+
+# macOS files
+.DS_Store
+.AppleDouble
+.LSOverride 

README.md

@@ -1,49 +1,66 @@
-# Sauce Demo Cypress Tests
+# SauceDemo Cypress Test Automation
 
-This project contains automated tests for the Sauce Demo website using Cypress with TypeScript and Page Object Model pattern.
+This project contains automated tests for the SauceDemo website using Cypress with TypeScript.
 
 ## Project Structure
 
 ```
 ├── cypress/
-│   ├── e2e/           # Test files
-│   ├── fixtures/      # Test data
-│   ├── pages/         # Page objects
-│   └── support/       # Support files and commands
-├── cypress.config.ts  # Cypress configuration
-├── cypress.env.json   # Environment variables (gitignored)
-├── package.json       # Project dependencies
-└── tsconfig.json     # TypeScript configuration
+│   ├── 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
 ```
 
-## Prerequisites
+## Test Scenarios
 
-- Node.js (v14 or higher)
-- npm (v6 or higher)
+1. **Valid Login Test** - Tests successful login with standard user
+2. **Locked Out User Test** - Tests error message for locked out user
 
-## Installation
+## Setup
 
 1. Clone the repository
 2. Install dependencies:
-   ```bash
-   npm install
-   ```
+
+```bash
+npm install
+```
+
 3. Create a `cypress.env.json` file with the following content:
-   ```json
-   {
-     "standardUser": "standard_user",
-     "lockedOutUser": "locked_out_user",
-     "password": "secret_sauce"
-   }
-   ```
+
+```json
+{
+  "standardUsername": "standard_user",
+  "lockedOutUsername": "locked_out_user",
+  "password": "secret_sauce"
+}
+```
 
 ## Running Tests
 
-To run tests in headless mode:
+### Headless Mode
+
+To run all tests in headless mode:
+
+```bash
+npm test
+```
+
+### Interactive Mode
+
+To open Cypress in interactive mode:
+
 ```bash
-npm run cy:run
+npm run cy:open
 ```
 
-## Test Reports
+## Reports
 
-Test reports are generated using cypress-mochawesome-reporter and can be found in the `cypress/reports/html` directory after test execution. 
+Test reports are generated using cypress-mochawesome-reporter and can be found in the `cypress/reports/html` directory after running the tests. 

cypress.config.ts

@@ -1,23 +1,25 @@
-import { defineConfig } from 'cypress'
+import { defineConfig } from 'cypress';
 
 export default defineConfig({
   reporter: 'cypress-mochawesome-reporter',
+  reporterOptions: {
+    charts: true,
+    reportPageTitle: 'SauceDemo Test Report',
+    embeddedScreenshots: true,
+    inlineAssets: true,
+  },
   e2e: {
+    baseUrl: 'https://www.saucedemo.com',
     setupNodeEvents(on, config) {
       require('cypress-mochawesome-reporter/plugin')(on);
 
-      // Custom task for logging
+      // Task for detailed logging
       on('task', {
         log(message) {
-          console.log(message)
-          return null
-        },
-      })
+          console.log(message);
+          return null;
+        }
+      });
     },
-    baseUrl: 'https://www.saucedemo.com',
-    supportFile: 'cypress/support/e2e.ts',
-    specPattern: 'cypress/e2e/**/*.cy.ts',
-    viewportWidth: 1280,
-    viewportHeight: 720
   },
-}) 
+}); 

cypress/e2e/locked-out-user.cy.ts

@@ -0,0 +1,20 @@
+import LoginPage from '../pages/LoginPage';
+
+describe('Locked Out User Test', () => {
+  it('should show error message for locked out user', () => {
+    cy.logAction('Starting Locked Out User Test');
+    
+    // Get credentials from environment variables
+    const username = Cypress.env('lockedOutUsername');
+    const password = Cypress.env('password');
+    
+    // Login with locked out user credentials
+    LoginPage.visit()
+      .login(username, password);
+    
+    // Verify error message is displayed
+    LoginPage.verifyErrorMessage('Epic sadface: Sorry, this user has been locked out');
+    
+    cy.logAction('Completed Locked Out User Test');
+  });
+}); 

cypress/e2e/lockedOutUser.cy.ts

@@ -0,0 +1,24 @@
+import LoginPage from '../pages/LoginPage';
+import InventoryPage from '../pages/InventoryPage';
+
+describe('Valid Login Test', () => {
+  it('should login successfully with standard user', () => {
+    cy.logAction('Starting Valid Login Test');
+    
+    // Get credentials from environment variables
+    const username = Cypress.env('standardUsername');
+    const password = Cypress.env('password');
+    
+    // Login with valid credentials
+    LoginPage.visit()
+      .login(username, password);
+    
+    // Verify successful login
+    InventoryPage.isLoaded();
+    
+    // Logout to avoid cache issues
+    InventoryPage.logout();
+    
+    cy.logAction('Completed Valid Login Test');
+  });
+}); 

cypress/e2e/valid-login.cy.ts

@@ -0,0 +1,5 @@
+{
+  "lockedOutErrorMessage": "Epic sadface: Sorry, this user has been locked out.",
+  "inventoryPageTitle": "Swag Labs",
+  "loginPageTitle": "Swag Labs"
+} 

cypress/e2e/validLogin.cy.ts

@@ -0,0 +1,33 @@
+class InventoryPage {
+  // Selectors
+  private menuButton = '#react-burger-menu-btn';
+  private logoutLink = '#logout_sidebar_link';
+  private appLogo = '.app_logo';
+
+  // Methods
+  isLoaded() {
+    cy.get(this.appLogo).should('be.visible');
+    cy.logAssertion('Verified inventory page is loaded');
+    return this;
+  }
+
+  clickMenuButton() {
+    cy.get(this.menuButton).click();
+    cy.logAction('Clicked menu button');
+    return this;
+  }
+
+  clickLogout() {
+    cy.get(this.logoutLink).click();
+    cy.logAction('Clicked logout link');
+    return this;
+  }
+
+  logout() {
+    this.clickMenuButton();
+    this.clickLogout();
+    return this;
+  }
+}
+
+export default new InventoryPage();