Web RPA: A Complete, Visual Guide to Web Robotic Process Automation

「Snippet

Web RPA is a visual, Windows-based automation tool that ships with Python 3.13 and Node.js. After extraction, double-click the startup script to launch local services on ports 8000 (backend) and 5173 (frontend). With 118 modules spanning browser automation, data processing, media, system operations, and AI capabilities, it enables code‑free workflows for data collection, form filling, and automated testing.

Web RPA: Practical, In‑Depth Guide to Visual Web Automation

Web RPA Logo

Table of Contents

  • Overview and Positioning
  • Feature Overview (modular, quantified)
  • UI and Workflow Editor
  • Quick Start (environment, startup, dev mode)
  • Project Structure (directories and responsibilities)
  • Usage Guide (basic operations, documentation system)
  • Tech Stack (frontend / backend / workflow service)
  • Module Statistics (categories and counts)
  • Author and License
  • FAQ
  • How‑To

Overview and Positioning

Web RPA is a visual web automation tool that also supports limited desktop system operations. Its core approach is drag‑and‑drop modules to quickly build automation workflows—no coding required—to achieve tasks such as web data collection, form filling, and automated testing.

Key facts:

  • Platform: Windows 10/11.
  • Built‑in runtime: Python 3.13 and Node.js (no extra installation required).
  • Startup: Extract the latest 7z package from Releases and double‑click 双击启动WebRPA本地服务.bat to automatically launch the backend, frontend, and client EXE.
  • Local ports: Backend http://localhost:8000, Frontend http://localhost:5173.
  • Module scale: A total of 118 modules (see statistics below).

These details form the minimal, verifiable facts—platform, ports, runtimes, and module scale—so readers can quickly assess suitability and operability.

Feature Overview (modular, quantified)

Features are organized into distinct categories. Below is an exact, itemized view of capabilities.

Browser Automation

  • Page control: open/close/refresh/forward/back.
  • Element interaction: click, hover, text input, dropdown selection, checkbox operations, drag elements, scroll page.
  • Dialogs and selector: handle pop‑ups, visual element selector.
  • State waiting: wait for element appear/disappear.

Data Collection

  • Extract page element data.
  • Webpage screenshot / screen capture.
  • Download files / save images.
  • Batch collection for similar elements.
  • Capture network requests.

Data Processing

  • Variable management system.
  • JSON parsing, Base64 encode/decode, regex extraction.
  • String operations: join, replace, split, substring, case transform, etc.
  • List operations: add, remove, get, length, etc.
  • Dictionary operations: set, get, keys list, etc.
  • Data table operations: add rows/columns, set/read cells, export, etc.
  • Excel read and export.

Database Operations

  • MySQL connections, CRUD, custom SQL execution, connection pool management.

File Operations

  • List files, copy/move/delete, create folders, rename, read/write text files, get file info, existence checks.

Media Processing

  • Format conversion (video/audio/image), video compression (with progress), image compression, audio extraction, video trimming, media merge (audio+video), watermark, M3U8 download, rotation/flip, playback speed, frame capture, subtitles, volume control, resolution adjustments.

Flow Control

  • Conditionals (multiple comparison ops), loops (count/condition), list iteration, break/continue, subflow reuse, scheduled tasks.

AI Capabilities

  • AI chat (supports OpenAI, Zhipu, Deepseek, Tongyi Qianwen, etc.).
  • Image recognition / AI vision, face recognition, OCR for images.

Captcha Handling

  • OCR text captchas.
  • Auto handling for slider captchas.

Notifications and Interaction

  • Logging (multi‑level), play sound/music/video (with player controls), image viewer (zoom/rotate/download), text‑to‑speech (TTS), user input dialogs (multiple modes), send emails.

System Operations

  • Real mouse click/move/scroll, real keyboard input, key combinations, clipboard read/write, run system commands, click by image (image‑based recognition), get mouse position, shutdown/restart/lock screen.

Auxiliary Functions

  • Custom JavaScript execution, HTTP/API requests, random numbers, current time, group/notes nodes, smart timeout configuration (auto by module type), module search with pinyin and initials.

UI and Workflow Editor

The editor layout:

  • Left: module list.
  • Center: canvas area.
  • Right: configuration panel.
  • Bottom: logs/data/variables panel.

Project ships multiple UI images under png/展示图1.png to png/展示图6.png for visual understanding:

Quick Start

Environment Requirements (quantified)

  • OS: Windows 10 or Windows 11.
  • Built‑in runtimes: Python 3.13 and Node.js (no extra installation).

Startup (step‑by‑step)

  1. Download the latest 7z package from Releases.
  2. Extract to a local directory.
  3. Double‑click 双击启动WebRPA本地服务.bat.
  4. Wait for the script to automatically start the backend, frontend, and client EXE.
  5. Verify local ports: backend http://localhost:8000, frontend http://localhost:5173.

Development Mode (commands)

Backend:

cd backend
../Python313/python.exe -m pip install -r requirements.txt
../Python313/python.exe run.py

Frontend:

cd frontend
../nodejs/npm install
../nodejs/npm run dev

Project Structure (directories and responsibilities)

