UI Automation Demo - Cypress

Cypress E2E test automation suite for https://practice.expandtesting.com.

Setup

yarn install

Running Tests

Local Execution

Interactive mode (opens Cypress UI):

yarn test

Headless mode:

yarn test:headless

Dockerised Local Execution ( Headless )

Build the image:

podman build -t cypress-local .

Run tests in container:

podman run --rm cypress-local

Run with specific browser:

podman run --rm cypress-local run --headless --browser chrome

Run with specific spec:

podman run --rm cypress-local run --headless --browser firefox --spec cypress/e2e/tests/login.e2e.cy.ts

GitHub Actions

Trigger workflow manually:

1. Go to Actions tab
2. Select Cypress GitHub Actions
3. Click Run workflow

Runs tests against Chrome, Edge, and Firefox in parallel. Reports are uploaded as artifacts after execution.

Project Structure

• cypress/e2e/tests/ - Test specs (.cy.ts files)
• cypress/locators/ - Element locators organized by page
• cypress/pages/ - Page Object Model classes with reusable methods
• cypress/fixtures/ - Test data (JSON files)
• cypress/support/ - Custom commands and setup
• cypress/reports/ - Test reports generated after runs

Test Scenarios

• User login/registration
• Form inputs and validation
• Dynamic table flows
• Dynamic table pagination
• Drag and drop interactions
• Add/remove elements
• Notification handling
• API spies, stubs, and clocks

Tech Stack

• Cypress 15.7.0
• TypeScript 5.9.3
• Page Object Model pattern
• Mochawesome Reporter for HTML reports