手把手教你用 AI + Playwright 写 UI 自动化测试

你有没有经历过这种崩溃时刻——

花了两三天写好一批 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 生成的测试用例的那一刻，真的挺爽的。（别问我怎么知道的）。