Selenium drag and drop / click and hold not working

Question

Here's a list of draggable items that are reordered on drag. I'm trying to simulate the dragging functionality using selenium.

function listItemDragged(e) {
  e.target.classList.add("dragging");
  let dropTarget =
    document.elementFromPoint(e.clientX, e.clientY) === null
      ? e.target
      : document.elementFromPoint(e.clientX, e.clientY);

  if (e.target.parentNode === dropTarget.parentNode) {
    dropTarget =
      dropTarget !== e.target.nextSibling ? dropTarget : dropTarget.nextSibling;
    e.target.parentNode.insertBefore(e.target, dropTarget);
  }
}

function listItemDropped(e) {
  e.target.classList.remove("dragging");
  e.preventDefault();
}

function onLoad() {
  let listItems = document.querySelectorAll(".draggable");
  Array.prototype.map.call(listItems, (option) => {
    option.ondrag = listItemDragged;
    option.ondragend = listItemDropped;
  });
  document.querySelector('.sortable-list').addEventListener("dragover", (e) => e.preventDefault());
}

onLoad();

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif
}

body {
    background-color: #2b3035;
}

.draggable {
    display: flex;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 5px;
    border: 1px solid #5c636a;
    margin-right: 5px;
    background-color: #212529;
    cursor: grab;
    color: #ffffff;
    touch-action: none
}

.dragging {
    cursor: grabbing;
    background: transparent;
    color: transparent;
    border: none;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<ul class='sortable-list list-unstyled'>
  <li class='draggable' draggable='true'>
    Lorem ipsum dolor sit amet 1
  </li>
  <li class='draggable' draggable='true'>
    Lorem ipsum dolor sit amet 2
  </li>
  <li class='draggable' draggable='true'>
    Lorem ipsum dolor sit amet 3
  </li>
  <li class='draggable' draggable='true'>
    Lorem ipsum dolor sit amet 4
  </li>
</ul>

Here's what I tried with selenium so far:

from selenium.webdriver import ActionChains, Chrome
from selenium.webdriver.common.by import By

driver = Chrome()
driver.get('http://localhost:8000')
draggable_elements = driver.find_elements(By.CLASS_NAME, 'draggable')
ActionChains(driver).drag_and_drop(draggable_elements[0], draggable_elements[1]).perform()

which I'm expecting to swap the first and second elements. Nothing happens, no errors, no issues, nothing.

Also:

from selenium.webdriver import ActionChains, Chrome
from selenium.webdriver.common.by import By

driver = Chrome()
driver.get('http://localhost:8000')
draggable_elements = driver.find_elements(By.CLASS_NAME, 'draggable')
offsets = driver.execute_script(
    'return [arguments[0].offsetTop, arguments[0].offsetLeft]', draggable_elements[1]
)
ActionChains(driver).drag_and_drop_by_offset(
    draggable_elements[0], offsets[0], offsets[1] + 50
).perform()

Same as before, nothing happens.

And

from selenium.webdriver import ActionChains, Chrome
from selenium.webdriver.common.by import By

driver = Chrome()
driver.get('http://localhost:8000')
draggable_elements = driver.find_elements(By.CLASS_NAME, 'draggable')
actions = ActionChains(driver)
actions.click_and_hold(draggable_elements[0]).move_to_element(draggable_elements[1]).perform()
actions.release().perform()

Sometimes it works and drops a random element at a random position, definitely not the one expected, but most of the time, nothing happens.

Selenium drag and drop / click and hold not working

0 Answers0

Linked