Cypress E2E Testing Tutorial for QA Automation Engineers

# Create project
mkdir my-cypress-project && cd my-cypress-project

# Init npm
npm init -y

# Install Cypress
npm install cypress --save-dev

# Open Cypress GUI
npx cypress open

# Run headlessly (CI)
npx cypress run

describe('My First Cypress Test', () => {
  it('Visits TechWorld Labs homepage', () => {
    cy.visit('https://thetechworldlabs.com')
    cy.title().should('include', 'TechWorld Labs')
    cy.get('nav').should('be.visible')
    cy.contains('Tutorials').click()
    cy.url().should('include', '/tutorials')
  })
})

my-project/
├── cypress/
│   ├── e2e/          # Test files (.cy.js)
│   ├── fixtures/     # Test data (JSON files)
│   ├── support/
│   │   ├── commands.js   # Custom commands
│   │   └── e2e.js        # Global setup / imports
│   └── downloads/    # Files downloaded during tests
├── cypress.config.js # Configuration (baseUrl, timeouts…)
└── package.json

// Preferred — data-cy attribute
cy.get('[data-cy="login-btn"]').click()

// Chaining selectors
cy.get('.form-group')
  .find('input[type="email"]')
  .type('[email protected]')

cy.get('.alert')
  .should('be.visible')
  .and('have.class', 'alert-success')
  .and('contain', 'Saved successfully')

// Type text
cy.get('#search').type('cypress automation')

// Special key sequences
cy.get('#name').type('Hello{selectAll}{del}')
cy.get('input').type('{ctrl}a').type('{backspace}')
cy.get('form input').type('admin{enter}')   // submit on enter
cy.get('#email').type('{tab}')             // move focus to next field

// Clear and type slowly (like a real user)
cy.get('#amount').clear().type('99.99', { delay: 50 })

// Checkbox
cy.get('#agree-terms').check()
cy.get('#newsletter').uncheck()
cy.get('#agree-terms').should('be.checked')

// Radio button
cy.get('input[type="radio"][value="monthly"]').check()

// Native <select> dropdown
cy.get('select#country').select('Nepal')
cy.get('select#plan').select('pro')  // by value
cy.get('select#size').select(['S', 'M'])  // multi-select

// Hover (trigger mouseover event)
cy.get('.tooltip-trigger').trigger('mouseover')
cy.get('.tooltip').should('be.visible')

// Real hover (install cypress-real-events)
// import 'cypress-real-events' in e2e.js
cy.get('.dropdown-menu').realHover()

// Drag and drop using cypress-real-events
cy.get('[data-cy="drag-item"]').realMouseDown()
cy.get('[data-cy="drop-zone"]').realMouseMove(0, 0).realMouseUp()

// Scroll commands
cy.scrollTo('bottom')
cy.get('#footer').scrollIntoView()
cy.scrollTo(0, 500)

// Define a reusable login command
Cypress.Commands.add('login', (email, password) => {
  cy.visit('/login')
  cy.get('#email').type(email)
  cy.get('#password').type(password)
  cy.get('button[type="submit"]').click()
})

// Use it in any test file
cy.login('[email protected]', 'pass123')

describe('Dashboard Tests', () => {
  before(() => { cy.login('[email protected]', 'pass') })
  beforeEach(() => { cy.visit('/dashboard') })
  afterEach(() => { cy.clearCookies() })
  after(() => { cy.request('POST', '/api/cleanup') })
})

// Define intercept alias before action
cy.intercept('POST', '/api/checkout').as('checkout')
cy.get('[data-cy="buy-btn"]').click()

// Wait until the checkout request completes
cy.wait('@checkout').then((interception) => {
  expect(interception.response.statusCode).to.eq(200)
})
cy.get('.order-confirmation').should('be.visible')

// Wait for loading spinner to disappear
cy.get('.loading-overlay').should('not.exist')

