懒人自动化生成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. 完善文档。
相关推荐
黎明晓月21 小时前
PostgreSQL提取JSON格式的数据(包含提取list指定索引数据)
postgresql·json·list
心死翼未伤1 天前
python从入门到精通:pyspark实战分析
开发语言·数据结构·python·spark·json
Mephisto.java2 天前
【大数据学习 | flume】flume Sink Processors与拦截器Interceptor
大数据·sql·oracle·sqlite·json·flume
ac-er88882 天前
ThinkPHP中使用ajax接收json数据的方法
前端·ajax·json·php
0x派大星2 天前
【Golang】——Gin 框架中的 API 请求处理与 JSON 数据绑定
开发语言·后端·golang·go·json·gin
不能只会打代码2 天前
支持用户注册和登录、发布动态、点赞、评论、私信等功能的社交媒体平台创建!!!
前端·css·后端·html·json·媒体·社交媒体平台
愚公码农3 天前
MySQL json字段索引添加及使用
数据库·mysql·json
拧螺丝专业户3 天前
gin源码阅读(2)请求体中的JSON参数是如何解析的?
前端·json·gin
Mephisto.java3 天前
【大数据学习 | Spark】yarn-client与yarn-cluster的区别
大数据·sql·oracle·spark·json·database
Mephisto.java3 天前
【大数据学习 | Spark】spark-shell开发
大数据·sql·oracle·spark·sqlite·json