Playwright: Printing Console Logs each time when one of the test fails

Question

I am working with Playwright, Mocha and Chai for my automation project and I was wondering if there is a way for capturing all console logs that appear during a failed automation test execution. Ideally, I would like to print console logs only if a test case fails. I looked in the Playwright documentation and came up with the following idea which I am placing below:

config.printLogs = page => {
page
.on('console', msg => {
  if (msg.type() === 'error')
    console.log(`Error text: "${msg.text()}"`);
.on('pageerror', exception => {
  console.log(`Uncaught exception: "${exception}"`);
.on('requestfailed', request => {
  console.log(request.url() + ' ' + request.failure().errorText);
 });
};

Now I figured that I will do the printing actions only after each executed automated test case would fail so it would something look like this

afterEach(async function () {
if (this.currentTest.state !== 'passed'){
page.screenshotTestIfFailed(this);
config.printLogs(page);
 }
});

I wanted to check if my solution would work, so I tested it on one of our not stable test application where almost any kind of click ends up with 500 errors and some random failed requests. After the execution, or even during the test run when I was looking at terminal, I could not see any captured logs from the console. In my understanding, an example would be something like this:

T1: It should do something -> failed
--> Print all console logs and take a screenshot
T2: It should do something -> failed
--> Print all console logs and take a screenshot
T3: It should do something -> failed
--> Print all console logs and take a screenshot

Instead, I am getting all information regarding failed test cases with taken screenshots, but no logs.

Thanks for any advice and help.

Answer 1

Browser console message/errors can be listened like below at runtime:

const playwright = require("playwright");
 (async () => {
  const browser = await playwright.chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  const errorLogs = []
  page.on("console", (message) => {
    if (message.type() === "error") {
      errorLogs.push(message.text())
    }
  })
  await page.evaluate(() => {
    console.error("hello from the browser")
  })
  console.log(errorLogs)
  await browser.close();
})();

There is also the pageError event which can be used to catch unhandled exceptions which get thrown inside the browser:

   page.on("pageerror", (err) => {
    console.log(err.message)
  })

Source https://playwright.dev/docs/api/class-page/#pageonconsole