// Wait for element to become enabled
cy.get('button[type="submit"]').should('not.be.disabled').click()

// Extend timeout for a specific command only
cy.get('[data-cy="report-table"]', { timeout: 20000 })
  .should('have.length.greaterThan', 0)

// Increase global timeout in cypress.config.js
// defaultCommandTimeout: 10000

{
  "email":    "[email protected]",
  "password": "test1234",
  "role":     "admin"
}

cy.fixture('user').then((user) => {
  cy.get('#email').type(user.email)
  cy.get('#password').type(user.password)
  cy.get('button[type="submit"]').click()
})

cy.request({
  method: 'POST',
  url:    'https://api.example.com/users',
  body:   { name: 'Suraj', role: 'QA' }
}).then((response) => {
  expect(response.status).to.eq(201)
  expect(response.body.name).to.eq('Suraj')
})

cy.intercept('GET', '/api/products', { fixture: 'products.json' }).as('getProducts')
cy.visit('/products')
cy.wait('@getProducts')
cy.get('.product-card').should('have.length', 3)

class LoginPage {
  visit()             { cy.visit('/login') }
  enterEmail(email)   { cy.get('#email').type(email) }
  enterPassword(pass) { cy.get('#password').type(pass) }
  submit()            { cy.get('[type="submit"]').click() }

  login(email, pass) {
    this.visit()
    this.enterEmail(email)
    this.enterPassword(pass)
    this.submit()
  }
}
export default new LoginPage()

import loginPage from '../topics/LoginPage'

it('logs in successfully', () => {
  loginPage.login('[email protected]', 'pass123')
  cy.url().should('include', '/dashboard')
})

// Spy on a request and wait for it to complete
cy.intercept('GET', '/api/products').as('getProducts')
cy.visit('/products')
cy.wait('@getProducts').its('response.statusCode').should('eq', 200)
cy.get('.product-list').should('be.visible')

// Return fixture data instead of hitting real API
cy.intercept('GET', '/api/products', { fixture: 'products.json' }).as('stubProducts')
cy.visit('/products')
cy.wait('@stubProducts')
cy.get('.product-card').should('have.length', 3)

// Match with wildcards and query params
cy.intercept({ method: 'GET', url: '/api/users/**' }, (req) => {
  req.reply({ statusCode: 200, body: [{ id: 1, name: 'Test User' }] })
}).as('getUser')

// Assert on request body for POST
cy.intercept('POST', '/api/login').as('loginRequest')
cy.wait('@loginRequest').its('request.body').should('deep.include', { email: 'user@test.com' })

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    baseUrl: 'https://staging.example.com',
    defaultCommandTimeout: 6000,
    viewportWidth: 1440,
    viewportHeight: 900,
    retries: { runMode: 2, openMode: 0 },
    video: false,
    env: {
      apiUrl: 'https://api.staging.example.com',
      adminEmail: 'admin@example.com'
    }
  }
})

// Read from cypress.config.js env block
const apiUrl = Cypress.env('apiUrl')

// Override via CLI (e.g. for different environments)
// npx cypress run --env apiUrl=https://prod.example.com

// Or via .env file with cypress-dotenv plugin
cy.request(`${apiUrl}/users`).then((res) => {
  expect(res.status).to.eq(200)
})

{
  "compilerOptions": {
    "target":    "ES6",
    "lib":       ["ES6", "DOM"],
    "types":     ["cypress", "node"],
    "strict":    false,
    "esModuleInterop": true
  },
  "include": ["**/*.ts"]
}

// cypress/support/commands.ts
Cypress.Commands.add('login', (email: string, password: string) => {
  cy.request({ method: 'POST', url: '/api/login', body: { email, password } })
    .then((res) => { cy.setCookie('auth_token', res.body.token) })
})

// cypress/support/index.d.ts — type declaration
declare namespace Cypress {
  interface Chainable {
    login(email: string, password: string): Chainable<void>
  }
}

