CODEWITHSUNDEEP
javaselenium-webdriverhtml5-canvasgojs
Helping Hands
Helping Hands

Reputation: 5396

How to get canvas element co-ordinates from chrome browser

I did try with many chrome extension but seems it is counting co-ordinates from top of the window rather than only consider canvas.

I am on this page: https://gojs.net/latest/samples/grouping.html

want to get co-ordinate of below + button :

enter image description here

I am actully trying to click on that + button using selenium using action class , my code is :

  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();

Because I am not getting exact co-ordinates of + button, above code, is not clicking on it.

Upvotes: 0

Views: 955

Answers (1)

Walter Northwoods
Walter Northwoods

Reputation: 4106

I'll assume the 500, 200 values are an (x,y) point in the coordinate system of your flowCanvas HTML element. Is that correct?

First, you'll need to get to the Diagram object that your app creates for the HTMLDivElement that holds the canvas(es) and other elements used by GoJS to show the diagram and support editing. Call the static function Diagram.fromDiv for that. For example:

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

Then you need to know the key of the Group whose button you want to click. If the "SubGraphExpanderButton" in the Group template has a GraphObject.name and you know what the name is, you could do something like:

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();

This is the same technique demonstrated in the Robot sample: https://gojs.net/latest/extensions/Robot.html

Hmmm, you might want to make sure that the node (or at least the button) is within the viewport first. Call Diagram.scrollToRect first.

Upvotes: 1

Related Questions