Client Side Performance Testing with Cypress

There will be requirement to test service side performance as well as client side performance of a web solution. We should look at the time it takes to load particular UI components in a web solution. We can utilize Cypress and the HAR file generation library which is developed.

To do client side performance testing first we should install the cypress-har-generator.

npm install?@neuralegion/cypress-har-generator        

Next add the following command in cypress/plugins/index.js

const { install, ensureBrowserFlags } = require('@neuralegion/cypress-har-generator');

module.exports = (on, config) => {
  install(on, config);
  
  on('before:browser:launch', (browser = {}, launchOptions) => {
    ensureBrowserFlags(browser, launchOptions);
    return launchOptions;
  });        

};        

Add the recordHar() and saveHar methods to your test

import?LoginPage?from?'./Pages/LoginPage';
import?HomePage?from?'./Pages/HomePage';


describe('My?First?Test?Script?-?Guru?99?Login',?function()?{
????it('Visits?the?Page?and?Login',?function()?{
??????const?loginPage?=?new?LoginPage();
??????cy.recordHar();
??????cy.visit('https://demo.guru99.com/v4/');
?????
??????loginPage.typeUserName('mngr332873');
??????loginPage.typePassword?('umEtyvy');
??????loginPage.clickLogin();
??????const?homePage?=?new?HomePage();
??????homePage.verifyUserName('Manger?Id?:?mngr332873');
?????cy.saveHar({?fileName:?'example.com.har'?});
????})        

??})
        

After running the test the HAR file will be generated. View the HAR file in an online HAR file viewer to view the client side performance.