Skip to main content

UI Screenshots (Phase 4)

:::caution Phase 4, Not yet implemented This page describes the planned screenshot automation pipeline. No capture infrastructure is deployed yet. Implementation begins in Phase 4. :::

How automated UI screenshot capture will work: Playwright MCP capture pipeline, Azure Container Apps execution, and a screenshot manifest driving MDX page embedding.

Overview​

Phase 4 extends the documentation pipeline to capture live UI screenshots from the Adeptia Portal. Screenshots are captured automatically on each release, stored in Azure Blob Storage, and embedded in documentation pages via a manifest-driven MDX component. This closes the gap between code-derived content and the user's actual visual experience.

Playwright MCP capture pipeline​

The capture pipeline uses Playwright (TypeScript) driven via the Playwright MCP server to control a headless Chromium instance against a staging Portal deployment. Screenshots are defined in a manifest file (screenshot-manifest.json) that specifies the Portal route, the page state required before capture, the viewport dimensions, and the target filename. The pipeline is triggered by the same release event as the doc regeneration pipeline; both write to the same Azure Blob container and the Docusaurus build reads from it at build time.

Azure Container Apps execution​

The Playwright runner executes as a Container Apps job, a short-lived container that runs to completion and exits. This avoids persistent worker cost and integrates cleanly with the existing Azure infrastructure. The container image is built from a dedicated Dockerfile and stored in Azure Container Registry.

Screenshot manifest approach​

Each documentation page that includes screenshots declares them in frontmatter. A <Screenshot> MDX component reads the corresponding blob URL and renders the image with a caption. If a screenshot is missing (first deploy or capture failure), the component renders a placeholder badge rather than a broken image.

Forge routes identified​

18 Portal routes have been identified for Phase 4 screenshot capture, covering: Workflow Studio (create, edit, deploy states), Connection Manager (catalog browse, connection form), Mapping Editor (blank state, AI suggestion overlay, accepted mapping), Monitoring Dashboard (running, completed, error states), Business Rules editor (authoring, test run), and AI Copilot chat panel.

Coming in Phase 4​

  • screenshot-manifest.json defining all 18 capture targets
  • Playwright capture scripts per route
  • Azure Container Apps job definition and Dockerfile
  • <Screenshot> MDX component
  • Screenshot refresh CI workflow triggered on Portal releases