3

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:

enter image description here

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:

enter image description here

Also:

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

enter image description here

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
10
  • Welcome. How is this related to software testing and/or quality assurance? – pavelsaman Jun 1 '20 at 9:00
  • Testing canvas is a valid usecase in testing , @Dav234 even I tried to do it but in protractor each call.is moving the focus back to center of the element . I will try more else better to raise issue with protractor team. – PDHide Jun 1 '20 at 12:23
  • 3
    That's a valid usecase , the problem in the question is pretty straight forward ,how to interact with canvas using selenium. It's same like asking how to upload a file using selenium! – PDHide Jun 1 '20 at 12:35
  • 3
    @pavelsaman Thanks for replying , i want to draw signature on the canvas and validate the signature. But before going with complex images wanted to start with basic stuff like how to draw a line. COuld you please have alook and let me know what to do. I stuck – Dav234 Jun 1 '20 at 15:04
  • 1
    Fair enough, perhaps I came to a conclusion too fast. – pavelsaman Jun 1 '20 at 18:33
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

5
  • 1
    That was it , thank you so much.! – Dav234 Jun 2 '20 at 12:49
  • @Dav234 it seems protractor also is working with reference as the center of the image not as top left corner as documented – PDHide Jun 2 '20 at 20:40
  • I have updated the answer – PDHide Jun 2 '20 at 20:40
  • 1
    You have to -xc+xoffset for protractor also , same like in selenium – PDHide Jun 2 '20 at 20:40
  • thank you that made sense now , i was not able to shift the line to left . Thanks for clarifying – Dav234 Jun 4 '20 at 10:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.