CODEWITHSUNDEEP
reactjsplaywrightlighthouselighthouse-ci
KnightCrawler
KnightCrawler

Reputation: 710

How to add custom network throttling in playwright-lighthouse package

I want to add network throttling 3g config in the [playwright-lighthouse] package, I don't know where exactly to pass the config, even though I am running a CDP session I don't see a difference in lighthouse metrics report when run on slow 3g, the results are same as in default network condition, as the lighthouse itself uses some simulation throttling so do not know how to override that, as the requirement is to run the test case in different network conditions and see if there are differences in performances metrics of lighthouse report when run on different network conditions.

test('lighthouse playwright metrics uisng slow 3g network condition', async ({ playwright }) => {
  const browser = await playwright.chromium.launch({
    args: ['--remote-debugging-port=9223'],
  });
  const context = await browser.newContext();
  const pageNum = await context.newPage();
  const cdpSession = await context.newCDPSession(pageNum);

  await cdpSession.send('Network.emulateNetworkConditions',{
  offline:false,
  downloadThroughput: ((500 * 1000) / 8) * 0.8,
  uploadThroughput: ((500 * 1000) / 8) * 0.8,
  latency: 400 * 5,
});

  await pageNum.goto(HOME_PAGE_URL, { waitUntil: 'networkidle' });
  const report = await playAudit({
    page: pageNum,
    thresholds: {
      performance: 50,
    },
    reports: {
      formats: { html: true },
      name: 'playwright-lighthouse-report slow 3g',
      directory: './e2e/playwright-lighthouse-report-' + Date.now().toString(),
    },
    port: 9223,
  });

  expect(report.lhr.audits['cumulative-layout-shift'].numericValue).toBeLessThan(CUMULATIVE_LAYOUT_SHIFT);
  expect(report.lhr.audits['first-contentful-paint'].numericValue).toBeLessThan(FIRST_CONTENTFUL_PAINT_THRESHOLD);
  expect(report.lhr.audits['speed-index'].numericValue).toBeLessThan(SPEED_INDEX_THRESHOLD);
  expect(report.lhr.audits['largest-contentful-paint'].numericValue).toBeLessThan(LARGEST_CONTENTFUL_PAINT_THRESHOLD);
  expect(report.lhr.audits['interactive'].numericValue).toBeLessThan(TIME_TO_INTERACTIVE_THRESHOLD);
  expect(report.lhr.audits['max-potential-fid'].numericValue).toBeLessThan(FIRST_INPUT_DELAY_THRESHOLD);
});

Upvotes: 3

Views: 2320

Answers (1)

Zurab Kvirikashvili
Zurab Kvirikashvili

Reputation: 1

I was able to apply throttling by importing desktop/mobile configs from lighthouse package (v9.6.8):

import constants from 'lighthouse/lighthouse-core/config/constants.js';
import lighthouseDesktopConfig from 'lighthouse/lighthouse-core/config/lr-desktop-config.js';
import lighthouseMobileConfig from 'lighthouse/lighthouse-core/config/lr-mobile-config.js';
import { playAudit } from 'playwright-lighthouse';
import * as test from '@playwright/test';

// ...

test('my test', () => {
    const browser = await test.chromium.launch({
      args: [
        `--remote-debugging-port=${port}`,
        '--hide-scrollbars',
        '--disable-gpu',
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--disable-web-security',
        '--ignore-certificate-errors'
      ],
    });
    const page = await browser.newPage();
    await page.goto('www.google.com');
    // throttling numbers can be modified like this:
    // lighthouseMobileConfig.settings.throttling = constants.throttling.mobileSlow4G;
    await playAudit({
      // ...
      config: profile === 'desktop' ? lighthouseDesktopConfig : lighthouseMobileConfig,
      // ...
    });
});

In later version (e.g. 12.0.0) you'll need to modify imports a little bit, as the folder structure of the npm package has changed.

import { throttling } from 'lighthouse/core/config/constants.js';
import lighthouseDesktopConfig from 'lighthouse/core/config/lr-desktop-config.js';
import lighthouseMobileConfig from 'lighthouse/core/config/lr-mobile-config.js';

Upvotes: 0

Related Questions