TestWeave

Visual test builder for Playwright, Selenium, Cypress & Puppeteer

Build end-to-end tests visually with drag-and-drop blocks. Export production-ready code for your favorite testing framework.

Features • Getting Started • How to Use • Contributing

---

A visual test builder for generating end-to-end test code across multiple testing frameworks. Build tests visually with drag-and-drop blocks and export production-ready code.

Features

• Visual Block Editor - Drag-and-drop interface powered by Blockly
• Multi-Framework Support - Generate tests for:
  • Playwright (Emerald)
  • Selenium (Orange)
  • Cypress (Cyan)
  • Puppeteer (Purple)
• Live Code Preview - See generated code in real-time with syntax highlighting
• Example Templates - Pre-built examples to help you learn common test patterns
• One-Click Export - Download your generated test file instantly

Getting Started

Prerequisites

• Node.js 20+
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/DizzyMii/TestWeave.git
cd TestWeave

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:5173 in your browser.

How to Use

1. Select Your Framework

Click on one of the four mode buttons in the header:

• playwright - For Playwright tests
• selenium - For Selenium WebDriver tests
• cypress - For Cypress tests
• puppeteer - For Puppeteer tests

The UI accent colors will change to match your selected framework.

2. Build Your Test

Drag blocks from the toolbox on the left and connect them to build your test flow:

Block	Description
browser init	Initialize the test with a custom test name
navigate to url	Navigate to a specific URL
click element	Click an element using a CSS selector
type text	Type text into an input field
assert visible	Assert that an element is visible
close test	Close/end the test

3. Load an Example (Optional)

Use the dropdown in the workspace header to load example templates:

• Basic Navigation - Simple page load and verify
• Login Form - Fill and submit a login form
• Search Flow - Perform a search and verify results
• Multi-Click Navigation - Navigate through multiple pages
• Form Validation - Test a contact form with multiple fields

4. Preview Generated Code

The right panel shows your generated code in real-time with:

• Syntax highlighting
• Line numbers
• Framework-specific imports and structure

5. Export Your Test

Click the $ export .spec.ts button to download your test file.

Generated Code Examples

Playwright

import { test, expect } from '@playwright/test';

test('login form test', async ({ page }) => {
  await page.goto('https://example.com/login');
  await page.locator('input[name="email"]').fill('user@example.com');
  await page.locator('input[name="password"]').fill('password123');
  await page.locator('button[type="submit"]').click();
  await expect(page.locator('.dashboard')).toBeVisible();
});

Cypress

/// <reference types="cypress" />

describe('login form test', () => {
  cy.visit('https://example.com/login');
  cy.get('input[name="email"]').type('user@example.com');
  cy.get('input[name="password"]').type('password123');
  cy.get('button[type="submit"]').click();
  cy.get('.dashboard').should('be.visible');
});

Project Structure

src/
├── blocks/
│   └── customBlocks.ts      # Blockly block definitions
├── components/
│   ├── BlocklyComponent.tsx # Main workspace component
│   ├── CodePreview.tsx      # Monaco editor preview
│   ├── ExampleSelector.tsx  # Example dropdown
│   ├── Header.tsx           # App header with mode selector
│   └── ModeSelector.tsx     # Framework toggle buttons
├── examples/
│   └── exampleTemplates.ts  # Pre-built example templates
├── generators/
│   ├── playwrightGenerator.ts
│   ├── seleniumGenerator.ts
│   ├── cypressGenerator.ts
│   └── puppeteerGenerator.ts
└── App.tsx                  # Main application

Scripts

npm run dev      # Start development server
npm run build    # Build for production
npm run preview  # Preview production build
npm run lint     # Run ESLint

Tech Stack

• React 19 - UI framework
• TypeScript - Type safety
• Vite - Build tool
• Blockly - Visual block editor
• Monaco Editor - Code preview with syntax highlighting
• Tailwind CSS - Styling

License

MIT