How to console.log in playwright

Question

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);
});

Answer 1

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);
});