I want to log one of the variables inside the playwright test case but am unable to load the log in developer tools console as I am using a page.on() function

test('largest contentful paint', async ({ page }) => {
  await page.goto('http://localhost:3000/', { waitUntil: 'networkidle' });

  const largestContentfulPaint = await page.evaluate(() => {
    return new Promise((resolve) => {
      new PerformanceObserver((l) => {
        const entries = l.getEntries();
        // the last entry is the largest contentful paint
        const largestPaintEntry = entries.at(-1);
        page.on('console', () => {
          console.log('largestPaintEntry', largestPaintEntry);
        });
        // resolve(largestPaintEntry.startTime);
      }).observe({
        type: 'largest-contentful-paint',
        buffered: true,
      });
    });
  });

  await expect(largestContentfulPaint).toBeLessThan(2500);
});

I want to log one of the variables inside the playwright test case but am unable to load the log in developer tools console as I am using a page.on() function

test('largest contentful paint', async ({ page }) => {
  await page.goto('http://localhost:3000/', { waitUntil: 'networkidle' });

  const largestContentfulPaint = await page.evaluate(() => {
    return new Promise((resolve) => {
      new PerformanceObserver((l) => {
        const entries = l.getEntries();
        // the last entry is the largest contentful paint
        const largestPaintEntry = entries.at(-1);
        page.on('console', () => {
          console.log('largestPaintEntry', largestPaintEntry);
        });
        // resolve(largestPaintEntry.startTime);
      }).observe({
        type: 'largest-contentful-paint',
        buffered: true,
      });
    });
  });

  await expect(largestContentfulPaint).toBeLessThan(2500);
});

• javascript
• reactjs
• playwright
• playwright-test

• page.on should be added once, up front, before you do anything that triggers the log you want to see. page.on is a Puppeteer/Node thing, but you're running it in the browser where page doesn't exist. – ggorlen Commented Jan 10, 2023 at 5:15
• This is not an answer but may be helpful: In case you just want to read the console output you can see it under the "Log" tab in the playwright UI mode: npx playwright test --ui – sunyata Commented Dec 6, 2024 at 15:00

2 Answers 2

As mentioned in a comment, the problem is that you must attach the page.on event handler outside the page.evaluate() callback.

// @ts-check
const { test, expect } = require('@playwright/test');

test('largest contentful paint', async ({ page }) => {
  await page.goto('https://www.stefanjudis.com/', { waitUntil: 'networkidle' });

  page.on('console', (msg) => {
    console.log(msg);
  });

  const largestContentfulPaint = await page.evaluate(() => {
    return new Promise((resolve) => {
      new PerformanceObserver((l) => {
        const entries = l.getEntries();
        // the last entry is the largest contentful paint
        const largestPaintEntry = entries.at(-1);
        console.log(largestPaintEntry.startTime)
      }).observe({
        type: 'largest-contentful-paint',
        buffered: true,
      });
    });
  });

  await expect(largestContentfulPaint).toBeLessThan(2500);
});

You need to forward it:

const { test, expect } = require('@playwright/test');

test('largest contentful paint', async ({ page }) => {
  await page.goto('https://www.stefanjudis.com/', { waitUntil: 'networkidle' });

  page.on('console', async (msg) => {
        const msgArgs = msg.args();
        const logValues = await Promise.all(msgArgs.map(async arg => await arg.jsonValue()));
        console.log(...logValues);
    });

  const largestContentfulPaint = await page.evaluate(() => {
    return new Promise((resolve) => {
      new PerformanceObserver((l) => {
        const entries = l.getEntries();
        // the last entry is the largest contentful paint
        const largestPaintEntry = entries.at(-1);
        console.log(largestPaintEntry.startTime)
      }).observe({
        type: 'largest-contentful-paint',
        buffered: true,
      });
    });
  });

  await expect(largestContentfulPaint).toBeLessThan(2500);
});