1. 为什么 Playwright Claude Code 值得你花一个下午跑通如果你正在做 Web 前端或全栈项目大概率听过 E2E 测试这个词也大概率被 Selenium 那套等待、驱动、元素定位折磨过。Playwright 是微软开源的浏览器自动化框架一套 API 同时驱动 Chromium、Firefox、WebKit自带自动等待、网络拦截、Trace 回放写起来比 Selenium 顺手很多。Claude Code 是 Anthropic 推出的命令行编程助手它和普通聊天式 AI 最大的区别是能读取你项目里的真实文件结构、依赖版本、目录约定再基于这些上下文生成代码。把这两个东西放一起能解决一个很具体的痛点写 E2E 测试最烦的不是断言逻辑而是样板代码——打开页面、定位元素、处理等待、组织 Page Object。这些恰好是 AI 有上下文时最擅长补全的部分。而 Playwright 的语义化 APIgetByRole、getByTestId、expect(locator).toBeVisible()又让生成出来的代码可读性足够高你 Review 起来不费劲。这篇文章面向的是需要快速落地 E2E 测试的开发者尤其是校招测开方向、想拿一个完整项目讲清楚我怎么用 AI 提效的同学。我会从零开始把 Claude Code 的配置、Playwright 的脚本模板、通过 TaoToken 统一通道接入的验证步骤全部走一遍最后给你一份能直接抄的排错清单。全程不需要你已经有测试框架基础跟着敲就行。需要先说明一点AI 生成测试代码的质量取决于你给它的约束有多清楚。指望一句帮我写个登录测试就拿到能跑的脚本基本会失望。所以下面的流程里我会把怎么让 AI 理解项目当成第一步重点讲这一步做扎实后面省的时间是成倍的。2. 前置准备TaoToken 统一 Key 与 Claude Code 接入配置在写第一行测试之前先把工具链的通道打通。Claude Code 默认走 Anthropic 官方接口但很多同学会遇到额度、网络、多模型切换的问题。TaoToken 提供的是一个统一的 API 通道你可以在一个 Key 下调用包括 Claude 系列在内的多种模型配置方式兼容 Anthropic 的接口协议所以 Claude Code 可以直接对接。先注册并拿到 Key。打开官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 完成账号注册后进入控制台在 API Keys 页面创建一个新 Key。这个 Key 就是后面所有配置里要填的凭证格式通常是一串以sk-开头的字符串。创建后立刻复制保存页面刷新后不一定能再看到完整值。拿到 Key 之后进入控制台确认你要用的模型 ID。TaoToken 的模型列表里会标注每个模型的调用名称比如 Claude 系列会有对应的 model id。这个 ID 后面要写进 Claude Code 的配置里写错了会直接报模型不存在。接下来是 Claude Code 的安装。如果你还没装用 npm 全局安装即可npm install -g anthropic-ai/claude-code安装完成后Claude Code 会读取环境变量或配置文件来决定请求发往哪里。我们要做的是把 Base URL 指向 TaoToken 的 API 地址把 Key 换成刚创建的。TaoToken 的 API 根地址是 https://taotoken.net/api 注意这个地址不带任何查询参数配置时直接用它作为 base。配置有两种方式选一种就行。第一种是环境变量适合临时切换export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_API_KEYsk-你的Key第二种是写进 Claude Code 的配置文件适合长期使用。配置文件一般位于用户目录下的.claude文件夹具体路径可以用claude config相关命令查看。写入的内容包括 base_url、api_key 和默认模型。这里要提醒一句不同版本的 Claude Code 配置字段名可能略有差异以你本地claude --help或官方文档为准但核心三件套永远是 Base URL、Key、Model ID。配置完成后先在项目根目录跑一次claude命令看它能不能正常启动并识别到模型。如果启动时报 401说明 Key 没生效如果报连接失败检查 Base URL 是否写成了带路径的形式。这一步通了再往下走 Playwright。Playwright 的安装更简单在项目里执行npm init playwrightlatest这个命令会引导你选择 TypeScript 还是 JavaScript、测试目录放哪、要不要装浏览器。建议选 TypeScript因为类型提示能让 AI 生成的代码更准确。安装过程会自动下载 Chromium 等浏览器二进制网络慢的话耐心等一会。到这里Claude Code 和 Playwright 都就位了。下一节开始写真正能跑的配置和脚本。3. 可复制配置CLAUDE.md、settings 与 Playwright 脚本模板这一节是全文最核心的部分所有片段都可以直接复制到你的项目里改。先说 Claude Code 的配置再说 Playwright 的脚本结构。Claude Code 读取项目上下文的关键是根目录下的CLAUDE.md文件。这个文件相当于给 AI 的一份项目说明书它每次生成代码前都会读。很多人跳过这一步直接让 AI 写脚本结果生成的代码用了错误的目录、错误的断言风格返工成本很高。我的做法是把项目约束写清楚## 项目信息 - 前端React TypeScript Vite - 测试框架Playwright - 测试目录tests/e2e/ - Base URLhttp://localhost:3000 - 包管理器pnpm ## 测试规范 - 使用 Page Object 模式页面对象放 tests/e2e/pages/ - 优先使用>{ model: claude-sonnet-4-20250514, env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: sk-你的Key }, permissions: { allow: [Read, Write, Bash(npm run test:*)], deny: [Bash(rm:*)] } }这里的 model 字段填你在 TaoToken 控制台看到的模型 IDenv 里放 Base URL 和 Keypermissions 控制 Claude Code 能执行哪些操作。把Bash(npm run test:*)加进 allow它就能帮你跑测试并读报错这个后面排错时会很有用。注意 Key 不要提交到 Git把 settings.json 加进 .gitignore或者用环境变量注入。然后是 Playwright 的脚本模板。先建一个 Page Object把登录页的操作封装起来// tests/e2e/pages/LoginPage.ts import { Page, Locator, expect } from playwright/test; export class LoginPage { readonly page: Page; readonly usernameInput: Locator; readonly passwordInput: Locator; readonly submitButton: Locator; readonly errorMessage: Locator; constructor(page: Page) { this.page page; this.usernameInput page.getByTestId(username); this.passwordInput page.getByTestId(password); this.submitButton page.getByTestId(login-submit); this.errorMessage page.getByTestId(login-error); } async goto() { await this.page.goto(/login); } async login(username: string, password: string) { await this.usernameInput.fill(username); await this.passwordInput.fill(password); await this.submitButton.click(); } async expectError(text: string) { await expect(this.errorMessage).toBeVisible(); await expect(this.errorMessage).toHaveText(text); } }再写测试用例覆盖正常登录和异常场景// tests/e2e/login.spec.ts import { test, expect } from playwright/test; import { LoginPage } from ./pages/LoginPage; test.describe(登录流程, () { let loginPage: LoginPage; test.beforeEach(async ({ page }) { loginPage new LoginPage(page); await loginPage.goto(); }); test(正确账号密码可以登录成功, async ({ page }) { await loginPage.login(testuser, correct-password); await expect(page).toHaveURL(/\/dashboard/); await expect(page.getByTestId(welcome)).toBeVisible(); }); test(密码错误时展示错误提示, async () { await loginPage.login(testuser, wrong-password); await loginPage.expectError(用户名或密码错误); }); test(空提交时阻止登录, async () { await loginPage.login(, ); await expect(loginPage.errorMessage).toBeVisible(); }); });最后是 Playwright 的配置文件把 baseURL 和浏览器参数固定下来// playwright.config.ts import { defineConfig, devices } from playwright/test; export default defineConfig({ testDir: ./tests/e2e, timeout: 30000, retries: process.env.CI ? 2 : 0, use: { baseURL: http://localhost:3000, trace: on-first-retry, screenshot: only-on-failure, }, projects: [ { name: chromium, use: { ...devices[Desktop Chrome] } }, ], });这套配置下来你的项目就有了完整的测试骨架。把 CLAUDE.md、settings.json、Page Object、spec 文件都放好再让 Claude Code 基于这个结构补用例生成质量会明显不一样。4. 验证请求跑通第一个测试用例并确认通道生效配置写完了现在要验证两件事Claude Code 能不能通过 TaoToken 正常生成代码Playwright 能不能真的把测试跑起来。这两步分开验证出问题好定位。先验证 Claude Code 的通道。在项目根目录打开终端输入claude进入交互模式然后问一个和项目相关的问题比如读一下 tests/e2e/login.spec.ts告诉我这个测试覆盖了哪些场景。如果它能正确读取文件并回答说明 Base URL 和 Key 都生效了。如果报 401回到上一节检查 Key 是否复制完整如果报模型不存在检查 settings.json 里的 model 字段是否和控制台一致。通道确认后让 Claude Code 帮你补一个测试用例比如给 LoginPage 加一个记住我勾选框的操作并写一个测试验证勾选后刷新页面仍然保持登录态。观察它生成的代码是否用了>npx playwright test tests/e2e/login.spec.ts --headed--headed参数会让浏览器可见方便你观察每一步操作。第一次跑大概率会有失败这很正常。重点看报错信息如果是选择器找不到说明>Running 3 tests using 1 worker ✓ 登录流程 › 正确账号密码可以登录成功 (2.1s) ✓ 登录流程 › 密码错误时展示错误提示 (1.8s) ✓ 登录流程 › 空提交时阻止登录 (1.5s) 3 passed (5.4s)看到 3 passed说明从配置到脚本的整条链路通了。这时候你可以把报错信息直接丢给 Claude Code让它参与修复。比如把 Playwright 的失败输出粘贴进去问这个选择器超时是什么原因帮我改一下 LoginPage。它读到项目文件后通常能给出针对性的修改而不是泛泛而谈。还有一个验证技巧用 Playwright 的 codegen 生成初始选择器。执行npx playwright codegen http://localhost:3000/login它会打开浏览器并记录你的操作自动生成定位代码。你可以把生成的代码交给 Claude Code让它重构成 Page Object 风格。这样既保证了选择器准确又保持了代码结构统一。通道和脚本都验证通过后建议把测试接入 CI。在 GitHub Actions 里加一个 workflow每次 push 自动跑 E2Ename: e2e on: [push, pull_request] jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkoutv4 - uses: pnpm/action-setupv4 - run: pnpm install - run: npx playwright install --with-deps - run: pnpm dev - run: npx playwright testCI 里的测试不追求 100% 稳定flaky 是常态。目标是让核心流程每次都能过边缘用例允许重试。Playwright 配置里的retries就是干这个的。5. 常见报错排查401、local proxy failed、reading choices 与 OAuth这一节把你会真实撞到的报错列出来对照着改。每个报错我都写清楚现象、原因和修法。401 Unauthorized。现象是 Claude Code 启动或请求时直接返回 401。原因通常是 Key 没生效。检查顺序第一确认ANTHROPIC_API_KEY环境变量或 settings.json 里的 Key 是完整的没有多余空格第二确认 Key 没有过期或被删除回 TaoToken 控制台看一眼第三确认 Base URL 写的是 https://taotoken.net/api 没有多写/v1之类的路径。如果环境变量和配置文件同时存在环境变量优先级更高检查是不是旧的 Key 覆盖了新的。local proxy failed / connection refused。现象是请求发不出去提示本地代理失败或连接被拒。这通常是环境里残留了代理设置或者 Base URL 指向了本地端口。检查HTTP_PROXY、HTTPS_PROXY环境变量是否被设置成了本地地址如果有就 unset 掉。同时确认 Base URL 是公网地址而不是http://localhost:xxxx。Claude Code 的配置里如果混入了旧的代理配置也会导致这个问题把 settings.json 里多余的 env 字段清掉。reading choices of undefined。这个报错一般出现在用 OpenAI 兼容格式调用时响应结构不符合预期。原因是模型 ID 写错了或者请求发到了不支持该模型的端点。回 TaoToken 控制台核对模型 ID 的准确拼写注意大小写和版本号。另外确认你用的接口协议和模型匹配Claude 系列走 Anthropic 协议不要混用 OpenAI 的请求格式。OAuth 相关报错。现象是提示需要登录或 token 无效。Claude Code 某些版本会尝试 OAuth 流程如果你用的是 API Key 模式需要在配置里明确指定认证方式避免它走 OAuth。检查 settings.json 里是否有auth相关字段把它设成 api_key 模式。如果还是报错用claude config命令查看当前认证状态必要时重置配置重新填 Key。Playwright 选择器超时。现象是locator.click: Timeout 30000ms exceeded。原因通常是元素没渲染出来或者选择器写错了。先用--headed模式跑肉眼确认元素是否存在。如果元素在但定位不到检查 data-testid 是否拼写一致。如果是动态加载的元素用await expect(locator).toBeVisible()替代固定等待Playwright 会自动重试直到超时。测试之间互相污染。现象是单个跑能过一起跑就失败。原因是用例之间有隐式依赖比如前一个用例登录了后一个用例默认已登录。修法是每个用例用beforeEach重置状态或者在测试里显式登出。Playwright 默认每个测试用独立的 browser context但如果你在测试间共享了 storageState就要注意清理。CI 里失败本地能过。现象是本地全绿CI 上挂。常见原因是 CI 环境没有启动开发服务器或者浏览器依赖没装。确认 workflow 里有npx playwright install --with-deps并且测试前开发服务器已经起来。可以用wait-on之类的工具等端口就绪再跑测试。把这份清单存下来遇到报错先对照大部分问题五分钟内能定位。剩下的交给 Claude Code把报错原文贴给它让它读项目文件后给修改建议比你自己翻文档快。6. 把这条链路用起来从单用例到可持续的测试体系跑通第一个用例只是起点。真正有价值的是把这条链路变成日常开发的一部分。我的做法是每加一个新功能先让 Claude Code 读一遍相关组件代码生成对应的 Page Object 和测试骨架然后我补断言和边界场景。这样写测试的成本从从零手写降到改 AI 的初稿一个中等复杂度的页面半小时能出一版可跑的用例。关于效率说个实在的数字。登录这种简单流程以前手写加调试大概两三个小时现在生成加 Review 四十分钟左右。完整页面的 E2E以前一两天现在几个小时。但这不是让你少思考测试场景怎么设计、断言覆盖到什么程度、哪些边界必须测这些判断还是得你自己做。AI 省掉的是重复编码和查 API 的时间。如果你想把这条链路用得更顺建议把常用的 Playwright 片段沉淀成项目里的模板文件让 Claude Code 每次生成时参考。比如把 Page Object 的标准写法、断言的常用组合、测试数据的组织方式都放进 CLAUDE.md 或单独的模板目录。上下文越具体生成质量越稳定。最后给一个可以直接开始的行动项挑你项目里最核心的一个流程比如登录或下单按这篇文章的步骤走一遍。先写 CLAUDE.md再配 TaoToken 的 Key 和 Base URL然后用 codegen 抓选择器让 Claude Code 重构成 Page Object跑通后接进 CI。整个过程一个下午够了。跑通之后你会发现E2E 测试不再是负担而是你改代码时的安全网。需要 Key 和接入文档的话从 API Keys 页面创建接入细节看文档页想先验证模型对话效果用模型对话页面试几句如果打算长期用 Claude Code 做编码和 Agent 任务Coding Plan 会更划算。通道配好剩下的就是动手写第一个用例了。