全部标签
写点什么
开源架构OpenHarmony算法元宇宙学习方法Web3.0高效工作数据库Python音视频前端AI大数据团队管理程序员运维深度思考低代码redisgolang微服务架构flutter 查看更多

Playwright MCP 项目实战：基于提示的浏览器测试与代码生成

作者：测吧(北京)科技有限公司
  • 2025-11-28
    黑龙江

  • 本文字数：4852 字

    阅读完需：约 16 分钟

想象一下，只需对 AI 说“测试网站的登录功能”，它就能自动操作浏览器完成测试并生成报告——这就是 Playwright MCP 带来的变革。


在快速迭代的现代软件开发中，UI 自动化测试已成为保障产品质量的关键环节。然而，传统自动化测试方法高度依赖测试工程师手动编写和维护脚本，不仅耗时巨大，且脚本脆弱性高——页面结构的细微变化就可能导致测试失败。


随着大语言模型和 AI 智能体技术的发展，一种全新的测试范式正在形成。Playwright 与 MCP 的结合，创造了对话式自动化的新范式，用简单指令替代复杂脚本编写，大幅降低了自动化测试的技术门槛。

一、Playwright 与 MCP：技术概述

1.1 Playwright 的核心优势

Playwright 是微软开源的现代化 Web 自动化框架，具有以下突出特点：


  • 跨浏览器支持：原生支持 Chromium（Chrome/Edge）、Firefox 和 WebKit（Safari）三大浏览器引擎

  • 智能等待机制：自动检测元素可交互状态，减少因网络延迟导致的测试失败

  • 多语言支持：提供 JavaScript/TypeScript、Python、.NET 和 Java 等多种语言 API

  • 移动端模拟：内置设备描述符，可真实模拟移动设备环境

  • 录制功能：通过playwright codegen命令可录制操作并生成脚本

1.2 MCP 协议的核心价值

MCP（Model Context Protocol）是 Anthropic 推出的一个开放协议，它允许 AI 模型安全、可控地访问外部工具和数据源。它的价值在于：


  • 统一交互标准：让 LLM 能够与浏览器、数据库等外部工具无缝对话

  • 动态流程控制：根据实时反馈调整指令，使自动化流程更加灵活

  • 安全机制：权限分层设计，防止越权操作敏感资源

1.3 当前技术痛点分析

在实际应用中，Playwright-MCP 项目存在一个关键缺口——目前系统无法直接将基于提示的交互过程转换为可重复执行的测试代码。


当前 Playwright-MCP 的工作流存在两种独立模式：


  1. 交互式提示测试：通过自然语言指令与 MCP 服务器交互，动态执行测试步骤

  2. 代码生成测试：通过传统录制方式生成 Playwright 测试脚本


这两种模式各有优劣：提示测试能快速覆盖多种场景，但依赖 LLM 推理；生成的代码测试更适合 CI/CD 环境，但创建耗时。

二、环境搭建与配置

2.1 基础环境准备

确保你的系统满足以下要求：


  • Node.js v16+ 或 Python 3.8+

  • 一款支持 MCP 的客户端（如 Cursor、VS Code、Claude Desktop）

2.2 安装 Playwright MCP 服务器

方案一：使用 npm 安装（推荐）


# 全局安装Playwright MCP服务器npm install -g @playwright/mcp@latest
# 安装Playwright浏览器npx playwright install
复制代码


方案二：使用 Python 环境


# 安装Playwright Python包pip install playwright
# 安装浏览器驱动playwright install
复制代码


对于国内用户，可以通过镜像加速下载：


set PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwrightplaywright install
复制代码

2.3 配置 MCP 客户端

Cursor 配置示例：


在 Cursor 的 MCP 设置中添加以下配置：


{  "mcpServers": {    "playwright": {      "command": "npx",      "args": ["@playwright/mcp@latest"]    }  }}
复制代码


VSCode 配置示例：


在 VSCode 的 settings.json 中加入：


{  "mcpServers": {    "playwright": {      "command": "npx",      "args": ["@playwright/mcp@latest"],      "timeout": 300    }  }}
复制代码

三、核心技术原理：快照生成

快照生成是整个流程的"信息燃料"，其设计直接决定 AI 对页面的理解程度。一个高效的快照包含多个层次的信息：


<!-- 关键URL和元信息 --><base url="https://admin.example.com/login" /><title>用户登录 - 后台管理系统</title>
<!-- 基于可访问性树的精简DOM --><body><main aria-label="登录表单">    <img src="logo.png" alt="公司Logo" />    <h1>欢迎回来</h1>    <form>      <div role="group">        <label for="username">用户名</label>        <input id="username" type="text" aria-required="true"                 value="" placeholder="请输入邮箱或手机号">      </div>      <button type="submit" aria-busy="false">登录</button>    </form></main></body>
复制代码


