Turn on your Lighthouse

     We know that Lighthouse is Google’s suite of website quality analysis tools. It allows us to assess the website’s performance, accessibility, SEO, best practices, and PWA. It is also highly configurable, making it flexible enough to be useful for all sites, from the simplest to the highly complex. This flexibility includes several different ways of running the tests, allowing us to choose the method that works best for the website or application. 

Lighthouse is an open-source tool and it tests apps against the PWA guidelines such as:

• Tests the application offline or flaky network.
• It is served from a secure origin i.e. https.
• It is relatively fast.
• Uses certain accessibility best practices.

     I would like to share the different ways of running the tests like using the chrome extension, command-line execution and trigger programmatically.

Lighthouse – Browser Extension and Execution

    Lighthouse is available as a chrome extension. Running Lighthouse as chrome extension Lighthouse can be downloaded from Chrome Web Store. Once installed it will add a shortcut to the taskbar. Then, run lighthouse on your application and choose Generate Report with the app open the browser page. Here I have generated the report against one PWA application Starbucks (https://app.starbucks.com/). Got following reports:

Lighthouse – Command-line and Execution

    Lighthouse is available as a command-line tool. Running Lighthouse from command Line. Lighthouse is available as a Node module package, which can be installed and run from command-line. To install run the bel command:

npm install -g lighthouse

You can check Lighthouse flags and options with the following command:

lighthouse --help

    I have executed the lighthouse from the command-line for Starbucks application. I have used the below command in command-line:

lighthouse https://app.starbucks.com/ --view

    This will generate all the status in command-line and also you can see the application open in the browser. Once execution completes the browser will close and the report will generate in form of HTML and it open in another browser automatically. The command-line view looks like below and the HTML report looks same as the above one which we executed using chrome lighthouse extension,

Lighthouse – Programmatic Execution

    Prior to the programmatic execution, the lighthouse node module package should be globally installed in your system using npm install -g lighthouse command. Once the lighthouse package is installed in your system, you can use startLighthouseAudit(appURL, categories, needHeadless) method to run the test and it will generate the HTML report in your project structure. appURL is the desired website URL you need to test, categories include performance, accessibility, SEO, best-practices, pwa; based on the given category the script will test the appURL and generate the HTML report. You have an option to set the execution mode as headless or non-headless by setting the third parameter as yes or no, if you set needHeadless as yes then the execution will happen in the background and if you set needHeadless as no then you can see the test execution in the foreground.

    Below is the actual implementation of startLighthouseAudit(appURL, categories, needHeadless) method, you can utilize this method during your Selenium automation to audit the website performance, accessibility, SEO, best-practices and PWA,

/**
 * To start the lighthouse audit process with different categories
 * 
 * @author sanojs
 * @since 12/17/2021
 * @param appURL
 * @param categories [performance,accessibility,seo,best-practices,pwa]
 * @throws IOException
 * @throws InterruptedException
 */
public static void startLighthouseAudit(String appURL, String categories, String needHeadless)
			throws IOException, InterruptedException {
		String reportPath = System.getProperty("user.dir");
		DateFormat dateFormat = new SimpleDateFormat("dd-MMM-yyyy_HH-mm-ss");
		Date date = new Date();
		String reportNameDate = dateFormat.format(date).toString();

		if (!new File(reportPath + "//Reports//Lighthouse_Audit").exists()) {
			(new File(reportPath + "//Reports")).mkdir();
			(new File(reportPath + "//Reports//Lighthouse_Audit")).mkdir();
		}

		String actualReportPath = reportPath + "//Reports//Lighthouse_Audit".trim() + "//AuditReport_" + reportNameDate
				+ ".html";
		String command;
		if (needHeadless.equalsIgnoreCase("yes")) {
			command = "cmd.exe /c lighthouse " + appURL + " --chrome-flags='--headless' --only-categories=" + categories
					+ " --output=html --quiet --output-path=" + actualReportPath + "";
		} else {
			command = "cmd.exe /c lighthouse " + appURL + " --only-categories=" + categories
					+ " --output=html --quiet --output-path=" + actualReportPath + "";
		}
		System.out.println("Audit started for " + appURL);
		Process process = Runtime.getRuntime().exec(command);
		process.waitFor();
		process.destroy();
		System.out.println("Completed the audit and get the report from " + actualReportPath);
	}

     I hope you really enjoyed reading and learning about Lighthouse, testing capabilities, and the different ways of execution. Try to implement the above concept in your testing activities based on your requirement.

make it perfect!