Is it useful for performance testing to catch FPS drops within Playwright or Puppeteer?

Question

I’m curious if running an FPS counter in a Playwright/Puppeteer test suite that throws when the FPS drops below a threshold, like 60fps, is that a useful canary to alert when a part of the interface needs performance work.

Here’s an example of something like the FPS counter I’m wanting to implement within the browser context:

// Options
const decimalPlaces    = 2;
const updateEachSecond = 1;

// Cache values
const decimalPlacesRatio = Math.pow(10, decimalPlaces);
let timeMeasurements     = [];

// Final output
let fps = 0;

const tick = function() {
  timeMeasurements.push(performance.now());

  const msPassed = timeMeasurements[timeMeasurements.length - 1] - timeMeasurements[0];

  if (msPassed >= updateEachSecond * 1000) {
    fps = Math.round(timeMeasurements.length / msPassed * 1000 * decimalPlacesRatio) / decimalPlacesRatio;
    timeMeasurements = [];
  }

  if ( fps > 60 ) {
      // Throw to Puppeteer or Playwright
  }

  requestAnimationFrame(() => {
    tick();
  });
}

tick();

Original: https://stackoverflow.com/a/52727222/1397641

Ideally I’d love an FPS counter on as many tests as possible that tells me when a part of the user experience is too sluggish before it gets deployed to the user.

I know using performance.now() is better than Date.now(), but I'm uncertain how to make sure the test environment is similar or slightly slower than a target user device.

For example: Is puppeteer running on a build process like Netlify or Vercel comparable to a user device like a 5 year old Android device?

Can I add throttles to make the test more realistic or even less powerful than a user device so that the FPS test fails slightly before users devices would?

Answer 1

It might be useful depending on what kind of app/site you are testing. Such a feature probably does not need to be enabled by default. How it can be implemented:

1. https://pptr.dev/api/puppeteer.page.exposefunction/ to expose a binding to the target page to report fps drops.
2. https://pptr.dev/api/puppeteer.page.evaluateonnewdocument/ to load the fps measurement code before anything else.
3. https://pptr.dev/api/puppeteer.page.emulatecputhrottling/ to make the page slower. Although not sure how realistic that would be.