Cypress

Advanced Cypress Test Example with Network Stubbing:

describe('API Testing Example', () => {
  it('stubs network requests and validates app behavior', () => {
    // Setup the route to be stubbed
    cy.intercept('GET', '/api/users/*', {
      statusCode: 200,
      body: {
        id: 1,
        name: 'Test User',
        email: 'test@example.com'
      }
    }).as('getUser')
    
    // Visit the page that will make the request
    cy.visit('/user/1')
    
    // Wait for the intercept to be called
    cy.wait('@getUser')
    
    // Verify the UI reflects the stubbed data
    cy.get('.user-name').should('contain', 'Test User')
    cy.get('.user-email').should('contain', 'test@example.com')
    
    // Verify network request properties if needed
    cy.get('@getUser').its('request.url').should('include', '/api/users/1')
  })
})
        

Advanced Testing Pattern Comparison:

Handling async operations in Cypress:

// Cypress handles waiting automatically
cy.intercept('GET', '/api/data').as('dataRequest')
cy.visit('/dashboard')
cy.wait('@dataRequest')
cy.get('[data-cy=result]').should('contain', 'Success')

// Access to application code for advanced scenarios
cy.window().then(win => {
  const appState = win.store.getState()
  expect(appState.user.isAuthenticated).to.be.true
})
        

Equivalent pattern in Selenium (using JavaScript):

// Manual setup for request interception
const proxy = new BrowserMobProxy()
proxy.start()
proxy.newHar()

const options = new chrome.Options()
options.setProxy(proxy.seleniumProxy())
const driver = new webdriver.Builder()
  .forBrowser('chrome')
  .setChromeOptions(options)
  .build()

// Manual wait implementation
await driver.get('/dashboard')
const wait = new webdriver.WebDriverWait(driver, 10)
await wait.until(webdriver.until.elementLocated(webdriver.By.css('[data-cy=result]')))
const element = await driver.findElement(webdriver.By.css('[data-cy=result]'))
const text = await element.getText()
assert(text.includes('Success'))

// No direct access to application state
// Would require exposing state through the DOM or custom JS execution
        

# Standard installation
npm install cypress --save-dev

# Direct download (bypasses npm post-install hooks)
CYPRESS_INSTALL_BINARY=0 npm install cypress --save-dev
npx cypress install

# Specific version installation
npm install cypress@9.5.1 --save-dev

# With caching for CI environments
CYPRESS_CACHE_FOLDER=~/cypress_cache npm install cypress
        

{
  "baseUrl": "http://localhost:3000",
  "viewportWidth": 1280,
  "viewportHeight": 720,
  "defaultCommandTimeout": 6000,
  "requestTimeout": 10000,
  "responseTimeout": 30000,
  "pageLoadTimeout": 60000,
  "video": true,
  "videoCompression": 32,
  "videoUploadOnPasses": false,
  "trashAssetsBeforeRuns": true,
  "screenshotOnRunFailure": true,
  "chromeWebSecurity": false,
  "retries": {
    "runMode": 2,
    "openMode": 0
  },
  "env": {
    "apiUrl": "https://api.example.com",
    "authToken": "test-token-123"
  },
  "experimentalStudio": true,
  "reporter": "mochawesome",
  "reporterOptions": {
    "reportDir": "cypress/reports",
    "overwrite": false
  }
}
        

# cypress.ci.json
{
  "baseUrl": "http://localhost:3000",
  "video": true,
  "screenshotOnRunFailure": true,
  "trashAssetsBeforeRuns": true,
  "videoCompression": 15,
  "reporter": "junit",
  "reporterOptions": {
    "mochaFile": "results/cypress-[hash].xml",
    "toConsole": true
  },
  "retries": 2
}

# Run with the CI config
cypress run --config-file cypress.ci.json
        

// cypress/plugins/index.js
const cypressTypeScriptPreprocessor = require('@cypress/webpack-preprocessor')

module.exports = (on, config) => {
  // TypeScript support
  const options = {
    webpackOptions: {
      resolve: {
        extensions: ['.ts', '.js']
      },
      module: {
        rules: [
          {
            test: /\.ts$/,
            exclude: [/node_modules/],
            use: [
              {
                loader: 'ts-loader'
              }
            ]
          }
        ]
      }
    },
  }
  on('file:preprocessor', cypressTypeScriptPreprocessor(options))
  
  // Environment variable handling
  config.env.customVariable = process.env.CUSTOM_VARIABLE
  
  return config
}
        

{
  // Base Configuration
  "baseUrl": "http://localhost:3000",
  "projectId": "a1b2c3", // For Cypress Dashboard integration
  
  // File/Folder Configuration
  "fixturesFolder": "cypress/fixtures",
  "integrationFolder": "cypress/integration",
  "supportFile": "cypress/support/index.js",
  "pluginsFile": "cypress/plugins/index.js",
  "screenshotsFolder": "cypress/screenshots",
  "videosFolder": "cypress/videos",
  "downloadsFolder": "cypress/downloads",
  
  // Viewport Configuration
  "viewportWidth": 1280,
  "viewportHeight": 720,
  
  // Timeout Settings (milliseconds)
  "defaultCommandTimeout": 4000,
  "execTimeout": 60000,
  "taskTimeout": 60000,
  "pageLoadTimeout": 60000,
  "requestTimeout": 5000,
  "responseTimeout": 30000,
  
  // Test Execution Settings
  "video": true,
  "videoCompression": 32,
  "videoUploadOnPasses": true,
  "trashAssetsBeforeRuns": true,
  "watchForFileChanges": true,
  "testFiles": "**/*.spec.js",
  "screenshotOnRunFailure": true,
  "chromeWebSecurity": true,
  
  // Retries Configuration
  "retries": {
    "runMode": 2,      // Number of retries in cypress run
    "openMode": 0      // Number of retries in cypress open
  },
  
  // Component Testing (v10+)
  "component": {
    "componentFolder": "src",
    "testFiles": "**/*.spec.{js,ts,jsx,tsx}"
  },
  
  // Environment Variables
  "env": {
    "apiUrl": "https://api.example.com",
    "authToken": "test-token-123",
    "featureFlags": {
      "newFeature": true
    }
  },
  
  // Reporter Configuration
  "reporter": "mochawesome",
  "reporterOptions": {
    "reportDir": "cypress/reports",
    "overwrite": false,
    "html": true,
    "json": true
  },
  
  // Experimental Features
  "experimentalSourceRewriting": true,
  "experimentalSessionAndOrigin": true,
  "experimentalStudio": false,
  
  // Plugin/Module Configuration
  "nodeVersion": "system"
}
        

# cypress.dev.json, cypress.staging.json, cypress.prod.json
cypress run --config-file cypress.staging.json
        

// cypress/plugins/index.js
module.exports = (on, config) => {
  // Modify baseUrl based on environment variable
  const environment = process.env.ENVIRONMENT || 'development'
  
  const environmentConfigs = {
    development: {
      baseUrl: 'http://localhost:3000',
      env: {
        apiUrl: 'http://localhost:8000/api'
      }
    },
    staging: {
      baseUrl: 'https://staging.example.com',
      env: {
        apiUrl: 'https://staging-api.example.com'
      }
    },
    production: {
      baseUrl: 'https://example.com',
      env: {
        apiUrl: 'https://api.example.com'
      }
    }
  }
  
  // Merge environment-specific config with base config
  return { ...config, ...environmentConfigs[environment] }
}
        

// scripts/run-tests.js
const cypress = require('cypress')

const browsers = ['chrome', 'firefox', 'edge']

// Run tests across multiple browsers
Promise.all(
  browsers.map(browser => {
    return cypress.run({
      browser: browser,
      config: {
        baseUrl: process.env.APP_URL || 'http://localhost:3000',
        viewportWidth: 1280,
        viewportHeight: 720
      },
      env: {
        grepTags: '@smoke',
        apiUrl: process.env.API_URL
      }
    })
  })
)
.then(results => {
  const failures = results.reduce((sum, result) => sum + result.totalFailed, 0)
  process.exit(failures ? 1 : 0)
})
        

{
  // Speed up test execution
  "numTestsKeptInMemory": 10,    // Reduce for memory-constrained environments
  "modifyObstructiveCode": false, // Slightly faster but less robust
  "video": false,                // Disable video recording for faster runs
  "trashAssetsBeforeRuns": false // Skip cleanup for faster sequential runs
}
        

// cypress/support/index.d.ts
/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable {
    login(email: string, password: string): Chainable<Element>
  }
  
  interface Cypress {
    env(): {
      apiUrl: string
      authToken: string
      featureFlags: {
        newFeature: boolean
      }
    }
  }
}
        

Advanced Test Structure Example:

// cypress/e2e/authentication.cy.js

describe('Authentication Flow', () => {
  beforeEach(() => {
    // Reset state between tests
    cy.intercept('POST', '/api/login').as('loginRequest')
    cy.visit('/login')
  })
  
  it('displays validation errors with invalid credentials', () => {
    cy.get('[data-cy=email-input]').type('invalid@example.com')
    cy.get('[data-cy=password-input]').type('wrongpassword')
    cy.get('[data-cy=login-button]').click()
    
    // Wait for the API request to complete
    cy.wait('@loginRequest')
    
    // Assertions using chainable methods
    cy.get('[data-cy=error-message]')
      .should('be.visible')
      .and('contain.text', 'Invalid credentials')
      .and('have.css', 'color', 'rgb(220, 53, 69)') // Red color
  })
  
  it('successfully logs in with valid credentials', () => {
    // Using a custom command defined in support/commands.js
    cy.fixture('user.json').then((userData) => {
      cy.get('[data-cy=email-input]').type(userData.email)
      cy.get('[data-cy=password-input]').type(userData.password)
      cy.get('[data-cy=login-button]').click()
      
      cy.wait('@loginRequest').its('response.statusCode').should('eq', 200)
      
      // Verify redirection to dashboard
      cy.url().should('include', '/dashboard')
      cy.get('[data-cy=welcome-message]')
        .should('contain', userData.name)
        
      // Verify local storage for auth token
      cy.window().its('localStorage.token')
        .should('exist')
    })
  })
})
        

Advanced Assertion Patterns:

// DOM-based assertions with retry-ability
cy.get('table tr')
  .should('have.length.gt', 5)                    // Greater than 5 rows
  .and('have.length.lt', 10)                      // Less than 10 rows
  .first()                                          // Focus on first row
  .should('have.attr', 'data-status', 'active')  // Has attribute check
  .find('td')                                      // Find cells within row
  .eq(2)                                            // Get the third cell
  .should(($el) => {
    // Custom function assertion using jQuery element
    expect(parseFloat($el.text())).to.be.greaterThan(100)
  })

// Network request assertions
cy.wait('@loginRequest')
  .its('request.body')                              // Access request body
  .should('deep.include', { username: 'testuser' }) // Deep object check
  
cy.wait('@profileRequest')
  .its('response.statusCode')                       // Access status code
  .should('eq', 200)                                // Equality check

// Multiple assertions on application state
cy.window()
  .its('app.store.state.user')                      // Access app state
  .should('deep.include', {
    isLoggedIn: true,
    role: 'admin',
    permissions: Cypress.sinon.match.array.contains(['read', 'write'])
  })
        

Complete Real-world Example:

