Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: update user-flow.md to reflect current release #14604

Merged
merged 4 commits into from
Dec 12, 2022
Merged

docs: update user-flow.md to reflect current release #14604

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
35b25e4
Update user-flow.md to reflect current release
ChristopherPHolder Dec 11, 2022
09b3b70
Update user-flows.md
ChristopherPHolder Dec 12, 2022
763f682
remove indentation
ChristopherPHolder Dec 12, 2022
6295785
docs(fix): remove referencer to lighthouse v10
ChristopherPHolder Dec 12, 2022
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 10 additions & 19 deletions docs/user-flows.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,12 @@ In DevTools, navigation is easy: ensure it's the selected mode and then click _A
```js
import {writeFileSync} from 'fs';
import puppeteer from 'puppeteer';
import lighthouse from 'lighthouse/core/api.js';
import {startFlow} from 'lighthouse/lighthouse-core/fraggle-rock/api.js';

(async function() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
const flow = await lighthouse.startFlow(page);
const flow = await startFlow(page);

// Navigate with a URL
await flow.navigate('https://example.com');
Expand All @@ -55,11 +55,6 @@ import lighthouse from 'lighthouse/core/api.js';
await page.click('a.link');
});

// Navigate with startNavigation/endNavigation
await flow.startNavigation();
await page.click('a.link');
await flow.endNavigation();

await browser.close();
writeFileSync('report.html', await flow.generateReport());
})();
Expand All @@ -75,8 +70,6 @@ Instead of providing a URL to navigate to, you can provide a callback function o

This callback function _must_ perform an action that will trigger a navigation. Any interactions completed before the callback promise resolves will be captured by the navigation.

The `startNavigation`/`endNavigation` functions _must_ surround an action that triggers a navigation. Any interactions completed after `startNavigation` is invoked and before `endNavigation` is invoked will be captured by the navigation.
ChristopherPHolder marked this conversation as resolved.
Show resolved Hide resolved

### Timespan

<img src="https://user-images.githubusercontent.com/39191/170560055-fb599418-c94d-44bf-9921-be4dce6abccf.png">
Expand All @@ -90,15 +83,15 @@ In DevTools, select "Timespan" as the mode and click _Start timespan_. Record wh
```js
import {writeFileSync} from 'fs';
import puppeteer from 'puppeteer';
import lighthouse from 'lighthouse/core/api.js';
import {startFlow} from 'lighthouse/lighthouse-core/fraggle-rock/api.js';

(async function() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://secret.login');
const flow = await lighthouse.startFlow(page);
const flow = await startFlow(page);

await flow.beginTimespan();
await flow.startTimespan();
ChristopherPHolder marked this conversation as resolved.
Show resolved Hide resolved
await page.type('#password', 'L1ghth0useR0cks!');
await page.click('#login');
await page.waitForSelector('#dashboard');
Expand All @@ -125,13 +118,13 @@ In DevTools, select "Snapshot" as the mode. Set up the page in the state you wan
```js
import {writeFileSync} from 'fs';
import puppeteer from 'puppeteer';
import lighthouse from 'lighthouse/core/api.js';
import {startFlow} from 'lighthouse/lighthouse-core/fraggle-rock/api.js';

(async function() {
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 startFlow(page);

await page.click('#expand-sidebar');
await flow.snapshot();
Expand Down Expand Up @@ -164,7 +157,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/core/api.js';
import {startFlow} from 'lighthouse/lighthouse-core/fraggle-rock/api.js';

const {getDocument, queries} = pptrTestingLibrary;

Expand All @@ -182,15 +175,13 @@ async function search(page) {
// Setup the browser and Lighthouse.
const browser = await puppeteer.launch();
const page = await browser.newPage();
const flow = await lighthouse.startFlow(page);
const flow = await startFlow(page);

// Phase 1 - Navigate to the landing page.
await flow.navigate('https://www.bestbuy.com');

// Phase 2 - Interact with the page and submit the search form.
await flow.startTimespan();
await search(page);
await flow.endTimespan();
await flow.navigate(async () => await search(page));
ChristopherPHolder marked this conversation as resolved.
Show resolved Hide resolved

// Phase 3 - Analyze the new state.
await flow.snapshot();
Expand Down