如何在Rspec+Capybara测试中通过JS设置LocalStorage屏蔽订阅弹窗？

我正好处理过类似的场景，这种依赖LocalStorage控制的弹窗，用Capybara执行JavaScript写入标记是最直接有效的解决办法，下面分不同测试框架给你具体实现：

1. 在Rspec + Capybara中实现 #

你可以封装成辅助方法，或者在测试钩子中全局生效：

方式一：封装辅助方法（灵活控制） #

在spec/support/helpers.rb中添加：

def disable_newsletter_popup
  # 替换成你应用中实际使用的LocalStorage键名，比如'has_seen_popup'/'newsletter_opted'
  page.execute_script <<~JS
    localStorage.setItem('newsletter_subscribed', 'true');
  JS
end

然后在需要的测试用例中调用（建议在访问页面之前执行，确保页面初始化就读取到标记）：

describe 'Product page functionality' do
  before do
    disable_newsletter_popup
    visit '/products'
  end

  it 'loads product list without popup interference' do
    expect(page).to have_css('.product-item', count: 10)
    # 其他测试逻辑
  end
end

方式二：全局生效（所有Feature测试自动拦截） #

如果所有UI测试都不需要弹窗，在spec/spec_helper.rb或spec/rails_helper.rb的配置中添加：

RSpec.configure do |config|
  config.before(:each, type: :feature) do
    page.execute_script("localStorage.setItem('newsletter_subscribed', 'true');")
  end
end

2. 在Cucumber场景中集成 #

写一个通用步骤，放在features/step_definitions/common_steps.rb：

Given('I have disabled the newsletter popup') do
  page.execute_script <<~JS
    localStorage.setItem('newsletter_subscribed', 'true');
  JS
end

然后在feature文件中直接使用：

Scenario: Browse products without popup distraction
  Given I have disabled the newsletter popup
  When I visit the homepage
  Then I should see the featured products section

3. 关键注意事项 #

• 确认LocalStorage键名：打开浏览器控制台的Application面板，找到LocalStorage的实际键值对，确保代码中的键名和应用逻辑完全一致，比如可能是'popup_dismissed'而非示例中的'newsletter_subscribed'。
• 弹窗触发时机适配：如果弹窗是页面加载后10秒触发，务必在visit之前执行JS写入操作，避免弹窗短暂出现再消失的干扰。
• 场景还原（可选）：如果需要测试弹窗正常出现的场景，可以添加清理标记的方法：

def enable_newsletter_popup
  page.execute_script("localStorage.removeItem('newsletter_subscribed');")
end

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