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示例。

问题：使用水豚如何在附加图片时测试图像预览显示？我知道我们可以检查 img 标记 src 但是如何将Capybara与Javascript代码结合起来？

简单地使用 attach_file（）并没有做任何有用的事情，因为Capybara与JS并不友好。

Answer 1

我不确定您对Capybara与JS不友好的意思，但是您的示例中存在不一致，因为您的文件输入的ID为＆＃34; attach＆＃34;并且你的JS更改监听器正在监听＆＃39; #inputFile＆＃39; - 假设这是固定的（在这段代码中我假设输入id应该是＆＃39; attach＆＃39;）那么你可以做到

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测试图像预览？

1 个答案: