使用 Selenium 在 Chrome 中拖放 SVG 元素的解决方法？

Question

详情：

"chromedriver": "^87.0.7",
"geckodriver": "^1.22.1",
"html-dnd": "^1.2.1",
"nightwatch": "^1.5.1",

预计

使用 JavaScript 中的 Nightwatch 框架将 SVG 元素拖放到其他 SVG 元素。

实际

测试通过但未发生实际移动。

描述我尝试使用以下方法：

browser.moveToElement(locator, dragElement, 1, 1);
browser.mouseButtonDown(0);
browser.moveToElement(locator, dropElement, 1, 1);
browser.mouseButtonUp(0);

我注意到在测试运行时移动鼠标将允许拖放对 SVG 元素起作用。

用过 html-dnd 什么都没有。

const dragAndDrop = require('html-dnd').codeForSelectors;

"Drag and Drop": function (browser) {
        browser.url(myurl);
        browser.useXpath();
        browser.execute(dragAndDrop, [svgDragElement, svgDropElement]);
        browser.end();
    }

Answer 1

编辑：
如果下面的代码片段不起作用，请在第二个 moveToElement() 更改 X 轴和 y 轴的像素

好的，经过大量的反复试验以及来自自动化工程师同事的帮助，我找到了解决方案。

browser.moveToElement(locator, dragElement, 1, 1);
browser.mouseButtonDown(0);
browser.moveToElement(locator, dragElement, 1, 1);    // yes, move to your starting 
browser.moveToElement(locator, dropElement, 1, 1);    // element again
browser.mouseButtonUp(0);

无法解释这种奇怪的行为，但我猜它会“关注”该方法工作所必需的元素。

注意
在某些情况下 browser.pause() 在 moveToElement()

之间是必要的

使用 Selenium 在 Chrome 中拖放 SVG 元素的解决方法？

Workaround for Drag and Drop SVG elements in Chrome using Selenium?

javascript

selenium

svg

selenium-webdriver

nightwatch.js