如何通过目标元素文本获取对应aria-labelledby属性的按钮XPath？

目标HTML结构 #

<button aria-labelledby="ref-1" id="foo" onclick="convey(event)">action 2</button>
<div class="anotherElement">foobar</div>
<div id="ref-1" hidden>target 2</div>

问题描述 #

已知关联元素的文本为"target 2"，且按钮和该元素的位置不固定，需要通过aria-labelledby属性定位对应的按钮。之前尝试了以下XPath表达式，但均无法成功定位：

//*[@aria-labelledby=string(/div[@id="ref-1"]/@id)]
//*[@aria-labelledby = string(.//*[normalize-space() = "target 2"]/@id)]
//*[@aria-labelledby = .//*[normalize-space() = "target 2"]/@id]

正确XPath写法及解释 #

基础写法 #

//button[@aria-labelledby = //*[normalize-space(text()) = "target 2"]/@id]

• //*[normalize-space(text()) = "target 2"]：全局定位到文本内容（去除首尾空格后）为"target 2"的元素，对应示例中id="ref-1"的div。
• /@id：提取该元素的id属性值，即"ref-1"。
• //button[@aria-labelledby = ...]：全局查找aria-labelledby属性等于上述id值的按钮元素。

兼容复杂文本场景的写法 #

如果目标文本所在元素包含子节点，文本并非直接在text()节点中，可以改用normalize-space(.)匹配元素的全部文本内容：

//button[@aria-labelledby = //*[normalize-space(.) = "target 2"]/@id]

之前表达式失败的原因 #

• 第一个表达式中/div[@id="ref-1"]是从根节点（通常是<html>）直接查找div，根节点下没有直接的div，所以找不到目标元素，应该用//div全局查找。
• 后两个表达式中的.//*是相对当前节点查找，若当前节点不是根节点，会无法定位到文本为"target 2"的元素，改用//*全局查找即可解决。

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