How to detect "Uncaught (in promise) TypeError" in Playwright?

Question

I'm using Playwright to test my TypeScript webapp, and I want to ensure no errors are logged to the console. (I want my tests to fail if an error occurs.)

To do so, based on this post, I use the following code:

import { test as base, expect } from '@playwright/test';

export const test = base.extend({
  page: async ({ baseURL, page }, use) => {
    const messages: string[] = [];
    page.on('console', (msg) => {
      // Ignore regular log messages; we are only interested in errors.
      if (msg.type() === 'error') {
        messages.push(`[${msg.type()}] ${msg.text()}`);
      }
    });
    await use(page);
    expect(messages).toStrictEqual([]);
  },
});

export default test;

This code will correctly cause the test to fail if console.error is used in the app.

However, Uncaught (in promise) TypeError is ignored by this check; the test completes successfully even though the following message is logged to the console:

ion-refresher.js:526 Uncaught (in promise) TypeError: ee.componentOnReady is not a function
    at _class._callee8$ (ion-refresher.js:526:21)
    at tryCatch (regeneratorRuntime.js:86:17)
    at Generator._invoke (regeneratorRuntime.js:66:24)
    at Generator.next (regeneratorRuntime.js:117:21)
    at asyncGeneratorStep (asyncToGenerator.js:3:20)
    at _next (asyncToGenerator.js:25:9)
    at asyncToGenerator.js:32:7
    at new Promise (<anonymous>)
    at _class.<anonymous> (asyncToGenerator.js:21:12)
    at _class.connectedCallback (ion-refresher.js:187:51)

I want to catch this kind of error (Uncaught (in promise) TypeError) automatically when running my Playwright tests because it should never occur. How can I do that?

(I tried removing the msg.type() === 'error' check from my code, but that didn't help-- Uncaught (in promise) TypeError do not show up as console errors in Playwright, so where are they?)

Have you had a look at what is called at `ion-refresher.js:526:21`? — stefan judis, Aug 23 '22 at 08:03
@stefanjudis The relevant line is `await contentEl.componentOnReady();`, which is coming from `stenciljs`. But I'm not trying to solve this specific error (it's already fixed upstream); I'm trying to find a way to cause my playwright tests to fail if they occur so I can check for upstream bugs in the future. — Patrick Kenny, Aug 23 '22 at 08:21
If it's a real exception `window.onError` or something might be the way to go. — stefan judis, Aug 23 '22 at 12:06

score 0 · Accepted Answer · edited Feb 04 '23 at 22:29

Based on the comment from @stefan judis, I was able to capture this error by checking for page errors in addition to console errors.

Here's the final code:

    import { test as base, expect } from '@playwright/test';
    
    export const test = base.extend({
      page: async ({ baseURL, page }, use) => {
        const messages: string[] = [];
        page.on('console', (msg) => {
          // Ignore regular log messages; we are only interested in errors.
          if (msg.type() === 'error') {
            messages.push(`[${msg.type()}] ${msg.text()}`);
          }
        });
        // Uncaught (in promise) TypeError + friends are page errors.
        page.on('pageerror', (error) => {
          messages.push(`[${error.name}] ${error.message}`);
        });
        await use(page);
        expect(messages).toStrictEqual([]);
      },
    });
    
    export default test;

How to detect "Uncaught (in promise) TypeError" in Playwright?

1 Answers1