Testing

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;
});
        

Advanced Mocking Example:

// Manual mock implementation
jest.mock('../api', () => ({
  fetchData: jest.fn().mockImplementation(() => 
    Promise.resolve({ data: { users: [{id: 1, name: 'User 1'}] } })
  )
}));

// Spy on implementation
jest.spyOn(console, 'error').mockImplementation(() => {});

// Using the mock in the test
test('fetches users and processes them correctly', async () => {
  const { fetchUsers } = require('./userService');
  const users = await fetchUsers();
  
  expect(require('../api').fetchData).toHaveBeenCalledTimes(1);
  expect(users).toEqual([{id: 1, name: 'User 1'}]);
  expect(console.error).not.toHaveBeenCalled();
});
        

Advanced Mocking Comparison:

// JEST - Module mocking with auto-reset between tests
jest.mock('../services/userService');
import { fetchUsers } from '../services/userService';

beforeEach(() => {
  fetchUsers.mockResolvedValue([{id: 1, name: 'User'}]);
});

// MOCHA+SINON - More explicit mocking approach
import sinon from 'sinon';
import * as userService from '../services/userService';

let userServiceStub;
beforeEach(() => {
  userServiceStub = sinon.stub(userService, 'fetchUsers')
    .resolves([{id: 1, name: 'User'}]);
});
afterEach(() => {
  userServiceStub.restore();
});

// JASMINE - Similar to Jest but with different syntax
spyOn(userService, 'fetchUsers').and.returnValue(
  Promise.resolve([{id: 1, name: 'User'}])
);
        

moduleNameMapper: {
  // Handle CSS imports (with CSS modules)
  // https://jestjs.io/docs/webpack#mocking-css-modules
  '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',

  // Handle CSS imports (without CSS modules)
  '^.+\\.(css|sass|scss)$': '/__mocks__/styleMock.js',

  // Handle image imports
  '^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$': '/__mocks__/fileMock.js',

  // Handle module aliases
  '^@/components/(.*)$': '/src/components/$1',
  '^@/utils/(.*)$': '/src/utils/$1'
}
        

// Custom environment configuration
testEnvironment: 'jsdom',
testEnvironmentOptions: {
  url: 'http://localhost',
  referrer: 'https://example.com/',
  userAgent: 'Agent/007'
},
globalSetup: '/setup.js',
globalTeardown: '/teardown.js',
setupFilesAfterEnv: [
  '@testing-library/jest-dom/extend-expect',
  '/setupTests.js'
]
        

transform: {
  // TypeScript files
  '^.+\\.tsx?$': [
    'ts-jest',
    {
      tsconfig: '/tsconfig.jest.json',
      isolatedModules: true
    }
  ],
  // Process JS files with Babel
  '^.+\\.(js|jsx)$': 'babel-jest',
  // Process CSS files
  '^.+\\.css$': '/cssTransform.js'
},
transformIgnorePatterns: [
  '/node_modules/(?!(@myorg|lib-with-esm)/)',
  '\\.pnp\\.[^\\.]+$'
],
extensionsToTreatAsEsm: ['.ts', '.tsx']
        

collectCoverage: true,
collectCoverageFrom: [
  'src/**/*.{js,jsx,ts,tsx}',
  '!**/*.d.ts',
  '!**/node_modules/**',
  '!**/__tests__/**',
  '!**/coverage/**',
  '!**/dist/**'
],
coverageDirectory: 'coverage',
coverageReporters: ['json', 'lcov', 'text', 'clover', 'html'],
coverageThreshold: {
  global: {
    branches: 80,
    functions: 80,
    lines: 80,
    statements: 80
  },
  './src/components/': {
    branches: 90,
    statements: 90
  }
},
reporters: [
  'default',
  ['jest-junit', {
    outputDirectory: './test-results/jest',
    outputName: 'results.xml'
  }]
]
        

// Multi-project configuration for monorepo
projects: [
  {
    displayName: 'API',
    testMatch: ['/packages/api/**/*.test.js'],
    testEnvironment: 'node'
  },
  {
    displayName: 'CLIENT',
    testMatch: ['/packages/client/**/*.test.(js|tsx)'],
    testEnvironment: 'jsdom',
    setupFilesAfterEnv: ['/packages/client/setupTests.js']
  }
],
maxWorkers: '70%',
watchPlugins: [
  'jest-watch-typeahead/filename',
  'jest-watch-typeahead/testname',
  ['jest-watch-suspend', {key: 's'}]
],
testTimeout: 30000
        

clearMocks: true,
resetMocks: true,
restoreMocks: true,
timers: 'fake',
fakeTimers: {
  enableGlobally: true,
  legacyFakeTimers: false
}
        

Basic configuration in jest.config.js:

module.exports = {
  // Default timeout of each test (in milliseconds)
  testTimeout: 5000,
  
  // Files to collect coverage from
  collectCoverageFrom: [
    '**/*.{js,jsx}',
    '!**/node_modules/**',
    '!**/vendor/**'
  ],
  
  // The test environment to use
  testEnvironment: 'node',
  
  // Custom test matchers
  setupFilesAfterEnv: ['./jest.setup.js'],
  
  // File patterns for test discovery
  testMatch: ['**/__tests__/**/*.js?(x)', '**/?(*.)+(spec|test).js?(x)'],
  
  // Transform files before testing
  transform: {
    '^.+\\.jsx?$': 'babel-jest'
  }
};

Test Organization Patterns:

• Subject-Under-Test Pattern: Group by component/function being tested
• Behavior Specification Pattern: Describe expected behaviors with distinct contexts
• State Pattern: Group tests by initial state (e.g., "when logged in", "when cart is empty")

Advanced Usage with Custom Matchers:

// Custom matcher implementation
expect.extend({
  toBeWithinRange(received, floor, ceiling) {
    const pass = received >= floor && received <= ceiling;
    if (pass) {
      return {
        message: () => `expected ${received} not to be within range ${floor} - ${ceiling}`,
        pass: true,
      };
    } else {
      return {
        message: () => `expected ${received} to be within range ${floor} - ${ceiling}`,
        pass: false,
      };
    }
  },
});

// Using the custom matcher
test('is within range', () => {
  expect(100).toBeWithinRange(90, 110);
});
        

// Implementation approximation
function toBe(received, expected) {
  return {
    pass: Object.is(received, expected),
    message: () => formatDiff(received, expected)
  };
}

// Examples showing edge cases
test('toBe edge cases', () => {
  // Special NaN handling (unlike ===)
  expect(NaN).toBe(NaN);               // PASSES with toBe
  // Different treatment of -0 and +0 (unlike ==)
  expect(0).not.toBe(-0);              // PASSES with toBe
  expect(-0).toBe(-0);                 // PASSES with toBe
  
  // Reference identity for objects
  const obj = {a: 1};
  const sameRef = obj;
  expect(obj).toBe(sameRef);           // PASSES - same reference
  expect(obj).not.toBe({a: 1});        // PASSES - different reference
});
        

// Key differences from toBe()
test('toEqual behavior', () => {
  // Deep comparison of objects
  expect({nested: {a: 1, b: 2}}).toEqual({nested: {a: 1, b: 2}});  // PASSES
  
  // Handles arrays and their ordering
  expect([1, 2, [3, 4]]).toEqual([1, 2, [3, 4]]);  // PASSES
  
  // Doesn't check property symbol keys or non-enumerable properties
  const objWithSymbol = {a: 1};
  const symbolKey = Symbol('test');
  objWithSymbol[symbolKey] = 'hidden';
  expect(objWithSymbol).toEqual({a: 1});  // PASSES - ignores symbol properties
  
  // Special types handling
  expect(new Set([1, 2])).not.toEqual(new Set([1, 2]));  // FAILS - just checks they're both Set instances
});
        

// Implementation behaviors
test('toContain internal logic', () => {
  // For arrays: compares with indexOf !== -1 or includes()
  expect([1, 2, 3]).toContain(3);       // PASSES - primitive direct comparison
  expect([{a:1}, {b:2}]).not.toContain({a:1});  // FAILS - object identity comparison
  
  // For strings: substring check
  expect('testing').toContain('test');   // PASSES - substring match
  
  // For Sets and Maps: has() method
  expect(new Set([1, 2])).toContain(2);   // PASSES - uses Set.prototype.has()
  
  // For typed arrays: includes() method
  expect(new Uint8Array([1, 2])).toContain(2);  // PASSES - uses TypedArray.prototype.includes()
});

// For deeper object matching within arrays, use toContainEqual()
test('toContainEqual for object inclusion', () => {
  const users = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];
  expect(users).toContainEqual({id: 1, name: 'Alice'});  // PASSES - deep value comparison
});
        

Command Execution Architecture:

JEST CLI → Config Resolution → Test Runner → Test Environment → Reporter
        

Architecture Pattern: WebDriver Implementation (Java)

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import java.time.Duration;

public class WebDriverArchitectureExample {
    public static void main(String[] args) {
        // Configure browser options
        ChromeOptions options = new ChromeOptions();
        options.addArguments("--headless");
        options.addArguments("--disable-gpu");
        options.setImplicitWaitTimeout(Duration.ofSeconds(10));
        
        // Initialize the driver (client side)
        WebDriver driver = new ChromeDriver(options);
        
        try {
            // Client sends command to ChromeDriver server
            driver.get("https://www.example.com");
            
            // ChromeDriver translates command to browser-specific actions
            // Response returns to client
            String title = driver.getTitle();
            System.out.println("Page title: " + title);
        } finally {
            // Clean up resources
            driver.quit();
        }
    }
}
        

WebDriver Architecture Example:

// WebDriver client-server interaction
public class WebDriverArchitectureExample {
    @Test
    public void demonstrateWebDriverArchitecture() {
        // Client side: Test script
        WebDriver driver = new ChromeDriver();
        
        // Command sent to ChromeDriver server via HTTP
        driver.get("https://example.com");
        
        // Command to find element sent to ChromeDriver server
        WebElement element = driver.findElement(By.id("example"));
        
        // Command to interact with element
        element.click();
        
        // Command to retrieve browser state
        String title = driver.getTitle();
        
        driver.quit();
    }
}
        

