> 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/test-steps/vision/element-snapshot.md).

# Element Snapshot

Element Snapshot compares the current page or Element with a saved visual control. Use it to catch unintended visual changes in branding, charts, or layout.

![Element snapshot Test Step](https://app.does.qa/screenshots/node/change_element_snapshot.png)

## When to use it

* Protect a fixed design on a page or a single component.
* Set **Mode** to **Page** for the full view, or **Element** for one control.
* Allow a small difference with **Acceptable change allowed** when minor rendering variance should still pass.
* Exclude dynamic regions with **Excluded elements** so clocks, ads, or avatars do not fail the step.

The first successful Run stores the current look as the control. Later Runs compare against that control. When the new design is correct, use **Update Snapshot Control** on the step in the Run result so future Runs use the new baseline.

For a Flow Builder walkthrough, see [Add visual checks](/better-coverage/add-visual-checks.md).

## Configure

### Basics

| Field                         | What to set                                                               |
| ----------------------------- | ------------------------------------------------------------------------- |
| **Mode**                      | `Page` or `Element` (default)                                             |
| **Element**                   | The [Element](/elements/creating-elements.md) when Mode is **Element**    |
| **Acceptable change allowed** | Percentage of difference that should still pass                           |
| **Excluded elements**         | [Elements](/elements/creating-elements.md) to leave out of the comparison |

### Advanced

| Field              | What to set                                          |
| ------------------ | ---------------------------------------------------- |
| **Status on fail** | [Failed Status](/test-step-options/failed-status.md) |

{% hint style="info" %}
**Pro tip:** Prefer Mode **Element** when the check is about one component. A tighter target keeps failures easier to read.
{% endhint %}

## Related

* [Element Position](/test-steps/vision/element-position.md)
* [AI Vision](/test-steps/vision/ai-vision.md)
* [Vision](/test-steps/vision.md)
* [Add visual checks](/better-coverage/add-visual-checks.md)
* [Creating Elements](/elements/creating-elements.md)

**Tags:** `vision`, `element`, `snapshot`, `visual`, `regression`