Question

如何使用（capybara webkit + cucumber）上传（附加图像）反应页面上的图像进行集成UI测试。

我可以将图片附加到导轨页面，但会对我无法上传的页面做出反应吗？

我尝试了一些解决方案，仍无法找到解决方案。

1）attach_file('.pb-text-field__browse_file_label', image_file_name)

2）find('.pb-text-field__browse_file_label').set('/scratch/data/1.png')

实际HTML：

<form>
  <div class="file text-field">
    <div class="text-field__input-wrapper">
      <div class="text-field__box"></div>
      <div class="text-field__upload_file">
        <input class="text-field__file-input" placeholder="Upload only jpeg or png images" disabled=""> 
        <div class="text-field__browse_file"> 
          <label class="text-field__browse_file_label" for="image-file">Browse</label> 
          <input id="image-file" class="text-field__browse" type="file">{this is invisible} 
        </div>
      </div>

Answer 1

attach_file获取文件输入名称，id或关联的标签文本 - https://www.rubydoc.info/gems/capybara/Capybara/Node/Actions#attach_file-instance_method - 所以传递一个CSS类选择器永远不会起作用。您没有显示您的实际HTML是什么，但假设您有一个文件输入，如

<input id="my_file_input" name="some_name" type="file"/>

然后你可以做任何一个

attach_file('my_file_input', path_to_file)
attach_file('some_name', path_to_file)

您可能遇到的另一个问题是文件输入通常是隐藏的，以允许跨浏览器的一致样式。如果您的应用就是这种情况，那么您可以使用make_visible选项告诉Capybara使文件输入可见，附加文件，然后重新隐藏输入。

attach_file('my_file_input', path_to_file, make_visible: true)

更新：现在提供了实际的HTML并确认文件输入实际上已输入，以下任何一项都应该正常工作

attach_file('image-file', path_to_file, make_visible: true)
attach_file('Browser', path_to_file, make_visible: true)
find('.text-field__browse_file').attach_file(path_to_file, make_visible: true)

如何在反应页面上附加图像

1 个答案: