Michael Nyika
Katalon Apprentice
11/14/2017

Interaction with elements inside Canvas

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.

Upvote
Quote

Comments

  • tony
    Katalon Apprentice
    12/01/2017

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

    Upvote
    Quote
  • lukas krombholz
    Katalon Apprentice
    12/20/2017
    Did you find a solution?
    Thank you.
    Upvote
    Quote
  • Satish Satyan
    Katalon Apprentice
    04/04/2018
    Any update on this?
    Upvote
    Quote
  • sheetal sulay
    Katalon Apprentice
    05/14/2018
    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)
    Upvote
    Quote
  • Jim Zhang
    Katalon Apprentice
    06/01/2018
    @"sheetal sulay" May I ask how do you define "Page_Launch/frm_abc"? If there is no "iframe" tag outside of "canvas" tag?
    Upvote
    Quote
  • Andrei Veres
    Katalon Apprentice
    07/20/2018
    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.
    Upvote
    Quote
  • Andrej Podhajský
    Katalon Evangelist
    07/20/2018
    missing ' after canvas_stage
    Upvote
    Quote
  • Andrei Veres
    Katalon Apprentice
    07/20/2018
    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.
    Upvote
    Quote
  • Andrej Podhajský
    Katalon Evangelist
    07/20/2018
    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
    Upvote
    Quote
  • Nguyen Huong
    Katalon Apprentice
    09/14/2018
    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 !
    Upvote
    Quote
  • lukas krombholz
    Katalon Apprentice
    09/17/2018
    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.
    Upvote
    Quote
  • Nguyen Huong
    Katalon Apprentice
    09/19/2018
    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)
    Upvote
    Quote
Sign In or Register to comment.