Hi,
We want to write selenium test cases on gojs diagram, which includes basic events like
a. clicking on a node/link
b. double click on a node/link
c. right click on a node/link
d. selecting a node/link.
As gojs is canvas based approach, Didn’t found any way to get the DOM elements of diagram elements.
But Using JavascriptExecutor we are able to get the elements from the diagram.
and able to perform select operation on a node/link, but not able to do remaining.
What’s the way to perform click, rightclick and doubleclick on nodes/links.
Yes, the whole point of using Canvas is to avoid the overhead of dealing with DOM elements.
I think you have the right idea. What I think you don’t know how to do is how to simulate mouse and keyboard events.
We implemented our own test system years ago. In our “Test” class we defined a number of handy methods for simulating mouse and keyboard input. Here’s our code: NOTE: this is obsolete – use the Robot class defined in extensions/Robot.js
[code]
/**
Simulate a mouse down event.
@this {Test}
@param {Point} pt a point in document coordinates.
@param {object=} eventprops an optional argument providing properties for the InputEvent.
*/
Test.prototype.mouseDown = function (pt, eventprops) {
var diagram = this.diagram;
var n = new go.InputEvent();
n.diagram = diagram;
n.documentPoint = pt;
n.viewPoint = diagram.transformDocToView(pt);
n.down = true;
if (eventprops) {
for (var p in eventprops) {
n[ p ] = eventprops[ p ];
}
}
diagram.lastInput = n;
diagram.firstInput = n.copy();
diagram.currentTool.doMouseDown();
};
/**
Simulate a mouse move event.
@this {Test}
@param {Point} pt a point in document coordinates.
@param {object=} eventprops an optional argument providing properties for the InputEvent.
*/
Test.prototype.mouseMove = function (pt, eventprops) {
var diagram = this.diagram;
var n = new go.InputEvent();
n.diagram = diagram;
n.documentPoint = pt;
n.viewPoint = diagram.transformDocToView(pt);
if (eventprops) {
for (var p in eventprops) {
n[ p ] = eventprops[ p ];
}
}
diagram.lastInput = n;
diagram.currentTool.doMouseMove();
};
/**
Simulate a mouse up event.
@this {Test}
@param {Point} pt a point in document coordinates.
@param {object=} eventprops an optional argument providing properties for the InputEvent.
*/
Test.prototype.mouseUp = function (pt, eventprops) {
var diagram = this.diagram;
var n = new go.InputEvent();
n.diagram = diagram;
n.documentPoint = pt;
n.viewPoint = diagram.transformDocToView(pt);
n.up = true;
if (diagram.firstInput.documentPoint.equals(pt)) n.clickCount = 1; // at least??
if (eventprops) {
for (var p in eventprops) {
n[ p ] = eventprops[ p ];
}
}
diagram.lastInput = n;
diagram.currentTool.doMouseUp();
};
/**
Simulate a mouse wheel event.
@this {Test}
@param {number} delta non-zero turn
@param {object=} eventprops an optional argument providing properties for the InputEvent.
*/
Test.prototype.mouseWheel = function (delta, eventprops) {
var diagram = this.diagram;
var n = diagram.lastInput.copy();
n.diagram = diagram;
n.delta = delta;
if (eventprops) {
for (var p in eventprops) {
n[ p ] = eventprops[ p ];
}
}
diagram.lastInput = n;
diagram.currentTool.doMouseWheel();
};
/**
Simulate a key down event.
@this {Test}
@param {string|number} keyorcode
@param {object=} eventprops an optional argument providing properties for the InputEvent.
*/
Test.prototype.keyDown = function (keyorcode, eventprops) {
var diagram = this.diagram;
var n = diagram.lastInput.copy();
n.diagram = diagram;
if (typeof(keyorcode) === ‘string’) {
n.key = keyorcode;
} else if (typeof(keyorcode) === ‘number’) {
n.key = String.fromCharCode(keyorcode);
}
n.down = true;
if (eventprops) {
for (var p in eventprops) {
n[ p ] = eventprops[ p ];
}
}
diagram.lastInput = n;
diagram.currentTool.doKeyDown();
};
/**
Simulate a key up event.
@this {Test}
@param {string|number} keyorcode
@param {object=} eventprops an optional argument providing properties for the InputEvent.
*/
Test.prototype.keyUp = function (keyorcode, eventprops) {
var diagram = this.diagram;
var n = diagram.lastInput.copy();
n.diagram = diagram;
if (typeof(keyorcode) === ‘string’) {
n.key = keyorcode;
} else if (typeof(keyorcode) === ‘number’) {
n.key = String.fromCharCode(keyorcode);
}
n.up = true;
if (eventprops) {
for (var p in eventprops) {
n[ p ] = eventprops[ p ];
}
}
diagram.lastInput = n;
diagram.currentTool.doKeyUp();
};[/code]
This allows us to write tests that perform actions like: function(test) { // execute the test
test.mouseDown(new go.Point(60, 10), { timestamp: 0 }); // below/right of Alpha location
test.mouseMove(new go.Point(75, -25), { timestamp: 100 }); // between down and up points
test.mouseUp(new go.Point(100, -50), { timestamp: 200 }); // mouse up point
}
The test could then check: function(test) { // check the results
test.assert(test.diagram.selection.count === 1, "should have selected one node");
var alpha = test.diagram.findNodeForKey("Alpha");
test.assert(test.diagram.selection.first() === alpha, "selected Node isn't Alpha");
test.assert(test.isApproxPoint(alpha.location, new go.Point(90, -60)), "didn't move Alpha to 90,-60");
}
So you could do similar things in your environment. The advantage of this is that everything is in document coordinates, so it is more resistant to irrelevant changes in the DOM.
HOWEVER:
However, in our tests we infrequently make use of mouse or keyboard events. Instead, most of our tests deal directly with the model and with Parts in the Diagram. This is what you are doing by calling Diagram.select, rather than pretending to click at a certain point in order to select a Node. You can still check that a Node is at a particular location (but remember not to compare floating point numbers with equality!). But be careful about checking for sizes, especially if the size is dependent on the measurement of TextBlocks, since those can be different on different platforms.
Hi Walter, Thanks for the reply that’s quite informative.
Actually we are using ParallelLayout to layout the diagram.
And our diagram contains nodes and links, each node and link having their own functionality.
Using JavascriptExecuter(as mentioned in the post) we are able to get the node and links from diagram.
Now we want to perform doubleclick and rightclick on these node/links.
Is there any such methods like node.contextClick() and node.doubleClick(), so that it can directly do our job.
or any alternative approach.
We are now able to simulate single click and double click using Input Event Object with clickCount set appropriately.
Now we are stuck with context click. For it we tried to create a DiagramEvent object, but not sure how to set the mousePoint which is used by the ContextTool.
Are we on the right track? If so what are we missing. Otherwise what approach to take?
The reasons there are no methods like Node.doubleClick are several fold:
the behavior might be different at different points in the node because GraphObjects within the node’s visual tree might define their own click behavior (example: context click on ports in the Dynamic Ports sample)
there are other expected side-effects besides just calling the node’s GraphObject.click (or doubleClick or contextClick) event handler function, including selection and raising DiagramEvents
the node might not be visible, for any number of reasons, so users would not be able to click on the node, making your test less realistic than it could be
The benefit of actually simulating InputEvents is that it goes through the actual process of choosing and running tools. So it will actually start the ContextMenuTool or ClickSelectingTool, as appropriate.
Our internal tests that exercise ContextMenuTool do things like:
Hi walter,
By using earlier mouseDown and mouseUp we are able to achieve left click operation.
Now to implement right click, we just changed
diagram.currentTool.doMouseDown(); to diagram.currentTool.contextMenuTool.doMouseDown(); and
diagram.currentTool.doMouseUp(); to diagram.currentTool.contextMenuTool.doMouseUp(); in both mouseDown and mouseUp. Still the right click is not happening. Are we missing something else ??
No, the above code for simulating input events assumes there is only one Diagram. We can investigate extending that functionality to cover dragging between diagrams.
For the next release, 1.3.4, there will be a new Robot class in extensions/Robot.js which will include the functionality shown above but with extensions for supporting drag-and-drop between Diagrams.
There will be a corresponding extensions/Robot.html sample to demonstrate how to simulate input events for testing purposes.
Our team has resolved this using webdriver API. Sharing it so any selenium user may benefit.
It seems the palette needs to be made aware of a drag within its’ viewport.
Actions actions = new Actions(SeleniumTestBase.getBrowserDriver());
actions.moveToElement(paletteCanvas, palette_node_x, palette_node_y);
actions.clickAndHold();
//Dragging selected node a little bit to make it work.
actions.moveToElement(paletteCanvas, palette_node_x, palette_node_y+50 );
//Now perform the actual move
actions.moveToElement(flowCanvas, diagramOffsetX , diagramOffsetY);
actions.release();
actions.perform();
I am trying to click my image cards created on canvas but I am unable to achieve it . I am using below snippet:
Actions actions = new Actions(getDriver());
actions.moveToElement(element).moveByOffset(x, y).click().build();
actions.perform();
I am using below values f:
element= driver.findElement(By.xpath("//div[@id=‘bigRoomPlanning’]/canvas"));
x=143, y=50
Hi Walter and Sanojantony ,
I am trying to drag and drop the objects & nodes on the canvas for Gojs application as it’s unable to perform the action. What’s the way to perform the action to drag & drop the objects & nodes into the canvas. I am using below snippet: