Users flows and Playwright

[tyler-graham-ck]

Hello 👋 Very excited about the introduction of user flows. I've been wanting something like this for awhile.

Today I tried to see if I could get it to work with Playwright since the api is mostly similar to Puppeteer. Alas, it was not meant to be. I believe this mainly comes down to the way the CDP session is created is slightly different.

lighthouse/lighthouse-core/fraggle-rock/gather/driver.js

Line 74 in 68ba77a

const session = await this._page.target().createCDPSession();

Playwright CDP docs

Would it make sense to introduce an overload where instead of passing a Page you pass in a CDPSession? Then, even if puppeteer and playwright's api's continue to diverge, we can make an adapter in userspace

[paulirish]

Would it make sense to introduce an overload where instead of passing a Page you pass in a CDPSession? Then, even if puppeteer and playwright's api's continue to diverge, we can make an adapter in userspace

This seems possible, but I'm also a little suspicious that literally everything else is compatible except for this call. :) I'd be happy for you to explore this a bit more and tell us, though.

In the meantime, you could monkeypatch your playwright page API so that you get past this bit.. something gross like

page.target = _ => ({
	createCDPSession: page.context().newCDPSession(page)
});

.. might just work?

[brendankenny]

It's possible they could be bridged at a lower level, taking the Playwright session's channel and wrapping it with a Puppeteer session. Fundamentally they're both talking via the protocol and any incompatibilities are in the wrappers, so that would solve things like how events are emitted in javascript, lifecycle, etc.

Then there would remain the more subtle problems that come from sharing a protocol connection between different clients (e.g. one client has no idea what the other client has already set up, etc).

[tyler-graham-ck]

There did end up being another issue. Playwright's CDPSession doesn't have connection() on it. For the sake of just trying things out I remove .connection() from

lighthouse/lighthouse-core/fraggle-rock/gather/session.js

Line 99 in 68ba77a

this._session.connection().on('sessionattached', listener);

and

lighthouse/lighthouse-core/fraggle-rock/gather/session.js

Line 109 in 68ba77a

this._session.connection().off('sessionattached', listener);

Annnnd with the patch Paul suggested it does produce a report and the values are about what I would expect 🎉

I'll go open I opened an issue with playwright to update their api.

Off topic, something interesting I noted, I'm basically testing this with a login flow I already have. For the transition to the login state to be picked up I had to add another flow.navigate call. I suspected that would be the case but wasn't sure. I think it would be nice to have an option, if there isn't already, to capture each navigation until network idle.

[xbhoneybee]

@tyler-graham-ck did you use flow in playwright finally?

[hylickipiotr]

@tyler-graham-ck any updates?

[hylickipiotr]

In my case, the integration between Playwright and Lighthouse is only partially successful. The snapshot reports work as expected, but there is an issue with the navigation reports and timespan reports. I am encountering difficulties in listening to the CDPSession events by Lighthouse. Normally, these events are present in the communication, but for some reason, Lighthouse does not seem to detect them.

I delved into the source code of Lighthouse, and my investigation led me to the function waitForFullyLoaded, specifically in resolving all promises. However, all promises remain in a pending state even after the page has loaded.

https://github.com/GoogleChrome/lighthouse/blob/main/core/gather/driver/wait-for-condition.js#L452-L457

If you have any insights or suggestions on how to address this issue, I would greatly appreciate your input.