import loginPage from '../topics/LoginPage'

describe('Login', () => {
  it('logs in via API then visits dashboard', () => {
    cy.login('admin@test.com', 'pass123')
    cy.visit('/dashboard')
    cy.get('[data-cy="welcome-msg"]').should('be.visible')
  })
})

// Skip the UI entirely — hit the login API directly
Cypress.Commands.add('loginByApi', (email, password) => {
  cy.request('POST', '/api/auth/login', { email, password })
    .then((resp) => {
      window.localStorage.setItem('authToken', resp.body.token)
    })
})

// In test:
beforeEach(() => {
  cy.loginByApi('user@test.com', 'pass123')
  cy.visit('/dashboard')
})

// cy.session() runs the setup only once per session key
// Subsequent calls restore cookies/storage from cache
Cypress.Commands.add('login', (email, password) => {
  cy.session([email, password], () => {
    cy.visit('/login')
    cy.get('#email').type(email)
    cy.get('#password').type(password)
    cy.get('[type="submit"]').click()
    cy.url().should('include', '/dashboard')
  }, {
    validate() {
      cy.request('/api/profile').its('status').should('eq', 200)
    }
  })
})

// Intercept every request and inject a Bearer token
cy.intercept('**', (req) => {
  req.headers['Authorization'] = `Bearer ${Cypress.env('JWT_TOKEN')}`
})

// Or set it on localStorage before visiting
cy.window().then((win) => {
  win.localStorage.setItem('token', Cypress.env('JWT_TOKEN'))
})
cy.visit('/app')

const loginScenarios = [
  { email: 'admin@test.com',  password: 'pass1', expectedUrl: '/admin' },
  { email: 'user@test.com',   password: 'pass2', expectedUrl: '/dashboard' },
  { email: 'viewer@test.com', password: 'pass3', expectedUrl: '/read-only' }
]

loginScenarios.forEach(({ email, password, expectedUrl }) => {
  it(`redirects ${email} to ${expectedUrl}`, () => {
    cy.visit('/login')
    cy.get('#email').type(email)
    cy.get('#password').type(password)
    cy.get('[type="submit"]').click()
    cy.url().should('include', expectedUrl)
  })
})

[
  { "name": "Laptop",  "price": 1200, "category": "Electronics" },
  { "name": "Desk",    "price": 350,  "category": "Furniture" },
  { "name": "Headset", "price": 89,   "category": "Electronics" }
]

cy.fixture('products').then((products) => {
  products.forEach((product) => {
    cy.request('POST', '/api/products', product)
      .its('status').should('eq', 201)
  })
})

// cy.each() — iterate over DOM elements
cy.get('.product-card').each(($card) => {
  cy.wrap($card).find('.price').should('be.visible')
  cy.wrap($card).find('.add-to-cart').should('not.be.disabled')
})

// Cypress auto-accepts alert() — no action needed
// To assert the alert text:
cy.on('window:alert', (text) => {
  expect(text).to.eq('Item deleted!')
})
cy.get('[data-cy="delete-btn"]').click()

// Override confirm() to return false (cancel)
cy.on('window:confirm', () => false)
cy.get('[data-cy="delete-btn"]').click()
cy.get('.item-row').should('still.exist')

// Install: npm install cypress-iframe --save-dev
// In e2e.js: import 'cypress-iframe'

cy.frameLoaded('#payment-iframe')
cy.iframe('#payment-iframe')
  .find('input[name="cardNumber"]')
  .type('4111111111111111')

// Without plugin — using cy.wrap on contentDocument
cy.get('iframe').its('0.contentDocument.body')
  .should('not.be.empty')
  .then(cy.wrap)
  .find('button[type="submit"]')
  .click()

// Cypress runs in one tab — remove target="_blank" to test in same window
cy.get('a[target="_blank"]')
  .invoke('removeAttr', 'target')
  .click()
cy.url().should('include', '/new-page')

