如何通过自定义属性data-test-field-name获取目标HTML元素

针对动态ID无法用来定位元素的场景，直接使用CSS属性选择器匹配自定义属性即可，以下是具体实现方案：

原生JavaScript实现 #

• 选取首个匹配元素
  使用document.querySelector传入属性选择器规则，即可直接获取目标元素：

  const targetElement = document.querySelector('[data-test-field-name="Opportunity name"]');
  

  无匹配元素时返回值为null，匹配成功则返回对应的DOM元素对象。
• 选取所有匹配元素
  如果页面存在多个符合规则的元素，改用document.querySelectorAll：

  const targetElementList = document.querySelectorAll('[data-test-field-name="Opportunity name"]');
  

  返回值为包含所有匹配元素的NodeList集合，无匹配时返回空集合。

注意事项 #

• 由于你要匹配的属性值包含空格，必须在选择器中用引号（单引号、双引号均可）完整包裹属性值，否则选择器会解析失效。
• 如果你是在Ember框架的测试场景下使用，这类data-test-*格式的属性本身就是Ember官方推荐的测试定位属性，上述选择器语法可以直接适配，完全不受动态生成的id影响。
• 其他前端框架（React/Vue等）的元素选择API、测试工具（Cypress/Playwright等）也都原生支持该属性选择器语法，直接传入同样的规则即可使用。

内容的提问来源于stack exchange，提问作者Lucas de Lagos Pandolfi Garcia