Interactive Test Development

/**
 * Opens Cypress GUI for interactive testing
 * @param options - Configuration options for the GUI
 * @returns Promise that resolves when the GUI is closed
 */
function open(options?: Partial<CypressOpenOptions>): Promise<void>;

interface CypressOpenOptions {
  /** Specify browser to run tests in, either by name or by filesystem path */
  browser: string;
  /** Open Cypress in detached mode */
  detached: boolean;
  /** Run in global mode */
  global: boolean;
  /** Override default port */
  port: number;
  /** Specify configuration */
  config: ConfigOptions;
  /** Path to the config file to be used */
  configFile: string;
  /** Specify environment variables */
  env: object;
  /** Path to a specific project */
  project: string;
  /** Specify the type of tests to execute */
  testingType: 'e2e' | 'component';
}

const cypress = require('cypress');

// Open with default settings
await cypress.open();

// Open for component testing
await cypress.open({
  testingType: 'component'
});

// Open with custom browser and configuration
await cypress.open({
  browser: 'firefox',
  env: {
    apiUrl: 'http://localhost:3001/api'
  },
  config: {
    baseUrl: 'http://localhost:3000',
    viewportWidth: 1280,
    viewportHeight: 720
  }
});

// Open specific project
await cypress.open({
  project: './my-app',
  testingType: 'e2e'
});

// Supported browser types
type BrowserName = 'electron' | 'chrome' | 'chromium' | 'firefox' | 'edge' | string;

interface Browser {
  /** Short browser name */
  name: BrowserName;
  /** The underlying engine for this browser */
  family: 'chromium' | 'firefox' | 'webkit';
  /** The release channel of the browser */
  channel: 'stable' | 'canary' | 'beta' | 'dev' | 'nightly' | string;
  /** Human-readable display name */
  displayName: string;
  /** Browser version */
  version: string;
  /** Full path to the browser executable */
  path: string;
  /** Major version number */
  majorVersion: number;
  /** Whether this browser supports headless mode */
  isHeadless: boolean;
  /** Whether this browser supports headed mode */
  isHeaded: boolean;
}

// Open with specific port for CI/CD integration
await cypress.open({
  port: 8080,
  detached: true // Allows the process to continue running
});

// Open with comprehensive configuration
await cypress.open({
  testingType: 'e2e',
  browser: 'electron',
  config: {
    baseUrl: 'https://staging.example.com',
    defaultCommandTimeout: 8000,
    requestTimeout: 10000,
    responseTimeout: 15000,
    video: false, // Disable video recording for development
    screenshotOnRunFailure: true
  },
  env: {
    environment: 'staging',
    username: 'test-user',
    apiKey: process.env.STAGING_API_KEY
  }
});

// Global mode for system-wide Cypress installation
await cypress.open({
  global: true,
  project: '.' // Use current directory as project
});

interface ConfigOptions {
  /** Base URL for cy.visit() and cy.request() commands */
  baseUrl?: string;
  /** Time to wait for a command to complete */
  defaultCommandTimeout?: number;
  /** Time to wait for cy.request() */
  requestTimeout?: number;
  /** Time to wait for cy.visit() to load */
  responseTimeout?: number;
  /** Default viewport width */
  viewportWidth?: number;
  /** Default viewport height */
  viewportHeight?: number;
  /** Whether to record videos of test runs */
  video?: boolean;
  /** Whether to take screenshots on test failure */
  screenshotOnRunFailure?: boolean;
  /** Whether to enforce Chrome's web security */
  chromeWebSecurity?: boolean;
  /** E2E specific configuration */
  e2e?: E2EOptions;
  /** Component testing specific configuration */
  component?: ComponentOptions;
}

// Example with environment variables
await cypress.open({
  env: {
    // API endpoints
    apiUrl: 'http://localhost:3001/api',
    graphqlUrl: 'http://localhost:3001/graphql',
    
    // Authentication
    username: 'cypress-user',
    password: 'cypress-pass',
    
    // Feature flags
    enableNewFeature: true,
    debugMode: false,
    
    // Test data
    testDataPath: './cypress/fixtures/test-data.json'
  }
});

// In your test files
const apiUrl = Cypress.env('apiUrl');
const username = Cypress.env('username');