Attach to login popup window

[csharsha]

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

[adamraine]

flow.startTImespan and flow.endTimespan are async functions. You need to await them before moving on to the next step.

[csharsha]

flow.startTImespan and flow.endTimespan are async functions. You need to await them before moving on to the next step.

yes I have used await flow.startTimespan() and await flow.endTimespan() you can see in my code above. My question was how to attach and Measure Userflow performance matrix when a new browser window is opened.

[adamraine]

yes I have used await flow.startTimespan() and await flow.endTimespan()

The flow.endTimespan() doesn't have an await, which is why the Error is thrown.

My question was how to attach and Measure Userflow performance matrix when a new browser window is opened.

This isn't currently possible.

We don't (and likely won't) support attaching an entirely new user flow on the new page that runs simultaneously with the first user flow.

In the future, we might be able to measure pages created from window.open similar to how we measure iframes in the main page. I'll keep this issue open to track that since opening a new window for a login form seems like a pretty common flow pattern.

[csharsha]

@adamraine : Thanks for your reply. As of now I am connecting to the browser which is already opened with await puppeteer.connect using --remote-debugging-port.

similar to how we measure iframes in the main page

If measuring User Flow in iFrame is possible, can you please tell me how to do it?

[adamraine]

If measuring User Flow in iFrame is possible, can you please tell me how to do it?

Measuring a user flow only in an iframe is not possible. However, the impact of iframes is taken into account for the entire page during the user flow (e.g. Lighthouse measures analyzes network requests from iframes).