Lighthouse user flows with Cypress

[manishco]

Firstly, thank you all for sharing such an awesome feature.

We are exploring lighthouse user flows and thought it would be good if we could introduce this into our existing cypress tests. So after a test suite has run we would have all the user flows in a lovely report or as data for other uses.

After trying to introduce this we faced a blocker which is around the startFlow method it expects the page object and Cypress runs inside an iframe. For fun we did try passing the frame to the method but obviously that did not work. Wondering if there any plans to support working off an iframe or if what we are trying to do is odd.

The alternative would be to inject the webvital js script and try with that but we would not get the luxury of the lighthouse report (or can we?).

I saw this question/answer #12340 linking to this issue #11313 but could not pinpoint any work work around iframes or cypress.

[adamraine]

We only support user flows with Puppeteer, cypress is not officially supported. The page parameter on startFlow is expecting a Puppeteer page object.

There are some potential workarounds if you want to be a trailblazer:

• Users flows and Playwright #13326 discussed using playwright with a hacky workaround but never confirmed that it worked.
• I found Calling puppeteer from cypress cypress-io/cypress#2427 which discusses using Puppeteer in a cypress test. Might lead to a potential solution that runs Lighthouse in tandem with Puppeteer and Cypress.

[manishco]

Thank you for your time and response. I have pushed my approach so you and others can see where I have got to. https://github.com/manishco/poc-lighthouse-flow-with-cypress

I can confirm I am using the puppeteer page object, see: https://github.com/manishco/poc-lighthouse-flow-with-cypress/blob/c19dc69c77e56bd5e7dc4d899fa27b0c1b91b195/lighthouse/createLighthouseContext.js#L18.

The playwright issue you linked to does indeed line up with the first issue I was getting when I tried to pass the puppeteer frame object instead. I will do some more exploration to see what a CDPSession is and what it is used for.

Here is the output of the lighthouse user flow: