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