Utilizing HAR Log Viewer with Waterfall for Selenium Testing

While executing your automated tests with Selenium ChromeDriver, it may happen that there are issues and bugs. At times, you might see slow performance or unusual behavior in your web application. This can be annoying, particularly when you are uncertain about what is behind the issue. This is the reason why utilities such as the HAR log viewer can be quite useful.

It lets you capture the network traffic during your test runs. Then, you can view that traffic in a waterfall chart. This makes it easier to see what is loading slowly, where redirects are happening, or which API calls are delayed. By seeing this information clearly, you can start to understand what is going on behind the scenes.

In this article, you will see how to use the HAR log viewer and the waterfall view together. With both, you can find issues in your Selenium tests and fix them with more confidence.

What is a HAR File and Waterfall View?

When you run your tests with Selenium ChromeDriver, you may want to know the reason. Sometimes, the web page might load slowly, and you are not sure why. This is where HAR files can help you find answers.

HAR stands for HTTP Archive. It is a file format that records detailed information about network requests and responses made by the browser. It helps you track things like:

• Request and response headers
• Timing details such as DNS lookup and connection time
• HTTP status codes for each request
• The order in which resources load
• Any redirects, errors, or failures that happen during loading

Instead of checking this data in a raw or plain format, you can view it in a more visual way by using the Waterfall View. This shows each resource as a horizontal bar on a timeline. This makes it easier for you to do a few things:

• Check how much time each request takes
• Notice any delays or slow-loading items
• Understand if some resources are blocking others
• Find what is causing slow performance during your test run

Capturing HAR Files with Selenium ChromeDriver

When analyzing how your web application performs, capturing network traffic during Selenium tests is helpful. Selenium alone doesn’t support recording HAR files. Nevertheless, you can utilize tools such as BrowserMob Proxy to intercept the HTTP traffic.

Follow this step-by-step guide to record network activity and generate a HAR file with Selenium ChromeDriver:

Step 1: Set Up Your Environment

You will need:

• Selenium WebDriver
• ChromeDriver
• BrowserMob Proxy (this tool captures network traffic)

Step 2: Start the Proxy Server

Start BrowserMob Proxy to run a local proxy server. This server acts as a middleman between the browser and the internet. It captures all HTTP requests and responses.

Step 3: Configure ChromeDriver to Use the Proxy

When launching Chrome with Selenium, configure it to use the proxy. This ensures all browser traffic is routed through the proxy.

Step 4: Begin HAR Capture

Once the browser is running and the test URL is loaded, start a new HAR recording session using the proxy.

Step 5: Run Your Selenium Test Case

Now, run your Selenium test. As the test runs, BrowserMob Proxy captures all network activity.

Step 6: Save the HAR File

Once the test is completed, obtain the HAR file. This document will include all the recorded information, like request URLs, response durations, status codes, and additional details.

Using HAR Log Viewer: A Visual Guide & Understanding the Waterfall Chart

After capturing a HAR file with Selenium ChromeDriver, the next step is to analyze it with a HAR Log Viewer. This tool helps you simplify the raw data by showing it in a visual format. To load the HAR file, you can either upload it or move it directly into the viewer. Once the file is loaded, a Waterfall Chart will appear.

The Waterfall Chart shows each network request as a horizontal bar. It breaks down request timings, such as DNS lookups, redirects, and the overall load sequence of resources. Each bar represents a resource. The length of the bar indicates how long it took to load.

This visual view helps you spot delays, failed requests, or resources that block others from loading. By understanding these timings, you can find performance issues. You can then optimize loading sequences and improve your automated tests.

How to Utilize HAR Log Viewer with Waterfall for Selenium Testing

To fully use the HAR files generated by your Selenium tests, you must upload them into a HAR Log Viewer and then check them using the Waterfall view. Here’s how you can utilize these tools:

• Capture the HAR File Start by running your Selenium test with ChromeDriver. Use a proxy tool like BrowserMob Proxy to capture the network traffic. After the test finishes, you will have a HAR file containing all the network requests and responses.

• Choose a HAR Log Viewer There are many HAR viewers available online, such as Google’s HAR Viewer, Chrome DevTools, or third-party tools like WebPageTest. Pick one of these viewers to load your HAR file.

