玩转 Playwright + TypeScript：手把手带你封装一个工业级 UI 自动化框架(UI测试第二天）
一、为什么你要关注这篇博文？
很多测试同学在学 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里面进行封装），保留从点击父级菜单开始；核对里面的页面元素步骤；基本都是click+fill组合，click是点击，fill里面是输入值，其他的都属于多的操作，需要删除，如下图：
页面长这个样
百度查询录制：
录制的脚本
五、运行结果
点击运行，脚本自动打开浏览器按脚本步骤运行
六、下一步你可以玩什么？
参数化测试：用
testdata/下的 CSV 批量跑不同用户数据表格断言：利用
table-helper.ts校验列表数据文件上传/导出：用
FileUploader/file-exporter测试导入导出CI 集成：
.github/workflows/playwright.yml让测试在 PR 时自动跑
七、文末福利
📦 由于篇幅限制，完整的 BaseOperatePage 源码 + 新闻查询 test 已经打包好，后台回复「ui框架」 获取完整项目骨架，拿来即用！
如果你正在搭建UI自动化框架，希望这篇文章能帮你少踩一些坑。下一篇我们来聊「如何封装表格数据校验」，敬请期待！