如何在 XPath 中定位带有额外包装标记的按钮？

Posted 2023-02-16

【中文标题】如何在 XPath 中定位带有额外包装标记的按钮？

【英文标题】：How do I target a button with extra wrapper tag in XPath?

【发布时间】：2022-01-16 00:36:49

【问题描述】：

我尝试针对以下内容，但似乎无法使其正常工作。我得到的错误是

错误：节点要么不可点击，要么不是 htmlElement。

javascript

const btn = await page.$x(//button[contains(., 'My Button')])
await btn[0].click()

HTML/XML

<div>
<button>
<translate original="My Button">My Button</translate>
</button>
</div>

【参考方案1】：

代替

//button[contains(., 'My Button')]

试试

//translate[contains(., 'My Button')]

或许

//*[local-name()='translate' and contains(., 'My Button')]

【讨论】：

好的工作解决方案（+1），但最好不要encourage misuse of contains() where better alternatives exist

【参考方案2】：

如果您确实需要子字符串匹配（例如，"My Button"、"Not My Button" 和 "My Buttonless Shirt" 的全部），则将 contains() 用作 @Prophet shows。

另一方面，如果您只是想抽象出 空白（以及包装目标文本的任何元素），则使用normalize-space()：

//button[normalize-space() = 'My Button']

这将选择button 元素，其空间标准化string value 恰好是'My Button'。

另见

How to use XPath contains() for specific text? What does contains() do in XPath?

【讨论】：

感谢您的改进评论和 +1，但您不应该像我使用的那样使用 translate 标签名称或 local-name()='translate'，因为它不是包含 My Button 而 translate 元素的按钮包含那个？ +1 回 ;)

取button 的字符串值 会使包装"My Button" 的任何元素的名称甚至存在都无关紧要，我认为这是首选。如果translate 的存在确实很重要，那么要选择包含translate 元素且字符串值为"My Button" 的button 元素，请使用此XPath：//button[normalize-space(translate) = 'My Button']