CODEWITHSUNDEEP
reactjstypescriptplaywrightlargest-contentful-paint
Rahul Krishna
Rahul Krishna

Reputation: 1

How to find the LCP of a react app using playwright with typescript?

Need to get the Largest Contentful paint of a react app using playwright with typescript

This is for web performance testing and should be the exact value

I tried https://web.dev/articles/lcp#measure-lcp-in-javascript and implemented the same using Typescript

But we need to know, if we have something else, I feel this value is different from the value what get after checking in the performance tab

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

Upvotes: 0

Views: 177

Answers (0)

Related Questions