前言

最近接到一个测试同学的需求，为了方便UI自动化定位，他们希望给每个html元素添加一个唯一标示。目前我们使用的是react，所以下面方法主要针对react用户。

方案

对于SPA应用，在页面加载的时候会执行对应的打包js代码，里面一般是这样的：

image

那其实答案已经有了，只要改变一下React.createElement，增加额外的props就能解决这个需求了；但需要明白一点，每次页面刷新同一个地方的元素为唯一属性一定是不变的，否则就失去意义了。

代码

import React, {
  ReactHTML,
  ClassAttributes,
  ReactNode,
  HTMLAttributes,
  ReactSVG,
  SVGAttributes,
  DOMAttributes,
} from 'react';
import md5 from 'md5';

/**
 * 封装React.createElement方法
 * 使页面创建元素的时候都添加一个data-key的唯一属性，方便做自动化测试
 * data-key的生成过程会先拼接元素的所有string类型属性，并且会 自动继承上级的data-key
 * 最终由md5创建一个不可逆的加密
 * 其他：
 * 1、需要注意的是，如果元素存在动态的属性，比如className，那他的data-key也会不同；
 * 2、为了保证尽可能的唯一，在自定义attribute的基础上增加了{attribute}-url的属性，为了尽可能存在一个唯一属性；
 */
export interface ReactUniqueKeyProps {
  attribute?: string; // default data-key（注意这里的格式应是 data-*）
}
const reactUniqueKey = (props?: ReactUniqueKeyProps) => {
  const { attribute = 'data-key' } = props || {};
  const createEle = React.createElement;
  const urlKeys = {};
  React.createElement = function createElement<
    P extends HTMLAttributes<T> | SVGAttributes<T> | DOMAttributes<T>,
    T extends HTMLElement | SVGElement | Element
  >(
    type: keyof ReactHTML | keyof ReactSVG | string,
    props?: (ClassAttributes<T> & P) | null,
    ...children: ReactNode[]
  ) {
    const keyStrings = [];
    if (typeof type === 'string') {
      keyStrings.push(`[label=${type}]`);
    }
    // 这一步会自动添加上级的attribute生成新的
    if (props) {
      Object.keys(props).forEach(key => {
        const value = props[key];
        if (typeof value === 'string') {
          keyStrings.push(`[${key}=${value}]`);
        }
      });
    }
    // 尽可能保证有个唯一属性
    const url = window.location.href;
    const attributesWidthUrl = [`[url=${url}]`, ...keyStrings];
    let attributeKey = md5(keyStrings.join(';'));
    let attributeUrl = md5(attributesWidthUrl.join(';'));
    // 同页面下记录并防重（li元素等情况）
    if (!urlKeys[url]) {
      urlKeys[url] = {
        index: 0,
        keys: [],
      };
      urlKeys[url].keys.push(attributeKey);
    } else {
      if (urlKeys[url].keys.includes(attributeKey)) {
        urlKeys[url].index += 1;
        attributeKey += urlKeys[url].index;
        attributeUrl += urlKeys[url].index;
      } else {
        urlKeys[url].keys.push(attributeKey);
      }
    }
    const newProps = {
      ...props,
      [attribute]: attributeKey,
      [`${attribute}-url`]: attributeUrl,
    };
    return createEle(type, newProps, ...children);
  } as any;
};

export default reactUniqueKey;

使用

在配置文件中引入并执行即可（如app.ts）

import reactUniqueKey from './utils/react-unique-key';
reactUniqueKey();

效果

image.png

data-key-url与data-key的区别：

data-key-url： 保证每个页面的都不同
data-key： 每个页面相同的部分还是不变的

这样可以提供更多的UI定位方法

其他方案

还可以通过SSR的方式，ReactDOM.hydrate 会自动给每个节点添加data-reactid，有兴趣可以自行研究一下。

github

https://github.com/aisriver