SessionStorage values not honored in new Lighthouse tab

[olyhaa-aetna]

What does not work?
Values in window.sessionStorage are not copied to the new tab when the Lighthouse audit is executed.

How to reproduce?

1. Create a page (/myPage) that requires a specific value in window.sessionStorage in order to render its contents
2. In the Cypress test, set the session storage value (i.e. window.sessionStorage.setItem("my_item", "my_value")) so that the page can be rendered properly
3. Visit the page within the Cypress test (cy.visit("/myPage"))
4. Run Lighthouse on /myPage (cy.lighthouse())

For a runnable example, see https://github.com/olyhaa-aetna/simple-auth-example.

This repository has a sample app with two pages

1. welcomePage - This page requires no authentication and has a login button. When the login button is clicked, a value is saved to the browser's sessionStorage and we are redirected to /secondPage.
2. secondPage - This page requires "authentication" (a value stored in sessionStorage). If no such value is found, we will be redirected to welcomePage.

This repository has one Cypress test that will run Lighthouse on both of these two pages. Results are stored as html in cypress/test-results. To run the test, execute npm run cy:open and launch the test file.

Lighthouse is run for both pages, however, both the reports (found in cypress/test-results) are only showing results for the welcomePage. When the audit for secondPage is run, the new tab is redirected to welcomePage since no value is found in sessionStorage. The audit is then run agains welcomePage.

Expected behavior
I want to run Lighthouse on secondPage.

The Cypress test performs the necessary Cypress commands to "log in" the user (which will save a value to sessionStorage). We can see that the secondPage is rendered properly in the original tab of Cypress viewer. When the new tab is opened to perform the Lighthouse audit, I want to see this secondPage visible, and I want the Lighthouse report to reflect this secondPage URL.

Instead, when the new tab is opened, we see the welcomePage.

Environment:

• OS: Mac
• Chrome version: 96.0.4664.93
• Cypress version: 9.1.1

Any other information that may help fixing the issue?
Two possible solutions (although I'm not sure how feasible they are):

1. When a new tab is opened within Cypress, copy over any values in sessionStorage from the existing tab to the new tab.
2. Provide a way to run commands in the new tab before the lighthouse audit is run.

[MuckT]

@olyhaa-aetna Can you try with the workaround from this issue #65 (comment)?

[olyhaa-aetna]

Hi @MuckT!

It looks like that workaround uses localStorage to remember login credentials between tests. However, our app uses sessionStorage.

We already have the tokens in the sessionStorage carry over in-between tests via running in the before/ after of each test. This seems to be working fine (from the perspective of the Cypress tests). However, these are not run in the new Lighthouse tab, so the session data is not transferred over.

We are never visiting an external url for authentication - we just store a mocked token in the sessionStorage.

[mfrachet]

I'll try to take a look when I'll have some spare time 😊 New job is taking a bunch of my time 😅 (and thank you for the complete issue and explanations, really appreciated 🙏🏻 )

[olyhaa-aetna]

As an update....

I have found a workaround by using Lighthouse's custom gatherers/audits. There's a lifecycle hook in the custom gatherer (beforePass) that runs in the new tab before the url is visited for the audit. At this point, we can add in any needed sessionStorage values which will be present on the tab once the url is visited / app is loaded.

I'll update my repo I referenced above with the workaround and post here once that's done. Examples are usually helpful!

That all being said, it would be really cool if this plugin had an option to pass in a function that could run in the new Lighthouse before visiting the URL without having to implement this fake custom gatherer / audit. I'll leave that decision up to you :)

[olyhaa-aetna]

https://github.com/olyhaa-aetna/simple-auth-example has been updated to include the custom gatherer and audit which populates sessionStorage with values before the Lighthouse scan is run.

[mfrachet]

Oh wow, very nice workaround 🤯 . And thank you so much for providing this exampe 🙏🏻 . Would you mind if we (you or I, depending if you want to make the PR) add a link to the example to orientate people that are using session storage?

Thanks for the amazing example, again 🙏🏻

[mfrachet]

I'm closing this issue since you've found a way to fix it. I will add a link to your repo in the documentation :)