describe('User authentication flow', () => {
  it('handles failed login attempt correctly', () => {
    cy.visit('/login')
    
    // Fill form with invalid credentials
    cy.get('[data-testid="username-field"]')
      .should('be.visible')
      .clear()
      .type('invalid@example.com')
    
    cy.get('[data-testid="password-field"]')
      .should('be.visible')
      .clear()
      .type('wrongpassword')
      
    // Submit and verify error message
    cy.get('[data-testid="login-button"]')
      .should('not.be.disabled')
      .click()
      
    // Wait for error to appear and verify message
    cy.get('[data-testid="error-message"]', { timeout: 10000 })
      .should('be.visible')
      .and('contain', 'Invalid credentials')
      
    // Verify we're still on login page
    cy.url().should('include', '/login')
  })
})

Comprehensive Selection Strategy Example:

// Setting up reusable selectors
const selectors = {
  userTable: '[data-testid="user-table"]',
  userRow: '[data-testid="user-row"]',
  editButton: '[data-testid="edit-btn"]',
  deleteButton: '[data-testid="delete-btn"]',
  confirmDialog: '[data-testid="confirm-dialog"]',
  confirmButton: '[data-testid="confirm-action"]'
}

// Test that demonstrates advanced selection techniques
describe('User Management', () => {
  beforeEach(() => {
    cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers')
    cy.visit('/admin/users')
    cy.wait('@getUsers')
  })
  
  it('allows deleting a user with confirmation', () => {
    // Find specific user by content and interact with nested elements
    cy.get(selectors.userTable)
      .contains(selectors.userRow, 'john.doe@example.com')
      .within(() => {
        // Scoped to just this row
        cy.get(selectors.deleteButton).click()
      })
      
    // Handle confirmation dialog
    cy.get(selectors.confirmDialog)
      .should('be.visible')
      .within(() => {
        // Assert dialog content first
        cy.contains('Are you sure you want to delete this user?')
          .should('be.visible')
        
        // Confirm deletion
        cy.get(selectors.confirmButton).click()
      })
      
    // Verify user removal - negative assertion
    cy.get(selectors.userTable)
      .contains(selectors.userRow, 'john.doe@example.com')
      .should('not.exist')
      
    // Verify API call was made with correct data
    cy.wait('@deleteUser').its('request.body')
      .should('deep.equal', { userId: 'user-123' })
  })
})

Advanced Example with Command Chaining:

cy.visit('/complex-form');

// Working with a form inside a specific section
cy.get('.user-section').within(() => {
  // Type with special characters and specific options
  cy.get('input[name="email"]')
    .type('test@example.com{enter}', { delay: 50 })
    .should('have.value', 'test@example.com');
    
  // Force-click on a partially hidden element
  cy.contains('Advanced Options')
    .click({ force: true });
    
  // Select multiple items from a multi-select dropdown
  cy.get('select[multiple]')
    .select(['option1', 'option2']);
    
  // Handle a custom dropdown that isn't a native select element
  cy.get('.custom-dropdown').click();
  cy.get('.dropdown-menu').contains('Option 3').click();
});

// Complex assertions with retry logic
cy.get('.status-indicator')
  .should('have.attr', 'data-status', 'success')
  .and('have.css', 'background-color', 'rgb(0, 128, 0)');

// Using aliasing for reusable elements
cy.get('form').as('userForm');
cy.get('@userForm').find('button[type="submit"]').click();

// Handle confirmations
cy.on('window:confirm', (text) => {
  expect(text).to.equal('Are you sure you want to submit?');
  return true;
});
        

BDD vs TDD Syntax:

Cypress supports both styles but should() (BDD) is preferred and more commonly used:

// BDD style with should()
cy.get('#element').should('have.text', 'Expected text')

// TDD style with assert
cy.get('#element').then(($el) => {
  assert.equal($el.text(), 'Expected text')
})
        

1. Chained assertions with multiple checks:

cy.get('input[type="email"]')
  .should('be.visible')
  .and('have.attr', 'placeholder', 'Enter your email')
  .and('have.class', 'form-control')
  .and('not.be.disabled')
        

2. Custom assertions with callbacks:

cy.get('table').find('tr').should(($rows) => {
  // Custom assertion logic
  expect($rows.length).to.be.at.least(5)
  expect($rows.length).to.be.at.most(10)
  
  // Complex validation
  const texts = $rows.map((i, el) => Cypress.$(el).text()).get()
  expect(texts).to.include('Expected Row')
  expect(texts).to.have.length(7)
})
        

3. Working with complex data types:

cy.request('GET', '/api/users')
  .its('body')
  .should((users) => {
    expect(users).to.be.an('array')
    expect(users[0]).to.have.all.keys('id', 'name', 'email')
    expect(users).to.have.length.of.at.least(3)
  })
        

Custom error messages:

cy.get('#user-list')
  .find('li')
  .should((items) => {
    expect(items.length, `Expected at least 3 users but found ${items.length}`).to.be.at.least(3)
  })
        

Assertion Chain Architecture:

// Internal representation simplified:
cy.get('button') // yields jQuery element as subject
  .should('be.visible') // operates on previous subject, yields same subject
  .and('contain', 'Submit') // alias for .should(), operates on same subject
  // Each assertion gets a new opportunity to retry with the original subject
        

1. Multiple property validations with callback functions:

cy.get('form')
  .should(($form) => {
    // Multiple assertions in a single callback
    expect($form).to.have.attr('method', 'post')
    expect($form).to.have.attr('action', '/submit')
    expect($form.find('input')).to.have.length(3)
    expect($form.find('button[type="submit"]')).to.exist
    
    // Custom validations
    const hasRequiredFields = $form.find('[required]').length >= 2
    expect(hasRequiredFields).to.be.true
  })
        

2. Targeted assertions with DOM traversal:

cy.get('table tbody')
  .find('tr')
  .should('have.length.at.least', 5)
  .first()
  .should('have.class', 'header-row')
  .find('td')
  .should('have.length', 4)
  .and(($cells) => {
    expect($cells.eq(0)).to.contain('ID')
    expect($cells.eq(1)).to.contain('Name')
    expect($cells.eq(2)).to.contain('Email')
    expect($cells.eq(3)).to.contain('Status')
  })
        

