Initial commit: Add Cypress test framework with GitHub Actions and Pages

Author: JoanEsquivel

.github/workflows/cypress.yml

@@ -6,31 +6,20 @@ on:
   pull_request:
     branches: [ master ]
 
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-# Allow only one concurrent deployment
-concurrency:
-  group: "pages"
-  cancel-in-progress: true
-
 jobs:
   cypress-run:
     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
-        run: npm ci
+        run: npm install
 
       - name: Create env file
         run: |
@@ -40,46 +29,13 @@ jobs:
             "password": "secret_sauce"
           }' > cypress.env.json
 
-      - name: Cypress run
-        uses: cypress-io/github-action@v6
-        with:
-          browser: chrome
-          headless: true
-
-      - name: Upload screenshots
-        uses: actions/upload-artifact@v4
-        if: failure()
-        with:
-          name: cypress-screenshots
-          path: cypress/screenshots
+      - name: Run Cypress tests
+        run: npx cypress run
 
-      - name: Upload reports
-        uses: actions/upload-artifact@v4
+      - name: Deploy report to GitHub Pages
         if: always()
+        uses: peaceiris/actions-gh-pages@v3
         with:
-          name: cypress-reports
-          path: cypress/reports
-
-      - name: Setup Pages
-        if: success()
-        uses: actions/configure-pages@v4
-
-      - name: Upload Pages artifact
-        if: success()
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: 'cypress/reports/html'
-
-  deploy:
-    needs: cypress-run
-    runs-on: ubuntu-latest
-    if: github.ref == 'refs/heads/master'
-    
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4 
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./cypress/reports/html
+          keep_files: true 

README.md

@@ -1,17 +1,17 @@
 # Sauce Demo Cypress Tests
 
-This project contains automated tests for the Sauce Demo website using Cypress with TypeScript.
+This project contains automated tests for the Sauce Demo website using Cypress with TypeScript and Page Object Model pattern.
 
 ## Project Structure
 
 ```
 ├── cypress/
 │   ├── e2e/           # Test files
 │   ├── fixtures/      # Test data
-│   ├── pages/         # Page Objects
-│   └── support/       # Support files
+│   ├── pages/         # Page objects
+│   └── support/       # Support files and commands
 ├── cypress.config.ts  # Cypress configuration
-├── cypress.env.json   # Environment variables (gitignored)
+├── cypress.env.json   # Environment variables (not in git)
 ├── tsconfig.json     # TypeScript configuration
 └── package.json      # Project dependencies
 ```
