本工具实现的是:使用简单的 JSON 配置,生成可执行的 playwright UI 测试文件。
然后通过项目内已经配置好的 playwright 配置实现 UI 测试。
工具工作流程:
期望达到的目的是:
访问地址: 点击此处 以及 npm 包地址。
全局安装后提供
pince
命令。
或者安装在项目目录sudo npm i json2playwright
,同样有 pince 命令。
在项目中 test-project/tests/pince.config.json
有这样的 JSON 文件:
{
"outputDir": "./tests/pince",
"urls": [
{
"title": "url-test",
"url": "https://www.baidu.com",
"testConfig": {
"loadedFlag": "waitForUrl",
"waitForUrl": "https://www.baidu.com"
},
"pageSize": {
"width": 800,
"height": 1000
},
"selector": "#head",
"beforeTest": []
},
{
"title": "work-item-test",
"url": "https://playwright.alpha.pingcode.live/pjm/items/6255378cd7a753d4d68ba353?#DEMO-78 用户免责声明文案有错别字",
"testConfig": {
"loadedFlag": "waitForRequest",
"requests": [
"https://playwright.alpha.pingcode.live/api/agile/work-items/.*",
"https://playwright.alpha.pingcode.live/api/ladon/customization/guider/statuses.*",
"https://playwright.alpha.pingcode.live/api/agile/work-items/.*/select-able/tags.*",
"https://playwright.alpha.pingcode.live/api/agile/work-items/.*/comments.*",
"https://playwright.alpha.pingcode.live/api/agile/work-items/.*/select-able/tags.*"
]
},
"pageSize": {
"width": 1200,
"height": 1000
},
"selector": ".thy-dialog-container > agile-work-item-detail > .styx-pivot-detail",
"beforeTest": []
}
]
}
运行命令 pince -c ./tests/pince.config.json
后在命令行中:
在指定目录查看生成的两个文件:
运行 e2e 测试命令后(首次运行使用 npx playwright test --update-snapshots
更新快照):
之后即可正常使用
npx playwright test`` 。
页面截图:
pince/url-test.spec.ts | pince/work-item-test.spec.ts |
---|---|
![]() |
![]() |
完成了基本的功能。从 json 到 *.spec.ts 测试文件的生成以及简单的两个模版。