core(bf-cache): add warning and hide when using old headless

core/audits/bf-cache.js

@@ -26,6 +26,8 @@
   failureReasonColumn: 'Failure reason',
   /** Label for a column in a data table; entries in the column will be a string representing the type of failure preventing the back/forward cache from being used. */
   failureTypeColumn: 'Failure type',
+  /** Warning explaining that the back/forward cache results cannot be shown in the old Headless Chrome. "back/forward" refers to the back and forward buttons found in modern browsers. "Headless Chrome" is a product name and should not be translated. */
+  warningHeadless: 'Back/forward cache cannot be tested in old Headless Chrome (`--chrome-flags="--headless=old"`). To see audit results, use the new Headless Chrome (`--chrome-flags="--headless=new"`) or standard Chrome.',
   /**
    * @description [ICU Syntax] Label for an audit identifying the number of back/forward cache failure reasons found in the page.
    */
@@ -60,7 +62,7 @@
       description: str_(UIStrings.description),
       supportedModes: ['navigation', 'timespan'],
       guidanceLevel: 2,
-      requiredArtifacts: ['BFCacheFailures'],
+      requiredArtifacts: ['BFCacheFailures', 'HostProduct'],
       scoreDisplayMode: Audit.SCORING_MODES.BINARY,
     };
   }
