Testim Documentation

Welcome to the Testim documentation. You'll find comprehensive guides to help you get started quickly, example code snippets, and tips for being more productive. You will also find details about advanced features that allow you to customize Testim to fit your environment or special testing conditions. Don't worry, we'll support you if you get stuck. Let's jump right in!

Guides    Changelog

Validate pixels (element, viewport, document)

Validate visual details down to the pixel level

The pixel validation and wait-for steps allow you to compare visual differences between your baseline and your current test run with pixel-level precision. You can control the comparison method between the baseline and the test by modifying the Match Levels. This functionality is provided as a service by Applitools, and requires integration with their Applitools Eyes app.
You can perform the following pixel validations:

  • Element Pixels – Visual validation on a specific element.
  • Viewport Pixels – Visual validation on your viewport.
  • Document Pixels – Visual validation on your entire document.

📘

This is a PRO feature

This feature is only open to projects on our professional plan. To learn more about our professional plan, click here.

Using Applitools Eyes

Before you can use the Validate element pixels, Validate viewport pixels, Validate document pixels, or Wait for element pixels steps, you first need to integrate the Applitools Eyes app with Testim. For more information see Applitools integration.

In order to view the “pixel validation” or “wait-for” test run detailed results of the pixel comparisons, you need to use the Applitools Eyes app. You also need to use the app to edit existing steps. For more information, see the following resources:

📘

If you change the configuration of your test, a new baseline will be created in Applitools but not in Testim. If you want a new baseline for each configuration, you need to create different tests for each one.

Adding a Validate element pixels step

The Validate element pixels step allows you to compare visual differences of a specific element between your baseline and your current test run.

To add a Validate element pixels step:

  1. Hover over the (arrow symbol) where you want to add the validation.

The action options are displayed.

  1. Click on the Toggle breakpoint button.
  1. Click on the Run test button, to run the test until the breakpoint.
  1. Hover over the (arrow symbol) again and click on the “M” (Testim predefined steps).
    The Predefined steps menu opens.
  1. Click on Validations.
    The Validations menu expands.
  1. Scroll down through the menu and select Validate element pixels.

📘

Alternatively, you can use the search box at the top of the menu to search for Validate element pixels.

  1. In the AUT window, identify the relevant element for which you wish to validate an HTML attribute, and click on it to select it.
    The “Validate HTML attribute” step is added in the Editor, and a thumbnail of the selected element is shown in the step.
  1. Click on the Toggle Breakpoint button after the validation step to remove the breakpoint.
    When you run your test, the baseline pixels will be compared to the test run. If the step fails due to a pixel validation failure, double-click the failed pixel validation step to open the details in Applitools Eyes.

Adding a Validate viewport pixels or Validate document pixels step

These two steps allow you to compare the visual difference between your baseline and your current test run of your viewport OR your document.

To add a Validate viewport pixels or Validate document pixels step:

  1. Hover over the (arrow symbol) where you want to add the validation.

The action options are displayed.

  1. Click on the “M” (Testim predefined steps).
    The Predefined steps menu opens.
  1. Click on Validations.
    The Validations menu expands.
  1. Scroll down through the menu and select Validate viewport pixels or Validate document pixels.

📘

Alternatively, you can use the search box at the top of the menu to search for Validate viewport pixels or Validate document pixels.

  1. The pixel validation step is added in the Editor, and a thumbnail of the selected element is shown in the step.
    When you run your test, the baseline pixels will be compared to the test run. If the step fails due to a pixel validation failure, double-click the failed pixel validation step to open the details in Applitools Eyes.

Adding a Wait for element pixels step

A Wait For step allows you to force your test to pause and wait for a certain event to occur before moving to the next step. In the case of a Wait for element pixels step, Testim waits for the element to be visible on the page and then validates the element on a pixel level.

To add a Wait for element pixels step:

  1. Hover over the (arrow symbol) where you want to add the validation.

The action options are displayed.

  1. Click on the Toggle breakpoint button.
  1. Click on the Run test button, to run the test until the breakpoint.
  1. Hover over the (arrow symbol) again and click on the “M” (Testim predefined steps).
    The Predefined steps menu opens.
  1. Click on Wait For.
    The Wait For menu expands.
  1. Scroll down through the menu and select Wait for element pixels.

📘

Alternatively, you can use the search box at the top of the menu to search for Wait for element pixels.

  1. In the AUT window, identify the relevant element for which you wish to wait for an HTML attribute, and click on it to select it.
    The “Wait for element pixels” step is added in the Editor, and a thumbnail of the selected element is shown in the step.
  1. Click on the Toggle Breakpoint button after the validation step to remove the breakpoint.
    When you run your test, the baseline pixels will be compared to the test run. If the step fails due to a pixel validation failure, double-click the failed Wait for element pixels step to open the details in Applitools Eyes.

Changing the Match Level

Sometimes you will want to changes the comparison method between your baseline and your test, especially when dealing with applications that consist of dynamic content. Testim supports the following Applitools Eyes match levels: Exact, Strict (default), Content, and Layout. For more information about these levels, see Match Levels.
You can edit the Match Level in Testim after creating a pixel validation or wait-for step. Also, in Applitools Eyes, you can mark a region of your element, viewport, or document, and define it with a different match level.

To change the Match Level of a pixel validation or wait-for step:

  1. Hover over the desired pixel validation step and click on the Show Properties () icon.

The Properties panel opens on the right-hand side.

  1. In the Match Level section, click the down arrow and choose one of the following Applitools Eyes options: Exact, Strict, Content, or Layout.
    The next time you run your test, the comparison will be based on your chosen Match Level.

Updated 2 months ago

Validate pixels (element, viewport, document)


Validate visual details down to the pixel level

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.