Make a folder and initialize npm inside it:

mkdir my-cypress-project
cd my-cypress-project
npm init -y

Cypress is installed as a dev dependency — it ships its own Electron browser, no extra setup:

npm install cypress --save-dev

This opens the Cypress app. Choose E2E Testing → pick a browser → Cypress scaffolds your project:

npx cypress open

These are the files that appear — you'll use every one of them in this course:

In cypress/e2e/, create an empty file with a .cy.js (or .cy.ts) extension:

describe is your test suite — inside it you can write any number of it() test cases:

describe('My First Test', () => {
  // it blocks and test logic go here
})

cy.visit() is the Cypress command that navigates to any URL:

describe('My First Test', () => {
  it('Visits a website', () => {
    cy.visit('https://qa.imcseian.com/')
  })
})

Save the file, then from your project root:

npx cypress open

Works with any CSS selector. Pro tip: prefer data-cy attributes — they never change when styles do:

.type() types into inputs, .clear() empties them, .click() clicks buttons & links. cy.contains() finds elements by visible text:

cy.get('#email').type('qa@tester.io')
cy.get('[data-cy="login"]').click()
cy.contains('Welcome back').should('be.visible')

.should() adds an assertion; .and() chains another one on the same element:

cy.get('.title')
  .should('be.visible')
  .and('have.text', 'Welcome')

cy.get() and .should() keep retrying for up to 4 seconds (by default) until the element exists / the assertion passes. No cy.wait(5000) hacks — that's an anti-pattern!

Slow-loading element? Extend the timeout per command:

cy.get('.status', { timeout: 10000 })
  .should('have.text', 'Success')

Drop a JSON file into cypress/fixtures/:

{
  "users": [
    { "email": "qa1@tester.io" },
    { "email": "qa2@tester.io" },
    { "email": "admin@corp.io" }
  ]
}

cy.fixture() loads the file; .then() gives you the data. You can also alias it with .as('users') and read it back with cy.get('@users'):

cy.fixture('users.json').then((users) => {
  users.users.forEach((u) => {
    cy.get('#email').clear().type(u.email)
  })
})

{
  "users": [
    { "email": "qa1@tester.io" },
    { "email": "qa2@tester.io" },
    { "email": "admin@corp.io" }
  ]
}

Add it in cypress/support/commands.js — it's auto-loaded before every spec:

Cypress.Commands.add('login', () => {
  cy.get('#email').type('qa@tester.io')
  cy.get('.btn-login').click()
})

One line replaces the whole flow — and it shows up nicely in the command log:

cy.login()

cy.intercept() catches the matching request and serves your fixture instead — the backend never sees it:

cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers')
cy.visit('/dashboard')

cy.wait('@getUsers')
  .its('response.statusCode')
  .should('eq', 200)

Simulate a 500 error, an empty list, or slow responses — without touching the backend:

cypress open is for development. cypress run runs headless — perfect for CI:

npx cypress run

Create .github/workflows/cypress.yml — the official action starts your app and runs every spec:

name: E2E Tests
on: [push]
jobs:
  cypress:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: cypress-io/github-action@v6
        with:
          start: npm start