Javascript Capybara attach_文件未触发Firefox中的React onChange处理程序

我正在用React构建的页面上测试文件上传功能。React页面有一个隐藏的文件输入字段，其中连接了onChange事件侦听器。当一个文件被选中时，它会触发onChange并处理该文件。我有一个测试，使用Capybara和javascript公开隐藏的输入，使用Capybara的attach_file方法将文件附加到输入，并检查以确保文件上传并显示在用户的文件列表中。该测试在Chrome中运行，文件在使用Capybara的attach_file方法后进行处理，但在Firefox中不起作用-文件进入输入，但从未处理过。我怀疑出于某种原因，React没有检测到Firefox中的onChange，或者它没有被解雇。我需要在两种浏览器中都进行测试

我曾尝试使用带有适当的香草javascript（无jquery）的execute_脚本在firefox中创建和发送更改和输入事件，但运气不佳。在我尝试了所有这些之后，我只得到了暴露的输入字段和显示在其中的选定文件名。作为SDET，我必须按原样使用前端代码

响应文件的输入

<input
          className={css.hiddenInput}
          onChange={event => {
            actions.uploadAttachment(event, personOneId, personTwoId);
          }}
          ref={file => (this.file = file)}
          type="file"
        />

还有一些我在attach_文件完成后试图触发事件的例子

page.execute_script("document.getElementsByName('attachments')[0].dispatchEvent(new Event('change'))")

page.execute_script("document.getElementsByName('attachments')[0].dispatchEvent(new Event('input'))")

page.execute_script("document.getElementsByName('attachments')[0].dispatchEvent(new Event('change'), { bubbles: true })")

根据@Thomas Walpole的建议，我还尝试了以下方法，并收到了以下错误

page.attach_file(File.expand_path("./spec/files/some.gif"), make_visible: true)
Capybara::ExpectationNotMet: The style changes in :make_visible did not make the file input visible

attach_file(File.expand_path("./spec/files/some.gif”), make_visible: {visibility: 'visible', width: 'auto', height: 'auto'})
The hidden input temporarily flashes visible, then disappears and no file attachment is processed.


attach_file(File.expand_path("./spec/files/some.gif")) do
   page.find('span', text: ‘Add Attachments’).click
 end  
Capybara::ElementNotFound: Unable to find visible file field nil with allow_self true

attach_file(File.expand_path("./spec/files/some.gif”), make_visible: true) do
   page.find('span', text: ‘Add Attachments’).click
 end  
Capybara::ExpectationNotMet: The style changes in :make_visible did not make the file input visible

---

它在Chrome中工作，但在Firefox中不工作，这一事实可能表明在Capybara、geckodriver或你的应用程序中存在缺陷，因此请确保你运行的是当前版本的Capybara和geckodriver。如果这不能解决问题，您可以尝试在附加文件后单击另一个元素，查看是否会触发模糊/更改事件（不同的浏览器可能会在不同的时间生成该事件）

除此之外，当前版本的Capybara提供了使隐藏文件输入可见的支持，而无需求助于定制JS，这可能更可靠，行为更一致。在您的情况下，这类似于（如果页面上只有一个文件输入，则不需要定位器）

如果应用的默认CSS没有使文件输入可见，则可以指定自定义CSS，如

attach_file(File.expand_path("./spec/files/#{attachment}"), 
            make_visible: {visibility: 'visible', width: 'auto', height: 'auto'})

在最新版本的Capybara中，一个更干净、更像用户的解决方案是在其块模式下使用

attach_file

，这要求您执行用户用于触发文件选择的操作，然后尝试确定正在使用哪个文件输入，而不必担心可见性

attach_file(File.expand_path("./spec/files/#{attachment}")) do
  click_button('Choose files') # whatever action a user does to trigger file selection
end

---

注意：在测试时，使用

execute\u script

手动生成和分派事件通常是一个坏主意，因为它允许用户做一些用户永远做不到的事情，并且可能会在你的应用程序中隐藏真正的bug。

它在Chrome中工作，但在Firefox中不工作，这一事实可能表明在Capybara、geckodriver或你的应用程序中存在bug，因此，请确保您正在运行当前版本的水豚和壁虎。如果这不能解决问题，您可以尝试在附加文件后单击另一个元素，查看是否会触发模糊/更改事件（不同的浏览器可能会在不同的时间生成该事件）

除此之外，当前版本的Capybara提供了使隐藏文件输入可见的支持，而无需求助于定制JS，这可能更可靠，行为更一致。在您的情况下，这类似于（如果页面上只有一个文件输入，则不需要定位器）

如果应用的默认CSS没有使文件输入可见，则可以指定自定义CSS，如

attach_file(File.expand_path("./spec/files/#{attachment}"), 
            make_visible: {visibility: 'visible', width: 'auto', height: 'auto'})

在最新版本的Capybara中，一个更干净、更像用户的解决方案是在其块模式下使用

attach_file

，这要求您执行用户用于触发文件选择的操作，然后尝试确定正在使用哪个文件输入，而不必担心可见性

attach_file(File.expand_path("./spec/files/#{attachment}")) do
  click_button('Choose files') # whatever action a user does to trigger file selection
end

---

注意：在测试时，使用

execute\u script

手动生成和分派事件通常是一个坏主意，因为它允许用户做一些用户永远无法做的事情，并且可能会在你的应用程序中隐藏真正的bug。

你使用的是什么版本的Capybara？geckodriver、selenium webdriver、，那么firefox呢？你使用的是什么版本的Capybara？geckodriver、selenium webdriver、，那么firefox呢？@Doug您使用block模式时的结果表明您实际上没有使用当前版本的Capybara-block模式是在3.15中添加的-当前为3。20@Doug使用块模式时的结果意味着您实际上没有使用当前版本的Capybara-块模式是在3.15中添加的-当前为3.20