1# Browser Console & JavaScript Error Handling
2 
3## Table of Contents
4 
51. [Capturing Console Messages](#capturing-console-messages)
62. [Failing on Console Errors](#failing-on-console-errors)
73. [JavaScript Error Detection](#javascript-error-detection)
84. [Monitoring Warnings](#monitoring-warnings)
95. [Console Fixtures](#console-fixtures)
10 
11## Capturing Console Messages
12 
13### Basic Console Capture
14 
15```typescript
16test("capture console logs", async ({ page }) => {
17  const logs: string[] = [];
18 
19  page.on("console", (msg) => {
20    logs.push(`${msg.type()}: ${msg.text()}`);
21  });
22 
23  await page.goto("/");
24 
25  // Check what was logged
26  console.log("Captured logs:", logs);
27});
28```
29 
30### Capture by Type
31 
32```typescript
33test("capture specific console types", async ({ page }) => {
34  const errors: string[] = [];
35  const warnings: string[] = [];
36  const infos: string[] = [];
37 
38  page.on("console", (msg) => {
39    switch (msg.type()) {
40      case "error":
41        errors.push(msg.text());
42        break;
43      case "warning":
44        warnings.push(msg.text());
45        break;
46      case "info":
47      case "log":
48        infos.push(msg.text());
49        break;
50    }
51  });
52 
53  await page.goto("/dashboard");
54 
55  expect(errors).toHaveLength(0);
56  console.log("Warnings:", warnings);
57});
58```
59 
60### Capture with Stack Trace
61 
62```typescript
63test("capture errors with location", async ({ page }) => {
64  const errors: { message: string; location?: string }[] = [];
65 
66  page.on("console", async (msg) => {
67    if (msg.type() === "error") {
68      const location = msg.location();
69      errors.push({
70        message: msg.text(),
71        location: location
72          ? `${location.url}:${location.lineNumber}`
73          : undefined,
74      });
75    }
76  });
77 
78  await page.goto("/buggy-page");
79 
80  // Log errors with source location
81  errors.forEach((e) => {
82    console.log(`Error: ${e.message}`);
83    if (e.location) console.log(`  at ${e.location}`);
84  });
85});
86```
87 
88## Failing on Console Errors
89 
90### Fail Test on Any Error
91 
92```typescript
93test("no console errors allowed", async ({ page }) => {
94  const errors: string[] = [];
95 
96  page.on("console", (msg) => {
97    if (msg.type() === "error") {
98      errors.push(msg.text());
99    }
100  });
101 
102  await page.goto("/");
103  await page.getByRole("button", { name: "Load Data" }).click();
104 
105  // Fail if any console errors
106  expect(errors, `Console errors found:\n${errors.join("\n")}`).toHaveLength(0);
107});
108```
109 
110### Fail with Allowed Exceptions
111 
112```typescript
113test("no unexpected console errors", async ({ page }) => {
114  const allowedErrors = [
115    /Failed to load resource.*favicon/,
116    /ResizeObserver loop/,
117  ];
118 
119  const unexpectedErrors: string[] = [];
120 
121  page.on("console", (msg) => {
122    if (msg.type() === "error") {
123      const text = msg.text();
124      const isAllowed = allowedErrors.some((pattern) => pattern.test(text));
125      if (!isAllowed) {
126        unexpectedErrors.push(text);
127      }
128    }
129  });
130 
131  await page.goto("/");
132 
133  expect(
134    unexpectedErrors,
135    `Unexpected console errors:\n${unexpectedErrors.join("\n")}`,
136  ).toHaveLength(0);
137});
138```
139 
140### Auto-Fail Fixture
141 
142```typescript
143// fixtures/console.fixture.ts
144type ConsoleFixtures = {
145  failOnConsoleError: void;
146};
147 
148export const test = base.extend<ConsoleFixtures>({
149  failOnConsoleError: [
150    async ({ page }, use, testInfo) => {
151      const errors: string[] = [];
152 
153      page.on("console", (msg) => {
154        if (msg.type() === "error") {
155          errors.push(msg.text());
156        }
157      });
158 
159      await use();
160 
161      // After test, check for errors
162      if (errors.length > 0) {
163        testInfo.annotations.push({
164          type: "console-errors",
165          description: errors.join("\n"),
166        });
167        throw new Error(`Console errors detected:\n${errors.join("\n")}`);
168      }
169    },
170    { auto: true }, // Runs for every test
171  ],
172});
173```
174 
175## JavaScript Error Detection
176 
177### Catch Uncaught Exceptions
178 
179```typescript
180test("no uncaught exceptions", async ({ page }) => {
181  const pageErrors: Error[] = [];
182 
183  page.on("pageerror", (error) => {
184    pageErrors.push(error);
185  });
186 
187  await page.goto("/");
188  await page.getByRole("button", { name: "Trigger Action" }).click();
189 
190  expect(
191    pageErrors,
192    `Uncaught exceptions:\n${pageErrors.map((e) => e.message).join("\n")}`,
193  ).toHaveLength(0);
194});
195```
196 
197### Capture Error Details
198 
199```typescript
200test("capture JS error details", async ({ page }) => {
201  const errors: { message: string; stack?: string }[] = [];
202 
203  page.on("pageerror", (error) => {
204    errors.push({
205      message: error.message,
206      stack: error.stack,
207    });
208  });
209 
210  await page.goto("/error-page");
211 
212  if (errors.length > 0) {
213    console.log("JavaScript errors:");
214    errors.forEach((e) => {
215      console.log(`  Message: ${e.message}`);
216      console.log(`  Stack: ${e.stack}`);
217    });
218  }
219});
220```
221 
222### Test Error Boundary Triggers
223 
224```typescript
225test("error boundary catches render error", async ({ page }) => {
226  let errorCaught = false;
227 
228  page.on("pageerror", () => {
229    // Note: React error boundaries catch errors before they become pageerrors
230    // This would only fire for unhandled errors
231    errorCaught = true;
232  });
233 
234  // Trigger component error via props
235  await page.route(
236    "**/api/data",
237    (route) => route.fulfill({ json: null }), // Will cause "cannot read property of null"
238  );
239 
240  await page.goto("/dashboard");
241 
242  // Error boundary should show fallback, not crash
243  await expect(page.getByText("Something went wrong")).toBeVisible();
244  expect(errorCaught).toBe(false); // Error was caught by boundary
245});
246```
247 
248## Monitoring Warnings
249 
250### Capture Deprecation Warnings
251 
252```typescript
253test("no deprecation warnings", async ({ page }) => {
254  const deprecations: string[] = [];
255 
256  page.on("console", (msg) => {
257    const text = msg.text();
258    if (
259      msg.type() === "warning" &&
260      (text.includes("deprecated") || text.includes("Deprecation"))
261    ) {
262      deprecations.push(text);
263    }
264  });
265 
266  await page.goto("/");
267 
268  if (deprecations.length > 0) {
269    console.warn("Deprecation warnings found:");
270    deprecations.forEach((d) => console.warn(`  - ${d}`));
271  }
272 
273  // Optionally fail
274  // expect(deprecations).toHaveLength(0);
275});
276```
277 
278### React Development Warnings
279 
280```typescript
281test("no React warnings", async ({ page }) => {
282  const reactWarnings: string[] = [];
283 
284  page.on("console", (msg) => {
285    const text = msg.text();
286    if (
287      msg.type() === "warning" &&
288      (text.includes("Warning:") || text.includes("React"))
289    ) {
290      reactWarnings.push(text);
291    }
292  });
293 
294  await page.goto("/");
295 
296  // Common React warnings to check
297  const criticalWarnings = reactWarnings.filter(
298    (w) =>
299      w.includes("Each child in a list should have a unique") ||
300      w.includes("Cannot update a component") ||
301      w.includes("Can't perform a React state update"),
302  );
303 
304  expect(
305    criticalWarnings,
306    `React warnings:\n${criticalWarnings.join("\n")}`,
307  ).toHaveLength(0);
308});
309```
310 
311## Console Fixtures
312 
313### Comprehensive Console Fixture
314 
315```typescript
316// fixtures/console.fixture.ts
317type ConsoleMessage = {
318  type: string;
319  text: string;
320  location?: { url: string; line: number };
321  timestamp: number;
322};
323 
324type ConsoleFixtures = {
325  consoleMessages: ConsoleMessage[];
326  getConsoleErrors: () => ConsoleMessage[];
327  getConsoleWarnings: () => ConsoleMessage[];
328  assertNoErrors: (allowedPatterns?: RegExp[]) => void;
329};
330 
331export const test = base.extend<ConsoleFixtures>({
332  consoleMessages: async ({ page }, use) => {
333    const messages: ConsoleMessage[] = [];
334 
335    page.on("console", (msg) => {
336      const location = msg.location();
337      messages.push({
338        type: msg.type(),
339        text: msg.text(),
340        location: location
341          ? { url: location.url, line: location.lineNumber }
342          : undefined,
343        timestamp: Date.now(),
344      });
345    });
346 
347    await use(messages);
348  },
349 
350  getConsoleErrors: async ({ consoleMessages }, use) => {
351    await use(() => consoleMessages.filter((m) => m.type === "error"));
352  },
353 
354  getConsoleWarnings: async ({ consoleMessages }, use) => {
355    await use(() => consoleMessages.filter((m) => m.type === "warning"));
356  },
357 
358  assertNoErrors: async ({ getConsoleErrors }, use) => {
359    await use((allowedPatterns = []) => {
360      const errors = getConsoleErrors();
361      const unexpected = errors.filter(
362        (e) => !allowedPatterns.some((p) => p.test(e.text)),
363      );
364 
365      if (unexpected.length > 0) {
366        throw new Error(
367          `Unexpected console errors:\n${unexpected.map((e) => e.text).join("\n")}`,
368        );
369      }
370    });
371  },
372});
373 
374// Usage
375test("page loads without errors", async ({ page, assertNoErrors }) => {
376  await page.goto("/dashboard");
377  await page.getByRole("button", { name: "Load" }).click();
378 
379  assertNoErrors([/favicon/]); // Allow favicon errors
380});
381```
382 
383### Attach Console to Report
384 
385```typescript
386test("capture console for debugging", async ({ page }, testInfo) => {
387  const logs: string[] = [];
388 
389  page.on("console", (msg) => {
390    logs.push(`[${msg.type()}] ${msg.text()}`);
391  });
392 
393  page.on("pageerror", (error) => {
394    logs.push(`[EXCEPTION] ${error.message}`);
395  });
396 
397  await page.goto("/");
398  // ... test actions
399 
400  // Attach console log to test report
401  await testInfo.attach("console-log", {
402    body: logs.join("\n"),
403    contentType: "text/plain",
404  });
405});
406```
407 
408## Anti-Patterns to Avoid
409 
410| Anti-Pattern               | Problem                    | Solution                    |
411| -------------------------- | -------------------------- | --------------------------- |
412| Ignoring console errors    | Bugs go unnoticed          | Check for errors in tests   |
413| Too strict error checking  | Tests fail on minor issues | Allow known/expected errors |
414| Not capturing stack traces | Hard to debug              | Include location info       |
415| Checking only at end       | Miss errors during actions | Capture continuously        |
416 
417## Related References
418 
419- **Debugging**: See [debugging.md](debugging.md) for troubleshooting
420- **Error Testing**: See [error-testing.md](error-testing.md) for error scenarios
421