Interaction with elements inside Canvas

Product Forums Katalon Studio
,
1

I would like to see an example of code that can perform a simple click action on an element in Canvas. For example: I have a canvas area of 600x800 on a web page, and it is displaying a popup. Can someone please post actual code that will give an example of clicking on the popup.
So far, the only “element” i am able to reference is the canvas board itself, but nothing inside the canvas board.

I have code like this:
WebUI.clickAtOffset(findTestObject(‘MyCanvasBoard/canvas_canvas’), 872, 256)

The coordinates of my popup (inside the canvas) are correct, but i cannot really “click” on it, because i can’t reference the popup itself.
How can i do this? Is it even possible?
A code example would really help, and then i can experiment with it myself. Thanks in advance.

2

I meet the same problem.Can you resolve the problem?I hope you can tell me.Thank you very much.

3

Did you find a solution?
Thank you.

4

Any update on this?

5

Satish Satyan said:

Any update on this?

You need to switch to the frame first and then try clicking. Below is the example:-

WebUI.switchToFrame(findTestObject(‘Page_Launch/frm_abc’),500)

WebUI.waitForPageLoad(580)

WebUI.waitForElementVisible(findTestObject(‘Page_Launch/canvas_abc’), 50)

WebUI.clickOffset(findTestObject('Page_Launch/canvas_abc),649,-166)

1 Like
6

@sheetal sulay May I ask how do you define “Page_Launch/frm_abc”? If there is no “iframe” tag outside of “canvas” tag?

7

Hello,

I am new on katalon forum, I have started to use this 3 days ago. I have the same issue with canvas…I have the canvas frame over some buttons, I need to click on the canvas in order to access the buttons after that.

I have tried the example from Sheetal, is not working for me, I will copy paste the code here.

WebUI.openBrowser(’’)

WebUI.maximizeWindow()

WebUI.navigateToUrl(‘https://example.com/’)

WebUI.waitForPageLoad(300)

WebUI.setText(findTestObject(‘PPAndrei/input_username’), ‘AndreiTest’)

WebUI.setText(findTestObject(‘PPAndrei/input_password’), ‘loft2016’)

WebUI.click(findTestObject(‘PPAndrei/Login’))

WebUI.navigateToUrl(‘https://gameURL’)

WebUI.waitForPageLoad(900)

WebUI.switchToFrame(findTestObject(‘Page_Online/frm_stage’),500)

WebUI.waitForPageLoad(580)

WebUI.waitForElementVisible(findTestObject(‘Page_Online/canvas_stage’), 50)

WebUI.clickOffset(findTestObject('Page_Online/canvas_stage),1030,-760)

This are the errors that I receive at the las step:

multiple markers at this line

- implements groovy.lang.Script.run

- expecting ‘’’, found ‘\n’ @ line 46, column 71.

Can someone help me? , thanks.

8

missing ’ after canvas_stage

9

Andrej Podhajský said:

missing ’ after canvas_stage

Thank you. Now the error is gone.

Can you please explain to me what are the following commands doing?

WebUI.switchToFrame(findTestObject(‘Page_Online/frm_stage’),500)

  • is this switching the canvas in what?
    WebUI.waitForElementVisible(findTestObject(‘Page_Online/canvas_stage’), 50)
    - I assume that this command is waiting for the element that was switched, right?

WebUI.clickOffset(findTestObject('Page_Online/canvas_stage),1030,-760)
- this should do the click on what I want to click, right?

Thank you.

10

WebUI.switchToFrame(findTestObject(‘Page_Online/frm_stage’),500)

  • is this switching the canvas in what?

looks like that

WebUI.waitForElementVisible(findTestObject(‘Page_Online/canvas_stage’), 50)
- I assume that this command is waiting for the element that was switched, right?

yes, you are right

WebUI.clickOffset(findTestObject('Page_Online/canvas_stage),1030,-760)
- this should do the click on what I want to click, right?

yes

11

Hi my bros,
Clicking on a canvas now is easy - Thanks. But how can I draw a line on a canvas ? (I currently testing for ‘electric signature’ form). I need to draw a line by mouse on a canvas as a electric-signature.
So anyone please help me to show how to do this.
Thanks so much !

12

Well as long as you dont want a specific signature you can perform dragndrop action:

WebUI.dragAndDropByOffset(findTestObject(‘CuPaDl/Signature/Signaturefield’), 20, -180)

WebUI.dragAndDropByOffset(findTestObject(‘CuPaDl/Signature/Signaturefield’), 80,-20)

I used this, just two (did more afterwards) straight lines drawn on the canvas from their center in different directions. Was enough for me to show if the signature function works or not.

13

lukas krombholz said:

Well as long as you dont want a specific signature you can perform dragndrop action:

WebUI.dragAndDropByOffset(findTestObject(‘CuPaDl/Signature/Signaturefield’), 20, -180)

WebUI.dragAndDropByOffset(findTestObject(‘CuPaDl/Signature/Signaturefield’), 80,-20)

I used this, just two (did more afterwards) straight lines drawn on the canvas from their center in different directions. Was enough for me to show if the signature function works or not.

Thanks Lukas for your sharing! But when I use your code - as below, I have only double dot (.) on the canvas at the same place :(. It seems it just clicks at the center of the element and no drag action.

WebUI.dragAndDropByOffset(findTestObject(‘Signature/canvas_signature_po’), 500, -90)

WebUI.dragAndDropByOffset(findTestObject(‘Signature/canvas_signature_po’), 300, -100)

14

clicking on canvas is easy now but i want to test image processing in my website so for i want to draw a object on canvas can you please guild me how i can draw a EOI(ELEMENT OF INTREST) on canvas

15

Hello. Have you found an answer to this? I can’t seem to interact with the Canvas and I don’t know how to identify the iframe.