Code to navigate filepicker with watir?

Question

I am testing an application that uses filepicker for file uploads:

https://www.inkfilepicker.com

I am using watir.

I have tried:

def upload_photos
  $b.link(:text, "Upload Photos").click
  $b.button(:text, "Choose File").click
end

but the code fails with:

`assert_exists': unable to locate element, using {:text=>"Choose File", :tag_name=>"button"} (Watir::Exception::UnknownObjectException

Is it possible to automate filepicker uploads with watir? How?

Answer 1

The code

$b.button(:text, "Choose File").click

Has two problems (assuming your filepicker is the same as that on the inkfilepicker demo page):

1. The Choose File button is in an iframe. When it comes to frames, you need to explicitly tell Watir about them.
2. The Choose File is not a regular button; it is the button for a file field (). These are accessed from Watir using the file_field method. There is no support for just clicking the button. Instead, there is a set method that will click the button, select a file to upload and close the window.

Assuming the filepicker in your application is the same as the one on the inkfilepicker demo page, you can do the following:

require 'watir-webdriver'
browser = Watir::Browser.new :firefox

# File to upload
file = 'C:\Users\user\Desktop\stuff.jpeg'

# Go to the demo page, which has a file uploader
browser.goto 'https://www.inkfilepicker.com/demos/'

# Click the button that opens the file uploader
browser.button(:class => 'zip-open-button').click

# Wait for the dialog to be displayed
browser.div(:id => 'filepicker_dialog_container').wait_until_present

# Set the file
browser.frame(:id => 'filepicker_dialog').file_field(:id => 'fileUploadInput').set(file)