How to upload file on a hidden input - WebdriverIO
#webdriverio #javascript #upload
In this video, we will learn how to upload a file on a hidden input using WebdriverIO.
All the code is available on Github - github.com/automationbro/webd...
Resources:
- Test site: online2pdf.com/
- WebdriverIO Doc: webdriver.io/docs/api/browser...
To learn more about WebdriverIO, check out my tutorial series where we will be building a fully functional test automation framework and integrating our tests with Mocha, Chai, Allure, BrowserStack, JUnit, and Jenkins.
• WebdriverIO - Tutorial...
........................
📧 Subscribe to my mailing list for all the latest updates -
automationbro.com/mailing-list
✒️ Check out my blogs at - automationbro.com
🚀 Enjoying my content and would like to support my work? Why not buy me a coffee! or Subscribe to this channel! 🚀
www.buymeacoffee.com/automati...
www.youtube.com/@dilpreetjoha...
Thanks for watching :)
Automation Bro
Пікірлер: 26
Man I was trying to find solution to this problem from ages. Thanks a lot. It really helped
@sdetunicorns
Жыл бұрын
Awesome! I'm so glad this video helped you out. If you need more help or have any other questions, feel free to reach out. Keep up the good work and happy testing!
Thank you , it worked.
Thank you, bro! Its work!!! Im happy!
Awesome thanks alot 👍🏻
great explanation, in my case it was not the style but class attribute was the issue. I had to replace d-none class attribute d-none with d-block. document.querySelector('input[type="file"]').classList.replace('d-none', 'd-block') At the end of the day, thank you for pointing out this.
@sdetunicorns
Жыл бұрын
Yes, the implementation is different for each site. But, it's good that you were able to figure it out!
Once again you helped me a lot Dilpreet, I am migrating our webtest from v4 to v7 and all tests are running on web browser client and nw.js (desktop app). We have exactly the same scenario of uploading the file in one of the tests wherein the input field is hidden, I spent around 5 hours to fix this but after watching your previous and this video fixed my issue in one try... once again thanks a lot for this video .
@sdetunicorns
2 жыл бұрын
Awesome, that's really great to hear!
@gvbaba4231
Жыл бұрын
@@sdetunicorns hey message me, i have a project for u to automate.
@erdemore8629
Жыл бұрын
I have spent 2 days ; )
but how it implement ck editor upload function There is no submit button.
Application thar I am working doesn't have hidden file type , in this scinario how to upload file
For me input.setValue(FilePath) worked fine.
@sdetunicorns
Жыл бұрын
Yes, however, it's still good to know how to manipulate DOM if in case it doesn't work in future.
How to upload file on button,if there is no input tag
Thank you, application that i am working doesn't have hidden file type, have used AutoIT . It works on local but doesn't work in bamboo pipeline, if you get time would you mind making one video to handle file upload using autoIT and pass relative path from test script.
@saragungun
2 жыл бұрын
AutoIT didn't work for me in AWS as well, because my container is having Linux. Locally i tested on windows.
Hey Man, there is no Submit button in our page, what to do in such a situation ?
@sdetunicorns
5 ай бұрын
You will need to find what triggers the submit event and then call it accordingly.
I'm not able to alter the DOM. How do I upload files?
@prasanthik6862
Жыл бұрын
Did you get the solution?
Hi @Dilpreet, your video is awesome but in my case, the element has no parent and is placed directly inside tag which is "" and I have placed below function in my code snippet; browser.execute(() => { document.getElementsByClassName('dz-hidden-input').style.visibility = 'visible' }).....as it has visibility property instead of display. these are properties of my input element, visibility: hidden; position: absolute; top: 0px; left: 0px; height: 0px; width: 0px; This is the error i'm getting in console "javascript error: Cannot set properties of undefined (setting 'display') (Session info: chrome=109.0.5414.87)"
@sdetunicorns
Жыл бұрын
Hello, you should test this out on the browser console first by removing the class and style attribute and then doing an upload manually. If that works then you can apply the same in the execute command
@ravitejamygapula
Жыл бұрын
@prasanthik6862 Can you post the working code for your question. Even in my scenario also its looks like your only but am fail to get exact solution for that