Record the flow. The extension lists every element missing a stable data-testid. Your dev knows exactly what to add, your Playwright and Cypress tests survive the next refactor.
Built for teams running Playwright or Cypress. Coming soon to the Chrome Web Store.
Not because Playwright or Cypress changed. Because your selectors were never stable. And paving the way costs. Today, you're stuck with two bad options.
nth-child or CSS path - you mergedata-testid, propose a clean name for each
With TestID Hunter, you record the flow. The extension lists every Weak element with a suggested data-testid, scoped to the component. The ticket is ready in 5 minutes - the dev sees exactly what to add and where.
Robust e2e tests by default. No more back-and-forth, no more burned Mondays, no more selectors that die at the next refactor.
No setup. No SaaS. No backend. Install the extension, start recording.
Click through your app like a user. Every click, every input, every navigation is captured with a screenshot, a bounding box, and a DOM snapshot.
Every element is automatically scored. Focus only on the Weak ones - the rest is already safe to target.
testid-ticket-signup.zip
┣━━ report.md
┗━━ screenshots/
┣━━ element-01-email-input.png
┣━━ element-02-continue-btn.png
┣━━ viewport-03-card-link.jpg
┗━━ page-01.pngDownload a ZIP with annotated screenshots and a ready-to-paste Markdown ticket. Or copy-paste straight into Jira / GitHub / Linear / Redmine.
A QA's job isn't to find any selector. It's to find selectors that don't break at the next sprint. We do that for you.
data-testid presentidaria-label available
Nothing to do - the selector won't break. And yes, aria-label ranks just as Solid as data-testid - you win on testability and accessibility.
name, placeholderrole + text contenttitle attributeWorks. Will break if copy or structure changes.
nth-childid
We suggest a data-testid and put it in the ticket.
A live hover badge shows the rank, score, and reason for every element as you move your mouse - so you know what to care about before interacting.
The cursor box turns green on Solid elements, blue on Usable, red on Weak. Skip the green ones entirely with one setting toggle.
Markdown, ZIP, or clipboard - pick the format that fits your ticketing tool.
# User signup flow
> Screenshots - use the Copy image buttons in the extension
### 3. `admin-delete-btn`
- **Rank**: Weak - no stable attribute found
- **Tag**: `<button>`
- **Text**: "Delete user"
- **CSS selector**: `.admin-row button`
- **XPath**: //*[@id="root"]/div/table/tbody/tr[3]/td[4]/button
**Add to HTML:**
```html
data-testid="admin-delete-btn"
```
> Alternative: an aria-label="Delete user" would also rank as Solid - pick whichever fits your team.testid-ticket-signup.zip
├── report.md
└── screenshots/
├── element-01-email-input.png
├── element-02-submit-button.png
├── viewport-03-admin-delete-btn.jpg
└── page-01.pngEvery screenshot has a Copy button. Click it, paste into Jira / GitHub / Linear - the tool uploads the image to its own CDN automatically. Zero friction, zero hosting on your side.
Output formats are universal. No new tool to learn. No extra API integration to maintain.
Component names for React, Vue, Angular, Svelte are included in the ticket.
Suggested data-testid values work out of the box with Playwright, Cypress, TestCafe.
QA work happens on internal apps with sensitive data. Here is exactly where each byte goes.
chrome.storage.local, never sent anywheredata-testid: all computed locallyThe extension requests only the permissions strictly required to record interactions on the tab you choose. No background activity, no all-sites permission.