AdvanceUserInteractions API

Simulating dragAndDrop event

On Protractor/WebdriverJs we can simulate dragAndDrop in following ways,

this.swapStages = function(){
   var vStage1 = element(by.xpath(“(//div[@class = ‘stage’])[1]”));
   var vStage2 = element(by.xpath(“(//div[@class = ‘stage’])[2]”));
   vProt.actions().dragAndDrop(vStage1, vStage2).perform();
 };

this.swapStages = function(){
   var vStage1 = element(by.xpath(“(//div[@class = ‘stage’])[1]”));
   var vStage2 = element(by.xpath(“(//div[@class = ‘stage’])[2]”));
    vProt.actions().mouseMove(vStage1).
                mouseDown(vStage1).
                mouseMove(vStage2).
                mouseUp(vStage2).
                perform();
    vProt.sleep(5000);
 };

this.swapStages = function(){ var vElement = element(by.xpath(“(//div[@class = ‘stage’])[1]”));
 vProt.actions().dragAndDrop(vElement.find(),{x:40,y:40}).perform();
};

Please note that HTML5 drag events (dragstart, dragend, dragover, dragenter, dragleave, and drop) are not working – https://code.google.com/p/selenium/issues/detail?id=3604

Selenium WebDriver – AdvanceUserInteractions API – Move and click on specific coordinates

Moving mouse over specific coordinates and clicking on it.

Actions vActions = new Actions(vDriver);
vActions.moveByOffset(16, 320);
vActions.click();
Action vClickAction = vActions.build();
vClickAction.perform();

  • Working on Desktop Browsers(mostly known) using Selenium WebDriver
  • Working on Mobile Browsers(ChromeDriver, SafariDriver) using Appium 

Selenium WebDriver – Using AdvancedUserInteractions API

The Advanced User Interactions API is more comprehensive API for describing actions a user can perform on a web page such as drag and drop or clicking multiple elements while holding down the Control key.

Actions vMyActions = new Actions(vDriver);
      vMyActions keyDown(Keys.CONTROL)
        .click(someElement)
        .click(someOtherElement)
        .keyUp(Keys.CONTROL);

Then get the action:

   Action vBindAction = vMyActions.build();

And execute it:

   vBindAction.perform();

  • It supports single and composite actions for Mouse and Keyboards
  • It supports most of common browsers including mobile browsers

source

Following are my reusable custom actions, will add more as needed 🙂

 1. MouseMove
Move mouse over an element, usually to get hover

Locatable vElement = (Locatable) vDriver.findElement(by);
Mouse vMouse = ((HasInputDevices) vDriver).getMouse();
vMouse.mouseMove(vElement.getCoordinates());

2. Drag and drop
I need to drag and element on some other element,

vFirtElement = vDriver.findElement(By.id(“id));
vContaingerElement = vDriver.findElement(By.id(“containerid));
new Actions(vDriver). dragAndDrop(vFirtElement, vContaingerElement).build().perform();

3. Drag and Drop By
I need to drag and element from one place to other,

vElementToDrag = vDriver.findElement(By.id(“id”));
new Actions(vDriver).dragAndDropBy(vElementToDrag, 120, 1100).build().perform();

4. Select multiple elements
If I need to check/select multiple list items,

List vList = vDriver.findElements(By .cssSelector(“.class));
Actions vClickMultiple = new Actions(vDriver);
 vClickMultiple.clickAndHold(vList.get(1))
        .clickAndHold(vList.get(2))
        .click();
Action vBindActions = vClickMultiple.build();
 vBindActions.perform();

5. Slide
we can use dragAndDropBy to emulate sliding event

vElementToSlide = vDriver.findElement(By .className(“class”));
new Actions(vDriver).dragAndDropBy(vElementToSlide, 120, 0).build().perform();