Test for Web Vitals metrics
This typescript package enables you to automate testing for Web Vitals (https://web.dev/). It relies on web vitals Library and capabilities of puppeteer automation tool for browsers.
Express server is run in the background on port 3000. It can be overridden using init method. Ensure that through out execution it is only called once.
//import {WebVitalsTest as Controller} from 'web-vitals-test';
Controller.init({port:3000});;
#### Pass puppeteer Page to Controller
Send Puppeteer Page object to Controller so that it can track web vital metrics and further Measure methods can be executed.
const browser = await puppeteer.launch({headless:false,defaultViewport:{height:1200,width:1950},args:['--start-maximized' ]});
await Controller.setBrowser(browser);
#### Navigate to URL
Use inbuilt method to open URL. Action name is mandatory, that will be used in the HTML report. By design, only CLS data is available at page load.
let result = await Controller.goTo_ClickAndMeasure(
'http://automationpractice.com/',
'InitialLoad',
{ value: '[id="search_query_top"]' },
{ waitFor: 1000 },
);
OR
let result = await Controller.goToAndMeasure('http://automationpractice.com/', 'InitialLoad', {
waitUntil: 'networkidle2',
});
#### Interaction with Browser
Currently click, select and scroll events are supported to measure the metrics, For all the other interaction, use puppeteer methods.
await Controller.clickAndMeasure('ClickElement',{ value : '[id="search_query_top"]' });
await Controller.scrollAndMeasure('ScrollDown',{down: 1000,right:0});
await Controller.scrollAndMeasure('ScrollUp',{down: -1000,right:0});
await Controller.selectAndMeasure('SelectPrice',{ value: '[id="group_1"]'},'3')
await WebVitalsTest.typeAndMeasure('type',{ value: '#sli_search_1' },{text:'shirt',pressEnter:true},{waitUntil:'networkidle2'} );
#### Report
Report is available in JSON Format
Web-Vitals-Test-Reporter can be used in the conjuction to generate HTML report.