DrCode UI Testing Automation - Web Interface

A powerful web-based DrCode UI Testing Automation tool built with Playwright, LangChain, and AI. This application provides an intuitive web interface to run intelligent browser automation tests with real-time console output.

🚀 Features

• Web-based Interface: Beautiful, responsive web interface for easy test management
• Real-time Console: Live console output using Socket.IO for real-time communication
• Dependency Checking: Automatic verification of Node.js, npm, and Playwright installation
• AI-Powered Testing: Intelligent test execution using AI models
• Example Tests: Pre-built example tests for common scenarios
• Report Generation: Comprehensive test reports with analysis and summaries
• Auto-Upgrade System: Automatic checking and upgrading to the latest version
• Command Line Tools: CLI options for update checking and automatic upgrades

📋 Prerequisites

The application will automatically check for these dependencies:

• Node.js (v18.0.0 or higher)
• npm (v8.0.0 or higher)
• Playwright (installed globally or locally)

🛠️ Installation

Option 1: Install via npm (Recommended)

# Install globally
npm install -g drcode-ui-testing

# Or run directly without installation
npx drcode-ui-testing

Option 2: Manual Installation (Development)

1. Clone the repository:

   git clone https://github.com/airia-in/Drcode-UI-Testing-Automation.git
   cd ui-test-playwright-cli

2. Install dependencies:

   npm install

3. Check system dependencies:

   npm run check-deps

4. Install missing dependencies if needed:

   • Install Node.js: Visit nodejs.org to download and install
   • Update npm: npm install -g npm@latest
   • Install Playwright: npm install -g @playwright/test && npx playwright install

🚀 Running the Application

Quick Start (npm)

# Install globally
npm install -g drcode-ui-testing

# Run the application
drcode-ui-testing

# Or run directly without installation
npx drcode-ui-testing

Development Mode

npm run dev

Production Mode

npm run build
npm start

Command Line Options

The application supports several command line options:

drcode-ui-testing [options]

Options:
  --port, -p <number>    Port number to run the server on (default: 3000)
  --check-updates         Check for available updates
  --upgrade               Automatically upgrade to the latest version
  --help, -h             Show this help message

Examples:
  drcode-ui-testing                    # Run on default port 3000
  drcode-ui-testing --port 8080       # Run on port 8080
  drcode-ui-testing --check-updates   # Check for updates
  drcode-ui-testing --upgrade         # Upgrade to latest version

# Or run directly with npx
npx drcode-ui-testing --port 3001

The server will start on http://localhost:3000 (or the port specified in the PORT environment variable).

🌐 Web Interface

Once the server is running:

1. Open your browser and navigate to http://localhost:3000
2. Check the connection status (should show "Connected" with a green indicator)
3. Review dependency status - ensure all dependencies are satisfied
4. Enter your testing instructions in the text area
5. Click "Run Test" to start the automation
6. Monitor the console for real-time progress updates

Example Test Instructions

The interface includes several example tests:

Google Search Test

Go to https://google.com, search for "AI automation tools", click on the first result, take a screenshot, and verify the page loaded correctly.

E-commerce Test

Go to https://amazon.com, search for "iPhone 16", note the price of the first item, click on it, verify the price matches, and take screenshots at each step.

Form Interaction Test

Go to https://httpbin.org/forms/post, fill out the customer name field with "Test User", select the size as "Medium", submit the form, and verify successful submission.

🎮 Interface Features

Control Panel

• Connection Status: Real-time connection indicator
• Dependency Checker: System requirements validation
• Test Input: Natural language test instructions
• Example Tests: Quick-load common test scenarios

Console Output

• Real-time Logs: Live updates during test execution
• Color-coded Messages: Different colors for different log levels
• Auto-scroll: Automatic scrolling to latest messages
• Manual Controls: Clear console and scroll controls

Settings Page

• Storage Configuration: Customize where reports and videos are saved
• Video Recording: Configure video quality and auto-recording settings
• Browser Selection: Choose between Chromium, Firefox, or WebKit browsers
• Headless Mode: Run tests in headless mode for faster execution
• Retention Management: Set limits for reports and videos to keep
• Path Suggestions: Get suggested storage paths based on your system
• Real-time Validation: Instant validation of settings changes

Keyboard Shortcuts

• Ctrl/Cmd + Enter: Run test
• Ctrl/Cmd + L: Clear console
• Ctrl/Cmd + S: Save settings (on settings page)
• Ctrl/Cmd + R: Reset settings (on settings page)
• Color-coded Messages: Different colors for different log levels
• Auto-scroll: Automatic scrolling to latest messages
• Manual Controls: Clear console and scroll controls

Keyboard Shortcuts

• Ctrl/Cmd + Enter: Run test
• Ctrl/Cmd + L: Clear console

🔧 Configuration

Environment Variables

Create a .env file in the root directory:

PORT=3000
OPENAI_API_KEY=your_openai_api_key
GOOGLE_API_KEY=your_google_api_key

