Double click and mouse move activity unable to perform in canvas element using Protractor API

GoJS
#1

Hi,
We want to write Protractor test cases on canvas page, 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 in canvas based approach, Didn’t found any way to get the DOM elements of canvas elements, but using below method able to get Label value of element.

(window.canvasModel.nodes[0].stage.label) we are able to fetch label value by using protractor API, after fetch the value while performing any activity (Double click , Mouse Move) didn’t performed.

image
image1097×67 5.12 KB

label value

Is there any other way to perform these activity like( Double click/mousemove) by using Go-JS, please let me know, or if required any other information please let me know .

#2

First, please understand that Canvas elements do not contain any DOM elements within them. This is true for all browsers and has nothing to do with GoJS.

Second, when talking about GoJS, you should not be assuming that there is anything within the HTML DIV element that hosts the Diagram. The implementation might change at any time.

Third, I suggest that you use the GoJS API to discover and manipulate what is in the diagram and what is seen within the viewport, and that you use the Robot class to simulate mouse events.
https://gojs.net/latest/extensions/Robot.html
https://gojs.net/latest/api/symbols/Robot.html
Copy the Robot code from https://gojs.net/latest/extensions/Robot.js

#3

@walter Thanks for the reply.

I have copied Robot file using given link " https://gojs.net/latest/extensions/Robot.js " its give me Error :“Robot is not defined”.

Is it feasible to work with Protractor API? Please let me know or is there any other way to simulate the mouse events.
Thanks in advance.

#4

So you copied that file into your project and made sure it was loaded along with the rest of your JavaScript files that the app needs when testing?

We don’t know anything about Protractor. You have already searched for “Selenium” – that didn’t help?

#5

@walter Thanks for the reply.

I have tried to include robot.js in my project but its giving me same error" Robot is not defiened," i have tried to include robot.js like [ require(’./Robot.js’);]

Could you please let me know this is correct approach to include the robot.js in protractor project.
Thanks in advance

#6

I’m sorry, but I really have no idea of how to use Protractor. Please ask in one of their forums. And if you find a satisfactory answer, please post it here so that other people can benefit.

#7

@walter Thanks for the reply.

I will try to find out how to include this robot.js file and try to simulate the mouse events, I will post if any problem statement or solution i found regarding the same.

Thanks In advance.

#8

Hi,
@walter
I have included robot.js in my current javascript (.js). Below is the code snippet i am following:
“require(’./Robot.js’);
var robot;
var canvasele = element(by.xpath(”//div[@class=‘spectrum-gojs-diagram’]"));
robot = new Robot(canvasele);
var dragdrop = { writeToNull.getWebElement(),
robot.mouseDown(60, 60, 100, dragdrop);"

In the above Snippet i am trying to use robot .js to perform my Mouse operation on canvas div element but i keep on getting “Robot is not defined " error or " robo.Robot is not a constructor”.
Please Advise.
as in Go js documents , i have assigned var robot as global variable.
Note : we have not developed this application as this is test Environment so we are using canvasele as subsititute of my diagram, as all the canvas page element should be inside this canvasele.

#9

Sorry, but you really need to ask support for Protractor. I have no idea of how to use Protractor or Selenium.

Once you get a proper reference to Robot, you will find that the constructor takes a Diagram as its argument, not an HTML Div element.
https://gojs.net/latest/api/symbols/Robot.html#constructor

If the Diagram has already been initialized:

var robot = new Robot(go.Diagram.fromDiv(divelement));

Note the distinction between an HTML Div element and an HTML Canvas element. You should not be touching the Canvas element at all, if it even exists.

#10

Hi Walter,
This is my canvas ,when I am using go.Diagarm.fromDiv on browser console I can get the control of canvas from it

Capture2
Capture21306×337 39.1 KB

But when I am trying the same in my automation script to test the gojs canvas using
go.Diagram.fromDiv(“spectrum-gojs-diagram”)

it gives me this error Failed: Cannot read property ‘getElementById’ of undefined

does it mean Div which is holding canvas should have assigned an ID attribute ? or anything else that i am missing here to get the control of diagram

This is the dom of my web page, I am trying to get the control of diagram from Div, can you please help in debug

Capture1
Capture11328×429 66.3 KB

#11

It appears from your code in the console that “spectrum-gojs-diagram” is a class name, not an element id.