如何使用 Capybara 测试图像预览？

Question

我有添加图片后显示图片预览的js代码。

 function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
          $('#preview').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}
$(document).ready(function(){
  $("#attach").change(function () {
      readURL(this);
  });
});

和html：

<img id="preview" style="width:400px;height:400px;">

<label for="attach">
  <span>Click to add picture</span>
</label>

<input class="hidden" id="attach" type="file" name="profile[image]">

查看 Codepen 示例。

问：使用capybara，我如何测试附加图片时显示的图像预览？我知道我们可以检查 img 标签以获得 src 但我怎样才能将 Capybara 与 Javascript 代码结合起来？

简单地使用 attach_file() 在这里没有任何用处，因为 Capybara 对 JS 不友好。

Answer 1

我不确定你所说的 Capybara 对 JS 不友好是什么意思，但是你的示例中存在不一致，因为你的文件输入的 ID 为 "attach" 并且你的 JS 更改侦听器正在侦听'#inputFile' - 假设它是固定的（在这段代码中我假设输入 id 应该是 'attach'）然后你可以做

execute_script('$("#attach").removeClass("hidden")') #make input visible so you can attach to it
attach_file('attach', 'some_file.jpg') #attach the file
expect(page).to have_css('#preview[src]') #confirm a src attribute was set

如何使用 Capybara 测试图像预览？

How to test image preview with Capybara?

rspec

ruby-on-rails

capybara

poltergeist