一、为什么你要关注这篇博文很多测试同学在学 UI 自动化时最大的困惑是写几十个脚本容易但如何搭建一个能支撑上百个用例、好维护、易扩展的框架这篇文章不讲虚的直接给你看一个真实落地的项目结构并带着你跑通第一个新增操作用例。你将收获一套清晰的 POM Fixtures 分层架构一个可直接复用的 BaseOperatePage 基类设计第一个完整的查询操作自动化用例二、项目全景先看骨架再填血肉先看一眼项目整体结构只展示核心部分UItest/├── playwright.config.ts # 运行时配置浏览器、并发、重试、报告├── .env / .env.example # 环境敏感配置封装地址、登录账号密码、邮箱等├── package.json / tsconfig.json #项目依赖│├── tests/ # 【测试编排层】测试用例层│ ├── pages/ # 页面对象模型 (Page Object Model) │ │ └── BaseOperatePage.ts # 页面公共基类核心 POM 封装│├── fixtures/ # 【依赖注入层】│ ├── fixtures.ts # 基础Fixtures自动登录、角色切换│ └── test-fixtures.ts # 增强Fixtures注入日志、截图、数据源│├── utils/ # 【工具服务层】│ ├── logger.ts # 日志系统│ ├── table-helper.ts # 表格数据提取Element UI / VXE Table│ ├── screenshot-helper.ts # 截图辅助│ ├── FileUploader.ts # 文件上传│ ├── file-exporter.ts # 文件导出下载│ ├── excel-writer.ts # Excel 写入│ ├── excel-reader.ts # Excel 读取│ ├── csv-exporter.ts # CSV 导出│ ├── csv-reader.ts # CSV 读取│ └── types.ts # 公共类型定义│├── testdata/ # 【数据层】CSV / Excel / JSON 数据源├── reporters/ # 【报告层】自定义邮件报告器└── .github/workflows/ # 【CI/CD层】GitHub Actions 流水线框架设计理念目录职责描述pages/页面元素 操作具体功能操作步骤fixtures/上下文环境登录、日志比如每个功能新增、修改、查询都需要作为单独Test都需要登录操作就直接把登录封装在这里。还有日志的一些配置utils/通用工具箱各种工具操作系统时导入、导出等操作还有读取Excel/csv等文件的工具封装testdata/测试数据把测试数据和脚本独立开让代码更具有复用性别人只需要修改数据即可运行三、框架搭建这里我换了一个工具使用AI演示用VSCode里面trae也可以主要要排队所以换一个AI工具。1建一个空的文件夹”UITest,根据.md文件叫AI初始化项目md文件就是对该项目工程一个概述简介2初始化的项目不能直接用需要写入一些基础配置如环境配置、文档读入、导出等处理这个过程比较麻烦你要怎么处理这些共同的配置可告诉AI生成然后同意AI的写入尽量描述清楚不然一直都不是自己想要的。3我这里已经搭好了框架可直接使用使用前先安装依赖和浏览器插件四、实战写一个百度新闻页查询的测试用例1录制新用例注注意勾选上“显示浏览器”避免每次都要新打开浏览器2打开浏览器输入地址开始录制脚本百度网作为例子跳过登录注实际脚本录制结束后删除前面的那一串登录信息因为登录和退出已经在fixtures里面进行封装保留从点击父级菜单开始核对里面的页面元素步骤基本都是clickfill组合click是点击fill里面是输入值其他的都属于多的操作需要删除如下图页面长这个样百度查询录制录制的脚本五、运行结果点击运行脚本自动打开浏览器按脚本步骤运行六、下一步你可以玩什么参数化测试用testdata/下的 CSV 批量跑不同用户数据表格断言利用table-helper.ts校验列表数据文件上传/导出用FileUploader/file-exporter测试导入导出CI 集成.github/workflows/playwright.yml让测试在 PR 时自动跑七、文末福利 由于篇幅限制完整的 BaseOperatePage 源码 新闻查询 test 已经打包好后台回复「ui框架」 获取完整项目骨架拿来即用如果你正在搭建UI自动化框架希望这篇文章能帮你少踩一些坑。下一篇我们来聊「如何封装表格数据校验」敬请期待
