@antcube/wpt

wpt test case to cube test case tool

Usage no npm install needed!

<script type="module">
  import antcubeWpt from 'https://cdn.skypack.dev/@antcube/wpt';
</script>

README

本项目为转化 wpt case 的工具.

命令安装

tnpm install @antcube/wpt -g

帮助以及参数说明

查看帮助

acwpt -h

参数说明

  1. -w 要转化的 wpt 的 case 的根目录.
  2. -o 输出的 Cube 工程以及其他产物的根目录
  3. -i wpt case 中需要缓存的图片的路径(可选)

输出

输出有两个文件夹

  • 一个文件夹将每一个可用的 html 转化成一个对应的 Cube App 工程, 放在该文件夹的根目录下. 并编译一遍. 这个给 Rubik 自动化测试用
  • 另一个文件夹将所有的 html 导出成一个工程, 可以直接编译, 扫码运行

主要功能点

  1. 如果输入的参数中有 wpt 的 case 的图片地址. 那么将该目录下的所有图片, 都上传到 basement, 并把结果以map形式保存到本地. map 的key 为 该图片的相对路径, value 为图片上传后的 url
  2. 将需要转化的 wpt 的 case 的根目录下的所有的 html 文件都遍历一下, 解析里面的标签以及 css style, 过滤掉 Cube 不支持的 case. 将里面的 css style 以及 body 内的 标签转化成 Cube 的 Vue 页面. 并编译通过
  3. 保存每一个页面对应的 SQL 语句
  4. 生成 Rubik 自动化测试的 Runner && Method
  5. 增量处理的逻辑. 如果检测到 图片已经上传(html文件没变化/SQL已经导出) 等则不在进行该操作

代码结构说明

  • Parser -- 用来解析 html / css / JS 的
  • Model -- 存放解析结果的数据模型
  • Cache -- 缓存文件相关信息以及已经处理的文件信息(doing)
  • Image -- 图片上传模块, 以及保存结果
  • CubeMaker -- 解析结果转化为Cube工程以及其他产物的逻辑
  • Utils -- 工具类方法
  • index -- 工具入口

注意事项:

  • 因为依赖了basement模块所以需要用 tnpm install
  • HtmlParser2 的接口文档缺少一个方法. 需要在 DomHandler 的声明中增加一个方法
    onattribute(name:string, value:string):void;