capybara can not find file input field to attach file

Question

I use ruby, cucumber and capybara.

My html looks like this:

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

Basically what I need to do is to upload a file by clicking on link "Upload":

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

But I keep failing because capybara is unable to find the necessary element... I have tried many things already:

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

Result: Unable to find file field "//*[@id=\"promocodesUpload\"]/div/a/input" (Capybara::ElementNotFound)

and

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

Result: Unable to find file field "input" (Capybara::ElementNotFound)

and

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

Result: Unable to find file field "Upload" (Capybara::ElementNotFound)

and

click_link("Upload")

Result: Unable to find link "Upload" (Capybara::ElementNotFound)

and

Any help please? :)

Independent Independent · Accepted Answer · 2015-11-17T12:30:24

Try this:

page.driver.browser.all(:xpath, '//input[@name="file"]')[0].send_keys('/home/userA/Desktop/chivalry-medieval-warfare.jpg')

or:

page.driver.browser.all(:xpath, '//input[@type="file"]').last.send_keys('/home/userA/Desktop/chivalry-medieval-warfare.jpg')

capybara can not find file input field to attach file

5 Answers