"Stop Writing Test Framework Manually — I Built a Chrome Extension That Does It For You (Playwright, Cypress, WebdriverIO, Selenium
If you've spent time in test automation, you know the selector problem.
You open DevTools, inspect an element, and then manually craft something like:
driver.findElement(By.xpath("//div[@class='container']//button[contains(text(),'Submit')]"))
Two sprints later, the UI changes. The class is gone. The test breaks. You fix it. The cycle repeats indefinitely.
After 20+ years in QA automation — working across Toyota Connected, Caesars Digital, and enterprise Fortune 500 environments — I decided to build the tool I always wished existed: Papio Selector.
What is Papio Selector?
Papio Selector is a Chrome DevTools extension that automatically generates production-ready test selectors for five major automation frameworks — simultaneously — from a single click on any element.
The Core Problem: Framework Fragmentation
Modern QA teams rarely use just one framework. You might have:
• Legacy Selenium tests from 2018
• New Playwright tests your team added last year
• Cypress for component testing
• WebdriverIO for mobile/cross-browser
Each framework has its own selector API. Maintaining consistency across all of them manually is error-prone and time-consuming. Papio generates idiomatic code for all of them from a single inspection.
Shadow DOM — The Elephant in the Room
Shadow DOM support is where most tools fail. Web components, Lit elements, Angular components using ViewEncapsulation — these all create shadow roots that standard CSS selectors can't pierce. Papio detects shadow roots automatically and generates the correct piercing selectors for each framework.
Selector Priority Algorithm
Not all selectors are equal. Papio uses a priority system that mirrors accessibility and maintainability best practices:
- data-testid / data-cy attributes (most stable)
- ARIA roles and labels
- ID attributes
- Unique CSS class combinations
- Structural/positional selectors (last resort) This means Papio-generated selectors are inherently more resilient to UI changes than manually crafted ones.
Install & Try It
Available free on the Chrome Web Store. Search 'Papio Selector' or visit https://chromewebstore.google.com/detail/papio-test-framework-gene/blmnefcnhccikfcghoaphpnmfpffbknd
I'd love feedback from the Dev.to community — especially on edge cases, accessibility patterns, and framework-specific conventions I may have missed.
Srikanth | Senior Automation Architect | IEEE Senior Member | Creator of Papio Selector
SOCIAL SHARE CARD GENERATOR