SitePrism嵌套评论区块元素AmbiguousMatches匹配问题咨询

问题根源 #

SitePrism中Section内部定义的element默认会在当前Section对应根节点的所有后代节点中匹配选择器，你当前场景下嵌套在.replies节点下的子评论也包含同名类元素，因此会触发AmbiguousMatches多匹配异常。

方案1：CSS直接子选择器（最优，适配你提供的HTML结构） #

你给出的HTML结构中，当前评论的.commentText、.replyButton都是.comment根节点的直接子元素，嵌套子评论的对应元素都在.replies节点下，不属于根节点的直接子，因此使用直接子匹配符>即可精准限定匹配范围：

class Comment < SitePrism::Section
  # 仅匹配当前Section根节点的直接子元素，不会深入子节点
  element :body,         '> .commentText'
  element :reply_button, '> .replyButton'
  # 子评论仅匹配当前根节点下.replies中的直接子评论，避免重复匹配
  sections :child_comments, Comment, '> .replies > .comment'
end

方案2：排除匹配语法（适配非直接子的复杂结构） #

如果实际业务HTML中.commentText、.replyButton不是根节点的直接子，中间存在其他封装节点，可以使用排除规则过滤掉.replies下的所有元素：

CSS选择器版 #

element :body, '.commentText:not(.replies .commentText)'
element :reply_button, '.replyButton:not(.replies .replyButton)'

XPath选择器版（兼容性更强） #

如果测试运行环境对CSS3选择器支持不完善，优先使用XPath实现排除逻辑：

element :body, :xpath, './/*[contains(@class,"commentText") and not(ancestor::*[contains(@class,"replies")])]'
element :reply_button, :xpath, './/*[contains(@class,"replyButton") and not(ancestor::*[contains(@class,"replies")])]'

以上方案均可完全替代你当前使用的复数elements取首项的hack写法，匹配结果唯一且逻辑清晰。

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