Lighthouse with Puppeteer on the same tab-page

[andonima]

I need to analyze some pages of a web application that has an authentication system.

After reading the different options on the documentation

I developed the following script

const puppeteer = require('puppeteer');
const lighthouse = require('lighthouse');

const PORT = 8041;
var loginUrl = process.env.LOGIN_URL;
var analyzeUrl = process.env.ANALYZE_URL;
var user = process.env.USER;
var password = process.env.PASSWORD;
var filePath = process.env.LOCAL_OUTPUT_FILEPATH;
var fileName = process.env.OUTPUT_FILENAME;
var output = process.env.OUTPUT_TYPE;

const browser = await puppeteer.launch({
    args: [
      '--no-sandbox',
      '--disable-dev-shm-usage',
      '--disable-gpu',
      '--disable-setuid-sandbox',
      '--remote-debugging-port=' + PORT],
    headless: true
  });

  // Go to login page
  const page = await browser.newPage();
  await page.goto(loginUrl);
  await page.waitForSelector('*******', { visible: true });

  // Fullfill form and submit
  const emailInput = await page.$('*******');
  await emailInput.type(user);
  const passwordInput = await page.$('*******');
  await passwordInput.type(password);
  const submitBtn = await page.$('*******');
  await submitBtn.click();
  await page.waitForNavigation();
  await page.waitForSelector('*******', { visible: true });
  await page.goto(analyzeUrl);
  await page.waitForNavigation();
  await page.waitForSelector('*******', { visible: true });

  // Execute Lighthouse
  const result = await lighthouse(analyzeUrl, { port: PORT, disableStorageReset: true, logLevel: 'info', formFactor :'desktop', screenEmulation: {width: 1920, height: 1080, deviceScaleRatio: 1, mobile: false, disabled: false}, output: output});

  // Create report
  const reportHtml = result.report;
  const fs = require('fs');
  fs.writeFileSync(filePath+fileName, reportHtml);

  // Close page and browser
  await page.close();
  await browser.close();

The Puppeteer script logs in correctly and lighthouse can analyze the objective page, but before I get a redirection that I do not get when I execute the analysis from the dev-tool.

Obviously, this previous redirection changes the results I get.

As far as I understand the Puppeteer launches a Chrome browser and executes the steps on the page and then lighthouse uses that same browser to execute the analysis but on a different tab, am I right?

If that is true the current solution does not fit our needs, because we need to work on the same tab in which we have logged in previously to avoid the /auth-callback to rise.

¿Would be any possibility to execute lighthouse on the same tab that Puppeteer is working? Or any other alternative that we could use?

Thanks in advance.

[connorjclark]

Try using the user flow API instead.

We should update our auth docs to use that too.

[adamraine]

Also worth noting that the new Lighthouse API on master can accept a puppeteer page to address this use case.

This new API is experimental and will be released in Lighthouse 10.0.

lighthouse/lighthouse-core/index.js

Lines 32 to 42 in 03af403

	/**
	* Run Lighthouse.
	* @param {string=} url The URL to test. Optional if running in auditMode.
	* @param {LH.Flags=} flags Optional settings for the Lighthouse run. If present,
	* they will override any settings in the config.
	* @param {LH.Config.Json=} configJSON Configuration for the Lighthouse run. If
	* not present, the default config is used.
	* @param {LH.Puppeteer.Page=} page
	* @return {Promise<LH.RunnerResult|undefined>}
	*/
	async function lighthouse(url, flags = {}, configJSON, page) {

[adamraine]

This is done but it hasn't been merged to master yet. You can see it here:

https://github.com/GoogleChrome/lighthouse/tree/10-docs-staging/docs/recipes/auth