Drag & Drop works sometimes and not others

Viewed 67

I'm hoping someone can shed some light on this for me.

I have 2 different drag & drop scenarios but the same approach doesn't work for both. One scenario only works with the Actions class while the other works with the javascript executor and I was hoping someone could explain to me why this might be happening.

First - here are my drag and drop methods

drag and drop with actions class

public void DragAndDropActions(IWebDriver driver, IWebElement sourceElement, IWebElement targetElement)
{
    try
    {
        var actions = new Actions(driver);
        actions.DragAndDrop(sourceElement, targetElement).Build().Perform();                
    }
    catch (Exception e)
    {
    }
}

drag and drop with jse - i actually found this jse code in another SO question

public void DragAndDropJSE(IWebDriver driver, IWebElement sourceElement, IWebElement targetElement)
{
    try
    {
        IJavaScriptExecutor js = (IJavaScriptExecutor)driver;
        js.ExecuteScript("function createEvent(typeOfEvent) {\n" + "var event =document.createEvent(\"CustomEvent\");\n"
        + "event.initCustomEvent(typeOfEvent,true, true, null);\n" + "event.dataTransfer = {\n" + "data: {},\n"
        + "setData: function (key, value) {\n" + "this.data[key] = value;\n" + "},\n"
        + "getData: function (key) {\n" + "return this.data[key];\n" + "}\n" + "};\n" + "return event;\n"
        + "}\n" + "\n" + "function dispatchEvent(element, event,transferData) {\n"
        + "if (transferData !== undefined) {\n" + "event.dataTransfer = transferData;\n" + "}\n"
        + "if (element.dispatchEvent) {\n" + "element.dispatchEvent(event);\n"
        + "} else if (element.fireEvent) {\n" + "element.fireEvent(\"on\" + event.type, event);\n" + "}\n"
        + "}\n" + "\n" + "function simulateHTML5DragAndDrop(element, destination) {\n"
        + "var dragStartEvent =createEvent('dragstart');\n" + "dispatchEvent(element, dragStartEvent);\n"
        + "var dropEvent = createEvent('drop');\n"
        + "dispatchEvent(destination, dropEvent,dragStartEvent.dataTransfer);\n"
        + "var dragEndEvent = createEvent('dragend');\n"
        + "dispatchEvent(element, dragEndEvent,dropEvent.dataTransfer);\n" + "}\n" + "\n"
        + "var source = arguments[0];\n" + "var destination = arguments[1];\n"
        + "simulateHTML5DragAndDrop(source,destination);", sourceElement, targetElement);                
    }
    catch (Exception e)
    {
    }
}

And now the tests:

drag and drop actions - passing

[TestMethod]
public void DragAndDropActionsPassingTest()
{
    driver.Url = "http://demo.guru99.com/test/drag_drop.html";
    var from = driver.FindElement(By.XPath("//*[@id='credit2']/a"));
    var to = driver.FindElement(By.XPath("//*[@id='bank']/li"));
    DragAndDropActions(driver, from, to);
    Assert.IsTrue(driver.FindElement(By.XPath("//*[@id='bank']/li")).Text.Contains("BANK"));
}

drag and drop actions - failing

[TestMethod]
public void DragAndDropActionsFailingTest()
{
    driver.Url = "https://the-internet.herokuapp.com/drag_and_drop";
    var boxes = driver.FindElements(By.XPath("//div[@id='columns']/div"));
    Assert.IsTrue(boxes[0].FindElement(By.XPath("./header")).Text.Equals("A"));
    DragAndDropActions(driver, driver.FindElement(By.XPath("//*[@id='column-a']")), driver.FindElement(By.XPath("//*[@id='column-b']")));
    boxes = driver.FindElements(By.XPath("//div[@id='columns']/div"));
    Assert.IsTrue(boxes[0].FindElement(By.XPath("./header")).Text.Equals("B"));
}

drag and drop jse - passing

[TestMethod]
public void DragAndDropJSEPassingTest()
{
    driver.Url = "https://the-internet.herokuapp.com/drag_and_drop";
    var boxes = driver.FindElements(By.XPath("//div[@id='columns']/div"));
    Assert.IsTrue(boxes[0].FindElement(By.XPath("./header")).Text.Equals("A"));
    DragAndDropJSE(driver, driver.FindElement(By.XPath("//*[@id='column-a']")), driver.FindElement(By.XPath("//*[@id='column-b']")));
    boxes = driver.FindElements(By.XPath("//div[@id='columns']/div"));
    Assert.IsTrue(boxes[0].FindElement(By.XPath("./header")).Text.Equals("B"));
}

drag and drop jse - failing

[TestMethod]
public void DragAndDropJSEFailingTest()
{
    driver.Url = "http://demo.guru99.com/test/drag_drop.html";
    var from = driver.FindElement(By.XPath("//*[@id='credit2']/a"));
    var to = driver.FindElement(By.XPath("//*[@id='bank']/li"));
    DragAndDropJSE(driver, from, to);
    Assert.IsTrue(driver.FindElement(By.XPath("//*[@id='bank']/li")).Text.Contains("BANK"));
}

EDIT - While looking over both sites I noticed that the elements that work with the JSE have an actual draggable="true" tag associated to them: enter image description here

while the elements that work with the Actions class don't seem to have that tag (at least on these sites): enter image description here

I have no idea if this is actually related or not. Just something interesting I thought I'd include.

0 Answers
Related