Grid Architecture Example:

// RemoteWebDriver usage with Grid
@Test
public void demonstrateGridArchitecture() {
    // Define desired capabilities
    DesiredCapabilities capabilities = new DesiredCapabilities();
    capabilities.setBrowserName("chrome");
    capabilities.setPlatform(Platform.WINDOWS);
    
    // Connect to Grid hub - command routing happens here
    WebDriver driver = new RemoteWebDriver(
        new URL("http://selenium-hub:4444/wd/hub"), 
        capabilities
    );
    
    // Commands are routed through the hub to appropriate node
    driver.get("https://example.com");
    
    // Test continues with commands being routed
    WebElement element = driver.findElement(By.id("example"));
    element.click();
    
    driver.quit();
}
        

Maven Configuration:

<dependencies>
    <dependency>
        <groupId>org.seleniumhq.selenium</groupId>
        <artifactId>selenium-java</artifactId>
        <version>4.11.0</version>
    </dependency>
    <dependency>
        <groupId>io.github.bonigarcia</groupId>
        <artifactId>webdrivermanager</artifactId>
        <version>5.4.1</version>
    </dependency>
</dependencies>
        

Gradle Configuration:

dependencies {
    implementation 'org.seleniumhq.selenium:selenium-java:4.11.0'
    implementation 'io.github.bonigarcia:webdrivermanager:5.4.1'
}
        

Python Environment Setup:

pip install selenium
pip install webdriver-manager
        

Java Implementation with WebDriverManager:

import io.github.bonigarcia.wdm.WebDriverManager;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;

public class SeleniumSetup {
    public WebDriver setupDriver() {
        // Automatic driver management
        WebDriverManager.chromedriver().setup();
        
        // Configure browser options
        ChromeOptions options = new ChromeOptions();
        options.addArguments("--start-maximized");
        options.addArguments("--disable-extensions");
        options.addArguments("--disable-notifications");
        options.setHeadless(false); // Set true for headless mode
        
        // Create and return driver
        return new ChromeDriver(options);
    }
}
        

Python Implementation with webdriver-manager:

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.chrome.options import Options

def setup_driver():
    # Configure browser options
    chrome_options = Options()
    chrome_options.add_argument("--start-maximized")
    chrome_options.add_argument("--disable-extensions")
    chrome_options.add_argument("--disable-notifications")
    chrome_options.headless = False  # Set True for headless mode
    
    # Setup driver with automatic management
    service = Service(ChromeDriverManager().install())
    driver = webdriver.Chrome(service=service, options=chrome_options)
    
    # Configure timeouts
    driver.implicitly_wait(10)  # seconds
    driver.set_page_load_timeout(30)  # seconds
    
    return driver
        

WebDriver Factory Pattern:

public class WebDriverFactory {
    public static WebDriver createDriver(String browser) {
        WebDriver driver;
        switch(browser.toLowerCase()) {
            case "chrome":
                WebDriverManager.chromedriver().setup();
                driver = new ChromeDriver();
                break;
            case "firefox":
                WebDriverManager.firefoxdriver().setup();
                driver = new FirefoxDriver();
                break;
            case "edge":
                WebDriverManager.edgedriver().setup();
                driver = new EdgeDriver();
                break;
            default:
                throw new IllegalArgumentException("Browser " + browser + " not supported");
        }
        
        // Common configuration
        driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
        driver.manage().window().maximize();
        return driver;
    }
}
        

WebDriver Architecture:

┌────────────┐    ┌────────────┐    ┌─────────────┐    ┌────────────┐
│ Selenium   │    │ WebDriver  │    │ Browser     │    │  Browser   │
│ Test Code  │───▶│ Protocol   │───▶│ Driver      │───▶│  Instance  │
└────────────┘    └────────────┘    └─────────────┘    └────────────┘
                     (JSON/HTTP)       (Translation)      (Automation API)
        

W3C WebDriver Specification Compliance:

// Most modern browser drivers implement W3C WebDriver protocol
// This allows for standardized capabilities across browsers:
ChromeOptions options = new ChromeOptions();
options.setCapability("browserVersion", "latest");
options.setCapability("platformName", "Windows 11");

// W3C-compliant capabilities
Map<String, Object> w3cCapabilities = new HashMap<>();
w3cCapabilities.put("acceptInsecureCerts", true);
options.setCapability("timeouts", Map.of(
    "implicit", 5000,
    "pageLoad", 10000,
    "script", 10000
));
        

Navigation API and Event Management:

// Navigation with explicit timeouts
driver.manage().timeouts().pageLoadTimeout(Duration.ofSeconds(30));
driver.get("https://complex-site.com");

// Custom navigation with history management
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("window.history.pushState('state', 'title', '/newpage')");

// Navigation interceptors (using DevTools Protocol via CDP in Selenium 4+)
DevTools devTools = ((ChromeDriver) driver).getDevTools();
devTools.createSession();
devTools.send(Network.enable(Optional.empty(), Optional.empty(), Optional.empty()));

// Request interception
devTools.addListener(Network.requestWillBeSent(), 
    request -> System.out.println("Request URL: " + request.getRequest().getUrl()));

// Response handling
devTools.addListener(Network.responseReceived(),
    response -> {
        if (response.getResponse().getStatus().intValue() >= 400) {
            System.out.println("Error status: " + response.getResponse().getStatus());
        }
    });
        

Multi-Tab/Window Navigation:

// Open new tab and switch to it (Selenium 4+)
WebDriver.Window window = driver.manage().window();
String originalWindow = driver.getWindowHandle();

// Create and switch to new tab
driver.switchTo().newWindow(WindowType.TAB);

// Navigate in new tab
driver.get("https://example.com");

// Get all window handles
Set<String> handles = driver.getWindowHandles();

// Switch back to original window
driver.switchTo().window(originalWindow);
        

Chrome-Specific Advanced Configuration:

ChromeOptions options = new ChromeOptions();

// Performance and resource handling
options.addArguments("--js-flags=--expose-gc");
options.addArguments("--disable-dev-shm-usage");
options.addArguments("--disable-gpu");
options.addArguments("--no-sandbox");

// Network conditions
Map<String, Object> prefs = new HashMap<>();
prefs.put("profile.default_content_settings.cookies", 2); // Block cookies
prefs.put("profile.managed_default_content_settings.images", 2); // Block images
options.setExperimentalOption("prefs", prefs);

// Mobile emulation
Map<String, Object> deviceMetrics = new HashMap<>();
deviceMetrics.put("width", 360);
deviceMetrics.put("height", 640);
deviceMetrics.put("pixelRatio", 3.0);
Map<String, Object> mobileEmulation = new HashMap<>();
mobileEmulation.put("deviceMetrics", deviceMetrics);
mobileEmulation.put("userAgent", "Mozilla/5.0 (Linux; Android 10; Pixel 3) AppleWebKit/537.36...");
options.setExperimentalOption("mobileEmulation", mobileEmulation);

// Performance logging
LoggingPreferences logPrefs = new LoggingPreferences();
logPrefs.enable(LogType.PERFORMANCE, Level.ALL);
options.setCapability("goog:loggingPrefs", logPrefs);
        

Firefox-Specific Advanced Configuration:

FirefoxOptions options = new FirefoxOptions();

// Create custom Firefox profile
FirefoxProfile profile = new FirefoxProfile();
profile.setPreference("browser.download.folderList", 2);
profile.setPreference("browser.download.dir", "/downloads");
profile.setPreference("browser.helperApps.neverAsk.saveToDisk", "application/pdf,application/octet-stream");

// Configure security settings
profile.setAcceptUntrustedCertificates(true);
profile.setAssumeUntrustedCertificateIssuer(false);

// Configure proxy
FirefoxBinary firefoxBinary = new FirefoxBinary();
firefoxBinary.addCommandLineOptions("--headless");
options.setBinary(firefoxBinary);
options.setProfile(profile);

// Add Firefox-specific arguments
options.addArguments("-private");
options.addArguments("-foreground");
options.addArguments("-no-remote");
        

Strategic Implementation Examples:

// ID - Direct DOM access makes this the fastest
// Uses document.getElementById() internally
WebElement element = driver.findElement(By.id("uniqueId"));

// Name - Fast but less unique than ID
// Uses document.getElementsByName()[0] internally
WebElement element = driver.findElement(By.name("username"));

// Class Name - Returns first matching element
// May return unexpected elements if class is used multiple times
// Uses document.getElementsByClassName()[0] internally
WebElement element = driver.findElement(By.className("btn-primary"));

// Tag Name - Very generic, typically used with findElements()
// Uses document.getElementsByTagName()[0] internally
List paragraphs = driver.findElements(By.tagName("p"));

// Link Text & Partial Link Text - Only work for anchor tags
// Uses XPath expressions internally
WebElement fullMatch = driver.findElement(By.linkText("Exact Match"));
WebElement partialMatch = driver.findElement(By.partialLinkText("Partial"));

// CSS Selector - Powerful and generally faster than XPath
// Uses document.querySelector() or document.querySelectorAll() internally
WebElement element = driver.findElement(By.cssSelector("div.container > form#login input[type='submit']"));

// XPath - Most flexible but typically slower
// XPath engine traverses the DOM to find matches
WebElement element = driver.findElement(By.xpath("//div[contains(@class,'form')]/input[@name='password' and @type='password']"));
        

Technical Implementation:

// Basic implementation
WebElement element = driver.findElement(By.id("login-form"));

// With explicit waits for reliability
WebElement element = new WebDriverWait(driver, Duration.ofSeconds(10))
    .until(ExpectedConditions.presenceOfElementLocated(By.id("login-form")));

// Using ID with dynamic values
String dynamicId = "user-profile-" + userId;
WebElement profile = driver.findElement(By.id(dynamicId));
        

