2 Awesome Tools to Automate Client-side Performance Testing | by Eldad Uzman | Mar, 2022

A look at lighthouse and playwright

As applications are getting more complex and testing efforts is over-extended, automating our testing pipelines is paramount.

In this article, I’ll demonstrate how you can use 2 awesome tools to quickly cover multiple test realms with ease.

Googles’ lighthouse is an open-source website quality assessment tool.
It’s based on googles’ web-vitals guidelines and it measures 5 quality factors:

1: performance

This factor has 3 faces:

  • Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
  • First Input Delay (FID): measures interaction. To provide a good user experience, pages should have a FID of 100 milliseconds or less.
  • Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1. or less.

2: Accessibility

I’ve already elaborated on accessibility and its importance in contemporary software development here.
In general, lighthouse lints to improve web sites accessibility in accordance with its web accessibility vitals.

3: Best Practices

This would provide web developers with opportunities to improve the quality of their code.

4: Search Engine Optimization (SEO)

Optimizes search engine results

5: Progressive Web App (PWA)

Keep your website up to date with modern technologies.

Each one of these 5 factors will generate a score from 0 to 100, and the outcome is a detailed report regarding the problems found and the opportunities to fix them.

You can run Lighthouse in 4 main ways:

  1. From chrome dev tools
  2. Online
  3. From cli
  4. As a node package

Lets focus on the node package option 🙂

first, we need to install lighthouse package from NPM

Leave a Comment