CODEWITHSUNDEEP
seleniumdropzone.jsselenium-idedropzone
sluxzer
sluxzer

Reputation: 31

Upload File / Image using Dropzone.js with Selenium-Ide

Hi Everyone

I'm new to selenium, please bear with me, and guide me a little bit.

So I want to make an automation process with selenium-ide, with the hope that this automation will make testing in my project easier.

So using selenium-ide and trying to upload a file using dropzone.js, here is the normal flow.

  1. Click the button 'Add Photo'
  2. Windows explorer will pop up
  3. After the file is selected, on the background, 'dropzone' will manipulate the file while opening a pop up "Image Editor"
  4. After clicking "Confirm" the file will be uploaded to the server.

enter image description here enter image description here

What I want to accomplish is "How can I manipulate click/select the file after file explorer opened, using selenium-ide? or is it possible?"

I have already spent hours trying to find the solution and have had no luck.

I try using the command "type" or "send key", and also on my discovery we could use javascript directly with the command "execute script", but I just don't know how to make it work

What I expect is, I could manipulate the manual proses of the selection file with automation from selenium-ide.

Thank You.

Upvotes: 0

Views: 422

Answers (1)

sluxzer
sluxzer

Reputation: 31

I got my own answer guys!

My goals above can be solved using selenium-ide command called "type",

Here is the explanation:

  • Command: I use "type", according to selenium-ide it will store value to your element.
  • Target Dropzone will create its own element 'input file' and it's hidden, of course, so this is one that we should get, instead of your own input file. You may find it with class dz-hidden-input, and since I have many file inputs I use an array at the end of XPath [{$check}]
  • Value This one is the exact path where you put your file locally.

**The Logic / How it works: ** with this solution, we don't need to trigger file explorer, because the above code will inject the image inside dropzone file input, and since dropzone listens to their file input which is dz-hidden-input, it will act the same way that we choose the file from file explorer.

enter image description here

I hope this answer will help someone whos bumped into the same problem.

Kudos XD

Upvotes: 0

Related Questions