Logging Variable in Playwright Test Case

Product Support
, ,
#1

What is the syntax for logging to the console in Playwright test cases?

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

  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);
});```
#2

Oh, I’ve encountered this issue before. In your code, you’re right to want to log the variable inside the Playwright test case using console.log, but handling it within page.on('console') isn’t quite the right approach. Let’s tidy this up a bit. One approach is to resolve the promise with largestPaintEntry and then log it outside the page.evaluate() function. Here’s how you can do it:

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);
        resolve(largestPaintEntry.startTime);
      }).observe({
        type: 'largest-contentful-paint',
        buffered: true,
      });
    });
  });

  console.log('largestPaintEntry', largestContentfulPaint);
  await expect(largestContentfulPaint).toBeLessThan(2500);
});

This way, you ensure that you’re logging the variable outside the asynchronous context, making it easier to track and debug.

#3

Hey, another way to handle this is by utilizing the ‘metrics’ event directly on the page object. It simplifies things compared to using PerformanceObserver. Here’s how:

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

  page.on('metrics', (metrics) => {
    if (metrics.title === 'LargestContentfulPaint') {
      console.log('largestPaintEntry', metrics.metrics.LargestContentfulPaint);
    }
  });

  await expect(page).toMatch('some text');
});

By listening to the ‘metrics’ event, you can directly access the ‘LargestContentfulPaint’ metric and log it without the need for additional promises or event handlers.

#4

Adding a custom event and then handling it with page.on('console') is a neat trick. Here’s how you can do it:

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);
        console.log('LargestPaintEntry', largestPaintEntry);
        resolve(largestPaintEntry.startTime);
      }).observe({
        type: 'largest-contentful-paint',
        buffered: true,
      });
    });
  });

  await page.evaluate(() => {
    console.log('largestContentfulPaint', largestContentfulPaint);
  });

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

This way, you’re firing a custom event from page.evaluate(), listening for it using page.on('console'), and then logging the variable accordingly. It’s a bit more involved but gives you finer control over logging within the context of Playwright test cases.