Skip to content

57hemanth/flowtrace

Repository files navigation

Flowtrace

Open-source AI-powered E2E testing platform that lets you write tests in natural language and watch AI agents execute them autonomously.

What is Flowtrace?

Flowtrace is a next-generation end-to-end testing platform that combines the power of AI with browser automation. Instead of writing complex test scripts, you describe what you want to test in plain English, and Flowtrace's AI agent figures out how to execute it.

Key Features

  • Natural Language Tests - Write test steps in plain English, no code required
  • AI-Powered Execution - LangGraph-based agent autonomously plans and executes tests
  • Self-Healing Tests - Agent adapts to UI changes and recovers from failures
  • Multi-Provider Support - Works with OpenAI, Anthropic, Google Gemini, Ollama, and OpenRouter
  • Visual Reasoning Trace - See exactly how the AI agent thinks and makes decisions
  • Browser Automation - Built on Playwright for reliable cross-browser testing
  • Test Coverage Analysis - Track which parts of your app are tested
  • CLI & Web UI - Run tests from command line or manage them in the dashboard

How It Works

  1. Write Tests in Natural Language

    Go to https://myapp.com/login
    Enter "user@test.com" in the email field
    Enter "password123" in the password field
    Click the Sign In button
    Verify the dashboard shows a welcome message
    
  2. AI Agent Executes

    • The agent uses a LangGraph StateGraph with ReAct pattern
    • It autonomously plans, executes, and evaluates each step
    • 9 specialized tools: navigate, act, extract, observe, assert, screenshot, inspect_page, wait, write_test_case
  3. Self-Healing & Adaptation

    • Agent adapts to UI changes automatically
    • 3 healing layers for error recovery
    • Captures screenshots, console logs, and network activity
  4. View Results

    • See pass/fail status for each test
    • Inspect the agent's reasoning trace
    • Review captured artifacts (screenshots, logs)

Prerequisites

  • Node.js >= 20.0.0
  • pnpm 10.22.0
  • An API key for at least one AI provider (OpenAI, Anthropic, Google, etc.) or Ollama running locally

Getting Started

Installation

pnpm install

Configure AI Provider

Set your API key as an environment variable:

# OpenAI
export OPENAI_API_KEY=sk-...

# Or Anthropic
export ANTHROPIC_API_KEY=sk-ant-...

# Or Google Gemini
export GOOGLE_API_KEY=AI...

# Or Ollama (local)
export OLLAMA_BASE_URL=http://localhost:11434

# Or OpenRouter
export OPENROUTER_API_KEY=sk-or-...

Alternatively, configure providers in the web UI Settings page.

Development

Run the development server:

pnpm dev

The web application will be available at http://localhost:3000

Create Your First Test

  1. Navigate to the dashboard
  2. Click "Create your first test suite"
  3. Enter a name and base URL
  4. Write test steps in natural language
  5. Run the test and watch the AI agent work

CLI Usage

# Run a test suite
flowtrace run <suite-id>

# List all suites
flowtrace list

# View test results
flowtrace results <run-id>

Architecture

Flowtrace is built as a monorepo with the following packages:

Apps

  • web - Next.js 16 web application with React 19
    • Dashboard for managing test suites and viewing results
    • Real-time test execution monitoring
    • AI provider configuration
    • Test coverage visualization

Packages

  • agent - Browser automation layer

    • Playwright-based browser control
    • Screenshot and artifact capture
    • Console log and network monitoring
  • ai - AI integration layer

    • Multi-provider support (OpenAI, Anthropic, Google, Ollama, OpenRouter)
    • Natural language to test step compilation
    • AI-powered assertion evaluation
  • core - Test execution engine

    • LangGraph StateGraph agent implementation
    • ReAct pattern for autonomous reasoning
    • Tool orchestration and execution
    • Memory management and state handling
  • cli - Command-line interface

    • Test suite execution
    • Result viewing and reporting
    • CI/CD integration
  • db - Database layer

    • SQLite with Drizzle ORM
    • Test suite and run persistence
    • Log and artifact storage
  • shared - Shared utilities and types

    • Common TypeScript types
    • Utility functions

Technology Stack

  • Frontend: Next.js 16, React 19, TailwindCSS, shadcn/ui
  • Backend: Node.js, TypeScript
  • AI: LangChain, LangGraph, multiple LLM providers
  • Browser Automation: Playwright
  • Database: SQLite, Drizzle ORM
  • Build System: Turborepo, tsup
  • Package Manager: pnpm

Development Commands

  • pnpm dev - Start development server for all packages
  • pnpm build - Build all packages and applications
  • pnpm lint - Lint all packages
  • pnpm typecheck - Run TypeScript type checking
  • pnpm clean - Clean build artifacts and node_modules

Project Structure

flowtrace/
├── apps/
│   └── web/                    # Next.js web application
│       ├── src/
│       │   ├── app/           # App router pages
│       │   │   ├── api/       # API routes
│       │   │   ├── suites/    # Test suite management
│       │   │   ├── runs/      # Test run results
│       │   │   ├── coverage/  # Coverage analysis
│       │   │   └── settings/  # AI provider config
│       │   ├── components/    # React components
│       │   └── lib/          # Utilities
│       └── public/           # Static assets
│
├── packages/
│   ├── agent/               # Browser automation
│   │   └── src/
│   │       ├── browser-agent.ts
│   │       └── capture.ts
│   │
│   ├── ai/                  # AI integration
│   │   └── src/
│   │       ├── providers/
│   │       ├── compiler.ts
│   │       └── assertions.ts
│   │
│   ├── core/                # Test execution engine
│   │   └── src/
│   │       ├── agent.ts
│   │       ├── graph.ts
│   │       ├── tools.ts
│   │       ├── state.ts
│   │       └── logger.ts
│   │
│   ├── cli/                 # Command-line interface
│   ├── db/                  # Database layer
│   └── shared/              # Shared utilities
│
└── turbo.json              # Turborepo configuration

Use Cases

  • Regression Testing - Ensure new changes don't break existing functionality
  • User Flow Testing - Validate critical user journeys (login, checkout, etc.)
  • Cross-Browser Testing - Test across different browsers automatically
  • Smoke Testing - Quick validation after deployments
  • Exploratory Testing - Let AI discover edge cases and issues
  • Accessibility Testing - Verify UI elements are accessible
  • Visual Regression - Compare screenshots across test runs

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages