企业官网建设流程全解析

1. 为什么我最终把 Playwright 脚本交给 Trae 来写

自动化测试这件事，写过的人都懂：用例逻辑本身不复杂，真正耗时间的是把「点这里、填那里、断言这个文案」翻译成 Playwright 的 API 调用。一个注册流程五六个场景，手写下来少说半小时，还得反复跑、反复调选择器。Trae 这类 AI IDE 的价值就在于，你把自然语言描述的测试场景丢进去，它直接吐出一份能跑的 Playwright 脚本骨架，你只需要补环境、改选择器、跑验证。

这篇聚焦的就是这条链路：在 Trae IDE 里借助 AI 生成 Playwright 自动化测试脚本，从环境准备、项目骨架、可复制的配置片段，到脚本生成后的验证动作，帮你把第一个用例真正跑通。适合已经会一点 Playwright、但想用 AI 提速的测试同学，也适合刚接触自动化、想找个能跟做的完整流程的开发者。下面所有配置和命令我都按能直接复制粘贴的标准来写，遇到坑的地方我会单独标出来。

2. 前置准备：TaoToken 接入与 Trae 环境打通

Trae 里的 AI 能力要稳定输出 Playwright 代码，背后得有一个靠谱的模型调用入口。我这边统一用 TaoToken 来做模型接入，它的 API 地址是https://taotoken.net/api，官网在https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=。你需要在控制台创建一个 API Key，然后把它填到 Trae 的模型配置里。

具体操作路径是这样：先打开控制台页面https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_content=console&utm_campaign=rewrite，在 API Keys 管理里新建一个 Key，复制出来。接着在 Trae 的设置里找到模型服务配置，把 Base URL 填成https://taotoken.net/api，模型名按你开通的填，Key 粘贴进去保存。如果你更习惯用命令行工具做编码，也可以走 Coding Plan 那条线，入口在https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite，适合长期跑 Agent 类任务。

注意：API Key 只创建一次就够，别到处复制粘贴到聊天记录里。填进 Trae 之后建议本地再留一份到环境变量，后面写脚本时可能要用。

环境这块，Node.js 建议 18 以上，Playwright 官方对 Node 版本有要求，太低会装不上浏览器依赖。装完 Node 后，Trae 里新建一个空项目目录，终端执行初始化：

mkdir trae-playwright-demo && cd trae-playwright-demo npm init -y npm install -D @playwright/test npx playwright install

npx playwright install这一步会下载 Chromium、Firefox、WebKit 三个浏览器内核，网络慢的话耐心等，或者只装 Chromium：npx playwright install chromium。装完之后你的项目里应该能看到node_modules和package.json，这是后面生成脚本的落脚点。

3. 可复制的 Trae 配置与 Playwright 项目骨架

Trae 生成脚本之前，得先让它知道你的项目结构和技术栈。我一般会在项目根目录放一个playwright.config.ts，把基础配置写死，这样 AI 生成的脚本能直接复用，不用每次重新交代环境。下面这份配置可以直接复制：

import { defineConfig, devices } from '@playwright/test'; export default defineConfig({ testDir: './tests', timeout: 30 * 1000, expect: { timeout: 5000 }, fullyParallel: true, retries: 1, reporter: [['html', { open: 'never' }], ['list']], use: { baseURL: 'https://192.168.1.112', headless: true, viewport: { width: 1280, height: 720 }, screenshot: 'only-on-failure', trace: 'retain-on-failure', ignoreHTTPSErrors: true, }, projects: [ { name: 'chromium', use: { ...devices['Desktop Chrome'] } }, ], });

这里有几个点值得说。baseURL设成你被测系统的地址，脚本里就能用相对路径，比如page.goto('/register')。ignoreHTTPSErrors: true是给自签名证书的内网环境用的，不然 Playwright 会因为证书问题直接报错。trace: 'retain-on-failure'很实用，用例失败时会留下完整操作轨迹，排查选择器问题特别方便。

项目骨架我习惯这样分：

trae-playwright-demo/ ├── tests/ │ ├── register.spec.ts │ └── fixtures/ │ └── auth.ts ├── playwright.config.ts ├── package.json └── tsconfig.json

tests放用例，fixtures放登录态复用之类的公共逻辑。Trae 生成脚本时，你可以在对话里直接说「按 tests 目录下的结构生成 register.spec.ts」，它会自动对齐路径。

4. 用自然语言让 Trae 生成注册流程测试脚本

配置就绪后，打开 Trae 的 AI 对话面板，把测试场景用中文描述清楚。描述越具体，生成的脚本越接近能跑的状态。我拿用户注册功能举例，把需求拆成几个场景丢进去：

测试用户注册功能，访问 /register 页面，生成 Playwright 脚本： 场景1：不填任何信息直接点注册，断言提示"用户名不能为空" 场景2：用户名 cs001、手机号 13012341234、密码 123456，点注册，断言提示"密码需包含字母+数字+特殊字符" 场景3：密码改为 Cs789@，其余不变，点注册，断言跳转到登录页 场景4：用已注册手机号 13012341234 再次注册，断言提示"该手机号已注册" 使用 @playwright/test，选择器优先用 getByRole 和 getByLabel

