1. auto-uid
- auto-uid
- 使用说明
- 主要功能点
- 适用范围
- import 执行模式
- 命令行模式
- 参数配置文件 auto-uid.config.js
使用说明
提交代码自动为标签添加 唯一ID 属性
解决疼点：UI 自动化测试时，页面上标签的标识变更导致UI测试用例需要重写, auto-uid 主要为了减少ID变更造成的影响
PS. 如使用webpack构建项目，可配合[webpack-plugin-auto-uid](https://www.npmjs.com/package/webpack-plugin-auto-uid)使用。
主要功能点
- 自动在DOM中生成auto-uid
- 支持生成 uid 对应的 map 表，并可自定义任意的 uid
- 可根据 dom 结构生成语义化的 uid
- 支持修改配置文件自定义 uid
适用范围
* 使用 npm package.json 安装依赖的前端项目
* 使用 vue 框架的前端项目
*@TODO 后续可支持任意html片段导入
import 执行模式
2. Usage
npm i auto-uid --save-dev
// or
yarn add auto-uid -D
import AutoUid from 'auio-uid';
const APP = new AutoUid(options).project;
/* options详情见命令行的指令，例如
{
auto:true, // 自动插入执行
clean:true, // 清除所有插入的uid
...
}
*/
APP.getChangeFiles(); // 获取目标文件列表
APP.process(); // 插入uid等操作
APP.realChangeFiles; // 真实改动的文件列表
APP.beforeReadNodesFunc.push(function(nodeData) {
log(nodeData);
return nodeData;
});3. Hooks
PS. 以下 hooks，均在 APP.process()过程中生效。
3.1. beforeReadNodesFunc(node)=>node
读取 dom 节点前执行
3.2. beforeAttrsFunc(attributeArray)=>attributeArray
解析 dom 的 attributes 前的拦截器
3.3. afterAttrsFunc(attributeArray)=>attributeArray
解析 attrs 完成后的拦截器
3.4. beforeProcessFunc(htmlContent)=>htmlContent
解析内容前的拦截器
3.5. afterProcessFuns(parseContent)=>parseContent
content 处理完成后的拦截器
命令行模式
一键初始化 (切换到项目根目录, 然后执行以下命令)(执行完这条命令之后以后每次 commit 的时候会自动生成唯一 ID)
sudo npm install -g auto-uid && auto-uid --auto
安装全局指令
sudo npm install -g auto-uid
设置提交勾子与处理所有文件指令: auto-uid --auto
cd projectRoot && auto-uid --auto
# auto-uid --auto = auto-uid --setup && auto-uid --full
其他操作
设置提交勾子指令: auto-uid --setup
cd projectRoot && auto-uid --setup
# 这个指令自动添加2个npm模块 auto-uid、husky
# 拷贝 auto-uid 模块里的 auto-uid.config.js 到项目根目录
# 拷贝 auto-uid 模块里的 .huskyrc.json 到项目根目录
处理所有文件指令: auto-uid --full
cd projectRoot && auto-uid --full
# 处理所有符合条件的文件
处理指定文件指令: auto-uid --target
cd projectRoot && auto-uid --target ./filepath.vue
# 处理单个指定的文件
处理指定目录文件指令: auto-uid --dir
cd projectRoot && auto-uid --dir dir
# 处理指定目录下的文件
更新已经生成的唯一 ID: auto-uid --update
auto-uid --full --update
# 通常与 --full 或者 --target 结合使用
清空 dom 中写入的 uid: auto-uid --clean
auto-uid --full --clean
使用 dom 结构对应的 uid 代替 uuid: auto-uid --dom
auto-uid --full --dom
dom 中写入的 uid: auto-uid --write
auto-uid --full --write
显示帮助指令: auto-uid --help
auto-uid --help
# 显示所有可用命令
参数配置文件 auto-uid.config.js
如果运行命令的项目根目录有 auto-uid.config.js，工具会自动读取配置参数
4. auto-uid.config.js 说明
{
"extension": [ 'vue' ] //需要处理的文件后缀名
, "language": "vue" //处理标签的前端框架，目前只支持 vue, 未来会支持 react、angular
, "dir": [ 'src' ] //需要处理唯一ID的目录，默认为 src
, "encoding": "utf8" //项目中的文件编码
, "attrname": "data-testid" //唯一ID的属性名
, "idprefix": "" //唯一ID属性值的前缀名
, "dist": "auto-uid.dist.json", //生成UID与DOM对应的MAP，如需自定义，请修改该文件后重新运行
, "fixempty": true //如果唯一ID属性为空自动修复
, "fixrepeat": true //如果唯一ID重复自动去重
//忽略处理的标签名
, "ignoretag": [ "v-hover", "template","v-else", "el-table-column" ]
}