Browser implementations: All browsers optimize ID lookups, making them consistently the fastest option across all browsers.

// Handle radio button groups that share the same name
List options = driver.findElements(By.name("payment-method"));
for (WebElement option : options) {
    if (option.getAttribute("value").equals("credit-card")) {
        option.click();
        break;
    }
}

// Combine with other attributes for more specificity
WebElement passwordField = driver.findElement(
    By.cssSelector("input[name='password'][type='password']")
);
        

// Cannot use compound classes
// This will NOT work with multiple classes:
// WebElement element = driver.findElement(By.className("btn primary"));

// Correct approach for elements with multiple classes
WebElement element = driver.findElement(By.cssSelector(".btn.primary"));

// Finding all elements with a specific class
List errors = driver.findElements(By.className("error"));
if (!errors.isEmpty()) {
    System.out.println("Found " + errors.size() + " error messages");
    for (WebElement error : errors) {
        System.out.println(error.getText());
    }
}
        

// Count all links on a page
int linkCount = driver.findElements(By.tagName("a")).size();

// Get all images with missing alt attributes (accessibility check)
List images = driver.findElements(By.tagName("img"));
List imagesWithoutAlt = images.stream()
    .filter(img -> img.getAttribute("alt") == null || img.getAttribute("alt").isEmpty())
    .collect(Collectors.toList());

// Check heading hierarchy for SEO auditing
List headingOrder = new ArrayList<>();
for (int i = 1; i <= 6; i++) {
    List headings = driver.findElements(By.tagName("h" + i));
    for (WebElement heading : headings) {
        headingOrder.add("h" + i + ": " + heading.getText());
    }
}
        

// Link text is converted to this XPath expression:
// //a[normalize-space()='exact text']
WebElement link = driver.findElement(By.linkText("Privacy Policy"));

// Partial link text is converted to:
// //a[contains(normalize-space(), 'partial text')]
WebElement partialLink = driver.findElement(By.partialLinkText("Policy"));

// Handle links that contain child elements
// For example: Home
// Direct link text won't work here
WebElement homeLink = driver.findElement(By.xpath("//a[.//span[text()='Home']]"));
        

Advanced XPath Patterns:

// Ancestor-descendant relationships
WebElement label = driver.findElement(
    By.xpath("//input[@id='email']/ancestor::div[contains(@class, 'form-group')]/label")
);

// Following and preceding elements
WebElement nextField = driver.findElement(
    By.xpath("//label[text()='Email:']/following::input[1]")
);

// Using text() function for text-based location
WebElement agreeButton = driver.findElement(
    By.xpath("//button[text()='I Agree']")
);

// Indexing and position-based selectors
WebElement thirdTableRow = driver.findElement(
    By.xpath("(//table[@id='results']//tr)[3]")
);

// Attribute presence/absence checks
WebElement requiredField = driver.findElement(
    By.xpath("//input[@required and not(@disabled)]")
);

// Dynamic XPath construction
String xpathTemplate = "//div[@id='user-%s']/button[contains(@class, '%s')]";
String role = "admin";
String action = "edit";
WebElement button = driver.findElement(
    By.xpath(String.format(xpathTemplate, role, action))
);
        

Advanced locator techniques:

// Relative XPath for more resilient selectors
WebElement element = driver.findElement(By.xpath("//div[contains(@class, 'user-info')]/descendant::span[@data-testid='username']"));

// CSS selector with attribute combinations
WebElement element = driver.findElement(By.cssSelector("input.form-control[data-validation='required'][type='email']"));

// Finding elements within another element context (reduces scope)
WebElement form = driver.findElement(By.id("login-form"));
WebElement usernameField = form.findElement(By.name("username"));
        

Action chains for complex interactions:

// Create Actions instance
Actions actions = new Actions(driver);

// Hover over an element
actions.moveToElement(menuElement).perform();

// Drag and drop
actions.dragAndDrop(sourceElement, targetElement).perform();

// Key combinations
actions.keyDown(Keys.CONTROL)
       .click(element1)
       .click(element2)
       .keyUp(Keys.CONTROL)
       .perform();

// Right-click
actions.contextClick(element).perform();

// Double-click
actions.doubleClick(element).perform();
        

Explicit waits for interaction readiness:

// Create a wait with 10-second timeout
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));

// Wait until element is clickable then click
WebElement element = wait.until(ExpectedConditions.elementToBeClickable(By.id("dynamicButton")));
element.click();

// Wait for an element to contain specific text then get text
String text = wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("result")))
                 .getText();

// Custom wait condition for element state
wait.until(driver -> {
    WebElement el = driver.findElement(By.id("status"));
    return el.getText().contains("Ready");
});
        

Accessing Shadow DOM and iframes:

// Accessing elements in Shadow DOM
WebElement host = driver.findElement(By.id("shadow-host"));
SearchContext shadowRoot = host.getShadowRoot();
WebElement shadowContent = shadowRoot.findElement(By.cssSelector(".shadow-content"));

// Switching to iframe context for element access
driver.switchTo().frame("iframe-name");
WebElement elementInFrame = driver.findElement(By.id("frame-element"));
driver.switchTo().defaultContent(); // Return to main document
        

JavaScript execution for interaction:

// Using JavascriptExecutor for hidden elements or when normal interaction fails
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].click();", problematicElement);

// Set value directly (bypassing validation events)
js.executeScript("arguments[0].value='new text';", inputElement);

// Scroll element into view before interaction
js.executeScript("arguments[0].scrollIntoView(true);", elementToInteract);
        

Implementation and Edge Cases:

// Basic click implementation
WebElement button = driver.findElement(By.id("submit-button"));
button.click();

// Handling ElementClickInterceptedException
try {
    WebElement button = driver.findElement(By.id("overlay-button"));
    button.click();
} catch (ElementClickInterceptedException e) {
    // Option 1: Use JavaScript if element is covered by another element
    JavascriptExecutor js = (JavascriptExecutor) driver;
    js.executeScript("arguments[0].click();", button);
    
    // Option 2: Remove the obstructing element first
    WebElement overlay = driver.findElement(By.id("overlay"));
    js.executeScript("arguments[0].remove();", overlay);
    button.click();
}

// Handling StaleElementReferenceException
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
WebElement button = wait.until(ExpectedConditions.refreshed(
    ExpectedConditions.elementToBeClickable(By.id("dynamic-button"))
));
button.click();
        

Advanced Usage and Event Handling:

// Basic text input
WebElement input = driver.findElement(By.name("username"));
input.sendKeys("testuser");

// Combining special keys with text
WebElement searchBox = driver.findElement(By.name("q"));
searchBox.sendKeys("selenium automation", Keys.TAB, Keys.ENTER);

// Sending key combinations (e.g., Ctrl+A to select all text)
WebElement textArea = driver.findElement(By.id("content"));
textArea.sendKeys(Keys.chord(Keys.CONTROL, "a"));  // Select all text
textArea.sendKeys(Keys.DELETE);  // Delete selected text
textArea.sendKeys("New content");

// File upload using sendKeys (works only with  elements)
WebElement fileInput = driver.findElement(By.id("file-upload"));
fileInput.sendKeys("/path/to/file.jpg");

// Handling IME (Input Method Editor) for international characters
WebElement internationalInput = driver.findElement(By.id("intl-field"));
internationalInput.sendKeys("こんにちは");  // Japanese text
        

Implementation Details and Alternatives:

// Standard clear operation
WebElement inputField = driver.findElement(By.id("username"));
inputField.clear();

// Alternative 1: When clear() doesn't work with complex inputs
WebElement complexInput = driver.findElement(By.id("masked-input"));
complexInput.sendKeys(Keys.chord(Keys.CONTROL, "a"));
complexInput.sendKeys(Keys.DELETE);

// Alternative 2: JavaScript-based clearing
WebElement stubbornField = driver.findElement(By.id("custom-input"));
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].value = '';", stubbornField);

// Alternative 3: For contenteditable elements
WebElement editableDiv = driver.findElement(By.cssSelector("[contenteditable='true']"));
editableDiv.clear(); // May not work in all browsers
// JavaScript alternative for contenteditable elements
js.executeScript("arguments[0].textContent = '';", editableDiv);
        

Implementation Details and Alternatives:

// Basic getText usage
WebElement heading = driver.findElement(By.tagName("h1"));
String headingText = heading.getText();

// Getting values from input elements (getText doesn't work for input values)
WebElement inputField = driver.findElement(By.id("username"));
String inputValue = inputField.getAttribute("value");

// Getting text from complex elements with formatting
WebElement formattedText = driver.findElement(By.className("rich-text"));
String visibleText = formattedText.getText();  // Gets just visible text, no HTML

// Using JavaScript to get text content or inner text
JavascriptExecutor js = (JavascriptExecutor) driver;
String textContent = (String) js.executeScript("return arguments[0].textContent;", element);
String innerText = (String) js.executeScript("return arguments[0].innerText;", element);

// Getting text from elements with hidden children
String onlyVisible = (String) js.executeScript(
    "return Array.from(arguments[0].childNodes)" +
    ".filter(node => node.nodeType === 3 || " +
    "(node.nodeType === 1 && window.getComputedStyle(node).display !== 'none'))" +
    ".map(node => node.textContent)" +
    ".join('');", 
    complexElement);
        

Robust interaction patterns:

// Utility method for robust element interactions
public static void safeClick(WebDriver driver, By locator) {
    WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
    
    // Try multiple strategies to ensure successful click
    try {
        // First, wait for element to be clickable
        WebElement element = wait.until(ExpectedConditions.elementToBeClickable(locator));
        
        try {
            // Try standard click
            element.click();
        } catch (ElementClickInterceptedException e) {
            // If intercepted, try JavaScript click
            JavascriptExecutor js = (JavascriptExecutor) driver;
            js.executeScript("arguments[0].click();", element);
        }
        
        // Wait for expected condition after click (e.g., URL change, new element appearance)
        // This helps ensure the click had the expected effect
        wait.until(ExpectedConditions.urlContains("expected-path"));
    } catch (StaleElementReferenceException e) {
        // Element might have been refreshed in DOM, retry with fresh reference
        WebElement freshElement = driver.findElement(locator);
        freshElement.click();
    }
}

