C4A-Script：简化可视化 Web 自动化
什么是 C4A-Script？
C4A-Script 是一种功能强大、易于理解的领域特定语言 (DSL)，专为 Web 自动化和交互而设计。它是一种任何人都可以读写的简化编程语言，非常适合自动执行重复的 Web 任务、测试用户界面或创建交互式演示。
为什么选择 C4A-Script？
简单的语法，强大的结果
# Navigate and interact in plain English
GO https://example.com
WAIT `#search-box` 5
TYPE "Hello World"
CLICK `button[type="submit"]`
可视化编程支持 C4A-Script 带有内置的 Blockly 可视化编辑器，允许您通过拖放块来创建脚本 - 无需编码经验！
完美适用于： - UI 测试：自动化用户交互流程 - 演示创建：构建交互式产品演示 - 数据输入：自动化表单填写和提交 - 测试工作流：验证复杂的用户旅程 - 培训：教授无需复杂代码的 Web 自动化
入门：您的第一个脚本
让我们创建一个在网站上搜索某些内容的简单脚本：
# My first C4A-Script
GO https://duckduckgo.com
# Wait for the search box to appear
WAIT `input[name="q"]` 10
# Type our search query
TYPE "Crawl4AI"
# Press Enter to search
PRESS Enter
# Wait for results
WAIT `.results` 5
就这样！只需几行代码，您就自动化了完整的搜索工作流程。
交互式教程和现场演示
想边做边学吗？我们帮你搞定：
🚀现场演示- 立即在您的浏览器中试用 C4A-Script！
📁教程示例- 包含源代码的完整示例
本地运行教程
本教程包括一个基于 Flask 的 Web 界面，其中包含：- 具有语法突出显示的实时代码编辑器 - 用于拖放编程的可视化 Blockly 编辑器 - 用于捕捉您的操作并生成脚本的录制模式 - 用于查看和编辑您的自动化步骤的时间线视图
# Clone and navigate to the tutorial
cd docs/examples/c4a_script/tutorial/
# Install dependencies
pip install flask
# Launch the tutorial server
python app.py
# Open http://localhost:5000 in your browser
核心概念
命令和语法
C4A-Script 使用类似英语的简单命令。每个命令都执行一项特定的操作：
# Comments start with #
COMMAND parameter1 parameter2
# Most commands use CSS selectors in backticks
CLICK `#submit-button`
# Text content goes in quotes
TYPE "Hello, World!"
# Numbers are used directly
WAIT 3
选择器：查找元素
C4A-Script 使用 CSS 选择器来识别页面上的元素：
# By ID
CLICK `#login-button`
# By class
CLICK `.submit-btn`
# By attribute
CLICK `button[type="submit"]`
# By text content
CLICK `button:contains("Sign In")`
# Complex selectors
CLICK `.form-container input[name="email"]`
变量和动态内容
使用变量存储和重用值：
# Set a variable
SETVAR username = "john@example.com"
SETVAR password = "secret123"
# Use variables (prefix with $)
TYPE $username
PRESS Tab
TYPE $password
命令类别
🧭 导航命令
像用户一样在网络上移动：
| 命令 | 目的 | 例子 |
|---|---|---|
GO |
导航至 URL | GO https://example.com |
RELOAD |
刷新当前页面 | RELOAD |
BACK |
回顾历史 | BACK |
FORWARD |
在历史中前进 | FORWARD |
⏱️等待命令
确保元素在交互之前已准备就绪：
| 命令 | 目的 | 例子 |
|---|---|---|
WAIT |
等待时间/元素/文本 | 或者WAIT \#元素` 10` |
🖱️ 鼠标命令
像人类一样单击、拖动和移动：
| 命令 | 目的 | 例子 |
|---|---|---|
CLICK |
点击元素或坐标 | 按钮`or点击 100 200` |
DOUBLE_CLICK |
双击元素 | .item`` |
RIGHT_CLICK |
右键单击元素 | #菜单`` |
SCROLL |
向以下方向滚动 | SCROLL DOWN 500 |
DRAG |
从点拖动到点 | DRAG 100 100 500 300 |
⌨️ 键盘命令
自然地输入文本并按下按键：
| 命令 | 目的 | 例子 |
|---|---|---|
TYPE |
输入文本或变量 | 或者TYPE $username |
PRESS |
按特殊键 | 或者PRESS Enter |
CLEAR |
清除输入字段 | #搜索`` |
SET |
直接设置输入值 | #email`“user@example.com”` |
🔀 控制流
为您的脚本添加逻辑和重复：
| 命令 | 目的 | 例子 |
|---|---|---|
IF |
条件执行 | #popup') 然后点击 `#close`` |
REPEAT |
循环命令 | REPEAT (SCROLL DOWN 300, 5) |
💾 变量与高级
存储数据并执行自定义代码：
| 命令 | 目的 | 例子 |
|---|---|---|
SETVAR |
创建变量 | SETVAR email = "test@example.com" |
EVAL |
执行 JavaScript | console.log（'你好'）`` |
现实世界的例子
示例 1：登录流程
# Complete login automation
GO https://myapp.com/login
# Wait for page to load
WAIT `#login-form` 5
# Fill credentials
CLICK `#email`
TYPE "user@example.com"
PRESS Tab
TYPE "mypassword"
# Submit form
CLICK `button[type="submit"]`
# Wait for dashboard
WAIT `.dashboard` 10
示例 2：电子商务购物
# Shopping automation with variables
SETVAR product = "laptop"
SETVAR budget = "1000"
GO https://shop.example.com
WAIT `#search-box` 3
# Search for product
TYPE $product
PRESS Enter
WAIT `.product-list` 5
# Filter by price
CLICK `.price-filter`
SET `#max-price` $budget
CLICK `.apply-filters`
# Select first result
WAIT `.product-item` 3
CLICK `.product-item:first-child`
示例 3：带条件的表单自动化
# Smart form filling with error handling
GO https://forms.example.com
# Check if user is already logged in
IF (EXISTS `.user-menu`) THEN GO https://forms.example.com/new
IF (NOT EXISTS `.user-menu`) THEN CLICK `#login-link`
# Fill form
WAIT `#contact-form` 5
SET `#name` "John Doe"
SET `#email` "john@example.com"
SET `#message` "Hello from C4A-Script!"
# Handle popup if it appears
IF (EXISTS `.cookie-banner`) THEN CLICK `.accept-cookies`
# Submit
CLICK `#submit-button`
WAIT `.success-message` 10
使用 Blockly 进行可视化编程
C4A-Script 包含基于 Google Blockly 构建的强大可视化编程界面。适用于：
- 想要创建自动化的非程序员
- 自动化工作流程的快速原型设计
- 用于教授自动化概念的教育环境
- 协作开发，视觉呈现有助于沟通
特征：
- 拖放界面：通过连接块来构建脚本
- 实时同步：视觉模式下的更改会立即更新文本脚本
- 智能块类型：块按功能分类（导航、操作等）
- 错误预防：视觉连接可防止语法错误
- 评论支持：为文档添加可视化评论块
高级功能
录制模式
教程界面包含一个记录功能，可以观察您的浏览器交互并自动生成 C4A-Script 命令：
- 在教程界面点击“录制”
- 在浏览器预览中执行操作
- 实时观察 C4A-Script 命令的生成
- 编辑并完善生成的脚本
错误处理和调试
C4A-Script 提供清晰的错误信息和调试信息：
# Use comments for debugging
# This will wait up to 10 seconds for the element
WAIT `#slow-loading-element` 10
# Check if element exists before clicking
IF (EXISTS `#optional-button`) THEN CLICK `#optional-button`
# Use EVAL for custom debugging
EVAL `console.log("Current page title:", document.title)`
与 Crawl4AI 集成
C4A-Script 与 Crawl4AI 的网络爬取功能无缝集成：
from crawl4ai import AsyncWebCrawler, CrawlerRunConfig
# Use C4A-Script for interaction before crawling
script = """
GO https://example.com
CLICK `#load-more-content`
WAIT `.dynamic-content` 5
"""
config = CrawlerRunConfig(
js_code=script,
wait_for=".dynamic-content"
)
async with AsyncWebCrawler() as crawler:
result = await crawler.arun("https://example.com", config=config)
print(result.markdown)
最佳实践
1. 始终等待元素
# Bad: Clicking immediately
CLICK `#button`
# Good: Wait for element to appear
WAIT `#button` 5
CLICK `#button`
2. 使用描述性注释
# Login to user account
GO https://myapp.com/login
WAIT `#login-form` 5
# Enter credentials
TYPE "user@example.com"
PRESS Tab
TYPE "password123"
# Submit and wait for redirect
CLICK `#submit-button`
WAIT `.dashboard` 10
3.处理变量条件
# Handle different page states
IF (EXISTS `.cookie-banner`) THEN CLICK `.accept-cookies`
IF (EXISTS `.popup-modal`) THEN CLICK `.close-modal`
# Proceed with main workflow
CLICK `#main-action`
4. 使用变量实现可重用性
# Define once, use everywhere
SETVAR base_url = "https://myapp.com"
SETVAR test_email = "test@example.com"
GO $base_url/login
SET `#email` $test_email
获取帮助
下一步是什么？
准备好深入了解了吗？请查看：
C4A-Script 让每个人都能轻松使用 Web 自动化。无论您是进行自动化测试的开发人员、创建交互式演示的设计师，还是简化重复性任务的业务用户，C4A-Script 都能为您提供所需的工具。
今天就开始自动化吧——未来的你会感谢你！🚀