Launch Lighthouse on any website in the globe using our customized web view, which renders the Chrome browser. Should be able to generate report before and after login.

[Chandan-TY]

Summary

URL before login
https://www.naukri.com/
https://accounts.google.com/InteractiveLogin/signinchooser?continue=https%3A%2F%2Fmail.google.com%2Fmail%2Fu%2F0%2F&emr=1&followup=https%3A%2F%2Fmail.google.com%2Fmail%2Fu%2F0%2F&osid=1&passive=1209600&service=mail&ifkv=AaSxoQyDIyyAsCS4dbNNYaIunO8tmilgA_WuH-_PhFnzgrACUKr_c_qiSrt1_xV_-oMTY6n7eWum0g&ddm=0&flowName=GlifWebSignIn&flowEntry=ServiceLogin

URL after login
https://www.naukri.com/mnjuser/homepage
https://mail.google.com/mail/u/0/#inbox

What happened?

Right now, I'm attempting to use Node.js to run Lighthouse in an electron application. The issue is that, every time I use the lighthouse (URL), I always end up on the login page for every website that has been authenticated once I log in. How can I get the results for any number of websites logged into our web view that are authenticated pages? It won't be possible for us to pass all of the credentials for every website. I need to find a way for Lighthouse to retrieve the login credentials from our web view in the Chrome browser and display the results for each page that the user is currently connected into.

Here is an example of the code I would like to run:

import fetch from 'node-fetch';
import puppeteer from 'puppeteer';
const chromeLauncher = require('fix-esm').require('chrome-launcher');
import { generateLighthouseReport } from './helper';

const getReport = async () => {
const {
srcUrl,
formValues: { device, categories },
} = arg;
try {
const chrome = await chromeLauncher.launch({
chromePath: chromePaths.chrome,
chromeFlags: ['--headless'],
});

const resp = await fetch(`http://localhost:${chrome.port}/json/version`);

const { webSocketDebuggerUrl } = await resp.json();
log.info(`webSocketDebuggerUrl-${webSocketDebuggerUrl}`);

const browser = await puppeteer.connect({
  browserWSEndpoint: webSocketDebuggerUrl,
  defaultViewport: null,
});
const page = await browser.newPage();

await page.goto(srcUrl, { waitUntil: 'networkidle0' });

log.info(`chrome-test`);

let config = null;
const options = {
  disableStorageReset: true,
  logLevel: 'info',
  output: ['html', 'json'],
  onlyCategories: categories,
  port: chrome.port,
};
if (device?.toLowerCase() !== 'mobile') {
  config = {
    extends: 'lighthouse:default',
    settings: {
      disableStorageReset: true,
      formFactor: 'desktop',
      throttling: {
        rttMs: 40,
        throughputKbps: 10240,
        cpuSlowdownMultiplier: 1,
        requestLatencyMs: 0,
        downloadThroughputKbps: 0,
        uploadThroughputKbps: 0,
      },
      screenEmulation: {
        mobile: false,
        width: 1350,
        height: 940,
        deviceScaleFactor: 1,
        disabled: false,
      },
      emulatedUserAgent: `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4143.7 Safari/537.36 Chrome-Lighthouse`,
    },
  };
}
let runnerResult = null;

if (device?.toLowerCase() === 'mobile') {
  runnerResult = await generateLighthouseReport(
    page.url(),
    options,
    {
      extends: 'lighthouse:default',
      settings: { disableStorageReset: true },
    },
    page
  );
} else {
  runnerResult = await generateLighthouseReport(
    page.url(),
    options,
    config,
    page
  );
}
log.info(`runnerResult-${runnerResult}`);

await browser.disconnect();
// await browser.close();
await chrome.kill();
event.reply('generate-perf-report', {
  isError: false,
  result: runnerResult,
});

} catch (err) {
log.info(err);
event.reply('generate-perf-report', {
isError: true,
result: err,
});
}
}

helper.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.generateLighthouseReport = void 0;
// @ts-ignore
async function generateLighthouseReport(...args) {
const lighthouseModule = await import('lighthouse');
const lighthouse = lighthouseModule.default;
// @ts-ignore
return lighthouse(...args);
}

exports.generateLighthouseReport = generateLighthouseReport;
//# sourceMappingURL=lighthouse.js.map

Any solutions on how I can get past the problem or potentially work around it?

What did you expect?
In order to deliver the results for any website that the users are logged into, I need the Lighthouse to retrieve the login credentials from our Chrome browser web view.

What have you tried?
I have tried the solutions provided in the below link
https://github.com/GoogleChrome/lighthouse/blob/main/docs/authenticated-pages.md

How were you running Lighthouse?
Nodejs programmatically

Lighthouse Version
v12.0.0

Node Version
v20.13.1

OS
Windows, MAC & linux

Attachments

Lighthouse.before.and.after.login.issue.mp4

[adamraine]

I have tried the solutions provided in the below link
main/docs/authenticated-pages.md

Which of the solutions have you tried? The code you provided doesn't appear to be using any of them.

[Chandan-TY]

I have tried the solutions provided in the below link
main/docs/authenticated-pages.md

Which of the solutions have you tried? The code you provided doesn't appear to be using any of them.

Hi @adamraine
Thanks for your quick reply.
I would appreciate knowing how to manage our situation because there isn't a solution offered.
How can we tell Lighthouse to use our browser's web view to retrieve the credentials, or is there another way to do this? Is there anything that has to be configured for Lighthouse to select the login credentials from our web browser?

[adamraine]

As I understand it your application

1. Displays a web page in an electron web view
2. Opens that page in a separate Chrome instance in the background
3. Runs Lighthouse on the page URL using the background Chrome instance

And you want to know how to transfer the login credentials from the Electron web view to the background Chrome instance used for testing Lighthouse.

If you save logged in state using Cookies this solution would be most useful. As for retrieving logged-in credentials from Electron I really don't know as I have no experience with it