A have a look at lighthouse and playwright
As functions are getting extra advanced and testing efforts is over-extended, automating our testing pipelines is paramount.
On this article, I’ll show how you should utilize 2 superior instruments to shortly cowl a number of check realms with ease.
Googles’ lighthouse is an open-source web site high quality evaluation device.
It’s based mostly on googles’ web-vitals tips and it measures 5 high quality elements:
This issue has 3 aspects:
- Largest Contentful Paint (LCP): measures loading efficiency. To supply a superb consumer expertise, LCP ought to happen inside 2.5 seconds of when the web page first begins loading.
- First Input Delay (FID): measures interactivity. To supply a superb consumer expertise, pages ought to have a FID of 100 milliseconds or much less.
- Cumulative Layout Shift (CLS): measures visible stability. To supply a superb consumer expertise, pages ought to keep a CLS of 0.1. or much less.
I’ve already elaborated on accessibility and its significance in up to date software program improvement here.
Basically, lighthouse lints to enhance websites accessibility in accordance with its web accessibility vitals.
3: Finest Practices
This would offer net builders with alternatives to enhance the standard of their code.
4: Search Engine Optimization (search engine optimisation)
Optimizes search engine outcomes
5: Progressive Net App (PWA)
Preserve your web site updated with trendy applied sciences.
Every one among these 5 elements will generate a rating from 0 to 100, and the result is an in depth report concerning the issues discovered and the alternatives to repair them.
You’ll be able to run Lighthouse in 4 most important methods:
- From chrome dev instruments
- From cli
- As a node package deal
Lets concentrate on the node package deal choice 🙂
first, we have to set up lighthouse package deal from NPM
npm set up lighthouse
Within the script above, we began a chrome occasion and used it to execute lighthouse on a demo web site.
We’re solely eager about efficiency, accessibility, and finest practices.
Now we will run the script:
The top result’s an in depth HTML report:
Lighthouse offers superior studies with wonderful particulars, it could actually assist figuring out high quality points within the net web page.
Having the script prepared we will execute it in our automation pipelines and simply goal these issues.
The issue with this strategy, is that we will solely check the entrance web page of our utility.
We’d like the power to navigate between pages and run lighthouse on the present web page.
Playwright is an open-source net testing automation framework.
Developed by Microsoft, it’s designed to make use of Chrome Dev-Tools Protocol and carry out actions on a browser occasion comparable to navigation, clicking parts, textual content insertion, choosing choices from dropdowns, and so forth.
First, let’s set up playwright from npm:
npm set up playwright
Let’s take a look at a primary playwright script:
On this script, we created a browser, a context, and a web page and navigate the web page to our demo web site.
Then, we will insert our username and password, click on on the login button and wait till the welcome factor is seen.
Let’s run this script:
On this instance we didn’t use any testing framework, we wish to maintain this instance framework agnostic.
Now we will put all of the items to the puzzle.
We’ll use a lighthouse to launch high quality evaluation, and playwright to navigate via the pages, and playwright-lighthouse will act because the glue that places these two collectively.
The technique is to navigate the web page via the online utility after which ship the occasion of this web page to lighthouse auditor.
Set up the package deal from NPM first:
npm set up playwright-lighthouse
Now lets write the check script:
We navigated to the dashboards, handed the web page occasion to the lighthouse auditor, and outlined thresholds for efficiency, accessibility, and finest practices to be 90 every.
Now, let’s run this script:
and the console output is:
-------- playwright lighthouse audit studies --------c:workspace-vscodelighthouse-tutorialnode_modulesplaywright-lighthousesrcaudit.js:79throw new Error(label);^Error: playwright lighthouse - Some thresholds are usually not matching the expectations.efficiency report is 71 and is underneath the 90 thresholdaccessibility report is 55.00000000000001 and is underneath the 90 thresholdbest-practices report is 83 and is underneath the 90 threshold
Candy! we’ve failed the check and we will see what failed!
Now lets go to the HTML report, it is going to be underneath
As you may see, lighthouse executed on the login web page and NOT on the dashboard web page.
It occurred as a result of when the lighthouse is began, it opens a brand new browser occasion and all-important authentication particulars, cookies, and storage are misplaced!
What we have to do, is to create a persistent browser the place the storage is maintained all through the check, and this may be simply achieved because of playwright’s wonderful API.
So lets repair the script:
So first we created a temp dir whereby we maintain all of the associated storage.
Then, we invoked playwrights launchPersistentContext to create a persistent browser context, then we created a web page occasion out of the context.
The remainder is identical as we so earlier, we handed the persistent web page to the lighthouse auditor and invoked high quality evaluation course of.
Let’s run the brand new script:
-------- playwright lighthouse audit studies --------c:workspace-vscodelighthouse-tutorialnode_modulesplaywright-lighthousesrcaudit.js:79throw new Error(label);^Error: playwright lighthouse - Some thresholds are usually not matching the expectations.efficiency report is nineteen and is underneath the 90 thresholdaccessibility report is 67 and is underneath the 90 thresholdbest-practices report is 75 and is underneath the 90 threshold
Cool, now let’s check out the HTML report: