Friday, September 24, 2010

HTML5 Drag and Drop Upload Testing

We're building out a testing automation framework at work and one of the most important parts of it involves tests around file uploads. Historically this has been impossible to automate due to security settings in the browser that disallow setting the file path in a file type input element(e.g. to prevent secretly uploading confidential data from client machines). However, some browsers now support configurations to allow disabling this restriction for certain websites. Test automation driver, Selenium, has taken advantage of this and allows a user to set the value of a file type input element. This works great for the simple case of an explicit form and file type input element.

Enter HTML5. Browsers can now respond to the "drop" event and furthermore the XmlHttpRequest specification (http://dev.w3.org/2006/webapi/XMLHttpRequest-2/) has been enhanced to make it possible to programmatically upload a file with javascript (i.e. xhr.send(fileBlob)). Put those two together and an ambitious web developer can now add automatic drag and drop file uploading to their website.

This is great for the look and feel of a website, but presents a challenge for the tester: How do I simulate a file drag and drop event? We were able to solve this issue by skipping the "drag" part and jumping straight to "drop." What does this mean? It means that our test will automatically call the "drop" event handler and provide a mock javascript event to the handler. The handler takes care of creating the xhr and sending it.

There is still one hurdle to overcome. The xhr requires an actual File object (http://dev.w3.org/2006/webapi/FileAPI/). Since it's not possible to create one via standalone javascript, we got around this by creating a new file type input on the page and using Selenium to set its value (a path to a valid file on disk) and then referencing that.

The following Scala snippet uses jQuery for the dirty work:


val s = selenium.getEval("fileUpload1 = window.$j('<input/>').attr({type:'file'}).appendTo('body');")

selenium.text_field("//input[@type='file']").set("path/to/file")


// Trigger the upload event
val mockEventJs = "{originalEvent : {dataTransfer : { files : fileUpload1.get(0).files } } }"

val ss = selenium.getEval("window.uploader.handle_drop(" + mockEventJs + ")")

169 comments:

  1. I tried your example with selenium and php or alternativly in the Selenium IDE.

    After I successfully entered the path to the file in the file-input-field, I have not been able to retrieve the file-object.

    I did not use Jquery to retrieve it, but pure JS.

    Tried this code

    var file = document.getElementById('xyz').files[0];

    but did no fileobject back. But when I selected the file with the browsebutton and then execute the code

    var file = document.getElementById('xyz').files[0];
    with runscript in Selenium, I get the fileobject. Therefore it looks like I have a filepath in the file-field, but the browser did not create a fileobject so far. Does the use of jquery make a difference at this point?

    Thx

    love and light

    marc

    ReplyDelete
    Replies
    1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from HTML5 CSS3 Javascript Online Training from India . or learn thru HTML5 CSS3 Javascript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry. HTML5 CSS3 Javascript Online Training from India

      Delete
  2. ok, now finally I got it. My basic problem has been, that I needed to generate a valid file-object, and pass this on to an ExtJs-function. Both is not so easy:

    1. in selenium-IDE / getEval you can not use window.Ext to get access to Ext (as you would expect). In the IDE you have to use selenium.browserbot.getWrappedWindow().Ext. Which in turn does not work when using selenium RC via PHPUnit_Extensions_SeleniumTestCase (which propably has nothing to do with phpunit). Via the selenium RC you have to use window.Ext

    2. You have to use getEval and not runScript, because with getEval the script runs in chrome-context and therefore with more rights.

    3. the following ist php-code, based on PHPUnit_Extensions_SeleniumTestCase, which does the job for me:

    $this->type("id_of_input_file", "/path/to/file");

    $this->getEval("var x = window.document.getElementById('xyz').files[0]; window.Ext.getCmp('awesomeId1SaveProject').processDragAndDropFileUpload(x);");


    If you use the IDE instead you have to use getEval-command together with the value:

    var x = selenium.browserbot.getWrappedWindow().document.getElementById('xyz').files[0]; selenium.browserbot.getWrappedWindow().Ext.getCmp('awesomeId1SaveProject').processDragAndDropFileUpload(x);

    hth someone

    marc

    ReplyDelete
  3. Hi, this looks very nice tip, but is there any way for Selenium WD with Java, please help,have a scenario to drag file from file system to webpage, like

    http://html5demos.com/dnd-upload

    Thank you

    ReplyDelete
  4. I just needed to record a speedy word to express profound gratitude to you for those magnificent tips and clues you are appearing on this site.
    selenium training in bangalore|

    ReplyDelete
  5. Needed to compose you a very little word to thank you yet again regarding the nice suggestions you’ve contributed here. Besant technologies Marathahalli

    ReplyDelete
  6. Thanks for one marvelous posting! I enjoyed reading it; you are a great author. I will make sure to bookmark your blog and may come back someday. I want to encourage that you continue your great posts.
    big data training in bangalore
    hadoop training in chennai

    ReplyDelete
  7. I believe there are many more pleasurable opportunities ahead for individuals that looked at your site.
    web design training in chennai

    ReplyDelete
  8. Those guidelines additionally worked to become a good way to recognize that other people online have the identical fervor like mine to grasp great deal more around this condition. selenium training in chennai

    ReplyDelete
  9. Excellent blog!! Such an interesting content to read, your idea made to take Web Designing Certifications. Keep updating more ideas. Thank you.
    Regards:
    website design in chennai
    web design training course

    ReplyDelete
  10. Nice blog. Thank you for sharing. The information you shared is very effective for learners I have got some important suggestions from it.
    Android Training Institute in Chennai | IOS Training in Chennai | Online Android Training in Velachery

    ReplyDelete
  11. Thank you a lot for providing individuals with a very
    spectacular possibility to read critical reviews from this site.


    java training in chennai


    java training in bangalore

    ReplyDelete
  12. Very good informative article. Thanks for sharing such nice article, keep on up dating such good articles.

    NO.1 APP DEVELOPMENT SERVICES | MASSIL TECHNOLOGIES

    ReplyDelete
  13. I like your blog format as you create user engagement in the complete article. It seems round up of all published posts. Thanks for sharing.. Excel Macro Training in Chennai | VMWare Training Institute in Chennai | Tally ERP9 Training Institute in Chennai

    ReplyDelete
  14. Awesome post.. Really you are shared very informative concept.. thank you for sharing. keep on updating..
    Best cloud Computing Training Institute in Chennai | Best cloud Computing Training Institute in Velachery

    ReplyDelete
  15. This paragraph gives clear idea for the new viewers of blogging, Thank you for this post. Good luck.
    Best Graphics DesigningTraining Institute in Chennai | Photoshop Training Institute in Chennai

    ReplyDelete
  16. I like your blog format as you create user engagement in the complete article. It seems round up of all published posts. Thanks for sharing

    white label website builder

    mobile website builder

    ReplyDelete
  17. Very good informative article. Thanks for sharing such nice article, keep on up dating such good articles.

    Best IT Security Services | Austere Technologies

    ReplyDelete
  18. Appreciation for really being thoughtful and also for deciding on certain marvelous guides most people really want to be aware of.

    AWS Training in Chennai

    ReplyDelete
  19. This comment has been removed by a blog administrator.

    ReplyDelete
  20. Good informative article. Thanks for sharing such nice information, keep on up dating such good articles.

    software testing training

    ReplyDelete
  21. I read this article. I think You put a lot of effort to create this article. I appreciate your work.
    Dissertation Writing Services

    ReplyDelete
  22. Really great blog, it's very helpful and has great knowledgeable information.

    For your Best career in commerce | Avinash College Of Commerce

    ReplyDelete
  23. Awe! What An Blog Very Helpful and interesting Really A great center for acquiring knowledge.Very Helpful Post And Explained Very Clearly About All the things.Very Helpful. Coming To Our Self We Provide Restaurant Equipment Parts .Really Thankfull For the blogger providing such a great information.Thank you. Have a Nice Day.

    ReplyDelete
  24. Whatever We Are Gathering the information from the blogs,we have to keep on updating it,Urgent Care in Chicago.By getting them into one place.Really thanks for posting.Very Thankful for the Informative Post.

    ReplyDelete
  25. Wow...What an excellent informative blog, really helpful. Thank you.

    Software Testing | Austere Technology

    ReplyDelete
  26. Those guidelines additionally worked to become a good way to
    recognize that other people online have the identical fervor like mine
    to grasp great deal more around this condition.

    digital marketing training in chennai

    seo training in chennai

    ReplyDelete
  27. Nice blog! This blog giving very useful information. Thanks for sharing with us.

    Dot Net Training in Chennai
    Java Training in Chennai

    ReplyDelete
  28. IEEE Project Center Chennai, is a leading national wide consulting and 2018 IEEE services, offering a wide array of solutions customized for a range of key verticals and horizontals. We are the preferred choice for
    cse mini projects in chennai | mini projects in chennai

    ReplyDelete
  29. The information you provided in the article is useful and beneficial USMLE Really Thankful For the blogger providing such a great information. Thank you. Have a Nice Day.

    ReplyDelete
  30. Great post! Thanks for sharing this valuable information.

    Web Designing Training in Chennai

    ReplyDelete
  31. Excellent information you made in this blog, very helpful information. Thanks for sharing.

    chartered accountant | Avinash college of commerce

    ReplyDelete
  32. Thanks For Sharing Valuable Information, Very Useful For U Medical Residency in USA

    ReplyDelete
  33. Great article, really very helpful content you made. Thank you, keep sharing.

    Best Degree Colleges Hyderabad | Avinash College of Commerce

    ReplyDelete
  34. Nice Blog, Thanks for sharing this valuable one.This is very useful for me and gain more information.

    Dot Net Training in Chennai

    ReplyDelete
  35. Selenium automates browsers. That's it! What you do with that power is entirely up to you. Primarily, it is for automating web applications for testing purposes, but is certainly not limited to just that. Boring web-based administration tasks can (and should!) be automated as well.

    Selenium has the support of some of the largest browser vendors who have taken (or are taking) steps to make Selenium a native part of their browser. It is also the core technology in countless other browser automation tools, APIs and frameworks.

    SEO Training in Chennai

    ReplyDelete
  36. Hi Thanks for the nice information its very useful to read your blog. We provide best Block Chain Services

    ReplyDelete
  37. Thank you for sharing this valuable information. But get out of this busy life and find some peace with a beautiful trip book best Andaman honeymoon packages

    ReplyDelete
  38. Thanks for sharing with us. This is very Great aticle , it gives more useful information.

    Java Training in Chennai

    ReplyDelete
  39. Thanks for sharing the valuable information to share with us For more valuable information please visit our website.

    selenium training in chennai


    aws training in chennai

    ReplyDelete
  40. Thank you for sharing this valuable information. But get out this busy life and find some peace with a beautiful trip. book ANDAMAN HOLIDAY PACKAGES @ 35999

    ReplyDelete
  41. Thank you for sharing this valuable information. But get out this busy life and find some peace with a beautiful trip. book CHEAP ANDAMAN PACKAGES @9999

    ReplyDelete
  42. Thank you for sharing this valuable information. But get out this busy life and find some peace with a beautiful trip. book Andaman Tourism

    ReplyDelete
  43. Thank you for sharing this valuable information. But get out this busy life and find some peace with a beautiful trip. book Best Travel Agency In India

    ReplyDelete
  44. Hi Thanks for the nice information its very useful to read your blog. We provide About Best Software Development Services

    ReplyDelete
  45. The blog or and best that is extremely useful to keep I can share the ideas of the future as this is really what I was looking for, I am very comfortable and pleased to come here. Thank you very much.

    Digital Marketing Course in Chennai
    Digital Marketing Training in Chennai
    Online Digital Marketing Training
    SEO Training in Chennai

    ReplyDelete
  46. Hi Thanks for the nice information its very useful to read your blog. We provide best Find All Isfs Courses

    ReplyDelete
  47. Hi Thanks for the nice information its very useful to read your blog. We provide best Massil Technologies

    ReplyDelete
  48. mytectra placement Portal is a Web based portal brings Potentials Employers and myTectra Candidates on a common platform for placement assistance.

    ReplyDelete
  49. Thank you for giving them this great knowledge

    Susan

    ReplyDelete
  50. Hi Thanks for the nice information its very useful to read your blog. We provide best Association Of Chartered Certified Accountants

    ReplyDelete
  51. Your article gives lots of information to me. Thanks for sharing.
    cima courses in hyderabad | ISFS

    ReplyDelete
  52. Good job in presenting the correct content with the clear explanation. The content looks real with valid information. Good Work

    DevOps is currently a popular model currently organizations all over the world moving towards to it. Your post gave a clear idea about knowing the DevOps model and its importance.

    Good to learn about DevOps at this time.


    devops training in chennai | devops training in chennai with placement | devops training in chennai omr | devops training in velachery | devops training in chennai tambaram | devops institutes in chennai | devops certification in chennai | trending technologies list 2018

    ReplyDelete
  53. This is really too useful and have more ideas and keep sharing many techniques. Eagerly waiting for your new blog keep doing more.
    web designing course in chennai
    JAVA Training in Chennai
    Java classes in chennai

    ReplyDelete
  54. Get a lot of fun playing with us in the online casino. roulettes free with us We all love to play in the Internet online casino, let's play with us and earn.

    ReplyDelete
  55. Outstanding blog thanks for sharing such wonderful blog with us ,after long time came across such knowlegeble blog. keep sharing such informative blog with us.

    best training insitute for machine learning
    machine learning course in Chennai

    ReplyDelete
  56. Thank you for sharing your article. Great efforts put it to find the list of articles which is very useful to know, Definitely will share the same to other forums.

    best openstack training in chennai | openstack course fees in chennai | openstack certification in chennai | openstack training in chennai velachery

    ReplyDelete
  57. Алюминиевый профиль светодиодной ленты лучшее что я находил это в компании Ekodio, супер ребята рекоммендую.

    ReplyDelete
  58. Wow...What an excellent informative blog, really helpful. Thank you. Best Oracle DBA Course Training| orskl

    ReplyDelete
  59. Thanks for this grateful information. all this information is very important to all the users and can be used good at all this process.


    Best Web Designing Training Academy in Kanchipuram

    ReplyDelete
  60. This information is very useful and innovative..I gained more knowledge from this.Thanks for the nice information its very useful to read your blog...
    Best web designing Training Institute in in Kanchipuram

    ReplyDelete
  61. thank you for such a great article with us. hope it will be much useful for us. please keep on updating..
    Best software testing Training Institute in Kanchipuram

    ReplyDelete
  62. The article is so informative. This is more helpful for our
    software testing training online
    best selenium online training in chennai. Thanks for sharing

    ReplyDelete
  63. Excellent post!!!. The strategy you have posted on this technology helped me to get into the next level and had lot of information in it.
    Best web Designing Training Training Institute in Kanchipuram

    ReplyDelete
  64. I feel really happy to have seen your webpage and look forward to so many more entertaining times reading here. Thanks once more for all the details.
    Best web designing Training Institute in Kanchipuram

    ReplyDelete
  65. Excellent Blog. I really want to admire the quality of this post. I like the way of your presentation of ideas, views and valuable content. No doubt you are doing great work. I’ll be waiting for your next post. Thanks .Keep it up!
    Kindly visit us @
    Luxury Boxes
    Premium Packaging
    Luxury Candles Box
    Earphone Packaging Box
    Wireless Headphone Box
    Innovative Packaging Boxes
    Wedding gift box
    Leather Bag Packaging Box
    Cosmetics Packaging Box
    Luxury Chocolate Boxes

    ReplyDelete
  66. Wow!! What a interesting blog..Thanks The information which you provided is very much useful and easy to learn as well...keep rocking and updating... looking further..
    Best CCNA Training Institute in Kanchipuram

    ReplyDelete
  67. Wow!! What a interesting blog..Thanks The information which you provided is very much useful and easy to learn as well...keep rocking and updating... looking further..
    Best CCNA Training Institute in Kanchipuram

    ReplyDelete
  68. Thanks for provide great information and looking beautiful blog. If you wish to learn get connected with Advanced Cyber Security Course. I hope below information will help you.
    Ethical Hacking Training in chennai
    Best Training Institute in Chennai

    ReplyDelete
  69. Nice Post. If you wish to get study abroad in any course. The below information will suit you.
    Skolarrssolutions
    Mbbs in Russia
    Mbbs in UK

    ReplyDelete
  70. Thanks for sharing an informative blog keep rocking bring more details
    SEO Training in Chennai

    ReplyDelete

  71. thanks for your information really good and very nice web design company in velachery

    ReplyDelete
  72. This post was quite awesome and interesting to read. Congrats for your work. Thanks a lot for providing this with us. Keep on updating this with us regularly:
    Best Selenium Automation Course Training Institute in kanchipuram|

    ReplyDelete
  73. Awesome Blog with informative concept. Really I feel happy to see this useful blog, Thanks for sharing such a nice blog...
    Best Linux Certification Course Training Institute in kanchipuram|

    ReplyDelete
  74. Great post.Thanks for one marvelous posting! I enjoyed reading it;The information was very useful.Keep the good work going on!!
    Best Graphic Designing Course Training Institute in kanchipuram|

    ReplyDelete
  75. This is the first & best article to make me satisfied by presenting good content. I feel so happy and delighted.By Learn Digital Marketing Course Training in Chennai it will help to get Digital Marketing Training with Placement Institute in Chennai. If you Learn Social Media Marketing Training with Placement Institute in Chennai, you will get job soon.

    ReplyDelete

  76. thanks for your information really good and very nice web design company in velachery

    ReplyDelete
  77. Aluminium Composite Panel or ACP Sheet is used for building exteriors, interior applications, and signage. They are durable, easy to maintain & cost-effective with different colour variants.

    ReplyDelete
  78. I learned World's Trending Technology from certified experts for free of cost. I got a job in decent Top MNC Company with handsome 14 LPA salary, I have learned the World's Trending Technology from python training institute in btm layout experts who know advanced concepts which can help to solve any type of Real-time issues in the field of Python. Really worth trying

    ReplyDelete
  79. Quite Interesting post!!! Thanks for posting such a useful post. I wish to read your upcoming post to enhance my skill set, keep blogging.
    No:1 Tally Training Academy in kanchipuram

    ReplyDelete
  80. Nice post.. Really you are done a wonderful job. Thanks for sharing such wonderful information with us. Please keep on updating...
    Best C & C++ Course Training Institute in kanchipuram|

    ReplyDelete
  81. Very nice post here and thanks for it .I always like and such a super blog of these post.Excellent and very cool idea and great blog of different kinds of the valuable information's.
    Best Tally Erp 9.0 Course Training Institute in kanchipuram|

    ReplyDelete
  82. Interesting post!!! Thanks for posting such a useful information. I wish to read your upcoming post to enhance my skill set and keep blogging.
    Best Tally Erp 9.0 Course Training Institute in kanchipuram|

    ReplyDelete
  83. This is excellent information. It is amazing and wonderful to visit your

    site.Thanks for sharing this information, this is useful to me.
    Best Selenium

    Automation Course Training Institute in kanchipuram
    |

    ReplyDelete
  84. very informative blog. Helps to gain knowledge about new concepts and techniques. Thanks for posting information in this blog…I found lots of interesting information here.Great work. i like this blog.
    Best Selenium Automation Course Training Institute in kanchipuram|

    ReplyDelete
  85. Excellent post!!! The future of cloud computing is on positive side. With most of the companies integrate Salesforce to power their business; there is massive demand for Salesforce developers and administrators across the world.
    No:1 BBA Project Center in kanchipuram

    ReplyDelete
  86. Excellent post!!! The future of cloud computing is on positive side. With most of the companies integrate Salesforce to power their business; there is massive demand for Salesforce developers and administrators across the world.
    No:1 BBA Project Center in kanchipuram

    ReplyDelete
  87. I have read your blog. Good and more information useful for me, Thanks for sharing this information keep it up....
    Best Dot Net Course Training Institute in kanchipuram|

    ReplyDelete
  88. Really it was an awesome blog...very interesting to read..You have provided an nice information....Thanks for sharing..
    Best Hardware & Networking Course Training Institute in kanchipuram|

    ReplyDelete
  89. Thanks for sharing in this blog...its very useful for us...keep on going...
    Best MS Office Course Training Institute in kanchipuram|

    ReplyDelete
  90. Thanks for your informative blog. Your post helped me to understand the future and career prospects. Keep on updating your blog with such awesome blog.
    No:1 Tally Training Academy in Kanchipuram





    ReplyDelete
  91. Nice blog. Thank you for sharing. The information you shared is very effective for learners I have got some important suggestions from it.
    Best PCB (Printed Circuit Board) Course Training Institute in kanchipuram|

    ReplyDelete
  92. Thanks for sharing this valuable information to our vision. You have posted a trust worthy blog keep sharing.
    Best PCB (Printed Circuit Board) Course Training Institute in kanchipuram|

    ReplyDelete
  93. Awesome post. Really you are shared very informative information... Thank you for sharing. Keep on updating...
    Best AWS (Advanced Amazon Web Services) Course Training Institute in kanchipuram|

    ReplyDelete
  94. Great post..Its very useful for me to understand the information..Keep on blogging..
    Best Software Testing Course Training Institute in kanchipuram|

    ReplyDelete
  95. I am reading your post from the beginning, it was so interesting to read & I feel thanks to you for posting such a good blog, keep updates regularly.
    Best Cloud Computing Course Training Institute in kanchipuram|

    ReplyDelete
  96. Nice..You have clearly explained about the conept..Its very useful for me to
    undertand..Keep on sharing..

    No:1Tally Training Academy in Kanchipuram







    ReplyDelete
  97. I found some useful information in your blog, it was awesome to read, thanks for sharing this great information to my vision, keep sharing.
    Best Graphic Designing Course Training Institute in kanchipuram|

    ReplyDelete
  98. Nice..You have clearly explained about the conept..Its very useful for me to
    undertand..Keep on sharing..

    No:1 CCNA Training Academy in Kanchipuram







    ReplyDelete
  99. Marvelous and fascinating information.Thanks for this greatful blog. keep your blog updated.
    Best Hardware & Networking Course Training Institute in kanchipuram|

    ReplyDelete
  100. Nice..You have clearly explained about the conept..Its very useful for me to
    undertand..Keep on sharing..

    No:1 Embedded system Training Academy in Kanchipuram







    ReplyDelete
  101. Thanks a lot for offering this unique post with us. I really enjoyed by reading your blog post.keep sharing.
    Best Python Course Training Institute in kanchipuram|

    ReplyDelete
  102. This is really awesome. Full of knowledge and latest information.Thanks for sharing.
    Best JAVA / J2EE / J2ME Course Training Institute in kanchipuram|

    ReplyDelete
  103. great and nice blog thanks sharing..I just want to say that all the information you have given here is awesome...Thank you very much for this one.
    No:1 Best EEE Project Center in kanchipuram|

    ReplyDelete
  104. really you have posted an informative blog. it will be really helpful to many peoples. thank you for sharing this blog. so keep on sharing such kind of useful blogs.
    No:1 Best NS2 (Network Simulator) Project Center in kanchipuram|

    ReplyDelete
  105. very usefull informatation.and iam expecting more posts like this please keep updating us....
    No:1 Best Android Project Center in kanchipuram|

    ReplyDelete
  106. Thanks for this greatful information. all this information is very important to all the users and can be used good at all this process.please keep on updating..
    No:1 Best ECE ( Electronics & Communications Engineering) Project Center in kanchipuram|

    ReplyDelete
  107. https://www.ingeniousmalarkey.com/2010/09/html5-drag-and-drop-upload-testing.html?showComment=1571409785227#c2136320861290967996

    ReplyDelete
  108. You post explain everything in detail and it was very interesting to read.Thank you for Sharing.
    No:1 Best Dotnet Project Center in kanchipuram|

    ReplyDelete
  109. After I see your blog it was so impressive and informative content. thanks for sharing such a lovely blog.
    No:1 Best Software Testing Training Center in kanchipuram|

    ReplyDelete