How does lighthouse userflows work with webdriverio?

[SivasubramanianV]

Do we really need getpupeteer method to be called in webdriver io for lighthouse flows to work in wdio test?
Can anyone explain me how things work under the hood?

[adamraine]

I'm not familiar with WebdriverIO but I assume you are referring to getPuppeteer

Puppeteer is required because Lighthouse uses Puppeteer to connect to the page under the hood. Puppeteer is the only interface we currently support.

[SivasubramanianV]

Thanks Adam. When we manually run the lighthouse on google chrome browser, it does not need the pupeteer though right? So the lighthouse used in browser extension and the lighthouse used in wdio/pupeteer tests are different? my question might be basic as i dont have any idea on how it works? Would like to understand how it works.

[SivasubramanianV]

Especially was interested to know what really happens in below code.

describe('Dashboard Performance', () => {
  it('Lighthouse flow for booking class for member', async () => {
    const { className } = fakeData();
    const puppeteerBrowser = await browser.getPuppeteer();
    const page = (await puppeteerBrowser.pages())[0];

    const flow = await startFlow(page);

    await flow.startTimespan({ stepName: 'Login' });
    // WebdriverIO code - performs invitial browser.url navigations, filling in data across two pages
    await Dashboard.login();
    await flow.endTimespan();

    await flow.snapshot({ stepName: 'Logged in' });

    // create a 'member' via API
    const member = new Member();
    const { id: memberId } = await DashboardAPICalls.Members.create({ member });

    // create a class for member to book via API
    await DashboardAPICalls.Classes.createClass({ className });

    await flow.startTimespan({ stepName: 'Book Class' });
    // book class via WebdriverIO - multiple pages and clicks involved
    await Dashboard.bookClass({ member, className });
    await flow.endTimespan();
  }
}

We get pupeteer browser instance and get that page. We set lighthouse flow to track that page. So all the further steps, should we using using pupeteerbrowser instance instead of wdio browser? ex) to navigate, click etc. What if i use just flow.navigate(browser.url('some url')); will this still be tracked by lighthouse.. as it is not a pupeteer browser

[adamraine]

So the lighthouse used in browser extension and the lighthouse used in wdio/pupeteer tests are different?

No Lighthouse is the same between both. In certain clients (e.g. CLI, DevTools, browser extension) Lighthouse does the work of setting up a Puppeteer connection under the hood.

So all the further steps, should we using using pupeteerbrowser instance instead of wdio browser? ex) to navigate, click etc.

In general I don't think it should matter if you use wdio or puppeteer to control the page. Lighthouse will measure the result on the page not the specific actions taken to control it.

What if i use just flow.navigate(browser.url('some url')); will this still be tracked by lighthouse.. as it is not a pupeteer browser

I'm not sure what browser.url('som url') returns but flow.navigate will accept a page URL as a string.

[SivasubramanianV]

Thank you.