How-to use ‘sendKeys’ or 'File Upload' to upload files

[Dave_Evers]

Note: Using ‘sendKeys’ or ‘File Upload’ for file uploads will ONLY work with //input[@type,‘file’] objects. So what do you do when an //input[@type,‘file’] object is hidden?

How-to use ‘sendKeys’ or ‘File Upload’ to upload files when the //input[@type,‘file’] is hidden. Special thanks to @Russ_Thomas for his post on using document.querySelectorAll(“input[type=file]”) for finding hidden objects; which put me onto this solution. I now do NOT have to use Robot for my file uploads; which ensures my file uploads work from within Jenkins.

1. Open Chrome/Firefox Browser.

2. Press F12 (Developer tools).

3. Switch to the ‘Console’ tab.

4. Use document.querySelectorAll("input[type=file]") to find the ‘hidden’ input type.
   For example: NodeList [input#uploadDocument.hidden-file-input].

5. Switch to the ‘Elements’ tab & use ‘Ctrl + F’ & search for 'hidden-file-input’.
   Result: <input id="uploadDocument" name="file" type="file" class="hidden-file-input" value="">.

6. Right-click on the object & click ‘Copy’ > ‘Copy XPath’.
   Result: //*[@id="uploadDocument"]. Note that you can also add the type=‘file’ attribute into the final attribute.

7. Paste the copied result into the ‘Elements’ search input field & validate the object.

8. Create a new manual ‘DocumentUpload’ object where the Attributes are //*[@id = ‘uploadDocument’ and @type = ‘file’]
   

   

9. In the test case, use the existing ‘UploadButton’ object’ to wait for the page to load before trying to upload file(s). **If needed create a new manual ‘UploadButton’ object with the correct attributes\xpath.

See the following for ‘File Upload’ use/syntax: https://docs.katalon.com/katalon-studio/docs/webui-upload-file.html

For multiple file uploads see this link: Upload Multiple Files - #13 by Brandon_Hein

Use something like the following in the test case:

import org.openqa.selenium.Keys as Keys
def FileName = 'C:\\Users\\jdoe\\MyDocs\\Sample.pdf'
//Wait for the 'UploadButton' to display
WebUI.waitForElementVisible(findTestObject('ManObjects/UploadButton'), 30, FailureHandling.OPTIONAL))
WebUI.sendKeys(findTestObject('ManObjects/DocumentUpload'), FileName)

[Dave_Evers]

Possible XPaths for a file upload button:

(//*[@type = 'file'])
(//*[@name = 'fileUpload'])
(//*[@type = 'file' and @name = 'fileUpload])

[vu.tran]

Thank @Dave_Evers for great sharing

[yufanwaw]

Thank you so much
It worked.

[Dave_Evers]

Another example:

I used: (//*[@type = 'file' and @name='upfile']) 
But this would work too:  (//*[@type="file"])

[andrea]

Hiii! If my button is not a file type, do you know what I can do?

[grylion54]

What do you have to do to the button when you do “it” manually? This is what you will have to do to automate “it”. If you want more information, you will need to give us more as well, including HTML.

[Dave_Evers]

Hi @andrea, Did you follow steps 1 through 9 above? If yes what did you find? As Mike said above an expanded screen shot of your HTML would really help us see what you are facing.

[Russ_Thomas]

@andrea your file upload element should be an HTML <input type="file" ...> i.e NOT a button element.

@Dave_Evers I know you made it clear this “will ONLY work with //input[@type,‘file’] objects” in your OP, but you might want to make it super clear that even though you (we) may call it a button, it’s not actually an HTML <button> element. Many users may not be clear there is no type="file" attribute for the HTML button element.

[Dave_Evers]

Folks, Please see the following links for an explanation as to how the <input type="file"> HTML element works, (as Russ pointed out, it is NOT a button element):

1. https://html.com/input-type-file/
2. <input type="file"> - HTML: HyperText Markup Language | MDN
3. HTML input type="file"

[andrea]

hi i find a solution thanks for the help

[Dave_Evers]

The following ‘File Upload Sample’ test case uses sendKeys to upload a test Blank.png image file.
Copy the following to any test case and run, (test objects are created in memory so no objects are needed).

import org.openqa.selenium.By as By
import org.openqa.selenium.WebDriver as WebDriver
import com.kms.katalon.core.testobject.TestObject as TestObject
import com.kms.katalon.core.webui.driver.DriverFactory as DriverFactory
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import java.nio.file.Path as Path
import java.nio.file.Paths as Paths

WebUI.openBrowser('')

//Loads File Upload Sample page
WebUI.navigateToUrl('https://www.west-wind.com/wconnect/wcscripts/fileupload.wwd')

//Loads WebDriver
WebDriver driver = DriverFactory.getWebDriver()

/** Change 'Blank.png' to any test image file being used **/
'Sets path to the test Blank.png Uploadfile'
Path uploadFilePath = Paths.get(System.getProperty('user.home'), 'Downloads', 'Blank.png')
String upLoadFile = uploadFilePath
println('upLoadFile: ' + upLoadFile)

'Finds "Select Images" Link using by.xpath & creates object'
def selectImagesLinkXpath = '//*[@type = "file"]'
TestObject selectImagesLink = WebUI.convertWebElementToTestObject(driver.findElement(By.xpath(selectImagesLinkXpath)))
WebUI.sendKeys(selectImagesLink, upLoadFile)

'Waits for file to load'
WebUI.delay(3)

'Finds "Upload" button using by.xpath & creates object'
def uploadBtnXpath = "//button[@type='submit'][contains(.,'Upload...')]"
TestObject uploadBtn = WebUI.convertWebElementToTestObject(driver.findElement(By.xpath(uploadBtnXpath)))
WebUI.click(uploadBtn)

[Dave_Evers]

Edit: Before use, copy an image file to you user download folder e.g., ‘Picture.png’
Next change all occurrences of ‘Blank.png’ in the test case to ‘Picture.png’. and save.
Run the case - the Picture.png file should be uploaded to the test web page.