Using lighthouse in combination with Puppeteer

[Antonhansel]

Hello,

I'm would like to launch a chrome instance, connect puppeteer to it to login, and then start lighthouse, is that possible ? I couldn't find a way to connect puppeteer to a chrome instance started with chrome-launcher.

I've tried something like this but with no success

function launchChromeAndRunLighthouse(url, opts, config = null) {
	return chromeLauncher.launch({chromeFlags: opts.chromeFlags}).then(async chrome => {
		opts.port = chrome.port;
		const url = 'ws://localhost:' + chrome.port + '/devtools/browser/';
		const browser = await puppeteer.connect({
			browserWSEndpoint: url
		});
                // this throws the following WS error: (node:9000)
                // UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: unexpected server response (404)

because I'm missing the browser id after browser/ and it doesn't seem to be exposed by lighthouse

I've seen issues where it says to manually connect before running lighthouse on a website where login is mandatory. Is there any other fully automated way to do this ?

[ebidel]

This should work:

const chromeLauncher = require('chrome-launcher');
const puppeteer = require('puppeteer');
const lighthouse = require('lighthouse');
const request = require('request');
const util = require('util');

(async() => {

const URL = 'https://www.chromestatus.com/features';

const opts = {
  //chromeFlags: ['--headless'],
  logLevel: 'info',
  output: 'json'
};

// Launch chrome using chrome-launcher.
const chrome = await chromeLauncher.launch(opts);
opts.port = chrome.port;

// Connect to it using puppeteer.connect().
const resp = await util.promisify(request)(`http://localhost:${opts.port}/json/version`);
const {webSocketDebuggerUrl} = JSON.parse(resp.body);
const browser = await puppeteer.connect({browserWSEndpoint: webSocketDebuggerUrl});

// Run Lighthouse.
const lhr = await lighthouse(URL, opts, null);
console.log(`Lighthouse score: ${lhr.score}`);

await browser.disconnect();
await chrome.kill();

})();

[Antonhansel]

Hey @ebidel thank you very much, this is perfect. I couldn't find this snippet in the doc, did I miss it ? Should I make a PR to add it ?

[ebidel]

@Antonhansel what's the use case for using chrome-launcher? Why not just launch chrome using puppeteer?

[ebidel]

Got a PR up: #4408

[wangpung12]

Good

[vikramvi]

@ebidel can I use Java to achieve same results as per solution you had provided ?

[ebidel]

Not sure. All of these projects are Node-based.

[tsenguunchik]

When I run the code, I get the following error:

(node:199518) UnhandledPromiseRejectionWarning: Error: Protocol error (Target.getBrowserContexts): 'Target.getBrowserContexts' wasn't found undefined
    at Promise (Web Projects/lighthouse-crawler/node_modules/puppeteer/lib/Connection.js:86:56)
    at new Promise (<anonymous>)
    at Connection.send (Web Projects/lighthouse-crawler/node_modules/puppeteer/lib/Connection.js:85:12)
    at Function.connect (Web Projects/lighthouse-crawler/node_modules/puppeteer/lib/Launcher.js:257:50)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
(node:199518) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:199518) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Not sure how to solve this issue...

[patrickhulce]

@tsenguunchik that seems like an old chrome version, see puppeteer/puppeteer#2700

[drdevelop]

@ebidel I've seen your puppeteer in conjunction with lighthouse, and I've written to find that lighthouse runs console. log (lhr. score) and the result is undefined

[ebidel]

There's no longer an overall score in the lighthouse results object.

[drdevelop]

@ebidel oh! But how do I feel about using the lighthouse command line tool or using the lighthouse test project in the project and how do I feel about the results that I test with the Google Extension Tool and generally have a greater number than the lighthouse test with the Google Extension Tool? How to format config, for example, I want to configure userAgent.

[ebidel]

Sorry, I'm not really sure what you're asking. The DevTools integration has some setting customizations, bur if you want more configuration control over runs, the CLI is your best option.

[drdevelop]

@ebidel If I want to customize the configuration of test items and browser's userAgent, what is the configuration format?

[drdevelop]

@ebidel Hello, I introduced lighthouse to test github.com in my own project, but the final report data and the results obtained by testing with Google Extension Tool are inconsistent. Why?

[connorjclark]

https://github.com/GoogleChrome/lighthouse/blob/master/docs/puppeteer.md

and this https://github.com/GoogleChrome/lighthouse/tree/master/docs/recipes/auth

and #9722 (not landed yet)

do we need anything else to close this?

[Antonhansel]

Hey @connorjclark Thank you for handling this 👍 👏