Directory tree highlights:

  • backend/: Python FastAPI backend with app/api (API routes), executors (module executors), models (data models), services (core services), plus requirements.txt and run.py.
  • frontend/: React + TypeScript frontend. src/components (UI components), src/store (state management), src/types (type definitions), plus package.json.
  • frameworkHub/: workflow marketplace service (Node.js).
  • Python313/: built‑in Python environment.
  • nodejs/: built‑in Node.js environment.
  • ffmpeg.exe and ffprobe.exe: media processing and info tools.
  • workflows/: local workflow storage.
  • 双击启动WebRPA本地服务.bat: one‑click startup script.

This layout clarifies the front‑/back‑end separation and tool locations—useful for debugging and extension.

Usage Guide (basic operations and documentation system)

Basic Operations (measurable steps)

  1. Create a workflow: drag modules from the left list onto the canvas.
  2. Connect modules: drag a line from a module’s bottom to the next module’s top.
  3. Configure modules: set parameters in the right‑hand panel.
  4. Use variables: reference with {variableName} in input fields.
  5. Run workflow: click the toolbar run button.
  6. View results: check logs, data, and variables in the bottom panel.

Documentation System

  • 16 categories of detailed tutorials.
  • Global fuzzy search.
  • Rich code examples.
  • Best‑practice guides.

Tech Stack (frontend / backend / workflow service)

Frontend

  • Framework: React 18 + TypeScript.
  • Build tool: Vite 6.
  • UI components: Radix UI + shadcn/ui.
  • Styling: TailwindCSS 4.
  • Flow diagram: React Flow.
  • State management: Zustand.
  • Icons: Lucide React.
  • Markdown rendering: React Markdown + remark‑gfm.

Backend

  • Runtime: Python 3.13.
  • Web framework: FastAPI + Uvicorn.
  • Real‑time: Socket.IO.
  • Browser automation: Playwright (Microsoft Edge).
  • Database: PyMySQL.
  • Excel: openpyxl.
  • Email: smtplib + email.
  • AI integration: OpenAI API compatible interface.
  • OCR: ddddocr.
  • Imaging: Pillow.
  • Media: FFmpeg.
  • HTTP client: httpx.

Workflow Repository Service

  • Runtime: Node.js.
  • Web framework: Express.
  • Data storage: JSON files.
  • Process management: PM2.

Module Statistics (exact counts)

Category Module Count
Browser Operations 12
Form Operations 5
Data Processing 9
String Operations 8
List Operations 3
Dictionary Operations 3
Data Tables 7
Database Operations 7
Network Requests 2
AI Capabilities 2
Captcha 2
Flow Control 7
Auxiliary Tools 12
System Operations 11
File Operations 10
Media Processing 14
AI Recognition 2
Group/Notes 2
「Total」 「118 modules」

FAQ

Which operating systems are supported?

Windows 10/11.

What are the default ports after startup?

Backend http://localhost:8000, Frontend http://localhost:5173.

Do I need to install Python or Node.js?

No. Python 3.13 and Node.js are bundled.

How do I enter development mode?

Backend: install dependencies and run run.py. Frontend: npm install then npm run dev. See Quick Start for commands.

Does it support AI features?

Yes—AI chat, image/vision recognition, face recognition, and image OCR.

How many modules are available?

118 modules (see statistics table).

Is there built‑in documentation?

Yes—16 categories, global fuzzy search, code examples, and best practices.

What does media processing cover?

Conversion, compression, trimming, merging, watermark, M3U8 download, rotation/flip, speed, frame capture, subtitles, volume, resolution.

What’s included in browser operations?

Page control, element interaction, dialog handling, visual selector, state waiting.

Is there a workflow marketplace?

Yes—frameworkHub/ directory indicates a Node.js service for the marketplace.

How‑To

How‑To: First Local Startup

  1. Download the latest 7z package from Releases.
  2. Extract to a target directory.
  3. Double‑click 双击启动WebRPA本地服务.bat.
  4. Wait for the backend, frontend, and client EXE to start automatically.
  5. Visit http://localhost:5173 and interact with http://localhost:8000 as needed.

How‑To: Enter Backend Development Mode

  1. Go to backend directory.
  2. Install dependencies: ../Python313/python.exe -m pip install -r requirements.txt.
  3. Run backend: ../Python313/python.exe run.py.

How‑To: Enter Frontend Development Mode

  1. Go to frontend directory.
  2. Install dependencies: ../nodejs/npm install.
  3. Start dev: ../nodejs/npm run dev.

How‑To: Create and Run a Workflow

  1. Drag required modules from the left list to the canvas.
  2. Drag a line from the bottom of one module to the top of the next.
  3. Configure each module in the right panel.
  4. Reference variables in inputs with {variableName}.
  5. Click the toolbar run button to start.
  6. Check logs, data, and variables in the bottom panel.

Keywords and Semantic Network

Web RPA, web automation, workflow, drag‑and‑drop modules, data collection, form filling, automated testing, Windows, Python 3.13, Node.js, FastAPI, React 18, TypeScript, Vite 6, TailwindCSS 4, React Flow, Zustand, Socket.IO, Playwright, MySQL, PyMySQL, openpyxl, FFmpeg, Pillow, httpx, OCR, ddddocr, AI chat, image recognition, workflow marketplace, Express, PM2, JSON storage, Radix UI, shadcn/ui, Markdown rendering, remark‑gfm.

Closing

Web RPA enables web and limited system automation through drag‑and‑drop workflows. With 118 modules and built‑in runtimes, it lowers the barrier for data collection, form handling, and testing. This article restructures functions, architecture, startup, and development steps for clear verification and practical use.