Cypress
Automation Testing Tutorial

{
  "scripts": {
    "cy:open": "cypress open",    // opens interactive Test Runner
    "cy:run":  "cypress run"     // runs all tests headlessly (for CI)
  }
}

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',  // Root URL — use cy.visit('/login') instead of full URL
    specPattern: 'cypress/e2e/**/*.cy.{js,ts}', // Where Cypress looks for test files
    viewportWidth: 1280,             // Browser window width for tests
    viewportHeight: 720,            // Browser window height for tests
    defaultCommandTimeout: 10000,   // Max wait time for each command (10 seconds)
    pageLoadTimeout: 60000,         // Max wait time for page to load (60 seconds)
    video: true,                     // Record video of test runs (headless mode)
    screenshotOnRunFailure: true,   // Auto-capture screenshot when test fails
    retries: {
      runMode: 2,                   // Retry failed tests 2 times in CI (cypress run)
      openMode: 0                   // No retries in interactive mode (cypress open)
    }
  }
});

// describe() groups related tests — like a folder
describe('Login Page', () => {

  // beforeEach() runs before every it() in this describe
  beforeEach(() => {
    cy.visit('/login');  // uses baseUrl from cypress.config.js
  });

  // it() declares one test case
  it('should login with valid credentials', () => {
    // Step 1: Type email into the email field
    cy.get('[data-testid="email"]').type('[email protected]');

    // Step 2: Type password
    cy.get('[data-testid="password"]').type('Test@123');

    // Step 3: Click the Login button
    cy.get('[data-testid="login-btn"]').click();

    // Step 4: Verify we landed on the dashboard
    cy.url().should('include', '/dashboard');

    // Step 5: Verify welcome message is visible
    cy.contains('Welcome, Priya').should('be.visible');
  });

  it('should show error for wrong password', () => {
    cy.get('[data-testid="email"]').type('[email protected]');
    cy.get('[data-testid="password"]').type('WrongPass');
    cy.get('[data-testid="login-btn"]').click();
    cy.contains('Invalid credentials').should('be.visible');
  });

});

// HTML: <input data-testid="email-input" />
cy.get('[data-testid="email-input"]').type('[email protected]');

// HTML: <button data-cy="login-btn">Login</button>
cy.get('[data-cy="login-btn"]').click();

// HTML: <div data-testid="error-msg">Invalid credentials</div>
cy.get('[data-testid="error-msg"]').should('be.visible');

// Click a button with text "Submit"
cy.contains('Submit').click();

// Assert error message is visible
cy.contains('Invalid credentials').should('be.visible');

// Find a specific element type containing text
cy.contains('button', 'Login').click();  // only find <button> with text "Login"

// Using regex for partial/case-insensitive match
cy.contains(/welcome/i).should('be.visible');

// By stable ID (ok if ID never changes)
cy.get('#submit-button').click();

// By input type (fairly stable)
cy.get('input[type="email"]').type('[email protected]');

// By CSS class — FRAGILE, avoid if possible
cy.get('.btn-primary').click();  // breaks if class name changes

// Chaining: find within a parent element
cy.get('form').find('input[name="email"]').type('[email protected]');

// ── NAVIGATION ──────────────────────────────────
cy.visit('/login');            // Navigate to a page (relative path)
cy.visit('https://example.com'); // Absolute URL
cy.go('back');                // Browser back button
cy.reload();                   // Refresh the page

// ── CLICK ───────────────────────────────────────
cy.get('[data-testid="login-btn"]').click();
cy.contains('Submit').click();
cy.get('[data-testid="menu"]').dblclick();  // double click
cy.get('[data-testid="item"]').rightclick(); // right click

// ── TYPE (into input fields) ────────────────────
cy.get('[data-testid="email"]').type('[email protected]');
cy.get('[data-testid="search"]').type('laptop{enter}'); // type & press Enter

// ── CLEAR ───────────────────────────────────────
cy.get('[data-testid="email"]').clear();
cy.get('[data-testid="email"]').clear().type('[email protected]'); // clear then retype

// ── SELECT DROPDOWN ─────────────────────────────
cy.get('select[name="country"]').select('India');     // by visible text
cy.get('select[name="country"]').select('IN');        // by option value

// ── CHECKBOX / RADIO ────────────────────────────
cy.get('[data-testid="terms"]').check();          // check a checkbox
cy.get('[data-testid="terms"]').uncheck();        // uncheck a checkbox
cy.get('input[value="male"]').check();           // check a radio button

