GoogleChrome / GoogleChrome/lighthouse

Attach to login popup window

Open
#14,225 5 comments 0 reactions 0 assignees View on GitHub
fraggle-rock P3
Dominant language
JavaScript
Stars
30.8k
Forks
9.8k
Avg merge
1d 14h
Merged PRs (30d)
20

Description

**Summary**

I am trying to open an URL in MSEdge browser to measure User-Flow performance analysis. Everything is going well when the application is single page. I have a login page and login button which launches new browser window after clicking it. Now when I try flow.startTimespan or flow.endTimeSpan on newly opened window, its not capturing anything in the report. How to attach and measure User flow performance analysis on newly opened browser window, or am I trying which is not possible in lighthouse.

Also if possible let me know Is there anyway I can attach puppeteer lighthouse to already opened browser window.

The code I tried is as follows.

```
const puppeteer = require("puppeteer");
const { startFlow } = require("lighthouse/lighthouse-core/fraggle-rock/api.js");
const fs = require('fs');
const { title } = require("process");

(async ()=> {
const browser = await puppeteer.launch({headless:false, executablePath: 'c:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe'});
const page = await browser.newPage();

const flow = await startFlow(page, {
name: 'App Home',
configContext:{
settingsOverrides: {
screenEmulation:{
mobile:false,
width:1920,
height:1080,
deviceScaleFactor: 1,
disabled:false,
},
formFactor:"desktop",
},
},
});

{

//await flow.navigate("http://appurl.aspx")

const targetPage = page;
const promises = [];
promises.push(targetPage.waitForNavigation());
await targetPage.goto("http://appurl.aspx");
await Promise.all(promises);
}

{

const targetPage= page;

const usernameTxtBox = await targetPage.waitForSelector("#txtUsername");
await usernameTxtBox.type("username1");

const passwordTxtBox = await targetPage.waitForSelector("#txtPassword");
await passwordTxtBox.type("************");

const loginBtn = await targetPage.waitForSelector("#btnLogin");
await flow.startTimespan({stepName: "User Login"});

await targetPage.waitForTimeout(3000);

const newWindowPromise = new Promise(x=>browser.once('targetcreated', target =>
x(target.page())));

await loginBtn.click();

const newWindow = await newWindowPromise;

await newWindow.waitForTimeout(5000);

await newWindow.waitForSelector("#iapptab_Frame_1_C22");

await wait_for_frame(newWindow);

flow.endTimespan();
}
//const report = flow.generateReport();
fs.writeFileSync('report1.html', await flow.generateReport());
await browser.close();
})();

```

**Error**
Need at least one step before getting result

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the Lighthouse flow API usage around startFlow, startTimespan, endTimespan, and generateReport in the provided JavaScript example. Reproduce the login click and targetcreated handling with Puppeteer, then verify whether the newly opened page can be included in the flow and whether report generation produces a completed step.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
performance, testing-qa, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.