3. Combining DOM assertions with aliased elements:

cy.get('form').within(() => {
  cy.get('input[type="email"]')
    .as('emailField')
    .should('be.visible')
    .and('have.attr', 'required')
  
  cy.get('button[type="submit"]')
    .as('submitButton')
    .should('be.disabled') // Initially disabled
})

// Type in email to enable button
cy.get('@emailField')
  .type('valid@email.com')
  .should('have.value', 'valid@email.com')

// Assert button state changed
cy.get('@submitButton')
  .should('not.be.disabled')
  .and('have.css', 'background-color', 'rgb(0, 123, 255)')
        

Custom timeout in assertion chains:

cy.get('#slow-loading-element')
  .should('be.visible', { timeout: 10000 }) // Wait longer for visibility
  .and('contain', 'Data loaded successfully') // Uses default timeout
  .and('have.css', 'color', 'rgb(0, 128, 0)', { timeout: 2000 }) // Custom timeout just for this assertion
        

Functional grouping pattern:

// Group 1: Structural validation
cy.get('form')
  .should('be.visible')
  .and('have.attr', 'id', 'signup-form')
  .and('have.class', 'needs-validation')

// Group 2: Field validation
cy.get('#username')
  .should('be.visible')
  .and('have.attr', 'required')
  .and('have.attr', 'minlength', '3')

// Group 3: Interaction validation
cy.get('#username')
  .type('test')
  .blur()
  .should('have.class', 'is-valid')
  .and('not.have.class', 'is-invalid')
        

Defining the TypeScript interface (for typed projects):

// In cypress/support/index.d.ts
declare namespace Cypress {
  interface Chainable {
    /**
     * Custom command to authenticate a user
     * @param username - The username to use
     * @param password - The password to use
     * @example cy.authenticate('testuser', 'password123')
     */
    authenticate(username: string, password: string): Chainable<Element>
  }
}
        

// In cypress/support/commands.js
Cypress.Commands.add('authenticate', (username, password) => {
  cy.session([username, password], () => {
    cy.request({
      method: 'POST',
      url: '/api/auth/login',
      body: { username, password }
    }).then(response => {
      window.localStorage.setItem('authToken', response.body.token);
    });
  });
});
        

// Parent command (doesn't require a subject)
Cypress.Commands.add('findByDataTest', (selector) => {
  return cy.get(`[data-test=${selector}]`);
});

// Child command (requires a subject)
Cypress.Commands.add('validateAttribute', { prevSubject: true }, (subject, attr, value) => {
  return cy.wrap(subject).should('have.attr', attr, value);
});

// Usage:
// cy.findByDataTest('user-profile').validateAttribute('role', 'button');
        

Cypress.Commands.overwrite('visit', (originalFn, url, options) => {
  // Add custom logging or preprocessing
  console.log(`Visiting: ${url}`);
  
  // Call the original function with the modified arguments
  return originalFn(url, {
    ...options,
    onBeforeLoad: (window) => {
      // Inject custom behavior
      window.localStorage.setItem('featureFlag', 'true');
      
      // Execute original onBeforeLoad if it exists
      if (options?.onBeforeLoad) {
        options.onBeforeLoad(window);
      }
    }
  });
});
        

Cypress.Commands.add('findAndSelectOption', (selectSelector, optionText) => {
  // Command with custom timeout and error handling
  return cy.get(selectSelector, { timeout: 10000 })
    .should('exist')
    .then($select => {
      if ($select.find(`option:contains("${optionText}")`).length === 0) {
        throw new Error(
          `Option with text "${optionText}" not found in select element "${selectSelector}"`
        );
      }
      return cy.wrap($select).select(optionText);
    });
});
        

// cypress/support/commands/authentication.js
Cypress.Commands.add('login', (username, password) => { /* ... */ });
Cypress.Commands.add('logout', () => { /* ... */ });

// cypress/support/commands/navigation.js
Cypress.Commands.add('navigateTo', (section) => { /* ... */ });

// cypress/support/commands.js
import './commands/authentication';
import './commands/navigation';
// etc.
        

Parent vs. Child Command Implementation:

// Parent command
Cypress.Commands.add('findByTestId', (testId) => {
  return cy.get(`[data-testid="${testId}"]`);
});

// Child command
Cypress.Commands.add('shouldBeDisabledWithReason', { prevSubject: true }, (subject, reason) => {
  cy.wrap(subject)
    .should('be.disabled')
    .should('have.attr', 'aria-disabled', 'true')
    .should('have.attr', 'title', reason);
  
  return cy.wrap(subject); // Important: return the subject to maintain the chain
});

// Usage: cy.findByTestId('submit-button').shouldBeDisabledWithReason('Form is incomplete');
        

// In cypress/support/index.d.ts
declare namespace Cypress {
  interface Chainable {
    /**
     * Selects a date from the datepicker component
     * @param dateSelector - The date selector in YYYY-MM-DD format
     * @param options - Additional configuration options
     * @example cy.selectDate('2023-05-15')
     */
    selectDate(dateSelector: string, options?: {
      datepickerSelector?: string,
      animate?: boolean
    }): Chainable<JQuery<HTMLElement>>
  }
}
        

Cypress.Commands.add('tableContains', (options) => {
  const config = {
    tableSelector: 'table',
    rowIdx: null,
    colIdx: null,
    colName: null,
    text: '',
    ...options
  };

  let tableEl = cy.get(config.tableSelector);
  
  if (config.rowIdx !== null && config.colIdx !== null) {
    return tableEl.find(`tr:nth-child(${config.rowIdx + 1}) td:nth-child(${config.colIdx + 1})`)
      .should('contain', config.text);
  } else if (config.rowIdx !== null && config.colName) {
    // Find column by name logic
    // ...
  }
  // Additional strategies
});

