Automate a canvas element using taiko.

getgauge / taiko

A node.js library for testing modern web applications

https://taiko.dev

MIT License

3.58k stars 453 forks source link

Automate a canvas element using taiko. #437

Closed sanjeeth-07 closed 5 years ago

sanjeeth-07 commented 5 years ago

Is there a feature available to automate a canvas layer using taiko?

Need to perform leftclick on coordinates ( x, y ) on a canvas layer. Click from one point to another Click on elements on the canvas which contains a map. ( https://openlayers.org/)

NivedhaSenthil commented 5 years ago

would it be helpful if click api can take (x,y) coordinates for your usecase ?

Not sure if I understand this right

Click from one point to another

can you please elaborate ?

sanjeeth-07 commented 5 years ago

"Click from one point to another" - to draw a line on canvas from one point to another using the click functions is what i meant. @NivedhaSenthil It would be helpful if the click api had the below functionalities webdriverio-click

browser.leftClick(selector,xoffset,yoffset);
browser.moveToObject(selector,xoffset,yoffset);
browser.buttonUp(button);
browser.buttonDown(button);

NivedhaSenthil commented 5 years ago

leftClick can be currently achieved like await click('text',{button:left}) other mouse up, down and move are not exposed yet. And support to click on coordinates has to be added too

sanjeeth-07 commented 5 years ago

Thanks i will take a look at this await click('text',{button:left}) and hoping others would be added soon.

NivedhaSenthil commented 5 years ago

Reopening the issue to track, providing option to click using coordinates and exposing mouse actions.

Apoorva-GA commented 5 years ago

Click to take coordinates. https://taiko-preview.gauge.org/#click
Adding mouseaction api to preform mouse press, move and release actions. https://taiko-preview.gauge.org/#mouseaction

Debashis9012 commented 5 years ago

Click one point to another on canvas layer can be done by following the below steps:

mouseAction('press', {x:0,y:0})
mouseAction('move', {x:9,y:9})
mouseAction('release', {x:9,y:9})

@zabil @Apoorva-GA Do we really need to define the x and y coordinates where we will release the mouse control mouseAction('release', {x:9,y:9}) ? I am asking because both move and release api are having the same x-y coordinate values. Is it possible to release the mouse control without mentioning x-y coordinates?

NivedhaSenthil commented 5 years ago

move and release need not have same points always, say for example if you want to draw a square action can be like below

mouseAction('press', {x:0,y:0})
mouseAction('move', {x:0,y:9})
mouseAction('move', {x:9,y:9})
mouseAction('move', {x:9,y:0})
mouseAction('move', {x:0,y:0})
mouseAction('release', {x:0,y:0})

or it can be even release at the press point even without moving to draw a point, like

mouseAction('press', {x:9,y:9})
mouseAction('release', {x:9,y:9})

Debashis9012 commented 5 years ago

move and release need not have same points always, say for example if you want to draw a square action can be like below
mouseAction('press', {x:0,y:0})
mouseAction('move', {x:0,y:9})
mouseAction('move', {x:9,y:9})
mouseAction('move', {x:9,y:0})
mouseAction('move', {x:0,y:0})
mouseAction('release', {x:0,y:0})
or it can be even release at the press point even without moving to draw a point, like
mouseAction('press', {x:9,y:9})
mouseAction('release', {x:9,y:9})

If that is the case then its better to have x-y coordinates when releasing mouse control at destination point.

Debashis9012 commented 5 years ago

This has been verified with the latest master.