Front-end Developers: What tools do you use to test performance?

#discuss

Hi all!

I'm curious what other front-end developers use to test page performance.

Do you just use Chrome Developer Tools or do you have a more complicated system integrated into CI/CD processes?

Also curious about testing... I usually just write unit tests, but not end-to-end testing of the UI. Do you have any quality assurance or testing tools you use for testing UI? (puppeteer?)

Top comments (3)

Abhinaba Ghosh • Jun 9 '20 • Edited

there is an npm library called testcafe-lighthouse which helps to audit web pages using TestCafe. It also has the capability to produce an HTML detailed report.

Install the plugin by:

$ yarn add -D testcafe-lighthouse
# or 
$ npm install --save-dev testcafe-lighthouse

Audit with default threshold

import { testcafeLighthouseAudit } from 'testcafe-lighthouse';

fixture(`Audit Test`).page('http://localhost:3000/login');

test('user performs lighthouse audit', async () => {
  const currentURL = await t.eval(() => document.documentURI);
  await testcafeLighthouseAudit({
    url: currentURL,
    cdpPort: 9222,
  });
});

Audit with custom Thresold:

import { testcafeLighthouseAudit } from 'testcafe-lighthouse';

fixture(`Audit Test`).page('http://localhost:3000/login');

test('user page performance with specific thresholds', async () => {
const currentURL = await t.eval(() => document.documentURI);
  await testcafeLighthouseAudit({
    url: currentURL,
    thresholds: {
      performance: 50,
      accessibility: 50,
      'best-practices': 50,
      seo: 50,
      pwa: 50,
    },
    cdpPort: 9222,
  });
});

you need to kick start the test like below:

# headless mode, preferable for CI
npx testcafe chrome:headless:cdpPort=9222 test.js

# non headless mode
npx testcafe 'chrome --remote-debugging-port=9222'  test.js

I hope it will help your automation journey.