Selenium ActionChains doesn't move an element

Question

I'm testing a web_app that use React-dnd library to provide drag and drop to the user. The App has a list where the user can change the order of the elements just with drag and drop. I'm writing the test for the app with Selenium 4.10.0 and Python. I tried to use the ActionChains.drag-and_drop but it doesn't work. (there are here in Stack overflow several questions about that). I tried with script in JS and execute that and that was working until the App was updated to react-dnd, now also the script to dispatch events doesn't work anymore. So I tried again to use ActionChains with a different approach: something lihe that:

   source = self._web_driver.find_element(By.CSS_SELECTOR, "#list_data_0")
   target =self._web_driver.find_element(By.CSS_SELECTOR, "#list_data_1")
   
    #self.drag_and_drop_js(source, target) # this was the tentative with script
    
    target_x = _target.location['x']
    target_y = _target.location['y']
    print (f"targhet  location x={target_x} y={target_y}")
    
    source_x = _source.location['x']
    source_y= _source.location['y']
    print (f"source location x={source_x} y={source_y}")
    
    print ("start to move")
    action.click_and_hold(source).pause(2).move_to_element_with_offset(target, 1, 1).release().perform() 
    
    source_x = source.location['x']
    source_y= source.location['y']
    print (f"source after mouve location x={source_x} y={source_y}")

The result:

targhet  location x=10 y=377
source location x=10 y=281
start to move
source after mouve location x=10 y=281

As you can see the element didn't move, On screen and in the console I can see that the element is clicked and hold but not moved.

can this be a problem related to the react-dnd? Why do I have no move?

Thanks for any help.

Answer 1

Having done a similar thing in JS earlier this month for Angular CDK, I'm hoping that the python library has a similar problem as the JS one had and that react-dnd has similar triggers to cdk-drag

Try splitting this line into a few more performances:

action.click_and_hold(source).pause(2).move_to_element_with_offset(target, 1, 1).release().perform() 

So that it becomes:

action.click_and_hold(source).perform()
action.pause(2).move_to_element_with_offset(target, 1, 1).double_click.perform()
action.release().perform()
action.clear_actions() 

I'm assuming that the chaining has broken somewhere in the implementation of the selenium actions library (like it has in JS), and requires you to press as an action, move and click (at least once, if not twice, hence the double click) in the droppable area as another action, before releasing the mouse button as a third

The clear command is there to simply ensure nothing that is held down remains held down at the end.

Note: this isn't guaranteed to work, and drag and drop is quite pernickety. This solution works in one area of the site I'm working on and not in another, but it at least completed the drag and drop where selenium's drag_and_drop action didn't