Choose File Robot Framework not uploading file

Question

I am developing a scenario where a file is uplodaded using the choose file robot framework keyword. The test runs and when the choose file executes, it hits the locator for the <input type="file"> element, the UI shows a red box at the bottom of the page (see attachment), but the file is not uploaded.

Im not sure if the UI doesn't know how to handle the upload, or if there is an error in my code:

choose file  xpath=/html/body/div/div/div/div[2]/div/div/div/div/div/div/div/div/div[1]/div[1]/div[2]/div/span  ${dataDir}studentSAT.csv

The ${dataDir} variable contains the OS full path to the file, and the file is at that location. As a point of validation, I tried changing the filename to one that is not present, and robot throws an error stating data not available.

Has anyone encountered this before?

Answer 1

After some additional digging, it turns out that in this case, the <input type=file> element was not visible. The red box at the bottom left was the browsers attempt at dealing with a file being passed to it with no known way of interacting with the element that wasn't visible. Changing the element display properties from 'style.display = "none"` to 'style.display = "block"' allowed the element to be visible on the screen, and be selected.

I implemented an 'execute javascript' keyword step before attempting to pass the .csv file, and it works beautifully now.

Code:

execute javascript window.frames[0]; document.querySelector( "input[name='file-uploader']" ).style.display = "block";