idomatic scans your React, HTML, Vue & Angular code and injects human-readable, deterministic id attributes — so your Playwright & Cypress tests stop breaking when the DOM shifts.
1function LoginForm() {2 return (3 <form>4 <h1>Sign in</h1>5 <input name="email" placeholder="Email" />6 <button aria-label="Submit login">Log in</button>7 </form>8 );9}
Speed up your test automation and maintain clean markup with zero effort.
Whether you're writing tests, improving accessibility, or debugging — idomatic has you covered.
Stable selectors for Cypress, Playwright, and Selenium. No more flaky tests due to changing class names.
Proper IDs enable better screen reader navigation and ARIA label associations.
Quickly identify elements in DevTools. Meaningful IDs make debugging a breeze.
Consistent naming conventions across your codebase. Everyone speaks the same language.
Run idomatic in your pipeline to ensure all new components have proper IDs before merge.
Reliable element identification for analytics tools and heatmap tracking.
From install to improved markup — here's how simple it is.
npm init @idomatic
Choose your framework: React/JSX or HTML/Vue/Angular. A config file is generated.
{"attributeName": "id","idStrategy": "semantic","prefix": "","excludeTags": ["html", "head", "script"]}
Adjust the rules in .idomatic.config.json to match your project structure.
npx idomatic scan
Run a full scan or preview which files will be modified using the --dry flag.
idomatic is built for the modern frontend ecosystem — with more support on the way.
Got questions? We've got answers.