Dragging and Dropping within a condensed screen size

[Jon]

Hey guys,

I'm having a small issue with dragging and dropping when the window is very small. I run my tests on virtual machines in hyper-v and the remote connect windows are limited in size, which limits the browser size. I'm finding that occasionally when the draggable object is being moved it will hit the edge of the screen (because the drop location is not visible) and then the cursor dragging the object will jump to the top of the screen causing the movement to fail.

I'm not sure how to get test studio to drag and adjust the screen location so the drop location appears properly.

Any suggestions would be greatly appreciated!

Cheers
Jon

[Stoich]

Hi Jon,
this is a tough one. First off let's clarify:

you state that you're invoking the Drag/Drop test on a hyper-v machine. And this imposes a limit of the browser size. So that would be the equivalent of performing the Drag/Drop test on a limited browser size - a browser size that will not allow both the source and the target of the Drag/Drop to be visible at the same time. Is this correct?

If this is correct: the short answer is that this cannot be done. The Drag/Drop actions that Test Studio records are desktop actions. That means that they affect the browser in the same way that a real user would affect the browser. By triggering different events within the browser. So in the same way that a user wouldn't be able to perform a Drag/Drop action if both elements are not visible - Test Studio cannot automate a drag/drop action if both control are not visible.

There might be ways to workaround this. Possible more than one. Here's what I managed to use successfully:
Trigger the drop event manually from code.Here's an article that explains how to invoke JavaScript through code:
http://www.telerik.com/automated-testing-tools/support/documentation/user-guide/write-tests-in-code/advanced-topics/javascript/invoking-javascript.aspx

Obviously you will need an understanding of your application and how javascript is used within it. This might be something that your developers can help with. I have confirmed that this approach does work.

I hope this helps.

Greetings,
Stoich
the Telerik team

[Jon]

Hi Stoich

The scenario you mentioned was correct. Your resolution makes sense. I will change the tests to do the dragging/dropping in the code-behind.

Thanks!
Jon

[Stoich]

Hello Jon,
let me know how it goes. I would be interested in seeing the solution you've come up with. And I'm sure other people check out the message board would be as well.

Again: getting this to work might be a little tricky. When I did it on my end I hand to change up the javascript code of the application a to get it to work. Getting your devs involved might be necessary if you're not familiar with the mechanics of the drag-n-drop thingy as it is implemented in your application.

Regards,
Stoich
the Telerik team

[Jon]

Hi Stoich

Sorry for the large delay in response. I wanted to share with you the issue that I'm having I have a screencast attached please navigate to the 1 minute mark to see the issue I'm facing. 

Note: I would prefer not to do use javascript to make the drag/drop, its more thorough to actually execute the drag and drop process.

http://screencast.com/t/d8nF8ChYKv32

Thanks
Jon

[Stoich]

Hello Jon,
would you help me understand the issue.

As far as I can tell "Two Factor Auth" panel needs to dragged into "Application Accessible by Role" as seen in screenshot 1. This is what's supposed to occur, correct ? But instead the automation goes off on a tangent and drags the panel to the bottom of the page?

If so the first thing to do is check the Properties for the drag/drop step (screenshot 2).
It might be that Test Studio is using the wrong reference point and/or coordinates for the dragging action.

Hope to hear from you soon.

Kind regards,
Stoich
the Telerik team

[Jon]

1. Hi Stoich
3. I'm doing this step in code behind. The code has been attached below. Note that the HtmlControlFinder class is something we developed prior to elements being data bindable.

The code gets the table/list that the element is apart of using an test studio element. It will accept any element that is a html container object. It will then search for an element with a specific innertext (in our case Two Factor Auth) once it's found it will use the telerik DragTo to move the element from its current location to the new location. Which is the application in role box that you specified in screenshot 1.

Note I've added a scrollToVisible step before dragging to alline the apps in role lists bottom edge to the bottom of the window.

Code:

