能否通过CSS选择器或XPath基于元素的计算ARIA名称（无障碍名称）定位元素？

我太懂你这个困扰了——想靠元素的计算后无障碍名称（就是浏览器根据文本、aria属性这些规则算出来的ARIA名称）用CSS或者XPath定位元素，比如那个写着Hello的按钮，默认用内部文本当无障碍名称，但直接写[aria-label=Hello]却找不到它，对吧？

先给你划几个关键结论：

• CSS选择器完全做不到直接匹配计算后的无障碍名称
  CSS只能匹配元素上显式声明的DOM属性，而计算后的无障碍名称是浏览器后台根据规则生成的，它并不是元素的一个实际DOM属性。所以你用[aria-label=xxx]只能找到主动添加了aria-label="xxx"属性的元素，像你例子里那个只有文本的Hello按钮，自然匹配不到。

• XPath也没有直接方法，但能根据规则间接变通
  XPath同样没法直接获取浏览器计算后的无障碍名称，但可以顺着无障碍名称的生成逻辑来写选择器：

  • 如果无障碍名称就是元素的文本内容（比如你例子里的Hello按钮），可以用//button[normalize-space(text())='Hello']，normalize-space是用来处理文本里可能存在的换行、多余空格的，避免因为格式问题匹配失败。
  • 如果元素是通过aria-labelledby关联其他元素来生成无障碍名称的，那可以写//button[@aria-labelledby='目标元素的id']，再结合关联元素的文本做进一步匹配。
  • 如果元素显式声明了aria-label，那和CSS逻辑一样，用//*[@aria-label='xxx']就能定位。

• 给你几个适配场景的可行方案

  1. 针对你例子里的Hello按钮，直接用XPath匹配文本是最直接的，比如//button[text()='Hello']；要是用robotframework-browser的话，也可以试试它的文本定位语法，比如button:has-text('Hello')（部分环境支持这类扩展选择器）。
  2. 如果你一定要精准匹配计算后的无障碍名称（不管它是怎么生成的），那只能靠JavaScript来实现——用浏览器的getComputedAccessibleName() API，这个API能直接拿到元素的计算后无障碍名称。比如把你的clickme函数改成这样：

  let clickme = () => {
    // 先获取所有按钮元素
    let allButtons = document.querySelectorAll('button');
    // 筛选出无障碍名称为Hello的元素
    let matchedButtons = Array.from(allButtons).filter(btn => getComputedAccessibleName(btn) === 'Hello');
    console.log('找到的符合条件的元素数量：', matchedButtons.length); // 这里会返回1
  };
  

  在robotframework里，你可以通过执行这段JS来定位目标元素，再进行后续操作。
  3. 其实你提到的robotframework-browser的Get By Role虽然要额外变量，但用起来反而更靠谱——比如Get By Role button name=Hello，直接指定角色和无障碍名称，这本身就是专门针对无障碍定位设计的方法，比写复杂的选择器更稳定。

最后补一句：你例子里的document.querySelectorAll('[aria-label=Hello]')返回0完全正常，因为那个Hello按钮根本没有显式声明aria-label属性，CSS找不到太合理啦～

内容来源于stack exchange