// Similarly for input operations with built-in validation and retry
public static void safeInput(WebDriver driver, By locator, String text) {
    WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
    WebElement element = wait.until(ExpectedConditions.elementToBeClickable(locator));
    
    element.clear();
    element.sendKeys(text);
    
    // Validate that text was entered correctly
    wait.until(driver -> element.getAttribute("value").equals(text));
}
        

JUnit 5 Integration:

import org.junit.jupiter.api.*;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import static org.junit.jupiter.api.Assertions.assertEquals;

@DisplayName("Home Page Tests")
class JUnitSeleniumTest {
    private WebDriver driver;
    
    @BeforeAll
    static void setUpClass() {
        // Global setup: WebDriver configuration, test data prep
        System.setProperty("webdriver.chrome.driver", "/path/to/chromedriver");
    }
    
    @BeforeEach
    void setUp() {
        ChromeOptions options = new ChromeOptions();
        options.addArguments("--headless");
        driver = new ChromeDriver(options);
    }
    
    @Test
    @DisplayName("Should verify page title")
    void testPageTitle() {
        driver.get("https://www.example.com");
        assertEquals("Example Domain", driver.getTitle(), 
                    "Page title should match expected value");
    }
    
    @AfterEach
    void tearDown() {
        if (driver != null) {
            driver.quit();
        }
    }
    
    @AfterAll
    static void tearDownClass() {
        // Global cleanup
    }
}
        

TestNG Integration with Reporting:

import org.testng.annotations.*;
import org.testng.Assert;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import com.aventstack.extentreports.ExtentReports;
import com.aventstack.extentreports.ExtentTest;
import com.aventstack.extentreports.reporter.ExtentHtmlReporter;

public class TestNGSeleniumTest {
    private WebDriver driver;
    private static ExtentReports extent;
    private ExtentTest test;
    
    @BeforeSuite
    public void setupSuite() {
        ExtentHtmlReporter htmlReporter = new ExtentHtmlReporter("test-output/extent.html");
        extent = new ExtentReports();
        extent.attachReporter(htmlReporter);
    }
    
    @BeforeMethod
    @Parameters({"browser"})
    public void setUp(@Optional("chrome") String browser) {
        test = extent.createTest(getClass().getSimpleName());
        
        if (browser.equalsIgnoreCase("chrome")) {
            driver = new ChromeDriver();
        } else if (browser.equalsIgnoreCase("firefox")) {
            // Initialize Firefox driver
        }
        
        driver.manage().window().maximize();
        test.info("Browser started");
    }
    
    @Test(groups = {"smoke"})
    public void testPageTitle() {
        driver.get("https://www.example.com");
        Assert.assertEquals(driver.getTitle(), "Example Domain");
        test.pass("Title verification passed");
    }
    
    @AfterMethod
    public void tearDown() {
        driver.quit();
        test.info("Browser closed");
    }
    
    @AfterSuite
    public void tearDownSuite() {
        extent.flush();
    }
}
        

Thread-Safe WebDriver for Parallel Execution:

public class WebDriverFactory {
    private static final ThreadLocal<WebDriver> driverThreadLocal = new ThreadLocal<>();
    
    public static WebDriver getDriver() {
        if (driverThreadLocal.get() == null) {
            // Configure and create a new WebDriver instance
            WebDriver driver = new ChromeDriver();
            driverThreadLocal.set(driver);
        }
        return driverThreadLocal.get();
    }
    
    public static void quitDriver() {
        WebDriver driver = driverThreadLocal.get();
        if (driver != null) {
            driver.quit();
            driverThreadLocal.remove();
        }
    }
}
        

Multi-Layer Test Architecture:

┌─────────────────────────────────────────┐
│            Testing Framework             │ (JUnit/TestNG/NUnit)
│   (Lifecycle management, test runners)   │
├─────────────────────────────────────────┤
│         Page Object/Screen Models        │ (Abstraction layer)
├─────────────────────────────────────────┤
│        Selenium WebDriver Actions        │ (Implementation layer)
├─────────────────────────────────────────┤
│            Browser Instances             │ (Runtime layer)
└─────────────────────────────────────────┘
        

import org.junit.jupiter.api.*;
import org.junit.jupiter.api.extension.ExtendWith;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import static org.junit.jupiter.api.Assertions.*;

import java.util.logging.Logger;

// Custom extension for logging and reporting
@ExtendWith(TestLoggerExtension.class)
@TestMethodOrder(MethodOrderer.OrderAnnotation.class)
@DisplayName("User Authentication Tests")
class UserAuthenticationTest {
    private static final Logger LOGGER = Logger.getLogger(UserAuthenticationTest.class.getName());
    private WebDriver driver;
    private LoginPage loginPage;
    private DashboardPage dashboardPage;
    
    @BeforeAll
    static void setupClass() {
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
        LOGGER.info("WebDriver initialized");
    }
    
    @BeforeEach
    void setup() {
        driver = new ChromeDriver();
        driver.manage().window().maximize();
        loginPage = new LoginPage(driver);
        dashboardPage = new DashboardPage(driver);
        LOGGER.info("Test environment initialized");
    }
    
    @Test
    @Order(1)
    @DisplayName("User can login with valid credentials")
    void testValidLogin() {
        loginPage.navigateTo();
        loginPage.login("valid_user", "valid_password");
        
        assertTrue(dashboardPage.isLoaded(), "Dashboard page should be displayed after login");
        assertEquals("Welcome, User", dashboardPage.getWelcomeMessage(), 
                    "Welcome message should display user's name");
        
        LOGGER.info("Valid login test completed successfully");
    }
    
    @Test
    @Order(2)
    @DisplayName("System shows error message for invalid credentials")
    void testInvalidLogin() {
        loginPage.navigateTo();
        loginPage.login("invalid_user", "invalid_password");
        
        assertTrue(loginPage.isErrorDisplayed(), "Error message should be displayed");
        assertEquals("Invalid username or password", loginPage.getErrorMessage(), 
                    "Error message should indicate invalid credentials");
        
        LOGGER.info("Invalid login test completed successfully");
    }
    
    @AfterEach
    void tearDown() {
        if (driver != null) {
            driver.quit();
        }
        LOGGER.info("WebDriver instance closed");
    }
    
    // Page Object definitions would be in separate files
}
        

import org.testng.annotations.*;
import org.testng.Assert;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import com.aventstack.extentreports.ExtentReports;
import com.aventstack.extentreports.ExtentTest;
import com.aventstack.extentreports.Status;
import com.aventstack.extentreports.reporter.ExtentHtmlReporter;

@Listeners(TestListeners.class)
public class UserAuthenticationTest {
    private WebDriver driver;
    private LoginPage loginPage;
    private DashboardPage dashboardPage;
    
    // For reporting
    private static ExtentReports extent;
    private ExtentTest test;
    
    @BeforeSuite
    public void setupSuite() {
        // Setup reporting
        ExtentHtmlReporter htmlReporter = new ExtentHtmlReporter("test-output/authentication-report.html");
        extent = new ExtentReports();
        extent.attachReporter(htmlReporter);
        extent.setSystemInfo("Environment", "QA");
        extent.setSystemInfo("Browser", "Chrome");
    }
    
    @BeforeClass
    @Parameters({"browser", "environment"})
    public void setupClass(@Optional("chrome") String browser, @Optional("qa") String environment) {
        // Configure based on parameters
        if ("qa".equals(environment)) {
            Config.BASE_URL = "https://qa.example.com";
        } else if ("staging".equals(environment)) {
            Config.BASE_URL = "https://staging.example.com";
        }
        
        // Runtime WebDriver selection
        WebDriverFactory.setupDriver(browser);
    }
    
    @BeforeMethod
    public void setupTest(java.lang.reflect.Method method) {
        // Create test instance for reporting
        test = extent.createTest(method.getName(), method.getAnnotation(Description.class).value());
        
        // Get WebDriver instance and initialize pages
        driver = WebDriverFactory.getDriver();
        loginPage = new LoginPage(driver);
        dashboardPage = new DashboardPage(driver);
        
        test.log(Status.INFO, "Test setup completed");
    }
    
    @Test(groups = {"authentication", "smoke"}, description = "Verify user can login with valid credentials")
    @Parameters({"username", "password"})
    public void testValidLogin(@Optional("valid_user") String username, @Optional("valid_pass") String password) {
        test.log(Status.INFO, "Navigating to login page");
        loginPage.navigateTo();
        
        test.log(Status.INFO, "Attempting login with valid credentials");
        loginPage.login(username, password);
        
        Assert.assertTrue(dashboardPage.isLoaded(), "Dashboard should be visible after login");
        test.log(Status.PASS, "User successfully logged in and redirected to dashboard");
    }
    
    @Test(groups = {"authentication", "negative"}, description = "Verify system handles invalid login attempts")
    public void testInvalidLogin() {
        test.log(Status.INFO, "Navigating to login page");
        loginPage.navigateTo();
        
        test.log(Status.INFO, "Attempting login with invalid credentials");
        loginPage.login("invalid_user", "invalid_pass");
        
        Assert.assertTrue(loginPage.isErrorDisplayed(), "Error message should be displayed");
        Assert.assertEquals(loginPage.getErrorMessage(), "Invalid username or password");
        test.log(Status.PASS, "System correctly displayed error message for invalid credentials");
    }
    
    @Test(groups = {"authentication", "security"}, dependsOnMethods = "testValidLogin")
    public void testLogout() {
        dashboardPage.logout();
        Assert.assertTrue(loginPage.isLoaded(), "Login page should be displayed after logout");
        test.log(Status.PASS, "User successfully logged out");
    }
    