快照生成策略：


  • 过滤与精简：移除所有<script>、<style>标签和隐藏元素。优先保留具有 ARIA 角色和交互属性的元素

  • 内容优先级：可见文本、Alt 文本、Placeholder、表单值等对理解页面功能至关重要的信息被优先保留

  • 长度控制：LLM 有上下文长度限制。快照必须在不丢失关键信息的前提下极度压缩，通常通过智能截断实现

四、MCP Server 的核心功能与工具集

Playwright MCP 提供了一系列强大的工具函数，让 AI 可以全面操作浏览器。

4.1 浏览器控制工具

  • create_browser_session：创建新的浏览器会话，可指定浏览器类型、视口大小等参数

  • close_browser_session：关闭当前浏览器会话，释放资源

  • navigate_to_url：导航到指定 URL

4.2 页面交互工具

  • click_element：点击页面元素，支持多种定位策略

  • fill_input：在输入框中填写文本

  • wait_for_selector：等待元素出现或达到特定状态

  • double_click_element：双击元素

  • select_option：选择下拉选项

4.3 数据提取工具

  • get_text_content：获取元素文本内容

  • get_element_attribute：获取元素属性值

  • get_page_title：获取页面标题

  • get_page_url：获取当前页面 URL

4.4 高级功能工具

  • take_screenshot：截取页面截图，支持全页截图

  • execute_javascript：执行 JavaScript 代码并返回结果

  • generate_test_cases：从需求描述自动生成测试用例

五、实战案例：完整的 UI 自动化测试流程

5.1 测试场景描述

假设我们需要自动化测试一个网站的登录流程：


  • 打开网站登录页面

  • 输入用户名和密码

  • 点击登录按钮

  • 验证登录成功

  • 执行登出操作

5.2 基于 MCP 的 AI 驱动实现

现在，使用 Playwright MCP 实现相同的测试流程。只需要向 AI 发送自然语言指令：


"请测试后台登录页面（https://admin.example.com/login）的登录功能。使用测试账号'test@example.com'和密码'123456'进行登录，并验证登录成功后是否跳转到了仪表盘页面。"

5.3 智能体决策与执行流程

AI 智能体接收到指令后，会按照以下流程执行测试：


  1. 目标理解：LLM 解析用户指令，理解测试需求

  2. 导航：调用navigate_to工具打开目标 URL

  3. 观察：调用get_page_snapshot获取页面快照

  4. 决策与操作：分析快照，识别用户名输入框、密码输入框和登录按钮，依次调用fill、click等工具

  5. 验证：跳转后再次获取页面快照，分析是否包含成功登录标识

  6. 报告：根据验证结果生成最终测试报告

5.4 完整代码示例

import asynciofrom langchain.agents import AgentExecutor, create_tool_calling_agentfrom langchain.tools.mcp import create_mcp_tool, MCPClientSession, MCPServerParametersfrom langchain_openai import ChatOpenAIfrom langchain_core.prompts import ChatPromptTemplate
async def run_ui_test():    # 配置并启动Playwright MCP服务器    server_params = MCPServerParameters(        command="playwright-mcp",        args=["--headless=true"]  # 以无头模式启动浏览器    )    session = MCPClientSession(server_params=server_params)
    # 创建MCP工具集    tools = await create_mcp_tool(session, name="playwright-tools")
    # 构建测试智能体    llm = ChatOpenAI(model="gpt-4o", temperature=0)
    # 系统提示词指导AI如何测试    prompt = ChatPromptTemplate.from_messages([        ("system", "你是一个专业的UI自动化测试工程师，能够使用Playwright工具进行网页测试。请根据用户需求，制定测试计划并执行相应的浏览器操作。"),        ("human", "{input}")    ])
    agent = create_tool_calling_agent(llm, tools, prompt)    agent_executor = AgentExecutor(agent=agent, tools=tools, verbose=True)
    # 执行测试任务    async with session:        result = await agent_executor.ainvoke({            "input": "请测试后台登录页面（https://admin.example.com/login）的登录功能。使用测试账号'test@example.com'和密码'123456'进行登录，并验证登录成功后是否跳转到了仪表盘页面。"        })
    print("测试结果:", result["output"])
# 运行测试asyncio.run(run_ui_test())
复制代码

六、从提示测试到代码生成：混合工作流设计

技术社区提出了几种潜在的集成方案，以实现从提示测试到可重复执行代码的平滑过渡。

6.1 混合工作流设计

  • 探索阶段：使用自然语言提示快速构建测试场景

  • 固化阶段：将验证通过的流程自动转换为标准 Playwright 代码

  • 回归阶段：使用生成代码进行持续集成

