I need to test a drag and drop written in react 16.7.0. I tried using selenium and also puppeteer.
The puppeteer code is as bellow:
const temp_source = await iframe.$x("//div[@class='profile-item profile-item--draggable']//span[text()='pfsense_dut']")
const source = temp_source[0];
const temp_destination = await iframe.$x("//div[@class='component-network-diagram__diagram-layer']");
const destination = temp_destination[0];
const box_source = await source.boundingBox();
const box_destination = await destination.boundingBox();
await page.mouse.move(box_source.x + box_source.width / 2, box_source.y + box_source.height / 2);
await page.mouse.down();
await page.mouse.move(box_destination.x + box_destination.width / 2, box_destination.y + box_destination.height / 2, {steps:50});
await page.mouse.up();
I see the target element being clicked and dragged above the canvas (the drop zone), but nothing happens when dropping the element. Also no errors or exceptions are thrown.
The code for python with selenium is:
def dragAndDrop(self):
try:
ActionChains(self.driver).drag_and_drop(div_source,canvas_destination).perform()
return True
except Exception as e:
print (e)
return False
Using python with selenium nothing happens: I don't even see the target element being selected. Using python with selenium, I receive an exception:
exception: 'str' object has no attribute 'id'
I even tried using the recommendations from this SO thread. The behavior is the same as the one seen with puppeteer.
What can be the possible issue with the drag and drop?