Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/davidG97/qa-flow/llms.txt

Use this file to discover all available pages before exploring further.

QA Flow is an open-source, Apache-2.0 licensed platform that lets you design, execute, and manage Playwright browser automation tests entirely through a visual node-based canvas — no code required. Instead of writing test scripts by hand, you drag and connect nodes that represent actions, assertions, and navigation steps, and QA Flow translates that graph into fully executable Playwright automation behind the scenes.

Key Features

Visual Canvas Editor

Build tests by dragging and connecting nodes on an interactive canvas powered by XyFlow. Every action, assertion, and navigation step is a visual node — no code required.

Real-Time Screencast

Watch your browser execute each test step live. The built-in execution panel streams a screencast directly from the Playwright headless browser via CDP, with no extra setup.

Node Types & Hooks

Choose from triggers, lifecycle hooks (beforeAll, beforeEach, afterEach, afterAll), actions (navigate, click, type, scroll, hover, screenshot, wait, key press), and assertions (text, visible, URL, attribute) to cover any test scenario.

Device Emulation

Emulate iPhones, Pixels, iPads, and Galaxy devices from the Start node. Configure viewport, locale, timezone, geolocation, color scheme, network conditions, and user agent.

HTML Test Reports

Every run generates a Playwright-style HTML report complete with per-step results, screenshots, and a full execution history you can review at any time.

Playwright Code Generation

Export any flow as runnable Playwright TypeScript code, or record browser interactions directly to generate nodes automatically — bridging the gap between visual and code-based testing.

Parallel Execution

Run tests serially or in parallel using configurable worker counts, retries, timeouts, and max-failure thresholds — all set through the project configuration modal.

JWT Auth & Roles

Secure your instance with JWT-based authentication and role-based access control (Admin / User), making QA Flow safe to self-host for teams of any size.

Architecture Overview

QA Flow is a full-stack web application with four cooperating layers that work together from the moment you drag a node to the moment a test result appears on screen.
LayerTechnologyRole
FrontendReact 19 + XyFlow + React RouterVisual canvas editor, execution panel, project management UI
BackendNode.js + ExpressREST API, WebSocket server, test orchestration
DatabasePrisma ORM with SQLite (or Turso cloud)Stores projects, flows, runs, users, and locators
Execution EnginePlaywright (Chromium)Runs tests headlessly, streams CDP frames for the screencast
Real-time updates — including live node status changes (🟢 success, 🔴 failure, 🟡 in-progress) and screencast frames — are pushed from the server to the browser over a persistent WebSocket connection. The execution engine runs in the same Node.js process as the Express server, keeping deployment simple: a single container or process serves everything.

Node Types at a Glance

CategoryNodes
TriggerStart (URL, browser, viewport, device emulation)
HooksbeforeAll, beforeEach, afterEach, afterAll
ActionsNavigate, Click, Type, Wait, Screenshot, Scroll, Hover, Key Press
AssertionsVerify text, visible, URL, attribute

Who Is QA Flow For?

QA Flow is built for three audiences:
  • QA engineers who want to create and maintain browser automation tests without dealing with code scaffolding, selector management, or Playwright configuration.
  • Developers who need to produce automated test coverage quickly — especially during exploratory or regression testing phases — and want to see test execution in real time.
  • Teams that want a self-hosted, open-source testing platform they can deploy behind their own firewall, integrate into CI/CD, and extend with their own contributions.

Quickstart

Launch QA Flow with a single npx command and run your first test in under two minutes.

Installation

Explore all install methods: npx, Docker, and local development setup.

Editor Guide

Learn how to use the canvas, configure nodes, and manage selectors with the visual picker.

Running Tests

Understand execution modes, parallel workers, retries, and how to read HTML reports.

Build docs developers (and LLMs) love