玩转 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/	测试数据	把测试数据和脚本独立开，让代码更具有复用性，别人只需要修改数据即可运行