I built a QA companion that lives in your browser — click any element, get ready-to-paste automation code

#webdev #testing #productivity #automation

I've been doing QA automation for 7 years. And for 7 years, part of my day looked exactly like this:

Open DevTools. Inspect an element. Figure out which attribute is stable enough to use as a selector. Wrap it in the right syntax for whatever framework the project uses. Paste it into the test file. Repeat 50 times.

It's not hard work. But it's slow, repetitive, and completely manual. And every time a developer refactors the DOM, half your selectors break and you start over.

I got tired of it. So I built something.

What I built

QA Power-Click is a free Chrome extension that lives in your browser as a sidebar. You hover over any element on any website, click it, pick an action, and get a ready-to-paste code snippet.

No DevTools. No copy-pasting. No manual selector writing.

It supports 5 frameworks out of the box:

Playwright (JavaScript/TypeScript)
Cypress
Selenium Python
Selenium Java
Robot Framework

You pick your framework from a dropdown and the code updates instantly.

The hard part: stable selectors

Anyone can grab a CSS selector. The hard part is grabbing one that won't break next sprint.

QA Power-Click uses a scoring engine that ranks every possible selector for a given element and picks the most stable one automatically. The priority order looks like this:

data-testid / data-qa / data-cy — 100 points, stops here if found
aria-label / aria-labelledby — 80 to 85 points
name attribute — 80 points
stable ID — 88 points
text content — 75 points
CSS class — 10 points, absolute last resort

It also detects and avoids over 100 dynamic ID patterns. Things like ember123, React's :r1a: UIDs, UUIDs, Angular's ng-content-456, and Webpack hashed classes. If an ID looks generated, the engine skips it and finds something better. If nothing is unique on its own, it stacks multiple attributes together:

input[type="email"][name="user_email"]

The framework switching problem

Writing a Playwright snippet is different from writing a Cypress one. Different syntax, different imports, different assertion methods. Switching frameworks on a project used to mean rewriting everything.

QA Power-Click generates the full snippet, not just the selector. The correct syntax, 42+ actions and assertions, and proper imports — all per framework.

For example, clicking a button generates:

Playwright:

await page.locator('[data-testid="submit-btn"]').click();

Cypress:

cy.get('[data-testid="submit-btn"]').click();

Selenium Python:

driver.find_element(By.CSS_SELECTOR, '[data-testid="submit-btn"]').click()

Same element. One click. Correct code for every framework.

The form filler

Manual QA means filling out the same test forms over and over. Name, email, phone, address — every regression cycle.

I added a Magic Form Filler that detects 16 field types by analyzing the field's name, placeholder, label, and aria attributes. It fills them with realistic fake data in one click.

The tricky part was React and Vue apps. They track input values internally and ignore direct DOM value injection. The fix was using nativeInputValueSetter to bypass the framework's value tracking:

const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
window.HTMLInputElement.prototype, 'value'
).set;

nativeInputValueSetter.call(input, value);
input.dispatchEvent(new Event('input', { bubbles: true }));

This triggers the framework's state update correctly. Works on React, Vue, and Angular.

Other things it handles

Shadow DOM: piercing selectors using Playwright's locator chaining syntax for web components.

Iframes: cross-origin iframe detection with fallback methods, including frame-switching code baked into the generated snippet.

Live Match Navigator: if your selector matches multiple elements on the page, you can navigate between them with arrow keys, same as Chrome DevTools.

Canvas rendering: the selector display uses a canvas element so DevTools search doesn't find and highlight your own selectors while you're testing them. Small detail but it matters.

What's next

A user already asked for Playwright .NET support so that's coming next. After that I want to build a Page Object Generator — select multiple elements across a page, export a complete page object file ready to drop into your project.