QATechTools AI Assistant started from a simple QA pain point: generating UI automation still takes too much repetitive effort. Testers open a page, inspect elements one by one, decide whether to use id, CSS, or XPath, write framework-specific code, debug it, and then repeat the same routine again for the next screen. Even for experienced automation engineers, that can easily consume two to three hours per page.
We built QATechTools AI Assistant to cut that cycle down to seconds. It is a Chrome extension that lets a QA engineer click elements on a live webpage, send the captured structure to an AI model, and instantly generate Selenium, Playwright, Cucumber, or Selenium JavaScript output that is ready to adapt into a real framework. This post explains what we built, why we built it, how the architecture works, and where the product is useful in day-to-day testing.
Why we built QATechTools AI Assistant
Most automation tools reduce execution effort, but they do not reduce authoring effort enough. The manual setup work still sits with the QA engineer:
- Find the right element on the page.
- Decide which locator is stable enough.
- Write framework-specific code from scratch.
- Fix syntax and selector issues.
- Repeat the same work for each page and flow.
That process is slow, and it also creates inconsistency. Two engineers may produce very different automation styles for the same screen. We wanted a faster and more repeatable workflow where the tester stays in control, but the repetitive draft work is handled by AI.
What QATechTools AI Assistant does
At its core, QATechTools AI Assistant is a browser-side productivity tool for QA teams. Instead of asking the user to manually describe the page, it observes the elements the user clicks and uses that real page structure as the basis for generation.
- AI code generation: click elements on a webpage and generate Selenium, Playwright, Cucumber, or Selenium JavaScript output.
- Accessibility auditing: analyze a page for WCAG issues and export a CSV report with severity labels.
- Token cost tracking: show real-time usage and estimated AI cost by model during a session.
This combination matters because QA engineers do more than write functional scripts. They also review accessibility, estimate tooling cost, and decide whether a generated result is good enough to join a real suite.
How the workflow feels in practice
The intended user flow is deliberately short:
- Open any live website in Chrome.
- Open the QATechTools side panel.
- Click inspect mode and select key elements such as username, password, and login button.
- Choose the output style you want.
- Click generate and review the returned code.
- Download the result as a
.javaor.featurefile and adapt it to your framework.
For a demo on a site like SauceDemo, that means a tester can highlight three fields, generate a login flow in a few seconds, and then move straight into review and refinement. That is a better use of QA time than writing every locator and test step from a blank file.
QATechTools AI Assistant architecture
We designed the extension around a simple browser-extension architecture so the interaction stays close to the page the user is testing.
content.jsruns inside the webpage and captures the clicked element HTML.bg.jsstores selections and coordinates background extension behavior.panel.htmlprovides the visible UI inside the side panel.chat.jsdrives the main interaction flow, including prompts, model calls, rendering, and downloads.prompts.jsdefines the instructions sent to the AI provider for each output type.server.jsacts as a bridge server for Claude requests so secrets stay outside the extension..envstores provider keys and related configuration securely.
The important design decision here is that the user does not type a generic request like “write me a login test.” The extension captures real page context first, then builds a structured prompt around that context. That makes the output far more relevant than a general-purpose AI request without DOM information.
User clicks elements on the webpage
-> content.js captures outerHTML
-> selection stored in chrome.storage.local
-> chat.js builds a provider-specific prompt
-> AI provider returns generated code + token usage
-> panel displays syntax-highlighted output
-> user downloads .java or .feature resultWhy we support multiple AI providers
Different QA scenarios benefit from different providers. Some users want the fastest possible demo response. Others care more about output quality for more complex code. We built the extension to support Groq, OpenAI, and Claude so teams can choose the right tradeoff.
- Groq: useful when speed matters and you want a quick live demo experience.
- OpenAI: useful when teams want strong general output quality through a direct API path.
- Claude: useful for more involved code generation through a bridge-server pattern.
We also included token counting because AI features are easier to adopt when cost is visible. A real-time token widget gives testers and managers immediate feedback about how much a session is consuming instead of hiding that information in backend logs.
Accessibility auditing was a deliberate second feature
We did not want QATechTools AI Assistant to stop at code generation. Modern QA work includes accessibility review, and teams often run that separately from automation authoring. The accessibility auditor lets the same extension scan a page for WCAG issues, classify findings by severity, and export the results as CSV.
That matters for two reasons. First, it gives manual and automation testers a broader utility from one tool. Second, it keeps accessibility visible early in the workflow instead of treating it as a separate late-stage audit.
What QA engineers should still review manually
We built QATechTools AI Assistant to accelerate draft creation, not to remove engineering judgment. Generated code still needs review before it becomes part of a production suite.
- Confirm the locator strategy matches your application stability.
- Replace any weak assertions with business-meaningful checks.
- Adapt naming, framework structure, and page object patterns to your project.
- Check that sensitive page data is handled according to your team policies.
- Run the output in CI and evaluate whether the flow is actually stable.
This review step is where QA experience still matters most. AI helps with drafting, but maintainability, coverage quality, and product risk decisions still belong to the team.
Best use cases for QATechTools AI Assistant
- Bootstrapping page objects or basic functional flows for new screens.
- Speeding up proof-of-concept automation during demos or discovery work.
- Generating first-draft Cucumber scenarios for BDD teams.
- Helping manual testers move into automation with less blank-page friction.
- Combining early accessibility review with functional test design in one workflow.
What we learned while building it
The strongest lesson was that raw AI access is not enough. The product becomes useful only when the surrounding workflow is right: clear prompt construction, DOM context capture, secure handling of provider keys, visible cost tracking, and a simple UI that testers can use during real browser exploration.
We also learned that users trust generation more when they can see the source interaction. Clicking elements on the live page is much easier to reason about than pasting a long prompt and hoping the model inferred the correct structure.
Final thoughts
QATechTools AI Assistant is our attempt to make AI practical for QA engineers, not just impressive in a demo. By combining live DOM capture, multi-provider code generation, accessibility auditing, and token cost visibility, we created a tool that reduces repetitive effort while keeping the tester in control.
If your team spends too much time drafting locators, writing boilerplate test code, or switching between separate tooling for automation and accessibility, QATechTools AI Assistant points to a more efficient workflow. The key is to treat generated output as a high-quality starting point and pair it with strong QA review discipline.