封装React.createElement,使页面创建元素的时候添加唯一属性

前言

最近接到一个测试同学的需求,为了方便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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,860评论 1 18
  • kmokidd ·3 天前 本篇为联合翻译,译者:寸志,范洪春,kmokidd,姜天意 数月前,Facebook ...
    东引瓯越阅读 1,939评论 0 49
  • 40、React 什么是React?React 是一个用于构建用户界面的框架(采用的是MVC模式):集中处理VIE...
    萌妹撒阅读 1,069评论 0 1
  • 3. JSX JSX是对JavaScript语言的一个扩展语法, 用于生产React“元素”,建议在描述UI的时候...
    pixels阅读 2,896评论 0 24
  • 周末,带着孩子去家门前的湿地走了一圈。 有小桥,有流水,有人家,还有我和家人。 风和,日丽,草正青,只是满地的落叶...
    田忆子阅读 497评论 0 1