How do I run Lighthouse audit in Timespan and Snapshot modes similar to pupeeter using fraggle-rock api

[BALAMOHANP]

I would like to audit my Single page application's performance using lighthouse by running it in Timespan as well as snapshot modes ( reference link: https://github.com/GoogleChrome/lighthouse/blob/HEAD/docs/user-flows.md ) using the LH library in playwright. But when I tried the below code similar to puppeteer, I am getting an exception as below,

TypeError: this._page.target is not a function

155 | View Cart 156 | /

157 | await flow.startTimespan(); | ^ 158 | await page.click("id=atc_view_cart"); 159 | await flow.endTimespan(); 160 | /***

at Driver.connect (/Users/***/Documents/Tools/playwright/node_modules/lighthouse/lighthouse-core/fraggle-rock/gather/driver.js:74:38)
at startTimespanGather (/Users/***/Documents/Tools/playwright/node_modules/lighthouse/lighthouse-core/fraggle-rock/gather/timespan-runner.js:30:16)
at UserFlow.startTimespan (/Users/***/Documents/Tools/playwright/node_modules/lighthouse/lighthouse-core/fraggle-rock/user-flow.js:127:28)

Please review the code and help me to fix it.

Code :

const playwright = require('playwright'); const { playAudit } = require('playwright-lighthouse'); import lighthouseDesktopConfig from 'lighthouse/lighthouse-core/config/lr-desktop-config'; import { url, username, password, testResultDir, searchStr, timeout, skuUrl } from './../playwright.config'; const { test, expect } = require('@playwright/test'); const { startFlow } = require('lighthouse/lighthouse-core/fraggle-rock/api.js');

const os = require('os'); const fs = require('fs'); const path = require('path'); const appPrefix = 'pl-lh'; const tmpDir = os.tmpdir(); const tmpDir2 = fs.mkdtempSync(path.join(tmpDir, appPrefix));

test('my test',async () => { // console.log(tmpDir); const context = await playwright['chromium'].launchPersistentContext(tmpDir2, { args: ['--remote-debugging-port=9222'], headless: false });

const page = await context.newPage();
const flow = await startFlow(page);
const opts = {
    //Disable clearing the browser cache and other storage APIs before a run
    disableStorageReset: false,
  };
const thresholdsConfig = {
    performance: 90,
  };

/****
 * Home Page Landing
 */
await page.goto(url);

/**
 * Lighthouse execution
 *  */  
 await playAudit({
    config: lighthouseDesktopConfig,
    opts,
    page: page,
    port: 9222,        
    thresholds: thresholdsConfig,
    //ignore error if the thresholds not met
    ignoreError: true,
    reports: {
        formats: {
            //html: true,
            // csv: true,
            json: true,
        },
        name: "homepage" + Date.now().toString(),
        directory: testResultDir + "/homepage",
        // directory: "/Users/praba001/Documents/Tools/playwright/lighthouseReport" + Date.now().toString()
    },
});

/****
 * Login Submit & Landing to Home Page
 */
await page.click("text=Sign in");
await page.getByRole('button', { name: 'Sign in' }).click();
await page.locator("id=loginUsername").fill(username)
await page.locator("id=loginPassword").fill(password)
await page.click("id=loginBtn");

//To verify the login is succeeded
 //default isVisible timeout value is 5Sec
await page.isVisible("navigation-menu-item__customerNameWrapper uiStyles__text_white", {strict: true, timeout: 8000});

/**
 * Lighthouse execution
 *  */  
await playAudit({
    config: lighthouseDesktopConfig,
    opts,
    page: page,
    port: 9222,        
    thresholds: thresholdsConfig,
    //ignore error if the thresholds not met
    ignoreError: true,
    reports: {
        formats: {
            html: true,
            // csv: true,
        },
        name: "homepage-Login" + Date.now().toString(),
        directory: testResultDir + "/homepage-Login",
    },
});

/***
 * Sku page
 */
await page.goto(url + skuUrl);
await page.isVisible("id=ctaButton");

/**
 * Lighthouse execution
 *  */  
await playAudit({
    config: lighthouseDesktopConfig,
    opts,
    page: page,
    port: 9222,        
    thresholds: thresholdsConfig,
    //ignore error if the thresholds not met
    ignoreError: true,
    reports: {
        formats: {
            html: true,
            // csv: true,
        },
        name: "Sku" + Date.now().toString(),
        directory: testResultDir + "/sku",
    },
});

/***
 * add to cart
 */

 await page.click("id=ctaButton");
 //waiting for an element
 await page.isVisible("atcDrawer__atc_drawer_title", {strict: true, timeout: 8000});

/***
 * View Cart
 */
await flow.startTimespan();
await page.click("id=atc_view_cart");
await flow.endTimespan();

await context.close();

});

[sbettego]

Hi @BALAMOHANP , did you find any work around for this.

I'm trying to run playaduit multiple times within the same test but once the analysis is done by audit the browser is auto closed for me due to which I'm unable to move to other parts of the page.

[Xotabu4]

Having a same issue. Unfortunately playwright-lighthouse does not support user-flows api yet

[Xotabu4]

@abhinaba-ghosh would be really cool to have support of https://github.com/GoogleChrome/lighthouse/blob/main/docs/user-flows.md