feat: Add Cypress tests with Page Object Model

Author: JoanEsquivel

.github/workflows/cypress.yml

@@ -11,33 +11,40 @@ 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
+          node-version: '20.x'
 
       - name: Install dependencies
-        run: npm install
+        run: npm ci
 
       - name: Create env file
         run: |
           echo '{
-            "users": {
-              "standard": {
-                "username": "standard_user",
-                "password": "secret_sauce"
-              },
-              "locked": {
-                "username": "locked_out_user",
-                "password": "secret_sauce"
-              }
-            }
+            "standardUser": "standard_user",
+            "lockedOutUser": "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@v6
         with:
           browser: chrome
-          headless: true 
+          headless: true
+
+      - name: Upload screenshots
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+
+      - name: Upload reports
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: cypress-reports
+          path: cypress/reports 

.gitignore

@@ -1,22 +1,5 @@
-# Dependency directories
 node_modules/
-
-# TypeScript compiled files
-*.js
-*.map
-
-# Cypress
+cypress.env.json
 cypress/videos/
 cypress/screenshots/
-cypress/downloads/
-cypress.env.json
-
-# OS specific files
-.DS_Store
-Thumbs.db
-
-# Editor directories and files
-.idea/
-.vscode/
-*.swp
-*.swo 
+cypress/reports/ 

README.md

@@ -1,73 +1,54 @@
-# SauceDemo Cypress Tests
+# Sauce Demo Cypress Tests
 
-This project contains Cypress end-to-end tests for the SauceDemo website using TypeScript and the Page Object Model pattern.
+This project contains automated tests for the Sauce Demo website using Cypress with TypeScript.
 
 ## Project Structure
 
 ```
 ├── cypress/
-│   ├── 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
+│   ├── e2e/           # Test files
+│   ├── fixtures/      # Test data
+│   ├── pages/         # Page Objects
+│   └── support/       # Support files
+├── cypress.config.ts  # Cypress configuration
+├── cypress.env.json   # Environment variables (gitignored)
+├── tsconfig.json     # TypeScript configuration
+└── package.json      # Project dependencies
 ```
 
 ## Prerequisites
 
-- Node.js (v14 or later)
-- npm (v6 or later)
+- Node.js (v14 or higher)
+- npm (v6 or higher)
 
-## Setup
+## Installation
 
 1. Clone the repository
 2. Install dependencies:
-   ```
+   ```bash
    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"
-       }
-     }
+     "standardUser": "standard_user",
+     "lockedOutUser": "locked_out_user",
+     "password": "secret_sauce"
    }
    ```
 
 ## Running Tests
 
-### Headless Mode
-
 To run tests in headless mode:
-
+```bash
+npx cypress run
 ```
-npm run cy:run
-```
-
-### Interactive Mode
 
-To open Cypress in interactive mode:
-
-```
-npm run cy:open
+To open Cypress Test Runner:
+```bash
+npx cypress open
 ```
 
-## Test Cases
-
-1. **Valid Login**: Tests successful login using standard_user
-2. **Locked Out User**: Tests error handling with locked_out_user
-
-## Logging
+## Test Reports
 
-The tests include a custom task for logging which displays detailed information in the terminal during test runs. 
+Test reports are generated using cypress-mochawesome-reporter and can be found in the `cypress/reports` directory after test execution. 

cypress.config.ts

@@ -1,17 +1,20 @@
-import { defineConfig } from 'cypress';
+import { defineConfig } from 'cypress'
 
 export default defineConfig({
+  reporter: 'cypress-mochawesome-reporter',
   e2e: {
     setupNodeEvents(on, config) {
+      require('cypress-mochawesome-reporter/plugin')(on);
+      
+      // Task for console logging
       on('task', {
         log(message) {
-          console.log(message);
-          return null;
-        }
-      });
+          console.log(message)
+          return null
+        },
+      })
     },
     baseUrl: 'https://www.saucedemo.com',
-    chromeWebSecurity: false,
-    video: false
+    supportFile: 'cypress/support/e2e.ts',
   },
-}); 
+}) 

cypress/e2e/login.cy.ts

@@ -1,46 +1,19 @@
-/// <reference types="cypress" />
+import LoginPage from '../pages/LoginPage'
+import InventoryPage from '../pages/InventoryPage'
 
-import LoginPage from '../pages/LoginPage';
-import ProductsPage from '../pages/ProductsPage';
-
-describe('SauceDemo Login Tests', () => {
+describe('Sauce Demo 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
-      );
+    LoginPage.visit()
+  })
 
-      // Verify successful login
-      ProductsPage.getProductsHeader()
-        .should('be.visible')
-        .and('have.text', testData.pageTexts.productsHeader);
-    });
-  });
+  it('should login successfully with standard user', () => {
+    LoginPage.login(Cypress.env('standardUser'), Cypress.env('password'))
+    InventoryPage.isVisible()
+    InventoryPage.logout()
+  })
 
   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);
-    });
-  });
-}); 
+    LoginPage.login(Cypress.env('lockedOutUser'), Cypress.env('password'))
+    LoginPage.getErrorMessage().should('contain.text', 'Epic sadface: Sorry, this user has been locked out')
+  })
+}) 

cypress/fixtures/testData.json

@@ -0,0 +1,20 @@
+class InventoryPage {
+  // Selectors
+  private burgerMenu = '#react-burger-menu-btn'
+  private logoutLink = '#logout_sidebar_link'
+  private inventoryContainer = '#inventory_container'
+
+  // Methods
+  isVisible() {
+    cy.task('log', 'Verifying inventory page is visible')
+    return cy.get(this.inventoryContainer).should('be.visible')
+  }
+
+  logout() {
+    cy.task('log', 'Logging out')
+    cy.get(this.burgerMenu).click()
+    cy.get(this.logoutLink).click()
+  }
+}
+
+export default new InventoryPage() 

cypress/pages/InventoryPage.ts

@@ -1,32 +1,27 @@
-/// <reference types="cypress" />
-
 class LoginPage {
-  // Elements
-  private usernameInput = '#user-name';
-  private passwordInput = '#password';
-  private loginButton = '#login-button';
-  private errorMessage = '[data-test="error"]';
+  // Selectors
+  private usernameInput = '[data-test="username"]'
+  private passwordInput = '[data-test="password"]'
+  private loginButton = '[data-test="login-button"]'
+  private errorMessage = '[data-test="error"]'
 
-  // Actions
+  // Methods
   visit() {
-    cy.task('log', 'Visiting login page');
-    cy.visit('/');
-    return this;
+    cy.visit('/')
+    return this
   }
 
   login(username: string, password: string) {
-    cy.task('log', `Attempting to login with username: ${username}`);
-    cy.get(this.usernameInput).clear().type(username);
-    cy.get(this.passwordInput).clear().type(password);
-    cy.get(this.loginButton).click();
-    return this;
+    cy.task('log', `Logging in with username: ${username}`)
+    cy.get(this.usernameInput).type(username)
+    cy.get(this.passwordInput).type(password)
+    cy.get(this.loginButton).click()
+    return this
   }
 
-  // Assertions
   getErrorMessage() {
-    cy.task('log', 'Getting error message');
-    return cy.get(this.errorMessage);
+    return cy.get(this.errorMessage)
   }
 }
 
-export default new LoginPage(); 
+export default new LoginPage()