Interacting with elements inside a Canvas element NOT by hardcoded location

Archive
,
1

I have read through the various posts regarding this topic, but so far have not found a solution for this specific case.

I have a canvas element, which contains a link-node diagram with a context menu on the nodes and links. We use Go.JS for this, an example of which you can view here: HTML Context Menu

From the other posts I’ve read, it seems the consensus is that elements can only be interacted with by using their specific locations. However, the Go.JS graph does not consistently place each element in the same location on load. The location depends on the applied layout, zoom level, and other elements (nodes and links) already present on the graph. Even keeping these constant, the elements may still appear in a slightly different place upon load.

I would love to be able to capture and store each node and link as its own element, which can be identified and interacted with, such as right-clicking to use a context menu as shown in the above linked example.

2

Okay, there’s a lot to digest there.

There’s good reason for that. I checked out the example and it’s clear there is only one menu (despite there being multiple elements to which it might be applied). This tells me it’s highly likely the location is significant (to identify the underlying canvas node).

I think your best bet is to work with a fixed known-to-be-good layout in circumstances you (your test) can control or expect. I see only grief and suffering via any other route.

FYI: You can click any element in the menu directly using either WebUI or JavaScript. But again, you need to be sure the menu is placed correctly where the test is expecting it.

If you’re happy with that idea, you can display the menu by using JavaScript to modify the css display property of the contextMenu element (a div in the example) → display:block

I imagine you’re going to end up with something very basic, or, if you’re brave, something that uses either the Robot API or the Actions API. The following should help:

https://docs.oracle.com/javase/7/docs/api/java/awt/Robot.html

3

Sorry, I missed this:

Problem: The nodes are not elements. They’re essentially scribble on a screen.

Investigate all possible ways to move the mouse (WebUI, Robot, Actions) and choose which gives you the least amount of code and something easily maintained. Even then, you’re going to want control over that layout due to the fact you don’t have elements: the nodes are meaningless to HTML and therefore HTML/Web testing.