// Usage: cy.tableContains({ rowIdx: 2, colName: 'Status', text: 'Active' });
        

// Command factory pattern
function createApiCommand(endpoint) {
  const commandName = `api${endpoint.charAt(0).toUpperCase() + endpoint.slice(1)}`;
  
  Cypress.Commands.add(commandName, (method = 'GET', data = null, options = {}) => {
    return cy.request({
      method,
      url: `/api/${endpoint}`,
      body: data,
      headers: { 'Content-Type': 'application/json' },
      ...options
    });
  });
}

// Generate API commands
createApiCommand('users');
createApiCommand('products');
createApiCommand('orders');

// Usage: cy.apiUsers('POST', { name: 'John Doe' });
        

// File structure:
// - cypress/support/commands/
//   - authentication.js
//   - navigation.js
//   - forms.js
//   - api.js
//   - assertions.js

// In cypress/support/commands/forms.js
Cypress.Commands.add('fillForm', (formSelector, fields) => { /* ... */ });
Cypress.Commands.add('submitForm', (formSelector) => { /* ... */ });

// In cypress/support/commands.js
import './commands/authentication';
import './commands/navigation';
import './commands/forms';
// ...
        

// cypress/support/page-objects/login-page.js
class LoginPage {
  visit() {
    cy.visit('/login');
  }
  
  fillCredentials(username, password) {
    cy.get('#username').type(username);
    cy.get('#password').type(password);
    return this;
  }
  
  submit() {
    cy.get('form').submit();
  }
  
  // Combining as higher-level command
  login(username, password) {
    this.visit();
    this.fillCredentials(username, password);
    this.submit();
  }
}

// Register as a command
Cypress.Commands.add('loginPage', () => {
  return new LoginPage();
});

// Usage: cy.loginPage().login('testuser', 'password');
        

Error Handling Example:

Cypress.Commands.add('findDataElement', (selector) => {
  return cy.get(`[data-test="${selector}"]`).then($els => {
    if ($els.length === 0) {
      throw new Error(
        `Could not find element with data-test attribute: "${selector}". `+
        `Make sure your element has the correct data-test attribute.`
      );
    }
    return cy.wrap($els);
  });
});
        

Command with Retry Logic and Custom Timeout:

Cypress.Commands.add('waitForResource', (resourceName, options = {}) => {
  const defaultOptions = {
    timeout: 10000,
    interval: 500,
    errorMessage: `Resource "${resourceName}" did not load within timeout`
  };
  
  const opts = { ...defaultOptions, ...options };
  
  return cy.window({ log: false }).then({ timeout: opts.timeout }, (win) => {
    return new Cypress.Promise((resolve, reject) => {
      const checkResource = () => {
        const resource = win.performance
          .getEntriesByType('resource')
          .find(r => r.name.includes(resourceName));
          
        if (resource) {
          resolve(resource);
          return;
        }
        
        setTimeout(checkResource, opts.interval);
      };
      
      checkResource();
      
      // Set rejection timeout
      setTimeout(() => {
        reject(new Error(opts.errorMessage));
      }, opts.timeout);
    });
  });
});
        

Internal Queue Implementation:

// Simplified internal representation of how Cypress chains work
const commands = []
commands.push({name: 'visit', args: ['https://example.com']})
commands.push({name: 'get', args: ['button']})
commands.push({name: 'click', args: []})
// Each executes only after the previous completes
        

Retry Logic Example:

// Technical implementation behind a simple assertion
cy.get('li').should('have.length', 5)

// What happens internally (simplified):
function retryAssert(getFn, assertion, timeout = 4000) {
  const start = Date.now()
  const retry = () => {
    // Get fresh elements with each attempt
    const $elements = getFn('li')
    try {
      // Run assertion
      expect($elements.length).to.equal(5)
      return true // Success
    } catch (err) {
      if (Date.now() - start < timeout) {
        // Try again after delay
        setTimeout(retry, 50)
      } else {
        throw err // Timeout reached, fail test
      }
    }
  }
  retry()
}
        

Actionability Checks Implementation:

// Internal actionability check flow (simplified representation)
function verifyElementActionability($el) {
  return Promise.all([
    checkVisibility($el),
    checkDetached($el),
    checkReadOnly($el),
    checkDisabled($el),
    checkAnimating($el),
    checkOverlapping($el)
  ])
}

// Different commands have different actionability requirements
cy.click()       // Requires all checks
cy.type()        // Requires all checks 
cy.select()      // Requires visibility, not detached, not disabled
cy.scrollIntoView() // Only requires not detached
        

Query Retry Implementation:

// Internal representation of retry logic (simplified)
function retryableQuery(selector, options = {}) {
  const timeout = options.timeout || Cypress.config('defaultCommandTimeout')
  const startTime = Date.now()
  
  return new Cypress.Promise((resolve, reject) => {
    const attempt = () => {
      // Query DOM for elements matching selector
      const $elements = Cypress.$(selector)
      
      if ($elements.length > 0 || Date.now() - startTime > timeout) {
        // Either found elements or timed out
        return resolve($elements)
      }
      
      // Schedule another attempt
      setTimeout(attempt, Cypress.config('retryInterval') || 50)
    }
    
    attempt()
  })
}
        

Advanced Retry Patterns:

// Recursive retries with compound assertions
cy.get('table')
  .find('tr')
  .should('have.length', 10)
  .and('have.class', 'data-row')
  .and(($rows) => {
    // Custom function assertions also retry
    expect($rows.first().text()).to.include('Expected Text')
  })
        

Advanced Network Waiting:

// Precise network intercepts with timing control
cy.intercept(
  {
    method: 'POST',
    url: /\/api\/users$/,
    // Wait specifically for requests with certain bodies
    body: {
      name: 'John',
      role: 'admin'
    }
  },
  // Optionally modify response
  {
    statusCode: 201,
    body: { success: true, id: 123 }
  }
).as('createUser')

