# Interactive Demo

When your application's UI changes between releases, test locators that relied on old element attributes will break. ContextQA's self-healing engine detects these failures at runtime, finds the best matching element on the updated page, and repairs the step automatically — or flags it for manual review when confidence is lower. Select a scenario to see how each case is handled.

{% tabs %}
{% tab title="Button Renamed" %}
{% stepper %}
{% step %}

#### UI Change Detected

A button on the checkout page was renamed and its ID was updated between releases.

**What changed:**

* Element ID: `btn-submit` → `checkout-submit-btn`
* Button text: "Submit Order" → "Place Order"

The stored locator in the test step no longer matches any element on the page. Without self-healing, the test would fail immediately.

{% hint style="info" %}
**AI Agent:** Detects that the element referenced in the test step cannot be found using the stored locator, and activates the healing engine.
{% endhint %}
{% endstep %}

{% step %}

#### AI Healing Engine Activates

The self-healing engine evaluates candidate elements on the updated page using visual appearance, semantic role, and surrounding context.

**Healing timeline:**

1. Element not found with stored locator
2. AI locator engine activated
3. Candidate elements scored by visual and semantic similarity
4. Best match selected: "Place Order" button, `role=button`
5. Locator updated in test step

{% hint style="info" %}
**AI Agent:** Multiple candidate elements are evaluated and scored. The best match is selected based on how closely it resembles the original element in terms of visual position, role, and surrounding page context.
{% endhint %}
{% endstep %}

{% step %}

#### Auto-Healed ✓

**Confidence score: 96%** — exceeds the auto-heal threshold.

The locator is automatically updated in the test step. The test continues executing and passes. No engineer action is required.

{% hint style="success" %}
**AI Agent:** When confidence exceeds the auto-heal threshold, the repair is applied immediately and the test proceeds. The healed step is logged in the execution results so teams can review what changed.
{% endhint %}

| Outcome          | Detail                                  |
| ---------------- | --------------------------------------- |
| Decision         | Auto-Healed                             |
| Action Required  | None                                    |
| Test Result      | Passes after healing                    |
| Audit Trail      | Healed step logged in execution results |
| {% endstep %}    |                                         |
| {% endstepper %} |                                         |
| {% endtab %}     |                                         |

{% tab title="Element Moved" %}
{% stepper %}
{% step %}

#### UI Change Detected

An element was relocated to a different position in the page layout — a common result of UI redesigns or responsive layout changes.

**What changed:**

* Grid position: row 1, col 3 → row 2, col 1
* DOM nesting depth changed

The element still exists on the page, but path-based or position-based locators no longer point to it correctly.

{% hint style="info" %}
**AI Agent:** Detects the locator mismatch and activates the healing engine to find the element in its new location.
{% endhint %}
{% endstep %}

{% step %}

#### AI Evaluates Match Quality

The healing engine locates the element in its new position and evaluates how confident it is that this is the correct match.

**Healing timeline:**

1. Element not found with stored locator
2. AI locator engine activated
3. Candidate elements scored by visual and semantic similarity
4. Best match selected in new grid position
5. Locator updated in test step

{% hint style="info" %}
**AI Agent:** A position change introduces more uncertainty than a simple rename — the element looks the same but its relationship to surrounding elements has changed, which lowers the overall confidence score.
{% endhint %}
{% endstep %}

{% step %}

#### Healed with Warning ✓

**Confidence score: 78%** — within the 70–89% range.

The repair is applied, but the step is flagged for manual review. The test is marked as "healed with warning" in the execution results.

{% hint style="success" %}
**AI Agent:** Healing is applied so the test can continue running, but the team is notified to review the healed step and confirm the correct element was selected. This prevents false positives from silently accumulating.
{% endhint %}

| Outcome          | Detail                         |
| ---------------- | ------------------------------ |
| Decision         | Healed with Warning            |
| Action Required  | Manual review recommended      |
| Test Result      | Passes after healing (flagged) |
| Notification     | Team notified for review       |
| {% endstep %}    |                                |
| {% endstepper %} |                                |
| {% endtab %}     |                                |

{% tab title="Class Changed" %}
{% stepper %}
{% step %}

#### UI Change Detected

A button's CSS class was significantly changed and a new `data-testid` attribute was added — a scenario common when a design system is updated or components are refactored.

**What changed:**

* CSS class: `primary-btn` → `btn btn-primary-v2`
* A new test ID attribute was added to the element

{% hint style="info" %}
**AI Agent:** The combination of a class name change and structural refactoring makes it harder to determine with certainty whether the candidate element is the same one the test was originally targeting.
{% endhint %}
{% endstep %}

{% step %}

#### AI Evaluates — Low Confidence

The healing engine finds candidate elements but cannot determine with sufficient confidence that any one of them is the correct match.

**Healing timeline:**

1. Element not found with stored locator
2. AI locator engine activated
3. Candidate elements scored by visual and semantic similarity
4. Multiple candidates with similar scores — confidence below threshold
5. Healing not applied — queued for manual review

{% hint style="info" %}
**AI Agent:** When multiple candidates score similarly and none reaches the minimum threshold, applying an automatic repair risks silently changing what the test is actually testing. In this case, human judgment is required.
{% endhint %}
{% endstep %}

{% step %}

#### Manual Review Required

**Confidence score: 62%** — below the minimum threshold for automatic healing.

No repair is applied. The test step is queued for manual review and the team is notified. The test is marked as requiring attention in the dashboard.

{% hint style="success" %}
**AI Agent:** Low-confidence cases are surfaced in the dashboard with the full context of what changed and which candidate elements were evaluated. A team member can review the candidates and confirm or select the correct one with a single click.
{% endhint %}

| Outcome         | Detail                               |
| --------------- | ------------------------------------ |
| Decision        | Manual Review Required               |
| Action Required | Team must review and confirm element |
| Test Result     | Not updated automatically            |
| Notification    | Team notified immediately            |

| Confidence Range | Decision                                     |
| ---------------- | -------------------------------------------- |
| 90% and above    | Auto-Healed — no action needed               |
| 70% – 89%        | Healed with Warning — review recommended     |
| Below 70%        | Manual Review Required — healing not applied |
| {% endstep %}    |                                              |
| {% endstepper %} |                                              |
| {% endtab %}     |                                              |
| {% endtabs %}    |                                              |

***

{% hint style="success" %}
**Try it yourself** — [🚀 Start Free Trial →](https://app.contextqa.com/signup) · [Book a Demo](https://contextqa.com/book-a-demo/)
{% endhint %}