docs: update puppeteer auth example for 10.0 (#14195)

adamraine · adamraine · commit 510320c28350 · 2022-08-24T13:53:42.000-07:00
diff --git a/docs/recipes/auth/README.md b/docs/recipes/auth/README.md
@@ -35,28 +35,25 @@ What does this do?  Read on....
 
 ## Process
 
-Puppeteer - a browser automation tool - can be used to programatically setup a session.
+Puppeteer - a browser automation tool - can be used to programmatically setup a session.
 
 1. Launch a new browser.
 1. Navigate to the login page.
 1. Fill and submit the login form.
 1. Run Lighthouse using the same browser.
 
-First, launch Chrome:
+First, launch Chrome and create a new page:
 ```js
-// This port will be used by Lighthouse later. The specific port is arbitrary.
-const PORT = 8041;
 const browser = await puppeteer.launch({
-  args: [`--remote-debugging-port=${PORT}`],
   // Optional, if you want to see the tests in action.
   headless: false,
   slowMo: 50,
 });
+const page = await browser.newPage();
 ```
 
 Navigate to the login form:
 ```js
-const page = await browser.newPage();
 await page.goto('http://localhost:10632');
 ```
 
@@ -89,18 +86,13 @@ await Promise.all([
 
 At this point, the session that Puppeteer is managing is now logged in.
 
-Close the page used to log in:
-```js
-await page.close();
-// The page has been closed, but the browser still has the relevant session.
-```
-
-Now run Lighthouse, using the same port as before:
+Now run Lighthouse, using the same page as before:
 ```js
 // The local server is running on port 10632.
 const url = 'http://localhost:10632/dashboard';
-// Direct Lighthouse to use the same port.
-const result = await lighthouse(url, {port: PORT, disableStorageReset: true});
+// Direct Lighthouse to use the same page.
+// Disable storage reset so login session is preserved.
+const result = await lighthouse(url, {disableStorageReset: true}, undefined, page);
 const lhr = result.lhr;
 
 // Direct Puppeteer to close the browser - we're done with it.
diff --git a/docs/recipes/auth/example-lh-auth.js b/docs/recipes/auth/example-lh-auth.js
@@ -14,15 +14,11 @@ import puppeteer from 'puppeteer';
 import lighthouse from 'lighthouse';
 import esMain from 'es-main';
 
-// This port will be used by Lighthouse later. The specific port is arbitrary.
-const PORT = 8041;
-
 /**
- * @param {import('puppeteer').Browser} browser
+ * @param {puppeteer.Page} page
  * @param {string} origin
  */
-async function login(browser, origin) {
-  const page = await browser.newPage();
+async function login(page, origin) {
   await page.goto(origin);
   await page.waitForSelector('input[type="email"]', {visible: true});
 
@@ -35,36 +31,35 @@ async function login(browser, origin) {
     page.$eval('.login-form', form => form.submit()),
     page.waitForNavigation(),
   ]);
-
-  await page.close();
 }
 
 /**
- * @param {puppeteer.Browser} browser
+ * @param {puppeteer.Page} page
  * @param {string} origin
  */
-async function logout(browser, origin) {
-  const page = await browser.newPage();
+async function logout(page, origin) {
   await page.goto(`${origin}/logout`);
-  await page.close();
 }
 
 async function main() {
   // Direct Puppeteer to open Chrome with a specific debugging port.
   const browser = await puppeteer.launch({
-    args: [`--remote-debugging-port=${PORT}`],
     // Optional, if you want to see the tests in action.
     headless: false,
     slowMo: 50,
   });
+  const page = await browser.newPage();
 
   // Setup the browser session to be logged into our site.
-  await login(browser, 'http://localhost:10632');
+  await login(page, 'http://localhost:10632');
 
   // The local server is running on port 10632.
   const url = 'http://localhost:10632/dashboard';
-  // Direct Lighthouse to use the same port.
-  const result = await lighthouse(url, {port: PORT, disableStorageReset: true});
+
+  // Direct Lighthouse to use the same Puppeteer page.
+  // Disable storage reset so login session is preserved.
+  const result = await lighthouse(url, {disableStorageReset: true}, undefined, page);
+
   // Direct Puppeteer to close the browser as we're done with it.
   await browser.close();
 
@@ -73,7 +68,7 @@ async function main() {
 }
 
 if (esMain(import.meta)) {
-  main();
+  await main();
 }
 
 export {
diff --git a/docs/recipes/integration-test/example-lh-auth.test.js b/docs/recipes/integration-test/example-lh-auth.test.js
@@ -98,8 +98,8 @@ describe('my site', () => {
   });
 
   afterEach(async () => {
+    await logout(page, ORIGIN);
     await page.close();
-    await logout(browser, ORIGIN);
   });
 
   describe('/ logged out', () => {
@@ -120,14 +120,14 @@ describe('my site', () => {
 
   describe('/ logged in', () => {
     it('lighthouse', async () => {
-      await login(browser, ORIGIN);
+      await login(page, ORIGIN);
       await page.goto(ORIGIN);
       const lhr = await runLighthouse(page.url());
       expect(lhr).toHaveLighthouseScoreGreaterThanOrEqual('seo', 0.9);
     });
 
     it('login form should not exist', async () => {
-      await login(browser, ORIGIN);
+      await login(page, ORIGIN);
       await page.goto(ORIGIN);
       const emailInput = await page.$('input[type="email"]');
       const passwordInput = await page.$('input[type="password"]');
@@ -145,14 +145,14 @@ describe('my site', () => {
 
   describe('/dashboard logged in', () => {
     it('lighthouse', async () => {
-      await login(browser, ORIGIN);
+      await login(page, ORIGIN);
       await page.goto(`${ORIGIN}/dashboard`);
       const lhr = await runLighthouse(page.url());
       expect(lhr).toHaveLighthouseScoreGreaterThanOrEqual('seo', 0.9);
     });
 
     it('has secrets', async () => {
-      await login(browser, ORIGIN);
+      await login(page, ORIGIN);
       await page.goto(`${ORIGIN}/dashboard`);
       expect(await page.content()).toContain('secrets');
     });
