Upload picture using Selenium JavaScript

Question

I want to create automation to upload picture, using Selenium with this script:

driver.findElement(By.id(`avatar-upload`)).sendKeys(`/home/user/Desktop/smg935-0hero-0930.jpeg`)

It return to:

ElementNotInteractableError: Element <input id="avatar-upload" type="file"> is not reachable by keyboard

If element is not visible, you cannot upload image like that — Andrei
– Andrei, Commented Aug 10, 2018 at 5:14
@cruisepandey element has style : display-none , so WebDriverWait won't help — Andrei
– Andrei, Commented Aug 10, 2018 at 5:22

yong · Accepted Answer · 2018-08-10 07:27:01Z

1

Because the element is not visible, you can't interact with it from UI, like sendKeys. One approach is change the element attribute in background way through calling HTML DOM API

let upload_ele = driver.findElement(By.id('avatar-upload'))
let file_path = '/home/user/Desktop/smg935-0hero-0930.jpeg'

driver.executeScript('return arguments[0].value=arguments[1];', upload_ele, file_path)

There is a disadvantage of this approach, because it act in background, so it won't trigger key/mouse events which bind to the element. If the upload widget listen on key event to detect user choose file or not, before user can continue click upload button. In such case the background approach won't work.

edited Aug 10, 2018 at 7:27

answered Aug 10, 2018 at 6:23

yong

13.8k1 gold badge19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Andrei Over a year ago

May be this works, but it doesn't UI testing anymore

yong Over a year ago

Yes, I agree with your point. Unless his upload widget supply another visible input box to accept the file path by sendKeys, he have to use background approach or click some element to open the File Choose Dialog to choose file which is more difficulty to automation.

okky Over a year ago

I try the code it return JavascriptError: SecurityError: The operation is insecure.

okky Over a year ago

(node:21020) UnhandledPromiseRejectionWarning: JavascriptError: SecurityError: The operation is insecure. at Object.throwDecodedError (/home/user/Selenium/belajar/sinau3/node_modules/selenium-webdriver/lib/error.js:550:15) at parseHttpResponse (/home/user/Selenium/belajar/sinau3/node_modules/selenium-webdriver/lib/http.js:542:13) at Executor.execute (/home/user/Selenium/belajar/sinau3/node_modules/selenium-webdriver/lib/http.js:468:26)

okky Over a year ago

at process._tickCallback (internal/process/next_tick.js:68:7) (node:21020) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1) (node:21020) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

|

Collectives™ on Stack Overflow

Upload picture using Selenium JavaScript

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related