Element Change

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

Try it

workflow · job-postings-watch.awf 2 étapes

New Job Postings Watch : un workflow de 2 étapes, qui commence par Watch the job list et se termine par Send a push notification.

1. 1 Watch the job list(Element Change — ouvrir sa page de documentation) Element Change
2. 2 Send a push notification(Push Notification — ouvrir sa page de documentation) Push Notification

Ouvrir dans AWFlow Copier le .awf

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.

Inputs and settings

Réglage	Type	Ce que cela fait
CSS Selectors OBLIG.(obligatoire)	List	One or more elements to watch. The flow fires when any of them meets the condition. Use the crosshair to pick an element on the page.
Fire when	Choice	Options: Content changes, Element appears, Element disappears, Text matches. Par défaut : Content changes
Match text	Text	Text to match when condition is "Text matches".
Debounce (ms)	Number	SPAs mutate constantly; debounce coalesces bursts into one fire. Par défaut : 500
URL Patterns	Tags	Par défaut : ["<all_urls>"]

• 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

• Output

Each output item has these fields:

Field	Type	What it holds
triggerType	Always "elementChange"
triggeredAt	Text
selector	Text
condition	Text
url	Text
tabId	Number
matchedText	Text

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 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

Get a phone alert when a careers page lists new jobs débutant · 6 min Nécessite une connexion Get an alert when a price on a page drops intermédiaire · 8 min Aucune configuration

Related nodes

• Page Load: fire when a matching page finishes loading.
• Navigation: fire when a tab opens, changes address or closes.
• Get Element Data: read more data from the page after the trigger fires.
• Browser Notification: alert yourself when it fires.