// Trigger action
cy.get('form').submit()

// Wait with timeout override
cy.wait('@createUser', { timeout: 10000 })
  .its('response.statusCode').should('eq', 201)

// You can also examine request details
cy.get('@createUser').then((interception) => {
  // Detailed analysis of request
  expect(interception.request.headers).to.have.property('authorization')
  expect(interception.response.body.id).to.be.a('number')
})
        

1. Dynamic fixture manipulation:

cy.fixture('users').then((users) => {
  // Clone to avoid modifying the cached fixture
  const modifiedUsers = structuredClone(users);
  
  // Add dynamic timestamp or other runtime values
  modifiedUsers.users[0].lastLogin = new Date().toISOString();
  
  cy.intercept('GET', '/api/users', modifiedUsers);
});

2. Fixture composition for complex test scenarios:

// Combine multiple fixtures into a composite test state
cy.fixture('users').then((users) => {
  cy.fixture('products').then((products) => {
    const testState = {
      users: users.users,
      products: products.items,
      // Add computed properties
      featuredProducts: products.items.filter(p => p.featured)
    };
    
    cy.wrap(testState).as('testData');
  });
});

3. Using fixtures with cy.intercept() for advanced response stubbing:

// Conditional response based on request parameters
cy.intercept('GET', '/api/users', (req) => {
  // Select different fixtures based on request query parameters
  if (req.query.role === 'admin') {
    req.reply({ fixture: 'admin-users.json' });
  } else {
    req.reply({ fixture: 'standard-users.json' });
  }
});

Full Syntax with Options:

cy.fixture(filePath, encoding, options)

• filePath (string): Path to the fixture file, relative to cypress/fixtures
• encoding (string, optional): File encoding (default: utf8, can be null for binary)
• options (object, optional): Additional options passed to the underlying Node.js fs.readFile

1. Fixture aliasing for efficient reuse:

// Load once and alias for reuse throughout the test
beforeEach(() => {
  cy.fixture('large-dataset').as('testData');
});

it('uses aliased fixture data', () => {
  cy.get('@testData').then((data) => {
    // Use data without reloading the fixture
  });
});

2. Loading binary fixtures (images, PDFs, etc.):

// Load a fixture as binary data
cy.fixture('sample.pdf', null).then((pdfBuffer) => {
  // pdfBuffer is a Buffer containing the file contents
  
  // Example: Upload the PDF in a form
  cy.get('input[type="file"]').then((input) => {
    const blob = Cypress.Blob.arrayBufferToBlob(pdfBuffer);
    const file = new File([blob], 'sample.pdf', { type: 'application/pdf' });
    const dataTransfer = new DataTransfer();
    
    dataTransfer.items.add(file);
    input[0].files = dataTransfer.files;
    input.trigger('change');
  });
});

3. Parameterizing tests with fixtures via custom commands:

// In commands.js
Cypress.Commands.add('loadTestCase', (testCaseId) => {
  return cy.fixture(`test-cases/${testCaseId}`);
});

// In test file
['case1', 'case2', 'case3'].forEach((caseId) => {
  it(`runs test for ${caseId}`, () => {
    cy.loadTestCase(caseId).then((testCase) => {
      // Dynamic test implementation based on test case data
      cy.visit(testCase.url);
      cy.get(testCase.selector).should('contain', testCase.expectedText);
    });
  });
});

4. Dynamic fixture path resolution:

// Dynamically determine fixture path based on test environment
const getFixturePath = () => {
  const env = Cypress.env('ENVIRONMENT') || 'development';
  return `configs/${env}/settings`;
};

cy.fixture(getFixturePath()).then((config) => {
  // Use environment-specific configuration
});

1. Using fixtures with cy.intercept() for sophisticated mocks:

// Dynamically modify fixture before using it as a response
cy.fixture('users').then((users) => {
  const enhancedUsers = users.map(user => ({
    ...user,
    lastSeen: new Date().toISOString(),
    permissions: Cypress.env('TEST_PERMISSIONS') || user.permissions
  }));
  
  cy.intercept('GET', '/api/users', (req) => {
    // Add realistic network delay
    req.delay = 100;
    // Add CORS headers for testing
    req.reply({
      statusCode: 200,
      body: enhancedUsers,
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json'
      }
    });
  }).as('userRequest');
});

2. Fixture-driven test flow control:

cy.fixture('test-flows').then((flows) => {
  // Extract the current test flow based on test context
  const flow = flows[Cypress.env('TEST_FLOW') || 'default'];
  
  // Execute each step in the flow
  flow.steps.forEach((step, index) => {
    cy.log(`Executing step ${index + 1}: ${step.description}`);
    
    // Dynamic command execution based on fixture data
    if (step.command === 'visit') {
      cy.visit(step.url);
    } else if (step.command === 'click') {
      cy.get(step.selector).click();
    } else if (step.command === 'type') {
      cy.get(step.selector).type(step.value);
    }
    
    // Verify step results
    if (step.expectation) {
      cy.get(step.expectation.selector)
        .should(step.expectation.assertion, step.expectation.value);
    }
  });
});

Advanced Hook Implementation:

