使用Capybara测试href为javascript:void(0)的Facebook弹窗失败问题

问题重现 #

你遇到的情况是：使用Capybara的window_opened_by方法测试分享功能时，普通场景测试正常，但点击链接触发Facebook模态弹窗（而非新标签页）时，测试抛出错误：

Capybara::WindowError: block passed to #window_opened_by opened 0 windows instead of 1

相关代码如下：
视图文件 (view.html.erb)

<div class="col-xs-4 action-facebook" id="js-fbShareBtn">
  <a href="javascript:void(0)" title="Share on Facebook" target="_blank" rel="noreferrer">
    Share on facebook
  </a>
</div>

RSpec测试文件 (test.rb)

it "on deal page button SHARE works effectively", js: true do
  visit deal_page_path(deal_path)
  facebook_window = window_opened_by do
    click_link 'Share on Facebook'
  end
  within_window facebook_window do
    expect(page).to have_css("html#facebook")
  end
end

激活弹窗的JavaScript

function activateFbShareBtn() {
  $fbShareBtn.on('click', function(e) {
    FB.ui({
      method: 'share',
      mobile_iframe: true,
      display: 'popup',
      href: gon.deal_actual_url,
    }, function(response){});
  });
}

排查过程 #

一开始你可能会误以为是href="javascript:void(0)"导致的问题——把它改成标准链接（比如https://www.example.com）后，WindowError确实消失了，但测试还是因为页面内容不符而失败。实际上这个方向是错的，真正的问题出在RSpec的配置上。

解决方案 #

问题的根源是RSpec没有将Facebook SDK的链接加入白名单，导致Capybara无法正确加载SDK，进而无法触发预期的弹窗行为。你只需要在RSpec的配置文件中添加以下代码，允许Facebook SDK的URL：

config.allow_url("https://connect.facebook.net/en_US/sdk.js")

添加这个配置后，测试就能正常识别Facebook模态弹窗，window_opened_by也能正确捕获到对应的窗口了。

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