    @AfterMethod
    public void tearDownTest(ITestResult result) {
        // Update test status in report
        if (result.getStatus() == ITestResult.FAILURE) {
            test.log(Status.FAIL, "Test failed: " + result.getThrowable());
            // Take screenshot on failure
            String screenshotPath = ScreenshotUtil.captureScreenshot(driver, result.getName());
            test.addScreenCaptureFromPath(screenshotPath);
        }
        
        test.log(Status.INFO, "Test completed");
    }
    
    @AfterClass
    public void tearDownClass() {
        WebDriverFactory.quitDriver();
    }
    
    @AfterSuite
    public void tearDownSuite() {
        extent.flush();
    }
}
        

using NUnit.Framework;
using OpenQA.Selenium;
using System.Threading;
using AventStack.ExtentReports;
using AventStack.ExtentReports.Reporter;

[assembly: LevelOfParallelism(3)] // Configure parallel execution

namespace SeleniumTests
{
    [TestFixture]
    [Parallelizable(ParallelScope.Self)]
    [Category("Authentication")]
    public class UserAuthenticationTests
    {
        private ThreadLocal<IWebDriver> _driver;
        private ThreadLocal<LoginPage> _loginPage;
        private ThreadLocal<DashboardPage> _dashboardPage;
        
        private static ExtentReports _extent;
        private ExtentTest _test;
        
        [OneTimeSetUp]
        public void SetupTestSuite()
        {
            // Initialize reporting
            var htmlReporter = new ExtentHtmlReporter("test-results/authentication-report.html");
            _extent = new ExtentReports();
            _extent.AttachReporter(htmlReporter);
            
            // Configure global test properties
            _extent.AddSystemInfo("Environment", TestContext.Parameters.Get("Environment", "QA"));
            _extent.AddSystemInfo("Browser", TestContext.Parameters.Get("Browser", "Chrome"));
        }
        
        [SetUp]
        public void Setup()
        {
            _driver = new ThreadLocal<IWebDriver>();
            _loginPage = new ThreadLocal<LoginPage>();
            _dashboardPage = new ThreadLocal<DashboardPage>();
            
            _driver.Value = WebDriverFactory.CreateDriver(TestContext.Parameters.Get("Browser", "Chrome"));
            _loginPage.Value = new LoginPage(_driver.Value);
            _dashboardPage.Value = new DashboardPage(_driver.Value);
            
            _test = _extent.CreateTest(TestContext.CurrentContext.Test.Name);
            _test.Info("Test setup completed");
        }
        
        [Test]
        [Description("Verify user can login with valid credentials")]
        public void ValidLogin()
        {
            _test.Info("Navigating to login page");
            _loginPage.Value.NavigateTo();
            
            _test.Info("Performing login");
            _loginPage.Value.Login("valid_user", "valid_pass");
            
            Assert.IsTrue(_dashboardPage.Value.IsLoaded(), "Dashboard should be loaded after successful login");
            Assert.AreEqual("Welcome, User", _dashboardPage.Value.GetWelcomeMessage());
            
            _test.Pass("Login successful");
        }
        
        [Test]
        [Description("Verify system handles invalid login attempts correctly")]
        public void InvalidLogin()
        {
            _test.Info("Navigating to login page");
            _loginPage.Value.NavigateTo();
            
            _test.Info("Attempting login with invalid credentials");
            _loginPage.Value.Login("invalid_user", "invalid_pass");
            
            Assert.IsTrue(_loginPage.Value.IsErrorDisplayed(), "Error message should be displayed");
            Assert.AreEqual("Invalid username or password", _loginPage.Value.GetErrorMessage());
            
            _test.Pass("System correctly handled invalid login");
        }
        
        [TearDown]
        public void TearDown()
        {
            var status = TestContext.CurrentContext.Result.Outcome.Status;
            var stacktrace = TestContext.CurrentContext.Result.StackTrace;
            
            if (status == NUnit.Framework.Interfaces.TestStatus.Failed)
            {
                _test.Fail($"Test failed with message: {TestContext.CurrentContext.Result.Message}");
                
                // Capture screenshot
                var screenshot = ((ITakesScreenshot)_driver.Value).GetScreenshot();
                var screenshotPath = $"test-results/screenshots/{TestContext.CurrentContext.Test.Name}.png";
                screenshot.SaveAsFile(screenshotPath);
                _test.AddScreenCaptureFromPath(screenshotPath);
            }
            
            _driver.Value.Quit();
            _driver.Dispose();
            _test.Info("Browser closed");
        }
        
        [OneTimeTearDown]
        public void TearDownSuite()
        {
            _extent.Flush();
        }
    }
}
        

// TestNG with Allure example
import io.qameta.allure.*;
import org.testng.annotations.*;

@Epic("User Authentication")
@Feature("Login Functionality")
public class LoginTests {

    @Test
    @Story("Valid Login")
    @Severity(SeverityLevel.CRITICAL)
    @Description("Verify users can login with valid credentials")
    @Issue("AUTH-123")
    @TmsLink("TC-456")
    public void testValidLogin() {
        // Test implementation
    }
    
    @Step("Navigate to login page")
    public void navigateToLoginPage() {
        // Implementation
        // Allure will capture this as a discrete step in the report
    }
    
    @Step("Enter credentials: username={0}, password={1}")
    public void enterCredentials(String username, String password) {
        // Implementation with parameters
    }
    
    @Attachment(value = "Page screenshot", type = "image/png")
    public byte[] saveScreenshot(byte[] screenShot) {
        // This will attach a screenshot to the report
        return screenShot;
    }
}
        

// TestNG data provider example
@DataProvider(name = "loginCredentials")
public Object[][] provideCredentials() {
    return new Object[][] {
        {"valid_user", "valid_pass", true, "Dashboard"},
        {"invalid_user", "invalid_pass", false, null},
        {"valid_user", "", false, null},
        {"", "valid_pass", false, null}
    };
}

@Test(dataProvider = "loginCredentials")
public void testLogin(String username, String password, boolean shouldSucceed, String expectedTitle) {
    loginPage.navigateTo();
    loginPage.login(username, password);
    
    if (shouldSucceed) {
        Assert.assertEquals(driver.getTitle(), expectedTitle);
    } else {
        Assert.assertTrue(loginPage.isErrorDisplayed());
    }
}
        

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()
    });
  });
});
    

Advanced Mocking Example:

// Implementation of module with dependency
import DataService from './dataService';

export class UserManager {
  constructor(dataService = new DataService()) {
    this.dataService = dataService;
  }
  
  async getUserPermissions(userId) {
    const user = await this.dataService.fetchUser(userId);
    const roles = await this.dataService.fetchRoles(user.roleIds);
    return roles.flatMap(role => role.permissions);
  }
}

// Test with complex mocking
jest.mock('./dataService', () => {
  return {
    __esModule: true,
    default: jest.fn().mockImplementation(() => ({
      fetchUser: jest.fn(),
      fetchRoles: jest.fn()
    }))
  };
});

describe('UserManager', () => {
  let userManager;
  let mockDataService;
  
  beforeEach(() => {
    // Clear all mocks
    jest.clearAllMocks();
    
    // Create new instance with auto-mocked DataService
    mockDataService = new (require('./dataService').default)();
    userManager = new UserManager(mockDataService);
    
    // Configure mock behavior
    mockDataService.fetchUser.mockResolvedValue({ 
      id: 'user1', 
      name: 'Test User', 
      roleIds: ['role1', 'role2'] 
    });
    
    mockDataService.fetchRoles.mockResolvedValue([
      { id: 'role1', name: 'Admin', permissions: ['read', 'write'] },
      { id: 'role2', name: 'User', permissions: ['read'] }
    ]);
  });
  
  test('getUserPermissions returns merged permissions from all roles', async () => {
    const permissions = await userManager.getUserPermissions('user1');
    
    // Verify mock interactions
    expect(mockDataService.fetchUser).toHaveBeenCalledWith('user1');
    expect(mockDataService.fetchRoles).toHaveBeenCalledWith(['role1', 'role2']);
    
    // Verify results
    expect(permissions).toEqual(['read', 'write', 'read']);
    
    // Verify call sequence (if important)
    expect(mockDataService.fetchUser).toHaveBeenCalledBefore(mockDataService.fetchRoles);
  });
});
        

Advanced jest.fn() Usage:

describe('Advanced mock function capabilities', () => {
  test('Implementing complex mock behavior', () => {
    // Mock with conditional return values
    const complexMock = jest.fn().mockImplementation((arg) => {
      if (typeof arg === 'string') return arg.toUpperCase();
      if (typeof arg === 'number') return arg * 2;
      return null;
    });
    
    expect(complexMock('test')).toBe('TEST');
    expect(complexMock(5)).toBe(10);
    expect(complexMock(true)).toBeNull();
    
    // Inspect call arguments by position
    expect(complexMock.mock.calls).toHaveLength(3);
    expect(complexMock.mock.calls[0][0]).toBe('test');
    
    // Reset and reconfigure behavior
    complexMock.mockReset();
    complexMock.mockReturnValueOnce('first call')
               .mockReturnValueOnce('second call')
               .mockReturnValue('default');
               
    expect(complexMock()).toBe('first call');
    expect(complexMock()).toBe('second call');
    expect(complexMock()).toBe('default');
  });
  
  test('Mocking class constructors and methods', () => {
    // Creating mock constructor functions
    const MockDate = jest.fn();
    
    // Adding mock methods to prototype
    MockDate.prototype.getFullYear = jest.fn().mockReturnValue(2025);
    MockDate.prototype.getMonth = jest.fn().mockReturnValue(2); // March (0-indexed)
    
    // Using the mock constructor
    const date = new MockDate();
    expect(date.getFullYear()).toBe(2025);
    expect(date.getMonth()).toBe(2);
    
    // Verify constructor was called
    expect(MockDate).toHaveBeenCalledTimes(1);
    
    // Check constructor instantiation context
    expect(MockDate.mock.instances).toHaveLength(1);
    expect(MockDate.mock.instances[0].getFullYear).toHaveBeenCalledTimes(1);
  });
  
  test('Mocking async functions with various patterns', async () => {
    // Creating promises with different states
    const successMock = jest.fn().mockResolvedValue('success');
    const failureMock = jest.fn().mockRejectedValue(new Error('failure'));
    const sequenceMock = jest.fn()
      .mockResolvedValueOnce('first')
      .mockRejectedValueOnce(new Error('error'))
      .mockResolvedValue('default');
      
    await expect(successMock()).resolves.toBe('success');
    await expect(failureMock()).rejects.toThrow('failure');
    
    await expect(sequenceMock()).resolves.toBe('first');
    await expect(sequenceMock()).rejects.toThrow('error');
    await expect(sequenceMock()).resolves.toBe('default');
  });
});
        

