一套能直接复用的 Playwright 提示词大全
这篇文章适合：
- 刚开始接触 Playwright 的前端 / 测试 / 全栈开发
- 想配合 AI / Codex / ChatGPT 快速生成自动化脚本的人
- 手里有后台系统、管理端、ERP、HR SaaS、内部 OA，需要批量补 UI 自动化的人
很多人第一次用 Playwright，最大的问题不是"不会写 API"，而是：
- 不知道该测什么场景
- 不知道怎么把需求描述清楚，让 AI 直接生成可运行脚本
- 生成出来的代码太虚，只给思路，不给完整代码
所以我把常见的企业后台自动化场景，整理成了一套 可直接喂给 AI 的 Playwright 提示词模板 。
你只要替换几个占位符，就可以快速生成脚本。
一、这套提示词适合什么项目
这套模板特别适合下面这些系统：
- 管理后台
- CRM / ERP / HR SaaS
- 财务结算系统
- 订单管理系统
- 内部工作台 / OA / 审批系统
- 数据报表系统
- 列表 + 表单 + 弹窗类页面
- 有登录态、权限、菜单、分页、查询、导入导出的系统
二、统一占位符说明
先约定一套统一变量，后面所有提示词都能复用。
{{BASE_URL}} 网站地址
{{LOGIN_PATH}} 登录页路径
{{PAGE_PATH}} 业务页面路径
{{PAGE_NAME}} 页面名称
{{USERNAME_ENV}} 用户名环境变量名
{{PASSWORD_ENV}} 密码环境变量名
{{USERNAME_INPUT_HINT}} 用户名输入框提示词
{{PASSWORD_INPUT_HINT}} 密码输入框提示词
{{LOGIN_BUTTON_TEXT}} 登录按钮文字
{{BUTTON_TEXT}} 按钮文字
{{KEYWORD}} 查询关键字
{{SEARCH_INPUT_HINT}} 查询输入框提示词
{{SEARCH_BUTTON_TEXT}} 查询按钮文字
{{FORM_FIELD_NAME}} 表单字段名
{{SUCCESS_TEXT}} 成功提示语
{{CREATE_BUTTON_TEXT}} 新增按钮文字
{{DIALOG_TITLE}} 弹窗标题
{{SUBMIT_BUTTON_TEXT}} 提交按钮文字
{{DETAIL_TARGET_TEXT}} 详情目标文本
{{EDIT_BUTTON_TEXT}} 编辑按钮文字
{{DELETE_BUTTON_TEXT}} 删除按钮文字
{{CONFIRM_BUTTON_TEXT}} 确认按钮文字
{{UPLOAD_BUTTON_TEXT}} 上传按钮文字
{{EXPORT_BUTTON_TEXT}} 导出按钮文字
{{IMPORT_BUTTON_TEXT}} 导入按钮文字
{{MENU_TEXT}} 菜单名称
{{ROLE_NAME}} 角色名称
{{ERROR_TEXT}} 错误提示语三、为什么要这样写提示词
很多人给 AI 的需求是这样的：
帮我写一个 Playwright 自动化测试。
这种提示词太空了，AI 只能给你"伪代码"。
真正高质量的提示词，至少要明确：
- 用什么语言：JavaScript / TypeScript
- 是否要求可直接运行
- 是否保留现有项目结构
- 是否需要中文注释
- 是否要兼容新标签页 / 弹窗 / 抽屉
- 是否从
.env读取登录信息 - 选择器优先级怎么定
- 需要哪些断言
- 无法访问真实网站时怎么处理
所以你后面会看到，我的模板都强调几件事：
- 必须直接输出完整代码
- 必须带中文注释
- 必须优先用稳定选择器
- 必须保留 TODO 占位
- 必须加基础断言
- 必须考虑实际后台系统常见情况
四、万能母版提示词
这是总控版，适合你先让 AI 生成一个"骨架脚本"。
提示词 1：万能母版
markdown
你现在是一个资深 Playwright 自动化测试工程师，请帮我为网站 {{BASE_URL}} 生成一个"可直接运行"的 Playwright 测试 demo，使用 JavaScript 编写。
要求如下：
1. 如果当前目录已经有 Playwright 项目，就复用现有配置；如果没有，就补齐最小可运行项目结构。
2. 测试代码写成一个完整的 spec 文件，文件名清晰，例如 tests/{{PAGE_NAME}}.spec.js。
3. 所有关键步骤都加中文注释，方便阅读和二次修改。
4. 优先使用稳定定位方式：data-testid、getByRole、getByText、getByPlaceholder；不要优先使用容易失效的超长 CSS 路径。
5. 增加基础断言：页面标题正常、URL 正常、核心元素可见、无明显报错文案、主要内容区域渲染成功。
6. 如果页面可能新开标签页，请兼容当前页跳转和 popup 两种情况。
7. 如果网站需要登录，请使用 .env 或 process.env 读取账号密码，不要把真实密码写死在代码里。
8. 如果你无法真实访问该网站，也请先生成"可运行模板"，把需要我替换的选择器和文本集中标记成 TODO。
9. 最后告诉我运行命令，例如 npm test、npm run test:headed、npx playwright show-report。
10. 不要只给思路，要直接给完整代码。
业务目标：
- 网站：{{BASE_URL}}
- 页面：{{PAGE_NAME}}
- 核心动作：打开页面、执行操作、检查页面显示是否正常
- 需要覆盖：登录、查询、表单、弹窗、结果校验五、你已有的 5 个核心模板
下面是你现有模板，我顺手做了文章化整理。
提示词 2：登录流程模板
markdown
请帮我为公司内部网站 {{BASE_URL}} 编写一个 Playwright 登录流程测试，使用 JavaScript，直接输出完整可运行代码。
登录信息要求：
- 登录页：{{LOGIN_PATH}}
- 用户名从 process.env.{{USERNAME_ENV}} 读取
- 密码从 process.env.{{PASSWORD_ENV}} 读取
- 用户名输入框关键词：{{USERNAME_INPUT_HINT}}
- 密码输入框关键词：{{PASSWORD_INPUT_HINT}}
- 登录按钮文字：{{LOGIN_BUTTON_TEXT}}
测试步骤要求：
1. 打开登录页并等待页面加载完成。
2. 校验登录页标题、Logo、登录表单是否正常显示。
3. 输入用户名和密码，点击登录按钮。
4. 如果页面有验证码、短信码、二次确认，请在代码里预留 TODO 注释，不要瞎编。
5. 登录成功后断言：URL 发生变化、首页/工作台/菜单栏可见、当前用户名或头像可见。
6. 额外校验页面没有"账号或密码错误""系统异常""请求失败"等明显错误提示。
7. 如果登录成功，顺便保存 storageState，方便后续复用登录态。
8. 关键代码必须加中文注释。
9. 如果实际选择器未知，请给我一个带占位符的模板版本，并把需要我替换的地方写清楚。提示词 3：查询 / 搜索 / 结果校验模板
markdown
请帮我为网站 {{BASE_URL}} 的 {{PAGE_NAME}} 页面编写一个 Playwright 查询测试，直接输出完整可运行代码。
页面信息：
- 页面地址：{{PAGE_PATH}}
- 查询输入框提示词或标签：{{SEARCH_INPUT_HINT}}
- 查询按钮文字：{{SEARCH_BUTTON_TEXT}}
- 查询关键字：{{KEYWORD}}
测试步骤要求：
1. 进入 {{PAGE_NAME}} 页面，检查页面标题、面包屑、查询区域是否正常显示。
2. 在搜索框中输入 {{KEYWORD}}，必要时再选择下拉框、日期、状态筛选项。
3. 点击"{{SEARCH_BUTTON_TEXT}}"按钮。
4. 等待 loading 消失，再校验结果区域是否正常渲染。
5. 结果可能有两种情况：有数据时表格/列表至少有一条记录；无数据时空状态文案正常显示。两种都要兼容。
6. 校验结果中的关键列、关键文本、分页、总数、无报错提示是否正常。
7. 如有"重置"按钮，也顺便写一个重置查询条件并恢复默认状态的断言。
8. 代码里加中文注释，选择器尽量稳健。提示词 4：表单新增 + 弹窗模板
markdown
请帮我为网站 {{BASE_URL}} 的 {{PAGE_NAME}} 页面生成一个 Playwright 自动化脚本，场景是"点击新增按钮，打开弹窗/抽屉，填写表单并提交"。
页面信息：
- 页面地址：{{PAGE_PATH}}
- 新增按钮文字：{{CREATE_BUTTON_TEXT}}
- 弹窗标题：{{DIALOG_TITLE}}
- 需要填写的字段：{{FORM_FIELD_NAME_1}}、{{FORM_FIELD_NAME_2}}、{{FORM_FIELD_NAME_3}}
- 提交按钮文字：{{SUBMIT_BUTTON_TEXT}}
- 成功提示语：{{SUCCESS_TEXT}}
测试步骤要求：
1. 进入页面后，先校验列表区域和"{{CREATE_BUTTON_TEXT}}"按钮可见。
2. 点击新增按钮，断言弹窗或抽屉成功打开，标题为"{{DIALOG_TITLE}}"。
3. 填写表单，文本框、下拉框、日期、单选框、复选框都请按常规 Playwright 写法处理。
4. 提交前可增加必填项校验；提交后等待成功提示"{{SUCCESS_TEXT}}"出现。
5. 断言弹窗关闭或状态恢复正常。
6. 回到列表页后，校验新建的数据出现在表格/列表中。
7. 如果页面会弹出二次确认框，请一并处理并校验按钮点击后的结果。
8. 整个脚本必须带中文注释，并尽量写成我只替换字段名和按钮名就能复用的模板。提示词 5：列表页 + 详情页 + 返回模板
markdown
请帮我写一个 Playwright 测试，验证网站 {{BASE_URL}} 的 {{PAGE_NAME}} 页面，从列表进入详情，再返回列表的完整流程。
要求：
1. 打开 {{PAGE_PATH}} 页面并确认列表加载完成。
2. 点击第一条记录或指定文本"{{DETAIL_TARGET_TEXT}}"进入详情页。
3. 同时兼容当前页跳转和新标签页打开两种情况。
4. 在详情页校验：标题、编号、状态、正文区域、操作按钮是否显示正常。
5. 执行一个轻量交互，例如展开更多信息、打开预览弹窗、切换标签页。
6. 返回列表页后，再次确认列表仍然正常显示，没有白屏、报错、空白数据。
7. 代码直接给完整版本，包含中文注释和必要断言。六、建议你补充的实际应用场景
你现在这 5 个模板已经覆盖了基础 CRUD 的一部分，但企业后台真实场景远不止这些。
下面这些，才是最容易在工作里遇到、也最值得补齐的。
提示词 6：编辑流程模板
适用场景：
- 列表页点"编辑"
- 打开弹窗 / 抽屉
- 修改已有数据并提交
- 回表格校验更新结果
diff
请帮我为网站 {{BASE_URL}} 的 {{PAGE_NAME}} 页面编写一个 Playwright 编辑流程测试，使用 JavaScript，直接输出完整可运行代码。
页面信息：
- 页面地址：{{PAGE_PATH}}
- 编辑按钮文字：{{EDIT_BUTTON_TEXT}}
- 弹窗标题：编辑{{PAGE_NAME}}
- 需要修改的字段：{{FORM_FIELD_NAME_1}}、{{FORM_FIELD_NAME_2}}
- 提交按钮文字：{{SUBMIT_BUTTON_TEXT}}
- 成功提示语：{{SUCCESS_TEXT}}
测试要求：
1. 进入页面并等待列表加载完成。
2. 定位第一条可编辑记录，点击"{{EDIT_BUTTON_TEXT}}"。
3. 断言编辑弹窗或抽屉正常打开，并显示原始数据。
4. 修改指定字段并提交。
5. 提交后校验成功提示出现，弹窗关闭。
6. 返回列表后校验该条数据已更新为最新值。
7. 如果有表单校验规则，也补一个非法值校验示例。
8. 代码必须包含中文注释，未知选择器请使用 TODO 标记。提示词 7：删除 / 二次确认模板
适用场景：
- 删除按钮
- 确认弹窗
- 删除成功后列表刷新
- 空状态 / 总数变化校验
markdown
请帮我为网站 {{BASE_URL}} 的 {{PAGE_NAME}} 页面编写一个 Playwright 删除测试，直接输出完整可运行代码。
页面信息：
- 页面地址：{{PAGE_PATH}}
- 删除按钮文字：{{DELETE_BUTTON_TEXT}}
- 确认按钮文字：{{CONFIRM_BUTTON_TEXT}}
- 成功提示语：{{SUCCESS_TEXT}}
测试步骤要求：
1. 进入页面并等待列表渲染完成。
2. 找到一条可删除的数据，记录删除前的列表总数或目标文本。
3. 点击"{{DELETE_BUTTON_TEXT}}"按钮。
4. 断言二次确认弹窗出现，并校验提示文案合理。
5. 点击"{{CONFIRM_BUTTON_TEXT}}"后，等待删除完成。
6. 校验成功提示"{{SUCCESS_TEXT}}"出现。
7. 再次校验删除后的列表总数减少，或者目标数据不再可见。
8. 如果删除后列表为空，也要兼容空状态断言。
9. 所有关键步骤加中文注释。提示词 8：导入 Excel / CSV 模板
适用场景：
- 上传 Excel
- 预览导入结果
- 导入成功 / 导入失败
- 错误文件下载
markdown
请帮我为网站 {{BASE_URL}} 的 {{PAGE_NAME}} 页面生成一个 Playwright 导入测试脚本，使用 JavaScript，直接输出完整代码。
页面信息：
- 页面地址：{{PAGE_PATH}}
- 导入按钮文字：{{IMPORT_BUTTON_TEXT}}
- 上传按钮文字：{{UPLOAD_BUTTON_TEXT}}
- 成功提示语：{{SUCCESS_TEXT}}
测试要求：
1. 进入页面，校验导入按钮可见。
2. 点击"{{IMPORT_BUTTON_TEXT}}"后，断言导入弹窗打开。
3. 使用 Playwright 上传一个测试文件（如 xlsx/csv）。
4. 如果页面有导入预览、校验结果、错误明细区域，也进行断言。
5. 点击确认导入后，等待接口完成并校验成功提示。
6. 如果导入失败，也请保留失败场景模板，包括错误提示、错误文件下载入口、失败条数断言。
7. 代码中请写明测试文件的相对路径，并用中文注释说明。
8. 未知选择器用 TODO 标记。提示词 9：导出文件模板
适用场景：
- 点击导出
- 监听下载事件
- 校验文件名
- 可结合查询条件一起验证
diff
请帮我为网站 {{BASE_URL}} 的 {{PAGE_NAME}} 页面编写一个 Playwright 导出测试，使用 JavaScript，直接输出完整可运行代码。
页面信息：
- 页面地址：{{PAGE_PATH}}
- 导出按钮文字：{{EXPORT_BUTTON_TEXT}}
- 查询关键字：{{KEYWORD}}
测试步骤要求：
1. 进入页面，先执行一次查询，确保结果列表已加载。
2. 点击"{{EXPORT_BUTTON_TEXT}}"按钮。
3. 使用 Playwright 的下载能力监听并保存导出文件。
4. 校验下载成功、文件名合理、文件大小大于 0。
5. 如果导出会弹确认框或异步任务提示，也请兼容处理。
6. 代码要带中文注释。
7. 如果真实导出文件格式未知，请保留 TODO 占位。提示词 10：分页 / 排序 / 筛选模板
适用场景：
- 表格分页
- 点击列排序
- 多条件组合筛选
- 重置条件恢复默认
diff
请帮我为网站 {{BASE_URL}} 的 {{PAGE_NAME}} 页面生成一个 Playwright 测试脚本，场景包括分页、排序、筛选，直接输出完整 JavaScript 代码。
页面信息：
- 页面地址：{{PAGE_PATH}}
- 查询关键字：{{KEYWORD}}
测试要求：
1. 打开页面并等待表格渲染成功。
2. 执行一次关键字查询，校验结果区域正常显示。
3. 如果表格支持分页，点击下一页并断言页码变化、数据刷新成功。
4. 如果表格支持排序，点击某个列头进行升序/降序排序，并断言 UI 状态发生变化。
5. 如果页面支持状态、日期、下拉筛选，请加入 1~2 个筛选条件。
6. 点击重置后，断言筛选条件恢复默认值。
7. 对 loading、空状态、报错提示做基础断言。
8. 代码加中文注释，并优先使用稳健选择器。提示词 11：权限控制模板
适用场景：
- 不同角色看不同菜单
- 按钮显隐
- 无权限访问跳转 403 / 提示页
- 行级权限 / 数据范围权限
diff
请帮我为网站 {{BASE_URL}} 编写一个 Playwright 权限测试脚本，使用 JavaScript，直接输出完整代码。
测试背景：
- 页面：{{PAGE_NAME}}
- 页面地址：{{PAGE_PATH}}
- 菜单名称：{{MENU_TEXT}}
- 角色名称：{{ROLE_NAME}}
测试要求：
1. 使用不同账号登录（管理员账号、普通账号），账号从环境变量读取。
2. 校验不同角色下菜单"{{MENU_TEXT}}"是否可见。
3. 进入 {{PAGE_NAME}} 页面后，校验新增、编辑、删除、导出等按钮的显示差异。
4. 如果普通账号无权访问该页面，断言应跳转到 403 页面、无权限页或显示明确提示。
5. 如果存在行级权限或数据范围权限，也预留断言位置。
6. 代码必须带中文注释，账号密码不能写死。
7. 选择器未知的地方统一写 TODO。提示词 12：批量操作模板
适用场景：
- 批量勾选
- 批量删除
- 批量启用 / 禁用
- 批量审核
diff
请帮我为网站 {{BASE_URL}} 的 {{PAGE_NAME}} 页面生成一个 Playwright 批量操作测试脚本，使用 JavaScript，直接输出完整代码。
页面信息：
- 页面地址：{{PAGE_PATH}}
- 批量操作按钮文字：批量{{BUTTON_TEXT}}
- 成功提示语：{{SUCCESS_TEXT}}
测试要求：
1. 打开页面并等待表格渲染成功。
2. 勾选至少两条数据，断言批量操作按钮从禁用变为可用。
3. 点击批量{{BUTTON_TEXT}}，处理可能存在的确认弹窗。
4. 提交后校验成功提示"{{SUCCESS_TEXT}}"出现。
5. 校验目标数据状态发生变化，或者列表刷新成功。
6. 如果未勾选数据时按钮应禁用，也请补一个断言。
7. 脚本需要中文注释。提示词 13：文件上传 / 图片上传模板
适用场景：
- 头像上传
- 附件上传
- PDF / Excel / 图片上传
- 上传进度、预览、删除
markdown
请帮我为网站 {{BASE_URL}} 的 {{PAGE_NAME}} 页面编写一个 Playwright 文件上传测试，使用 JavaScript，直接输出完整代码。
页面信息：
- 页面地址：{{PAGE_PATH}}
- 上传按钮文字：{{UPLOAD_BUTTON_TEXT}}
- 成功提示语：{{SUCCESS_TEXT}}
测试要求：
1. 进入页面后找到上传区域。
2. 上传一个测试文件（图片、pdf、excel 均可按模板留 TODO）。
3. 校验上传中状态、上传完成状态、文件名或预览区域可见。
4. 如果页面支持删除已上传文件，也补一个删除动作测试。
5. 如果页面有大小限制、格式限制，也补充异常场景模板。
6. 代码必须带中文注释，并给出测试文件放置目录建议。提示词 14：异常提示 / 表单校验模板
适用场景：
- 必填校验
- 格式校验
- 手机号 / 邮箱 / 身份证
- 长度限制
diff
请帮我为网站 {{BASE_URL}} 的 {{PAGE_NAME}} 页面生成一个 Playwright 表单异常校验脚本，使用 JavaScript，直接输出完整代码。
页面信息：
- 页面地址：{{PAGE_PATH}}
- 提交按钮文字：{{SUBMIT_BUTTON_TEXT}}
- 需要校验的字段：{{FORM_FIELD_NAME}}
测试要求：
1. 打开页面并进入新增或编辑表单。
2. 不填写必填字段直接提交，断言必填提示出现。
3. 输入非法格式数据，例如超长文本、错误手机号、错误邮箱等，断言对应校验提示。
4. 输入合法数据后，断言错误提示消失。
5. 如果页面支持实时校验和提交校验，两种都尽量覆盖。
6. 所有步骤加中文注释。
7. 未知提示语或选择器用 TODO 标记。提示词 15：菜单导航 / 面包屑 / 路由跳转模板
适用场景：
- 左侧菜单展开
- 二级菜单点击
- 路由跳转
- 面包屑显示
diff
请帮我为网站 {{BASE_URL}} 编写一个 Playwright 菜单导航测试脚本，使用 JavaScript，直接输出完整代码。
测试目标：
- 一级菜单：{{MENU_TEXT}}
- 页面名称：{{PAGE_NAME}}
- 页面地址：{{PAGE_PATH}}
测试要求：
1. 登录系统后，展开一级菜单并点击目标菜单。
2. 校验 URL 跳转到 {{PAGE_PATH}}。
3. 校验页面标题、面包屑、主要内容区域显示正确。
4. 如果菜单支持折叠/展开，也补一个导航状态断言。
5. 如果页面是新标签页打开，也要兼容 popup。
6. 所有关键步骤加中文注释。提示词 16：iframe / 内嵌页面模板
适用场景：
- 老系统 iframe
- 外部页面嵌入
- 微前端子应用
- 富文本编辑器 iframe
css
请帮我为网站 {{BASE_URL}} 的 {{PAGE_NAME}} 页面编写一个 Playwright iframe 场景测试脚本，使用 JavaScript，直接输出完整代码。
页面信息：
- 页面地址：{{PAGE_PATH}}
测试要求：
1. 打开页面后识别 iframe，并进入对应 frame。
2. 在 iframe 内校验标题、表单、按钮或表格是否渲染成功。
3. 在 iframe 内执行一次核心操作，例如输入、点击查询、点击保存。
4. 如果 iframe 中有弹窗或跳转，也尽量兼容处理。
5. 脚本必须使用 frameLocator 或稳定 frame 定位方式。
6. 关键步骤全部使用中文注释。提示词 17：标签页切换 / 多 Tab 模板
适用场景：
- 详情页多个 Tab
- 基本信息 / 流程记录 / 操作日志
- 切换后异步加载数据
diff
请帮我为网站 {{BASE_URL}} 的 {{PAGE_NAME}} 页面编写一个 Playwright 标签页切换测试，使用 JavaScript，直接输出完整代码。
页面信息：
- 页面地址：{{PAGE_PATH}}
测试要求：
1. 打开页面并等待详情页或工作台渲染完成。
2. 依次点击 2~3 个 Tab，如"基本信息""操作记录""附件信息"。
3. 每次切换后都校验对应内容区域正确显示，且 loading 消失。
4. 校验切换过程中页面没有明显报错文案。
5. 如果 Tab 中有表格、附件、日志时间线，也做基础断言。
6. 脚本需包含中文注释。提示词 18：弹窗 / 抽屉 / 二次确认 / 预览模板
适用场景：
- 查看大图
- PDF 预览
- 预览弹窗
- 审批确认框
diff
请帮我为网站 {{BASE_URL}} 的 {{PAGE_NAME}} 页面生成一个 Playwright 弹窗交互测试，使用 JavaScript，直接输出完整代码。
页面信息：
- 页面地址：{{PAGE_PATH}}
- 按钮文字：{{BUTTON_TEXT}}
测试要求：
1. 进入页面并点击"{{BUTTON_TEXT}}"。
2. 校验弹窗、抽屉或预览层成功打开。
3. 校验标题、内容区域、关闭按钮、确认按钮是否可见。
4. 如果弹窗内有图片、PDF、富文本、表格等内容，也做基础断言。
5. 点击关闭或取消后，断言弹层成功消失，页面状态恢复正常。
6. 所有关键步骤加中文注释。提示词 19：接口失败 / 重试 / 错误提示模板
适用场景：
- 网络超时
- 请求失败
- 500 错误
- 前端错误提示是否合理
markdown
请帮我为网站 {{BASE_URL}} 的 {{PAGE_NAME}} 页面生成一个 Playwright 异常场景测试，使用 JavaScript，直接输出完整代码。
页面信息：
- 页面地址：{{PAGE_PATH}}
- 错误提示语：{{ERROR_TEXT}}
测试要求：
1. 打开页面并拦截指定接口，模拟失败响应，如 500、超时、空数据。
2. 执行查询或提交操作。
3. 校验页面显示合理的错误提示，如"{{ERROR_TEXT}}"或通用失败提示。
4. 校验页面不会白屏、卡死或出现明显未捕获异常。
5. 如果页面有"重试"按钮，也补充一次重试成功的脚本。
6. 关键步骤写中文注释。提示词 20：下载详情页 / 新窗口 / PDF 预览模板
适用场景：
- 点击附件
- 新窗口打开
- PDF 预览
- 当前页跳转和 popup 并存
diff
请帮我为网站 {{BASE_URL}} 的 {{PAGE_NAME}} 页面编写一个 Playwright 新窗口/预览测试，使用 JavaScript，直接输出完整代码。
页面信息：
- 页面地址：{{PAGE_PATH}}
- 触发文字：{{BUTTON_TEXT}}
测试要求：
1. 打开页面并点击"{{BUTTON_TEXT}}"。
2. 同时兼容当前页跳转和 popup 新标签页打开。
3. 校验新页面 URL 合理、标题存在、主体内容可见。
4. 如果是 PDF、图片、详情页预览，也做基础断言。
5. 返回原页面后，再次确认列表仍正常显示。
6. 关键步骤加中文注释。提示词 21：工作流 / 审批流模板
适用场景：
- 提交审批
- 审批通过 / 驳回
- 流程节点状态变化
- 审批记录时间线
markdown
请帮我为网站 {{BASE_URL}} 的 {{PAGE_NAME}} 页面编写一个 Playwright 审批流测试脚本，使用 JavaScript，直接输出完整代码。
页面信息：
- 页面地址：{{PAGE_PATH}}
- 提交按钮文字：提交审批
- 审批按钮文字：通过 / 驳回
- 成功提示语：{{SUCCESS_TEXT}}
测试要求：
1. 进入页面并创建或打开一条待审批数据。
2. 点击"提交审批"后，断言流程状态变为待审批。
3. 使用另一个审批账号登录，打开待审批记录并执行"通过"或"驳回"。
4. 校验状态、审批意见、审批时间线、操作记录均更新成功。
5. 如果存在流程节点图，也做基础断言。
6. 账号信息从环境变量读取，不能写死。
7. 代码必须带中文注释。提示词 22：数据看板 / 报表模板
适用场景：
- 图表渲染
- 筛选维度切换
- 数字指标卡片
- 图表空状态
diff
请帮我为网站 {{BASE_URL}} 的 {{PAGE_NAME}} 页面编写一个 Playwright 报表/看板测试，使用 JavaScript，直接输出完整代码。
页面信息：
- 页面地址：{{PAGE_PATH}}
测试要求：
1. 打开页面后校验核心指标卡片、图表区域、筛选区域可见。
2. 切换一个时间维度，如今日、本周、本月，校验图表重新加载。
3. 校验至少一个核心数字、一个图表容器、一个列表或排行区域正常渲染。
4. 如果无数据，也兼容空状态文案断言。
5. 校验页面无明显报错提示。
6. 所有步骤带中文注释。提示词 23：移动端 / 响应式模板
适用场景：
- H5
- 手机端后台
- 响应式布局
- 抽屉菜单
diff
请帮我为网站 {{BASE_URL}} 的 {{PAGE_NAME}} 页面编写一个 Playwright 移动端/响应式测试脚本，使用 JavaScript，直接输出完整代码。
页面信息：
- 页面地址：{{PAGE_PATH}}
测试要求：
1. 使用 Playwright 移动端视口打开页面。
2. 校验顶部导航、菜单抽屉、核心内容区域正确显示。
3. 执行一次查询、一次点击操作。
4. 校验页面没有横向溢出、关键按钮未被遮挡、弹窗仍可正常关闭。
5. 如果存在适配后的菜单收起逻辑，也做基础断言。
6. 脚本必须带中文注释。七、哪些场景最值得优先写
如果你是公司里第一次推动 Playwright，不要一上来就追求"全站自动化"。
建议优先顺序：
第一阶段：先做冒烟
优先覆盖：
- 登录
- 首页
- 菜单跳转
- 关键列表页打开
- 查询
- 详情打开
这是最划算的。
第二阶段：再做核心业务链路
例如：
- 新增
- 编辑
- 删除
- 提交审批
- 导入 / 导出
- 权限控制
这时候自动化开始真正有业务价值。
第三阶段：再补异常和边界
例如：
- 必填校验
- 错误提示
- 空数据
- 网络失败
- 多角色权限
这一步更像"质量兜底"。
八、实际写提示词时的优化建议
1）一定强调"直接输出完整代码"
不要只写：
帮我写个 Playwright 用例要写：
直接输出完整可运行代码，不要只给思路2）一定强调"未知选择器请保留 TODO"
否则 AI 很容易乱猜选择器，导致脚本看起来很完整，实际上根本跑不起来。
建议固定加一句：
如果实际选择器未知，请给我一个带 TODO 占位符的模板版本，不要瞎编不存在的 DOM 结构。3）一定要求"中文注释"
这样后面你自己看、同事接手、二次改造都很方便。
4）一定要求"优先稳健选择器"
推荐优先级：
data-testidgetByRolegetByTextgetByPlaceholder- 必要时局部 CSS
不要一上来就整这种：
css
div > div:nth-child(2) > .xxx > .yyy这种最容易炸。
5）登录类场景一定要求读取环境变量
比如：
arduino
用户名从 process.env.TEST_USERNAME 读取
密码从 process.env.TEST_PASSWORD 读取不要把账号密码直接写在提示词里。
九、建议配套让 AI 一起生成的内容
你在实际工作里，不要只让 AI 生成一个 spec 文件。
建议顺便让它补这些：
1）.env.example
ini
TEST_USERNAME=your_username
TEST_PASSWORD=your_password
ADMIN_USERNAME=admin
ADMIN_PASSWORD=1234562）playwright.config.js
基础配置、超时、reporter、trace、screenshot。
3）tests/helpers/auth.js
统一封装登录逻辑。
4）tests/helpers/page.js
统一封装等待 loading 消失、通用 toast 校验、popup 兼容方法。
5）storageState
让后续脚本复用登录态，不要每条用例都重新登录。
十、我建议你再加一个"组合型母版"
这个比"万能母版"更适合日常工作，能让 AI 一次性按企业后台规范输出。
提示词 24：企业后台组合母版
diff
你现在是一个资深 Playwright 自动化测试工程师，请为企业后台网站 {{BASE_URL}} 生成一个"可直接运行"的 JavaScript 测试脚本。
请严格遵守以下要求：
1. 如果项目中已有 Playwright 配置，则复用现有配置；没有则补齐最小运行结构。
2. 输出内容必须包括：
- 一个完整 spec 文件
- 必要时补充 .env.example
- 如适合，可补充一个简单的登录辅助函数
3. 所有代码都必须带中文注释。
4. 优先使用稳定定位方式：data-testid、getByRole、getByText、getByPlaceholder。
5. 如真实选择器未知，不要瞎编，请集中写 TODO。
6. 登录账号密码必须从环境变量读取。
7. 需要兼容：
- 当前页跳转
- popup 新标签页
- loading
- toast 提示
- 空数据状态
- 二次确认弹窗
8. 增加基础断言：
- 页面标题
- URL
- 主内容区域
- 核心按钮
- 无明显错误提示
9. 最后补充运行命令：
- npx playwright test
- npx playwright test --headed
- npx playwright show-report
10. 不要只给思路，必须直接输出完整代码。
业务信息：
- 页面名称：{{PAGE_NAME}}
- 页面地址：{{PAGE_PATH}}
- 测试目标：{{TEST_GOAL}}
- 涉及动作：登录、进入页面、执行操作、校验结果
- 涉及元素：{{ELEMENTS}}十一、一个很实用的写法：让 AI 先产"模板版"，再产"实战版"
我建议你日常分两步：
第一步：先让 AI 生成模板版
特点：
- 结构完整
- TODO 明确
- 可快速改
适合第一次搭架子。
第二步：再把真实页面信息喂进去
例如告诉 AI：
- 真实 URL
- 登录输入框 placeholder
- 查询按钮文字
- 表格列名
- 成功提示语
- 关键 DOM 截图 / HTML 片段
这样它就能从模板版升级成实战版。
十二、这套提示词在团队里的实际用法
如果你在公司里推广，可以这样落地：
用法 1：开发自己维护冒烟脚本
每个模块至少 1 条：
- 页面可打开
- 查询可执行
- 详情可进入
用法 2：测试补核心流程
对重点业务补：
- 新增
- 编辑
- 删除
- 审批
- 导入导出
用法 3：提测前跑一遍
配合 CI 做：
- 登录
- 首页
- 关键菜单
- 核心业务流
用法 4：回归时让 AI 快速补新页面脚本
新页面上线前，让 AI 先生成 70% 脚本，你再改最后 30%。
这个效率很高。
十三、结语
Playwright 真正的价值，不只是"自动点页面"，而是：
- 帮你做稳定冒烟
- 帮你兜住核心回归
- 帮你把人工重复点击变成可复用资产
- 帮你把系统质量从"靠人记忆"变成"靠脚本校验"
而 AI 提示词的价值，不只是"帮你生成代码"，而是把你脑子里的测试思路，变成一个可复制、可批量生产的模板体系。