夜雨聆风花了两三天写好一批 UI 自动化用例，跑得妥妥的，心里还挺得意。然后前端突然过来说"我昨晚改了一下布局"。你一跑，红了一片。打开报错，全是 ElementNotFound，CSS 选择器挨个失效。
然后你就开始一个一个找元素，重新定位，重新调试，重新跑……
（我第一次遇到这个的时候，心态是真的崩了。）
这不是你技术不行，这是传统 UI 自动化的老问题：定位器和页面绑死了，页面一变，用例就全挂。今天分享的这套方案，就是专门冲这个问题来的。
Playwright MCP 是什么，先搞清楚
先别急着装环境，把概念搞明白，不然后面会一头雾水。
Playwright MCP 是一个 MCP 服务器（Model Context Protocol）。说白了，就是给 AI（比如 VS Code 里的 Copilot）装了一双眼睛，让它能"读懂"你的网页——但不是靠截图，而是靠读页面的无障碍树（Accessibility Tree）。
无障碍树你可以这样理解：浏览器会把页面上每个元素"翻译"成一份结构化的说明书：这个是按钮、名字叫"登录"，那个是输入框、标签是"用户名"。AI 拿到这份说明书，就知道该怎么操作。
所以它最终帮你生成的代码长这样：
python page.get_by_role("button", name="登录").click()page.get_by_label("用户名").fill("test@example.com")
你看，没有任何 CSS 路径，没有 XPath。它认的是"名字叫登录的按钮"，不认具体样式。前端改了布局、调了间距，只要按钮还叫"登录"，这行代码就不会挂。
这就是它解决脆弱定位器问题的底层逻辑。
环境搭建，从零开始
前提条件确认
先确认本地有这几样东西：
- Python 3.8+（终端跑
python --version看一眼） - VS Code
- VS Code 里装了 GitHub Copilot 扩展（需要订阅）
- Node.js 18+（
node --version确认，装 MCP 用）
初始化 Playwright 项目
找个空文件夹，VS Code 打开，终端里跑：
bash # 创建虚拟环境python -m venv .venv# 激活（macOS/Linux）source .venv/bin/activate# Windows 用这个.venv\Scripts\activate# 装 Playwrightpip install playwright pytest-playwright# 下载 Chromium（第一次要等一会儿）playwright install chromium
装完验证一下：
bash playwright --version
能输出版本号就行。
安装 Playwright MCP 服务器
bash npm install -g @playwright/mcp@latest
在 VS Code 里配 MCP
项目根目录新建 .vscode/mcp.json，写入：
json {"servers": {"playwright": {"command": "npx","args": ["@playwright/mcp@latest"]}}}
保存，VS Code 右下角会弹出提示检测到 MCP 配置，点启用。
然后打开 Copilot Chat（侧边栏聊天图标），下拉切换到 Agent 模式，工具列表里能看到 playwright 相关工具，说明接通了。
实战：写一个登录测试用例
环境好了，来干真的。用一个经典的登录场景完整走一遍。
让 AI 帮你分析页面
Copilot Chat 切到 Agent 模式，输入：
text 帮我用 playwright 打开 https://practicetestautomation.com/practice-test-login/分析页面结构，写一个 Python 测试用例：1. 输入用户名 student2. 输入密码 Password1233. 点击登录按钮4. 断言登录成功（页面出现"Congratulations"）
Copilot 会通过 MCP 自动打开这个页面，读无障碍树，然后生成代码：
python import pytestfrom playwright.sync_api import Page, expectdef test_login_success(page: Page):page.goto("https://practicetestautomation.com/practice-test-login/")page.get_by_label("Username").fill("student")page.get_by_label("Password").fill("Password123")page.get_by_role("button", name="Submit").click()expect(page.get_by_text("Congratulations")).to_be_visible()
你不用手动去找任何元素，AI 直接给你精准的语义化定位器。
跑起来
把代码保存为 test_login.py，然后：
bash pytest test_login.py -v
看到 PASSED 就对了。想看浏览器操作过程：
bash pytest test_login.py -v --headed
顺手加个失败场景
继续跟 Copilot 说：
text 再加一个用例：输入错误密码 WrongPassword，断言页面显示错误提示
生成：
python def test_login_failed(page: Page):page.goto("https://practicetestautomation.com/practice-test-login/")page.get_by_label("Username").fill("student")page.get_by_label("Password").fill("WrongPassword")page.get_by_role("button", name="Submit").click()expect(page.get_by_text("Your password is invalid!")).to_be_visible()
两个用例一起跑，全绿，收工。
Trace 开起来，失败不抓瞎
测试挂了不知道哪步出问题？开 Trace 就对了，每一步都有截图和 DOM 快照，比你自己打 print 方便多了。
bash pytest test_login.py -v --tracing=on
跑完在 test-results/ 目录生成了 trace 文件，用下面命令打开可视化界面：
bash playwright show-trace test-results/test_login_py-test_login_success/trace.zip
会弹出一个操作时间线，每一步的截图、网络请求、控制台日志都在，排查失败原因非常直观。
进阶：批量生成用例
一个个"聊"出用例太慢？换个问法：
text 针对这个登录页，帮我列出所有需要覆盖的测试场景（先列清单，不用写代码）
AI 给你列出：正确密码、错误密码、错误用户名、空用户名、空密码……确认后再说：
text 帮我把这些场景全部写成 pytest 参数化用例
python @pytest.mark.parametrize("username, password, expected_text", [("student", "Password123", "Congratulations"),("student", "WrongPassword", "Your password is invalid!"),("wronguser", "Password123", "Your username is invalid!"),("", "Password123", "Your username is invalid!"),("student", "", "Your password is invalid!"),])def test_login_scenarios(page: Page, username, password, expected_text):page.goto("https://practicetestautomation.com/practice-test-login/")if username:page.get_by_label("Username").fill(username)if password:page.get_by_label("Password").fill(password)page.get_by_role("button", name="Submit").click()expect(page.get_by_text(expected_text)).to_be_visible()
五个场景，一个函数，一把跑完。
遇到问题怎么办
定位器找不到元素？ 跟 Copilot 说"重新打开这个页面，告诉我这个按钮的正确定位方式"，让它重新分析一次，通常能给出正确答案。
页面需要登录后才能测试？ 先用 codegen 保存登录状态：
bash playwright codegen --save-storage=auth.json https://your-app.com
登录完关闭浏览器，后续测试配置里加上：
python @pytest.fixture(scope="session")def browser_context_args(browser_context_args):return {**browser_context_args, "storage_state": "auth.json"}
一次登录，后续用例复用，不用每次都重新走登录流程。
MCP 连接不上？Cmd+Shift+P（Windows 是 Ctrl+Shift+P），搜"MCP: Show Output"，看服务器日志，报错信息都在里面。
说在最后
这套方案的本质就是：AI 负责理解页面、生成代码，你负责审查逻辑、把控质量。
你不再需要手动扒 CSS 选择器，也不用记 XPath 怎么写。找元素这种重复劳动交出去，精力放在"测什么"和"怎么设计测试策略"上——这才是测试工程师真正值钱的部分。
现在就可以动手：找你们系统的一个登录页，按上面步骤走一遍。拉通环境可能要一个多小时，但跑通第一个 AI 生成的测试用例的那一刻，真的挺爽的。（别问我怎么知道的）。
