docs(user-flows): update api usage (#13826)

docs/user-flows.md

@@ -47,12 +47,12 @@ This callback function _must_ perform an action that will trigger a navigation.
 ```js
 import {writeFileSync} from 'fs';
 import puppeteer from 'puppeteer';
-import lighthouse from 'lighthouse';
+import api from 'lighthouse/lighthouse-core/fraggle-rock/api.js';
 
 async function main() {
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
-  const flow = await lighthouse.startFlow(page);
+  const flow = await api.startFlow(page);
 
   // Navigate with a URL
   await flow.navigate('https://example.com');
@@ -64,7 +64,7 @@ async function main() {
 
   await browser.close();
 
-  writeFileSync('report.html', flow.generateReport());
+  writeFileSync('report.html', await flow.generateReport());
 }
 
 main();
@@ -95,13 +95,13 @@ Timespan reports analyze an arbitrary period of time, typically containing user
 ```js
 import {writeFileSync} from 'fs';
 import puppeteer from 'puppeteer';
-import lighthouse from 'lighthouse';
+import api from 'lighthouse/lighthouse-core/fraggle-rock/api.js';
 
 async function main() {
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
   await page.goto('https://example.com');
-  const flow = await lighthouse.startFlow(page);
+  const flow = await api.startFlow(page);
 
   await flow.beginTimespan();
   await page.type('#username', 'lighthouse');
@@ -112,7 +112,7 @@ async function main() {
 
   await browser.close();
 
-  writeFileSync('report.html', flow.generateReport());
+  writeFileSync('report.html', await flow.generateReport());
 }
 
 main();
@@ -141,20 +141,20 @@ Snapshot reports analyze the page in a particular state, typically after the use
 ```js
 import {writeFileSync} from 'fs';
 import puppeteer from 'puppeteer';
-import lighthouse from 'lighthouse';
+import api from 'lighthouse/lighthouse-core/fraggle-rock/api.js';
 
 async function main() {
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
   await page.goto('https://example.com');
-  const flow = await lighthouse.startFlow(page);
+  const flow = await api.startFlow(page);
 
   await page.click('#expand-sidebar');
   await flow.snapshot();
 
   await browser.close();
 
-  writeFileSync('report.html', flow.generateReport());
+  writeFileSync('report.html', await flow.generateReport());
 }
 
 main();
@@ -197,7 +197,7 @@ The below example codifies a user flow for an ecommerce site where the user navi
 import {writeFileSync} from 'fs';
 import puppeteer from 'puppeteer';
 import * as pptrTestingLibrary from 'pptr-testing-library';
-import lighthouse from 'lighthouse';
+import api from 'lighthouse/lighthouse-core/fraggle-rock/api.js';
 
 const {getDocument, queries} = pptrTestingLibrary;
 
@@ -211,17 +211,11 @@ async function search(page) {
   ]);
 }
 
-async function getDetailsHref(page) {
-  const $document = await getDocument(page);
-  const $link = await queries.getByText($document, /Xbox Series X 1TB Console/);
-  return $link.evaluate(node => node.href);
-}
-
 async function main() {
   // Setup the browser and Lighthouse.
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
-  const flow = await lighthouse.startFlow(page);
+  const flow = await api.startFlow(page);
 
   // Phase 1 - Navigate to our landing page.
   await flow.navigate('https://www.bestbuy.com');
@@ -235,12 +229,16 @@ async function main() {
   await flow.snapshot();
 
   // Phase 4 - Navigate to a detail page.
-  await flow.navigate(await getDetailsHref(page));
+  await flow.navigate(async () => {
+    const $document = await getDocument(page);
+    const $link = await queries.getByText($document, /Xbox Series X 1TB Console/);
+    $link.click();
+  });
 
   // Get the comprehensive flow report.
-  writeFileSync('report.html', flow.generateReport());
+  writeFileSync('report.html', await flow.generateReport());
   // Save results as JSON.
-  writeFileSync('flow-result.json', JSON.stringify(flow.getFlowResult(), null, 2));
+  writeFileSync('flow-result.json', JSON.stringify(await flow.createFlowResult(), null, 2));
 
   // Cleanup.
   await browser.close();