Protractor: How to draaw a line on canvas

[praveendvd]

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

Bug report

• Node Version: v10.15.3
• Protractor Version: Version 5.4.3
• Browser(s): chrome
• Operating System and Version Windows 10

[Fuun347]

Interesting why you are getting this result. I ran the same code you have provided and I get a straight line. What chromedriver version are you using?

Regarding the error you are getting, you are receiving it because the cursor ended up outside of your screen.

[praveendvd]

Interesting why you are getting this result. I ran the same code you have provided and I get a straight line. What chromedriver version are you using?

Regarding the error you are getting, you are receiving it because the cursor ended up outside of your screen.

Hi @Fuun347 I got the issue:

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,

},
SELENIUM_PROMISE_MANAGER: false,
}

The above config file will cause the issue i am facing, but if I remove the code line SELENIUM_PROMISE_MANAGER: false,. It works fine

Any thoughts on this !

[Fuun347]

I don't have SELENIUM_PROMISE_MANAGER: false, as part of my config. I also should mention I use async/ await just like you and not selenium control flow. I have no clue why it might be causing an issue.

[praveendvd]

I don't have SELENIUM_PROMISE_MANAGER: false, as part of my config. I also should mention I use async/ await just like you and not selenium control flow. I have no clue why it might be causing an issue.

@Fuun347 That's it, try adding SELENIUM_PROMISE_MANAGER: false and you can reproduce the issue.

As per documentation, http://www.protractortest.org/#/control-flow if we need to use await, we need to set SELENIUM_PROMISE_MANAGER: false

Is this requirement deprecated now?

[Fuun347]

@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();

[praveendvd]

Thanks for that it works

[praveendvd]

@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();

The documentation says , that the offset is calculated from top left corner but when i use it it istaking form center of the element

so if i want to move left then i have to give (-50,20) so start point is 50 pixel to left of center and 20 pixel to down of center.

@Fuun347 are you aware whats the correct reference for moveMouse offset calculation ?

https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/actions_exports_LegacyActionSequence.html

[Fuun347]

@praveendvd if you do not provide an element it is going to use the top left corner of the browser as reference. If you provide an element it will always use coordinates relative to the element's center. This applies to any click/ mouseMove type action. From your screenshot you can see it in the (). Further you can see the same thing here:

[praveendvd]

@Fuun347 for mouseMove it says elements top-left

See with the code if i use

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

I would expect the line to start from left edge of canvas , but its starting from slight right to center of canvas

• have to find center coordinate and then do -xc+50 to get the expected action

[Fuun347]

@praveendvd Actually I even got confused. You are right. It does say if an offset is provided it will be based on the top left corner of the element. But I don't think that's correct. The documentation might be outdated. Not too sure.