文章目录

前言封装动态添加属性（属性可以是id） 总结

前言

提示：这里可以添加本文要记录的大概内容：

例如：使用场景：当项目写完，需要自动化测试不兼容事，可以用下，其他的好像没用，

提示：以下是本篇文章正文内容，下面案例可供参考

封装动态添加属性（属性可以是id）

需要在app.vue里面引入并使用在mounted,updated里面，一个初始化一个有更新后，启用监听

export const addId=(e)=>{let a= document.getElementById(e)//组件层id//!获取最外层app 循环添加id(test文本类容添加外层标签的id)let ob = new MutationObserver(entries => {if(entries.length>1){let childNodes= a.childNodeslet id ='FIX_'+a.idabc(childNodes,id)function abc(childNodes ,id){for (const [num,i] of childNodes.entries() ) {if(i.nodeType!=1&&i.nodeType!=3){//不为他们时跳过当前continue}if(i.nodeType === 1){//为标签时if(i.localName=='input'){if(i.placeholder=='User Name'||i.placeholder=='User password'){i['data-testID']=id+'_'+i.placeholder.trim().split(' ').join('_')}}else if(i.localName=='tr'){//为表格时加索引id=id+'_'+(num+1)abc(i.childNodes,id)}else if(i.className=='el-dialog__wrapper'){//遮罩层加前缀区分id=id+'_'+i.classNameabc(i.childNodes,id)}else{//常规 有id就清空加id,没有默认追加if(i.id!=''&&i.id.split('-').length==1){id='Fix_'+i.id}abc(i.childNodes,id)}}else if(i.nodeType === 3&&i.data!=' '){//文本，有内容时let ids=id+'_'+i.data.trim().split(' ').join('_')if(i.parentNode.className=='colorP' ||i.parentNode.className=='apnTitle'){//为提交表单时if((i.parentNode).parentNode.parentNode.localName=='form'){((i.parentNode).parentNode.parentNode)['data-testID']=ids.split('：'||':')[0]}else{((i.parentNode).parentNode)['data-testID']=ids.split('：'||':')[0]}}else{//*去除：分号 空格(i.parentNode)['data-testID']=ids.split('：'||':')[0]}}}}}})// 监听元素变化 所有子元素ob.observe(a, {attributes: true, subtree: true })}

总结

提示：关于自动添加固定id的封装