0
# Performance & Debugging
1

2
Performance tracing, code coverage collection, and accessibility tree inspection for comprehensive testing and optimization.
3

4
## Capabilities
5

6
### Code Coverage
7

8
Collect JavaScript and CSS code coverage data.
9

10
```typescript { .api }
11
/**
12
 * Code coverage collection
13
 */
14
class Coverage {
15
  /** Start JavaScript coverage collection */
16
  startJSCoverage(options?: JSCoverageOptions): Promise<void>;
17
  
18
  /** Stop JavaScript coverage and get results */
19
  stopJSCoverage(): Promise<JSCoverageEntry[]>;
20
  
21
  /** Start CSS coverage collection */
22
  startCSSCoverage(options?: CSSCoverageOptions): Promise<void>;
23
  
24
  /** Stop CSS coverage and get results */
25
  stopCSSCoverage(): Promise<CSSCoverageEntry[]>;
26
}
27

28
interface JSCoverageOptions {
29
  /** Whether to reset coverage on navigation */
30
  resetOnNavigation?: boolean;
31
  /** Whether to report anonymous scripts */
32
  reportAnonymousScripts?: boolean;
33
  /** Whether to include raw V8 script coverage */
34
  includeRawScriptCoverage?: boolean;
35
}
36

37
interface CSSCoverageOptions {
38
  /** Whether to reset coverage on navigation */
39
  resetOnNavigation?: boolean;
40
}
41

42
interface JSCoverageEntry {
43
  /** Script URL */
44
  url: string;
45
  /** Script text */
46
  text: string;
47
  /** Coverage ranges */
48
  ranges: CoverageRange[];
49
}
50

51
interface CSSCoverageEntry {
52
  /** Stylesheet URL */
53
  url: string;
54
  /** Stylesheet text */
55
  text: string;
56
  /** Coverage ranges */
57
  ranges: CoverageRange[];
58
}
59

60
interface CoverageRange {
61
  /** Start offset */
62
  start: number;
63
  /** End offset */
64
  end: number;
65
  /** Number of times executed */
66
  count: number;
67
}
68
```
69

70
**Usage Examples:**
71

72
```typescript
73
// Collect JavaScript coverage
74
await page.coverage.startJSCoverage();
75
await page.goto("https://example.com");
76
await page.click("#button");
77

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

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

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

93
### Performance Tracing
94

95
Record performance traces for analysis.
96

97
```typescript { .api }
98
/**
99
 * Performance tracing
100
 */
101
class Tracing {
102
  /** Start performance trace */
103
  start(options?: TracingOptions): Promise<void>;
104
  
105
  /** Stop trace and get data */
106
  stop(): Promise<Uint8Array>;
107
}
108

109
interface TracingOptions {
110
  /** Path to save trace file */
111
  path?: string;
112
  /** Categories to include in trace */
113
  categories?: string[];
114
  /** Whether to capture screenshots */
115
  screenshots?: boolean;
116
}
117
```
118

119
**Usage Examples:**
120

121
```typescript
122
// Start tracing
123
await page.tracing.start({
124
  path: "trace.json",
125
  screenshots: true,
126
  categories: ["devtools.timeline"]
127
});
128

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

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

139
### Accessibility Tree
140

141
Inspect accessibility tree for testing compliance.
142

143
```typescript { .api }
144
/**
145
 * Accessibility tree access
146
 */
147
class Accessibility {
148
  /** Get accessibility tree snapshot */
149
  snapshot(options?: SnapshotOptions): Promise<SerializedAXNode | null>;
150
}
151

152
interface SnapshotOptions {
153
  /** Root element to snapshot */
154
  root?: ElementHandle;
155
  /** Whether to fetch inline styles */
156
  interestingOnly?: boolean;
157
}
158

159
interface SerializedAXNode {
160
  /** Node role */
161
  role?: string;
162
  /** Node name */
163
  name?: string;
164
  /** Node value */
165
  value?: string | number;
166
  /** Node description */
167
  description?: string;
168
  /** Keyboard shortcuts */
169
  keyshortcuts?: string;
170
  /** Role description */
171
  roledescription?: string;
172
  /** Value text */
173
  valuetext?: string;
174
  /** Whether disabled */
175
  disabled?: boolean;
176
  /** Whether expanded */
177
  expanded?: boolean;
178
  /** Whether focusable */
179
  focusable?: boolean;
180
  /** Whether focused */
181
  focused?: boolean;
182
  /** Whether modal */
183
  modal?: boolean;
184
  /** Whether multiline */
185
  multiline?: boolean;
186
  /** Whether multiselectable */
187
  multiselectable?: boolean;
188
  /** Whether readonly */
189
  readonly?: boolean;
190
  /** Whether required */
191
  required?: boolean;
192
  /** Whether selected */
193
  selected?: boolean;
194
  /** Whether checked */
195
  checked?: boolean | "mixed";
196
  /** Whether pressed */
197
  pressed?: boolean | "mixed";
198
  /** Hierarchical level */
199
  level?: number;
200
  /** Value min */
201
  valuemin?: number;
202
  /** Value max */
203
  valuemax?: number;
204
  /** Autocomplete type */
205
  autocomplete?: string;
206
  /** Has popup */
207
  haspopup?: string;
208
  /** Invalid state */
209
  invalid?: string;
210
  /** Orientation */
211
  orientation?: string;
212
  /** Child nodes */
213
  children?: SerializedAXNode[];
214
}
215
```
216

217
**Usage Examples:**
218

219
```typescript
220
// Get full accessibility tree
221
const snapshot = await page.accessibility.snapshot();
222
if (snapshot) {
223
  console.log(`Root element: ${snapshot.role} "${snapshot.name}"");
224
  console.log(`Children: ${snapshot.children?.length || 0}`);
225
}
226

227
// Get accessibility info for specific element
228
const button = await page.$("#submit");
229
const buttonA11y = await page.accessibility.snapshot({ root: button });
230
if (buttonA11y) {
231
  console.log(`Button role: ${buttonA11y.role}`);
232
  console.log(`Button name: ${buttonA11y.name}`);
233
  console.log(`Button focusable: ${buttonA11y.focusable}`);
234
  console.log(`Button disabled: ${buttonA11y.disabled}`);
235
}
236
```
237

238
### Development Tools
239

240
Access browser developer tools functionality.
241

242
```typescript { .api }
243
/**
244
 * Create CDP session for low-level DevTools Protocol access
245
 */
246
createCDPSession(): Promise<CDPSession>;
247

248
/**
249
 * CDP session for direct protocol communication
250
 */
251
class CDPSession {
252
  /** Send CDP command */
253
  send<T>(method: string, params?: object): Promise<T>;
254
  
255
  /** Detach from target */
256
  detach(): Promise<void>;
257
  
258
  /** Get session ID */
259
  id(): string;
260
}
261
```
262

263
**Usage Examples:**
264

265
```typescript
266
// Create CDP session
267
const client = await page.createCDPSession();
268

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

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

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

283
// Clean up
284
await client.detach();
285
```