What is a heatmap?

Heatmaps are a powerful way to understand what users do on your website pages — where they click, how far they scroll, what they look at or ignore.

A heat map shows a color-coded overlay of mouse (and tap) movement on a single website page. The ‘popularity’ of page elements is displayed using a color scale from red (the most popular parts of the page) to blue (the least-used parts of a page).

How to Verify Heatmap Plotting Service via Automation?

How to check if clicks are being plotted correctly? How to check if there is no data loss while plotting the clicks? How can we verify that our Heatmap service is working as expected?

The answer to the above questions is HTML Canvas. As in general heatmaps are rendered on HTML canvas, we can leverage that to verify Heatmap plotting via Selenium or any other Automation tool. The best part of using Canvas is that it can be integrated easily with your existing Automation scripts.

How can we use Canvas for Heatmap Automation?

There are two phases in order to verify the Heatmap Plotting via Automation.

Phase 1

The first phase is to perform clicks on the page on which we want to test Heatmap Plotting and store the click coordinates i.e. the point where we have performed the clicks. This can be easily done using Selenium or any other automation tool.

Performing Clicks on the Page and Storing the Coordinate Data

Over here, we are clicking on the element, getting its location from the top of the DOM, get the element size, and based on that we can find the center coordinates of the element w.r.t. the DOM. We push the coordinates extracted to the clickDataArray and after we have clicked on all elements, we can push the clickDataArray into a CSV or a JSON file.

If you want to click randomly on a page and not on a specific web element, that can also be done by getting the DOM height and width, and use that to generate a random X, Y coordinate and similarly to the code above we can push the coordinates into an array and then push them into a CSV or a JSON.

Phase 2

The second phase is to leverage canvas functions and the coordinate data stored in Phase 1 in order to verify if heatmaps are plotted correctly.

Over here, we first of all check if heatmap canvas is empty, and if the canvas is empty, we should not check further as Canvas being empty means that Heatmap plotting hasn’t worked.

#heatmap #automation #selenium #canvas