Playwright MCP 动作录制实战:把浏览器操作直接变成可运行的测试脚本

📅 2026/8/24 12:51:12
Playwright MCP 动作录制实战:把浏览器操作直接变成可运行的测试脚本
Playwright MCP 动作录制实战把浏览器操作直接变成可运行的测试脚本【免费下载链接】mcp-playwrightPlaywright Model Context Protocol Server - Tool to automate Browsers and APIs in Claude Desktop, Cline, Cursor IDE and More 项目地址: https://gitcode.com/gh_mirrors/mc/mcp-playwright手工点一遍登录流程只需要几十秒可每次回归都要重走一遍就是纯浪费想把步骤沉淀成 Playwright 代码又得对着页面一个个敲选择器。Playwright MCP 的录制能力正好卡在这个空档上一边用 MCP 工具驱动浏览器一边把动作记进会话结束会话时直接落成测试文件全程不用手写代码。录制器到底记下了什么直白地说录制器就是个挂在会话上的动作账本每次浏览器工具被调用它就把工具名、参数和时间戳原样记一条等你结束会话再把这一串账目翻译成测试代码。目前会入账的动作包括playwright_navigate打开页面playwright_fill填写输入框playwright_click点击元素playwright_hover悬停、playwright_select下拉选择playwright_screenshot截屏playwright_expect_response/playwright_assert_response等待并校验接口响应注意一个边界只有通过 MCP 工具发起的操作才会入账你自己在浏览器里的手工点击不在记录范围内。三步走开录、操作、收尾出代码打开 MCP 客户端让 AI 调用start_codegen_session同时交代三件事生成目录、用例名前缀、要不要注释。目录会自动创建好系统返回一个会话编号先把它存住。正常驱动 AI 走目标流程即可。例如打开 Sauce Demo 登录页 → 在账号框填入standard_user→ 在密码框填入secret_sauce→ 点登录按钮。每一步都会自动记进会话你只管验收结果。调用end_codegen_session收尾。系统把记录的动作逐条翻译成代码写入指定目录浏览器随后被自动关闭。生成的测试代码长什么样产物就是标准 Playwright 用例用例名按前缀_日期拼装文件名由小写前缀加会话 ID 组成import { test, expect } from playwright/test; test(Login_2026-08-23, async ({ page, context }) { // 打开被测站点 await page.goto(https://www.saucedemo.com); // 填写账号 await page.fill(#user-name, standard_user); // 填写密码 await page.fill(#password, secret_sauce); // 提交登录 await page.click(#login-button); });验证一下是否可跑npx playwright test e2e/login_*.spec.ts生成后的代码完全可以手工再加工补断言、调等待策略、抽公共步骤改完直接并入现有 Playwright 工程。让 Playwright MCP 生成测试代码更合手气的配置开录时能调的参数一共三个各自有默认值按需覆盖即可outputPath文件落盘目录默认是工作区下的e2etestNamePrefix用例名与文件名的前缀默认Test建议按业务模块命名includeComments是否在代码里生成解释性注释默认开启。三个参数只接受对应类型传错类型会直接报错AI 报错了就回去检查传参。录歪了怎么办会话管理技巧中途拿不准记录是否完整用get_codegen_session拉回会话看一眼动作清单确认无误再收尾。发现方向录偏了用clear_codegen_session直接丢弃不产出文件换个说法重新来。一次会话对应一条完整路径。长流程拆成多条短用例分次录好过一条巨型用例难读难改。录下来的选择器未必稳生成后逐个过一遍换成更可靠的定位写法。收尾后浏览器被自动关闭属于正常清理不是故障。录下来的只是工具调用本身所以代码天然短小、可读、可改。对刚上手自动化测试的人这是把会用浏览器直接兑换成有一份能跑的脚本的最省事路径。【免费下载链接】mcp-playwrightPlaywright Model Context Protocol Server - Tool to automate Browsers and APIs in Claude Desktop, Cline, Cursor IDE and More 项目地址: https://gitcode.com/gh_mirrors/mc/mcp-playwright创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考