前言

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

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

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

封装动态添加属性（属性可以是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.childNodes
      let id ='FIX_'+a.id
      abc(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.className
                abc(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的封装