Advanced jest.mock() Patterns:

// Mocking modules with factory functions and auto-mocking
jest.mock('../services/authService', () => {
  // Original module to preserve some functionality
  const originalModule = jest.requireActual('../services/authService');
  
  return {
    // Preserve some exports from the original module
    ...originalModule,
    
    // Override specific exports
    login: jest.fn().mockResolvedValue({ token: 'mock-token' }),
    
    // Mock a class export
    AuthManager: jest.fn().mockImplementation(() => ({
      validateToken: jest.fn().mockReturnValue(true),
      getUserPermissions: jest.fn().mockResolvedValue(['read', 'write'])
    }))
  };
});

// Mocking module with direct module.exports style modules
jest.mock('fs', () => ({
  readFileSync: jest.fn().mockImplementation((path, options) => {
    if (path.endsWith('config.json')) {
      return JSON.stringify({ environment: 'test' });
    }
    throw new Error(`Unexpected file: ${path}`);
  }),
  writeFileSync: jest.fn()
}));

// Using ES module namespace imports with mocks
jest.mock('../utils/logger', () => ({
  __esModule: true,  // Important for ES modules compatibility
  default: jest.fn(),
  logError: jest.fn(),
  logWarning: jest.fn()
}));

// Testing module mocking behavior
import { login, AuthManager } from '../services/authService';
import fs from 'fs';
import logger, { logError } from '../utils/logger';

describe('Advanced module mocking', () => {
  beforeEach(() => {
    // Clear all mock implementations and calls between tests
    jest.clearAllMocks();
  });
  
  test('Mocked module behavior', async () => {
    const token = await login('username', 'password');
    expect(token).toEqual({ token: 'mock-token' });
    
    const auth = new AuthManager();
    expect(auth.validateToken('some-token')).toBe(true);
    
    // Test partial module mocking
    fs.readFileSync.mockImplementationOnce(() => 'custom content');
    expect(fs.readFileSync('temp.txt')).toBe('custom content');
    
    // Testing ES module mocks
    logger('info message');
    logError('error message');
    expect(logger).toHaveBeenCalledWith('info message');
    expect(logError).toHaveBeenCalledWith('error message');
  });
  
  test('Temporarily overriding mock implementations', async () => {
    // Override just for this test
    login.mockRejectedValueOnce(new Error('Auth failed'));
    
    await expect(login('bad', 'credentials')).rejects.toThrow('Auth failed');
    // The next call would use the default mock implementation again
    await expect(login('good', 'credentials')).resolves.toEqual({ token: 'mock-token' });
  });
});
        

Comprehensive Manual Mocking:

Directory structure:

project/
├── __mocks__/            # Top-level mocks for node_modules
│   ├── axios.js
│   └── lodash.js
├── src/
│   ├── __mocks__/        # Local mocks for project modules
│   │   ├── database.js
│   │   └── config.js
│   ├── database.js       # Real implementation
│   └── services/
│       ├── __mocks__/    # Service-specific mocks
│       │   └── userService.js
│       └── userService.js
        

Manual mock implementation for a Node module (axios):

