🎭 Selenium MCP 服务器配置与演示
*将自然语言转化为浏览器自动化魔法* ✨(这个符号在中文中通常没有直接对应的翻译,它常用来表示闪耀、光芒或庆祝等意象,具体翻译需结合上下文)
______________________________________________________________________
📖 目录
______________________________________________________________________
🌟 概述
欢迎来到测试自动化的未来!这个项目展示了革命性的 Selenium MCP 服务器该工具能够将自然语言指令转换为复杂的浏览器自动化工作流。告别复杂的XPath表达式,迎接用普通英语创建测试的新时代! 🎉(庆祝、欢乐的表情符号,无直接对应中文文字,可表达为“庆祝”或“欢乐”等情感)
______________________________________________________________________
⚙️ 设置指南
📁 步骤1:创建项目工作区
# Open VSCode and create a new folder for your project🔧 步骤2:配置MCP服务器
导航至: C:\Users\mvsar\AppData\Roaming\Code\User\mcp.json
添加以下配置:
{
"mcpServers": {
"selenium": {
"command": "npx",
"args": [
"-y",
"@angiejones/mcp-selenium"
]
}
}
}📦 步骤3:安装MCP包
npm install -g @angiejones/mcp-selenium🏗️ 第四步:生成 Maven 项目
打开 命令提示符 在VSCode终端中运行:
mvn archetype:generate -DgroupId=com.selenium.mcp -DartifactId=selenium-mcp-tests -DarchetypeArtifactId=maven-archetype-quickstart -DinteractiveMode=false📂 文件夹 项目结构已创建:
selenium-mcp-tests/
├── src/
│ ├── main/
│ │ └── java/
│ └── test/
│ └── java/
└── pom.xml📝 步骤 5: 更新 pom.xml
添加这些依赖项和插件:
org.seleniumhq.selenium
selenium-java
4.15.0
org.testng
testng
7.8.0
test
io.github.bonigarcia
webdrivermanager
5.6.2
org.apache.maven.plugins
maven-surefire-plugin
3.0.0
org.apache.maven.plugins
maven-compiler-plugin
3.11.0
11
11
🔄 步骤6:安装依赖项
cd selenium-mcp-tests
mvn clean install🚦 步骤7:启动MCP服务器
🔴(红色圆圈) 关键的;至关重要的在生成测试之前,服务器必须正在运行!
- 打开 VS Code 命令面板:
- Windows/Linux(保持原样,无需翻译,因为这是操作系统名称的直接对应): Ctrl + Shift + P - macOS(发音为“Mac OS”,其中“OS”代表“Operating System”,即操作系统): Cmd + Shift + P
- 类型:
MCP: List Servers
- 找到
selenium在服务器列表中
- 点击 开始 按钮
- ✅ 验证状态显示 “跑步” 带有绿色指示灯
______________________________________________________________________
🎯 魔法提示词演示
🪄 一条命令,搞定一切
use selenium mcp server visit https://www.demoblaze.com/
select Samsung galaxy s6 product
add to the cart and checkout就是这个! 观看MCP服务器的运行:
- 🌐 启动浏览器
- 🔍 导航至网站
- 🎯 确定产品元素
- 🛒 处理购物车操作
- ✅ 完成结账流程
- 🧪 自动生成测试代码
______________________________________________________________________
🔄 工作原理
🎨 自动化流程
graph TD
A[🎤 Natural Language Input] --> B[🧠 MCP Server Processing]
B --> C[🔍 Element Detection]
C --> D[🌐 Browser Launch]
D --> E[🏪 Navigate to DemoBlaze]
E --> F[📱 Select Samsung Galaxy S6]
F --> G[🛒 Add to Cart]
G --> H[💳 Checkout Process]
H --> I[✅ Test Generation]
I --> J[📊 Verification Complete]⚡ 关键自动化步骤
| 步骤 | 操作 | MCP 处理 |
|---|---|---|
| 中文 | 英文 | 日文 |
| 1️⃣ | 浏览器启动 | 自动驱动管理 |
| 2️⃣ | 导航 | URL路由与页面加载等待 |
| 3️⃣ | 产品选择 | 智能元件识别 |
| 4️⃣ | 购物车管理 | 点击处理与提醒 |
| 5️⃣ | 结账 | 表单交互与提交 |
______________________________________________________________________
| 6️⃣ | 验证 | 生成测试代码 |
Java 21
Selenium
TestNG
Maven
WebDriverManager
Selenium MCP
VS Code
NPX
______________________________________________________________________
💻 技术栈
🚀 运行测试
💬 在 VS Code 中打开 GitHub Copilot
use selenium mcp server visit https://www.demoblaze.com/
select Samsung galaxy s6 product
add to the cart and checkout只需输入您的自然语言指令:
- 🎬 接下来会发生什么: 🤖 机器人 MCP 服务器
- 解释您的命令 🌐(表示“网络”或“互联网”的符号) 浏览器
- 自动启动 🔐(锁形符号,常用于表示密码、保密或安全) 同意提示
- 出现(授予许可) ⚡(闪电符号,常用于表示快速、能量、电力等概念,具体含义需结合上下文理解) 自动化
- 执行工作流 📝 测试代码
- 自动生成 ✅ 验证
______________________________________________________________________
完成
✨ 主要特点
🎯 核心优势 | 特性 | 描述 | 影响 | |---------|-------------|--------| | 📝 自然语言 | 用通俗易懂的英语编写测试 | 测试创建速度提升10倍 | 🔍 智能检测 | 自动元件识别 | 无需定位器维护 | | ⏱️ 自动计时 | 智能等待机制 | 无需显式等待 | | 🚨 警报处理 | 内置弹窗管理 | 流畅流程处理 | 🔄 旋转符号(循环、重复等含义) 同步 | 智能状态管理 | 减少不稳定性 | 🎨 代码生成
| 创建可维护的测试 | 专业级质量代码 |
🌟 为何这很重要 传统方法 ``java driver.get("https://www.demoblaze.com/"); WebDriverWait wait = new WebDriverWait(driver, 10); WebElement product = wait.until(ExpectedConditions.elementToBeClickable( By.xpath("//a[contains(text(),'Samsung galaxy s6')]"))); product.click(); // ... 50+ more lines of code ``🐌 代表蜗牛。 MCP服务器方法 ``text use selenium mcp server visit https://www.demoblaze.com/ select Samsung galaxy s6 product add to the cart and checkout ``______________________________________________________________________
🚀 火箭/快速上升/飞速发展
🎉 成果与成就
- ✅ 全面电子商务流程自动化
- 🏪 产品浏览
- 🛒 购物车管理
- 💳 结账流程
- ✨ 报警处理
📊 数据验证
- 📈 指标代码行数
- 1个提示符 vs 100多行代码开发时间
- 2分钟对比2小时维护
- 最小化与最大化可读性
______________________________________________________________________
英语与技术(或:技术英语)
┌─────────────────────────────────────────┐
│ 🌐 Browser Launch │
│ ↓ │
│ 🏪 Visit DemoBlaze Store │
│ ↓ │
│ 🔍 Browse Products │
│ ↓ │
│ 📱 Select Samsung Galaxy S6 │
│ ↓ │
│ 🛒 Add to Cart │
│ ↓ │
│ 🚨 Handle Alert │
│ ↓ │
│ 💳 Navigate to Checkout │
│ ↓ │
│ 📝 Complete Purchase Form │
│ ↓ │
│ ✅ Verification & Test Generation │
└─────────────────────────────────────────┘______________________________________________________________________
🎨 测试场景可视化
🏆 成功案例 这个演示证明了 自然语言自动化
______________________________________________________________________
这不仅仅是一个概念,而是一个现实!Selenium MCP服务器填补了人类意图与浏览器自动化之间的鸿沟,使从开发人员到质量保证分析师再到产品经理的每个人都能轻松创建测试。
- 🎓 学习资源 📚 书籍或阅读的象征
______________________________________________________________________
Selenium MCP 文档
🤝 贡献(或“参与贡献”)
______________________________________________________________________
觉得这个有帮助吗?给这个仓库点个星⭐并分享你的经验吧!
📄 许可证
______________________________________________________________________
这个项目是开源的,可供教育用途使用。 *💡 灯泡或创意的图标(具体含义根据上下文而定)*
______________________________________________________________________
“最好的代码是那些你无需编写的代码”
👨💻 作者
*萨兰·库马尔*
______________________________________________________________________