HtmlUnorderedList availableAppsList = HtmlControlFinder.Get<HtmlUnorderedList>
                (this.Pages.SSORole.Expressions.AvailableApplicationsList);
            try
            {
                HtmlListItem appListItem = HtmlControlFinder.Get<HtmlListItem>
                (
                    availableAppsList,
                    "Two Factor Auth"
                );

                HtmlUnorderedList appsInRoleList = HtmlControlFinder.Get<HtmlUnorderedList>
                    (this.Pages.SSORole.Expressions.ApplicationsInRoleList);

                //Make sure drop location is visible
                appsInRoleList.ScrollToVisible(ScrollToVisibleType.ElementBottomAtWindowBottom);

                appListItem.DragTo(appsInRoleList);
            }
            catch (Exception)
            {
                Log.WriteLine("It appears that 2FA is already in the role");
                HtmlControlFinder.Get<HtmlSpan>
                    (
                        HtmlControlFinder.Get<HtmlUnorderedList>(this.Pages.SSORole.Expressions.ApplicationsInRoleList),
                        "Two Factor Auth"
                    );
            }

[Stoich]

Hello Jon,
the dragging actions involve so many variables (difference in browsers, difference between window size etc) that they can be really hard to get right.

Let's take the following drag/drop sample:
http://www.w3schools.com/html/html5_draganddrop.asp

I will walk you through the exact steps I took to automate this drag/drop reliably:

1)  Recorder a "normal" drag n drop step.
2) Converted the step to code and got this:

Pages.HTML5DragAndDrop.Drag1Image.Wait.ForExists(30000);
ActiveBrowser.ResizeContent(0, 118, 1680, 869);
ActiveBrowser.ScrollBy(0, 0);
Pages.HTML5DragAndDrop.Drag1Image.DragToWindowLocation(ArtOfTest.Common.OffsetReference.TopLeftCorner, 50, 24, true, ArtOfTest.Common.OffsetReference.TopLeftCorner, 618, 424, true);

3) I removed the lines I didn't like and I got left with this:

Pages.HTML5DragAndDrop.Drag1Image.Wait.ForExists(30000);

Pages.HTML5DragAndDrop.Drag1Image.DragToWindowLocation(ArtOfTest.Common.OffsetReference.TopLeftCorner, 50, 24, true, ArtOfTest.Common.OffsetReference.TopLeftCorner, 618, 424, true);

Since this sample simply doesn't work in IE I ignored that browser.

Now in the DragToWindow function above the first 3 parameters refer to the target object. The last 3 refer to the destination. I opened the app in Chrome in full screen and I determined the exact coordinates (x,y) of the destination object. ArtOfTest.Common.OffsetReference.TopLeftCorner means that the left corner of the page is (0,0);

And I adjusted the parameters to that:

Pages.HTML5DragAndDrop.Drag1Image.DragToWindowLocation(ArtOfTest.Common.OffsetReference.TopLeftCorner,
50, 50, true, ArtOfTest.Common.OffsetReference.TopLeftCorner, 670, 420, true);

However, I discovered that in FF the coordinates are a bit different. So I had to add this:

int x = 0;

if (ActiveBrowser.BrowserType == BrowserType.FireFox) {
    x = 25;
}

Pages.HTML5DragAndDrop.Drag1Image.DragToWindowLocation(ArtOfTest.Common.OffsetReference.TopLeftCorner,
50, 50-x, true, ArtOfTest.Common.OffsetReference.TopLeftCorner, 670, 420-x, true);

And since these coordinates are based on fully maximized browser we added this:

ActiveBrowser.Window.Maximize();

int x = 0;

if (ActiveBrowser.BrowserType == BrowserType.FireFox) {
    x = 25;
}

Pages.HTML5DragAndDrop.Drag1Image.DragToWindowLocation(ArtOfTest.Common.OffsetReference.TopLeftCorner,
50, 50-x, true, ArtOfTest.Common.OffsetReference.TopLeftCorner, 670, 420-x, true);

And now the code works correctly. I hope this helps so that you can make this work on your end.

I admit this feature can probably use some enchantment. Any feedback and suggestions are more than welcome and you can use our Feedback portal for that:
http://feedback.telerik.com/Project/117

Greetings,
Stoich
the Telerik team