Audit a web page (performance, accessibility, etc.) with Lighthouse

[sonpham]

Sample project used in this topic: GitHub - katalon-studio-samples/katalon-studio-chrome-devtools-protocol-plugin-samples

This topic covers how to collect performance metrics of Google web page using Lighthouse, then generate a report on its performance, accessibility and more. From there, the audits can be used as indicators for improving the web page.

Prerequisites

• Latest version of Katalon Studio with Chrome DevTools Protocol Integration installed.
• Lighthouse as a NodeJS module (see Overview  |  Lighthouse  |  Chrome for Developers for installation instructions).
  Note: Please assure that lighthouse command can be executed on command-line interface before restarting Katalon Studio (try the command lighthouse --help).
• Lighthouse metrics test case which is available in the sample project

Instructions

1. Open browser and navigate to Google web page.

WebUI.openBrowser('https://www.google.com')

2. Get the current tab url as well as host and port of the current browser instance.

String url = WebUI.getUrl()
def (host, port) = CdpUtils.getServiceEndpoint()

3. Audit the web page in a new tab with Lighthouse.

OsUtils.runCommand("lighthouse ${url} --hostname ${host} --port ${port} --no-enable-error-reporting", null, null)

4. Finally, clean up and close the browser.

WebUI.closeBrowser()

5. An HTML file will be generated in the root of the project.
   
   

[Ayame]

Hi! I tried this approach but TC Lighthouse metrics fails with error:

I couldn’t get to the command line from the Katalon either way (I tried to run a batch file, execute some random application from the test - no luck)
@sonpham could you please help me fix it?

[sonpham]

Hi @Ayame,

Have you tried the sample project?

FYI, you can find the OsUtils class here.

Hope it helps!

[Ayame]

Hi! Yes, I did. But I think I could do something wrong while copying it to my own. Should I copy all th files from it (configuration,settings)? I copied scripts and test cases

[sonpham]

Hi @Ayame,

You also need to copy everything under Include/scripts/groovy .

[Ayame]

thank you very much, it helped

[paul.dufau]

Hello @sonpham,

I got this error when I executed my lighthouse testCase :

sh: lighthouse: command not found

But I have npm/lighthouse right installed in my project. When I executed my lighthouse generated command directly in my terminal, that’s working.
FYI, I’m on MAC, that’s maybe the reason

Thanks in advance for your help !

[system]

Hi there,

Thank you very much for your topic. Please note that it may take a little while before a member of our community or from Katalon team responds to you.

Thanks!

[Elly_Tran]

Hi @paul.dufau ,

Can you please help check the version of lighthouse & npm to make sure you have installed them? If yes, check the path of installation so that the shell can find and execute Lighthouse command.

[paul.dufau]

Hi @Elly_Tran,

Npm & Lighthouse are ok. And I have add the PATH to node in the VM Arguments :

-Denv.PATH=/usr/local/bin:/usr/local/bin/node

And I do this for lighthouse :

OsUtils.runCommand("/usr/local/bin/lighthouse $url --port $port --no-enable-error-reporting --preset=desktop --only-categories=accessibility,best-practices,performance", 
    null, null)

And now I have :

env: node: No such file or directory