@@ -44,11 +44,14 @@ To run tests in headless mode:
 npx cypress run
 ```
 
-To open Cypress Test Runner:
-```bash
-npx cypress open
-```
+The test report will be generated in `cypress/reports/html/index.html`
 
-## Test Reports
+## Features
 
-Test reports are generated using cypress-mochawesome-reporter and can be found in the `cypress/reports` directory after test execution. 
+- TypeScript support
+- Page Object Model pattern
+- Custom commands for common actions
+- Detailed logging using custom Cypress task
+- Mochawesome HTML reporter
+- GitHub Actions integration
+- GitHub Pages for test reports 

cypress.config.ts

@@ -2,19 +2,26 @@ import { defineConfig } from 'cypress'
 
 export default defineConfig({
   reporter: 'cypress-mochawesome-reporter',
+  reporterOptions: {
+    charts: true,
+    reportPageTitle: 'Sauce Demo Tests Report',
+    embeddedScreenshots: true,
+    inlineAssets: true,
+    saveAllAttempts: false,
+  },
   e2e: {
     setupNodeEvents(on, config) {
       require('cypress-mochawesome-reporter/plugin')(on);
 
-      // Task for console logging
+      // Custom task for 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',
   },
-}) 
+}); 

cypress/e2e/login.cy.ts

@@ -1,19 +1,24 @@
-import LoginPage from '../pages/LoginPage'
-import InventoryPage from '../pages/InventoryPage'
+import { LoginPage } from '../pages/LoginPage';
 
 describe('Sauce Demo Login Tests', () => {
+  const loginPage = new LoginPage();
+
   beforeEach(() => {
-    LoginPage.visit()
-  })
+    loginPage.visit();
+  });
 
   it('should login successfully with standard user', () => {
-    LoginPage.login(Cypress.env('standardUser'), Cypress.env('password'))
-    InventoryPage.isVisible()
-    InventoryPage.logout()
-  })
+    cy.task('log', '✅ Testing standard user login');
+    cy.login(Cypress.env('standardUser'), Cypress.env('password'));
+    cy.url().should('include', '/inventory.html');
+    cy.logout();
+  });
 
   it('should show error message for locked out user', () => {
-    LoginPage.login(Cypress.env('lockedOutUser'), Cypress.env('password'))
-    LoginPage.getErrorMessage().should('contain.text', 'Epic sadface: Sorry, this user has been locked out')
-  })
-}) 
+    cy.task('log', '❌ Testing locked out user login');
+    cy.login(Cypress.env('lockedOutUser'), Cypress.env('password'));
+    loginPage.getErrorMessage()
+      .should('be.visible')
+      .and('contain', 'Epic sadface: Sorry, this user has been locked out');
+  });
+}); 

cypress/pages/InventoryPage.ts

@@ -1,27 +1,16 @@
-class LoginPage {
-  // Selectors
-  private usernameInput = '[data-test="username"]'
-  private passwordInput = '[data-test="password"]'
-  private loginButton = '[data-test="login-button"]'
-  private errorMessage = '[data-test="error"]'
+export class LoginPage {
+  private selectors = {
+    username: '[data-test="username"]',
+    password: '[data-test="password"]',
+    loginButton: '[data-test="login-button"]',
+    errorMessage: '[data-test="error"]'
+  };
 
-  // Methods
   visit() {
-    cy.visit('/')
-    return this
-  }
-
-  login(username: string, password: string) {
-    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
+    cy.visit('/');
   }
 
   getErrorMessage() {
-    return cy.get(this.errorMessage)
+    return cy.get(this.selectors.errorMessage);
   }
-}
-
-export default new LoginPage() 
+} 

cypress/pages/LoginPage.ts

@@ -0,0 +1,23 @@
+/// <reference types="cypress" />
+
+Cypress.Commands.add('login', (username: string, password: string) => {
+  cy.task('log', `👤 Logging in with username: ${username}`);
+  cy.get('[data-test="username"]').type(username);
+  cy.get('[data-test="password"]').type(password);
+  cy.get('[data-test="login-button"]').click();
+});
+
+Cypress.Commands.add('logout', () => {
+  cy.task('log', '👋 Logging out');
+  cy.get('#react-burger-menu-btn').click();
+  cy.get('#logout_sidebar_link').click();
+});
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      login(username: string, password: string): Chainable<void>
+      logout(): Chainable<void>
+    }
+  }
+} 

cypress/support/commands.ts

@@ -1,11 +1,6 @@
-import 'cypress-mochawesome-reporter/register'
+import './commands';
+import 'cypress-mochawesome-reporter/register';
 
-// Hide fetch/XHR requests from command log
-const app = window.top;
-if (app && !app.document.head.querySelector('[data-hide-command-log-request]')) {
-  const style = app.document.createElement('style');
-  style.innerHTML =
-    '.command-name-request, .command-name-xhr { display: none }';
-  style.setAttribute('data-hide-command-log-request', '');
-  app.document.head.appendChild(style);
-} 
+beforeEach(() => {
+  cy.task('log', '🚀 Starting test...');
+}); 

cypress/support/e2e.ts

@@ -8,13 +8,14 @@ Scenario 2: Locked Out User
 6. Allow the MCP Server to complete the code generation.
 7.Use the code found in the temp_codegen folder as a reference.
 8.Transpile the test code to a Cypress framework using TypeScript.
-9. Organize the Cypress project, create the tests(each one should be independent, no dependencies between them),  Use the Page Object Model structure. Store reusable data in the fixtures folder(if they are credentials, put them in the cypress.env.json) like test data or expected results.
+9. Organize the Cypress project without running "cypress open" configure everything by yourself, create the tests(each one should be independent, no dependencies between them),  Use the Page Object Model structure. Store reusable data in the fixtures folder(if they are credentials, put them in the cypress.env.json) like test data or expected results.
 10. In the root directory  Create a .gitignore file that excludes node_modules and cypress.env.json.
 11. Create a cy task to get detail logs for the actions, and assertions in the terminal, implement it in the framework, just call the cy task to print console logs.
 12. Integrate the Cypress Plugin "cypress-mochawesome-reporter" and its latest version, make all the required configurations. Using the latest version there is only 1 dependency required.
 13. In the root directory Add a README.md file that documents how to run the tests and describes the project structure.
 14. Install dependencies and Run the framework in headless mode by CLI using cypress run. Check that Cypress and all the tests runs without issues. Failures are accepted, framework configuration issues are not.
 15. In the root directory  Set up a GitHub Actions workflow to install dependencies and run the Cypress tests,  The branch name is not main as usualy, it is master.
 16. Then, push the latest changes using the GitHub MCP Server root directory to the remote repository. The repo already exists.
+17. Using the GitHub MCP Server configure the repository to publish a github page based on on the /cypress/reports/html/index.html file.
 
-In the chat post: "Run the 16 steps until all the process is completed."
+In the chat post: "Run the 17 steps until all the process is completed."