From 9042edbdff44b86aefcfe5bd15de733f309330e1 Mon Sep 17 00:00:00 2001 From: Adam Raine <6752989+adamraine@users.noreply.github.com> Date: Fri, 15 Jul 2022 18:06:40 -0400 Subject: [PATCH] docs: update puppeteer auth example for 10.0 (#14195) --- docs/recipes/auth/README.md | 22 +++++--------- docs/recipes/auth/example-lh-auth.js | 29 ++++++++----------- .../integration-test/example-lh-auth.test.js | 10 +++---- 3 files changed, 24 insertions(+), 37 deletions(-) diff --git a/docs/recipes/auth/README.md b/docs/recipes/auth/README.md index 346bd85c32fc..c011146e4bd8 100644 --- 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 index 9aaa30cb59cd..a7cae9208e34 100644 --- a/docs/recipes/auth/example-lh-auth.js +++ b/docs/recipes/auth/example-lh-auth.js @@ -13,15 +13,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}); @@ -34,36 +30,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(); @@ -72,7 +67,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 index 2142c1d2feba..9c67c32ed011 100644 --- a/docs/recipes/integration-test/example-lh-auth.test.js +++ b/docs/recipes/integration-test/example-lh-auth.test.js @@ -97,8 +97,8 @@ describe('my site', () => { }); afterEach(async () => { + await logout(page, ORIGIN); await page.close(); - await logout(browser, ORIGIN); }); describe('/ logged out', () => { @@ -119,14 +119,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"]'); @@ -144,14 +144,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'); });