🚀 PlayVision Reporter

Intelligent, AI-Powered Playwright Test Reporter

PlayVision is a modern, high-performance Playwright reporter that goes beyond simple logs. It leverages local and cloud LLMs to analyze test failures, providing root cause analysis and actionable fix suggestions directly in a premium, React-based HTML report.

✨ Key Features

• 🤖 AI Forensics - Automatic error categorization and root cause analysis using Ollama (Local) or OpenAI.
• 📄 Source Traceability - Test cards show the exact file and line number where the test is defined.
• 🔗 VS Code Integration - Open any test file at the exact line of failure directly from the report via vscode:// deep links.
• 📊 Executive Summary - Export professional PDF reports and detailed Excel failure data.
• ⚡ Native Performance - Optimized React SPA shell with data injection for instant report loading.
• 📸 Rich Evidence - Seamlessly embeds screenshots (base64 for PDF support), videos, and trace files.
• 🔍 Advanced Filtering - Search by test title, suite, spec file name, or directory path.

🛠️ Quick Start

1. Installation

# Install dependencies
npm install

2. Configuration (playwright.config.ts)

Add PlayVision to your Playwright configuration:

import { PlayVisionConfig } from 'playvision-reporter';

const config: PlaywrightTestConfig = {
  reporter: [
    ['playvision-reporter', {
      outputFolder: 'playvision-report',
      aiAnalysis: true,
      aiMode: 'premium', // 'premium' (Local LLM + Cloud Fallback), 'smart', or 'basic'
      exportPdf: true,
      exportExcel: true
    } as PlayVisionConfig]
  ],
};

3. Build & Run

# Build the reporter
npm run build

# Run tests in your test project
cd test-project
npm test

🏗️ Architecture

PlayVision is built with separation of concerns at its core:

• Collector: Manages test execution events and asset gathering.
• AI Engine: Orchestrates failure analysis across multiple providers (Ollama, OpenAI, Heuristics).
• Report UI: A modern React-based dashboard injected with test data for maximum speed.
• Export Manager: Handles post-processing for PDF and Excel generation.

📖 Deep Dives

For more detailed information, check the documentation in the document/ folder:

• Architecture & Design Principles
• Configuration Guide
• OpenAI Integration
• Extensibility Guide

🔒 Security & Environment

Create a .env file in the root to configure your AI providers:

OPENAI_API_KEY=your-api-key-here
OPENAI_API_URL=https://api.openai.com/v1/chat/completions
OPENAI_MODEL=gpt-4o

Note: The .env file is gitignored to protect your credentials.

🤝 Contributing (Releasing)

This project uses Semantic Release for automated NPM publishing and version management.

1. Create a Feature Branch: Branch off master (e.g., feat/new-ui, fix/parsing-error).
2. Raise a PR: Open a Pull Request to master. A GitHub Action will automatically run to build and validate your code.
3. Merge with Conventional Commits: When merging into master, strictly use the Conventional Commits format for your commit message. This determines the next version number.
   • feat: added summary feature -> Minor Release (1.1.0)
   • fix: resolved crashing bug -> Patch Release (1.0.1)
   • feat!: completely redesigned API -> Major Release (2.0.0)

Once merged to master, a GitHub Action will automatically bump the version, generate release notes, and publish to NPM.

📝 License

MIT © Vignesh8205