abhinaba-ghosh / playwright-lighthouse

:performing_arts:: Playwright Lighthouse Audit
https://www.npmjs.com/package/playwright-lighthouse
MIT License
240 stars 28 forks source link

Desktop/mobile mode Playwright-lighthouse Audit reports #32

Open perftest22 opened 2 years ago

perftest22 commented 2 years ago

Hi, I am new to this tool. I was trying to get the performance audit for both desktop and mobile in the same script. I tried the formFactor:'desktop' , but by default it is going to the mobile mode only. The only way I could find the solution is to change the defaultsettings in the constants.js config file(\lighthouse\lighthouse-core\config\constants.js) and also I needed to create two separate projects, one for desktop and one for mobile mode. Is there a way I can get both desktop and mobile audit reports in the same script?. Please advise! Thank you.

const defaultSettings = { output: 'json', maxWaitForFcp: 30 1000, maxWaitForLoad: 45 1000,

formFactor: 'mobile', throttling: throttling.mobileSlow4G, throttlingMethod: 'simulate', screenEmulation: screenEmulationMetrics.mobile, emulatedUserAgent: userAgents.mobile,

ryanrosello-og commented 2 years ago

hey @perftest22

try creating your own helper function to set the default settings. For example:

import lighthouseDesktopConfig from 'lighthouse/lighthouse-core/config/lr-desktop-config';
import lighthouseMobileConfig from 'lighthouse/lighthouse-core/config/lr-mobile-config';

function lightHouseConfig(options: {
  name: string;
  page: Page;
  port: number;
  formFactor: 'desktop' | 'mobile';
  outputDirectory: string;
}): playwrightLighthouseConfig {
  const {formFactor, page, port, name, outputDirectory} = options;
  return {
    page,
    port,
    config: formFactor === 'desktop' ? lighthouseDesktopConfig : lighthouseMobileConfig,
    reports: {
      formats: {
        html: true,
        json: true,
      },
      name: FileHelpers.sanitizeFileName(name),
      directory: outputDirectory,
    },
  };
}

export {lightHouseConfig};

Note the formFactor setting which will load the required config based on the value that you set.

perftest22 commented 2 years ago

Thank you for helping. I will try it out and let you know!