如何在 rspec capybara 中测试 javascript？答案

【问题标题】：how to test javascript within rspec capybara?如何在 rspec capybara 中测试 javascript？
【发布时间】：2015-11-27 13:16:57
【问题描述】：

我使用 javascript 库 - clipboardjs - 将输入字段值复制到系统剪贴板。

在我的 application.js 中：

function addressClipboard() {
  new Clipboard('.address-copy', {
      text: function(trigger) {
          var addressString = "";
          addressString += $('#addresses_attributes_0_street').val() + "\n" +
             $('#addresses_attributes_0_city').val() + "\n";
          addressString = addressString.trim();
          return addressString;
      }
  })
};

我喜欢用 rspec 和 capybara 测试功能。

address_spec.rb：

    it "checks the copied values when clicking the copy-to-clipboard link", :js do
      new_address = build(:address)
      visit new_address_path
      fill_in "person_addresses_attributes_0_street", with: new_address.street
      fill_in "person_addresses_attributes_0_city", with: new_address.city
      click_link(I18n.t('helpers.copy_to_clipboard'))
      # Pseudocode:
      expect(page.execute_script("addressClipboard()")).to eq([new.address.street,new.address.city].join)

有没有办法访问 javascript 变量 addressString 并将其与 rspec 中的地址属性（例如 new_address.street）进行比较？

【问题讨论】：

这能回答你的问题吗？ Emulating a clipboard copy/paste with Selinum + Capybara

标签： rspec capybara poltergeist clipboard.js

【解决方案1】：

我认为您无法填充文本框，因为使用了 fill_in 然后它返回 nill。应该是fill_in 'Name', :with => 'text'，看它应该是这样的：

it "checks the copied values when clicking the copy-to-clipboard link", :js do
  new_address = build(:address)
  visit new_address_path
  fill_in "person_addresses_attributes_0_street", :with => new_address.street
  fill_in "person_addresses_attributes_0_city", :with => new_address.city
  click_link(I18n.t('helpers.copy_to_clipboard'))

  expect(page.evaluate_script("addressClipboard()")).to be true
end

【讨论】：

我的 fill_in 方法有效。我只是在为访问 javascript 变量而苦苦挣扎。
@StandardNerd 如果您的函数是在全局范围内定义的，那么您调用该方法是正确的，否则您需要了解函数的范围然后调用它。看看这个：stackoverflow.com/a/9354233/2568849

【解决方案2】：

我找到了解决办法：

将我的 javascript 更改为：

addressClipboard = undefined;
lastAddressString = undefined;

$(document).ready(function(e) {
    addressClipboard = new Clipboard('.address-copy', {
        text: function(trigger) {
            var addressString = "";
            addressString += $('#person_addresses_attributes_0_street').val() + "\n" +
               $('#person_addresses_attributes_0_city').val() + "\n";
            lastAddressString = addressString = addressString.trim();
            return addressString;
        },
    });
});

我可以在 rspec 中访问 javascript 的 lastAddressString：

  clipboard_text = page.evaluate_script("addressClipboard.text()")
  expected_text = [ new_address.street, new_address.city ].join("\n")
  expect(clipboard_text).to eql(expected_text)

【讨论】：