应该更改哪些属性以允许通过 Selenium 上传图像

Question

设置

我正在使用 Python + Selenium 将图像上传到系统后端。

我send_keys()的上传按钮有以下HTML，

<div id="uploadifive-FileNameUpload" class="uploadifive-button" style="height:
18px; line-height: 18px; overflow: hidden; position: relative; text-align: center;
width: 50px;">
  Upload
  <input id="FileNameUpload" name="FileNameUpload" data-editor="#FileName" 
  data-url="http://also-inc.com/upload/uploadfile" data-path="~/UserFiles/Products/Images/" 
  data-maxsize="10240" data-extensions="*.jpg;*.jpeg;*.png;*.gif;*.bmp;" 
  data-thumbnailwidth="128" data-thumbnailheight="128" 
  data-thumbnailpath="/UserFiles/Products/Images/Preview/" data-uniquename="True" 
  data-preview="/Content/uploadify/noimage.jpg" data-isnew="true" 
  data-auth="D2C14774E29BBB87D2F34719884CFC5C6370502B067D5FC55D0C40A5EE6B1646ED4C77C9C0180D607052FF52653BA981732417A24C3F7547903649C4D64491C184E1C60D7756608784B4B3E806417E77750D87BABD9CDDCB6294EA62DE884EC7B3A4416558405874ED1C0259CD4430990BA83FC0" 
  data-session="f1txsiyxglqb3ma1dr45awrf" class="file-uploader hide-input" style="display: none;" 
  type="file">
  <input style="font-size: 18px; opacity: 0; position: absolute; right: -3px; top: -3px; z-index: 999;" type="file">
</div>

请注意，该按钮有两个input 和type="file"。

---

使用的代码

upload_button = el_id('uploadifive-FileNameUpload').find_element_by_xpath('input[2]')
upload_button.send_keys(path_to_my_image)  

其中el_id() = browser.find_element_by_id() 和path_to_my_image 以.jpeg 结尾。

---

问题

使用的代码通过第二个input成功上传图片。但是，图像保存时没有.jpeg 扩展名。因此图像在后端出现损坏；即image_name 而不是image_name.jpeg。

我认为图像是在没有扩展名的情况下保存的，因为第二个 input 不允许这样做。

---

尝试

1. 将属性添加到第二个input

第一个input 具有以下属性data-extensions="*.jpg;*.jpeg;*.png;*.gif;*.bmp;"。我将此属性添加到第二个input，

upload_button = el_id('uploadifive-FileNameUpload').find_element_by_xpath('input[2]')
browser.execute_script("arguments[0].setAttribute('data-extensions','*.jpg;*.jpeg;*.png;*.gif;*.bmp;')", upload_button)
upload_button = el_id('uploadifive-FileNameUpload').find_element_by_xpath('input[2]')
upload_button.send_keys(path_to_my_image)  

这添加了属性，但上传的图像仍然保存，没有.jpeg 扩展名。

1. 更改第一个input 的class 和style 属性

第一个input 有class="file-uploader hide-input" 和style="display: none;"，我将它们设置为class="file-uploader" 和style="display: block;" via，

upload_button = el_id('uploadifive-FileNameUpload').find_element_by_xpath('input[1]')
browser.execute_script("arguments[0].setAttribute('class','file-uploader hide-input')", upload_button)
upload_button = el_id('uploadifive-FileNameUpload').find_element_by_xpath('input[1]')
browser.execute_script("arguments[0].setAttribute('style','display: block')", upload_button)
upload_button = el_id('uploadifive-FileNameUpload').find_element_by_xpath('input[1]')
upload_button.send_keys(path_to_my_image)  

但是图片没有上传。上传按钮变为原生操作系统文件选择器“选择文件”按钮。

我该如何解决这个问题？

---

旁注

我不明白为什么这个按钮有两个input。我是初学者，如有错误请见谅，但直觉上我认为一个按钮只需要1个input？

Answer 1

根据您的代码尝试，我们似乎无法对第二个 <input> 标记做太多事情。但是您可以简单地从第一个 <input> 标记中删除属性 style="display: none;" 并尝试调用 send_keys() 方法，如下所示：

element = driver.find_element_by_xpath("//input[@id='FileNameUpload' and @name='FileNameUpload']")
driver.execute_script("arguments[0].removeAttribute('style')", element)
driver.find_element_by_xpath("//input[@id='FileNameUpload' and @name='FileNameUpload']").send_keys("path_to_my_image")

注意：path_to_my_image必须是以.jpg、.jpeg、.png、.gif 或 .bmp 扩展名，并且必须小于 10240强> 字节。

Answer 2

在<input> 标记中，文本位于value 属性中。用 JavaScript 设置它应该可以工作

upload_button = el_id('FileNameUpload')
browser.execute_script("arguments[0].value = 'arguments[1]';", upload_button, path_to_my_image)