Lighthouse Testing Guide

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.

Chrome path

On some OS there could be a problem finding the path to Chrome.

The error looks like this: Runtime error encountered: No Chrome installations found.

To prevent this from happening you have to provide the path manually like this:

 if (platform === 'win32') {
    vi.stubEnv(
      'CHROME_PATH',
      'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
    );
  }

We added this as setup script in a beforeAll hook.

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

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

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

A helpful chromium setup 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.

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"

2. Check if the flag got accepted. This is quite unintuitive as we would expect the passed flag to be visible under chrome://flags/ but as you can see in the screen shot it is not visible.

Instead open `chrome://version/` and look under the "Command Line" section.

Resources

• https://www.chromium.org/developers/how-tos/run-chromium-with-flags/