Validating Image using Applitools

Owned by Nauman Sohail (Unlicensed)
Last updated: Sept 19, 2023
2 min read

  1. Login as Test Manager/ Test Engineer.

  2. Create a Project and Navigate to the  Project Page

  3. Clicks on the Project settings page and select the Applitools Integration tab.

  4. Enter the API key in the text field.

  1. Navigate to the Tests Page and Add New Test.

  2. While recording the scenario -> Right Click-> Select GTP Context Menu-> Select Visual Testing -> Select Visual Assertions.

  • Eyes Check Window - Captures all the content in the browser or application window.

  • Eyes Check Element - Captures the image in a rectangular area defined by the element, which is provided as a parameter.

  • Eyes Set View Port Size - a visible area of an application within the application window. The viewport size can impact the layout of a page.

  • Eyes Set Match Timeout - Sets the timeout using the eyes set match timeout. This command takes as a parameter the timeout time in milliseconds.

  • Eyes Set Match Level –

  • Exact - pixel-to-pixel comparison

  • Strict - Strict compares everything, including content (text), fonts, layout, colors, and position of each of the elements

  • Content - Content works similarly to Strict except for the fact that it ignores colors 

  • Layout - Layout, as its name implies, compares the layouts (i.e., structure) of the baseline and actual images

  1. After adding the Visual Assertions, save the Scenario, and Execute it on Cloud Level.

  2. Once the Execution is completed, click on the Visual Results from the Context Menu on the Result Detail Page.

  3. It navigates to the Applitools page, and users can see the Visual images. First, executed results are considered as a baseline image.

  1. Execute the same Test again at the Cloud level; that result image will compare with the baseline image.

  2. If any Mismatch is found, it highlights the Visual changes with a pink highlight.