Rayrun
← Back to Discord Forum

How to Track of Errors Happened Client Side?

xxx_mlgnoob_xxxposted in #help-playwright
Open in Discord
xxx_mlgnoob_xxx
xxx_mlgnoob_xxx

In my Playwright test, I want to verify that some JavaScript code in a Web Component ran without throwing an error. The problem is... an error that happens in the browser won't interrupt Playwright at all. So Playwright isn't telling me if my component is actually doing what it should be doing.

Is there a way to know whether or not errors have occurred in the browser during a Playwright test?

This thread is trying to answer question "Is there a way to know whether or not errors have occurred in the browser during a Playwright test?"

14 replies

Maybe try running it in the UI mode?

with a --ui flag

and then turn on developer tools how you normally would

xxx_mlgnoob_xxx
xxx_mlgnoob_xxx

But I wouldn’t be able to automate error checking in that case, would I?

Are the errors logged in browser console?

xxx_mlgnoob_xxx
xxx_mlgnoob_xxx

They are, but on(“console”) didn’t seem to respond to that oddly enough

other than that, automatic tracking could be done via automatic fixture https://playwright.dev/docs/test-fixtures#automatic-fixtures

xxx_mlgnoob_xxx
xxx_mlgnoob_xxx

I tried pageerror too. 😅 I can take a look at the fixtures docs

@xxx_mlgnoob_xxx: I believe you can with page.on('console')

I believe you can with page.on('console')

Oh sorry didnt see you mentioned this

xxx_mlgnoob_xxx
xxx_mlgnoob_xxx

No worries!

Hi, strange. I would expect pageerror to work for this in most cases. In v1.38 context.on('weberror', ...) event was added. But I think that will only make a difference with pageerror if you deal with multiple pages (windows/tabs) in the tests.

https://playwright.dev/docs/api/class-browsercontext#browser-context-event-web-error

xxx_mlgnoob_xxx
xxx_mlgnoob_xxx

Sorry guys. This was another user error. 😔 Basically, I forgot that I have to call page.waitForEvent("pageerror") before performing any actions that would cause an error to occur. If I call the method after the event occurs, then the test will try to wait for something that already happened. Smh.

Thanks for the help, everyone. Sorry about the hassle.

Answer

Detecting Errors in Playwright Tests

Yes, you can detect errors in your Playwright tests. Playwright offers several tools to help you identify and handle these errors.

Using Playwright Trace Viewer

One way to detect errors is by using the Playwright trace viewer. You can configure traces in your Playwright config file to run on Continuous Integration (CI) failures. Traces provide a full trace of your tests as a local Progressive Web App (PWA) that can be easily shared.

// playwright.config.ts
module.exports = {
  use: {
    trace: 'on-first-retry',
  },
};

To enable traces locally, use the --trace flag when running your tests.

npx playwright test --trace

Debugging Tests

If you want to debug specific tests, use the --debug flag.

npx playwright test --debug

This opens an inspector window where you can step through your tests, view actionability logs, and edit locators live.

Debugging Across Multiple Browsers

To debug all tests on all browsers, run npx playwright test --debug. This runs each test one by one and opens an inspector window along with a browser window for each test.

Using IDEs for Debugging

Modern IDEs like Visual Studio Code offer built-in support for debugging Playwright tests. You can set breakpoints within your code directly from VS Code's editor interface.

By using these debugging capabilities and tools, you can effectively identify errors that occur in your Playwright tests. For more tips on efficient Playwright test scripts, check out this blog post.

Related Discord Threads

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.