Allow Lighthouse to audit a webpage inside already opened tab (browser context)

[VicGrygorchyk]

The idea: the lighthouse can gather audit metrics on the already opened tab within running browser context.

Why one might need this? The lighthouse may be used as a part ot UI testing, we may implement UI auto-test using browser automation libraries (Puppeteer, Playwright, webdriver/Selenium) to automate user-browser interactions, then we can use lighthouse to audit UI performance (e.g. use Puppeteer to login into the webapp, use lighthouse to measure a performance of the page after login).

Implementation (fast and dirty):

The lighthouse-core can connect to the running instance of Chrome:

lighthouse(url, flags = {}, configJSON, userConnection)

The problem is it opens a new tab. It happens inside run() method of GatherRunner

GatherRunner:: run(passConfigs, options) {
...
try {
      await driver.connect();

Subsequently, Driver class connect method:

async connect() {
    await this._connection.connect();
  }

And, finally, CriConnection executes:

connect() {
    return this._runJsonCommand('new')
      .then(response => this._connectToSocket(/** @type {LH.DevToolsJsonTarget} */(response)))

---

I suggest to allow user to pass a runing browser debugPort and devTools pageId.
Let's call it CUSTOM_PARAM for sake of this discussion (definetely needs a better naming)
lighthouse(url, flags = {}, configJSON, userConnection, CUSTOM_PARAM = {} )

This wiil be passed to GatherRunner::run:
try { if (CUSTOM_PARAM) { await driver.connectToPage(CUSTOM_PARAM); } else await driver.connect(); ...
Driver::connectToPage(params):

async connectToPage(params) {
    const status = {msg: 'Connecting to browser', id: 'lh:init:connect'};
    log.time(status);
    await this._connection._connectToSocket(params);
    log.timeEnd(status);
}

Additionally, we need to disable 'driver.disconnect()' if 'CUSTOM_PARAMis provided insideGatherRunner::run()`

As far as i tried, it works for auditing (but now for PWA metrics, probably, driver goes offline and we need to enable online back after auditing).

The question is do you like me to create a PR, or this is against core team view / the same alredy exists, but I missed it (not sure if the same can be achieved via userConnection inside lighthouse)

[connorjclark]

We're working on supporting auditing user flows. See #11313

[VicGrygorchyk]

Does it mean, if I have user flow implemented via Puppeteer, and I want to measure performance via Lighthouse, I have to implement user flow via Lighthouse methods?
My idea was about "lighthouse-connector", which allows to reuse what Puppeteer (or any another browser automation client) already offers.
If it's not what core-team thinks is valuable to do, no offence is taken ))

[patrickhulce]

Does it mean, if I have user flow implemented via Puppeteer, and I want to measure performance via Lighthouse, I have to implement user flow via Lighthouse methods?

No you will not need to reimplement. It will look something like this with Lighthouse invoked at the start and end of your flow.

async runTest() {
    const page = await browser.newPage();
    const timespan = await lighthouse.startTimespan({page});

    await page.goto(`https://example.com/`);
    // Wait for the page to load the button and do whatever puppeteer stuff you need to do
    await page.waitForSelector('button');
    await page.waitForSelector('input');
    await page.click('button');

    const lighthouseResults = await timespan.endTimespan();
}

[VicGrygorchyk]

Thank you. It seems great! Looking forward to try it!

[MojioMS]

TypeError: lighthouse.startTimespan is not a function

[adamraine]

@MojioMS the code snippets in this discussion are very old. Please see https://github.com/GoogleChrome/lighthouse/blob/main/docs/user-flows.md for the most up to date API.