Make your app filmable

Ondaclip finds elements in your app by their data-ondaclip-id. An id stays the same when the wording, language or layout changes, so your tutorials keep working.

<button data-ondaclip-id="team-invite-button">Invite</button>

Ondaclip also reads data-testid, so apps that already use it keep working. You can switch to data-ondaclip-id one screen at a time; the scan counts both.

Keep your own attribute

Your product can keep the attribute your team already uses. The default is data-testid; set a different one with testIdAttribute in config.yaml (for example flt-semantics-identifier for a Flutter web app). Ondaclip reads data-ondaclip-id first, then that attribute. Put one of the two on an element, never both: two ids on one element can disagree, and the tutorial may then find the wrong one.

Naming

Use one convention: <area>-<element>-<kind>, lowercase, with words joined by -.

Part	What	Examples
area	the screen or feature, as the menu calls it	home, orders, order-detail, settings-team
element	what it’s for, in your product’s words	new-order, search, status-filter, summary
kind	what it is	button, link, input, select, tab, card, table, row, dialog, title, badge, item

• Lists: use one id per kind, not one per item: orders-row, orders-row-link. The tutorial picks the row with contains.
• Shared components: add an optional testId prop and derive the ids of their parts from it: ${testId}-button, ${testId}-${key}-item. The screen passes testId="orders-status-filter".
• Dialogs: <area>-<name>-dialog, with <area>-<name>-confirm-button and <area>-<name>-cancel-button.
• Keep the id when the element moves or its wording changes. Rename it only when the element’s purpose changes, and update the tutorials in the same pull request.
• Never put data in an id: no names, numbers or dates.

Scan the app

In the studio, the Filmable page scans the deployed app. It visits the home page, the menu links and each tutorial’s start page, then lists, screen by screen, the elements a tutorial needs and their test ids. It doesn’t click anything.

Test id pull requests

From the scan, Ondaclip can open a pull request that adds the missing test ids. These pull requests only add test ids: a check fails if one changes anything else. A person reviews and merges it.