# Make your app filmable

> Make your app easy to film: data-ondaclip-id attributes, the app scan, and the test id pull requests Ondaclip opens for your team to review.

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.

```html
<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.

Source: https://ondaclip.com/docs/filmable-app/