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

前言

本工具实现的是:使用简单的 JSON 配置,生成可执行的 playwright UI 测试文件。
然后通过项目内已经配置好的 playwright 配置实现 UI 测试。

工具工作流程:

j2p.png

期望达到的目的是:

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

访问地址: 点击此处🔗 以及 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 后在命令行中:

image.png

在指定目录查看生成的两个文件:

image.png

运行 e2e 测试命令后(首次运行使用 npx playwright test --update-snapshots 更新快照):

image.png

之后即可正常使用 npx playwright test`` 。

页面截图:

pince/url-test.spec.tspince/work-item-test.spec.ts
image.pngimage.png

目前进度

完成了基本的功能。从 json 到 *.spec.ts 测试文件的生成以及简单的两个模版。

基础的设计

image.png

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

TODO

  1. 完善模版支持更多场景;
  2. 支持自定义模版;
  3. 完善文档。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/40250.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Spring Boot学习一】创建项目 Spring Boot的配置文件

目录 一、安装插件 二、创建Spring Boot项目 1、创建项目 1.1 使用IDEA创建 1.2 网页版本创建 2、项目目录介绍与运行 三、Sping Boot的配置文件(重点) 🌷1、.properties配置文件 (1)基础语法:Key …

session 生命周期和经典案例-防止非法进入管理页面

文章目录 session 生命周期和Session 经典案例-防止非法进入管理页面session 生命周期Session 生命周期-说明代码演示说明 Session 的生命周期创建CreateSession2创建ReadSession2 解读Session 的生命周期代码示例创建DeleteSession Session 经典案例-防止非法进入管理页面需求…

教你快速安装Bootstrap

目录 Bootstrap简介Bootstrap的下载Bootstrap的使用 Bootstrap简介 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作,基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架,它会使Web开发更加快捷Bootstrap框架的优点 开发…

MFC加载3ds模型初步

网上下一个资源,名为 OpenGL三维场景绘制.rar; 看一下它是用MFC和opengl,自己绘制三维场景; 运行一下,有一个exe可以运行; 有一个较新版本的不能运行;这应是缺少VC运行库; 下面单独…

基于Selenium+Python的web自动化测试框架(附框架源码+项目实战)

目录 一、什么是Selenium? 二、自动化测试框架 三、自动化框架的设计和实现 四、需要改进的模块 五、总结 总结感谢每一个认真阅读我文章的人!!! 重点:配套学习资料和视频教学 一、什么是Selenium? …

坐标系变换的坑

坐标系变换的坑 坐标系变换本来是很简单的事情,公式也很简单。但是卡了我很多天,原因是:两个坐标系的位姿,虽然都是右手系,但我的在顺时针旋转是yaw角是递增的,同事发给我的却是逆时针递减的。 理论上很简…

使用openvpn docker及frp docker工具构建虚拟专业网络(V-P-N)

使用openvpn docker及frp docker工具构建虚拟专业网络(V-P-N) 借助Docker和OpenVPN技术,您可以在短时间内设置并运行VPN服务器,并保证您的服务器安全。 运行环境 Ubuntu 16.04 TLS Docker version 19.03.8, build afacb8b7f0 OpenVPN Android Client …

zabbix-server监控mysql数据库及httpd服务、监控apache、监控ftp

目录 一、监控mysql数据库及httpd服务 1、为server.Zabbix.com添加服务模板 2、server.zabbix.com服务端 操作 3、编辑chk_mysql.sh脚本 4、server.zabbix.com测试 二、监控apache 1、获取键值 2、服务器操作 3、zabbix监控web端导入监控模板 4、server.zabbix.com添加…

MediaType的常用类型-GPT问答

MediaType的常用类型-GPT问答 MediaType是一个枚举类,包含了常见的媒体类型。下面是一些常用的MediaType类型: APPLICATION_JSON:JSON格式的数据APPLICATION_XML:XML格式的数据APPLICATION_FORM_URLENCODED:表单格式的…

