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.

• 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

• Node.js 20+
• npm or yarn

# 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.

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.

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

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

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

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

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

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(); });

/// <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'); });

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 

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

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

MIT