研发效能 playwright/mcp 的一种工作实践——和自定义 MCP Server 的 playwright 自动化脚本结合

JoyMao · 2025年05月23日 · 最后由 JoyMao 回复于 2025年06月09日 · 4060 次阅读

社区里之前有人对 playwright/mcp 的使用提出了一些疑问,这里给出我自己的一个小实践思路:那就是和自定义的 MCP Server 配合使用。
比如最简单的:在自定义 MCP Server 中编写调用公司内部沟通工具,可以将 playwright/mcp 将页面中的问题或截图发送给对应人员。

如果你是以 PC 端 chrome 来测试业务的,那么自定义 MCP Server 的 playwright 自动化脚本和官方的 PlayWright/mcp 结合一起——操作同一个 chrome 并配合工作,可能是一个不错的方案。

达到这个目的,我的方法如下:
1、采用 debug 模式启动 chrome:chrome 快捷方式启动参数增加 --test-type --remote-debugging-port=9222
2、PlayWright/mcp 服务增加启动参数 --cdp-endpoint=http://127.0.0.1:9222 。MCP client 中 MCP 配置如下

3、自定义 MCP Server 中的 playwright 也采用 cdp 方式,注意脚本需要采用异步版本 playwright 的 API,tool 方法也需要是异步的。

@mcp.tool(description=r"""
    完成xx网站的登录,
    其中登录名(username,缺省值为tester@xx.com),密码(password,缺省值为xx1234)
    """
)
async def doLogin(username:str,password:str)->str:
    """
    完成xx网站的登录
    :param username:
    :param password:
    :return:
    """
    return await loginXX(username,password)

async def connectChromium(playwright,debugPort=9222)->typing.Union[None,Browser]:
    try:
        browser = await playwright.chromium.connect_over_cdp("http://localhost:%d"%debugPort)
        return browser
    except Exception as e:
        return None

async def loginXX(username:str,password:str)->str:
    async with async_playwright() as playwright:
        browser:Browser = await connectChromium(playwright)
        if browser is None:
            return "无法连接到debug的chromium"
        context = browser.contexts[0]
        page=context.pages[0]
        await page.bring_to_front()
        await page.goto("https://login.xx.com",wait_until='domcontentloaded')
        await page.fill("#loginForm_loginName",username)
        await page.fill("#loginForm_password",password)
        await page.click("button.login-button")
        await asyncio.sleep(3)
        return "进行了登录表单操作"

上面以一个登录作为简单例子,实践上,可以编写一大堆 MCP Server 的 Tools(长表单自动完成,API 接口造数等等),以启动的 chrome 作为日常测试主体,配合 MCP 帮你操作解析页面、快速完成表单、造数、截图、快速提交 bug、发送问题给同事...可能对测试工作效率有一定提高

在以下简单示例中,可以先通过 playwright/mcp 生成 testerhome 注册表单填写脚本,然后改成异步版本放入自定义的 MCP 中作为一个 tool。
在 MCP 中实现输入指令完成操作:
1、访问 testerhome - playwright/mcp
2、点击注册按钮 - playwright/mcp
3、自动完成注册表单 - 自定义 mcp

但还是需要考虑:
1、成本在于那些 tools 本身的开发及管理、规划
2、如果配置的 MCP Server 很多情况下,是否会带来性能问题及 tool 因为意义不明确"打架"问题
3、安全问题,已经看到不少专家针对 MCP 发表了安全性顾虑的文章了

MCP Server SDK:https://modelcontextprotocol.io/sdk/java/mcp-overview

共收到 4 条回复 时间 点赞

看完后还是没太理解这是什么场景?

干饭狂人 回复

其实是把 MCP 作为一个工作智能助手,在浏览器相关测试中,可以通过 prompts

  • 操作页面或抓取信息 (playwright/mcp)
  • 将页面操作自动生成自动化脚本 (playwright/mcp)
  • 调用自动化脚本快速完成一些常用流程操作 (自定义 mcp 调用 playwright 脚本)
  • 通过页面字段,快速查询库表中相关信息核对(自定义 mcp 编写模板化 sql 查询库表工具)
  • 获取截图 + 问题描述快速提交 BUG 到你们的项目平台(自定义 mcp 调用 API)
  • 获取截图 + 描述通过内部通信工具快速发送给相关同事(自定义 mcp 调用 API) 等等

请教一下楼主:自动完成注册表单 - 自定义 mcp,这步骤为什么不用 playwright/mcp 直接完成?

xYLiu 回复

1、这里只是举了一个简单表单例子,如果是复杂的长流程过程,是要事先准备好自动化脚本的
2、playwright/mcp 本身只是一个 Tools,如果要很智能的完成输入"帮我完成这个表单"就能自动填写表单,需要你对接的大模型或智能体 “足够智能”,但也会面临一大堆失败/错误,需要你不断对话调整的过程:可以尝试一下或参考之前论坛中的帖子。
而如果使用一般的大模型,你就需要重复的如下进行:
AI:"你是否做 xx1?" - 你:” 是的 “
AI:"你是否做 xx2?" - 你:” 是的 “
AI:"你是否做 xx3?" - 你:” 是的 “
...
这样效率不高的
3、但 playwright/mcp 可以录制你的过程变成脚本,倒是方便不少

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册