水豚找不到文件输入字段来附加文件答案

【问题标题】：capybara can not find file input field to attach file水豚找不到文件输入字段来附加文件
【发布时间】：2015-10-07 07:38:02
【问题描述】：

我用红宝石、黄瓜和水豚。

我的 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>

基本上我需要做的是通过点击链接“上传”来上传文件：

<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))

结果：找不到文件字段 "//*[@id=\"promocodesUpload\"]/div/a/input" (Capybara::ElementNotFound)

和

within(:xpath, '//*[@id="promocodesUpload"]/div/a') do
   attach_file("input", File.absolute_path($campaign_promotional_code_path))
 end

结果：找不到文件字段“输入”（Capybara::ElementNotFound）

和

attach_file("Upload", File.absolute_path($campaign_promotional_code_path)

结果：找不到文件字段“上传”（Capybara::ElementNotFound）

和

click_link("Upload")

结果：找不到链接“上传”（Capybara::ElementNotFound）

和

有什么帮助吗？ :)

【问题讨论】：

标签： ruby file-upload input capybara

【解决方案1】：

试试这个：

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')

【讨论】：

【解决方案2】：

Capybara 找不到文件输入，因为它的不透明度为 0，所以它隐藏在页面上。 - 最好的办法是使用 execute_script 修改文件输入样式属性，使其在调用 attach_file 之前变得可见

【讨论】：

【解决方案3】：

如果你的网页上有 jQuery：

page.execute_script("$('input[name=file]').css('opacity','1')")

如果您的网页上没有 jQuery：

page.execute_script("document.getElementsByName('file')[0].style.opacity = 1")

【讨论】：

【解决方案4】：

根据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)

【讨论】：

【解决方案5】：

attach_file("user[logo]", Rails.root + "app/assets/images/image.jpeg", make_visible: true)

更好的是：“如果文件字段因样式原因被隐藏，make_visible 选项可用于临时更改文件字段的 CSS，附加文件，然后将 CSS 恢复为原始样式。”

make_visible: true

【讨论】：