describe('Product Management', () => {
  // Setup test data and login once before all tests
  before(() => {
    // Using cy.task to interact with Node.js for DB operations
    cy.task('resetDb')
    cy.task('seedTestProducts', { count: 5 })
    
    // Login via API instead of UI for efficiency
    cy.request('POST', '/api/login', {
      username: Cypress.env('ADMIN_USER'),
      password: Cypress.env('ADMIN_PASS')
    }).then((response) => {
      expect(response.status).to.eq(200)
      // Store auth token in localStorage for subsequent tests
      window.localStorage.setItem('authToken', response.body.token)
    })
  })

  beforeEach(() => {
    // Preserve cookies and localStorage between tests
    cy.preserveOnce('session_id', 'remember_token')
    
    // Visit the products page and wait for initial data load
    cy.visit('/admin/products')
    cy.intercept('GET', '/api/products*').as('productsLoad')
    cy.wait('@productsLoad')
    
    // Establish test retry ability with custom error handling
    Cypress.on('fail', (error, runnable) => {
      if (error.message.includes('Network Error')) {
        cy.log('Detected network error - retrying')
        cy.reload()
        return false  // Prevent test failure
      }
      throw error  // Other errors should still fail the test
    })
  })

  it('should create a new product', () => {
    // Test implementation
  })

  it('should edit an existing product', () => {
    // Test implementation
  })

  afterEach(() => {
    // Take screenshot on test failure
    if (this.currentTest.state === 'failed') {
      cy.screenshot(`failure-${this.currentTest.title}`)
    }
    
    // Clear any dynamically created test data
    cy.window().then((win) => {
      const testId = win.localStorage.getItem('lastCreatedTestId')
      if (testId) {
        cy.request({
          method: 'DELETE',
          url: `/api/products/${testId}`,
          headers: {
            Authorization: `Bearer ${win.localStorage.getItem('authToken')}`,
          }
        })
        win.localStorage.removeItem('lastCreatedTestId')
      }
    })
  })

  after(() => {
    // Clean up all test data
    cy.task('cleanTestProducts')
    
    // Log performance metrics
    cy.task('logTestMetrics', {
      suite: 'Product Management',
      duration: new Date() - suiteStartTime
    })
  })
})
    

Hook Error Handling:

describe('Resilient tests', () => {
  beforeEach(() => {
    // Use try/catch for operations that might fail but shouldn't stop tests
    try {
      // Clear a specific localStorage item if it exists
      localStorage.removeItem('user-preferences')
    } catch (e) {
      cy.log('Unable to clear localStorage - continuing test')
    }
    
    // Handle potential API failures gracefully
    cy.request({
      url: '/api/reset',
      failOnStatusCode: false,
    }).then((response) => {
      if (response.status !== 200) {
        cy.log(`Reset API failed with status ${response.status}, tests may be affected`)
      }
    })
  })
})
    

before() - Advanced Implementation:

describe('Enterprise User Management', () => {
  let fixtureData;
  
  before(() => {
    // Load test data fixtures with type checking
    cy.fixture('enterprise-users').then((data) => {
      fixtureData = data;
      
      // Validate fixture data structure - fail fast if invalid
      if (!fixtureData.adminUser || !fixtureData.testUsers || !Array.isArray(fixtureData.testUsers)) {
        throw new Error('Invalid fixture data structure for enterprise-users');
      }
      
      // Programmatically seed test database with dynamic data via Node task
      return cy.task('seedDatabase', {
        users: fixtureData.testUsers,
        timestamp: new Date().toISOString(),
        testRunId: Cypress.env('TEST_RUN_ID') || 'manual'
      });
    });
    
    // Set up global interception patterns using conditionals
    if (Cypress.env('MOCK_API')) {
      cy.intercept('GET', '/api/users*', { fixture: 'users-response.json' }).as('usersApi');
    } else {
      cy.intercept('GET', '/api/users*').as('usersApi');
    }
    
    // Authentication - using custom command with retries
    cy.loginAsAdmin({
      username: Cypress.env('ADMIN_USER'),
      password: Cypress.env('ADMIN_PASSWORD'),
      retries: 2,
      retryDelay: 1000
    });
    
    // Verify environment is properly set up before proceeding
    cy.task('verifyTestEnvironment').then(result => {
      if (!result.ready) {
        throw new Error(`Test environment not ready: ${result.reason}`);
      }
    });
  });

  it('should display all users with correct permissions', () => {
    // Test implementation
  });
  
  // More tests...
});
    

beforeEach() - Advanced Implementation:

describe('E-commerce Checkout Process', () => {
  // Track test metrics
  let testStartTime;
  
  beforeEach(() => {
    testStartTime = performance.now();
    
    // Clear session but preserve specific test values (aliasing preservation pattern)
    const preserveKeys = ['auth_token', 'test_user_id'];
    cy.window().then(win => {
      const preservedValues = {};
      preserveKeys.forEach(key => {
        preservedValues[key] = win.localStorage.getItem(key);
      });
      
      win.localStorage.clear();
      
      preserveKeys.forEach(key => {
        if (preservedValues[key]) {
          win.localStorage.setItem(key, preservedValues[key]);
        }
      });
    });
    
    // Establish intelligent waiting strategy for backend services
    cy.intercept('GET', '/api/cart/status').as('cartStatus');
    cy.intercept('GET', '/api/payment/methods').as('paymentMethods');
    cy.intercept('GET', '/api/shipping/options').as('shippingOptions');
    
    // Visit with performance tracking
    cy.visit('/checkout', {
      onBeforeLoad: (win) => {
        // Add performance measurement
        const originalFetch = win.fetch;
        win.fetch = function(...fetchArgs) {
          const startTime = performance.now();
          return originalFetch.apply(this, fetchArgs).then(response => {
            const endTime = performance.now();
            const url = typeof fetchArgs[0] === 'string' ? fetchArgs[0] : fetchArgs[0].url;
            Cypress.log({
              name: 'fetch-perf',
              message: `${url} - ${Math.round(endTime - startTime)}ms`
            });
            return response;
          });
        };
      }
    });
    
    // Wait for critical resources in parallel
    cy.wait(['@cartStatus', '@paymentMethods', '@shippingOptions'], { timeout: 10000 });
    
    // Setup conditional branching based on application state
    cy.get('body').then($body => {
      if ($body.find('.cart-empty-message').length) {
        // Add items to cart if cart is empty
        cy.task('addItemsToCart', { userId: Cypress.env('TEST_USER_ID') });
        cy.reload();
      } else if ($body.find('.error-boundary').length) {
        // Handle error state gracefully
        cy.log('Detected error boundary, recovering test state');
        cy.visit('/cart');
        cy.get('.checkout-button').click();
      }
    });
  });

  it('should allow selection of shipping method', () => {
    // Test implementation
  });
  
  // More tests...
  
  afterEach(() => {
    // Performance tracking
    const testDuration = performance.now() - testStartTime;
    cy.task('logPerformance', { 
      test: Cypress.currentTest.title, 
      duration: testDuration,
      threshold: 3000, // Flag if test takes over 3 seconds
      timestamp: new Date().toISOString()
    });
  });
});
    

