懒人自动化生成e2e测试文件:JSON => playwright

前言

本工具实现的是:使用简单的 JSON 配置,生成可执行的 playwright UI 测试文件。

然后通过项目内已经配置好的 playwright 配置实现 UI 测试。

工具工作流程:

期望达到的目的是:

  1. ✅ 基础页面(进入页面)即获取页面快照对比
  2. ✅ 等待页面某些请求结束,才进行页面快照对比
  3. ⚪️ 进入页面点击按钮等,等待新元素加载完毕进行快照对比
  4. ...

访问地址: 点击此处🔗 以及 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 测试文件的生成以及简单的两个模版。

基础的设计

  1. JSON 文件解析器:负责解析输入的 JSON 文件。它可以读取 JSON 文件并将其转换为内部表示形式,以便后续处理。
  2. 模板:可以使用模板引擎来生成测试文件的代码。它可以使用预定义的测试文件模板,并将解析后的 JSON 数据填充到模板中,生成最终的测试文件。
  3. 测试文件生成器:根据解析后的 JSON 数据,生成对应的 Playwright 测试文件。它可以根据不同的测试场景、用例和数据,生成相应的测试代码。需要考虑生成正确的 Playwright API 调用,设置必要的断言和验证等,针对 ngx-styx 的自定义 fixture 需要做兼容等处理。
  4. 配置管理器:用于管理 Playwright 测试的配置。它可以读取和解析配置文件,包括基础的 playwright 测试配置,如测试窗口大小等。
  5. 扩展支持:考虑为包的使用者提供扩展性支持。例如,允许用户自定义模板或添加自定义的功能扩展。
  6. 其他:提供文档和示例,帮助用户了解如何使用该包和正确配置测试文件的 JSON 输入。测试覆盖和错误处理,确保编写充分的单元测试和集成测试,以确保包的质量和稳定性。

TODO

  1. 完善模版支持更多场景;
  2. 支持自定义模版;
  3. 完善文档。
相关推荐
奔跑的蜗牛AZ9 天前
TiDB 字符串行转列与 JSON 数据查询优化知识笔记
笔记·json·tidb
夜寒花碎10 天前
Playwright 环境安装和配置指南
前端·e2e·前端工程化
jarctique11 天前
java 找出两个json文件的不同之处
java·json
wtsolutions12 天前
Excel to JSON online converter, flat and nested JSON converter
json·excel·excel-to-json·wtsolutions
漫谈网络13 天前
JSON 数据格式详解
网络·python·json·数据格式
lwb_011814 天前
Spring MVC参数绑定终极手册:单&多参对象集合JSON文件上传精讲
spring·json·mvc
电商数据girl14 天前
【经验分享】浅谈京东商品SKU接口的技术实现原理
java·开发语言·前端·数据库·经验分享·eclipse·json
亚林瓜子14 天前
AWS S3拒绝非https的请求访问
https·云计算·json·ssl·aws·s3
于本淡15 天前
一篇文章快速学会HTML
开发语言·前端·数据结构·qt·html·json·html5
HaiQinyanAN15 天前
【学习笔记】nlohmannjson&&cjson
c++·笔记·学习·json