Rails4/Capybara测试：利用测试窗口宽度验证元素data属性

嘿，这事儿不难，我帮你梳理下验证逻辑，分分钟搞定！既然你已经通过模块设置好了窗口尺寸，接下来只需要聚焦在元素属性的验证上就行，具体步骤和代码如下：

基础验证代码 #

首先，确保你的测试启用了JavaScript（WebKit驱动本身支持JS，但要记得在测试标记里加上js: true，或者全局配置好JS驱动）。然后按这个结构写：

RSpec.feature "Screen size data attribute", js: true do
  before do
    # 假设你的模块提供了resize_window_to方法，这里设置目标宽度
    resize_window_to(width: 1024, height: 768)
  end

  scenario "target element has correct data-size attribute" do
    # 访问目标页面
    visit your_target_page_path

    # 方式1：用CSS选择器直接匹配属性
    expect(page).to have_css('#your-target-element[data-size="1024"]')

    # 方式2：先定位元素，再检查属性值（更灵活，适合动态数值）
    target_element = find('#your-target-element')
    expect(target_element['data-size']).to eq('1024') # 注意：DOM属性都是字符串类型，要和JS返回的数值转成字符串一致
  end
end

注意事项&进阶技巧 #

• 确保JS执行完成：因为data-size是通过JS动态注入的，Capybara的expect断言会自动等待元素或属性就绪，但如果你的JS是异步执行的，可能需要额外等待：

  expect(page).to have_selector('#your-target-element', wait: 5) # 最多等5秒
  

• 处理resize事件触发的更新：如果你的view.js是在窗口resize时才更新data-size（而不是页面加载时），那设置窗口尺寸后需要手动触发resize事件：

  resize_window_to(width: 375, height: 667)
  page.execute_script('$(window).trigger("resize")') # 触发jQuery的resize事件
  # 或者原生JS：page.execute_script('window.dispatchEvent(new Event("resize"))')
  

• 多尺寸场景测试：可以用context块覆盖不同窗口尺寸的情况，让测试更全面：

  context "on mobile viewport" do
    before { resize_window_to(width: 375, height: 667) }
  
    it "sets data-size to 375" do
      visit your_target_page_path
      expect(find('#your-target-element')['data-size']).to eq('375')
    end
  end
  
  context "on desktop viewport" do
    before { resize_window_to(width: 1920, height: 1080) }
  
    it "sets data-size to 1920" do
      expect(page).to have_css('#your-target-element[data-size="1920"]')
    end
  end
  

• 关于window.width()的小提醒：你代码里的window.width()应该是jQuery的$(window).width()吧？原生JS里window没有width()方法哦。如果是原生的window.innerWidth，要注意WebKit驱动设置的窗口尺寸是否包含滚动条——不过通常resize_window_to设置的是视口宽度，和innerWidth是一致的，不用太担心。

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