test(plugin-lighthouse): add lighthouse CI flags to configs (#659)

code-pushup.config.ts

@@ -1,3 +1,4 @@
+import { DEFAULT_FLAGS } from 'chrome-launcher/dist/flags.js';
 import 'dotenv/config';
 import { z } from 'zod';
 import {
@@ -77,7 +78,9 @@ const config: CoreConfig = {
       type: 'module',
     }),
 
-    await lighthousePlugin('https://codepushup.dev/'),
+    await lighthousePlugin('https://codepushup.dev/', {
+      chromeFlags: DEFAULT_FLAGS.concat(['--headless']),
+    }),
   ],
 
   categories: [

examples/react-todos-app/code-pushup.config.js

@@ -1,7 +1,7 @@
+import { DEFAULT_FLAGS } from 'chrome-launcher/dist/flags.js';
 import coveragePlugin from '../../dist/packages/plugin-coverage';
 import eslintPlugin from '../../dist/packages/plugin-eslint';
 import lighthousePlugin, {
-  lighthouseAuditRef,
   lighthouseGroupRef,
 } from '../../dist/packages/plugin-lighthouse';
 
@@ -41,6 +41,7 @@ export default {
         // pwa category
         'installable-manifest',
       ],
+      chromeFlags: DEFAULT_FLAGS.concat(['--headless']),
     }),
   ],
   categories: [

package.json

@@ -97,6 +97,7 @@
     "@vitest/ui": "1.3.1",
     "benchmark": "^2.1.4",
     "chromium": "^3.0.3",
+    "chrome-launcher": "^1.1.1",
     "commitizen": "^4.3.0",
     "commitlint-plugin-tense": "^1.0.2",
     "conventional-changelog-angular": "^7.0.0",

packages/plugin-lighthouse/README.md

@@ -147,6 +147,18 @@ For a complete list the [official documentation of CLI flags](https://github.com
 > - `list-trace-categories` - Prints a list of all required trace categories and exits.
 > - `view` - Open HTML report in your browser
 
+## Chrome Flags for Tooling
+
+We recommend using Chrome flags for more stable runs in a tooling environment.
+The [`chrome-launcher`](https://www.npmjs.com/package/chrome-launcher) package provides a set of flags dedicated to tooling that they also documented very well.
+
+> ```ts
+> // code-pushup.config.ts
+> import { DEFAULT_FLAGS } from 'chrome-launcher/dist/flags.js';
+> ...
+> lighthousePlugin('https://example.com', { output: 'json', chromeFlags: DEFAULT_FLAGS });
+> ```
+
 ## Config
 
 The plugin accepts a third optional argument, `config`.

packages/plugin-lighthouse/src/index.ts

@@ -10,5 +10,6 @@ export {
   lighthouseGroupRef,
   LighthouseGroupSlugs,
 } from './lib/utils';
+export { LighthouseOptions } from './lib/types';
 export { lighthousePlugin } from './lib/lighthouse-plugin';
 export default lighthousePlugin;