Sitespeed.io with Lighthouse Using JavaScript for Multiple URLs

[Paanmoli]

Feature Request

Description: I would like to request the ability to integrate Sitespeed.io with Lighthouse using a JavaScript script that handles multiple URLs. Currently, it seems that Lighthouse can only be used on individual URLs and not with scripting/multiple pages, which limits the ability to perform comprehensive performance testing on workflows that span multiple pages.

Use Case: My use case involves running a script (e.g., prueba.js) that navigates through multiple pages of a web application, performs various actions, and measures performance. I would like to include Lighthouse reports for each of the URLs involved in this script to get detailed performance insights.

Steps to Reproduce:

1. Created a script (prueba.js) to navigate through multiple pages:

   module.exports = async function(context, commands) {
     try {
       await commands.measure.start('Tx_login');
       await commands.navigate('https://opensource-demo.orangehrmlive.com/web/index.php/auth/login');
       await commands.addText.byXpath('Admin', '//input[@placeholder="Username"]');
       await commands.addText.byXpath('admin123', '//input[@placeholder="Password"]');
       await commands.click.byXpath('//button[@type="submit"]');
       await commands.wait.byTime(1000);
       await commands.measure.stop();
       await commands.measure.start('Tx_adminSearch');
       await commands.click.byXpath('//a/span[contains(.,"Admin")]');
       await commands.wait.byTime(1000);
       await commands.click.byXpath('//div[2]/input');
       await commands.addText.byXpath('admin', '//div[2]/input');
       await commands.click.byXpath('//button[@type="submit"]');
       await commands.wait.byTime(1000);
       await commands.scroll.toBottom();
       await commands.measure.stop();
       await commands.measure.start('Tx_consultRecruit');
       await commands.click.byXpath('//a/span[contains(.,"Recruitment")]');
       await commands.wait.byTime(1000);
       await commands.click.byXpath('//i[@class="oxd-icon bi-eye-fill"]');
       await commands.wait.byTime(1000);
       await commands.click.byXpath('//a[contains(.,"Vacancies")]');
       await commands.wait.byTime(1000);
       await commands.measure.stop();
       await commands.measure.start('Tx_directory');
       await commands.click.byXpath('//a/span[contains(.,"Directory")]');
       await commands.wait.byTime(1000);
       await commands.click.byXpath('//span/i');
       await commands.click.byXpath('//a[contains(text(),"Logout")]');
       await commands.wait.byTime(1000);
       await commands.measure.stop();
     } catch (e) {
       // Handle error
     }
   };

2. Executed the script with the following Docker command:

   docker run --rm -v /home/sitespeed:/sitespeed.io sitespeedio/sitespeed.io --plugins.add /sitespeed.io/plugin-lighthouse/index.js prueba.js --multi -n1

3. Received the following message:

   Lighthouse can only be used on URLs and not with scripting/multiple pages at the moment

Desired Outcome: It would be great if there could be an option or plugin to integrate Lighthouse in a way that it can run for multiple URLs specified in a script. This integration would help in automating the performance analysis for workflows involving multiple pages.

Thank you for considering this feature request!

[soulgalore]

Hi @Paanmoli the reason it doesn't work today is that the plugin uses the Lighthouse cli, so it uses another Chrome browser session. First all data and the script runs using Browsertime, then the browser is closed and then a new browser (the version that is binded to the Lighthouse release) is opened and the Lighthouse data is collected.

Maybe it would be possible if https://github.com/GoogleChrome/lighthouse/blob/main/docs/readme.md#lighthouse-as-trace-processor works? If you or someone else have time to try that together with a Chrome opened by Selenium, I could guide you. Best case scenario the "lighthouse" could become scripting command.