It’s a new hobby project, but I thought it was worth writing about the journey of building it. The idea kicked in while dealing with the tedious effort of writing end-to-end browser tests for our QA pipelines. After spending countless hours mapping selectors and writing assertions, I decided to build Traceify.
Architecture Overview
Introduction
In the ever-evolving world of technology, the convergence of web automation, cloud computing, and large language models (LLMs) has given rise to groundbreaking innovations. One such innovation is Traceify, a cutting-edge test automation system that brings together the power of browser instrumentation and the vast capabilities of LLMs. Inspired by the need for faster release cycles, Traceify represents a significant leap forward in automated test generation and documentation. Let’s dive deeper into the features, scope, importance, and core concepts of this remarkable creation.
Core Concepts and Importance
Traceify was conceptualised and developed to eliminate the manual overhead associated with E2E testing. Traditionally, writing and documenting automated tests are treated as two separate tasks: engineers write code in Playwright, and product owners write user acceptance criteria in Gherkin BDD format. Traceify bridges this gap by unifying them into a single, automated workflow.
The Core Concept of Traceify lies in its ability to distribute tasks between browser-side recording and server-side AI orchestration. The lightweight frontend library tracks user events and generates stable element locators locally in the browser, while the Micronaut backend handles data persistence and orchestrates expensive LLM calls to translate actions into Gherkin scenarios. This distributed approach optimizes performance and reduces the latency of test generation. Furthermore, the plug-and-play script injection allows developers to quickly enable recording on any web page without altering the production codebase.
Features
Traceify encompasses a wide range of impressive features that set it apart in the realm of automated testing:
Silent Event Recording: Traceify runs unobtrusively in the background of your target web page. By monitoring user actions like clicks, inputs, scrolls, and navigations, it builds a complete chronological map of the user journey without impacting page load times.
Multi-Engine Selectors: For every interaction, the system calculates CSS, XPath, ARIA roles, React, and Vue selectors simultaneously. It selects the most stable candidate to minimize selector drift and prevent future test failures.
Token Optimization: Before sending the page context to the LLM, the backend pre-processes the HTML to strip out script tags, styles, and JSON noise. This results in a 30% to 60% reduction in token usage, keeping processing fast and cost-effective.
Impressive Features
Traceify’s capabilities are nothing short of impressive. Firstly, it offers multi-frame support, allowing it to seamlessly record interactions inside nested iframes and generate frame-aware selector chains. It also includes an auto-snapshot utility that captures the visual state of the page during key events, matching the actions to their visual context.
In terms of real-world application, Traceify excels at handling complex, reactive configurators like the Apple Watch buy page. By waiting for the DOM to settle post-render, it generates clean Playwright automation scripts for multi-step purchase flows in the time it takes to walk through them once.
One of the most notable features of Traceify is its dual-model capability. It leverages OpenAi as its primary engines for Gherkin (BDD) generation, and features a fallback client for Gemini . Furthermore, it boasts a built-in Model Context Protocol (MCP) server. This allows AI assistants like Claude to query recorded sessions directly and retrieve ready-to-run Playwright specs programmatically.
Scope
Scope for Traceify is promising, as advancements in AI-driven test maintenance and self-healing selectors continue to progress. With the growing adoption of AI agents in development environments, Traceify can serve as the foundational execution layer, allowing agents to write and self-correct E2E tests autonomously. Additionally, future releases could expand support to mobile web view environments and integrate directly into continuous integration (CI) workflows for instant regression testing.
The year 2026 holds significance in the development of Traceify as it marks the emergence of standardized protocols like MCP. By building on these modern conventions, Traceify is positioned to scale beyond local environments into enterprise-wide test automation hubs. Therefore, the architectural decisions made today lay a solid foundation for the future of autonomous quality assurance.
Conclusion
Traceify exemplifies the remarkable potential that arises from the integration of browser instrumentation, microservice architecture, and AI. Its distributed approach, multi-engine selectors, and LLM orchestration make it a game-changer in the field of software testing. With promising future scope and a foundation built on modern web standards, Traceify stands at the forefront of automated QA, paving the way for more intelligent, self-documenting test pipelines.