microsoft / playwright

Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
https://playwright.dev
Apache License 2.0
66.98k stars 3.68k forks source link

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

Closed BALAMOHANP closed 1 year ago

BALAMOHANP commented 1 year ago

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

});
yury-s commented 1 year ago

This doesn't look like playwright issue (flow and startFlow are not a part of playwright). Please open a bug in playwright-lighthouse or lighthouse repo instead.