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

View post

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.