[BUG] Can't connect playwright to lighthouse. Getting 426 error

[csxero]

Context:

• Playwright Version: 1.10.0
• Operating System: Windows
• Node.js version: 12.9.1
• Browser: chromium

Describe the bug

I want to connect playwright and have lighthouse report on the instance but struggling to get it working. I have got it working with chrome launcher but I would prefer not to rely on another package for this, especially in CI.

Am I missing something here? 🤔

Code Snippet

'use strict';

const playwroght = require('playwright');
const lighthouse = require('lighthouse');

let new_port;

async function login(browser_server, origin) {
    const wsEndpoint = browser_server.wsEndpoint();
    const [, port] = wsEndpoint.match(/:(\d+)\//);
    new_port = port;
    console.log(wsEndpoint);
    const browser = await playwroght.chromium.connect({ wsEndpoint });
    const context = await browser.newContext();
    const page = await context.newPage();
    await page.goto(origin);
    const userInput = await page.$('[name="user"]');
    const pwdInput = await page.$('[name="passwd"]');
    await userInput.type(USERNAME);
    await pwdInput.type(PASSWORD);
    await Promise.all([
        page.$eval('#login_login-main', form => form.submit()),
        page.waitForNavigation(),
    ]);
}

async function main() {
    const browser = await playwroght.chromium.launchServer({
        args: [`--remote-debugging-port=8041`],
        headless: false,
    });

    await login(browser, 'https://old.reddit.com');
    const result = await lighthouse('https://old.reddit.com', { port: new_port, disableStorageReset: true, disableDeviceEmulation: true });
    await browser.close();
    console.log(JSON.stringify(result.lhr, null, 2));
}

main();

Error

(node:15384) UnhandledPromiseRejectionWarning: Error: Protocol JSON API error (list), status: 426
    at IncomingMessage.<anonymous> (/home/shazamz/Documents/dev/lighthouse/node_modules/lighthouse/lighthouse-core/gather/connections/cri.js:107:18)
    at IncomingMessage.emit (events.js:215:7)
    at endReadableNT (_stream_readable.js:1183:12)
    at processTicksAndRejections (internal/process/task_queues.js:80:21)
(node:15384) 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:15384) [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.

[pavelfeldman]

You should pass 8041 as the port to lighthouse.

[pavelfeldman]

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

async function main() {
    const context = await playwright.chromium.launchPersistentContext('foo', {
        args: [`--remote-debugging-port=8041`],
        headless: false,
    });
    const [ page ] = context.pages();
    await page.goto('https://old.reddit.com');

    // login here

    const result = await lighthouse('https://old.reddit.com', { port: 8041, disableStorageReset: true, disableDeviceEmulation: true });
    await context.close();
    console.log(JSON.stringify(result.lhr, null, 2));
}

main();

[pavelfeldman]

Lighthouse will only use default context, so you need to use launchPersistentContext and provide user data dir (can be temporary folder). If you plan to reuse this user data dir, you can login once and then keep running lighthouse.

[csxero]

Yup it works like a charm. Thank you

[ydennisy]

Sorry to jump in here @pavelfeldman when running your example for certain sites, the following error occurs from LH:

Error: You probably have multiple tabs open to the same origin.

This can work if we just avoid using the page.goto(), but since I need to add some JS into the page I see no way around that.