13

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?

Kermit
  • 2,865
  • 3
  • 30
  • 53
  • 3
    See [Testing on a site with authentication](https://github.com/GoogleChrome/lighthouse/blob/master/docs/readme.md#testing-on-a-site-with-authentication) in the official readme. – wOxxOm Sep 19 '19 at 16:33
  • Thanks @wOxxOm that is a good idea! Although it only applies to the CLI. I am very willing to test the CLI - so that is not a problem! Many thanks! – Kermit Sep 19 '19 at 20:23

3 Answers3

14

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.
coderrr22
  • 327
  • 2
  • 10
  • Is there a way to automate this? Without manual log in? – Eli Apr 11 '21 at 13:39
  • @coderrr22 doesn't use the local storage data affect the performance report? Is there any other way? – Fariman Kashani Aug 02 '21 at 18:00
  • 1
    @Eli you must have the relevant local storage data in order for the test to run on your required page(if it requires authentication), can you give me an example as to where the login delays you ? if it's that bad, maybe have a *test* version with a manual hard coded insert to local storage on app start,(with an accepted token) then a refresh should work without the manual login – coderrr22 Aug 03 '21 at 14:52
  • @FarimanKashani Why would it affect the performance report? – coderrr22 Aug 03 '21 at 14:53
4

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.
Mr. Hugo
  • 11,887
  • 3
  • 42
  • 60
  • 1
    Thank you JoostS for the reply! I tried the command, but lighthouse opens a new window (not logged in) and does not seem to use the --port argument. (It took me some time to upgrade lighthouse, node.js and nvm to be able to run the command. ) – Kermit Oct 14 '19 at 15:36
  • yes, this does not work. It opens a new tab without logined. – Günay Gültekin Sep 04 '20 at 09:40
  • Sorry to hear that. It is the official instruction. – Mr. Hugo Sep 04 '20 at 10:07
0

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.

Kermit
  • 2,865
  • 3
  • 30
  • 53