Element Change

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

Try it

工作流 · job-postings-watch.awf 2 个步骤

New Job Postings Watch：包含 2 个步骤的工作流，从 Watch the job list 开始，到 Send a push notification 结束。

1. 1 Watch the job list（Element Change — 打开其文档页面） Element Change
2. 2 Send a push notification（Push Notification — 打开其文档页面） Push Notification

在 AWFlow 中打开 复制 .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

设置项	类型	作用
CSS Selectors 必填（必填）	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. 默认值：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. 默认值：500
URL Patterns	Tags	默认值：["<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	类型	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 入门 · 6 分钟 需要连接 Get an alert when a price on a page drops 中级 · 8 分钟 无需设置

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.