Marking the path

Mystra finds the usual buttons on its own. Three attributes make it certain and fast, and survive redesigns.

Why mark the path at all

Without markers the runner works like a first-time visitor: it looks for a button that says Upgrade, Pricing or Billing, then for a plan button, then for a confirm button in a dialog. That works on most apps, but it is guesswork, and guesswork has two costs. It is slower, because each guess waits for elements that may never appear, and when a guess fails the run is uncertain rather than broken, because a missing button is more often a renamed button than a broken product. A marker removes the guess: the runner presses the marked element first, and if the marked element is missing after a deploy, that is a change on your side worth knowing about.

The three attributes

data-mystra="upgrade"

On the button that starts checkout. The runner presses this before looking for anything else.

data-mystra="checkout"

On a plan dialog's confirm button, if choosing a plan opens one.

data-plan="pro"

Or any stable selector on the paid area, used as the access proof.

<button data-mystra="upgrade" onClick={startCheckout}>Upgrade to Pro</button>

<section data-plan="pro">{/* only rendered for paying accounts */}</section>

Where to put them

• One upgrade marker per page. If the pricing page has three plan buttons, mark the one that leads to the price you told Mystra to expect. A second marked button is ignored.
• On the element that receives the click, not on a wrapper. A marker on a div around the button still works, but the runner clicks the centre of the marked element, so keep it on the control.
• The access selector must be absent for unpaid accounts. Mystra proves the paid area is closed to a fresh account, so a selector that renders for everyone, only greyed out, proves nothing. Render the element for paying accounts only.

Checking your markers

Press Run now after a deploy that adds them. The pay step's checks list what was pressed, in order, for example Pressed `Upgrade to Pro` → `Confirm`, so you can confirm the marked button was the first press. The same markers are listed in the brief for your AI, so an assistant wiring your app adds them for you.