如何在react页面上附加图像

Question

如何使用(capybara webkit+ cucumber)在react页面上上传(附加图像)图像以进行集成UI测试。

我可以将图像附加到rails页面，但反应页面我无法上传？

我尝试了一些解决方案，仍然找不到解决方案。

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)