Fagun-AI-Powered-Playwright-Test-Generator-with-MCP-Server

fagun18/Fagun-AI-Powered-Playwright-Test-Generator-with-MCP-Server

3.2

If you are the rightful owner of Fagun-AI-Powered-Playwright-Test-Generator-with-MCP-Server and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.

Fagun Automation Framework is an AI-powered automated testing framework that leverages Playwright and Gemini AI to streamline website testing.

Tools
1
Resources
0
Prompts
0

🤖 Fagun Browser Automation Testing Agent

Author: Mejbaur Bahar Fagun
Role: Software Engineer in Test
LinkedIn: https://www.linkedin.com/in/mejbaur/

What is this tool?

Fagun Browser Automation Testing Agent is a powerful, intelligent browser automation tool that performs comprehensive website testing. Think of it as having a smart assistant that can control your web browser and test websites automatically - just like a human would, but faster and more accurately!

🎯 Perfect for:

  • Website Testing: Automatically test websites for bugs and issues
  • Security Testing: Comprehensive security vulnerability scanning (SQL injection, XSS, CSRF, Path Traversal)
  • Broken URL Detection: Automatically check all links for broken or redirecting URLs
  • Grammar & Content Checking: Detect grammatical errors and content issues
  • Intelligent Form Testing: AI-powered form testing with valid, invalid, and edge case data
  • Quality Assurance: Ensure your websites work perfectly before going live
  • Automated Tasks: Perform repetitive web tasks without manual work
  • Research & Data Collection: Gather information from websites automatically

🎬 Demo

See the Fagun Browser Automation Testing Agent in action:

Watch as the AI agent automatically navigates websites, tests functionality, finds bugs, and generates comprehensive reports.

🤖 Meet Your AI Agents

This tool comes with 2 powerful AI agents that work together to make your testing tasks easier:

🚀 Advanced Testing Capabilities

The Fagun Browser Automation Testing Agent includes cutting-edge AI-powered testing features:

🔒 Security Testing

  • SQL Injection Testing: Automatically tests all input fields for SQL injection vulnerabilities
  • XSS (Cross-Site Scripting) Testing: Detects XSS vulnerabilities in forms and inputs
  • CSRF (Cross-Site Request Forgery) Testing: Checks for CSRF protection tokens
  • Path Traversal Testing: Tests for directory traversal vulnerabilities
  • Comprehensive Security Payloads: Uses industry-standard security testing payloads

🔗 Broken URL Detection

  • Automatic Link Checking: Scans all links on the page for broken URLs
  • Status Code Analysis: Reports 404, 500, and other error status codes
  • Redirect Detection: Identifies and reports URL redirects
  • External Link Validation: Tests external links for accessibility

📝 Grammar & Content Checking

  • Common Grammar Errors: Detects common grammatical mistakes
  • Spelling Errors: Identifies misspelled words
  • Punctuation Issues: Checks for proper punctuation usage
  • Content Quality: Analyzes text content for readability issues

🤖 Intelligent Form Testing

  • AI Field Detection: Automatically determines field types (email, password, phone, etc.)
  • Comprehensive Data Testing: Tests with valid, invalid, and edge case data
  • Validation Testing: Checks form validation logic
  • Error Handling: Tests error messages and validation feedback

🧠 AI Thinking Capacity

  • Adaptive Testing: AI analyzes the page and determines what to test next
  • Smart Test Selection: Automatically chooses appropriate tests based on page content
  • Context-Aware Testing: Understands page structure and adapts testing strategy
  • Intelligent Recommendations: Provides actionable recommendations based on findings

🔍 Error Detection & Monitoring

  • Console Error Detection: Monitors and captures all console errors and warnings
  • JavaScript Error Catching: Detects JavaScript exceptions and runtime errors
  • Network Error Monitoring: Tracks failed requests, timeouts, and HTTP errors
  • DOM Error Detection: Monitors DOM-related issues and resource loading failures
  • Performance Issue Detection: Identifies slow operations and performance bottlenecks
  • Real-time Error Tracking: Continuous monitoring during test execution
  • Comprehensive Error Reporting: Detailed error information with context and recommendations

🤖 Enhanced AI Testing Engine

  • Aggressive Bug Finding: AI agents actively search for errors, bugs, and issues
  • Comprehensive Test Scenarios: Tests navigation, forms, UI, performance, and security
  • Advanced Bug Detection: Uses pattern recognition to identify various bug types
  • Performance Monitoring: Tracks load times, memory usage, and resource optimization
  • Security Vulnerability Testing: Tests for SQL injection, XSS, CSRF, and other vulnerabilities
  • Responsive Design Testing: Tests across multiple viewport sizes and devices
  • Form Validation Testing: Tests with empty, invalid, and malicious data
  • Accessibility Testing: Checks for accessibility compliance and usability issues
  • Detailed Bug Reports: Provides step-by-step reproduction and fix recommendations

📊 PDF Report Generation

PDF report generation is currently disabled.

🎭 Playwright Agents

This project supports Playwright Agents (planner, generator, healer) to automate test planning, generation, and healing.

Getting Started

  1. Ensure Node.js is installed.
  2. From the repository root, run:
npx playwright init-agents --loop=vscode

This will add agent definitions under .github/, a specs/ directory for human-readable plans, and seed/generator artifacts.

Workflow

  • planner: explores the app and produces a Markdown plan in specs/.
  • generator: converts Markdown plans into Playwright tests under tests/.
  • healer: runs tests and proposes automated fixes for failures.

Artifacts expected:

repo/
  .github/                    # agent definitions
  specs/                      # human-readable test plans
    basic-operations.md
  tests/                      # generated Playwright tests
    seed.spec.ts              # seed test for environment
  playwright.config.ts

Regenerate agents after Playwright upgrades:

npx playwright init-agents --loop=vscode

Other loops:

npx playwright init-agents --loop=claude
npx playwright init-agents --loop=opencode

🎯 Report Features:

  • Executive Summary - High-level overview of test results
  • Test Results Overview - Detailed statistics and metrics
  • Detailed Test Results - Individual test case analysis
  • Screenshots Section - Visual evidence of test execution
  • Bug Analysis - Identified issues and recommendations
  • Performance Metrics - Response times and performance data
  • Technical Details - Environment and configuration info

📋 How to Generate Reports:

🤖 Automatic Generation:
  1. Run your tests in the "🤖 Run Agent" tab
  2. PDF reports are generated automatically after testing completion
  3. Download the report from the "Task Outputs" section
  4. No manual configuration needed - it just works!

🎨 Report Sections:

  • Professional Layout - Clean, organized presentation
  • Color-coded Status - Easy to read success/failure indicators
  • Screenshot Integration - Visual evidence included
  • Bug Tracking - Detailed issue analysis
  • Recommendations - Actionable next steps

1. 🌐 Browser Use Agent - Your Web Testing Assistant

What it does:

  • Navigates websites like a human user would
  • Clicks buttons and links automatically
  • Fills out forms and submits them
  • Tests user interactions (login, shopping, navigation)
  • Takes screenshots to show you what it's doing
  • Handles errors and tries different approaches when things go wrong

Perfect for:

  • Testing e-commerce websites (shopping, checkout, payments)
  • Testing login systems and user accounts
  • Testing contact forms and user registration
  • Testing website navigation and user flows
  • Testing mobile responsiveness

2. 🔍 Deep Research Agent - Your Information Gathering Expert

What it does:

  • Plans comprehensive research by breaking tasks into organized steps
  • Searches multiple websites simultaneously for information
  • Collects and analyzes data from various sources
  • Creates detailed reports with all findings
  • Saves progress so you can resume work later
  • Synthesizes information into clear, actionable insights

Perfect for:

  • Competitive analysis and market research
  • Testing information accuracy across websites
  • Gathering product specifications and pricing
  • Researching company information and reviews
  • Creating comprehensive test reports

🚀 Quick Start Guide

For Non-Technical Users

Don't worry if you're not technical! This guide will walk you through everything step by step.

