SelectorHeal — Auto-Healing Playwright Selector Plugin for Broken UI Tests
Your Playwright test suite was green on Friday. Someone moved a button on Monday and now 40 tests are red and your CI is screaming. SelectorHeal is a Playwright plugin that intercepts failing selectors, uses a visual fingerprint of the element to find its new location, patches the selector in your test file, and opens a PR — before you finish your coffee.
Difficulty
advanced
Category
Computer Vision
Market Demand
High
Revenue Score
7/10
Platform
CLI Tool
Vibe Code Friendly
No
Hackathon Score
🏆 8/10
Validated by Real Pain
— sourced from real community discussions
UI test selectors break constantly when designers rename classes or move elements, forcing engineers to manually rewrite Playwright scripts after every frontend deploy.
What is it?
UI test breakage from selector drift is the number one reason QA teams abandon test automation entirely. When a designer renames a class or moves a button, every hardcoded selector that touched it fails, and someone has to manually hunt down the new selector in DevTools. SelectorHeal hooks into Playwright's test runner, intercepts ElementNotFound errors, captures a screenshot region of where the element was, uses OpenCV and a cosine similarity search to find the element's new position, and patches the test file automatically. It runs as an npm package with a one-line import. The auto-PR feature uses the GitHub API to open a draft PR with the healed selectors for human review. Buildable now because Playwright's interceptor API is stable, OpenCV-js runs in Node without a GPU, and the GitHub Octokit library makes PR creation trivial.
Why now?
Playwright became the dominant UI testing framework in 2025 with over 180k public repos, creating a massive installed base of teams experiencing selector drift — and no drop-in npm solution exists yet.
- ▸Playwright reporter plugin that intercepts ElementNotFound errors and captures element region screenshots (Implementation note: Playwright's reporter API plus sharp for screenshot crop).
- ▸OpenCV.js cosine similarity search across the current page DOM to locate visually matching elements.
- ▸Automatic test file patch that rewrites the failing selector with the healed one.
- ▸GitHub Octokit auto-PR creation with a diff showing old vs new selector for human review.
Target Audience
Frontend and QA engineers at 10-500 person startups running Playwright test suites — roughly 180k active Playwright repositories on GitHub as of this year.
Example Use Case
A 3-person startup's CI pipeline breaks every time the design team ships — after installing SelectorHeal, 80% of selector failures self-heal and open a draft PR within 2 minutes, reducing test maintenance from 4 hours per sprint to 20 minutes.
User Stories
- ▸As a frontend engineer, I want failing Playwright selectors to self-heal and open a PR, so that I stop spending 2 hours per sprint manually fixing test selectors.
- ▸As a QA lead, I want all auto-healed selectors to require human review via a draft PR, so that my team trusts the automation without fear of silent test corruption.
- ▸As a DevOps engineer, I want a Slack notification when SelectorHeal patches a test, so that I know which CI failures were resolved automatically.
Done When
- ✓Selector healing: done when a broken Playwright test runs, ElementNotFound is intercepted, and a healed selector is written to a draft GitHub PR within 3 minutes.
- ✓Confidence gate: done when heals with less than 80% visual match confidence are skipped and logged as unresolvable rather than patched.
- ✓License gate: done when running without a valid Pro license key shows a clear error after 10 heals and links to the pricing page.
- ✓Slack notification: done when a heal event triggers a Slack message showing the repo, file name, old selector, and new selector.
Is it worth building?
$29/month x 100 teams = $2,900 MRR at month 4. $29/month x 400 teams = $11,600 MRR at month 9. Math assumes GitHub Marketplace listing drives 2% conversion from 20k monthly installs.
Unit Economics
CAC: $8 via open-source npm funnel. LTV: $348 (12 months at $29/month). Payback: immediate. Gross margin: 94%.
Business Model
SaaS subscription
Monetization Path
Free tier: 10 auto-heals per month. Pro at $29/month per repo: unlimited heals, auto-PR, Slack notifications.
Revenue Timeline
First dollar: week 3 via beta Pro license. $1k MRR: month 3. $5k MRR: month 7.
Estimated Monthly Cost
Vercel: $0 (license API only), Supabase: $25 (license records), Stripe fees: ~$20. Total: ~$45/month at launch.
Profit Potential
Full-time viable at $8k-$12k MRR with 280-420 paying repos.
Scalability
High — expand to Cypress plugin, VSCode extension for inline healing, and team dashboard showing heal rate trends.
Success Metrics
Week 2: plugin installs on 5 beta repos. Month 1: 50 npm installs. Month 2: 20 paid licenses.
Launch & Validation Plan
Post a working demo GIF in r/Playwright and the Playwright Discord showing a broken test self-healing in real time — measure GitHub stars and Discord DMs.
Customer Acquisition Strategy
First customer: publish plugin to npm for free, post demo GIF in Playwright Discord and r/softwaretesting, offer 6 months Pro free to first 10 repos that star the GitHub repo. Ongoing: GitHub Marketplace listing, dev Twitter content showing before/after CI logs, SEO targeting 'Playwright selector broken'.
What's the competition?
Competition Level
Medium
Similar Products
Testim (requires full platform migration), Applitools (expensive, visual-only), Playwright native retry (no selector healing) — SelectorHeal is the drop-in npm plugin that heals without lock-in.
Competitive Advantage
Testim and Applitools require migrating your entire test suite to their platform — SelectorHeal is a one-line npm install on your existing Playwright setup with no lock-in.
Regulatory Risks
Low regulatory risk. Ensure GitHub API usage complies with rate limits and OAuth app terms for auto-PR creation.
What's the roadmap?
Feature Roadmap
V1 (launch): Playwright reporter plugin, OpenCV heal, auto-PR, license gate. V2 (month 2-3): Cypress support, heal confidence dashboard, team license. V3 (month 4+): VS Code extension for inline healing, CI trend analytics.
Milestone Plan
Phase 1 (Week 1-2): npm package with heal engine and test file patcher shipped. Phase 2 (Week 3): GitHub PR creator, license gate, and Slack notifier live. Phase 3 (Month 2): 50 npm installs and 15 paid licenses.
How do you build it?
Tech Stack
Node.js npm package, Playwright test runner API, OpenCV.js for element fingerprinting, GitHub Octokit for auto-PR, Stripe for license keys — build with Cursor for core plugin logic.
Suggested Frameworks
Playwright Test API, OpenCV.js, GitHub Octokit
Time to Ship
3 weeks
Required Skills
Playwright internals, OpenCV.js pixel similarity, Node.js npm package publishing, GitHub API.
Resources
Playwright test runner docs, OpenCV.js docs, GitHub Octokit docs, npm package publishing guide.
MVP Scope
src/index.ts (Playwright reporter plugin entry), src/healer.ts (OpenCV element finder), src/patcher.ts (test file selector rewriter), src/github.ts (Octokit PR creator), src/license.ts (license key validator), test/fixtures/ (sample broken Playwright test for demo), package.json (npm package config), README.md (setup guide), .env.example (GITHUB_TOKEN, LICENSE_KEY).
Core User Journey
npm install selectorheal -> add reporter to playwright.config.ts -> run broken test suite -> receive GitHub PR with healed selectors within 3 minutes.
Architecture Pattern
Playwright test fails -> SelectorHeal reporter intercepts error -> sharp crops element region -> OpenCV.js scans current DOM screenshots for match -> patcher rewrites test file -> Octokit opens GitHub draft PR -> Slack webhook notifies team.
Data Model
License has one Repo (GitHub repo URL). Repo has many HealEvents. HealEvent has old selector, new selector, confidence score, and timestamp.
Integration Points
Playwright Test API for error interception, OpenCV.js for visual element matching, GitHub Octokit for PR creation, Stripe for license keys, Supabase for license storage, Slack Webhooks for CI notifications.
V1 Scope Boundaries
V1 excludes: Cypress support, CI dashboard, team analytics, custom heal strategies, multi-repo license pooling.
Success Definition
A developer installs the npm package, runs their broken Playwright suite, and receives a GitHub PR with healed selectors without ever reading the docs beyond the README.
Challenges
The hardest non-technical problem is convincing engineering teams to trust an automated tool that modifies their test files — the auto-PR review gate is critical to adoption trust, not a nice-to-have.
Avoid These Pitfalls
Do not attempt to heal semantic changes where the element genuinely no longer exists — false positives destroy trust faster than doing nothing. Do not skip the human-review PR gate — teams will uninstall if the plugin silently rewrites test files. Finding first paying customers requires live GitHub demo, not written docs.
Security Requirements
License keys validated server-side via Supabase, GitHub token stored in user env only (never sent to our servers), no test file contents stored remotely, rate limit license checks at 10 req/min per key.
Infrastructure Plan
Supabase for license table, Vercel serverless for license validation API, npm registry for package distribution, GitHub Actions for package publish on release tag, Sentry for error tracking in license API.
Performance Targets
Heal cycle completes under 30s per failing test. License validation API under 200ms. OpenCV matching under 5s on a 1440p screenshot. No DAU-based load concerns at launch.
Go-Live Checklist
- ☐Heal engine tested on 5 real broken Playwright repos.
- ☐Stripe license purchase flow tested end-to-end.
- ☐Sentry error tracking live on license API.
- ☐npm package published and installable.
- ☐Custom domain for docs site with SSL.
- ☐Privacy policy and terms published.
- ☐3 beta teams completed full heal workflow.
- ☐Rollback plan: unpublish npm version, revert Vercel deploy.
- ☐Launch GIF and post drafted for Playwright Discord and r/softwaretesting.
First Run Experience
On first run: the README includes a sample broken Playwright test fixture in test/fixtures/ that users can run immediately to see a heal event. No Monday account or seed data needed — the broken fixture is the demo. First heal opens a draft PR in the user's own GitHub repo within 3 minutes of running npm test.
How to build it, step by step
1. Define HealEvent data model in Supabase: repo_url, old_selector, new_selector, confidence, created_at. 2. Scaffold npm package with TypeScript and Playwright reporter interface. 3. Implement error interceptor in Playwright reporter that captures ElementNotFound with page screenshot. 4. Build OpenCV.js element fingerprinter that crops the last-known region and runs template matching across current page screenshot. 5. Implement test file patcher that uses regex to find and replace the failing selector string. 6. Add GitHub Octokit PR creator that branches, commits the patched file, and opens a draft PR. 7. Build license key validator that checks a Supabase table on plugin init. 8. Add Slack webhook notifier that posts heal summary to a configured channel. 9. Publish to npm as a public free package with Pro license gate on unlimited heals. 10. Verify: run a Playwright suite with a deliberately broken selector, confirm healed selector appears in a GitHub draft PR within 3 minutes.
Generated
May 10, 2026
Model
claude-sonnet-4-6
Disclaimer: Ideas on this site are AI-generated and may contain inaccuracies. Revenue estimates, market demand figures, and financial projections are illustrative assumptions only — not financial advice. Do your own research before making any business or investment decisions. Technology availability, pricing, and market conditions change rapidly; always verify details independently.