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

`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, Jan 10 '23 at 05:15

score 3 · Answer 1 · answered Jan 12 '23 at 22:19

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

score 0 · Answer 2 · answered Mar 23 '23 at 13:09

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

How to console.log in playwright

2 Answers2