Q-Ace Builder

A powerful, visual drag-and-drop builder for Playwright automation tests. Build complex end-to-end tests without writing code, and export them as clean Python scripts.

✨ Features

Visual Canvas: Drag and drop blocks to build your test flow (Navigate, Click, Fill, Assertions, Loops, If-conditions).
Python Code Generation: Real-time generation of robust Python + Playwright + Pytest code.
SQLite Persistence: Automatically saves your projects to a local SQLite database, ensuring your work is never lost.
Reporting Dashboard: View test results, HTML reports, and record videos of your test runs.
Local Trace Viewer: Open Playwright traces directly from the dashboard to debug failed steps.
Helper Functions: Create reusable helper functions to modularize your test logic.
Virtual Environment Management: Built-in tools to set up and manage Python virtual environments and dependencies.

🛠 ️ Technology Stack

Frontend: Vue.js (Reactive State), Vanilla CSS (Modern, Responsive UI), Lucide Icons.
Backend: Flask (Python), SQLite3 (Persistence), Subprocess (Test Execution).
Test Engine: Playwright, Pytest.

🚀 Getting Started

Prerequisites

Python 3.8 or higher.
Node.js (optional, for some advanced features).

Installation

Clone the repository:

git clone https://github.com/your-repo/q-ace-builder.git
cd q-ace-builder

Install dependencies:
```
pip install -r requirements.txt
```

Running the Application

Start the Backend Server:
```
python server.py
```
The backend will run on http://localhost:5001.
Start the Frontend Client: Run the following command in the project root:
```
python -m http.server 9123
```
Then open http://localhost:9123 in your favorite modern browser.

📂 Project Structure

server.py: Flask backend handling file operations, database, and test execution.
index.html: Main application entry point.
app/js/:
- state.js: Centralized Vue-based reactive state and API communication.
- app.js: Main application logic and UI orchestration.
- generator.js: Python code generation engine.
- loader.js: Dynamic template loading.
app/css/: Modern UI styles.
app/templates/: HTML templates for builder blocks.
reports/: Storage for test run artifacts (reports, videos, traces).
database.db: SQLite database for project persistence.

🧪 Running Tests

Click the "Run" button in the builder to execute your test. You can configure:

Browser type (Chromium, Firefox, Webkit).
Headless mode.
Slow-mo execution.
Number of parallel workers.
Artifact collection (Artifacts, Videos, Traces).

Built with ❤️ by ATID College

Docs