@@ -70,6 +72,14 @@
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts) {
+    if (/HeadlessChrome/.test(artifacts.HostProduct)) {
+      return {
+        score: null,
+        notApplicable: true,
+        warnings: [str_(UIStrings.warningHeadless)],
+      };
+    }
+
     const failures = artifacts.BFCacheFailures;
     if (!failures.length) return {score: 1};
 

core/config/filters.js

@@ -20,6 +20,7 @@ const baseArtifactKeySource = {
   PageLoadError: '',
   HostFormFactor: '',
   HostUserAgent: '',
+  HostProduct: '',
   GatherContext: '',
 };
 

core/gather/base-artifacts.js

@@ -19,7 +19,7 @@ import {
  */
 async function getBaseArtifacts(resolvedConfig, driver, context) {
   const BenchmarkIndex = await getBenchmarkIndex(driver.executionContext);
-  const {userAgent} = await getBrowserVersion(driver.defaultSession);
+  const {userAgent, product} = await getBrowserVersion(driver.defaultSession);
 
   return {
     // Meta artifacts.
@@ -32,6 +32,7 @@ async function getBaseArtifacts(resolvedConfig, driver, context) {
     HostUserAgent: userAgent,
     HostFormFactor: userAgent.includes('Android') || userAgent.includes('Mobile') ?
       'mobile' : 'desktop',
+    HostProduct: product,
     // Contextual artifacts whose collection changes based on gather mode.
     URL: {
       finalDisplayedUrl: '',

core/test/audits/bf-cache-test.js

@@ -10,6 +10,7 @@ describe('BFCache audit', () => {
   it('fails if there are actionable failure reasons', async () => {
     /** @type {any} */
     const artifacts = {
+      HostProduct: 'Chrome/109.0.5000.0',
       BFCacheFailures: [{
         notRestoredReasonsTree: {
           PageSupportNeeded: {
@@ -62,6 +63,7 @@ describe('BFCache audit', () => {
   it('fails if there are only non-actionable failures', async () => {
     /** @type {any} */
     const artifacts = {
+      HostProduct: 'Chrome/109.0.5000.0',
       BFCacheFailures: [{
         notRestoredReasonsTree: {
           PageSupportNeeded: {},
@@ -84,9 +86,39 @@ describe('BFCache audit', () => {
     expect(result.details.items).toHaveLength(2);
   });
 
+  it('is n/a if using old headless', async () => {
+    /** @type {any} */
+    const artifacts = {
+      HostProduct: 'HeadlessChrome/109.0.5000.0',
+      BFCacheFailures: [{
+        notRestoredReasonsTree: {
+          PageSupportNeeded: {},
+          Circumstantial: {
+            BackForwardCacheDisabled: ['https://example.com'],
+          },
+          SupportPending: {
+            CacheControlNoStore: ['https://frame.com'],
+          },
+        },
+      }],
+    };
+
+    const result = await BFCache.audit(artifacts);
+
+    expect(result.displayValue).toBeUndefined();
+    expect(result.score).toEqual(null);
+    expect(result.details).toBeUndefined();
+
+    expect(result.warnings).toHaveLength(1);
+    expect(result.warnings?.[0]).toBeDisplayString(
+      /Back\/forward cache cannot be tested in old Headless/
+    );
+  });
+
   it('passes if there are no failures', async () => {
     /** @type {any} */
     const artifacts = {
+      HostProduct: 'Chrome/109.0.5000.0',
       BFCacheFailures: [{
         notRestoredReasonsTree: {
           PageSupportNeeded: {},

core/test/fixtures/user-flows/artifacts/step0/artifacts.json

@@ -495,7 +495,12 @@
     "emulatedUserAgent": "Mozilla/5.0 (Linux; Android 11; moto g power (2022)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Mobile Safari/537.36",
     "auditMode": false,
     "gatherMode": false,
-    "clearStorageTypes": ["file_systems", "shader_cache", "service_workers", "cache_storage"],
+    "clearStorageTypes": [
+      "file_systems",
+      "shader_cache",
+      "service_workers",
+      "cache_storage"
+    ],
     "disableStorageReset": false,
     "debugNavigation": false,
     "channel": "node",
@@ -20698,5 +20703,6 @@
       }
     ],
     "labels": []
-  }
+  },
+  "HostProduct": "Chrome/121.0.6110.0"
 }

core/test/fixtures/user-flows/artifacts/step1/artifacts.json

@@ -287,7 +287,12 @@
     "emulatedUserAgent": "Mozilla/5.0 (Linux; Android 11; moto g power (2022)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Mobile Safari/537.36",
     "auditMode": false,
     "gatherMode": false,
-    "clearStorageTypes": ["file_systems", "shader_cache", "service_workers", "cache_storage"],
+    "clearStorageTypes": [
+      "file_systems",
+      "shader_cache",
+      "service_workers",
+      "cache_storage"
+    ],
     "disableStorageReset": false,
     "debugNavigation": false,
     "channel": "node",
@@ -10923,5 +10928,6 @@
       }
     }
   },
-  "BFCacheFailures": []
+  "BFCacheFailures": [],
+  "HostProduct": "Chrome/121.0.6110.0"
 }

core/test/fixtures/user-flows/artifacts/step2/artifacts.json

@@ -207,7 +207,12 @@
     "emulatedUserAgent": "Mozilla/5.0 (Linux; Android 11; moto g power (2022)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Mobile Safari/537.36",
     "auditMode": false,
     "gatherMode": false,
-    "clearStorageTypes": ["file_systems", "shader_cache", "service_workers", "cache_storage"],
+    "clearStorageTypes": [
+      "file_systems",
+      "shader_cache",
+      "service_workers",
+      "cache_storage"
+    ],
     "disableStorageReset": false,
     "debugNavigation": false,
     "channel": "node",
@@ -5716,5 +5721,6 @@
       }
     ],
     "labels": []
-  }
+  },
+  "HostProduct": "Chrome/121.0.6110.0"
 }

core/test/fixtures/user-flows/artifacts/step3/artifacts.json

@@ -479,7 +479,12 @@
     "emulatedUserAgent": "Mozilla/5.0 (Linux; Android 11; moto g power (2022)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Mobile Safari/537.36",
     "auditMode": false,
     "gatherMode": false,
-    "clearStorageTypes": ["file_systems", "shader_cache", "service_workers", "cache_storage"],
+    "clearStorageTypes": [
+      "file_systems",
+      "shader_cache",
+      "service_workers",
+      "cache_storage"
+    ],
     "disableStorageReset": true,
     "debugNavigation": false,
     "channel": "node",
@@ -20622,5 +20627,6 @@
         }
       }
     ]
-  }
+  },
+  "HostProduct": "Chrome/121.0.6110.0"
 }

core/test/gather/mock-driver.js

@@ -224,7 +224,8 @@ function createMockBaseArtifacts() {
     LighthouseRunWarnings: [],
     Timing: [],
     HostFormFactor: 'desktop',
-    HostUserAgent: 'Chrome/93.0.1449.0',
+    HostUserAgent: 'Chrome/93.0.0.0',
+    HostProduct: 'Chrome/93.0.1449.0',
     GatherContext: {gatherMode: 'navigation'},
   };
 }

core/test/results/artifacts/artifacts.json

@@ -64,7 +64,12 @@
     "emulatedUserAgent": "Mozilla/5.0 (Linux; Android 11; moto g power (2022)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Mobile Safari/537.36",
     "auditMode": false,
     "gatherMode": "core/test/results/artifacts",
-    "clearStorageTypes": ["file_systems", "shader_cache", "service_workers", "cache_storage"],
+    "clearStorageTypes": [
+      "file_systems",
+      "shader_cache",
+      "service_workers",
+      "cache_storage"
+    ],
     "disableStorageReset": false,
     "debugNavigation": false,
     "channel": "cli",
@@ -13195,5 +13200,6 @@
         "SupportPending": {}
       }
     }
-  ]
+  ],
+  "HostProduct": "Chrome/121.0.6110.0"
 }

types/artifacts.d.ts

@@ -53,6 +53,8 @@ interface UniversalBaseArtifacts {
   HostFormFactor: 'desktop'|'mobile';
   /** The user agent string of the version of Chrome used. */
   HostUserAgent: string;
+  /** The product string of the version of Chrome used. */
+  HostProduct: string;
   /** Information about how Lighthouse artifacts were gathered. */
   GatherContext: {gatherMode: Gatherer.GatherMode};
 }