前言
本工具实现的是：使用简单的 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 测试文件的生成以及简单的两个模版。
基础的设计
- JSON 文件解析器：负责解析输入的 JSON 文件。它可以读取 JSON 文件并将其转换为内部表示形式，以便后续处理。
- 模板：可以使用模板引擎来生成测试文件的代码。它可以使用预定义的测试文件模板，并将解析后的 JSON 数据填充到模板中，生成最终的测试文件。
- 测试文件生成器：根据解析后的 JSON 数据，生成对应的 Playwright 测试文件。它可以根据不同的测试场景、用例和数据，生成相应的测试代码。需要考虑生成正确的 Playwright API 调用，设置必要的断言和验证等，针对 ngx-styx 的自定义 fixture 需要做兼容等处理。
- 配置管理器：用于管理 Playwright 测试的配置。它可以读取和解析配置文件，包括基础的 playwright 测试配置，如测试窗口大小等。
- 扩展支持：考虑为包的使用者提供扩展性支持。例如，允许用户自定义模板或添加自定义的功能扩展。
- 其他：提供文档和示例，帮助用户了解如何使用该包和正确配置测试文件的 JSON 输入。测试覆盖和错误处理，确保编写充分的单元测试和集成测试，以确保包的质量和稳定性。
TODO
- 完善模版支持更多场景；
- 支持自定义模版；
- 完善文档。