// ── HOVER ───────────────────────────────────────
cy.get('[data-testid="account-menu"]').trigger('mouseover');

// ── SCROLL ──────────────────────────────────────
cy.get('[data-testid="lazy-section"]').scrollIntoView();

// ── SCREENSHOT ──────────────────────────────────
cy.screenshot('login-page'); // saves to cypress/screenshots/

// ── VISIBILITY ──────────────────────────────────
cy.get('[data-testid="welcome-msg"]').should('be.visible');
cy.get('[data-testid="error"]').should('not.be.visible');

// ── URL ─────────────────────────────────────────
cy.url().should('include', '/dashboard');
cy.url().should('eq', 'http://localhost:3000/dashboard');

// ── TEXT CONTENT ────────────────────────────────
cy.get('h1').should('have.text', 'Dashboard');            // exact match
cy.get('[data-testid="cart"]').should('include.text', '3'); // partial match
cy.get('[data-testid="msg"]').should('contain', 'Success');

// ── INPUT VALUE ─────────────────────────────────
cy.get('[data-testid="email"]').should('have.value', '[email protected]');

// ── CSS CLASS ───────────────────────────────────
cy.get('[data-testid="tab"]').should('have.class', 'active');
cy.get('[data-testid="btn"]').should('not.have.class', 'disabled');

// ── ELEMENT STATE ───────────────────────────────
cy.get('[data-testid="submit"]').should('be.disabled');
cy.get('[data-testid="submit"]').should('be.enabled');
cy.get('[data-testid="terms"]').should('be.checked');
cy.get('[data-testid="terms"]').should('not.be.checked');
cy.get('[data-testid="field"]').should('be.empty');

// ── COUNT ───────────────────────────────────────
cy.get('li.product-item').should('have.length', 10);

// ── EXISTENCE IN DOM ────────────────────────────
cy.get('[data-testid="modal"]').should('exist');
cy.get('[data-testid="modal"]').should('not.exist');

// ── CHAIN MULTIPLE ASSERTIONS with .and() ───────
cy.get('[data-testid="link"]')
  .should('be.visible')
  .and('have.attr', 'href')
  .and('include', '/profile');

describe('Login Feature', () => {

  before(() => {
    // Runs ONCE before all tests in this describe block
    cy.log('Setting up test data...');
    // e.g. create a test user via API
  });

  beforeEach(() => {
    // Runs before EACH test — navigate to login page
    cy.visit('/login');
    cy.clearCookies();  // ensure fresh state
  });

  it('valid login redirects to dashboard', () => {
    cy.get('[data-testid="email"]').type('[email protected]');
    cy.get('[data-testid="password"]').type('Test@123');
    cy.get('[data-testid="login-btn"]').click();
    cy.url().should('include', '/dashboard');
  });

  it('empty fields show validation errors', () => {
    cy.get('[data-testid="login-btn"]').click();
    cy.contains('Email is required').should('be.visible');
  });

  afterEach(() => {
    // Runs after EACH test — clear session data
    cy.clearLocalStorage();
  });

  after(() => {
    // Runs ONCE after all tests — cleanup
    cy.log('All login tests complete. Cleaning up...');
  });

});

// ── SPY — observe a real request without changing it ──
cy.intercept('GET', '/api/products').as('getProducts');
cy.visit('/products');
cy.wait('@getProducts');  // wait for request to finish
cy.get('[data-testid="product-list"]').should('be.visible');

// ── STUB — replace real API with fake response ────────
cy.intercept('GET', '/api/products', {
  statusCode: 200,
  body: [
    { id: 1, name: 'Laptop', price: 50000 },
    { id: 2, name: 'Phone',  price: 30000 }
  ]
}).as('stubbedProducts');
cy.visit('/products');
cy.wait('@stubbedProducts');
cy.get('li.product').should('have.length', 2);

// ── STUB ERROR — test how app handles API failure ────
cy.intercept('GET', '/api/products', {
  statusCode: 500,
  body: { error: 'Internal Server Error' }
}).as('productError');
cy.visit('/products');
cy.wait('@productError');
cy.contains('Something went wrong').should('be.visible');

// ── INTERCEPT POST (login API) ───────────────────────
cy.intercept('POST', '/api/login').as('loginRequest');
cy.get('[data-testid="login-btn"]').click();
cy.wait('@loginRequest').its('response.statusCode').should('eq', 200);