我使用红宝石,黄瓜和水豚。
我的HTML看起来像这样:
<tr>
<th>
Promotion codes
</th><td><div class="t-zone" id="promocodesZone">
<span style="display: inline-block;">
<span class="field"><label class="field-label">File name:
<span style="text-transform: none;" class="status-ok"></span></label></span>
<span class="field"><label class="field-label">Codes available:
<span style="text-transform: none;" class="status-ok">0</span></label></span>
<span class="field"><label class="field-label">Codes used:
<span style="text-transform: none;" class="status-ok"></span></label></span>
<span class="field"><label class="field-label">Codes uploaded on:
<span style="text-transform: none;" class="status-ok"></span></label></span>
</span>
<div style="margin-bottom: 15px;"><div class="t-upload">
<div id="promocodesUpload">
<div class="qq-uploader">
<div class="qq-upload-drop-area" style="display: none;"><span>Drop </span></div>
<a class="qq-upload-button btn" style="position: relative; overflow: hidden; direction: ltr;">Upload
<input type="file" name="file" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"></a>
<ul class="qq-upload-list"></ul></div></div>
</div>
</div>
</div>
</td>
</tr>
基本上我需要做的是点击链接上传文件&#34;上传&#34;:
<a class="qq-upload-button btn" style="position: relative; overflow: hidden; direction: ltr;">Upload<input type="file" name="file" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"></a>
但我一直都失败了,因为水豚无法找到必要的元素...... 我已经尝试了很多东西:
attach_file('//*[@id="promocodesUpload"]/div/a/input', File.absolute_path($campaign_promotional_code_path))
结果:无法找到文件字段&#34; // * [@ id = \&#34; promocodesUpload \&#34;] / div / a / input&#34; (水豚:: ElementNotFound)
和
within(:xpath, '//*[@id="promocodesUpload"]/div/a') do
attach_file("input", File.absolute_path($campaign_promotional_code_path))
end
结果:无法找到文件字段&#34;输入&#34; (水豚:: ElementNotFound)
和
attach_file("Upload", File.absolute_path($campaign_promotional_code_path)
结果:无法找到文件字段&#34;上传&#34; (水豚:: ElementNotFound)
和
click_link("Upload")
结果:无法找到链接&#34;上传&#34; (水豚:: ElementNotFound)
和
请帮忙吗? :)
答案 0 :(得分:3)
Capybara无法找到文件输入,因为它的不透明度为0,所以它隐藏在页面上。 - 最好的办法是使用execute_script修改文件输入样式属性,使其在调用attach_file之前变为可见
答案 1 :(得分:3)
如果您的网页上有jQuery:
page.execute_script("$('input[name=file]').css('opacity','1')")
如果您的网页上没有jQuery:
page.execute_script("document.getElementsByName('file')[0].style.opacity = 1")
答案 2 :(得分:3)
试试这个:
page.driver.browser.all(:xpath, '//input[@name="file"]')[0].send_keys('/home/userA/Desktop/chivalry-medieval-warfare.jpg')
或:
page.driver.browser.all(:xpath, '//input[@type="file"]').last.send_keys('/home/userA/Desktop/chivalry-medieval-warfare.jpg')
答案 3 :(得分:0)
根据documentation,如果元素以某种方式隐藏,则可以将make_visible
选项设置为true。
# will attach file to a descendant file input element that has a name, id, or label_text matching 'My File'
page.attach_file('My File', '/path/to/file.png', make_visible: true)
答案 4 :(得分:0)
attach_file("user[logo]", Rails.root + "app/assets/images/image.jpeg", make_visible: true)
更好:“在文件字段因样式原因被隐藏的情况下,make_visible 选项可用于临时更改文件字段的 CSS,附加文件,然后将 CSS 恢复到原始状态。”
make_visible:真实
这里推荐:https://www.rubydoc.info/gems/capybara/Capybara%2FNode%2FActions:attach_file