Skip to content

Lighthouse Testing Guide

Jump to bottom
Michael Hladky edited this page Mar 17, 2024 · 7 revisions

Testing Lighthouse

In this plugin we provide Lighthouse functionality exposed over the lighthousePlugin. To e2e test lighthouse properly we work with a predefined testing setup.

Chromium User Data

To bootstrap chromium with a predefined for setting we have to provide a couple of config files that we located under <project-root>/mock/chromium-user-data. When executing Lighthouse we provide the path to this folder over the Flag object.

Setup and edit chromium user data

To generate initialise or edit the file structure under chromium-user-data do the following steps:

  1. Spin up chromium by running npx chrome-debug --user-data-dir=./packages/plugin-lighthouse/mock/chromium-user-data blank-screen

  2. If you do this the first time you should already see content under <project-root>/mock/chromium-user-data

  3. Edit the configuration over the chromium UI. E.g. adding a profile

  4. Close chromium and open it again, and you should see chromium bootstraps as the configured user blank-screen-pre-configured

To reset the above just delete the folder and apply the settings again.

Our chromium is preconfigured with the following settings:

  • A user profile is set up. This enables certain debugging related options as well as help to visually distinguish between test setups as the header bar is colored. settings-manage-profile

Testing chromium flags

  1. run npx chrome-debug --<chromium-flag> to pass terminal arguments to chromium. E.g. npx chrome-debug --headless=shell. npx chrome-debug --headless=shell --@TODO-PUT-OTHER-EXAMPLE-FOR-FLAG

For a full list of available flags check out this document.

Note

To pass chrome flags to lighthouse you have to provide them under --chrome-flags="<chrome-flags-as-array>". E.g. lighthouse https://example.com --chrome-flage="--headless=shell"

Clone this wiki locally