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(' { 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); }); 2 Answers
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(' { 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(' { 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); }); 