What You'll Need:
  1. A computer (Windows, Mac, or Linux)
  2. An internet connection
  3. About 15-20 minutes to set everything up
  4. An AI API key (we'll show you how to get one for free)
Step 1: Download the Tool
  1. Click the green "Code" button on this page
  2. Select "Download ZIP"
  3. Extract the ZIP file to your desktop
  4. Open the extracted folder
Step 2: Install Python (if you don't have it)
  1. Go to python.org
  2. Download Python 3.11 or newer
  3. Run the installer and check "Add Python to PATH"
  4. Click "Install Now"
Step 3: Get a Free AI API Key
  1. Go to OpenAI.com (free credits available)
  2. Create an account
  3. Go to "API Keys" in your account
  4. Click "Create new secret key"
  5. Copy the key (it looks like: sk-...)
Step 4: Run the Tool
  1. Open Command Prompt (Windows) or Terminal (Mac/Linux)
  2. Navigate to the tool folder: cd Desktop/web-ui-main
  3. Install requirements: pip install -r requirements.txt
  4. Install browsers: playwright install --with-deps
  5. Run the tool: python Fagun.py --ip 127.0.0.1 --port 8080
Step 5: Start Testing!
  1. Open your web browser
  2. Go to http://127.0.0.1:8080
  3. Enter your API key in the settings
  4. Start testing websites!

🎮 How to Use the Tool

Basic Testing Workflow:

  1. Open the tool in your browser
  2. Configure your AI settings (enter your API key)
  3. Set up browser preferences (headless mode, window size, etc.)
  4. Go to "Run Agent" tab
  5. Type your testing task (e.g., "Test the login form on example.com")
  6. Click "Submit Task" and watch the AI work!

Example Testing Tasks:

  • "Test the shopping cart on amazon.com"
  • "Check if the contact form on mywebsite.com works"
  • "Test the user registration process on example.com"
  • "Verify all links on my homepage work correctly"
  • "Test the mobile version of my website"

🔧 Advanced Features

Multiple AI Models Supported:

  • OpenAI GPT-4 - Most powerful and accurate
  • Google Gemini - Great for complex reasoning
  • Anthropic Claude - Excellent for detailed analysis
  • DeepSeek - Fast and cost-effective
  • Ollama - Run AI models locally on your computer

Browser Options:

  • Headless Mode: Run tests invisibly in the background
  • Visible Mode: Watch the AI work in real-time
  • Custom Browser: Use your own Chrome/Firefox with saved logins
  • Mobile Testing: Test how websites look on mobile devices

Testing Capabilities:

  • Form Testing: Automatically fill and submit forms
  • Link Testing: Check if all links work correctly
  • Image Testing: Verify images load properly
  • Performance Testing: Check page load times
  • Cross-Browser Testing: Test on different browsers
  • Responsive Testing: Test on different screen sizes

🏆 Why Choose This Tool?

✅ Easy to Use

  • No coding knowledge required
  • Simple point-and-click interface
  • Clear instructions and examples

✅ Powerful AI

  • 2 specialized AI agents for different tasks
  • Supports multiple AI models
  • Learns and adapts to your testing needs

✅ Comprehensive Testing

  • Tests everything a human would test
  • Catches issues humans might miss
  • Generates detailed reports

✅ Time Saving

  • Automates repetitive testing tasks
  • Runs tests 24/7 if needed
  • Generates reports automatically

✅ Cost Effective

  • Free to use (just need API key)
  • Reduces manual testing time
  • Prevents costly bugs from reaching users

📊 What Can You Test?

E-commerce Websites:

  • Shopping cart functionality
  • Payment processing
  • User registration and login
  • Product search and filtering
  • Checkout process

Business Websites:

  • Contact forms
  • Newsletter signups
  • Service request forms
  • Online booking systems
  • Document downloads

Web Applications:

  • User authentication
  • Data input and validation
  • File uploads and downloads
  • Navigation and menus
  • Error handling

Mobile Websites:

  • Responsive design
  • Touch interactions
  • Mobile-specific features
  • Performance on mobile devices

🎯 Perfect For:

  • Website Owners who want to ensure their sites work perfectly
  • Quality Assurance Teams who need to test websites thoroughly
  • Developers who want to automate their testing process
  • Business Owners who want to test their online services
  • Students learning about web testing and automation
  • Anyone who wants to test websites without manual work

🆘 Need Help?

Common Issues:

  • "API Key Error": Make sure you entered your API key correctly
  • "Browser Not Found": Run playwright install --with-deps again
  • "Port Already in Use": Try a different port like 8080 or 9000

Getting Support:

🔒 Security Notice

Important: Never commit API keys or secrets to the repository. Always use environment variables or .env files for sensitive information.

Setting up API Keys Securely:

  1. Create a .env file in the project root
  2. Add your API keys as environment variables: 
    OPENAI_API_KEY=your_openai_key_here
GOOGLE_API_KEY=your_google_key_here
AZURE_OPENAI_API_KEY=your_azure_key_here
  3. The .env file is automatically ignored by git to prevent accidental commits

Installation Guide

Option 1: Local Installation

Read the quickstart guide or follow the steps below to get started.

Step 1: Clone the Repository
git clone https://github.com/browser-use/web-ui.git
cd web-ui
Step 2: Set Up Python Environment

We recommend using uv for managing the Python environment.

Using uv (recommended):

uv venv --python 3.11

Activate the virtual environment:

  • Windows (Command Prompt):
.venv\Scripts\activate
  • Windows (PowerShell):
.\.venv\Scripts\Activate.ps1
  • macOS/Linux:
source .venv/bin/activate
Step 3: Install Dependencies

Install Python packages:

uv pip install -r requirements.txt

Install Browsers in playwright.

playwright install --with-deps

Or you can install specific browsers by running:

playwright install chromium --with-deps
Step 4: Configure Environment
  1. Create a copy of the example environment file:
  • Windows (Command Prompt):
copy .env.example .env
  • macOS/Linux/Windows (PowerShell):
cp .env.example .env
  1. Open .env in your preferred text editor and add your API keys and other settings
Step 5: Enjoy the web-ui
  1. Run the WebUI: 
    python Fagun.py --ip 127.0.0.1 --port 7788
  2. Access the WebUI: Open your web browser and navigate to http://127.0.0.1:7788.
  3. Using Your Own Browser(Optional):
    • Set BROWSER_PATH to the executable path of your browser and BROWSER_USER_DATA to the user data directory of your browser. Leave BROWSER_USER_DATA empty if you want to use local user data.
      • Windows 
         BROWSER_PATH="C:\Program Files\Google\Chrome\Application\chrome.exe"
 BROWSER_USER_DATA="C:\Users\YourUsername\AppData\Local\Google\Chrome\User Data"

        Note: Replace YourUsername with your actual Windows username for Windows systems.

      • Mac 
         BROWSER_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
 BROWSER_USER_DATA="/Users/YourUsername/Library/Application Support/Google/Chrome"
    • Close all Chrome windows
    • Open the WebUI in a non-Chrome browser, such as Firefox or Edge. This is important because the persistent browser context will use the Chrome data when running the agent.
    • Check the "Use Own Browser" option within the Browser Settings.

Option 2: Docker Installation

Prerequisites
Step 1: Clone the Repository
git clone https://github.com/browser-use/web-ui.git
cd web-ui
Step 2: Configure Environment
  1. Create a copy of the example environment file:
  • Windows (Command Prompt):
copy .env.example .env
  • macOS/Linux/Windows (PowerShell):
cp .env.example .env
  1. Open .env in your preferred text editor and add your API keys and other settings
Step 3: Docker Build and Run
docker compose up --build

For ARM64 systems (e.g., Apple Silicon Macs), please run follow command:

TARGETPLATFORM=linux/arm64 docker compose up --build
Step 4: Enjoy the web-ui and vnc
  • Web-UI: Open http://localhost:7788 in your browser
  • VNC Viewer (for watching browser interactions): Open http://localhost:6080/vnc.html
    • Default VNC password: "youvncpassword"
    • Can be changed by setting VNC_PASSWORD in your .env file

🚀 Ready to Start?

  1. Download the tool using the instructions above
  2. Get your free API key from OpenAI
  3. Follow the setup guide step by step
  4. Start testing your first website!

Remember: This tool is designed to be user-friendly. If you get stuck, don't worry - just follow the instructions carefully, and you'll be testing websites like a pro in no time!

Built with ❤️ by Mejbaur Bahar Fagun - Software Engineer in Test

Connect with the builder: LinkedIn