如何为现有React应用自动添加data-cy或data-test测试属性？

本文方案同时适用于Cypress、Selenium等需要元素定位的端到端测试场景。

自动添加的可用工具 #

不需要修改业务源码，可实现批量属性注入：

• 编译层Babel插件：可以使用babel-plugin-react-add-test-attributes类的Babel插件，在应用编译阶段自动为React组件、DOM元素插入自定义测试属性，支持自定义属性名（可指定为data-cy/data-test），也支持配置过滤规则，比如仅为交互类元素（按钮、输入框、下拉框等）添加属性，跳过静态展示元素，适合大型存量项目快速落地测试属性规范。
• 自定义源码转换脚本：如果有特殊的属性值命名规则需求，可以基于jscodeshift编写AST转换脚本，批量遍历所有React组件源码，按自定义规则（比如组件名+元素类型+索引）生成并插入测试属性，灵活度更高。

注意：自动生成的属性值语义度较低，如果测试用例需要高可读性的元素标识，需要配合少量手动调整。

适配React组件架构的简便手动添加方案 #

利用React组件化特性大幅降低手动添加的工作量：

• 封装公共基础组件统一注入
  将项目内通用的Button、Input、Select、Modal等基础UI组件做二次封装，在组件内部统一处理测试属性逻辑，支持外部传入自定义标识，同时内置默认生成规则，避免重复编码。示例代码如下：

// 二次封装的公共按钮组件
const AppButton = ({ children, dataCy, ...restProps }) => {
  // 内置默认属性值规则：按钮+文本内容小写转横线分隔
  const defaultCy = `btn-${children?.toString().replace(/\s+/g, '-').toLowerCase()}`
  return (
    <button
      data-cy={dataCy || defaultCy}
      {...restProps}
    >
      {children}
    </button>
  )
}

// 业务侧调用：不传dataCy则用默认值，有自定义需求时传入即可
<AppButton dataCy="login-submit">登录</AppButton>

• 高阶组件批量注入根元素属性
  编写简单的高阶组件，为所有业务组件的根元素自动添加基于组件名的测试属性，比如组件名为UserList，自动注入data-cy="user-list-root"，不需要每个组件手动编写根元素的测试属性。
• 统一命名规则降低维护成本
  约定测试属性值遵循页面-模块-元素类型-含义的命名规则，比如user-list-delete-btn、login-form-account-input，既可以避免属性名冲突，也能让测试用例的元素选择逻辑更易读易维护。

额外优化建议：可以在生产构建时配置Babel插件剔除所有data-cy/data-test类属性，不会对线上包体积和运行逻辑产生任何影响。

内容的提问来源于stack exchange，提问作者Rnj