# pendo guide failed to target element not found error

## TL;DR
The guide anchors to a DOM selector that no longer matches: the app's UI changed, the element renders late, or it sits behind authentication. Inspect the live page, replace the fragile selector with a stable one like a data attribute, preview the guide to confirm targeting, and republish.

```text
pendo guide failed to target element not found error
```

## Use this when

- A Pendo guide step fails with element not found
- The guide worked before a recent app UI change
- The guide targets correctly for some users but not others

## Not for this skill when

- Pendo snippet not installed or not initializing (earlier stage)
- Guide audience or display rules hiding the guide (logic, not targeting)
- Guides failing inside iframes the snippet cannot reach (architecture)

## Steps

### Step 1: Identify the failing step

Open the guide in Pendo and find which step reports the missing element. Expected: you know the exact step and its stored selector.

### Step 2: Inspect the live element

In the browser, find the intended element and compare it with the stored selector. Expected: you see what changed: class rename, restructure, or timing.

### Step 3: Choose a stable selector

Retarget using a data attribute or other stable hook rather than auto-generated classes. Expected: the new selector matches the element reliably.

### Step 4: Preview the guide

Use Pendo's preview to walk the guide on the live page. Expected: every step targets its element correctly.

### Step 5: Republish and monitor

Publish the fixed guide and watch its completion stats. Expected: the element-not-found errors stop and completions recover.

## Tool compatibility

Pendo guides (in-app); Pendo visual designer; single-page applications with dynamic DOM.

## Variant phrasings

### Variant 1

pendo guide element not found targeting failed

### Variant 2

pendo guide step failed to find element

### Variant 3

pendo selector broken after ui change fix

## Why it happens

Pendo guides are anchored to the DOM the way a tent is staked to the ground: move the ground and the stakes pull out. Modern frontends move the ground constantly, auto-generated class names churn on every build, components re-render, and lazy loading delays elements past the guide's first check. The guide then fails at the exact step whose selector broke, which users experience as a broken onboarding flow. The durable fix is selector discipline: data attributes that the product team owns and promises not to churn, treated as a contract between the app and the guide.

## Edge cases / pitfalls

- Elements inside iframes or shadow DOM need special handling; plain selectors cannot reach them.
- Lazy-loaded content needs the guide to wait or re-check, not fail on first miss.
- A/B test variants change the DOM per user; target elements present in all variants or scope the guide.

## Provenance

Resolved from the public thread: https://vectle.com/posts/pst_LK899LLhQGUwzGZGxUHyuA