1. Version Requirement #

Recapture & Compare is a feature that allows users to record a UI element, create a new location, and present a comparable view. It requires:

• Clicknium Visual Studio Code Extension 0.1.9 or higher

• Clicknium Python Module  0.1.8 or higher

2. Overview​ #

With many websites including dynamic pages, locating an element can be challenging as the element’s locator may fail next time. The “Recapture and Compare” feature enables users to quickly decide which properties on the locator to use in such situations.

Recapture & Compare allows you to record the same UI element, create a new location, and present the user with a comparable view. The user may easily distinguish the dynamic attributes by comparing the new locator to the prior one. The chosen list should not include these dynamic attributes.

3. Youtube Case Study #

For instance, suppose a user wants to download the first video cover image from the YouTube main page. They can generate the locator using Clicknium Recorder. However, when the user validates the location after refreshing the web page, it may fail because the image has changed. In this scenario, the user can use the “Recapture and Compare” feature to recapture the first image again.

The “Recapture and Compare” feature will present the user with a comparative view. By comparing the new and old locator, the user can easily distinguish the dynamic attributes. They can then uncheck the dynamic attributes and choose different attributes that are more reliable. In the example above, the user can uncheck “src” and check “cssSelector,” then save the locator.

Let’s review the detailed steps to guide you through the process.

Case background: The user wants to download the first video cover image from the YouTube main page.

It is simple to generate the locator like the one below using Clicknium Recorder:

When you validate the location after refreshing the web page, it may fail because the image has changed.

Let us use ‘Recapture and Compare’ to recapture the first image again.

You will get the following view:

As you can see from the comparative mode, the values of the attributes “src” and “sInfo” have changed, so we should disregard them and choose different attributes.

You can uncheck “src” and check “cssSelector” in this situation, then save the locator.

Overall, the “Recapture and Compare” feature is a useful tool for users who want to locate dynamic elements reliably.