🧩 When Selenium's dragAndDrop() Executes... But Nothing Happens

We've all been there.

Your tests runs.

No exceptions.

No red errors.

But the UI?

Nothing moved.

Recently, I faced this exact issue while automating drag-and -drop on the demoqa page using Selenium with Java and Cucumber.

The method executes successfully - but the element was not dropped.

Let's break down what happened and why.

---

🚨 The problem

I initially used Selenium's build-in method:

Actions actions - new Actions(driver);
actions.dragAndDrop(source, target).perform();

The test passed execution.

But the UI did not change.

The text did no update to "Dropped!"

There were:

• ❌ No exceptions

• ❌ No failure

• ❌ No warnings

Just silent failure.

---

🧠 Why dragAndDrop() Sometimes Fails

The root cause is not Selenium.

It's how modern UI frameworks (like jQuery UI) handle drag-and-drop events.

The demoqa page uses jQuery UI, which listens for very specific sequence of mouse events:

• mousedown

• mousemove

• dragstart

• drop

• mouseup

selenium's dragAndDrop() is actually a convenience wrapper that internally performs:

clickAndHold(source)
moveToElement(target)
release()

However, this simplified chain does not always trigger the full JavaScript event sequence expected by UI libraries.

So Selenium thinks it completed the action.

But the frontend doesn't recognize it as a valid drop.

---

✅ The Fix That Worked

Instead of using dragAndDrop(), I manually controlled the action chain:

Actions actions = new Actions(driver);
actions
     .moveToElement(source)
     .clickAndHold()
     .pause(Duration.ofMillis(500))
     .moveToElement(target)
     .pause(Duration.ofMillis(500))
     .release()
     .build()
     .perform();

Why this works:

• It simulates a more realistic human interaction

• The pause allows the browser to process intermediate events

• jQuery UI properly detects the drag sequence

After this change, the drop worked perfectly.