Safari Selenium - Actions class & JavaScriptExecutor not working

Question

We are trying to extend our current automation to run on Safari browser, and facing multiple issues. These work perfectly on Chrome, Firefox and recently with IE too, but facing issues on Safari. Any help or suggestions on these much appreciated !

Actions class don't seem to work in safari We use actions class for dragAndDrop. When we try actions class for dragAndDrop, an error is thrown "org.openqa.selenium.ElementNotInteractableException:" Also when we try to use actions class for moveToElement, it is not working. Is there an alternative available for actions class

Alternative tried : Tried to use dragAndDrop from this site, and it doesn't work either : https://ynot408.wordpress.com/2011/09/22/drag-and-drop-using-selenium-webdriver/

JavaScriptExecutor don't work on Safari. When we try JavascriptExecutor, it throws the same error "org.openqa.selenium.ElementNotInteractableException:" Is there any capability that needs to be enabled for this to work ? I did enable : safariOptions.setCapability(CapabilityType.SUPPORTS_JAVASCRIPT, "true"); If I try to set the below capability, the browser does not even launch :

safariOptions.setUseCleanSession(true);
safariOptions.setUseTechnologyPreview(true);

Please advice if any of you faced any issue with these, and if you have any alternative for these,

Answer 1

I was testing a kendo application and tried the solutions in Selena's answer but it was a different solution that ended up working for me, including Safari 14.

Test application.

Working drap and drop (small change to use WebElements rather than CSS strings):

var triggerDragAndDrop = function (elemDrag, elemDrop) {
  /* function for triggering mouse events */
  var fireMouseEvent = function (type, elem, centerX, centerY) {
    var evt = document.createEvent('MouseEvents');
    evt.initMouseEvent(
      type,
      true,
      true,
      window,
      1,
      1,
      1,
      centerX,
      centerY,
      false,
      false,
      false,
      false,
      0,
      elem
    );
    elem.dispatchEvent(evt);
  };

  /* calculate positions*/
  var pos = elemDrag.getBoundingClientRect();
  var center1X = Math.floor((pos.left + pos.right) / 2);
  var center1Y = Math.floor((pos.top + pos.bottom) / 2);
  pos = elemDrop.getBoundingClientRect();
  var center2X = Math.floor((pos.left + pos.right) / 2);
  var center2Y = Math.floor((pos.top + pos.bottom) / 2);

  /* mouse over dragged element and mousedown*/
  fireMouseEvent('mousemove', elemDrag, center1X, center1Y);
  fireMouseEvent('mouseenter', elemDrag, center1X, center1Y);
  fireMouseEvent('mouseover', elemDrag, center1X, center1Y);
  fireMouseEvent('mousedown', elemDrag, center1X, center1Y);

  /* start dragging process over to drop target*/
  fireMouseEvent('dragstart', elemDrag, center1X, center1Y);
  fireMouseEvent('drag', elemDrag, center1X, center1Y);
  fireMouseEvent('mousemove', elemDrag, center1X, center1Y);
  fireMouseEvent('drag', elemDrag, center2X, center2Y);
  fireMouseEvent('mousemove', elemDrop, center2X, center2Y);

  /* trigger dragging process on top of drop target*/
  fireMouseEvent('mouseenter', elemDrop, center2X, center2Y);
  fireMouseEvent('dragenter', elemDrop, center2X, center2Y);
  fireMouseEvent('mouseover', elemDrop, center2X, center2Y);
  fireMouseEvent('dragover', elemDrop, center2X, center2Y);

  /* release dragged element on top of drop target*/
  fireMouseEvent('drop', elemDrop, center2X, center2Y);
  fireMouseEvent('dragend', elemDrag, center2X, center2Y);
  fireMouseEvent('mouseup', elemDrag, center2X, center2Y);

  return true;
};

Injected javascript as per solutions in Selena's answers above (read file into variable java_script). Executed against existing WebElements (drag and drop) with:

    String js =  "var src = arguments[0];var dest = arguments[1];";
    js += "triggerDragAndDrop(src, dest);";
    JavascriptExecutor executor = (JavascriptExecutor) webdriver;
    executor.executeScript(java_script + js, drag, drop);