Playwright 架构UI 自动化质量保障平台

我最近花了两天时间深入学习了一个基于 Playwright 和 Pytest 的 Web UI 自动化测试框架。这个项目不仅让我对自动化测试有了全新的认识更让我体会到了企业级测试框架的设计理念。今天我想通过这篇博客分享我的学习心得包括项目的架构设计、技术选型、核心实现以及我个人的学习过程。项目概述什么是 Playwright-UI这是一个企业级的 Web UI 自动化测试框架专门用于测试 Web 应用的各种功能模块。项目采用现代化的技术栈实现了完整的测试流程从用例编写到报告生成。核心特性基于 Playwright 的浏览器自动化采用 Page Object Model (POM) 设计模式支持网络请求拦截和 Mock API自动生成美观的 Allure 测试报告完整的调试和追踪功能项目架构深度剖析整体架构图playwright-ui/├── cases/ # 测试用例集├── pages/ # 页面对象层 (POM)├── mocks/ # Mock API 数据├── plugins/ # 自定义插件├── reports/ # 测试报告临时文件├── allure_report/ # 生成的 Allure 报告├── test-results/ # 截图、视频、追踪日志├── conftest.py # Pytest 全局配置├── pytest.ini # Pytest 参数配置├── run.py # 框架运行入口└── requirements.txt # 项目依赖核心目录详解cases/ - 测试用例集这是项目的心脏存放所有测试用例。每个功能模块都有对应的测试类cases/├── test_login.py # 登录功能测试├── test_register.py # 注册功能测试├── test_project_list.py # 项目列表测试├── test_add_project.py # 新增项目测试├── test_add_module.py # 新增模块测试├── test_env_list.py # 环境列表测试└── conftest.py # 用例级配置设计亮点按功能模块组织测试类使用 Pytest 的 class 结构每个测试方法都有清晰的文档字符串pages/ - 页面对象层 (POM 模式)这是项目的灵魂实现了经典的 Page Object Model 设计模式pages/├── login_page.py # 登录页面封装├── register_page.py # 注册页面封装├── project_list_page.py # 项目列表页面├── add_project_page.py # 新增项目页面├── add_module_page.py # 新增模块页面└── list_env_page.py # 环境列表页面POM 模式的核心思想将页面元素定位和业务操作分离提高代码的可维护性和复用性当页面 UI 变化时只需修改 Page 类mocks/ - Mock API 数据用于模拟各种异常场景的 API 响应mocks/└── mock_api.py # Mock API 定义Mock 的作用测试异常场景400、500 错误模拟后端未开发完成的情况提高测试的稳定性和速度配置文件详解pytest.ini - Pytest 参数配置[pytest]addopts -p no:playwright # 禁用默认插件-p no:base_url # 禁用基础 URL 插件–headed # 有界面模式–tracingretain-on-failure # 失败时保留追踪–screenshotonly-on-failure # 失败时截图–videoretain-on-failure # 失败时录视频–base-urlhttp://47.116.12.183 # 测试服务器conftest.py - 全局配置注册自定义插件配置浏览器参数设置 Allure 报告的动态标题 核心技术实现Playwright 浏览器自动化项目使用 Playwright 进行浏览器操作支持多种定位方式元素定位page.get_by_label(“用户名:”) # 按标签定位page.get_by_text(“立即登录”) # 按文本定位page.locator(‘[data-testid“btn”]’) # CSS 选择器元素交互element.fill(“输入内容”) # 填充输入框element.click() # 点击操作element.select_option(“选项值”) # 选择下拉框Page Object Model 实现以 LoginPage 为例class LoginPage:definit(self, page: Page):self.page page# 元素定位器self.locator_username page.get_by_label(“用 户 名:”)self.locator_password page.get_by_label(“密 码:”)self.locator_login_btn page.locator(‘text立即登录’)# 错误提示元素 self.locator_username_tip1 page.locator([data-fv-validatornotEmpty]) self.locator_login_error page.locator(text账号或密码不正确) def navigate(self): self.page.goto(/login.html) def fill_username(self, username): self.locator_username.fill(username) def fill_password(self, password): self.locator_password.fill(password) def click_login_button(self): self.locator_login_btn.click() def login(self, username, password): 完整登录流程 self.fill_username(username) self.fill_password(password) self.click_login_button()网络请求拦截Playwright 支持拦截和验证网络请求验证 API 请求内容with page.expect_request(‘**/api/login’) as req:login_button.click()assert req.value.method ‘POST’assert req.value.post_data_json {‘username’: ‘testuser’,‘password’: ‘testpass’}验证 API 响应with page.expect_response(‘**/api/login’) as res:login_button.click()assert res.value.status 200assert res.value.okMock API 实现通过 Mock 模拟各种异常场景模拟项目名重复的错误mock_project_400 {“url”: “**/api/project”,“handler”: lambda route: route.fulfill(status400,bodyjson.dumps({“errors”: {“project_name”: “项目名已存在”},“message”: “Input payload validation failed”}))}模拟服务器错误mock_project_500 {“url”: “**/api/project”,“handler”: lambda route: route.fulfill(status500,body“服务端错误”)} 测试用例编写基本测试结构class TestLogin:“”“登录功能测试”“”pytest.fixture(autouseTrue) def start_for_each(self, unlogin_page: Page): 前置操作初始化页面对象 self.login LoginPage(unlogin_page) self.login.navigate() yield # 后置操作如果需要 def test_login_success(self): 正常登录流程 self.login.fill_username(py) self.login.fill_password(123456) self.login.click_login_button() # 断言验证 expect(self.login.page).to_have_title(首页) expect(self.login.page).to_have_url(/index.html) def test_login_empty_username(self): 用户名为空验证 self.login.fill_username() self.login.fill_password(123456) self.login.click_login_button() # 验证错误提示 expect(self.login.locator_username_tip1).to_be_visible() expect(self.login.locator_username_tip1).to_contain_text(不能为空) pytest.mark.parametrize(username,password, [ [py, wrongpass], [wronguser, 123456], ]) def test_login_error(self, username, password): 参数化测试错误账号密码 self.login.fill_username(username) self.login.fill_password(password) self.login.click_login_button() expect(self.login.locator_login_error).to_be_visible()测试场景覆盖项目测试了完整的用户旅程表单验证必填、空值、格式等正常业务流程异常错误处理API 请求验证页面导航验证测试报告和调试Allure 报告项目使用 Allure 生成美观的测试报告运行测试python run.py生成报告allure generate ./reports -o ./allure_report --clean查看报告allure serve ./reports或直接打开 allure_report/index.html报告包含测试用例执行结果统计每个用例的详细执行时间失败用例的截图和视频测试步骤的详细日志调试功能Playwright 提供了强大的调试工具1. 截图调试–screenshotonly-on-failure # 失败时自动截图2. 视频录制–videoretain-on-failure # 失败时录制视频3. 追踪日志–tracingretain-on-failure # 失败时记录追踪查看追踪日志playwright show-trace test-results/trace.zip测试报告截图服务器有点问题很多测试没过绿色 (13)通过Passed。红色 (6)Product defects产品缺陷。通常指断言失败即程序运行了但结果不对。黄色 (38)Test defects测试脚本缺陷/环境问题。环境不通挂掉。