Knowledge Base Article

> Knowledge Base > Rapise

Created By  dmarkovtsev Wednesday, July 26, 2017

Modern technologies allow to drag&drop files into a browser window to upload them to a server. Such a feature works for example in Chrome browser in Google Drive and Photo applications. In this howto post we'll show how to automate drag&drop of files from Windows Explorer to Google Drive opened in Chrome.

Note: Sample test is available on GitHub. See ChromeDragDrop folder.

Create a new Cross-browser test in Rapise and choose Chrome HTML  web profile when prompted. Open your Google Drive folder in Chrome.

Start recording in Rapise and learn 'Drop files here' label. Finish recording and update object XPATH in properties window to

//div[@role='main' and not(@style)]

This is one of the most reliable ways to identify the drop target. DOM tree of the Google Drive is pretty complex, so construction of such an XPATH is pretty much a challenge for beginners. Most of DOM elements are always present on a page though sometimes stay invisible. And sometimes there are several copies of a given DOM sub tree.

Ok, we finished with browser recording part. Let's proceed to Windows Explorer. Add 'UIAutomation' library to the list in the main test file.

g_load_libraries=["%g_browserLibrary:Chrome HTML%", "UIAutomation"];

Open Windows Explorer in a folder with files and start recording in Rapise. Learn the list of files.

We are ready for drag&drop implementation. Here is the code. 'UploadArea' is a drop area in Chrome browser. 'Items_View' is the list of files in Windows Explorer. In the test we iterate through all files in the folder and drag&drop them into Chrome window. 'dropX' and 'dropY' designate the center of the drop area in Google Drive.

function Test()
    /** target */
    var target = SeS('UploadArea');
    var dropX = target.GetX() + (target.GetWidth() >> 1);
    var dropY = target.GetY() + (target.GetHeight() >> 1);
    Tester.Message("dropX: " + dropX + ", dropY: " + dropY);
    /** source */
    var fileList = SeS('Items_View');
    var itemCount = fileList.GetItemCount();
    for(var i = 0; i < itemCount; i++)
        var itemName = fileList.GetItemNameByIndex(i);
        var source = fileList.DoFindByText(itemName);
        /** drag & drop */
        // move mouse to the center of the source object
        // press left mouse button
        // drag the object over the drop area,
        // give Chrome a chance to understand it is a dragover event
        Global.DoMouseMove(dropX - 200, dropY - 50);
        Global.DoMouseMove(dropX - 100, dropY);
        // release mouse button
        // pause before next drag&drop
    // Let video capture to do the job


Watch playback session of the test on YouTube



Selected files will be attached to any email sent on saving ticket.

file selected files selected  () Delete Selected

  • Created:
  • by:

Select files to upload

Or drag and drop files here

Uploading …
Upload More?
There was an error.
Try again?

Save to upload the selected file(s)

Article Info
  • Last Updated: 7/26/2017
  • Article ID: KB268
  • Views: 14381