Client side performance testing with Cypress.io + Google Lighthouse

Types of performance testing
Lighthouse test results for http://www.google.co.in/homepage/hp-chrome.html
  1. First Contentful Paint (FCP)
    FCP measures how long it takes for the browser to render the first piece of DOM content after a user navigates to your page.
  2. Large Contentful Paint (LCP)
    LCP measures how long it takes for the browser to render the largest piece of DOM content (image or text block) after a user navigates to your page.
  3. Speed Index
    Speed index measures how long the content visually loads on page load.
  4. Time to Interactive (TTI)
    TTI measures how long it takes for the page to become fully interactive.
  5. Total Blocking Time (TBT)
    TBT measures the time the page is blocked from responding to user inputs. Anything that executes above 50ms is considered a blocking task.
  6. Cumulative Layout Shift (CLS)
    CLS measures the visual stability of your page.
npm install --save-dev cypress-audityarn add -D cypress-audit
"devDependencies": {"cypress": "^8.7.0","cypress-audit": "^0.3.0"}
/// <reference types="Cypress" />describe('Cypress Lighthouse test', () => {beforeEach(() => {cy.visit('https://google.com');});it('should run performance audits', () => {cy.lighthouse();});it('should run performance audits using custom thresholds', () => {const customThresholds = {performance: 50,accessibility: 50,seo: 70,'first-contentful-paint': 2000,'largest-contentful-paint': 3000,'cumulative-layout-shift': 0.1,'total-blocking-time': 500,};const desktopConfig = {formFactor: 'desktop',screenEmulation: { disabled: true },};cy.lighthouse(customThresholds, desktopConfig);});});

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

LumApps — Road to React

Web Component Based Architecture

Add Apple Maps to your website using a serverless function and host it on Netlify

JavaScript Algorithm: Chunky Monkey

Working with Denojs and Nodejs

9 Must-Have Tools and Resources for Web Developers

person using the mousepad on a notebook computer that shows code on the screen

Creating a Haskell Application Using Reflex. Part 4

Automating the automatic with JMeter at mojoreads

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cvagurunathan

Cvagurunathan

More from Medium

Running all specs in Cypress version 10 in Cypress Test Runner

Appium with Jest using Appium Inspector

Handle Multi-Domain or Cross-Origin in Cypress

CI for Detox Mobile Test Automation framework using GitHub Actions and Azure Pipelines