CODEWITHSUNDEEP
google-chrome-devtoolslighthouse
Kermit
Kermit

Reputation: 3407

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?

Upvotes: 14

Views: 12783

Answers (3)

coderrr22
coderrr22

Reputation: 387

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.

Upvotes: 14

Kermit
Kermit

Reputation: 3407

I had to install node 10.16.3 first (node.js > 10.0.0).

nvm install 10.16.3 will show error

Could not download npm for node v10.16.3.

Download npm version what you want - https://github.com/npm/cli/releases I had downloaded 6.9.0 npm version - https://github.com/npm/cli/archive/v6.9.0.zip It should be extracted to C:\Users\xxx\AppData\Roaming\nvm\v10.16.3\node_modules\npm

then go to C:\Users\xxx\AppData\Roaming\nvm\v10.16.3\node_modules\npm\bin and copy two npm files. first (npm .cmd file), second (npm file) then paste both files in C:\Users\xxx\AppData\Roaming\nvm\v10.16.3

open cmd and run command node -v and npm -v

After that lighthouse CLI works as expected.

The command still does not work though. :/

I have followed the advice of JoostS - Testing a site with authentication The technique does not work. It opens up an new, not logged in window, and behaves just like you would expect without the --port argument.

Upvotes: 0

Mr. Hugo
Mr. Hugo

Reputation: 12590

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.

Upvotes: 4

Related Questions