// __mocks__/axios.js
const mockAxios = {
  defaults: { baseURL: ' },
  interceptors: {
    request: { use: jest.fn(), eject: jest.fn() },
    response: { use: jest.fn(), eject: jest.fn() }
  },
  get: jest.fn().mockResolvedValue({ data: {} }),
  post: jest.fn().mockResolvedValue({ data: {} }),
  put: jest.fn().mockResolvedValue({ data: {} }),
  delete: jest.fn().mockResolvedValue({ data: {} }),
  create: jest.fn().mockReturnValue(mockAxios)
};

module.exports = mockAxios;
        

Manual mock for a local module with stateful behavior:

// src/__mocks__/database.js
let mockData = {
  users: [],
  products: []
};

const db = {
  // Reset state between tests
  __resetMockData: () => {
    mockData = { users: [], products: [] };
  },
  
  // Access mock data for assertions
  __getMockData: () => ({ ...mockData }),
  
  // Mock methods
  connect: jest.fn().mockResolvedValue(true),
  disconnect: jest.fn().mockResolvedValue(true),
  
  // Methods with stateful behavior
  users: {
    findById: jest.fn(id => Promise.resolve(
      mockData.users.find(u => u.id === id) || null
    )),
    create: jest.fn(userData => {
      const newUser = { ...userData, id: Math.random().toString(36).substr(2, 9) };
      mockData.users.push(newUser);
      return Promise.resolve(newUser);
    }),
    update: jest.fn((id, userData) => {
      const index = mockData.users.findIndex(u => u.id === id);
      if (index === -1) return Promise.resolve(null);
      
      mockData.users[index] = { ...mockData.users[index], ...userData };
      return Promise.resolve(mockData.users[index]);
    }),
    delete: jest.fn(id => {
      const index = mockData.users.findIndex(u => u.id === id);
      if (index === -1) return Promise.resolve(false);
      
      mockData.users.splice(index, 1);
      return Promise.resolve(true);
    })
  }
};

module.exports = db;
        

Usage in tests:

// Enable automatic mocking for axios
jest.mock('axios');

// Enable manual mocking for local modules 
jest.mock('../database');

import axios from 'axios';
import db from '../database';
import UserService from './userService';

describe('UserService with manual mocks', () => {
  beforeEach(() => {
    // Reset mocks and mock state
    jest.clearAllMocks();
    db.__resetMockData();
    
    // Configure mock responses for this test suite
    axios.get.mockImplementation((url) => {
      if (url.includes('permissions')) {
        return Promise.resolve({ 
          data: { permissions: ['read', 'write'] } 
        });
      }
      return Promise.resolve({ data: {} });
    });
  });
  
  test('createUser stores in database and assigns permissions', async () => {
    const userService = new UserService(db);
    const newUser = await userService.createUser({ name: 'Alice' });
    
    // Verify database interaction
    expect(db.users.create).toHaveBeenCalledWith(
      expect.objectContaining({ name: 'Alice' })
    );
    
    // Verify API call for permissions
    expect(axios.get).toHaveBeenCalledWith(
      expect.stringContaining('permissions'),
      expect.any(Object)
    );
    
    // Verify correct result
    expect(newUser).toEqual(
      expect.objectContaining({
        name: 'Alice',
        permissions: ['read', 'write']
      })
    );
    
    // Verify state change in mock database
    const mockData = db.__getMockData();
    expect(mockData.users).toHaveLength(1);
    expect(mockData.users[0].name).toBe('Alice');
  });
});
        

Creating and Using Basic Spies:

// Creating a spy with jest.fn()
test('demonstrates basic spy functionality', () => {
  // Create spy with custom implementation
  const mySpy = jest.fn((x) => x * 2);
  
  // Exercise the spy
  const result1 = mySpy(10);
  const result2 = mySpy(5);
  
  // Assertions
  expect(mySpy).toHaveBeenCalledTimes(2);
  expect(mySpy).toHaveBeenNthCalledWith(1, 10);
  expect(mySpy).toHaveBeenNthCalledWith(2, 5);
  expect(mySpy).toHaveBeenCalledWith(expect.any(Number));
  expect(result1).toBe(20);
  expect(result2).toBe(10);
  
  // Access call information
  console.log(mySpy.mock.calls);        // [[10], [5]] - all call arguments
  console.log(mySpy.mock.results);      // [{type: 'return', value: 20}, {type: 'return', value: 10}]
  console.log(mySpy.mock.calls[0][0]);  // 10 - first argument of first call
});
        

Advanced Usage with jest.spyOn():

// Spying on class/object methods
test('demonstrates spyOn with various behaviors', () => {
  class DataService {
    fetchData(id: string) {
      // Complex API call we don't want to execute in tests
      console.log(`Fetching data for ${id}`);
      return Promise.resolve({ id, name: 'Example Item' });
    }
    
    processData(data: any) {
      return { ...data, processed: true };
    }
  }
  
  const service = new DataService();
  
  // Spy on method while keeping original implementation
  const processDataSpy = jest.spyOn(service, 'processData');
  
  // Spy on method and mock implementation
  const fetchDataSpy = jest.spyOn(service, 'fetchData').mockImplementation((id) => {
    return Promise.resolve({ id, name: 'Mocked Item' });
  });
  
  // Use the methods
  service.processData({ id: '123' });
  return service.fetchData('456').then(result => {
    // Assertions
    expect(processDataSpy).toHaveBeenCalledWith({ id: '123' });
    expect(fetchDataSpy).toHaveBeenCalledWith('456');
    expect(result).toEqual({ id: '456', name: 'Mocked Item' });
    
    // Restore original implementation
    fetchDataSpy.mockRestore();
  });
});
        

Controlling Spy Behavior:

test('demonstrates advanced spy control techniques', () => {
  const complexSpy = jest.fn();
  
  // Return different values on successive calls
  complexSpy
    .mockReturnValueOnce(10)
    .mockReturnValueOnce(20)
    .mockReturnValue(30); // default for any additional calls
  
  expect(complexSpy()).toBe(10);
  expect(complexSpy()).toBe(20);
  expect(complexSpy()).toBe(30);
  expect(complexSpy()).toBe(30);
  
  // Reset call history
  complexSpy.mockClear();
  expect(complexSpy).toHaveBeenCalledTimes(0);
  
  // Mock implementation once
  complexSpy.mockImplementationOnce(() => {
    throw new Error('Simulated failure');
  });
  
  expect(() => complexSpy()).toThrow();
  expect(complexSpy()).toBe(30); // Reverts to previous mockReturnValue
  
  // Reset everything (implementation and history)
  complexSpy.mockReset();
  expect(complexSpy()).toBeUndefined(); // Default return is undefined after reset
});
        

test('demonstrates spying on async functions', async () => {
  // Mock API client
  const apiClient = {
    async fetchUser(id: string) {
      // Real implementation would make HTTP request
      const response = await fetch(`/api/users/${id}`);
      return response.json();
    }
  };
  
  // Spy on async method
  const fetchSpy = jest.spyOn(apiClient, 'fetchUser')
    .mockImplementation(async (id) => {
      return { id, name: 'Test User' };
    });
  
  const user = await apiClient.fetchUser('123');
  
  expect(fetchSpy).toHaveBeenCalledWith('123');
  expect(user).toEqual({ id: '123', name: 'Test User' });
  
  // Testing rejected promises
  fetchSpy.mockImplementationOnce(() => Promise.reject(new Error('Network error')));
  
  await expect(apiClient.fetchUser('456')).rejects.toThrow('Network error');
  
  // Cleanup
  fetchSpy.mockRestore();
});
        

Deep Dive into jest.spyOn() Implementation:

// Simplified representation of how jest.spyOn works internally
function spyOn(object: any, methodName: string) {
  const originalMethod = object[methodName];
  
  // Create a mock function that calls through to the original by default
  const mockFn = jest.fn(function(...args) {
    return originalMethod.apply(this, args);
  });
  
  // Add restore capability
  mockFn.mockRestore = function() {
    object[methodName] = originalMethod;
  };
  
  // Replace the original method with our instrumented version
  object[methodName] = mockFn;
  
  return mockFn;
}
        

Pure Spy Pattern (Observation Only):

describe("Pure Spy Pattern", () => {
  class PaymentProcessor {
    processPayment(amount: number, cardToken: string) {
      // Complex payment logic here
      this.validatePayment(amount, cardToken);
      return { success: true, transactionId: "tx_" + Math.random().toString(36).substring(2, 15) };
    }
    
    validatePayment(amount: number, cardToken: string) {
      // Validation logic
      if (amount <= 0) throw new Error("Invalid amount");
      if (!cardToken) throw new Error("Invalid card token");
    }
  }
  
  test("processPayment calls validatePayment with correct parameters", () => {
    const processor = new PaymentProcessor();
    
    // Pure spy - just observing calls without changing behavior
    const validateSpy = jest.spyOn(processor, "validatePayment");
    
    // Execute the method that should call our spied method
    const result = processor.processPayment(99.99, "card_token_123");
    
    // Verify the interaction occurred correctly
    expect(validateSpy).toHaveBeenCalledWith(99.99, "card_token_123");
    expect(validateSpy).toHaveBeenCalledTimes(1);
    expect(result.success).toBe(true);
    
    // Clean up
    validateSpy.mockRestore();
  });
});
        

Spy-to-Mock Transition Pattern:

describe("Spy-to-Mock Transition Pattern", () => {
  class DatabaseClient {
    async queryUsers(criteria: object) {
      // In real implementation, this would connect to a database
      console.log("Connecting to database...");
      // Complex query logic
      return [{ id: 1, name: "User 1" }, { id: 2, name: "User 2" }];
    }
  }
  
  class UserService {
    constructor(private dbClient: DatabaseClient) {}
    
    async findActiveUsers() {
      const users = await this.dbClient.queryUsers({ status: "active" });
      return users.map(user => ({
        ...user,
        displayName: user.name.toUpperCase()
      }));
    }
  }
  
  test("UserService transforms data from DatabaseClient correctly", async () => {
    const dbClient = new DatabaseClient();
    const userService = new UserService(dbClient);
    
    // Start as a spy, then convert to a mock
    const querySpy = jest.spyOn(dbClient, "queryUsers")
      .mockResolvedValue([
        { id: 101, name: "Test User" },
        { id: 102, name: "Another User" }
      ]);
    
    const result = await userService.findActiveUsers();
    
    // Verify the interaction
    expect(querySpy).toHaveBeenCalledWith({ status: "active" });
    
    // Verify the transformation logic works correctly with our mock data
    expect(result).toEqual([
      { id: 101, name: "Test User", displayName: "TEST USER" },
      { id: 102, name: "Another User", displayName: "ANOTHER USER" }
    ]);
    
    querySpy.mockRestore();
  });
});
        

Advanced Control Flow Testing:

describe("Advanced Control Flow Testing", () => {
  class AuthService {
    constructor(private apiClient: any) {}
    
    async login(username: string, password: string) {
      try {
        const response = await this.apiClient.authenticate(username, password);
        
        if (response.requiresMFA) {
          return { success: false, nextStep: "mfa" };
        }
        
        if (response.status === "locked") {
          return { success: false, error: "Account locked" };
        }
        
        return { success: true, token: response.token };
      } catch (error) {
        return { success: false, error: error.message };
      }
    }
  }
  
  test("login method handles all authentication response scenarios", async () => {
    const apiClient = {
      authenticate: async () => ({ /* default implementation */ })
    };
    
    const authService = new AuthService(apiClient);
    
    // Create a spy that we'll reconfigure for each test case
    const authSpy = jest.spyOn(apiClient, "authenticate");
    
    // Test successful login
    authSpy.mockResolvedValueOnce({ status: "success", token: "jwt_token_123" });
    expect(await authService.login("user", "pass")).toEqual({
      success: true,
      token: "jwt_token_123"
    });
    
    // Test MFA required case
    authSpy.mockResolvedValueOnce({ status: "pending", requiresMFA: true });
    expect(await authService.login("user", "pass")).toEqual({
      success: false,
      nextStep: "mfa"
    });
    
    // Test locked account case
    authSpy.mockResolvedValueOnce({ status: "locked" });
    expect(await authService.login("user", "pass")).toEqual({
      success: false,
      error: "Account locked"
    });
    
    // Test error handling
    authSpy.mockRejectedValueOnce(new Error("Network failure"));
    expect(await authService.login("user", "pass")).toEqual({
      success: false,
      error: "Network failure"
    });
    
    // Verify all interactions
    expect(authSpy).toHaveBeenCalledTimes(4);
    expect(authSpy).toHaveBeenCalledWith("user", "pass");
    
    authSpy.mockRestore();
  });
});
        

Spy Lifecycle Comparison:

test("understanding spy lifecycle methods", () => {
  const utils = {
    getValue: () => "original",
    processValue: (v) => v.toUpperCase()
  };
  
  const spy = jest.spyOn(utils, "getValue").mockReturnValue("mocked");
  
  expect(utils.getValue()).toBe("mocked");  // Returns mock value
  expect(spy).toHaveBeenCalledTimes(1);     // Has call history
  
  // Clear call history only
  spy.mockClear();
  expect(spy).toHaveBeenCalledTimes(0);     // Call history reset
  expect(utils.getValue()).toBe("mocked");  // Still returns mock value
  
  // Reset mock implementation and history
  spy.mockReset();
  expect(utils.getValue()).toBeUndefined(); // Default mock return is undefined
  
  // Provide new mock implementation
  spy.mockReturnValue("new mock");
  expect(utils.getValue()).toBe("new mock");
  
  // Fully restore original
  spy.mockRestore();
  expect(utils.getValue()).toBe("original"); // Original implementation restored
});
        

test("spy preserves this context properly", () => {
  class Counter {
    count = 0;
    
    increment() {
      this.count += 1;
      return this.count;
    }
    
    getState() {
      return { current: this.count };
    }
  }
  
  const counter = new Counter();
  
  // Spy on the method
  const incrementSpy = jest.spyOn(counter, "increment");
  const getStateSpy = jest.spyOn(counter, "getState");
  
  // The methods still operate on the same instance
  counter.increment();
  counter.increment();
  
  expect(incrementSpy).toHaveBeenCalledTimes(2);
  expect(counter.count).toBe(2); // The internal state was modified
  
  expect(counter.getState()).toEqual({ current: 2 });
  expect(getStateSpy).toHaveBeenCalledTimes(1);
  
  incrementSpy.mockRestore();
  getStateSpy.mockRestore();
});
        

test("advanced async pattern with spy timing control", async () => {
  // Service with multiple async operations
  class DataSyncService {
    constructor(private api: any, private storage: any) {}
    
    async syncData() {
      const remoteData = await this.api.fetchLatestData();
      await this.storage.saveData(remoteData);
      return { success: true, count: remoteData.length };
    }
  }
  
  const mockApi = {
    fetchLatestData: async () => []
  };
  
  const mockStorage = {
    saveData: async (data: any) => true
  };
  
  const service = new DataSyncService(mockApi, mockStorage);
  
  // Spy on both async methods
  const fetchSpy = jest.spyOn(mockApi, "fetchLatestData")
    .mockImplementation(async () => {
      // Simulate network delay
      await new Promise(resolve => setTimeout(resolve, 50));
      return [{ id: 1 }, { id: 2 }];
    });
  
  const saveSpy = jest.spyOn(mockStorage, "saveData")
    .mockImplementation(async (data) => {
      // Validate correct data is passed from the first operation to the second
      expect(data).toEqual([{ id: 1 }, { id: 2 }]);
      // Simulate storage delay
      await new Promise(resolve => setTimeout(resolve, 30));
      return true;
    });
  
  // Execute and verify the full flow
  const result = await service.syncData();
  
  expect(fetchSpy).toHaveBeenCalledTimes(1);
  expect(saveSpy).toHaveBeenCalledTimes(1);
  expect(saveSpy).toHaveBeenCalledAfter(fetchSpy);
  expect(result).toEqual({ success: true, count: 2 });
  
  fetchSpy.mockRestore();
  saveSpy.mockRestore();
});
        

Hook Execution Order:

// Execution order when nesting describe blocks
describe('outer', () => {
  beforeAll(() => console.log('1. outer beforeAll'));
  beforeEach(() => console.log('2. outer beforeEach'));
  
  describe('inner', () => {
    beforeAll(() => console.log('3. inner beforeAll'));
    beforeEach(() => console.log('4. inner beforeEach'));
    
    test('test', () => console.log('5. test'));
    
    afterEach(() => console.log('6. inner afterEach'));
    afterAll(() => console.log('7. inner afterAll'));
  });
  
  afterEach(() => console.log('8. outer afterEach'));
  afterAll(() => console.log('9. outer afterAll'));
});

// Console output order:
// 1. outer beforeAll
// 3. inner beforeAll
// 2. outer beforeEach
// 4. inner beforeEach
// 5. test
// 6. inner afterEach
// 8. outer afterEach
// 7. inner afterAll
// 9. outer afterAll
        

Asynchronous Hooks:

// Using async/await
beforeAll(async () => {
  testDatabase = await initializeTestDatabase();
});

// Using promises
beforeAll(() => {
  return initializeTestDatabase().then(db => {
    testDatabase = db;
  });
});

// Using callbacks (deprecated pattern)
beforeAll(done => {
  initializeTestDatabase(db => {
    testDatabase = db;
    done();
  });
});
        

Scoped Hook Usage with describe blocks:

describe('User API', () => {
  // Applied to all tests in this describe block
  beforeAll(() => {
    return setupUserDatabase();
  });
  
  describe('POST /users', () => {
    // Only applied to tests in this nested block
    beforeEach(() => {
      return resetUserTable();
    });
    
    test('should create a new user', () => {
      // Test implementation
    });
  });
  
  describe('GET /users', () => {
    // Different setup for this test group
    beforeEach(() => {
      return seedUsersTable();
    });
    
    test('should retrieve users list', () => {
      // Test implementation
    });
  });
  
  // Applied to all tests in the outer describe
  afterAll(() => {
    return teardownUserDatabase();
  });
});
        

Advanced beforeEach Example:

describe('UserService', () => {
  let userService;
  let mockDatabase;
  let mockLogger;
  
  beforeEach(() => {
    // Construct fresh mocks for each test
    mockDatabase = {
      query: jest.fn(),
      transaction: jest.fn().mockImplementation(callback => callback())
    };
    
    mockLogger = {
      info: jest.fn(),
      error: jest.fn()
    };
    
    // Inject mocks into the system under test
    userService = new UserService({
      database: mockDatabase,
      logger: mockLogger,
      config: { maxRetries: 3 }
    });
    
    // Spy on internal methods
    jest.spyOn(userService, '_normalizeUserData');
  });
  
  test('createUser starts a transaction', async () => {
    await userService.createUser({ name: 'John' });
    expect(mockDatabase.transaction).toHaveBeenCalledTimes(1);
  });
  
  test('updateUser validates input', async () => {
    await expect(userService.updateUser(null)).rejects.toThrow();
    expect(mockLogger.error).toHaveBeenCalled();
  });
});
        

Strategic afterEach Example:

describe('API Client', () => {
  // Track all open connections to close them
  const openConnections = [];
  
  beforeEach(() => {
    // Set up global fetch mock
    global.fetch = jest.fn().mockImplementation((url, options) => {
      const connection = { url, options, close: jest.fn() };
      openConnections.push(connection);
      return Promise.resolve({
        ok: true,
        json: () => Promise.resolve({ data: 'test' }),
        headers: new Map([
          ['Content-Type', 'application/json']
        ]),
        connection
      });
    });
  });
  
  afterEach(() => {
    // Reset mocks
    jest.resetAllMocks();
    
    // Close any connections that were opened
    openConnections.forEach(conn => conn.close());
    openConnections.length = 0;
    
    // Cleanup global space
    delete global.fetch;
    
    // Clear any timeout or interval
    jest.clearAllTimers();
  });
  
  test('Client can fetch data', async () => {
    const client = new ApiClient('https://api.example.com');
    const result = await client.getData();
    expect(result).toEqual({ data: 'test' });
  });
});
        

Performance-Optimized beforeAll:

describe('Database Integration Tests', () => {
  let db;
  let server;
  let testSeedData;
  
  // Setup database once for all tests
  beforeAll(async () => {
    // Start test server
    server = await startTestServer();
    
    // Initialize test database
    db = await initializeTestDatabase();
    
    // Generate large dataset once
    testSeedData = generateTestData(1000);
    
    // Batch insert seed data
    await db.batchInsert('users', testSeedData.users);
    await db.batchInsert('products', testSeedData.products);
    
    console.log(`Test environment ready on port ${server.port}`);
  }, 30000); // Increased timeout for setup
  
  // Individual tests won't need to set up data
  test('Can query users by region', async () => {
    const users = await db.query('users').where('region', 'Europe');
    expect(users.length).toBeGreaterThan(0);
  });
  
  test('Can join users and orders', async () => {
    const results = await db.query('users')
      .join('orders', 'users.id', 'orders.userId')
      .limit(10);
    expect(results[0]).toHaveProperty('orderId');
  });
});
        

Resource Management with afterAll:

describe('File System Tests', () => {
  let tempDir;
  let watcher;
  let dbConnection;
  
  beforeAll(async () => {
    // Create temp directory for file tests
    tempDir = await fs.promises.mkdtemp(path.join(os.tmpdir(), 'test-'));
    
    // Set up a file watcher
    watcher = fs.watch(tempDir, { recursive: true });
    
    // Open database connection
    dbConnection = await createDbConnection();
  });
  
  afterAll(async () => {
    // Clean up in reverse order of creation
    
    // 1. Close database connection
    await dbConnection.close();
    
    // 2. Stop file watcher
    watcher.close();
    
    // 3. Remove all test files
    const files = await fs.promises.readdir(tempDir);
    await Promise.all(
      files.map(file => 
        fs.promises.unlink(path.join(tempDir, file))
      )
    );
    
    // 4. Remove temp directory
    await fs.promises.rmdir(tempDir);
    
    console.log('Cleaned up all test resources');
  }, 15000); // Extended timeout for cleanup
  
  test('Can write and read files', async () => {
    const testFile = path.join(tempDir, 'test.txt');
    await fs.promises.writeFile(testFile, 'test content');
    const content = await fs.promises.readFile(testFile, 'utf8');
    expect(content).toBe('test content');
  });
});
        

describe('Parent', () => {
  beforeAll(() => console.log('1. Parent beforeAll'));
  beforeEach(() => console.log('2. Parent beforeEach'));
  
  describe('Child A', () => {
    beforeAll(() => console.log('3. Child A beforeAll'));
    beforeEach(() => console.log('4. Child A beforeEach'));
    
    test('test 1', () => console.log('5. Child A test 1'));
    
    afterEach(() => console.log('6. Child A afterEach'));
    afterAll(() => console.log('7. Child A afterAll'));
  });
  
  describe('Child B', () => {
    beforeAll(() => console.log('8. Child B beforeAll'));
    beforeEach(() => console.log('9. Child B beforeEach'));
    
    test('test 2', () => console.log('10. Child B test 2'));
    
    afterEach(() => console.log('11. Child B afterEach'));
    afterAll(() => console.log('12. Child B afterAll'));
  });
  
  afterEach(() => console.log('13. Parent afterEach'));
  afterAll(() => console.log('14. Parent afterAll'));
});

// Execution sequence:
// 1. Parent beforeAll
// 3. Child A beforeAll
// 2. Parent beforeEach
// 4. Child A beforeEach
// 5. Child A test 1
// 6. Child A afterEach
// 13. Parent afterEach
// 7. Child A afterAll
// 8. Child B beforeAll
// 2. Parent beforeEach
// 9. Child B beforeEach
// 10. Child B test 2
// 11. Child B afterEach
// 13. Parent afterEach
// 12. Child B afterAll
// 14. Parent afterAll
        

1. Conditional Setup:

describe('Feature tests', () => {
  let setupMode;
  
  beforeAll(() => {
    setupMode = process.env.TEST_MODE || 'default';
  });
  
  beforeEach(() => {
    if (setupMode === 'advanced') {
      // Setup for advanced tests
    } else {
      // Standard setup
    }
  });
  
  // Tests...
});
        

2. Factory Functions within Hooks:

describe('Order processing', () => {
  // Factory function pattern
  const createTestOrder = (override = {}) => ({
    id: 'test-order-1',
    customer: 'test-customer',
    items: [{ id: 'item1', qty: 1 }],
    total: 100,
    ...override
  });
  
  let orderService;
  
  beforeEach(() => {
    orderService = new OrderService();
    
    // Setup different test orders with the factory
    orderService.pendingOrders = [
      createTestOrder(),
      createTestOrder({ id: 'test-order-2', total: 200 })
    ];
  });
  
  test('processes all pending orders', () => {
    orderService.processOrders();
    expect(orderService.pendingOrders).toHaveLength(0);
  });
});
        

Snapshot Testing Implementation:

import renderer from 'react-test-renderer';
import { render } from '@testing-library/react';
import ComplexComponent from '../components/ComplexComponent';

// Using React Test Renderer
test('ComplexComponent renders correctly with renderer', () => {
  const tree = renderer
    .create(<ComplexComponent user={{ name: 'John', role: 'Admin' }} />)
    .toJSON();
  
  expect(tree).toMatchSnapshot();
});

// Using Testing Library
test('ComplexComponent renders correctly with testing-library', () => {
  const { container } = render(
    <ComplexComponent user={{ name: 'John', role: 'Admin' }} />
  );
  
  expect(container).toMatchSnapshot();
});

// For non-React objects:
test('API response structure remains consistent', () => {
  const response = {
    data: { items: [{ id: 1, name: 'Test' }] },
    meta: { pagination: { total: 100 } }
  };
  
  expect(response).toMatchSnapshot();
});