Comparing screenshots with dynamic content

Let's suppose you need to compare windows images or those of controls elements with some dynamic contents (that is, if part of the image is being changed every time). This could be the case when a given controls element displays current date or time. In this situation, the image would be different every time; nonetheless, there is a way to resolve this holdup.

Getting ready

First we will do some preparations:

  1. Launch Calculator Plus in the standard mode (navigate to View | Standard).
  2. Add the element of Stores (right-click on the name of the project and navigate to Add | New Item | Stores).
  3. Add the element of Regions to your project (right-click on Stores and navigate to Add | New Item | Regions).
  4. Launch the following code (it will create an image of the main calculator window in Regions):
    var wCalc = Sys.Process("CalcPlus").Window("SciCalc");
    Regions.AddPicture(wCalc.Picture(), "Calculator");
  5. Enter any digit to the calculator (different from the data inputted initially at the moment of image creation) and launch the following code:
    var wCalc = Sys.Process("CalcPlus").Window("SciCalc");
    Regions.Compare("Calculator", wCalc.Picture());
  6. In the result, we will get the error The regions are not equal.

How to do it...

Now we are going to prepare the image so that we can compare it by performing the following steps:

  1. Open the Calculator file in any graphic editor (for example, Paint), which was created via the method Regions.AddPicture (it is located in the folder with the project, subfolder to Regions).
  2. Select any color which is not used in the window (for example, green).
  3. Fill out the upper-left pixel of the image with this color.
  4. With the same color, fill out all the dynamic area (in our case, the whole of the text field).
    How to do it...
  5. Save the image and launch the following script:
    var wCalc = Sys.Process("CalcPlus").Window("SciCalc");
    Regions.Compare("Calculator", wCalc.Picture(), true);
  6. In the result, in the log, we will see the message The regions are the same.

How it works...

If the Transparent parameter (the third parameter of the Regions.Compare method) would be set to true, TestComplete reads the color of the upper-left pixel of the image and interprets the same as transparent, that is, does not include the areas of the color in the check.

As a result, the images are considered the same, although a part of them is different.

There's more...

Sometimes, it is not sufficient to add transparent areas, for example, if the dynamically changing data appears in different parts of the screen.

To resolve the task, the Regions.Compare method has another parameter, namely that of Tolerance. This should be an integer number, which is the maximal number of the different pixels. In this case, TestComplete will assume that images are the same, unless the number of the differing pixels exceeds the value of the Tolerance parameter.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.11.227