How draw a straight line in canvas using protractor

Question

Context:

1. I want to test a signature canvas field
2. So i want to draw a signature and then validate that signature is displayed on the canvas.
3. Right now i cannot even draw a proper line , so wanted to understand how action class works in protractor before i go for the actual implementation.

It would be great if someone could help me

I am trying to draw a line on the canvas : https://vrobbi-nodedrawing.herokuapp.com/ at a particular location say on the right side like:

I tried too many ways nothing is working below is the code that draws atleast something on the screen:

await browser.get("https://vrobbi-nodedrawing.herokuapp.com/");

await browser.sleep(5000);


let canvas = $('canvas#paper')
await canvas.click();

await browser.actions().
mouseMove(canvas, {
        x: 120,
        y: 100
    }).mouseDown().mouseMove(canvas, {
        x: 120,
        y: 200
    })
    .perform();

But i am getting below output and not a vertical line as expected:

Also:

I checked the canvas size using chrome inspect tool and it shows : 1922*939

But when i give move to element .mouseMove( canvas, { x: 50, y: 500 }) i am getting below error:

> Failed: move target out of bounds
>       (Session info: chrome=83.0.4103.61)
>     Build info: version: '3.141.59', revision: 'e82be7d358', time: '2018-11-14T08:25:53'
>     System info: host: 'DESKTOP-U2HJMCV', ip: '192.168.254.1', os.name: 'Windows 10', os.arch: 'amd64', os.version: '10.0',
> java.version: '12.0.1'
>     Driver info: driver.version: unknown   Stack:
>     MoveTargetOutOfBoundsError: move target out of bounds

1. Could someone help me in understanding how to calculate offset , why the exception is thrown
2. how to find offset inside an element (Here canvas)
3. How draw a straight line

Answer 1

How draw a straight line

https://github.com/angular/protractor/issues/5445

I raised an issue with protractor and figured out myself that the issue is caused in my system because in my config file i had:

SELENIUM_PROMISE_MANAGER: false

so if you have the same then just try removing it and use :

exports.config = {

specs: ['test.js'],


onPrepare: function(){
    browser.waitForAngularEnabled(false);
    browser.driver.manage().window().maximize();
},

  jasmineNodeOpts: {
    showColors: true, // Use colors in the command line report.
    defaultTimeoutInterval: 5000000,

},

}

Note:

The bug is still open and i am waiting for the confirmation whether using SELENIUM_PROMISE_MANAGER: false, explicitly in config is depreceated in protractor. As the documentation http://www.protractortest.org/#/control-flow still mentions to use it

Update:

https://github.com/angular/protractor/issues/5445

@praveendvd I actually know what the issue is. It was my original assumption when I read the problem, but when I couldn't reproduce it originally I decided not to mention it. Splitting the 2 movements into 2 separate browser.actions fixes it. I assume what is happening is that when we disable the selenium promise manager it executes the 3 actions at the same time rather than sequentially. This code works for me: await browser.actions(). mouseMove(canvas, { x: 120, y: 100 }).perform(); await browser.actions(). mouseDown().mouseMove(canvas, { x: 120, y: 200 }).perform();

So below code works,with control flow disabled

await browser.actions(). mouseMove(canvas, { x: 120, y: 100}).perform(); 
await browser.actions(). mouseDown().mouseMove(canvas, {x: 120, y: 200 }).perform();

How to calculate offset , why the exception is thrown

Selenium:

In selenium offset is calculated from the center of the element , eg let say you have a canvas with size 1400 * 1400 , then the center point is xc=1400/2 and yc = 1440/2.

so to move to right you need to give {x:2,y:0} which will move the mouse to 700 + 2 , and to move left we need to use {x:-2,y:0} which will move the mouse to 700-2.

so if you want to get x pixels from left border use -xc+50 , and to move 50 pixels from top use -yc+50 . As the -xc and -yc will cancel out the reference from center.

Protractor:

protractor works the same way as mentioned above for selenium

how to find offset inside an element (Here canvas):

https://chrome.google.com/webstore/detail/coordinates/bpflbjmbfccblbhlcmlgkajdpoiepmkd/related

you can use this to find coordinate in page, and find coordinate in an element , make an image in paint with same pixel height and width , and use

https://yangcha.github.io/iview/iview.html