• Load the HAR File into the Viewer Once you’ve selected your HAR Log Viewer, upload the HAR file. The viewer will convert the raw data into a visual format. It will typically display the data in the form of a Waterfall Chart, showing the sequence of network requests.

• Analyze the Waterfall View The Waterfall view breaks down requests into bars. Each bar represents a network request. The length of the bar shows how long it took for that resource to load. The chart also shows different phases, like DNS lookup, connection time, and response time.

Interpret the Key Data Points

• DNS Lookups: This shows the time it took to resolve the domain name.
• Request/Response Times: This shows how long it took to send the request and receive the response.
• Redirects: This shows how long redirects took and how many there were.
• Resource Load Sequence: This shows how different resources loaded and whether any are blocking others.
• Identify Performance Issues: Use the Waterfall chart to find slow or failed requests. You have to focus on resources that took too long to load or did not load at all. This information can help you debug issues, like network failures or slow API responses. They could be affecting the performance of your application during Selenium tests.

Selenium Testing on Cloud Grid

Testing with Selenium on a local grid is enough if you only need basic test coverage. However, it doesn’t provide the extensive browser coverage you might need. In such cases, using a cloud Selenium Grid is a better choice. It allows testing on various browser and OS combinations, improving both test and browser coverage.

Platforms like LambdaTest are more scalable and cost effective than setting up your own in house Selenium Grid. LambdaTest is an AI testing tool which offers an online browser farm with over 3000 browser and operating system combinations for automation testing. By using generative AI testing, LambdaTest can intelligently optimize test execution, helping teams prioritize tests, detect flakiness, and improve automation reliability.

To transition from a local Selenium setup to LambdaTest’s cloud Selenium Grid, you’ll need to update your test scripts with the new infrastructure code. With generative AI testing integrated into the platform, test creation and maintenance become more efficient, reducing manual effort and accelerating delivery cycles.

Practical Example: Debugging with HAR in Selenium

Let’s review a hands-on example of utilizing HAR files and Waterfall charts to resolve problems encountered in your Selenium tests. Picture yourself conducting a test on a web application, but it’s either operating slower than anticipated or occasionally not working. Examining the HAR file can reveal the source of the issue

Scenario: Slow Page Load During Selenium Test

In this example, you notice that the web page takes longer to load than expected during the test. Here’s how you can use the HAR file and Waterfall chart to figure out what’s wrong:

• Capture the HAR File

First, run your Selenium test with ChromeDriver and BrowserMob Proxy to capture the network activity. The test might involve going through multiple pages or clicking on different elements. You need to capture all the network requests made while this happens.

• Load the HAR File into the Viewer

Once the test is over, you’ll have the HAR file. Open it in a HAR Log Viewer to see the network activity.

• Examine the Waterfall Chart

Look at the Waterfall chart for the page that’s loading slowly. The chart shows a timeline of all the resources (like images, scripts, styles, etc.) being requested during the page load.

• Spot Delays and Bottlenecks

If you see a long bar in the chart, it means that request took too long. For example, if an image or a script is taking too long, it could be slowing down the page.

Also, check for any failed requests or timeouts. These will show up as red or broken bars, and they can delay the page load or the whole test.

• Analyze Specific Requests

Click on the individual bars in the Waterfall chart to get more details. You can find out:

• DNS lookup time: This shows how long the browser took to find the website.
• Request/response time: This tells you how long it took for the server to respond.
• Redirects: If the request keeps getting redirected, this could be causing the delay.

• Identify the Problem

For instance, a script running slowly could be due to a slow server or a large script size. If an image is preventing others from loading, you might need to optimize it or enable it to load in the background.

• Implement Fixes and Retest

Once you identify the problem, attempt to resolve it. You could decrease the image size, enhance the server’s response speed, or eliminate superfluous redirects. After implementing the changes, execute the Selenium test once more and generate a new HAR file to verify if the problem has been resolved.

Conclusion

Using the HAR Log Viewer with a Waterfall chart is a key technique for debugging and improving network related issues in Selenium testing. Capturing network data in a HAR file and viewing it through the Waterfall chart helps testers see how each request performs. This method help you know timing details, bottlenecks, slow loads, and failing requests that can impact test performance. If you are fixing slow page loads, addressing resource failures, or optimizing the order of requests, the HAR Log Viewer gives a clear, helpful view of network activity. Adding this tool to your Selenium tests can improve test accuracy, speed up debugging, and boost the performance of your web apps.