Capybara校验HTML元素class/ID时选择器写法错误如何解决

问题背景 #

待校验存在的目标页面元素代码如下：

<i class="ui-grid-icon-cancel" ui-grid-one-bind-aria-label="aria.removeFilter" aria-label="Remove Filter">&nbsp;</i>

原有校验代码无法正确匹配元素：

page.should have_css('class#ui-grid-icon-cancel')

错误原因 #

原代码使用的CSS选择器不符合语法规则：

• #是CSS的ID选择器前缀，用于匹配元素的id属性值，无法用来匹配class属性
• 不需要额外写class关键字作为选择器前缀，该写法会被识别为查找标签名为class的元素，和目标<i>标签完全不匹配

正确写法 #

基础匹配（仅校验class存在） #

类选择器的语法为.class名称，对应校验代码：

# 匹配所有带ui-grid-icon-cancel类的元素
page.should have_css('.ui-grid-icon-cancel')

精准匹配（限定标签类型） #

如果要避免匹配到其他同class名的非i标签元素，可以加上标签选择器限定：

# 仅匹配带ui-grid-icon-cancel类的i标签
page.should have_css('i.ui-grid-icon-cancel')

严格匹配（追加属性校验） #

如果需要同时校验元素的属性符合预期（比如本案例中的aria-label属性），可以叠加属性选择器，匹配精度更高：

# 同时校验标签、class、aria-label属性完全匹配
page.should have_css('i.ui-grid-icon-cancel[aria-label="Remove Filter"]')

Capybara常用CSS选择器速记 #

• 标签匹配：直接写标签名，例如i匹配所有i标签
• 类匹配：.类名，例如.active匹配所有带active类的元素
• ID匹配：#id值，例如#submit-btn匹配id为submit-btn的元素
• 属性匹配：[属性名="属性值"]，例如[name="username"]匹配name属性为username的元素

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