如何从Chrome浏览器获取画布元素坐标

时间:2019-08-06 08:32:28

标签: java selenium-webdriver html5-canvas gojs

我确实尝试了许多chrome扩展,但似乎它是从窗口顶部开始计算坐标,而不是仅考虑画布。

我在此页面上:https://gojs.net/latest/samples/grouping.html

想要获得+按钮下方的坐标:

enter image description here

我确实尝试使用action class使用selenium单击该+按钮,我的代码是:

  driver.get("https://gojs.net/latest/samples/grouping.html");
        WebElement flowCanvas = driver.findElement(By.xpath("//div[@id='myDiagramDiv']//canvas"));

            new Actions(driver)
                    .moveToElement(flowCanvas, 500, 200).click().perform();

因为上面的代码没有得到+按钮的确切坐标,所以没有单击它。

1 个答案:

答案 0 :(得分:1)

我将假设500, 200值是flowCanvas HTML元素的坐标系中的(x,y)点。正确吗?

首先,您需要转到应用程序为HTMLDivElement创建的 Diagram 对象,该对象包含GoJS用于显示图并支持编辑的画布和其他元素。为此,请调用静态函数 Diagram.fromDiv 。例如:

var myDiagram = go.Diagram.fromDiv(theDivElement);

然后,您需要知道要单击其按钮的 Group 的键。如果 Group 模板中的“ SubGraphExpanderButton”具有 GraphObject.name ,并且您知道名称是什么,则可以执行以下操作:

var group = myDiagram.findNodeForKey(groupKey);
if (!group) return;
var button = group.findObject(buttonName);
if (!button) return;
var docpt = button.getDocumentPoint(go.Spot.Center);
var viewpt = myDiagram.transformDocToView(docpt);
new Actions(driver)
    .moveToElement(flowCanvas, viewpt.x, viewpt.y)
    .click()
    .perform();

这与机器人示例中展示的技术相同: https://gojs.net/latest/extensions/Robot.html

嗯,您可能要确保节点(或至少按钮)首先位于视口内。首先致电 Diagram.scrollToRect