Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Lighthouse dev tools - site with authentication

I'm trying to perform audit using Lighthouse DevTools. My site requires authentication. When I run the test the lighthouse logs me out and only anayses /login.

How can I get Lighthouse DevTools to analyse my site? Can I supply login credentials?

like image 944
Kermit Avatar asked Sep 19 '19 14:09

Kermit


2 Answers

If you are using local storage in order to preserve an authenticated state after refresh (for example storing a user's token, and on refresh using that token in order to login like a lot of SPA's) I found a solution that might work : https://github.com/GoogleChrome/lighthouse/issues/1418#issuecomment-397753583

If using chrome dev tools to run light house :

  • On the lighthouse tab in chrome dev tools simply click the settings icon
  • Uncheck the clear storage check box.
  • Generate the report, and on refresh it will use the local storage data therefore will keep you logged in.

If using the lighthouse cli tool :

  • Install and execute as explained in JoostS answer, just add to the lighthouse command the --disable-storage-reset flag , and you can also add the --view flag in order to open a tab for the report.

So the command will be :

lighthouse <url> --port <port_chrome_debugger_opened> --disable-storage-reset --view

Verifying it tested the logged in page

  • You can verify it tested the logged in page by looking at the report under the performance metrics there are images of the page that was loaded, so if the images correspond to the logged in page I believe it means it was tested correctly.
like image 141
coderrr22 Avatar answered Oct 16 '22 08:10

coderrr22


See Testing on a site with authentication in the official readme:


When installed globally via npm i -g lighthouse or yarn global add lighthouse, chrome-debug is added to your PATH. This binary launches a standalone Chrome instance with an open debugging port.

  • Run chrome-debug. This will log the debugging port of your Chrome instance
  • Navigate to your site and log in.
  • In a separate terminal tab, run lighthouse [siteurl] --port port-number using the port number from chrome-debug.
like image 4
JoostS Avatar answered Oct 16 '22 09:10

JoostS