Posted on Jun 3, 2020

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

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.