// Or stub window.open and assert URL
cy.window().then((win) => {
  cy.stub(win, 'open').as('windowOpen')
})
cy.get('.external-link').click()
cy.get('@windowOpen').should('be.calledWithMatch', 'https://docs.example.com')

beforeEach(() => {
  // Get a real token via API, then set the cookie
  cy.request('POST', '/api/login', {
    email: 'user@test.com', password: 'pass'
  }).then((res) => {
    cy.setCookie('auth_token', res.body.token)
  })
  cy.visit('/dashboard') // already authenticated
})

// Set localStorage before visiting
cy.window().then((win) => {
  win.localStorage.setItem('theme', 'dark')
  win.localStorage.setItem('lang', 'en')
})

// Assert a value
cy.window().its('localStorage')
  .invoke('getItem', 'theme')
  .should('eq', 'dark')

// Clear all storage between tests
cy.clearLocalStorage()
cy.clearAllSessionStorage()

// Preset sizes: 'iphone-6', 'ipad-2', 'samsung-s10', etc.
cy.viewport('iphone-6')
cy.visit('/')
cy.get('.hamburger-menu').should('be.visible')
cy.get('.desktop-nav').should('not.be.visible')

// Custom width × height
cy.viewport(1920, 1080)
cy.get('.desktop-nav').should('be.visible')

// Test multiple viewports in a loop
['iphone-6', 'ipad-2', [1280, 720]].forEach((size) => {
  it(`renders on ${size}`, () => {
    cy.viewport(...(Array.isArray(size) ? size : [size]))
    cy.visit('/')
    cy.get('main').should('be.visible')
  })
})

// Full page screenshot
cy.screenshot('checkout-step-2')

// Element-scoped screenshot
cy.get('.invoice-table').screenshot('invoice')

// Screenshot on every test failure (add to afterEach)
afterEach(function () {
  if (this.currentTest.state === 'failed') {
    cy.screenshot(`FAILED-${this.currentTest.title}`)
  }
})

// Access elements inside a shadow root
cy.get('my-custom-button')
  .shadow()
  .find('button')
  .click()

// Nested shadow roots
cy.get('payment-widget')
  .shadow()
  .find('card-input')
  .shadow()
  .find('input')
  .type('4111111111111111')

// Enable shadow DOM piercing globally (cypress.config.js)
// includeShadowDom: true  — then cy.get() pierces shadow roots automatically
cy.get('my-element input').should('be.visible')  // works with includeShadowDom: true

// Wait for skeleton/loader to disappear first
cy.get('.skeleton-loader').should('not.exist')
cy.get('.data-table').should('be.visible')

// Lazy-loaded images — trigger scroll to load them
cy.get('[data-cy="product-grid"]').scrollIntoView()
cy.get('.product-img').should('have.attr', 'src').and('not.be.empty')

// Infinite scroll — load more items
cy.scrollTo('bottom')
cy.get('.item-card').should('have.length.greaterThan', 10)

// Retry on stale DOM — Cypress handles this automatically via .should()
cy.get('[data-cy="user-count"]')
  .should('not.have.text', 'Loading...')
  .invoke('text')
  .then(parseFloat)
  .should('be.greaterThan', 0)

// Upload a file from cypress/fixtures/
cy.get('input[type="file"]')
  .selectFile('cypress/fixtures/resume.pdf')
cy.get('.upload-status').should('contain', 'Uploaded successfully')

// Drag-and-drop upload (drop zone)
cy.get('.drop-zone')
  .selectFile('cypress/fixtures/report.csv', { action: 'drag-drop' })

// Upload multiple files
cy.get('input[type="file"]')
  .selectFile(['cypress/fixtures/a.jpg', 'cypress/fixtures/b.jpg'])

// Click the download button
cy.get('[data-cy="export-btn"]').click()

// File lands in cypress/downloads/
cy.readFile('cypress/downloads/report.csv')
  .should('contain', 'OrderID,Amount')

