如何使用带有 typescript 的 playwright 查找 react 应用程序的 LCP？

需要获取使用 playwright 和 typescript 的 react 应用程序的最大 Contentful 画面

这是用于网络性能测试的，应该是精确的值

我尝试了 https://web.dev/articles/lcp#measure-lcp-in-javascript 并使用 Typescript 实现了相同的功能

但是我们需要知道，我们是否还有其他东西

 return page.evaluate(() => {
    return new Promise<PerformancePaintTiming>((resolve) => {
      new PerformanceObserver((entryList) => {
        const lcpEntry = entryList.getEntries().find(entry => entry.entryType === 'largest-contentful-paint')；
        if (lcpEntry) resolve(lcpEntry as PerformancePaintTiming)；
      }).observe({ type: 'largest-contentful-paint', buffered: true })；
    });
  });

你尝试的方法来测量 Largest Contentful Paint (LCP) 使用 PerformanceObserver 是正确的，并且是获取这个指标的推荐方法。但是，有一些 Playwright 特定的技巧可以帮助你更可靠、准确地获得这个数值：

1. 使用 page.waitForLoadState 确保页面加载完成

PerformanceObserver 会在页面加载过程中报告 LCP 值的变化。为了确保你获取的是最终的 LCP 值，你需要等待页面加载完成。可以使用 Playwright 的 page.waitForLoadState 方法来做到这一点：

await page.goto('https://your-react-app.com');
await page.waitForLoadState('networkidle'); // 或者 'load'，取决于你的应用

const lcp = await page.evaluate(() => {
  return new Promise<PerformancePaintTiming>((resolve) => {
    new PerformanceObserver((entryList) => {
      const lcpEntry = entryList.getEntries().find(entry => entry.entryType === 'largest-contentful-paint');
      if (lcpEntry) resolve(lcpEntry as PerformancePaintTiming);
    }).observe({ type: 'largest-contentful-paint', buffered: true });
  });
});

console.log(lcp.startTime + lcp.duration); // 打印 LCP 时间戳

2. 使用 page.metrics 获取更全面的性能指标

Playwright 的 page.metrics 方法可以提供更全面的性能指标，包括 LCP。这个方法返回一个包含各种指标的对象，例如：

const metrics = await page.metrics();
console.log(metrics.LargestContentfulPaint); // 打印 LCP 时间戳

3. 注意缓存的影响

浏览器缓存会影响 LCP 值。为了获得更准确的测试结果，你需要在每次测试前清除浏览器缓存，或者使用 Playwright 的隐身模式。

4. 进行多次测试并取平均值

网络条件和服务器负载会影响 LCP 值。为了获得更可靠的结果，建议进行多次测试并取平均值。

总结

使用 PerformanceObserver 结合 Playwright 的 page.waitForLoadState 和 page.metrics 方法可以帮助你准确地测量 React 应用的 LCP。同时，需要注意缓存的影响并进行多次测试以获得更可靠的结果。