How do I find an Object if there's scroll bar involved? And how to Drag and Drop them?

[Veroniquelu]

Hi All, 

I ran into some issues today. 

So assuming the object can be everywhere, it can also be on the next half of the screen and you can only see it when you scroll down. How do I find such object and Drag and Drop it to another object that might be on the other half of the screen? Thank you very much.

[AlexKaras · Accepted solution]

Hi,

To display the web element that is out of the visible web page borders you may use the ScrollIntoView() native web function.

E.g.:

oControl.ScrollIntoView(false)

[Veroniquelu]

Hi Alex,

I am not quite following. If this object can only be found when it's on the page, How can you use oControl.ScrollIntoView(false) when it's not found?

[Colin_McCrae]

It's only not visible on screen.

If it's on the page, but out of view, ScrollIntoView, should scroll automatically until the object is visible and usable. I use it frequently.

If that doesn't work, and you're able to map/control the scroll bars, your other option is to use the scrollbar in a loop.

eg:

Loop

>>> Is object visible?

>>> No? .... scroll

>>> Yes? .... end Loop

Type thing.

[Veroniquelu]

But Drag and Drop is still not working. .

[AlexKaras]

The more details, the more chances to get a reply that might help...

What exactly does not work?

Is the source object visible on the screen?

Is the target object visible on the screen at the same time?

Does the code properly selects/clicks the source object?

Is the drag operation performed at correct direction and for the correct distance?

Is the dragged object dropped at the correct location?

Any related errors / warnings in the test log?

The actual code that performs drag and drop operation?

Any screenshot that might help?

Any other details that might help?

[Veroniquelu]

It only works when the source object and target object are both visible on the screen. But if for example, if you can only see source object on the screen and then u have to use scroll bar to find the target object, in this case, the drag and drop function can not work. I remember reading it from some other forum that I have to use the scroll bar location to calculate the drag route.. But I really don't recall the details.. 

[AlexKaras]

Hi,

Well, in this case the regular .Drag() method will not work, indeed, because it uses the initial coordinates and the distance (direction) to drag to.

If you *really* need to drag to the objects that are out of page view (and maximizing browser's window does not make both objects visible), than you will have to implement drag procedure yourself. Something like (untested pseudo-code off-top of my head):

-- Put the source object into view;

-- Hover the mouse over it and press the left mouse button (use LLPlayer object for this and subsequent mouse operations));

-- Determine where the target object is located relative to the source one;

-- Perform a drag to the end of the web page in the direction of the target object;

-- Drag slightly over the page borders for some time period (e.g. for a second or two) to initialize page scrolling and drag back into the page to stop scrolling;

-- Check if the target object is visible (was moved into view) on the page; repeat the above step until the target object is visible;

-- Drag mouse over the target object and release left mouse button.

But I would wonder if I really need this? Am I testing how the drag and drop for the given functional area works in my tested application or do I test how the scrolling functionality works in the browser? Maybe it is possible to change the test or negotiate with developers so that both objects are visible on the (maximized) page?

In the worst case, maybe it is acceptable to have all other tests to be automated and leave this one for the manual verification when the manual testers will have to check the only thing: how drag and drop works if dragging to the object that initially is out of web page view?

[Veroniquelu]

The reason of implementing automation was that Drag and Drop takes up 40% of my regression time.  And it's the pain during regression, even if I spend 40% of my time manually doing that, the coverage is still low. So it would be nice to have this . But if this also takes too much effort, then I might have to limit the data entry, so it would not be that many data , it would not have a scroll bar... Thank for explaining this to me. 😛

[Veroniquelu]

Or is it possible to calculate the scroll bar location, so when I start drag and drop, I should be able to move backward the scroll bar according to the location, so I would not have to use a loop a check the target object everytime when I scroll back a little?I remember reading it from some javascript forum, there's a way to calculate the scroll bar location when performing drag and drop