Trae 会基于这些描述生成一份register.spec.ts。生成结果大概长这样，我做了整理：

import { test, expect } from '@playwright/test'; test.describe('用户注册功能', () => { test.beforeEach(async ({ page }) => { await page.goto('/register'); }); test('场景1：必填项校验', async ({ page }) => { await page.getByRole('button', { name: '注册' }).click(); await expect(page.getByText('用户名不能为空')).toBeVisible(); }); test('场景2：密码格式校验', async ({ page }) => { await page.getByLabel('用户名').fill('cs001'); await page.getByLabel('手机号').fill('13012341234'); await page.getByLabel('密码').fill('123456'); await page.getByRole('button', { name: '注册' }).click(); await expect(page.getByText('密码需包含字母+数字+特殊字符')).toBeVisible(); }); test('场景3：注册成功跳转', async ({ page }) => { await page.getByLabel('用户名').fill('cs001'); await page.getByLabel('手机号').fill('13012341234'); await page.getByLabel('密码').fill('Cs789@'); await page.getByRole('button', { name: '注册' }).click(); await expect(page).toHaveURL(/login/); }); test('场景4：重复注册校验', async ({ page }) => { await page.getByLabel('用户名').fill('cs001'); await page.getByLabel('手机号').fill('13012341234'); await page.getByLabel('密码').fill('Cs789@'); await page.getByRole('button', { name: '注册' }).click(); await expect(page.getByText('该手机号已注册')).toBeVisible(); }); });

生成之后别急着跑，先做两件事。第一，检查选择器。AI 默认用的getByLabel依赖表单的 label 关联，如果你的页面 label 没写for属性，这个选择器会失效，得换成getByPlaceholder或locator('input[name="username"]')。第二，确认断言文案和实际提示完全一致，中文标点、空格都算差异。

5. 跑通验证：从命令行到 HTML 报告

脚本落地后，验证动作分三步走。第一步先跑单个文件，看基础流程通不通：

npx playwright test tests/register.spec.ts --project=chromium

如果用例全绿，终端会输出类似4 passed的结果。有失败的话，Playwright 会告诉你哪个断言挂了、实际值是什么。第二步看 HTML 报告，把失败用例的截图和 trace 调出来：

npx playwright show-report

报告里点开失败用例，能看到每一步的操作截图和 DOM 快照，选择器写错的话一眼就能定位。第三步，如果场景3的跳转断言一直失败，很可能是注册接口有异步延迟，toHaveURL默认等 5 秒，不够的话在配置里把expect.timeout调大，或者断言前加await page.waitForURL(/login/)。

我实测下来，四个场景里最容易挂的是场景4的重复注册，因为第二次注册依赖第一次的数据已经落库。如果你的测试环境每次跑之前会清库，这个用例就得改成先调接口造数据，或者在beforeEach里做一次注册。Trae 生成脚本时不会自动处理这种数据依赖，需要你手动补 fixture。

6. 本篇常见报错与排查清单

报错一：browserType.launch: Executable doesn't exist这是浏览器内核没装全。执行npx playwright install重新下载，或者指定npx playwright install chromium只装一个。内网环境如果下载超时，可以配PLAYWRIGHT_DOWNLOAD_HOST指向内部镜像。

报错二：Error: locator.click: Target closed多半是页面还没加载完就点了按钮。检查page.goto后面有没有等domcontentloaded，或者把点击操作包在await page.waitForSelector之后。Playwright 的自动等待能覆盖大部分场景，但动态渲染的 SPA 还是得手动加等待。

报错三：断言文案对不上，提示Expected string: "xxx" Received string: "yyy"中文提示里的全角冒号、空格、换行都可能导致不匹配。用getByText时加{ exact: false }做模糊匹配，或者直接断言关键片段。

报错四：net::ERR_CERT_AUTHORITY_INVALID内网自签名证书导致。配置里加ignoreHTTPSErrors: true就能绕过，前面给的配置已经带了这一项。

报错五：Trae 生成的脚本里选择器全是page.locator('.btn-primary')这种 class说明你在描述场景时没指定选择器策略。下次在指令里明确写「优先用 getByRole、getByLabel、getByPlaceholder」，AI 会按语义化选择器生成，稳定性高很多。

排查完这些，你的第一个 Playwright 用例基本就能稳定跑起来了。后续要扩展的话，把登录态抽成 fixture 复用，用storageState保存 cookie，能省掉每个用例都重新登录的时间。模型对话入口在https://taotoken.net/models?utm_source=taotoken_aicg_blog_end&utm_content=models&utm_campaign=rewrite，遇到脚本逻辑不确定的地方可以直接问；接入文档在https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite，配置参数对不上时翻一下；API Keys 管理在https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite，Key 丢了或者要换的时候去那里重建。