如何创建匹配多个CSS类的XPath并验证其正确性？

一、精准匹配多CSS类的XPath写法 #

要匹配同时包含多个CSS类的元素，最严谨的方式是通过拼接空格避免类名的部分匹配（比如防止message-box被误判为包含message），写法如下：

//*[contains(concat(' ', normalize-space(@class), ' '), ' message ') and contains(concat(' ', normalize-space(@class), ' '), ' test-message ')]

这里的normalize-space会先清理类属性里的多余空格，再用concat给首尾加空格，确保只有完整的类名片段会被匹配。

二、结合指定文本的完整XPath #

如果还要筛选文本包含「Test Message」「CheckMessage」「Administrator」中任意一个的元素，只需用or连接文本匹配条件：

//*[
  contains(concat(' ', normalize-space(@class), ' '), ' message ') 
  and contains(concat(' ', normalize-space(@class), ' '), ' test-message ')
  and (
    contains(text(), 'Test Message') 
    or contains(text(), 'CheckMessage') 
    or contains(text(), 'Administrator')
  )
]

三、准确性验证 #

1. 类匹配验证：上述写法不会误匹配类名包含目标片段但并非完整类的元素（比如message-box），确保只有同时拥有指定完整类的元素被选中。
2. 文本匹配验证：contains(text(), 'xxx')会命中所有文本节点包含目标字符串的元素，不管文本在元素内的位置；如果需要精确匹配完整文本，把contains替换成text()='xxx'即可。
3. 结合你提供的元素场景，只要目标元素的类包含指定CSS类，且文本包含三个指定内容之一，这个XPath就能精准定位到它，不会出现漏判或误判。

四、简化写法（慎用） #

如果你的页面不存在类名部分重叠的情况，也可以用更简洁的写法，但存在误判风险：

//*[contains(@class, 'message') and contains(@class, 'test-message') and (contains(text(), 'Test Message') or contains(text(), 'CheckMessage') or contains(text(), 'Administrator'))]

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