Facing challenges to automate goJs canvas with protractor

Hi,

I am trying to test application under test having GoJS canvas on it with Protractor .
I have seen already existing blogs and come across : Simulating Input Events .

I am trying to automate same sample application with Simple test case : dragging ‘alpha’ from palette to canvas
i Checked the ‘View this sample page’s source in-page’ , to simulate the Similar stuff in my protractor test (MyRobotTest.js) i have included go.js and Robot.js in my automation repository.

when i am running this , i am getting Error: ReferenceError: window is not defined in go.js
anything that i am missing to setup,
Note : i am not calling MyRobotTest.js from HTML,

can anyone please suggest any pointers if already tried protractor UI automation tool to test go js. thanks in advance

MyRobotTest.js code :

require(‘./Robot.js’);
require(‘./go.js’);
module.exports = function () {

this.myinit = function () {
 

    var $ = go.GraphObject.make;
    function showProperties(e, obj) {  // executed by ContextMenuButton
        var node = obj.part.adornedPart;
        var msg = "Context clicked: " + node.data.key + ". ";
        msg += "Selection includes:";
        myDiagram.selection.each(function (part) {
            msg += " " + part.toString();
        });
        document.getElementById("myStatus").textContent = msg;
    }

    function nodeClicked(e, obj) {  // executed by click and doubleclick handlers
        var evt = e.copy();
        var node = obj.part;
        var type = evt.clickCount === 2 ? "Double-Clicked: " : "Clicked: ";
        var msg = type + node.data.key + ". ";
        document.getElementById("myStatus").textContent = msg;
    }

    myDiagram =
        $(go.Diagram, "myOverviewDiv",  // must name or refer to the DIV HTML element
            {
                allowDrop: true,  // must be true to accept drops from the Palette
                nodeTemplate: $(go.Node, "Auto",
                    {
                        click: nodeClicked,
                        doubleClick: nodeClicked,
                        contextMenu: $(go.Adornment, "Vertical",
                            $("ContextMenuButton",
                                $(go.TextBlock, "Properties"),
                                {click: showProperties})
                        )
                    },
                    $(go.Shape, "Rectangle",
                        {fill: "lightgray"},
                        {portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer"}),
                    $(go.TextBlock,
                        {margin: 3},
                        new go.Binding("text", "key"))),
                model: new go.GraphLinksModel([
                    {key: "Lambda"},
                    {key: "Mu"}
                ], [
                    {from: "Lambda", to: "Mu"}
                ]),
                "undoManager.isEnabled": true
            });
    // a shared Robot that can be used by all commands for this one Diagram
    robot = new Robot(myDiagram);  // defined in Robot.js

    // initialize the Palette that is on the left side of the page
    myPalette =
        $(go.Palette, "entityListPanel",  // must name or refer to the DIV HTML element
            {
                nodeTemplate: myDiagram.nodeTemplate,
                model: new go.GraphLinksModel([  // specify the contents of the Palette
                    {key: "Airplane"},
                    {key: "Airship"},
                    {key: "Businessman"}

                ])
            });
}


this.dragFromPalette = function () {
    // simulate a drag-and-drop between Diagrams:
    var dragdrop = {sourceDiagram: myPalette, targetDiagram: myDiagram};
    robot.mouseDown(5, 5, 0, dragdrop);  // this should be where the Alpha node is in the source myPalette
    robot.mouseMove(60, 60, 100, dragdrop);
    robot.mouseUp(100, 100, 200, dragdrop);  // this is where the node will be dropped in the target myDiagram
    // If successful in dragging a node from the Palette into the Diagram,
    // the DraggingTool will perform a transaction.
}

}

Are you trying to run this in a browser, or are you trying to run this on a server? For the latter case, consider using PhantomJS. Server-Side Images with GoJS -- Northwoods Software and the projects/phantom-circuit demo.

Hi Walter,

i am writing a javascript test in protractor (protractor internally uses Selenium webdriver API), by dragging the alpha from palette to canvas.
Note : to test this application Simulating Input Events, i don’t want to do these actions by clicking on buttons that is given on demo page .

The purpose of those HTML buttons in the Robot.html sample is to allow the user to execute code that simulates testing the diagram. Of course for real tests there would not be buttons with that behavior in the app. The tests would simply execute all of the code to simulate the user’s actions.

I explored the link that you shared about phantomjs, but not able to set it up ,not sure whether i am moving in right direction because now facing another.as phantomjs is mainly used for headless execution, where as i want to mimic the actual scenario the way user will test the application on browser , that’s why i am using protractor.

is there any sample example that i can refer to setup PhantomJs for Protractor + Robot.js to test GoJs UI.

If Protractor is used to test apps running in a browser, why are you trying to use PhantomJS at all?

yes that is how i started writing the protractor test using + Robot.js to test GoJs Sample UI first, but as i was getting an error in go.js ‘window is not defined’ , mentioned in intial thread.
is there any example protractor or java script test that has been written to test webui of “Simulating Input Events

let me know if i can share my code snippet to analyze the actual problem. (i shared MyRobotTest.js in original post)

I do not think any of us have any experience using Protractor, so we are unable to provide any sample.

I do suggest searching in this forum and on the web, because I know that some GoJS customers have used Protractor and many have used Selenium.
https://forum.nwoods.com/search?q=protractor
https://forum.nwoods.com/search?q=selenium