Validate CSS property

The CSS property validation allows you to validate any CSS property of an element (e.g. color, background-color, font-family, etc.).

Adding a Validate CSS property step

To add a Validate CSS property step:

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

The action options are displayed.

2. Click on the Toggle Breakpoint button.

3. Click on the Play Scenario button to run the test until the breakpoint.

4. Hover over the (arrow symbol) again and click on the “M” (Testim predefined steps).
   The Predefined steps menu opens.

5. Click on Validations.
   The Validations menu expands.

6. Scroll down through the menu and select Validate CSS property.

📘

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

7. In the AUT window, identify the relevant element for which you wish to validate a CSS property, and click on it to select it.
   The CSS Property Validation form is shown.

8. In the Property name field, enter a valid CSS property for the element.
9. In the Expected value field, enter the value you wish to validate for the property.
10. Click OK.
    The step is created, and a thumbnail of the selected element is shown in the step.

11. Click on the Toggle Breakpoint button after the validation step to remove the breakpoint.

Modifying a Validate CSS property step

If you want to change the element you selected, you don’t need to delete and re-record the step. Instead, you can reassign the element with a different element. Additionally, you can modify the property name and/or expected value of the original element you selected without selecting a new element.
To reassign the selected element in a Validation step:

1. Hover over the position to the left of the step for which you want to reassign the element and click on the Toggle Breakpoint button.
2. Click on the Play Scenario button to run the test until the breakpoint.
3. Hover over the step for which you want to reassign the element and click on the Show Properties () icon.

The Properties panel opens on the right-hand side.
4. Hover over the Target element thumbnail to show options, and click Reassign.

5. In the AUT window, identify the new element that you would like to select and click on it.
   The selected element is shown in the Target element box in the Properties panel.
6. In the Properties panel Property name field enter the property name for the new element.
7. In the Properties panel Expected value field enter the expected value of the new property.

📘

When modifying the value of the Property name and Expected value in the Properties panel, make sure they are enclosed in single quotes: e.g. ‘background’ and ‘#ffea64’.

8. Click on the same Toggle Breakpoint button to the left of the step for which you reassigned the element to remove the breakpoint.
9. If you want to modify the property name and/or expected value of the original element you selected (without choosing a new element), follow Steps 3, 6, and 7 above.