使用Capybara / Selenium Webdriver测试HTML5文件上传 - Ruby [英] Testing HTML5 File Upload with Capybara/Selenium Webdriver - Ruby

问题描述

我有一个简单的模态，其中显示用户的浏览按钮以添加要上传的文件。由于一个未知的问题，因此它是一个HTML5文件输入因此浏览器添加自己的功能，这已成为一个痛苦的测试。

I have a simple modal that appears in which the user is shown the browse button to add the file to upload. Due to an unknown issue, be it the fact its an HTML5 file input therefore the browser adds its own functions to it, this has become a pain to test.

在我的页面上，我有：

       <input type="file" id="photo_upload">

Capybara提供开箱即用的解决方案：

Capybara offers a solution out of the box which is:

       attach_file <<upload_file_id>>, <<file_path>>

这个幕后执行send_keys命令将file_path推送到此输入的路径容器中，但是这根本不适用于我的设置。我在Windows 8上运行Firefox 25.0.1。我尝试了相对路径和该文件的完整路径，使用正向和反斜杠组合。

This behind the scenes executes a send_keys command to push the file_path into the path container for this input, however this simply did not work with my setup. I am running Firefox 25.0.1 on Windows 8. I tried both a relative path and a full path to this file, with forward and backslash combinations.

当我的意思是它没有用，我的意思是当我的ajax脚本通过点击旁边的'upload'按钮执行时，它不会在params中发送任何文件对象。

When I mean it did not work, I mean when my ajax script executes from clicking the button 'upload' next to it, it does not send any file object in the params.

我甚至尝试使用capybara直接发送文件路径：

I even tried to use capybara to send the file path directly:

       find_field(<<upload_file_id>>).native.send_keys(<<file_path>>)

接下来，是尝试使用selenium将其推入使用：

Next up, was to attempt to use selenium to push it in using:

       element = driver.find_element(:id, <<upload_file_id>>)
       element.send_keys <<file_path>>

然后我尝试执行脚本以确保元素可见，然后设置它：

Then I tried executing script to ensure the element was visible, and then setting it:

      element = page.execute_script(
          "document.getElementById('#{<<upload_file_id>>}').style.visibility = 'visible';                  
           document.getElementById('#{<<upload_file_id>>}').style.height = '20px'; 
           document.getElementById('#{<<upload_file_id>>}').style.width = '60px';  
           document.getElementById('#{<<upload_file_id>>}').style.opacity = 1; return 
           document.getElementById('#{<<upload_file_id>>}')")
     find_field(field_locator).native.send_keys(<<file_path>>)

这也不起作用。现在我完全卡住了。所有这里的帮助和谷歌指向使用上述，但它只是不适用于我的设置。

This didn't work either. Now I am completely stuck. All the help on here and google points to using the above, but it just simply does not work for my setup.

我的选择，据我所知它是使用Windows自动化脚本并跳出水豚，运行脚本，然后继续，或者直接使用帖子调用capybara或调用当前执行它的js ajax上传URL。

My options as far as I can see it are to use a windows automation script and jump out of capybara, run the script, and then continue, or to directly call the upload url either from capybara using a post or calling the js ajax that currently does it.

推荐答案

所以我解决了它，它并不太难看。我通过AutoIT使用了自动化路线。你用AutoIT下载的软件包包括一个脚本到exe转换器并使用下面的脚本（我不能赞成脚本）我创建了一个exe：

So I have solved it, and its not too ugly. I used the automation route via AutoIT. The bundle you download with AutoIT includes a script to exe converter and using the below script (I can not take credit for the script) I created an exe:

Local Const $dialogTitle = $CmdLine[2]
Local Const $timeout = 5

Local $windowFound = WinWait($dialogTitle, "", $timeout)

$windowFound = WinWait($dialogTitle, "", $timeout)
Local $windowHandle

If $windowFound Then
    $windowHandle = WinGetHandle("[LAST]")
    WinActivate($windowHandle)

    ControlSetText($windowHandle, "", "[CLASS:Edit; INSTANCE:1]", $CmdLine[1])
    ControlClick($windowHandle, "", "[CLASS:Button; TEXT:&Open]")        
Else
    MsgBox(0, "", "Could not find window.")
    Exit 1
EndIf

在我的水豚脚本中，我只是运行：

In my capybara script, I merely run:

find_field(<<upload_file_id>>).click
system("<<full_path>>\\file_upload.exe \"#{<<file_path>>}\" \"File Upload\"")

它完美无缺！事实上，我认为我更喜欢它完全模仿用户将要做的事情。

and it works perfectly! In fact, I think I prefer the fact it exactly mimics what a user would be doing.

这篇关于使用Capybara / Selenium Webdriver测试HTML5文件上传 - Ruby的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！