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

  • @AdityaKumar-of3lf
    @AdityaKumar-of3lf Жыл бұрын

    Man I was trying to find solution to this problem from ages. Thanks a lot. It really helped

  • @sdetunicorns

    @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!

  • @mlpadmasrip
    @mlpadmasrip14 күн бұрын

    Thank you , it worked.

  • @tester4044
    @tester40443 жыл бұрын

    Thank you, bro! Its work!!! Im happy!

  • @sumaiyasiddiqa4765
    @sumaiyasiddiqa47653 жыл бұрын

    Awesome thanks alot 👍🏻

  • @erdemore8629
    @erdemore8629 Жыл бұрын

    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

    @sdetunicorns

    Жыл бұрын

    Yes, the implementation is different for each site. But, it's good that you were able to figure it out!

  • @nikunjpatel3092
    @nikunjpatel30922 жыл бұрын

    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

    @sdetunicorns

    2 жыл бұрын

    Awesome, that's really great to hear!

  • @gvbaba4231

    @gvbaba4231

    Жыл бұрын

    @@sdetunicorns hey message me, i have a project for u to automate.

  • @erdemore8629

    @erdemore8629

    Жыл бұрын

    I have spent 2 days ; )

  • @Tapana32
    @Tapana3222 күн бұрын

    but how it implement ck editor upload function There is no submit button.

  • @bhavyagowda8116
    @bhavyagowda81162 жыл бұрын

    Application thar I am working doesn't have hidden file type , in this scinario how to upload file

  • @hrishikeshmishra-tl7le
    @hrishikeshmishra-tl7le Жыл бұрын

    For me input.setValue(FilePath) worked fine.

  • @sdetunicorns

    @sdetunicorns

    Жыл бұрын

    Yes, however, it's still good to know how to manipulate DOM if in case it doesn't work in future.

  • @shubhangisabale3980
    @shubhangisabale39802 ай бұрын

    How to upload file on button,if there is no input tag

  • @sadabsaqib9483
    @sadabsaqib94833 жыл бұрын

    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

    @saragungun

    2 жыл бұрын

    AutoIT didn't work for me in AWS as well, because my container is having Linux. Locally i tested on windows.

  • @SWARAJPILLAIMUSIC
    @SWARAJPILLAIMUSIC5 ай бұрын

    Hey Man, there is no Submit button in our page, what to do in such a situation ?

  • @sdetunicorns

    @sdetunicorns

    5 ай бұрын

    You will need to find what triggers the submit event and then call it accordingly.

  • @saragungun
    @saragungun2 жыл бұрын

    I'm not able to alter the DOM. How do I upload files?

  • @prasanthik6862

    @prasanthik6862

    Жыл бұрын

    Did you get the solution?

  • @prasanthik6862
    @prasanthik6862 Жыл бұрын

    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

    @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

    @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