> For the complete documentation index, see [llms.txt](https://docs.does.qa/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.does.qa/better-coverage/add-visual-checks.md).

# Add visual checks

Vision Test Steps watch what is on screen. Use them when a Check on text or attributes is not enough, such as branding, charts, or layout drift.

Use the **Flow Builder** for this walkthrough.

## Choose the right Vision step

| Test Step                                                  | Use it to                                                |
| ---------------------------------------------------------- | -------------------------------------------------------- |
| [Element Snapshot](/test-steps/vision/element-snapshot.md) | Compare the page or an Element to a saved visual control |
| [Element Position](/test-steps/vision/element-position.md) | Confirm an Element has not moved                         |
| [AI Vision](/test-steps/vision/ai-vision.md)               | Check a written expectation in plain language            |

Start with [**Element Snapshot**](/test-steps/vision/element-snapshot.md) for regression on a fixed design. Use [**AI Vision**](/test-steps/vision/ai-vision.md) when you can describe the outcome more clearly than you can pin a pixel baseline.

## Add an Element Snapshot

{% stepper %}
{% step %}

## Reach the screen you care about

Build the journey with [**Open**](/test-steps/starter/open.md), [**Touch**](/test-steps/action/touch.md), and other steps until the page shows the UI you want to protect.
{% endstep %}

{% step %}

## Add Element Snapshot

From the [**Vision**](/test-steps/vision.md) family, add [**Element Snapshot**](/test-steps/vision/element-snapshot.md).

1. Set **Mode** to **Element** for one control, or **Page** for the full view.
2. Choose the [Element](/elements/creating-elements.md) when Mode is **Element**.
3. Set **Acceptable change allowed** if a small difference should still pass.
   {% endstep %}

{% step %}

## Run once to create the control

The first successful Run stores the current look as the control. Later Runs compare against that control.
{% endstep %}

{% step %}

## Read the result

Open the step in the Run result. Review **Control** and **Actual**, and the comparison views between them, to see what changed.
{% endstep %}

{% step %}

## Update the control when the change is intentional

When the new design is correct, use **Update Snapshot Control** on that step in the result so future Runs use the new baseline.
{% endstep %}
{% endstepper %}

## Check position

Add [**Element Position**](/test-steps/vision/element-position.md) when layout drift matters more than pixels inside the control. Choose the [Element](/elements/creating-elements.md), run once to establish the control, then compare on later Runs.

## Describe an expectation with AI Vision

Add [**AI Vision**](/test-steps/vision/ai-vision.md) when you can write what should be true.

1. Set **Mode** to **Page** or **Element**.
2. Choose the Element when Mode is **Element**.
3. Write an **Expectation** in plain language, optionally with [Values](/values/value-store.md).

{% hint style="info" %}
**Pro tip:** Prefer Mode **Element** for [**AI Vision**](/test-steps/vision/ai-vision.md) and [**Element Snapshot**](/test-steps/vision/element-snapshot.md) when the check is about one component. A tighter target keeps failures easier to read.
{% endhint %}

## Related

* [Vision](/test-steps/vision.md)
* [Element Snapshot](/test-steps/vision/element-snapshot.md)
* [Element Position](/test-steps/vision/element-position.md)
* [AI Vision](/test-steps/vision/ai-vision.md)
* [Choose durable selectors](/better-coverage/choose-durable-selectors.md)
* [Creating Elements](/elements/creating-elements.md)
* [Check Text](/test-steps/check/check-text.md)