Complete SauceDemo automation project with Cypress

Author: JoanEsquivel

cypress-project/.github/workflows/cypress.yml

@@ -0,0 +1,45 @@
+name: Cypress Tests
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        working-directory: cypress-project
+        run: npm install
+
+      - name: Create env file
+        working-directory: cypress-project
+        run: echo '{"password":"secret_sauce"}' > cypress.env.json
+
+      - name: Run Cypress tests
+        working-directory: cypress-project
+        run: npm run test
+
+      - name: Merge Mochawesome reports
+        if: always()
+        working-directory: cypress-project
+        run: |
+          npx mochawesome-merge cypress/reports/*.json > cypress/reports/mochawesome.json
+          npx mochawesome-report-generator cypress/reports/mochawesome.json -o cypress/reports/html
+
+      - name: Deploy to GitHub Pages
+        if: success() || failure()
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: cypress-project/cypress/reports/html
+          branch: gh-pages 

cypress-project/.gitignore

@@ -0,0 +1,18 @@
+# Dependencies
+node_modules/
+
+# Cypress generated files
+cypress/screenshots/
+cypress/videos/
+cypress/downloads/
+cypress/reports/
+
+# Environment files with sensitive data
+cypress.env.json
+
+# IDE files
+.idea/
+.vscode/
+
+# OS generated files
+.DS_Store 

cypress-project/README.md

@@ -0,0 +1,67 @@
+# SauceDemo Cypress Tests
+
+This project contains automated tests for the SauceDemo website using Cypress with TypeScript and following the Page Object Model pattern.
+
+## Project Structure
+
+```
+cypress-project/
+├── cypress/
+│   ├── e2e/              # Test files
+│   │   ├── valid-login.cy.ts
+│   │   └── locked-out-user.cy.ts
+│   ├── fixtures/         # Test data
+│   │   └── users.json
+│   ├── pages/            # Page Object Models
+│   │   ├── LoginPage.ts
+│   │   └── ProductsPage.ts
+│   └── support/          # Support files
+│       ├── commands.ts   # Custom commands
+│       └── e2e.ts        # Configuration
+├── cypress.config.ts     # Cypress configuration
+├── cypress.env.json      # Environment variables (not committed to Git)
+├── package.json          # Project dependencies
+├── tsconfig.json         # TypeScript configuration
+└── README.md             # Project documentation
+```
+
+## Features
+
+- Two test scenarios: Valid Login and Locked Out User
+- Page Object Model for better maintainability
+- TypeScript for type safety
+- Mochawesome reporter for HTML test reports
+- Custom task for detailed logging
+- GitHub Actions workflow for CI
+
+## Installation
+
+1. Clone the repository
+2. Install dependencies:
+
+```bash
+cd cypress-project
+npm install
+```
+
+## Running Tests
+
+### Headless Mode
+
+To run all tests in headless mode:
+
+```bash
+npm run test
+```
+
+### UI Mode
+
+To open Cypress in UI mode:
+
+```bash
+npm run cypress:open
+```
+
+## Reports
+
+After running tests, HTML reports will be generated in the `cypress/reports` directory. 

cypress-project/cypress.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // Register tasks
+      on('task', {
+        log(message: string) {
+          console.log(`\n--- TEST LOG: ${message}\n`);
+          return null;
+        }
+      });
+    },
+    baseUrl: 'https://www.saucedemo.com',
+    specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
+  },
+  reporter: 'cypress-multi-reporters',
+  reporterOptions: {
+    reporterEnabled: 'mochawesome',
+    mochawesomeReporterOptions: {
+      reportDir: 'cypress/reports',
+      quite: true,
+      overwrite: false,
+      html: true,
+      json: true
+    }
+  },
+  video: false,
+  viewportWidth: 1280,
+  viewportHeight: 720,
+  defaultCommandTimeout: 10000
+}); 

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

@@ -0,0 +1,26 @@
+import LoginPage from '../pages/LoginPage';
+
+describe('Locked Out User Test', () => {
+  const loginPage = new LoginPage();
+
+  beforeEach(() => {
+    cy.fixture('users').then(function (users) {
+      this.users = users;
+    });
+  });
+
+  it('should show error message for locked out user', function () {
+    // Visit the login page
+    loginPage.visit();
+
+    // Login with locked out user
+    loginPage.login(this.users.lockedOutUser.username, Cypress.env('password'));
+
+    // Verify error message
+    loginPage.getErrorMessage()
+      .should('be.visible')
+      .and('contain.text', 'Sorry, this user has been locked out');
+    
+    cy.log('Verified locked out user error message');
+  });
+}); 

cypress-project/cypress/e2e/valid-login.cy.ts

@@ -0,0 +1,28 @@
+import LoginPage from '../pages/LoginPage';
+import ProductsPage from '../pages/ProductsPage';
+
+describe('Valid Login Test', () => {
+  const loginPage = new LoginPage();
+  const productsPage = new ProductsPage();
+
+  beforeEach(() => {
+    cy.fixture('users').then(function (users) {
+      this.users = users;
+    });
+  });
+
+  it('should successfully login with valid user', function () {
+    // Visit the login page
+    loginPage.visit();
+
+    // Login with standard user
+    loginPage.login(this.users.standardUser.username, Cypress.env('password'));
+
+    // Verify successful login
+    productsPage.isVisible();
+    productsPage.getInventoryItems().should('have.length.at.least', 1);
+    
+    // Logout
+    loginPage.logout();
+  });
+}); 

cypress-project/cypress/fixtures/users.json

@@ -0,0 +1,8 @@
+{
+  "standardUser": {
+    "username": "standard_user"
+  },
+  "lockedOutUser": {
+    "username": "locked_out_user"
+  }
+} 

cypress-project/cypress/pages/LoginPage.ts

@@ -0,0 +1,36 @@
+class LoginPage {
+  private usernameInput = '#user-name';
+  private passwordInput = '#password';
+  private loginButton = '#login-button';
+  private errorMessage = '[data-test="error"]';
+  private menuButton = '#react-burger-menu-btn';
+  private logoutLink = '#logout_sidebar_link';
+
+  visit() {
+    cy.visit('https://www.saucedemo.com');
+    return this;
+  }
+
+  login(username: string, password: string) {
+    cy.get(this.usernameInput).type(username);
+    cy.get(this.passwordInput).type(password);
+    cy.get(this.loginButton).click();
+    
+    cy.log(`Logging in with username: ${username}`);
+    return this;
+  }
+
+  getErrorMessage() {
+    return cy.get(this.errorMessage);
+  }
+
+  logout() {
+    cy.get(this.menuButton).click();
+    cy.get(this.logoutLink).click();
+    
+    cy.log('Logging out');
+    return this;
+  }
+}
+
+export default LoginPage; 

cypress-project/cypress/pages/ProductsPage.ts

@@ -0,0 +1,16 @@
+class ProductsPage {
+  private productsTitle = '.title';
+  private inventoryItems = '.inventory_item';
+
+  isVisible() {
+    cy.get(this.productsTitle).should('have.text', 'Products');
+    cy.task('log', 'Verifying Products page is visible');
+    return this;
+  }
+
+  getInventoryItems() {
+    return cy.get(this.inventoryItems);
+  }
+}
+
+export default ProductsPage; 

cypress-project/cypress/support/commands.ts

@@ -0,0 +1,23 @@
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+export {};