基于playwright-test实现的Page Object Demo
主要实现了:
1.多用户交互,使用用例级别的context fixture,确保每个用户执行用例时都有独立的context环境。
2.监听HTTP请求，捕获接口异常报错，确保接口的稳定性和测试的可靠性。
3.封装表单和表格填写方法，通过{key1: value1, key2: value2}的方式快速操作。
4.集成dataclass,进行测试数据管理,与表单和表格的填写方法结合,使测试更轻松.
5.注入javascript脚本,监听xhr以及fetch类型API请求，仅当无API正在请求时，放开web界面操作,过滤规则在tools/apiObserver.js中进行配置.
6.注入javascript脚本,对新出现的button,input等按钮disble,当无API正在请求时，恢复disable元素状态.
7.注入javascript脚本,全局监听指定元素出现,如果出现,则将其style.display属性设置为none
npm install
npx playwright test
具体操作可至playwright官网学习:https://playwright.dev/docs/intro
1.html-reporter video附件重命名后,无法在video页签下展示,如不重命名,则只能通过观看video内容确定是哪个用户在操作,可修改以下源码解决:
路径:node_modules/playwright-core/lib/vite/htmlReport
查找内容:
==="video"
将第一个匹配项修改为
contentType.startsWith("video/")
2.如需html测试报告中隐藏某些步骤,可在test.step描述步骤名称时,加特定前缀,如"DeleteFromTheHtmlreport",然后修改以下源码解决:
路径:node_modules/@playwright/test/lib/reporters/html.js
方法名:_createTestResult
steps: result.steps.map(s => this._createTestStep(s)),
修改为:
steps: result.steps.filter(s => !s.title.startsWith('DeleteFromTheHtmlreport')).map(s => this._createTestStep(s)),
如无此文件,则修改路径node_modules/playwright/lib/reporters/html.js
方法名:_createTestResult
steps: dedupeSteps(result.steps).map(s => this._createTestStep(s)),
修改为:
steps: dedupeSteps(result.steps).filter(s => !s.step.title.startsWith('DeleteFromTheHtmlreport')).map(s => this._createTestStep(s)),
https://playwright.dev/docs/test-reporters#html-reporter
Locators内通用的定位器可根据项目自行适配。
PageCompoment内的fillForm和fillTable方法也需要自行实现,目前方法相当于伪代码,提供了实现的思路。
fillTable可通过Table类获取cellLocator后直接调用fillForm进行填写操作。
table在Locators内定义,需要根据项目情况自行适配。
获取到cellLocator后,可使用playwright Locator的所有方法进行操作。
dataclass 官方文档:https://dataclass.js.org/guide/
继承dataclass编写数据类,每个表单可作为一个单独的数据类进行定义。
在此页进行page对象的实例化,然后BaseTest.ts用户fixture内对此类进行实例,以达到每个用户都可操作所有Page的目的。
包含Context的创建和关闭方法,以及继承playwright test编写的各个用户fixture信息,其他用例从此文件import test即可进行用例编写,编写方式可至playwright官方文档学习。
引用cxxjackie脚本,增加API请求计数,感谢原作者,原文链接:https://bbs.tampermonkey.net.cn/thread-3284-13-1.html
调用ajaxHooker方法,实现当有API请求（XHR和Fetch类型）时,增加蒙层,禁止操作，当前无API正在请求且上一API请求结束80ms以上,删除蒙层,恢复操作.
接口异常规则也在此文件中进行维护.
此时可执行以下命令在hover前停用蒙层
await page.page.evaluate("window.maskTag=0")
同样的,hover完成之后通过以下命令启用蒙层
await page.page.evaluate("window.maskTag=1")
也可通过调用PagesInstance内temporarilyDisableMask方法禁用再启用,调用方式如下:
await temporarilyDisableMask(async () => {
//your code here
});
需执行以下命令临时禁止接口监听
await page.page.evaluate("window.maskTag=0")
同样的,异常测试步骤完成后立即启用
await page.page.evaluate("window.maskTag=1")
也可通过调用PagesInstance内temporarilyDisableDialog方法禁用再启用,调用方式如下:
await temporarilyDisableDialog(async () => {
//your code here
});
监听dom变化,对新出现的button及input等元素进行disable及enable操作.
全局监听指定元素出现并将其隐藏的列表为此文件中listenElementsClassName变量,可在其中增加自己想隐藏的元素,若无此需求,可将此列表清空.