Automated Heatmap Verification E2E using Selenium and Canvas

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.

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

What is GEEK

Buddha Community

Automated Heatmap Verification E2E using Selenium and Canvas

Automated Heatmap Verification E2E using Selenium and Canvas

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.

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

Anthony  Dach

Anthony Dach

1627025027

What's New in Selenium 4?

The newly released Selenium 4 is creating a lot of buzz and the complete testing community is looking forward to exploring its updated features.

Selenium has gone through a tremendous evolution since its introduction and that’s the reason today it is the most popular and powerful automation testing tool. The newly released Selenium 4 is creating a lot of buzz and the complete testing community is looking forward to exploring its updated features.

Before we dive into Selenium 4, let’s have a brief introduction to its previous versions. Selenium 1 was declared as the free open source automation testing framework in the year 2004 consisting of selenium IDE, RC, and web driver. Whereas, the Selenium 2 released in 2011 consisted of the IDE, Web driver, and Grid. The RC server was merged with the web driver, as the web driver facilitated easy automation scripting for the browsers. Selenium 3 was officially released in 2016. One of the most noticeable changes in selenium 3 was the replacement of the selenium core with the web driver-backed option, the introduction of the gecko driver, and W3C web driver integration.

With the aim of executing much seamless, accurate and faster test automation, Selenium 4 was released on 24th April 2019. So let’s unleash all the major features of selenium 4 which sets it apart from the earlier versions delivering better test automation. There are a lot of exciting features in Selenium 4 across the complete suite i.e. Selenium IDE, Webdriver and Grid. In Selenium 4 though the Webdriver captures the spotlight, we will cover the updated features of selenium IDE and selenium grid. So first of all let’s define the different user groups for the Selenium suite.

Selenium is a suite of tools that caters to the various requirements of the project such as:

  • Selenium IDE (Integrated Development Environment) Supports Rapid test development. This record/run tool helps in preparing test cases. Selenium IDE is an easy-to-use tool from the Selenium Test Suite which is used for developing automated test cases for web applications.
  • Selenium Webdriver provides flexible and seamless automation through a friendly and flexible API. It can perform automation in almost all programming languages.
  • The grid helps in providing automation testing by distributing and running the test cases in multiple machines simultaneously.

Let us explore the features of Selenium 4 across the different Selenium Tools.

#selenium #automation testing #selenium automation #selenium automated testing #selenium test automation #selenium 4

Anthony  Dach

Anthony Dach

1620462169

How To Get Attribute Value In Selenium WebDriver

While you are automating your test cases with Selenium automation, here is how to start implementing Selenium getAttribute() method to get the best results.

Introduction

Testing a web page can be a gargantuan task, considering all the elements and variables that come together to make a page work. Selenium automation is a great way to overcome these challenges and automate everything you would manually do. For example, Selenium makes it so much easier to take a screenshot using Python instead of doing it manually every time you come across a website issue.

Similarly, there are multiple scenarios while writing automation test cases when we need to verify a specific attribute on the web page. To ease our execution, the method to getAttribute() in Selenium comes to the rescue. In this blog, we will understand what an attribute is and how we can handle web elements’ attributes using the Selenium getAttribute() method.

Let’s get to it, shall we?

#selenium #webdriver #selenium automation testing #selenium automation #selenium - web browser automation #selenium automated testing #get attribute

Anthony  Dach

Anthony Dach

1620488040

How to Perform Localization Testing Using Selenium WebDriver

Localization automation testing is essential for your product to gain good standing globally. Read on to learn how to do localization testing using Selenium WebDriver.

Automation testing is vital to the entire process of delivering a successful web product. The challenge associated with testing a web site or web app grows exponentially if it’s built for a global audience (particularly non-English audience). Automation tests have to be performed to ensure that the product features (including the content) cater to specific locales. That’s why localization testing using Selenium WebDriver has become increasingly relevant when a plethora of software products are being built for the world!

We’re sure you’ve come across scenarios where some content or portion of the website did not render correctly in a specific location. This is a common dilemma that most Selenium test automation engineers often come across, and it is extremely likely that incorrectly formatted strings are a part of the resource files. As a part of localization testing using Selenium WebDriver, we need to verify if the website (or app) looks and functions the same after localization automation testing is applied.

That is precisely what this blog aims to deliver. By the end of this blog, you would be comfortable performing localization testing using Selenium WebDriver as we touch upon the critical aspects of localization, including how to perform localization automation testing.

#tutorial #performance #automation testing #selenium webdriver #localization #selenium automation #selenium automated testing #automation selenium

WebDriverIO Tutorial: Handling Alerts and Overlay In Selenium

You’d hardly find a website these days without alerts and pop-ups! The alert boxes warn you whenever you perform a wrong action or to enter details to access a website. These alert boxes stop you from performing any other browser functions till the alert is resolved. This is why it becomes important that you handle them in your Selenium test automation scripts.

In this WebDriverIO tutorial on alert handling in Selenium, I’ll show you how to handle alerts and pop-ups as well as overlay modal in WebDriverIO. I will also cover the different types of alerts you will face during automation and what are the key points you need to follow for alert handling in Selenium using WebDriverIO.

Types Of Alerts In WebDriverIO

Alerts and pop-ups are pretty common in any website development, and while performing Selenium test automation you have to handle them as well. These alerts or rather javascript alerts, are pop up that takes your attention away from the current browser and forces you to read them. You won’t be able to perform any further browser action if you don’t know how to handle the alerts, this stands true for both manual and automation.

It is important to note that you can’t identify alerts using devtools or by XPath. Also, since they can’t be handled as a window, this is why it gets a bit tricky to handle them, but don’t worry, you’d find more about this in the latter section of this WebDriverIo tutorial.

There are three types of alerts that you’d need to handle in WebDriverIO.

  1. Alert pop up
  2. Confirmation Alert
  3. Prompt pop up

Alert Pop Ups

The alert pop up or alert() method displays an alert box with just a message and ‘OK’ button. This alert used to inform the user about some information. There is only one button ‘OK’ displayed with the text of information. Here, the user has only one option to press the OK button. Below is the example of alert pop up.

JavaScript Alerts

Confirmation Alert

The confirmation alert is the second type of alert with a message, where it gives the user the option to press OK or Cancel. Here is the example of a confirmation alert.

Confirmation Alert

Prompt Pop-Up

The prompt pop up is the last alert where this used to let the user give input for the website. Here, the user can give input and press the OK button or press Cancel to avoid giving input. Below is the example of the prompt pop up.

Apart from these in-built javascript alerts, there is also one more pop up which is known as modal. The main difference between an alert and modal is that alert can not go off without requested actions e.g, OK, or Cancel. In the modal, it is made using the < div > tag by giving special CSS code. This modal can go off by clicking somewhere other than the modal.

Overlay Modal

This modal is built using the client-side framework e.g bootstrap, ReactJS. A developer can be used to display some information, pop up, and form. There is no special

Here is an example of Overlay Modal:

Modal title

Now, that you are familiar with a different kind of alert and modal available in javascript. I’ll show you more about alert handling in Selenium in this WebDriverIO tutorial.

#tutorial #performance #selenium #selenium automation #selenium automated testing #automation selenium #webdriver io