Automating elements that contain dynamic and static data might be quite a challenging task for automation engineers. In this post we’ll explore next level test automation using Telerik Test Studio Dev Edition with its brand new Optical Character Recognition (OCR) features and will apply it to a Telerik UI for Blazor chart. We will take on some advanced coded approaches to solve more complex problems regarding data visualization (DataViz) and provider-based comparison.
Before we start, let’s clarify one thing. The purpose of this article is showcasing a scenario with a broader usage and creating a more generic approach for the modern-day automation engineer. That is why we will cover the present use case end to end with all the necessary details relevant to this approach, although in real life some of the steps described below could be simplified for this case.
Now, let’s take a look at the use case. As a QA engineer, I want to build an automated test case that verifies the data in a continuously changing Revenue report.
The automation challenges I commonly will be facing are:
In order to find a solution to a complex problem, in real life we often need to split the problem into simple and workable steps. That is what we will be doing in our use case:
For the purposes of the demo we are using a chart demo example from the Telerik UI for Blazor components. What we are interested in is each data point for the ‘Total Revenue’:
From a DOM perspective each point is an SVG Circle element. SVGs are widely used for vector-type diagrams like bars, pie charts, scalable icons and logos—all together elements containing dynamic data that needs validation, which is well known to cause automation issues.
On mouse hover each circle updates a tooltip data window, which is visualized in the following figure:
What we need to do is to hover over each ‘circle’ and collect the dynamically generated data. Note that as the time goes by the data points or ‘circles’ will change so we need to adapt our steps as static element find logic will be of no use in this particular case.
We will continue with the next steps inside Test Studio Dev Edition. Here you can download a free trial. Follow the steps in the Quick start guide in order to create your first project automating your web tests. All OCR features are also available in Test Studio Ultimate and Test Studio Web & Desktop.
In order to get started, navigate to the app under test and maximize the browser if needed:
Now the third step in the test is of a more special nature as it will allow us to create a coded solution for our dynamic scenario. We will do a line by line explanation in order to make every step transparent. At the end we will summarize the entire test automation case.
That is about everything an automation engineer needs to do in order to cover this or any similar test automation case. It may not be the most elegant solution in all relevant cases; however, it follows a very broad and relevant approach that is applicable to a series of real-life scenarios.
To learn more about all the latest features in Telerik Test Studio Dev Edition and see them in action, be sure to register for our Testing and Reporting Release Webinar on Friday, October 2nd at 11:00 AM ET.
Test Studio Dev Edition is also available as a Visual Studio Plugin as part of Test Studio Ultimate. With its successful blend of codeless and code-based automation capabilities in an intuitive UI, Test Studio enables testing anyone can use regardless of expertise. Test Studio Ultimate is used by both developers and QA’s, providing them the possibilities of automated testing in a standalone IDE, or within Visual Studio.
Nikolay is an Engineering Manager on the Test Studio team. He is passionate about quality code, snowboarding and video games.
Subscribe to be the first to get our expert-written articles and tutorials for developers!