AI 测试框架 Agentic Playwright 开源，一行命令搭建生产级 Playwright + TypeScr

AI 测试框架 Agentic Playwright 开源，一行命令搭建生产级 Playwright + TypeScr | 前端进阶之旅

Full translation

完整中文译文

你让 AI 助手写一个 Playwright 测试，它立刻就给了。代码看起来很干净，review 也通过了，你合并了。

两天后它在 CI 里挂了。你打开文件一看：XPath 选择器、一个 waitForTimeout(5000)，还有一个 any 类型藏着一个坏掉的断言。眼熟吗？

问题从来不在 AI 本身。问题是没有给它规则。今天我把这个框架开源给所有人：Agentic Playwright 正式开放。

🎉 公告内容

Agentic Playwright 是一个生产级的 Playwright + TypeScript 脚手架，专为 AI 辅助测试自动化打造。它自带一套完整可运行的测试框架——页面对象、API 契约、数据工厂、CI——以及 AI 助手会自动拾取的 AI 规则，从第一个 prompt 开始就已就位。

一条命令搞定一切：

npm create agentic-playwright . -- --demo

零提问。它会搭建框架、安装依赖和浏览器，最后对一个真实的演示应用跑一遍冒烟测试。还没写一行代码你就看到绿灯。普通宽带下不到 5 分钟。

过去一年我一直在付费维护和扩展这个框架。8 月 13 日我将其核心部分以 MIT 协议开源，因为我希望每个用 AI 工作的 QA 工程师都能从这条基准线起步，而不是从零拼凑。

我还在频道录了一段简短公告，可以看脚手架如何从空文件夹一路跑到绿灯冒烟测试：

这只是开始。我正在 @ArchQA 上录制一套完整视频系列，走过框架的每个部分——从页面对象、API 契约到 agentic 测试本身背后的理念：测试 harness、外层循环、渐进式披露，以及对抗上下文腐烂。

🤔 这里的 "Agentic" 到底是什么意思

想象一个新工程师加入你的团队。聪明、迅速、热情。第一天你会让他直接推送到 main 分支、没有任何入职流程、没有编码规范、没有 review 清单吗？当然不会。你先给他员工手册。

你的 AI 助手就是那个新工程师，只不过它是每个 session 都全新加入的。它从不记得昨天的修改。每次 prompt 里都要重新解释你的规范，相当于把同一个新人培训上百遍。

Agentic Playwright 反转了这一点。规则手册存在于仓库本身，助手会自动加载它。三层机制让它落地：

The Constitution - CLAUDE.md 中的 MUST/SHOULD/WONTH 表格，定义安全底线：不用 XPath、不用硬等待、不用 any、严格的 Zod schema、每个测试一个 tag。

17 个 skills - 聚焦的规则文件按领域加载。AI 只在操作 pages/** 时读取页面对象规则，只在 API specs 目录里读 API 测试规则。小上下文、具体规则。

强制 hook - PreToolUse 脚本，在文件被写入之前机械地阻断禁止的模式。prompt 规则在上下文压力下可能被忽略。这个不行。

同一套系统也为 Claude Code、Cursor 和 GitHub Copilot 做了镜像，所以你的团队不需要维护三套渐行渐远的规则集。

如果你想深入了解这个方案背后的故事，我在 Agentic QA 系列里写过 agentic QA 的含义以及这个脚手架的架构。

⚖️ 同一个 Prompt，两个不同的测试

这就是规则手册带来的差异。同一个 prompt——"写一个产品搜索的测试"——给同一个 AI 助手。

// ❌ Wrong: XPath, hard waits, `any`, magic timeouts, no structure
test('search', async ({ page }) => {
    await page.goto('https://practicesoftwaretesting.com');
    await page.locator('//input[@id="search-query"]').fill('pliers');
    await page.locator('//button[@type="submit"]').click();
    await page.waitForTimeout(5000);
    const cards: any = await page.$$('.card');
    expect(cards.length > 0).toBe(true);
});

用 Agentic Playwright 写出来是这样的：

// ✅ Correct: fixtures, steps, web-first assertions
import { expect, test } from '../../../fixtures/pom/test-options';

test(
    'should show only matching products when searching',
    { tag: '@regression' },
    async ({ homePage }) => {
        await test.step('GIVEN the user is on the home page', async () => {
            await homePage.open();
        });

        await test.step('WHEN the user searches for "pliers"', async () => {
            await homePage.searchFor('pliers');
        });

        await test.step('THEN every result matches the search term', async () => {
            await expect(homePage.searchCaption).toContainText('pliers');
            await expect(homePage.productNames.first()).toContainText('Pliers');
        });
    }
);

依赖注入的页面对象、Given/When/Then 步骤、Web First 断言、没有硬等待。没有人 review 它进入正形。助手第一次就输出了正确结果，因为规则已经在那里了。

脚手架不是一个空配置文件文件夹。它是一个运行中的框架，每个架构决策都已做好：

每个部分都遵循同一个 Constitution。示例文件展示了模式，README 引导你一步一步地用真实应用替换它们。

🚀 在接下来五分钟内体验

从一个空目录开始：

npm create agentic-playwright . -- --demo

然后用 Claude Code、Cursor 或带 Copilot 的 VS Code 打开项目，让它写一个测试。看它返回什么。

想用自己的应用而不是演示应用？运行 bare 变体，然后把环境文件指向你的 URL：

npm create agentic-playwright . -- --bare

如果遇到问题，在仓库里开 issue。star 能帮助其他工程师发现它，issue 能帮我把它做得更好。

🔓 哪些免费，哪些是 Pro

开源仓库是完整可运行的脚手架。没有功能残缺、没有试用期。你得到的是完整框架、包含全部 17 个 skills 的 Constitution（支持 Claude Code、Cursor 和 Copilot）、PR review skill、基础写时强制 hook，以及防止规则系统腐化的 lint gates。

那 Agentic Playwright Pro 增加了什么？README 里有一句话说得最好：规则是建议，强制执行是保证。

免费脚手架告诉你的 AI 什么是好的测试。Pro 让它无法交付其他东西：

完整的强制 hook 套件，包含写时守卫加上重构和验证提醒

针对 Constitution 中每一条 WON'T 规则的自定义 AST lint 规则

在所有三种 AI 工具间生成的、始终同步的规则树，无需手动镜像

drift、parity 和 canary gates，一旦规则与镜像出现分歧就触发 CI 失败

自动化的 skill 评估 CI，持续重新测试规则本身

每一次新版本优先体验，加上直接向我提问的渠道

如果你是一个工程师在探索 agentic 测试，从开源版本开始。如果你是团队在标准化 AI 使用、需要的是保证而非指南，Pro 就是为你打造的。

🙏🏻 感谢阅读！

搭起一个项目、把规则手册交给 AI，告诉我它写出了什么。@ArchQA 上的视频系列会深入讲解框架背后的每个概念，所以如果你想了解内部原理，订阅那里。