Web-vitals-test-automation NPM

web-vitals-test-automation

Test Automation for Web Vitals

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.

How to use

Initialization

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 {Controller} from  'web-vitals-test-automation';
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' ]});
const  page = await  browser.newPage();
await  Controller.setPage(page);

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.goToAndMeasure(
'https://ultimateqa.com/simple-html-elements-for-automation',
'InitialLoad',
{waitUntil:  'networkidle2'});

Interaction with Browser

Currently only click and scroll events are supported to measure the metrics, For all the other interaction, use puppeteer methods.

let  elementHandles = await  page.$('[data-testid="headerSearchInput-desktop"]');
if(elementHandles)
    await  Controller.clickAndMeasure(elementHandles[0],'ClickElement');

await  Controller.scrollAndMeasure('ScrollDown',{down:  1000,right:0});
await  Controller.scrollAndMeasure('ScrollUp',{down: -1000,right:0});