如何console.log in playwright

Question

我想记录剧作家测试用例中的变量之一，但无法在开发人员工具控制台中加载日志，因为我正在使用 page.on() 函数

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

正如评论中提到的，问题是您必须将page.on事件处理程序附加到page.evaluate()回调之外。

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