使用bunit的Find方法选择含|的CSS ID时抛出异常

CSS中|的特殊含义 #

CSS选择器里的|是命名空间分隔符，用来区分不同XML命名空间下的元素（比如SVG与HTML混合的场景）。但HTML页面里基本用不上这个特性，可一旦控件ID包含|，直接写#xxx|yyy这类选择器时，CSS解析器会把xxx当成命名空间、yyy当成元素名，不会将其识别为ID的一部分，这就是你用bunit的Find方法找不到元素的核心原因。

解决方法 #

有两种实用的处理方式：

• 转义特殊字符：在CSS选择器里把|用\|转义。注意在C#代码中需要写双反斜杠（因为C#里反斜杠本身是转义符），示例：

  var targetElement = cut.Find("#my\\|control");
  

• 使用属性选择器：直接通过[id="完整ID"]的方式匹配，这种写法无需转义，更直观：

  var targetElement = cut.Find("[id='my|control']");
  

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