Application Settings

Access the settings page at http://localhost:3000/settings.html to configure:

Storage Settings

• Reports Directory: Where test reports will be saved
• Videos Directory: Where execution videos will be stored
• Report Format: Choose between Markdown (.md), JSON (.json), or HTML (.html)

Video Settings

• Auto-save Videos: Enable/disable automatic video recording of test executions
• Video Quality: Choose from Low (faster), Medium (balanced), or High (better quality)
• Retention Limits: Set maximum number of reports and videos to keep

Browser Settings

• Browser Type: Select from Chromium (Chrome-based), Firefox, or WebKit (Safari-based)
• Headless Mode: Enable headless execution for faster, background test runs
• System Detection: Automatically detects which browsers are available on your system
• Real-time Updates: Browser selection is applied immediately to new test executions

Path Management

• Suggested Paths: The system provides OS-appropriate suggested paths
• Path Validation: Real-time validation ensures paths are writable and accessible
• Auto-creation: Directories are automatically created if they don't exist

Auto-Upgrade Settings

• Enable Auto-Upgrade: Automatically upgrade to new versions when available
• Check on Startup: Check for updates every time the application starts
• Manual Updates: Use command line options for manual update checks and upgrades

MCP Configuration

The application uses Model Context Protocol (MCP) for Playwright integration. Configuration is in src/configs/mcp.ts.

🔄 Auto-Upgrade System

The application includes an automatic upgrade system to keep you up-to-date with the latest features and bug fixes.

Automatic Updates

When enabled in settings, the application will:

1. Check for Updates: Automatically check GitHub releases for new versions on startup
2. Download Updates: Download the appropriate binary for your platform
3. Replace Binary: Safely replace the current executable with the new version
4. Restart Required: You'll need to restart the application to use the new version

Manual Updates

You can also manage updates manually:

Check for Updates

ui-test-playwright --check-updates

This will check if a newer version is available and display the current and latest versions.

Perform Upgrade

ui-test-playwright --upgrade

This will automatically download and install the latest version.

Web Interface Updates

The settings page includes options to:

• Enable/Disable Auto-Upgrade: Toggle automatic upgrades on or off
• Check on Startup: Enable/disable update checks when the application starts
• Manual Check: Check for updates directly from the web interface
• Perform Upgrade: Upgrade to the latest version from the web interface

Safety Features

• Backup Creation: Current binary is backed up before replacement
• Version Verification: Downloads are verified against published checksums
• Rollback Support: Backup files allow manual rollback if needed
• Platform Detection: Automatically downloads the correct binary for your OS and architecture

Update Channels

The application checks for updates from the official GitHub repository releases, ensuring you always get stable, tested versions.

📊 Test Reports

Test results are automatically saved to the reports/ directory:

• Analysis Reports: Detailed analysis of test execution
• Summary Reports: Comprehensive summaries with insights
• Timestamps: All reports include execution timestamps

🐛 Troubleshooting

Common Issues

1. Dependencies Missing

   • Run npm run check-deps to verify installation
   • Follow the installation instructions for missing dependencies

2. Browser Not Opening

   • Ensure Playwright is properly installed: npx playwright install
   • Check that the MCP server is configured correctly

3. Connection Issues

   • Verify the server is running on the correct port
   • Check for firewall or network restrictions

4. Test Execution Failures

   • Review the console output for detailed error messages
   • Ensure the target website is accessible
   • Verify your test instructions are clear and specific

Logs and Debugging

• Console Output: Real-time logs in the web interface
• Server Logs: Check the terminal where you started the server
• Report Files: Detailed reports saved in the reports/ directory

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

� Publishing to npm

To publish a new version to npm:

1. Update version in package.json:

   npm version patch  # or minor/major

2. Build and test:

   npm run build
   npm test  # if you have tests

3. Login to npm:

   npm login

4. Publish:

   npm run publish:npm

Or use the automated script:

./publish-npm.sh

The package will be available at: https://www.npmjs.com/package/drcode-ui-testing

�📄 License

This project is licensed under the ISC License.

🆘 Support

If you encounter any issues:

1. Check the troubleshooting section above
2. Review the console output for error details
3. Ensure all dependencies are properly installed
4. Open an issue on the GitHub repository

🎯 Advanced Usage

Custom Test Scenarios

You can create complex test scenarios using natural language:

Go to https://example.com,
fill out the login form with username "testuser" and password "testpass",
navigate to the dashboard,
click on the "Reports" section,
take a screenshot of the reports page,
validate that at least 5 reports are visible,
and generate a summary of the available reports.

Multiple Step Validations

Navigate to https://ecommerce-site.com,
search for "laptop",
sort results by price (low to high),
take a screenshot of the first page,
click on the cheapest laptop,
note the specifications,
add to cart,
verify the item was added correctly,
and take a final screenshot of the cart.

The AI will break down these complex instructions into individual steps and execute them systematically while providing detailed feedback and analysis.