question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using lighthouse in combination with Puppeteer

See original GitHub issue

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 ?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:2
  • Comments:17 (6 by maintainers)

github_iconTop GitHub Comments

18reactions
ebidelcommented, Jan 31, 2018

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();

})();
2reactions
ebidelcommented, Feb 1, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Client-Side Perf Testing Using Lighthouse CI With Puppeteer
Step 3: Run below 2 commands to add Lighthouse CI and Puppeteer dependencies. Step 4: Open any editor of choice.
Read more >
Making Better Use of Lighthouse with Puppeteer
Lighthouse is a useful tool that can evaluate the performance, accessibility, and the use of web development best practices on our websites ...
Read more >
Lighthouse user flows - web.dev
Puppeteer is used to script page loads and trigger synthetic user interactions, and Lighthouse can be invoked in multiple ways to capture key ......
Read more >
Performance Testing Authenticated Pages with Lighthouse
The below example will use Puppeteer in conjunction with Lighthouse to test authenticated pages. First, add Puppeteer to your dependencies
Read more >
Automated Lighthouse Reporting using Puppeteer | Buddy
Automated Lighthouse Reporting using Puppeteer · npm init # Create your package. · touch lighthouse-util. · import puppeteer from "puppeteer"; ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found