Combining Selenium tests with drag and drop on interactive maps

The only way to solve 90% of large complex problems is by breaking them down into small manageable subproblems. You’ve probably heard about eating the elephant one piece at a time, or starting the long trip with one small step…

What these adages describe is an approach that helped us solve a lifelong problem of UI testing with Selenium. That problem is drag-and-drop actions against embedded interactive elements like Google Maps. Not only we figured out how to fully automate this functionality, but we also implemented it within an embedded browser! Here’s how we did it.

Breaking the Problem Down to Smaller Steps, Literally

By “literally”, I mean literally breaking down each drag and drop action into small steps:

  • Define each step as a movement of the draggable element by a fixed small number of pixels. For instance, a 4-pixel movement can be a step.
  • For each step, capture new coordinates and compare them with the user input (i.e. where the mouse pointer stopped). Check the UI state and check for action completion.
  • If the user hasn’t dropped the element (meaning the action is incomplete), proceed to a new step.
  • Once the user has dropped the element, capture the state of the UI and carry on with the remaining user journey.

A chain of steps like this one typically lasts for 5 seconds or less. Breaking the actions down in such a way eliminates a whole class of errors. Namely, checking the UI state helps prevent the errors caused by Google Maps controls disappearing whenever the user moves the map. But there’s a whole bunch of other challenges to deal with.

The Complexities of Embedded Elements

I’m sure you know that embedded elements can be problematic. Interacting with them while automating a UI test is tricky in a whole bunch of ways:

  • Buttons, controls, or content at the frame’s border might be hidden, non-accessible or displayed inconsistently.
  • Entire frame can be non-editable.
  • For embedded Google Maps, drag and drops will often cause the “element out of bounds” errors.
  • Selenium does not support HTML5 drag and drops, so you’ll have to emulate these actions with JavaScript.

The Complexities of Embedded Browsers

If the points above sound complicated, wait till you start untangling these snafus within an embedded browser. Properly capturing the coordinates of the mouse action is one major challenge. Yet another one is adjusting the action to the structure of the page that’s being captured at this very moment! Also, don’t forget that the page will change along with the user’s actions due to the redrawing of the target element.

The good news is we’re handling all of these issues for you! Our very own Selenium alternative Screenster features a stable solution for drag and drop actions automation, and we’re going to further improve it in the future. What’s more, Screenster features a unique visual testing algorithm that eliminates false positives while keeping comparisons pixel-perfect. This makes us the only low-code visual testing solution suitable for complex web UIs.

UI testing automation doesn’t have to be daunting — in fact, it can be fun, and we can prove it! Check out our new video to see Screenster in action, or try it yourself by signing up for our free demo below.


Сode-optional Selenium alternative

Try Online

Combining Selenium tests with drag and drop on interactive maps was last modified: September 20th, 2018 by Michael Tomara
WordPress Image Lightbox Plugin