Testing OpenBMC WebUI Performance with Sitespeed.io

OpenBMC utilizes webui-vue as its front-end, which is a single-page application (SPA). Testing the web performance of SPAs can be challenging with traditional tools like Lighthouse, which are typically used for testing static websites. However, Sitespeed.io provides mechanisms to test SPAs, making it a suitable choice for testing the OpenBMC web pages.

Sitespeed.io

Sitespeed.io is a powerful tool that allows you to perform web performance testing on SPAs. It offers the ability to measure various performance metrics and provides detailed insights into the performance of your web application.

Writing a Testing Script

To demonstrate the performance testing of the OpenBMC webui-vue login process, we can refer to the example provided by Sitespeed.io for testing SPAs. You can find the example performance test script for Grafana here. Additionally, the Sitespeed.io documentation provides more information on scripting and available APIs, which you can find here.

For this article, let’s focus on testing the performance of the OpenBMC login process using the provided script openbmc.js:

module.exports = async function(context, commands) {
    await commands.measure.start('https://192.168.0.196/#/login', 'login page');
    try {
        await commands.addText.byId('root', 'username');
        await commands.addText.byId('0penBmc', 'password');

        // Start the measurement and give it the alias 'login'
        // The alias will be used when the metrics are sent to
        // Graphite/InfluxDB
        await commands.measure.start('login to dashboard');

        // Find the submit button, click it, and wait for the 
        // page load to complete on the next loaded URL 
        await commands.click.byXpath('//*[@id="app"]/main/div/div[1]/div/form/button');
        await commands.navigate('https://192.168.0.196/#/');

        // Stop and collect the metrics
        return commands.measure.stop();
    } catch (e) {
        // If the GUI changes and a link is not there,
        // the click commands will throw an error.
        // sitespeed.io will catch, log, and rethrow
        // and you can choose to handle the error
    }   
};

Make sure to adjust the URLs and element selectors in the script to match your OpenBMC setup.

With this script, you can measure the performance of the OpenBMC login process using Sitespeed.io. It captures metrics such as page load time, resource timings, and other performance-related data.

Running the Performance Test

To run the performance test on the OpenBMC web pages using the openbmc.js script, you can execute the following command:

docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:27.3.0 openbmc.js --spa --multi -n 1

In this command, the --spa flag indicates that the web page being tested is a single-page application, while the --multi flag enables multiple iterations of the test. The -n 1 argument determines the number of testing iterations to perform. Adjust the value of -n as per your requirements.

For more information on how to customize and extend the performance test, you can refer to the example provided by Sitespeed.io for testing SPAs here.

Video Recording

If you want to have a video recording of the script’s interaction during the performance test, you can specify the --browsertime.videoParams.debug flag. This flag generates a video in the test report, allowing you to visualize the user flow and interactions. Here’s an example command:

docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:27.3.0 openbmc.js --spa --multi --browsertime.videoParams.debug

Make sure to adjust the command and script parameters based on your specific requirements and OpenBMC setup.

By running these commands, you can perform performance testing on the OpenBMC web pages using Sitespeed.io, generate performance metrics, and optionally capture a video recording of the user interaction.

Viewing the Report

Once the performance testing commands have been executed, you can find the generated report in the sitespeed-result folder. The report is presented in the form of an index.html file, which serves as the entry point to access the performance results.

To view the report, navigate to the sitespeed-result folder and open the index.html file in a web browser. This will launch the report and provide you with detailed information about the performance of the OpenBMC web pages.

The report generated by Sitespeed.io includes various metrics such as page load times, resource sizes, network requests, and more. It offers insights into the performance characteristics of the web application, allowing you to identify areas for improvement and optimization.

Make sure to explore the different sections of the report to gain a comprehensive understanding of the performance test results.