// Verify JSON download content
cy.readFile('cypress/downloads/users.json')
  .its('length')
  .should('be.greaterThan', 0)

const { defineConfig } = require('cypress')
const db = require('./support/db')

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('task', {
        // Seed a test user directly in the DB
        async seedUser(user) {
          await db.users.insert(user)
          return null
        },
        // Get latest OTP email from mailhog/inbox
        async getOTP(email) {
          const msg = await mailhog.getLatest(email)
          return msg.body.match(/\d{6}/)[0]
        }
      })
    }
  }
})

cy.task('seedUser', { name: 'Jane', email: 'jane@test.com' })

cy.task('getOTP', 'jane@test.com').then((otp) => {
  cy.get('#otp-input').type(otp)
  cy.get('[data-cy="verify-btn"]').click()
})

module.exports = defineConfig({
  e2e: {
    retries: {
      runMode:  2,  // retry 2× in CI (npx cypress run)
      openMode: 0   // no retries in interactive GUI
    }
  }
})

it('submits the payment form', { retries: { runMode: 3 } }, () => {
  // This test will retry up to 3 times in CI
  cy.get('[data-cy="pay-btn"]').click()
  cy.get('.success-toast').should('be.visible')
})

# Run Cypress Launchpad and select Component Testing
npx cypress open

# Or configure manually
npm install @cypress/react vite --save-dev

module.exports = defineConfig({
  component: {
    devServer: { framework: 'react', bundler: 'vite' },
    specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}'
  }
})

import Button from './Button'

describe('Button component', () => {
  it('renders label and fires onClick', () => {
    const onClick = cy.stub().as('clickHandler')
    cy.mount(<Button label="Save" onClick={onClick} />)

    cy.get('button').should('have.text', 'Save')
    cy.get('button').click()
    cy.get('@clickHandler').should('have.been.calledOnce')
  })

  it('shows disabled state', () => {
    cy.mount(<Button label="Submit" disabled />)
    cy.get('button').should('be.disabled')
  })
})

npm install cypress-axe axe-core --save-dev

import 'cypress-axe'

it('has no accessibility violations on login page', () => {
  cy.visit('/login')
  cy.injectAxe()
  cy.checkA11y()  // fails if any WCAG violations found
})

// Check only a specific part of the page
cy.injectAxe()
cy.checkA11y('#main-form')

// Configure which rules to apply
cy.checkA11y(null, {
  runOnly: { type: 'tag', values: ['wcag2a', 'wcag2aa'] }
})

// Log violations without failing the test
cy.checkA11y(null, null, (violations) => {
  violations.forEach((v) => cy.task('log', `A11Y: ${v.id} — ${v.description}`))
}, true)

npm install cypress-mochawesome-reporter --save-dev

module.exports = defineConfig({
  reporter: 'cypress-mochawesome-reporter',
  reporterOptions: {
    charts: true,
    reportPageTitle: 'My Test Report',
    embeddedScreenshots: true,
    inlineAssets: true
  },
  e2e: {
    setupNodeEvents(on, config) {
      require('cypress-mochawesome-reporter/plugin')(on)
    }
  }
})

import 'cypress-mochawesome-reporter/register'

npm install @shelex/cypress-allure-plugin allure-commandline --save-dev

// cypress/support/e2e.js
import '@shelex/cypress-allure-plugin'

// Run tests and generate report:
// npx cypress run --env allure=true
// npx allure generate allure-results --clean -o allure-report
// npx allure open allure-report

name: Cypress E2E Tests
on: [push, pull_request]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: cypress-io/github-action@v6
        with:
          start: npm start
          wait-on: 'http://localhost:3000'
          record: true
        env:
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        containers: [1, 2, 3]
    steps:
      - uses: actions/checkout@v3
      - uses: cypress-io/github-action@v6
        with:
          record: true
          parallel: true
          group: 'E2E Tests'
        env:
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}