feat: Add Cypress tests with GitHub Actions and GitHub Pages setup

Author: JoanEsquivel

.github/workflows/cypress.yml

@@ -11,15 +11,15 @@ 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: |
@@ -29,13 +29,24 @@ jobs:
             "password": "secret_sauce"
           }' > cypress.env.json
 
-      - name: Run Cypress tests
-        run: npx cypress run
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          browser: chrome
+          headless: true
 
-      - name: Deploy report to GitHub Pages
+      - name: Upload test results
         if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: cypress-reports
+          path: cypress/reports
+          retention-days: 30
+
+      - name: Deploy to GitHub Pages
+        if: success()
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./cypress/reports/html
-          keep_files: true 
+          enable_jekyll: true 

README.md

@@ -11,9 +11,9 @@ This project contains automated tests for the Sauce Demo website using Cypress w
 │   ├── pages/         # Page objects
 │   └── support/       # Support files and commands
 ├── cypress.config.ts  # Cypress configuration
-├── cypress.env.json   # Environment variables (not in git)
-├── tsconfig.json     # TypeScript configuration
-└── package.json      # Project dependencies
+├── cypress.env.json   # Environment variables (gitignored)
+├── package.json       # Project dependencies
+└── tsconfig.json     # TypeScript configuration
 ```
 
 ## Prerequisites
@@ -41,17 +41,9 @@ This project contains automated tests for the Sauce Demo website using Cypress w
 
 To run tests in headless mode:
 ```bash
-npx cypress run
+npm run cy:run
 ```
 
-The test report will be generated in `cypress/reports/html/index.html`
+## Test Reports
 
-## Features
-
-- 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 
+Test reports are generated using cypress-mochawesome-reporter and can be found in the `cypress/reports/html` directory after test execution. 

cypress.config.ts

@@ -2,26 +2,22 @@ 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);
 
       // 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',
+    specPattern: 'cypress/e2e/**/*.cy.ts',
+    viewportWidth: 1280,
+    viewportHeight: 720
   },
-}); 
+}) 

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

@@ -0,0 +1,17 @@
+import { LoginPage } from '../pages/LoginPage'
+
+describe('Locked Out User Test', () => {
+  const loginPage = new LoginPage()
+
+  beforeEach(() => {
+    loginPage.visit()
+  })
+
+  it('should show error message for locked out user', () => {
+    cy.task('log', '🔍 Testing locked out user scenario')
+    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/e2e/login.cy.ts

@@ -0,0 +1,16 @@
+import { LoginPage } from '../pages/LoginPage'
+
+describe('Valid Login Test', () => {
+  const loginPage = new LoginPage()
+
+  beforeEach(() => {
+    loginPage.visit()
+  })
+
+  it('should login successfully with standard user', () => {
+    cy.task('log', '🔍 Testing valid login scenario')
+    cy.login(Cypress.env('standardUser'), Cypress.env('password'))
+    cy.url().should('include', '/inventory.html')
+    cy.logout()
+  })
+}) 

cypress/e2e/valid-login.cy.ts

@@ -4,13 +4,13 @@ export class LoginPage {
     password: '[data-test="password"]',
     loginButton: '[data-test="login-button"]',
     errorMessage: '[data-test="error"]'
-  };
+  }
 
   visit() {
-    cy.visit('/');
+    cy.visit('/')
   }
 
   getErrorMessage() {
-    return cy.get(this.selectors.errorMessage);
+    return cy.get(this.selectors.errorMessage)
   }
 } 

cypress/pages/LoginPage.ts

@@ -1,17 +1,17 @@
 /// <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();
-});
+  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();
-});
+  cy.task('log', '👋 Logging out')
+  cy.get('#react-burger-menu-btn').click()
+  cy.get('#logout_sidebar_link').click()
+})
 
 declare global {
   namespace Cypress {

cypress/support/commands.ts

@@ -1,6 +1,6 @@
-import './commands';
-import 'cypress-mochawesome-reporter/register';
+import './commands'
+import 'cypress-mochawesome-reporter/register'
 
 beforeEach(() => {
-  cy.task('log', '🚀 Starting test...');
-}); 
+  cy.task('log', '🚀 Starting test...')
+}) 

cypress/support/e2e.ts

@@ -6,16 +6,17 @@ Scenario 2: Locked Out User
 4.After both scenarios are executed and validated
 5.Close the browser.
 6. Allow the MCP Server to complete the code generation.
-7.Use the code found in the temp_codegen folder as a reference.
+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 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.
+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 like test data or expected results. if data are credentials, put them in the cypress.env.json
 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.
+15. Check Cypress linting issues and fix them all.
+16. 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.
+17. Then, push the latest changes using the GitHub MCP Server root directory to the remote repository. The repo already exists.
+18. 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 17 steps until all the process is completed."
+In the chat post: "Run the 18 steps until all the process is completed."