---
title: Element Change
description: Run the flow when any of one or more CSS selectors on a matching page changes.
---

Run a workflow when an element on an open page changes, appears, disappears, or shows a given text.

## Try it

## What it does

When a page matching the **URL Patterns** finishes loading, the extension starts watching each element listed in **CSS Selectors** on that page. It keeps watching while the page stays open. As soon as one of them meets the **Fire when** condition, the workflow runs from this trigger.

* **Content changes**: the element's text is different from before.
* **Element appears**: the element was not on the page and now is.
* **Element disappears**: the element was on the page and now is not.
* **Text matches**: the element's text now contains **Match text**. It fires once when the text starts matching, not again while it keeps matching.

Web pages often change many times in a split second. The trigger waits until the page has been quiet for **Debounce (ms)** (500 by default) before it checks, so a burst of changes fires once.

## When to use it

* Get told when a price changes or a "Back in stock" label appears.
* React when a status line on a dashboard changes, or when a new message shows up.
* Watch several elements at once: add a row per element, and any of them can fire the workflow.

To run when a page opens rather than when it changes, use [Page Load](/nodes/builtin/trigger/pageload/).

## Inputs and settings

* **CSS Selectors**: click the crosshair on a row and then click the element on the page, so you do not have to write the selector yourself. If a selector matches several elements, only the first one on the page is watched. Empty rows are ignored.
* **Match text** is case-sensitive and matches part of the text: `In stock` matches "In stock now" but not "in stock".
* **Fire when**, **Match text**, **Debounce (ms)** and **URL Patterns** apply to every selector in the list.
* **URL Patterns** use the form `scheme://host/path` with `*` as a wildcard, for example `https://shop.example.com/product/*`. Only `http` and `https` pages are watched.

## Outputs

Each output item has these fields:

```json title="Shape of an output item"
{
  "triggerType": "elementChange",
  "triggeredAt": "…",
  "selector": "…",
  "condition": "…",
  "url": "…",
  "tabId": 0,
  "matchedText": "…"
}
```

* `selector`: the one selector that fired, not the whole list.
* `condition`: `changed`, `appeared`, `disappeared` or `matches`.
* `matchedText`: the element's text when it fired. For **Element disappears**, it is the last text the element had.
* `url` and `tabId`: the page and tab where the change happened.

## Dependencies and credentials

None. This node needs no connection and has no slots for other nodes.

## Example workflow

Get a notification when a product is back in stock:

1. Add **Element Change** with **URL Patterns** `https://shop.example.com/product/*`.
2. In **CSS Selectors**, use the crosshair to pick the stock label, for example `.availability`.
3. Set **Fire when** to **Text matches** and **Match text** to `In stock`.
4. Add [Browser Notification](/nodes/extension/browsernotification/) with **Title** `Back in stock` and **Message** `{{ $input.url }}`.
5. Activate the workflow, then reload the product page and leave it open.

## Common issues

* **Nothing fires after I activated the workflow.** Watching starts when a matching page finishes loading. Reload pages that were already open.
* **Nothing fires at all.** Check that the page address matches a **URL Patterns** entry and that the selector finds the element. Pick it again with the crosshair: sites often rename their classes.
* **It fires too often.** The page keeps changing the element (a clock, a counter, an animation). Raise **Debounce (ms)**, pick a more precise element, or use **Text matches**.
* **It stopped firing after I moved to another page.** Watching ends when the page goes away and starts again on the next matching page load. The tab must stay open on the page you watch.
* **It does not work in the web app.** This node runs in the browser extension; install it and activate the workflow there.

## Recipes with this node

## Related nodes

* [Page Load](/nodes/builtin/trigger/pageload/): fire when a matching page finishes loading.
* [Navigation](/nodes/builtin/trigger/navigation/): fire when a tab opens, changes address or closes.
* [Get Element Data](/nodes/extension/getelementdata/): read more data from the page after the trigger fires.
* [Browser Notification](/nodes/extension/browsernotification/): alert yourself when it fires.