使用RSpec和Capybara匹配含HTML标签文本测试失败，如何解决？

问题根源 #

Capybara的:text参数（以及have_text/have_content方法）默认匹配的是浏览器渲染后的纯文本内容（会自动剥离HTML标签），所以直接传入带<b>的字符串时，会和页面实际渲染的Text with HTML tags不匹配，导致测试失败。

解决方案 #

方案1：断言元素的HTML源码（innerHTML）

如果需要精确匹配包含HTML标签的内容，可以直接获取元素的innerHTML进行断言：

# 方式1：直接获取元素并检查innerHTML
expect(find('#dom_id').native.inner_html).to include('Text with <b>HTML tags</b>')

# 方式2：结合have_css的块断言
expect(page).to have_css('#dom_id', visible: true, count: 1) do |element|
  expect(element.native.inner_html).to include('Text with <b>HTML tags</b>')
end

方案2：拆分断言验证内容与结构（推荐）

更稳健的做法是分开验证文本内容和HTML结构，避免依赖具体的HTML源码细节：

# 验证父元素包含渲染后的完整文本
expect(page).to have_css('#dom_id', text: 'Text with HTML tags', visible: true, count: 1)
# 验证父元素内存在<b>标签且包含对应文本
expect(page).to have_css('#dom_id b', text: 'HTML tags', visible: true)

这种方式更贴近用户实际看到的页面效果，测试也更不容易因页面HTML的细微调整而失效。

方案3：正则匹配HTML源码

如果HTML片段可能存在格式差异（比如空格、换行），可以用正则进行模糊匹配：

expect(find('#dom_id').native.inner_html).to match(/Text with\s*<b>HTML tags<\/b>/)

注意事项 #

• 优先选择方案2，因为直接断言HTML源码会让测试变得脆弱，页面结构的微小变化（比如添加class、调整空格）都可能导致测试失败。
• 若必须断言HTML源码，确保测试中的HTML字符串和页面实际生成的完全一致。

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