Blazor Chart Test Automation with Coded Steps in Visual Studio

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.

Overview

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.

The Use 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. 

Blazor Chart Demo Test Automation with OCR

The automation challenges I commonly will be facing are:

  • The report data is dynamic, meaning the chart will change often/every time the page loads
  • The data is aggregated, meaning each point needs to be validated against its backend source
  • The test case might need to be extended to cover additional requirements like cross-report support

How To

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:

  1. Extract the data from the Blazor Chart
    • Understand the nature of the chart and how it works
    • Traverse the chart and extract the data
  2. Transform the data
    • Use Test Studio’s OCR recognition to extract the data for each point
    • Create a comparison model
  3. Compare the data integrity
    • Pull raw data from the DB/Service
    • Compare and validate each data point against its raw data/source data counterpart

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’:

Test Automation of SVG Elements

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:

SVG circle updates a tooltip data window

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:

Visual Studio Test

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. 

  • Make sure we are working against the latest DOM by refreshing the client-side DOM tree:
Code - RefreshDOM

  • Let’s find the Blazor Chart which is the topmost container control, represented by a ‘div’ HTML element:

Code - Find Blazor Chart

  • Now that we have the chart we need to drill down and find the ‘points group’ hosting each data entry. For the Telerik UI for Blazor Chart this is an SVG Group element (<g>) tagged by a specific ‘clip path’:
Code - PointsGroup - SVG Group Element

  • The <g> element contains all SVG Circle (<circle>) elements in the data series. Let’s get them: 
Code - Points - SVG circle element

  • Now we will hover over each point, expand the tool tip and use OCR to extract the data from it. In order to do that we will use simple C# foreach, the ‘MouseHover’ function and Test Studio’s most recently introduced OCR features: 
Code - PointsLoop - Mousehover Function

  • The ‘ExtractPointData()’ method is in fact what does the OCR work:
Code - ExtractDataFromPoint
  • Now we have a text which looks as visualized on the following figure:
Image Text Inspection
  • This is pointing us in the right direction of the demo, however we still have work to do, which includes trimming the text and transforming it to a comparable object. For this purpose, we will create a data holder class called ‘ProductPoint”. This class will have a built-in parser that will create an object based on ‘imgText’: 
Code - ProductPoint 
  • The last step in our data extraction journey will be to put all ‘ProductPoint’(s) in a single data array which will be used during validation. In order to accomplish this, we will use a simple generic List<ProductPoint> as shown in the following figure:
Code - ListDataPoints
  • We will finish our demo test case by validating the data. Depending on the backend, there are a few potential approaches. One will be to call the DB/DataSource itself, another one may include simply doing a REST call to a data endpoint. For the purposes of this demo case we will use a simple wrapper called ‘ValidationService’ with its single method: bool ValidateProductPoint(ProductPoint p):

Code - AssertLoop

Conclusion

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. 

Learn More at Our Webinar

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 in Perspective

Test Studio Dev Edition is part of DevCraft Ultimate—the industry-acclaimed .NET and JavaScript developer tooling bundle enabling dev teams to build modern, high-performing web, mobile and desktop apps that deliver the exceptional digital experiences users demand.

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.

Request Demo


Nikolay Atanasov
About the Author

Nikolay Atanasov

Nikolay is an Engineering Manager on the Test Studio team. He is passionate about quality code, snowboarding and video games.

Related Posts

Comments

Comments are disabled in preview mode.