MCP Servers玩玩WebUI自动化

MCP Servers快速了解

一文搞懂 MCP Servers

mcp server网站

• https://mcpservers.org
• https://mcp.so
• https://glama.ai/mcp/servers
• https://www.pulsemcp.com

一、安装&配置mcp clients

mcp clients可以使用客户端（常见claude desktop，但claude需要海外邮箱登录&手机号接收验证码），也可以使用插件（常用vscode cline插件）。
推荐chatmcp可以直接下载安装包安装，且不需要账号

二、chatmcp配置服务供应商LLM

chatmcp支持OpenAI、Claude、DeepSeek、Ollama、Gemini、OpenRouter。国内最便捷的就是用DeepSeek。

DeepSeek申请API Key

访问DeepSeek开放平台，注册登陆后申请API Key

选择支付方式就可以使用，计费标准可以直接查看，10块钱就可以用很久了

配置服务供应商

如图填写API Key，然后点击Fetch即可自动拉取模型deepseek-chat（V3）、deepseek-reasoner（R1）根据需要打开使用即可

此时已经可以进行单纯的对话

三、配置UI自动化框架mcp server

寻找自己需要用到的mcp server

根据自己的需要从mcp server网站中寻找自己合适的mcp server（不同的开源项目实现的能力不同，根据自己的需要选择使用即可）
mcp clients调用的mcp server本地服务，需要本地搭建运行环境，构建mcp server进行连接本地服务（也可以调用远程服务）

3.1 举例selenium mcp server

首先需要本地安装selenium运行环境：selenium、chrome、chromedriver

下载安装mcp server

从mcp selenium项目clone代码到本地
安装mcp server

cd mcp-selenium
npm install -g @angiejones/mcp-selenium

配置mcp server

添加服务，按照项目文档填写对应命令command和参数args即可

运行调试连接，变为方块即为连接成功

使用mcp server能力

打开selenium mcp 的使用，发送指令“启动chrome浏览器，访问https://www.baidu.com”

会自动运行chromedriver拉起chrome浏览器，进行相关的操作

可以看到大致的运行原理是：

• 1、自动携带提示词：生成mcp selenium可接受的指令(支持哪些指令由mcp server决定的，可以根据自己需要编写或二次开发)
• 2、向DeepSeek模型发起请求，模型将输入的问题推理出mcp selenium可接受的指令并输出
  例如：点击xx按钮，可能推理出指令为 click：xpath， //button(text=‘xxx’)

【推理即存在一定误差性质，比如页面实现按钮是个span、或者页面有多个xx按钮，都可能导致执行失败。
模型并不会捞取页面dom树结构实际解析，纯纯模型推理，所以误差非常高。
想要提高准确性，需要更精细的问题引导模型推理。例如：点击span元素登录；或者尝试点击xxx如果不存在点击xxxx（一些规律出现之后就可以配置成提示词，提高生成指令的准确性）
同样使用其他server都是一样的，由模型生成可接受的指令，mcp server调用本地/远程服务执行操作】

3、向mcp server发送可接受的指令，mcp server调用本地配置好的运行环境（selenium、chrome、chromedriver）

3.2 举例playwright mcp

首先需要本地安装playwright运行环境

pip install playwright #安装playwright
playwright install #安装playwright支持的浏览器

下载安装mcp server

从mcp-playwright项目clone代码到本地
安装mcp server

cd mcp-playwright
npm install -g @executeautomation/playwright-mcp-server

配置mcp server

添加服务，按照项目文档填写对应命令command和参数args即可

使用mcp server能力

打开playwright mcp 的使用，发送指令“启动chrome浏览器，访问https://www.baidu.com”
会自动运行chromedriver拉起chromium，进行相关的操作
mcp server运行原理是一样的

四、使用brower use & mcp server

从上面的两种mcp servers 的使用发现：简单的使用模型推理生成的步骤是很难满足使用的，需要结合网页dom解析、多模态等能力才可以更好的实现webui自动化。继续探索使用brower use。

brower use安装使用

