UI Automation for go js diagrams usingJs events

GoJS
1

Hi All

We started using Go Js within our project for some time and we were trying to automate it with Selenium
I have already seen posts in this forum that suggested a few ways
So In our POC, for UI auto with GoJs, we tried using Sikulli for getting images and tried to drag and drop with some success
But after interacting with the developer, came to know we could do it in a better way using the Javascript executor interface of Selenium

A few methods to get the objects from class names were given by the developer for example
document.getElementsByClassName(‘gojs-diagram-div’)[0].goDiagram.model.nodeDataArray
would return a collection of all the objects within the diagram
and
document.getElementsByClassName(‘gojs-palette-div’)[0].goDiagram.model.nodeDataArray
would return all the objects within the pallet
Now if we can get individual objects from Palleter say using its SVGNAme which is unique
We should be able to drag and drop them by dispatching a Javascript events

We have already done a few such dispatch events for example,
below code

            ((IJavaScriptExecutor)driver).ExecuteScript("var evt = document.createEvent('MouseEvents');" +
    "evt.initMouseEvent('dblclick',true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0,null);" +
    "arguments[0].dispatchEvent(evt);", elem);
            CommonHelper.TraceLine("Clicked Element using JS:" + elemdesc);

would perform a double click on a target element

So I would like to know what events can we dispatch for GoJs objects for drag drop I went through the link “GraphObject | GoJS API” to get some idea
haven’t fully understood how I dispatch events for a drag-and-drop event
If someone has used this approach It will save us time.
Appreciate any help in this regard

Thanks
Prasanna

2

I think you are on a much more productive path than the previous attempt.

However, it would help if you understood a bit more about GoJS. There are two halves to each diagram: the Diagram and its Nodes and Links, each of which is composed of GraphObjects, and the Model and its data, which are just plain JavaScript objects. See the first diagram at GoJS Data Binding -- Northwoods Software

So when you say “…div…goDiagram.model.nodeDataArray” – those are not all of the objects within the diagram. They are all of the node-like data objects within the Model, which are represented by Nodes in the Diagram.

I think you mostly want to act on the Diagram (i.e. the value of div.goDiagram). But you will want to check the state of the Model data as part of your testing.

The issue of coordinate systems can be confusing. That’s true for HTML as well as for GoJS. However, most of the position and size values involving with the Diagram and with Nodes and Links are in document coordinates. If you use the Robot extension, it simulates events for you in the diagram:

3

Hi Walter

Thanks for your quick response

We had already seen the topic in the Robot Class, and in essence, it looks like we still need the X Y co-ordinances even with Robot Class I was more interested in knowing if we support javascript events directly on individual nodes as intractable objects but based on your reply it seems nodes within the diagram are not interactable using Java script …and we can only retrieve the X and Y positions using which we could perform mouse events of Robot class or using any alternatives mechanisms that are available with Selenium that use similar approach of Robot API class

So how do we handle scrolling dynamically with Robot class any ideas on that?
Let’s say I wanted to interact with an element that is not in the viewport so here too getting its coordinates from the diagram and using the events for the mouse or keyboard only way available
Thanks again for you all support

4

I’m not sure what you are asking for. And I do not understand your use of the term “intractable”.

Each GraphObject can have a number of event handlers on it related to mouse/finger/stylus events, such as:

Read more about this at: GoJS Events -- Northwoods Software

The Robot sample, https://gojs.net/extensionsJSM/Robot.html, demonstrates dragging from a Palette to the main Diagram, as well as drag-selecting within the Diagram and clicking on nodes.