如何使用Capybara和RSpec测试带动态class的CSS选择器的值

核心逻辑是利用CSS属性匹配规则，规避动态生成的后缀影响：你场景下的class固定前缀为UserSummaryPopup-avatar-，仅末尾数字/哈希值为动态生成，不需要获取完整class值即可完成定位校验。

• 基础校验：仅验证元素是否存在

# ^= 代表匹配class属性以指定字符串开头的元素
expect(page).to have_css('div[class^="UserSummaryPopup-avatar-"]')

• 同时校验背景图属性
  如果需要同时验证元素的背景图是否符合预期，有两种写法可选：

1. 直接通过have_css的style参数校验

expect(page).to have_css(
  'div[class^="UserSummaryPopup-avatar-"]',
  style: { background_image: 'url("http://localhost:3000/images/medium/missing.jpg")' }
)

2. 先定位元素再单独校验style属性，容错率更高，适合style属性有其他冗余值的场景

avatar_ele = find('div[class^="UserSummaryPopup-avatar-"]')
expect(avatar_ele[:style]).to include('http://localhost:3000/images/medium/missing.jpg')

• 特殊场景适配：如果该元素的class属性还有其他前置类名，前缀匹配失效，可以改用包含匹配规则

# *= 代表匹配class属性包含指定字符串的元素
expect(page).to have_css('div[class*="UserSummaryPopup-avatar-"]')

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