Options, Thresholds and Config in cypress.json (#132)

Author: Marvin Frachet

examples/cra-authenticated/cypress.json

@@ -1,4 +1,16 @@
 {
   "baseUrl": "http://localhost:3000",
-  "video": false
+  "video": false,
+  "lighthouse": {
+    "options": {
+      "formFactor": "desktop",
+      "screenEmulation": {
+        "width": 500,
+        "height": 940,
+        "deviceScaleRatio": 1,
+        "mobile": false,
+        "disable": false
+      }
+    }
+  }
 }

examples/cra-authenticated/cypress/integration/examples/homepage.spec.js

@@ -22,7 +22,7 @@ context("The App", () => {
 
     cy.lighthouse({
       performance: 50,
-      "first-contentful-paint": 3000,
+      "first-contentful-paint": 3500,
       accessibility: 50,
       "best-practices": 50,
       seo: 50,

examples/cra-authenticated/package-lock.json

@@ -105,11 +105,13 @@ While I would recommend to make per-test assumptions, it's possible to define ge
 ```json
 {
   "lighthouse": {
-    "performance": 85,
-    "accessibility": 50,
-    "best-practices": 85,
-    "seo": 85,
-    "pwa": 50
+    "thresholds": {
+      "performance": 85,
+      "accessibility": 50,
+      "best-practices": 85,
+      "seo": 85,
+      "pwa": 50
+    }
   }
 }
 ```
@@ -136,6 +138,25 @@ const lighthouseConfig = {
 cy.lighthouse(thresholds, lighthouseOptions, lighthouseConfig);
 ```
 
+## Globally set options and configs
+
+You can set default `lighthouseOptions` and `lighthouseConfig` to your `cypress.json` file using:
+
+```json
+{
+  "lighthouse": {
+    "options": {
+      /* put your options here, like formFactor by default */
+    },
+    "config": {
+      /* put your config here */
+    }
+  }
+}
+```
+
+These values can be override at the test level.
+
 ### Available metrics
 
 With Lighthouse 6, we're now able to make assumptions on **categories** and **audits**.

packages/lighthouse/README.md

@@ -21,7 +21,18 @@ const lighthouseCommandHandler = (thresholds, opts, config) => {
   }
 
   return cy.url().then((url) => {
-    const configThresholds = Cypress.config("lighthouse");
+    // Handling the default value in cypress.json for "thresholds", "config" and "options"
+    const lighthouseConfig = Cypress.config("lighthouse");
+
+    const configThresholds = lighthouseConfig
+      ? lighthouseConfig.thresholds
+      : undefined;
+
+    const globalOptions = lighthouseConfig
+      ? lighthouseConfig.options
+      : undefined;
+
+    const globalConfig = lighthouseConfig ? lighthouseConfig.config : undefined;
 
     if (!thresholds && !configThresholds) {
       cy.log(
@@ -35,8 +46,8 @@ const lighthouseCommandHandler = (thresholds, opts, config) => {
       .task("lighthouse", {
         url,
         thresholds: thresholds || configThresholds || defaultThresholds,
-        opts,
-        config,
+        opts: opts || globalOptions,
+        config: config || globalConfig,
       })
       .then(({ errors, results }) => {
         results.forEach((res) => {