Performance & Debugging

/**
 * Code coverage collection
 */
class Coverage {
  /** Start JavaScript coverage collection */
  startJSCoverage(options?: JSCoverageOptions): Promise<void>;
  
  /** Stop JavaScript coverage and get results */
  stopJSCoverage(): Promise<JSCoverageEntry[]>;
  
  /** Start CSS coverage collection */
  startCSSCoverage(options?: CSSCoverageOptions): Promise<void>;
  
  /** Stop CSS coverage and get results */
  stopCSSCoverage(): Promise<CSSCoverageEntry[]>;
}

interface JSCoverageOptions {
  /** Whether to reset coverage on navigation */
  resetOnNavigation?: boolean;
  /** Whether to report anonymous scripts */
  reportAnonymousScripts?: boolean;
  /** Whether to include raw V8 script coverage */
  includeRawScriptCoverage?: boolean;
}

interface CSSCoverageOptions {
  /** Whether to reset coverage on navigation */
  resetOnNavigation?: boolean;
}

interface JSCoverageEntry {
  /** Script URL */
  url: string;
  /** Script text */
  text: string;
  /** Coverage ranges */
  ranges: CoverageRange[];
}

interface CSSCoverageEntry {
  /** Stylesheet URL */
  url: string;
  /** Stylesheet text */
  text: string;
  /** Coverage ranges */
  ranges: CoverageRange[];
}

interface CoverageRange {
  /** Start offset */
  start: number;
  /** End offset */
  end: number;
  /** Number of times executed */
  count: number;
}

// Collect JavaScript coverage
await page.coverage.startJSCoverage();
await page.goto("https://example.com");
await page.click("#button");

const jsCoverage = await page.coverage.stopJSCoverage();
console.log(`Covered ${jsCoverage.length} JS files`);

// Collect CSS coverage
await page.coverage.startCSSCoverage();
await page.goto("https://example.com");

const cssCoverage = await page.coverage.stopCSSCoverage();
const totalBytes = cssCoverage.reduce((sum, entry) => sum + entry.text.length, 0);
const usedBytes = cssCoverage.reduce((sum, entry) => 
  sum + entry.ranges.reduce((rangeSum, range) => rangeSum + range.end - range.start, 0), 0
);
console.log(`CSS Usage: ${usedBytes / totalBytes * 100}%`);

/**
 * Performance tracing
 */
class Tracing {
  /** Start performance trace */
  start(options?: TracingOptions): Promise<void>;
  
  /** Stop trace and get data */
  stop(): Promise<Uint8Array>;
}

interface TracingOptions {
  /** Path to save trace file */
  path?: string;
  /** Categories to include in trace */
  categories?: string[];
  /** Whether to capture screenshots */
  screenshots?: boolean;
}

// Start tracing
await page.tracing.start({
  path: "trace.json",
  screenshots: true,
  categories: ["devtools.timeline"]
});

// Perform actions
await page.goto("https://example.com");
await page.click("#load-data");
await page.waitForSelector(".results");

// Stop tracing
const traceBuffer = await page.tracing.stop();
console.log(`Trace saved: ${traceBuffer.length} bytes`);

/**
 * Accessibility tree access
 */
class Accessibility {
  /** Get accessibility tree snapshot */
  snapshot(options?: SnapshotOptions): Promise<SerializedAXNode | null>;
}

interface SnapshotOptions {
  /** Root element to snapshot */
  root?: ElementHandle;
  /** Whether to fetch inline styles */
  interestingOnly?: boolean;
}

interface SerializedAXNode {
  /** Node role */
  role?: string;
  /** Node name */
  name?: string;
  /** Node value */
  value?: string | number;
  /** Node description */
  description?: string;
  /** Keyboard shortcuts */
  keyshortcuts?: string;
  /** Role description */
  roledescription?: string;
  /** Value text */
  valuetext?: string;
  /** Whether disabled */
  disabled?: boolean;
  /** Whether expanded */
  expanded?: boolean;
  /** Whether focusable */
  focusable?: boolean;
  /** Whether focused */
  focused?: boolean;
  /** Whether modal */
  modal?: boolean;
  /** Whether multiline */
  multiline?: boolean;
  /** Whether multiselectable */
  multiselectable?: boolean;
  /** Whether readonly */
  readonly?: boolean;
  /** Whether required */
  required?: boolean;
  /** Whether selected */
  selected?: boolean;
  /** Whether checked */
  checked?: boolean | "mixed";
  /** Whether pressed */
  pressed?: boolean | "mixed";
  /** Hierarchical level */
  level?: number;
  /** Value min */
  valuemin?: number;
  /** Value max */
  valuemax?: number;
  /** Autocomplete type */
  autocomplete?: string;
  /** Has popup */
  haspopup?: string;
  /** Invalid state */
  invalid?: string;
  /** Orientation */
  orientation?: string;
  /** Child nodes */
  children?: SerializedAXNode[];
}

// Get full accessibility tree
const snapshot = await page.accessibility.snapshot();
if (snapshot) {
  console.log(`Root element: ${snapshot.role} "${snapshot.name}"");
  console.log(`Children: ${snapshot.children?.length || 0}`);
}

// Get accessibility info for specific element
const button = await page.$("#submit");
const buttonA11y = await page.accessibility.snapshot({ root: button });
if (buttonA11y) {
  console.log(`Button role: ${buttonA11y.role}`);
  console.log(`Button name: ${buttonA11y.name}`);
  console.log(`Button focusable: ${buttonA11y.focusable}`);
  console.log(`Button disabled: ${buttonA11y.disabled}`);
}

/**
 * Create CDP session for low-level DevTools Protocol access
 */
createCDPSession(): Promise<CDPSession>;

/**
 * CDP session for direct protocol communication
 */
class CDPSession {
  /** Send CDP command */
  send<T>(method: string, params?: object): Promise<T>;
  
  /** Detach from target */
  detach(): Promise<void>;
  
  /** Get session ID */
  id(): string;
}

// Create CDP session
const client = await page.createCDPSession();

// Enable runtime domain
await client.send("Runtime.enable");

// Evaluate expression
const result = await client.send("Runtime.evaluate", {
  expression: "1 + 2"
});
console.log("Result:", result.result.value); // 3

// Enable performance monitoring
await client.send("Performance.enable");
const metrics = await client.send("Performance.getMetrics");
console.log("Performance metrics:", metrics.metrics);

// Clean up
await client.detach();