6.2 技术实现要点

增强的代码生成器需要捕获：


  • 初始提示语义

  • 实际执行的 DOM 操作序列

  • 断言条件的逻辑表达


生成的代码应保持：


  • 人类可读性

  • 可调试性

  • 与现有测试框架的兼容性

6.3 传统 Playwright 脚本实现对比

以下是传统 Playwright 脚本实现方式，可与 AI 驱动方式对比：


from playwright.sync_api import sync_playwright
def test_login():    with sync_playwright() as p:        # 启动浏览器        browser = p.chromium.launch(headless=False)        page = browser.new_page()
        # 导航到登录页面        page.goto("https://example.com/login")
        # 输入凭据        page.fill("#username", "testuser")        page.fill("#password", "password123")
        # 点击登录按钮        page.click("#login-btn")
        # 验证登录成功        assert page.is_visible(".dashboard")
        # 执行登出        page.click("#logout-btn")
        browser.close()
复制代码

6.4 结合 Codegen 的代码生成

除了 MCP 方法，Playwright 还提供传统的代码生成功能，可通过命令行启动：


playwright codegen http://网站地址
复制代码


这将打开两个窗口：一个是浏览器窗口，您可以在其中与要测试的网站进行交互；另一个是 Playwright Inspector 窗口，您可以在其中记录测试、复制测试、清除测试以及更改测试语言。

七、技术优势与实战价值

7.1 降低测试门槛

自然语言交互使产品经理、手动测试人员等非技术背景人员也能参与自动化测试创建，显著扩大测试覆盖范围。

7.2 提升测试效率

AI 智能体可快速探索应用，自动生成测试代码，节省模板代码编写时间，并能发现人工可能遗漏的边界情况。

7.3 增强脚本可靠性

基于可访问性树和语义属性的元素定位，比易变的 UI 文本或 CSS 选择器更具弹性，对页面样式变化适应性更好。

八、当前挑战与应对策略

8.1 快照信息丢失问题

挑战：精简后的快照无法完全还原真实页面视觉信息，可能导致 AI 误判。例如，一个通过 CSS::before伪元素生成的关键图标可能不会出现在快照中，导致 AI 无法理解其含义。


解决方案：


  • 结合视觉截图辅助 AI 理解复杂组件状态

  • 对关键交互元素添加详细描述注释

8.2 元素定位稳定性

挑战：AI 倾向于使用文本内容定位元素，UI 文本变更会导致测试失败。一旦 UI 文本发生微调，基于文本定位的测试就会失败。


解决方案：


  • 在关键元素上添加稳定的data-testid属性

  • 引导 AI 优先使用语义角色和关系定位元素

8.3 应对复杂交互场景

挑战：对于复杂的动态页面，特别是单页应用（SPA），AI 可能难以理解应用的状态变化和异步加载行为。


解决方案：


# 健壮的元素操作示例async def smart_click(page, text):    selectors = [        f'button:has-text("{text}")',        f'div:has-text("{text}")',        f'//*[contains(text(), "{text}")]'    ]
    for selector in selectors:        try:            element = await page.wait_for_selector(selector, timeout=2000)            await element.click()            return True        except:            continue
    print(f"找不到文本为 {text} 的元素")    return False
复制代码

结语

Playwright 与 MCP 的结合正在重塑 UI 自动化测试的格局。通过自然语言驱动的测试智能体，团队能够显著降低自动化测试的技术门槛，提升测试效率，并增强测试脚本的适应性。


虽然目前仍面临快照信息丢失、元素定位稳定性等挑战，但随着技术的不断成熟和最佳实践的积累，AI 驱动的自主化 UI 回归测试有望成为软件开发的新标准。


这种技术演进将显著提升现代 Web 应用的测试效率和质量保障水平。

划线
评论
复制
发布于: 刚刚阅读数: 2
用户头像

测吧(北京)科技有限公司

关注

社区：ceshiren.com 微信：ceshiren2023 2022-08-29 加入

微信公众号：霍格沃兹测试开发 提供性能测试、自动化测试、测试开发等资料、实事更新一线互联网大厂测试岗位内推需求，共享测试行业动态及资讯，更可零距离接触众多业内大佬

评论

发布
暂无评论
Copyright © 2025, Geekbang Technology Ltd. All rights reserved. 极客邦控股（北京）有限公司 | 京 ICP 备 16027448 号 - 5京公网安备京公网安备 11010502039052号 | 产品资质
Playwright MCP项目实战：基于提示的浏览器测试与代码生成_测吧(北京)科技有限公司_InfoQ写作社区