Integrating Schema & UI Testing
As projects grow, keeping track of every detail becomes increasingly challenging. Recently, I discovered a broken Minimal-Model weeks after deployment. Fortunately, my site has minimal traffic, so no one noticed—but such issues could become critical if the project gains traction. This one took a full day to track down and fix, which made it clear that pre-deployment testing was essential.
I already had a pre-processing pipeline step that validated lowercase adherence for certain file types. Building on this, I added a JSON schema validation job using Zod. Zod runs in Node.js, allowing me to define precise schema rules for files like content_<>.json and category_<>.json. If any file violates the schema, the test fails and the pipeline stops—exactly the safeguard I needed.
Next, I implemented interactive UI testing with Playwright. Playwright simulates browser interactions, allowing detailed control over clicks, waits, toggles, and navigation. I created a suite of CommonJS tests to interact with every element in the application at least once. This even includes simulating navigation in the three.js scene and validating the OrbitControls.
The full test suite now runs for about 30 minutes. While time-consuming, it reliably detects breaking changes before they reach production.
The pipeline is very complex—it provisions testing environments in Azure, interacts with Table Storage and APIM endpoints, and cleans up resources regardless of success or failure.
I also enabled branch protection on main: Direct commits are no longer possible; changes must come through a Pull Request from a feature branch that passes all tests. Only then can I merge into production.
With this process in place, deployments run through a slightly modified pipeline—confidently releasing without breaking existing functionality.
