Dragging and Dropping within a condensed screen size

8 posts, 0 answers
  1. Jon
    Jon avatar
    55 posts
    Member since:
    May 2012

    Posted 22 Nov 2012 Link to this post

    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
  2. Stoich
    Admin
    Stoich avatar
    1 posts

    Posted 23 Nov 2012 Link to this post

    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
    Are you enjoying Test Studio? We’d appreciate your vote in the ATI automation awards.
    Vote now
  3. Jon
    Jon avatar
    55 posts
    Member since:
    May 2012

    Posted 23 Nov 2012 Link to this post

    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
  4. Stoich
    Admin
    Stoich avatar
    1 posts

    Posted 27 Nov 2012 Link to this post

    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
    Are you enjoying Test Studio? We’d appreciate your vote in the ATI automation awards.
    Vote now
  5. Jon
    Jon avatar
    55 posts
    Member since:
    May 2012

    Posted 18 Mar 2013 Link to this post

    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
  6. Stoich
    Admin
    Stoich avatar
    1 posts

    Posted 21 Mar 2013 Link to this post

    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
    Quickly become an expert in Test Studio, check out our new training sessions!
    Test Studio Trainings
  7. Jon
    Jon avatar
    55 posts
    Member since:
    May 2012

    Posted 22 Mar 2013 Link to this post

    1. Hi Stoich
    2. 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"
                        );
                }
  8. Stoich
    Admin
    Stoich avatar
    1 posts

    Posted 26 Mar 2013 Link to this post

    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
    Quickly become an expert in Test Studio, check out our new training sessions!
    Test Studio Trainings
Back to Top