Visual testing

Adding Validations

Achieve complex verifications on your website with Low Code Automation Validations. This guide outlines the four essential validation methods offered by Low Code Automation, designed to streamline the validation process for your automated tests. Low Code Automation enables users to effortlessly ensure the accuracy and reliability of your workflows without the need for extensive coding expertise. It provides the following four validation methods:

Visual Validation

Visual Validation is a powerful feature that allows you to confirm the correctness of elements, ensuring they appear as expected. It helps identify discrepancies in the visual presentation of your web application, such as layout issues, color changes, or missing elements. With Low Code Automation, you can perform visual validation on specific elements. This helps ensure the accuracy and consistency of critical elements without verifying the entire page. It also ensures that changes or updates to other parts of the page do not affect the validation results for unrelated elements, thereby improving test stability.

How to add Visual Validations

While you record a test, you can add visual validations to specific elements to ensure they appear as expected. To perform visual validation on specific elements:

1. While recording, click Visual Validation.
2. You can perform the following actions:

• Hover over the screen and choose the element to validate. You can also use UP or DOWN arrow keys to select a more appropriate element.
• You can also add more visual validations for other steps as needed.

1. If needed, you can set acceptable variations between expected and actual screenshots for visual validation. You can do that by using the Difference Threshold slider in the step details section.
2. Click Save recording.

Replay of Visual Validation

Low Code Automation uses a built-in visual diff engine to compare new screenshots with the baseline. During recording, Low Code Automation captures the screenshot of the element where the visual validation is added and uses it as baseline to compare it with screenshots taken during execution for the same element. When the test gets executed, you can click Compare Screenshots to view and compare the baseline and captured screenshots. You can compare them using the following views:

• Side-by-side: Displays the Baseline (expected) and Captured (actual) screenshots side by side and the percentages for observed difference and set threshold.
• Overlay: Shows the Baseline (expected) and Captured (actual) screenshots layered on top of each other for comparison.

Difference Threshold

The Difference Threshold feature lets you specify the acceptable difference between expected and actual screenshots for visual validations. You can adjust the threshold for each visual validation step. The default threshold is 10% and the minimum is 0%.

Update Visual Baseline

When your application undergoes recent visual changes, it can lead to test failures due to the new changes. To solve this, Low Code Automation offers an Update Visual Baseline feature. With this feature, you can easily update the baseline image to the latest version without having to re- record all the steps. On the step page, click Update baseline to refresh the baseline image. All future test executions will use this updated baseline.

How cloud baselines are set for visual validation

When you run a test in the cloud, Low Code Automation sets a baseline image for each browser to compare future screenshots:

• Chrome:
  • The system uses your local baseline for the first cloud run. A relaxed threshold (the higher value between your set threshold and 40%) is used for this comparison.
  • If the test passes, the image capture during first successful cloud execution becomes the new Chrome baseline for future runs.
• Safari, Firefox, and Edge:
  • The first cloud run for each browser skips visual validation but captures a screenshot on that browser.
  • If the run is successful, the captured screenshot becomes the baseline for that browser. After the baseline is set for each browser, all future visual validations use that browser’s baseline for comparison unless updated by any user.