Preventing AI Test Hallucinations by Indexing data-testid and ARIA Attributes

Generating integration and end-to-end tests with AI coding agents is one of the highest-leverage developer workflows. However, agents routinely fail at one specific step: guessing DOM element selectors.

An agent will write:

await page.click(".btn-primary-submit"); // Fails: Class name does not exist

In TokenCap, we solve this by parsing JSX AST nodes and extracting explicit testing attributes in src/frontend/testIds.js.

What TokenCap Indexes

1. Test Identifiers: data-testid, data-test, data-cy
2. Accessibility Roles: role="button", role="navigation", role="dialog"
3. Screen Reader Labels: aria-label, aria-labelledby, aria-describedby
4. Form Associations: htmlFor and input id pairings

Snapshot Excerpt

When tokencap make runs, frontend components include their test locator contract:

### Component: UserBillingForm (src/components/UserBillingForm.jsx)
Testing Selectors:
  - Submit Button: `getByTestId("billing-submit-button")` (line 42)
  - Plan Selector: `getByRole("combobox", { name: "Billing Tier" })` (line 68)
  - Card Input: `getByTestId("card-element-input")` (line 95)

With this context provided up front, coding agents generate robust, locator-accurate tests using modern accessibility best practices rather than brittle CSS path queries.

Explore the frontend indexing engine at tokencap.vansharora.app