Baichuan-13B 介绍及微调

文章目录 Baichuan-13B介绍Baichuan-13B特点Baichuan-13B效果Baichuan-13B模型参数 推理和部署模型下载模型推理 微调和部署下载仓库配置环境微调数据微调过程 Baichuan-13B介绍 2023年7月11日,百川智能发布Baichuan-13B! github地址:https:…

【启发式算法】灰狼优化算法【附python实现代码】

写在前面: 首先感谢兄弟们的订阅,让我有创作的动力,在创作过程我会尽最大能力,保证作品的质量,如果有问题,可以私信我,让我们携手共进,共创辉煌。 路虽远,行则将至&#…

【产品经理】小型团队通用工作流程SOP方案

:所谓SOP,即标准作业程序,指将某一事件的标准操作步骤和要求以统一的格式描述出来,用于指导和规范日常的工作。实际执行过程中sop核心是符合本企业并可执行,不流于形式。 一、跨部门工作流程 跨部门流程及职能如下图展…

6.3.5 利用Wireshark进行协议分析(五)----捕获并分析ICMP报文

6.3.5 利用Wireshark进行协议分析(五)----捕获并分析ICMP报文 一、捕获ICMP报文 打开Wireshark,选择网络接口并点击开始按钮。分组列表面板不断刷新抓渠道的数据包,为了过滤出我们所要分析的ICMP报文,我们在过滤框中输…

点大商城V2_2.5.0 全开源版 商家自营+多商户入驻 百度+支付宝+QQ+头条+小程序端+unipp开源前端安装测试教程

播播资源安装点大商城V2_2.5.0 全开源版测试后发现后台总体体验下来比较简洁,营销功能还是挺多该有的都有了,相比上一版优化很多细节。首页和会员中心均支持DIY装修,底部菜单也一样,安装测试中目前未发现BUG,小程序整体…

macOS 怎么安装redis数据库

1 访问redis数据库下载网址 http://download.redis.io/releases/ 访问上述的redis下载的网址,确定你想要的版本 然后下载即可 (我选则的是6.2.6) 然后下载 下载后 把这个文件解压,放在自己想要放在的位置 2 打开终端 输入对应的…

1770_VirtualBox下安装Debian

全部学习汇总: GreyZhang/little_bits_of_linux: My notes on the trip of learning linux. (github.com) 作为我自己的日常使用,Debian基本上没有出现过。最多是让它运行在某个设备上作为一个服务的平台,因为很多东西我懒得去配置。 Debia…

mysql中的Innodb_buffer_pool_reads和Innodb_buffer_pool_read_requests

Innodb_buffer_pool_reads和Innodb_buffer_pool_read_requests是什么? mysql服务器维护了很多状态变量(status variables),这些变量提供了其相关操作的信息。 我们可以通过SHOW [GLOBAL | SESSION] STATUS 查看这些变量以及变量值。这些变量有很多&…

Linux--获取最近一次的进程退出码:echo $?

举例&#xff1a; #include <stdio.h> int main() { printf("hello world,pid: %d,ppid: %…

面试题:redis是单线程、StringBuffer是线程安全的

1、说明String 和StringBuffer的区别 类底层/ 可变&#xff1f;线程安全Stringfinal char[] 不可变是StringBuffer char[] 可变 是&#xff08;synchronized方法&#xff09;StringBuilder char[] 可变否 (4条消息) Java基础&#xff1a;String、StringBuffer、…

Linux 漏洞扫描

Linux 漏洞扫描程序会仔细检查基于 Linux 的系统&#xff0c;以减轻潜在的风险和漏洞。 什么是 Linux 漏洞扫描程序 Linux 漏洞扫描程序是一种专门的漏洞扫描工具&#xff0c;旨在识别基于 Linux 的系统中的安全漏洞和弱点,它会扫描配置错误、过时的软件版本和已知漏洞。 为…