docs(recipes): update custom-gatherer-puppeteer to use FR (#13940)

adamraine · adamraine · commit 93529e196a4c · 2023-02-03T16:46:35.000-08:00
diff --git a/docs/recipes/custom-gatherer-puppeteer/custom-config.js b/docs/recipes/custom-gatherer-puppeteer/custom-config.js
@@ -5,12 +5,18 @@
  */
 
 export default {
-  passes: [{
-    passName: 'defaultPass',
-    gatherers: [
-      'custom-gatherer',
-    ],
-  }],
+  artifacts: [
+    {id: 'CustomGatherer', gatherer: 'custom-gatherer'},
+  ],
+
+  navigations: [
+    {
+      id: 'default',
+      artifacts: [
+        'CustomGatherer',
+      ],
+    },
+  ],
 
   audits: [
     'custom-audit',
diff --git a/docs/recipes/custom-gatherer-puppeteer/custom-gatherer.js b/docs/recipes/custom-gatherer-puppeteer/custom-gatherer.js
@@ -7,24 +7,15 @@
 /* global document */
 
 import {Gatherer} from 'lighthouse';
-import puppeteer from 'puppeteer';
-
-async function connect(driver) {
-  const browser = await puppeteer.connect({
-    browserWSEndpoint: await driver.wsEndpoint(),
-    defaultViewport: null,
-  });
-  const {targetInfo} = await driver.sendCommand('Target.getTargetInfo');
-  const puppeteerTarget = (await browser.targets())
-    .find(target => target._targetId === targetInfo.targetId);
-  const page = await puppeteerTarget.page();
-  return {browser, page, executionContext: driver.executionContext};
-}
 
 class CustomGatherer extends Gatherer {
-  async afterPass(options) {
-    const {driver} = options;
-    const {page, executionContext} = await connect(driver);
+  meta = {
+    supportedModes: ['navigation', 'timespan', 'snapshot'],
+  };
+
+  async getArtifact(context) {
+    const {driver, page} = context;
+    const {executionContext} = driver;
 
     // Inject an input field for our debugging pleasure.
     function makeInput() {
@@ -41,8 +32,6 @@ class CustomGatherer extends Gatherer {
     const value = await executionContext.evaluateAsync(`document.querySelector('input').value`);
     if (value !== '123') throw new Error('huh?');
 
-    // No need to close the browser or page. Puppeteer doesn't own either of them.
-
     return {value};
   }
 }
diff --git a/docs/recipes/custom-gatherer-puppeteer/test.sh b/docs/recipes/custom-gatherer-puppeteer/test.sh
@@ -3,6 +3,6 @@
 # Make sure we're in this `docs/recipes/customer-gatherer-puppeteer` directory
 cd "$(dirname "$0")"
 
-node node_modules/.bin/lighthouse --legacy-navigation --config-path=custom-config.js https://www.example.com --output=json |
+node node_modules/.bin/lighthouse --config-path=custom-config.js https://www.example.com --output=json |
   jq '.audits["custom-audit"].score' |
   grep -q 1