brower use需要python3.11及以上版本，由于一些其他应用的使用本机python版本无法升级。所以构建一套虚拟环境搭建brower use

conda python3.12环境搭建（非必要）

构建虚拟环境使用，pyenv、asdf等系列工具都可以

brew install --cask miniconda  # 通过Homebrew安装Miniconda
conda --version  # 验证安装完成
conda init bash  # 初始化Conda
conda create --name xxxxxxx python=3.12  # 创建新的虚拟环境，指定python版本
conda activate xxxxxxx  # 激活虚拟环境
conda deactivate  # 退出虚拟环境
conda env list  # 列出所有可用的环境
conda env remove -n xxxxxxx  # 删除指定环境

激活环境即可看到命令行已经显示进入xxxxxxx环境，虚拟环境是会把你当前环境配置一起带过去的，所以安装的python3.12在本机环境配置基础上叠加。需要自行验证一下

python -V  # 可能是本机原本的python2版本
python3 -V  # 可能是本机原本的python3版本
python3.12 -V # 这个肯定是新安装的指定python版本了
pip -V # 检查一下对应的python版本
pip3 -V # 检查一下对应的python版本

brower use安装

pip install browser-use  # 安装browr user
pip install playwright #安装playwright，前面装过的就不用装了
playwright install #安装playwright支持的浏览器，前面装过的就不用装了

webui安装使用

git clone https://github.com/browser-use/web-ui.git
cd web-ui # 进入项目地址
pip install -r requirements.txt  # 安装项目的依赖
python3.12 webui.py --ip 127.0.0.1 --port 7788  # 启动webui服务

浏览器访问127.0.0.1:7788
需要配置LLM，使用前面申请的DeepSeek APIKey即可，URL https://api.deepseek.com
如果使用其他不在默认配置中的模型，根据API风格选择openai，URL&API Key填写对应的即可

DeepSeek不支持多模态需要关掉设置UseVision（不关掉执行会报错，其他支持视觉的模型不需要关）

Run Agent直接写入你需要执行的操作步骤，点击Run Agent执行即可.
会自动搜索百度官网地址并访问，解析网页dom检索第二个热搜并点击，自动获取标题文案。一站式自动化操作，更智能&成功率高（理论上加上视觉成功率会更高）

brower use mcp server配置使用（仅做mcp server集成，brower use自己本身也可以单独执行）

brower use 相当于集成了一个mcp client、一个mcp server、一个playwright工具
在集成一个mcp server相当于可以跟更多的工具联合使用

mcp server下载安装

git clone https://github.com/Saik0s/mcp-browser-use
pip install uv  # 安装uv

配置mcp server到clients

uv  # 命令
--directory /xxxxxxx/mcp-browser-use run src/mcp_server_browser_use/server.py  # 参数，该mcp server配置方式与上面不同，直接运行项目文件# 环境变量，参数意义参考https://glama.ai/mcp/servers/@Saik0s/mcp-browser-use?locale=zh-CN#readme-md
MCP_MODEL_PROVIDER=DeepSeek
MCP_MODEL_NAME=deepseek-chat
MCP_BASE_URL=https://api.deepseek.com
DEEPSEEK_API_KEY=xxxxxx
MCP_TEMPERATURE=0.6
MCP_USE_VISION=false
MCP_HEADLESS=flase
MCP_KEEP_BROWSER_OPEN=true
BROWSER_HEADLESS=false
BROWSER_USE_LOGGING_LEVEL=INFO
PYTHONIOENCODING=utf-8
PYTHONUNBUFFERED=1
PYTHONUTF8=1

发送命令实行报错，需要修改项目代码

发送命令后发现报错没有DeepSeek模型，根据报错查看项目源码，发现是get_llm_model函数中模型provider的判断是==‘deepseek’，运行有bug，所以函数里面添加一个行代码

/mcp-browser-use/src/mcp_server_browser_use/utils/utils.py. # 需要修改文件的路径provider = provider.lower()  # provider转为全小写，添加至如下图位置

使用mcp能力调用brower use