afterEach() - Advanced Implementation:

describe('Document Management System', () => {
  // Track created resources for cleanup
  const testResources = [];
  
  beforeEach(() => {
    // Setup code
    cy.visit('/documents');
    
    // Spy and track document creation
    cy.intercept('POST', '/api/documents', (req) => {
      // Continue with the request
      req.continue((res) => {
        // Track created document ID for cleanup
        if (res.statusCode === 201 && res.body && res.body.id) {
          testResources.push({ type: 'document', id: res.body.id });
        }
      });
    }).as('documentCreate');
  });
  
  it('should create new document', () => {
    // Implementation that creates resources
    cy.get('#create-doc-btn').click();
    cy.get('#doc-title').type('Test Document');
    cy.get('#save-btn').click();
    cy.wait('@documentCreate');
  });

  afterEach(() => {
    // Dynamic resource cleanup based on test execution
    if (testResources.length > 0) {
      cy.log(`Cleaning up ${testResources.length} test resources`);
      
      // Group by resource type for batch operations
      const resourcesByType = testResources.reduce((acc, resource) => {
        acc[resource.type] = acc[resource.type] || [];
        acc[resource.type].push(resource.id);
        return acc;
      }, {});
      
      // Parallel cleanup operations
      const cleanupPromises = Object.entries(resourcesByType).map(([type, ids]) => {
        return cy.task('cleanupResources', { type, ids });
      });
      
      // Wait for all cleanup tasks to complete
      cy.wrap(Promise.all(cleanupPromises)).then(() => {
        testResources.length = 0; // Clear the array
      });
    }
    
    // Collect accessibility violations if any
    if (Cypress.env('CHECK_A11Y')) {
      cy.checkA11y(null, {
        includedImpacts: ['critical', 'serious']
      }, (violations) => {
        if (violations.length > 0) {
          // Log violations for reporting
          cy.task('logA11yViolations', {
            test: Cypress.currentTest.title,
            violations
          });
        }
      });
    }
    
    // Check for console errors during test
    cy.window().then((win) => {
      const consoleErrorLogs = Cypress._.filter(win.console.error.logs || [], log => 
        !log.includes('Expected error for testing') // Filter out known errors
      );
      
      if (consoleErrorLogs.length > 0) {
        cy.task('logConsoleErrors', {
          test: Cypress.currentTest.title,
          errors: consoleErrorLogs
        });
        
        // Conditional failure based on error severity
        if (Cypress.env('STRICT_ERROR_MODE')) {
          throw new Error(`Console errors detected: ${consoleErrorLogs.length}`);
        }
      }
    });
  });
});
    

after() - Advanced Implementation:

describe('Multi-tenant SaaS Application', () => {
  // Track test suite execution metrics
  const suiteStartTime = Date.now();
  let testTenant;
  let apiTokens = [];
  
  before(() => {
    // Create dedicated test tenant for isolation
    cy.task('createTestTenant', {
      name: `e2e-test-tenant-${Cypress._.random(1000, 9999)}`,
      plan: 'enterprise',
      features: ['reporting', 'audit-logs', 'sso']
    }).then(tenant => {
      testTenant = tenant;
      cy.log(`Created test tenant: ${tenant.id}`);
      
      // Generate API tokens needed for tests
      return cy.task('generateApiTokens', {
        tenantId: tenant.id,
        scopes: ['read:users', 'write:reports', 'admin:settings']
      });
    }).then(tokens => {
      apiTokens = tokens;
      Cypress.env('API_TOKEN', tokens.find(t => t.scope === 'admin:settings').token);
    });
  });
  
  // Tests that use the isolated tenant...
  it('should provision new user accounts', () => {
    // Test implementation
  });
  
  after(() => {
    // Comprehensive cleanup with error handling
    if (testTenant && testTenant.id) {
      cy.log(`Cleaning up test tenant ${testTenant.id}`);
      
      // Sequential cleanup with dependencies
      cy.task('revokeApiTokens', { 
        tokenIds: apiTokens.map(t => t.id),
        tenantId: testTenant.id 
      })
      .then(() => {
        return cy.task('deleteTestData', { 
          tenantId: testTenant.id,
          deleteUsers: true,
          deleteReports: true,
          deleteSettings: true
        });
      })
      .then(() => {
        return cy.task('deleteTenant', { tenantId: testTenant.id });
      })
      .then(() => {
        cy.log('Tenant cleanup completed successfully');
      })
      .catch(error => {
        // Log but don't fail the test - cleanup issues shouldn't fail tests
        cy.log(`Error during cleanup: ${error.message}`);
        
        // Add to error report for later investigation
        cy.task('logCleanupError', {
          tenantId: testTenant.id,
          error: error.message,
          timestamp: new Date().toISOString()
        });
      });
    }
    
    // Generate test execution report
    const suiteDuration = Date.now() - suiteStartTime;
    cy.task('generateTestReport', {
      suite: 'Multi-tenant SaaS Application',
      duration: suiteDuration,
      tests: Cypress._.map(Cypress.runner.getSpecs(), spec => ({
        name: spec.name,
        status: spec.state,
        duration: spec.wallClockDuration
      })),
      browser: Cypress.browser,
      viewport: Cypress.config('viewport'),
      timestamp: new Date().toISOString()
    });
  });
});