如何解决Automa自动化中动态ngcontent类名的CSS选择器定位问题？

以下是几个可行的固定定位方案，适配Automa浏览器扩展的使用场景：

• CSS选择器匹配前缀忽略动态后缀
  利用CSS属性选择器匹配class以_ngcontent开头的元素，完全避开动态后缀的影响：

  .ad-format-card:nth-child(1) [class^="_ngcontent"]:nth-child(2)
  

  [class^="_ngcontent"]会匹配所有class属性以_ngcontent开头的元素，不管后面的后缀怎么变化。

• 基于元素固定文本/可见特征定位
  如果目标元素有固定的显示文本、图标或其他不变标识，优先用这个方法：

  • 若Automa支持jQuery语法，可用CSS的:contains匹配文本：

    .ad-format-card:nth-child(1) :nth-child(2):contains("你的固定按钮文本")
    

  • 更通用的XPath文本匹配写法：

    //div[contains(@class, 'ad-format-card')][1]/*[2][contains(text(), '你的固定文本内容')]
    

• 基于元素固定属性定位
  检查目标元素是否有data-*、role这类不会随页面加载变化的属性，用这些属性定位更稳定：

  .ad-format-card:nth-child(1) [data-btn-type="action"]:nth-child(2)
  

  对应的XPath写法：

  //div[contains(@class, 'ad-format-card')][1]/*[@data-btn-type="action"][2]
  

• 直接按父元素层级定位子元素
  如果.ad-format-card:nth-child(1)的DOM结构固定，第二个子元素就是目标，直接忽略子元素的动态class：

  .ad-format-card:nth-child(1) > *:nth-child(2)
  

  或者XPath：

  //div[contains(@class, 'ad-format-card')][1]/*[2]
  

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