Unable to draw signature on Canvas with Selenium-Java script

Question

I used below code with multiple points but still its not even drawing a dot on canvas. It is not even recognizing the element. Any other options to automate?

WebElement element = driver.findElement(By.xpath("xpath of canvas"));
Actions builder = new Actions(driver);
Action drawAction = builder.moveToElement(element,135,15) //start points x axis and y axis. 
 .click()
 .moveByOffset(200, 60) // 2nd points (x1,y1)
 .click()
 .moveByOffset(100, 70)// 3rd points (x2,y2)
 .doubleClick()
 .build();
drawAction.perform();

• Kate Paulk: What error are you getting? If the element is not being found, you may need a different XPath. Can you update your answer to add the HTML code and your XPath, so we have enough information to help you?
• User58: It just ignores that field not even writing a dot there. Also, no error is thrown. Xpath is "//canvas['signature']".
• Kate Paulk: Please update your question and include the html that you're working with. Another thing you can try is to log the properties of the element. That will help to tell you if you've got the addressing correct.
• Hemant Varhekar: Please update the error you are getting . this looks like xpath issue check your xpath
• Lee Jensen: Have you seen sqa.stackexchange.com/questions/42846/… ? This feels like a duplicate question.

Answer 1

Use click and hold instead of click, the click will just click the mouse and releases it suddenly.

The below code is an example:

 System.setProperty("webdriver.chrome.driver","c:/chromedriver.exe");
 WebDriver driver = new ChromeDriver();
 driver.manage().window().maximize();
 driver.manage().timeouts().implicitlyWait(5,TimeUnit.SECONDS) ;
 driver.get("http://apps.zetakey.com/signsend/");
 Actions builder = new Actions(driver);
 Action drawAction = builder.moveToElement(driver.findElement(By.cssSelector("[id='newSignature']"))) //start points x axis and y axis. 
 .clickAndHold()
 .moveByOffset(-50, 60) // 2nd points (x1,y1)
 .moveByOffset(-60, -70)// 3rd points (x2,y2)
 .moveByOffset(150, 60) // 2nd points (x1,y1)
 .moveByOffset(-60, -70)// 3rd points (x2,y
 .doubleClick()
 .build();
 drawAction.perform();
 Thread.sleep(6000);

Read more about action class at :

https://www.selenium.dev/selenium/docs/api/java/org/openqa/selenium/interactions/Actions.html

• User58: Click and Hold also did not work. I presume, it is something to do with development team exposing elements.
• PDHide: @User58 your offset is calculated from the top left corner , so try using smaller number like 10,10 instead of 200 to make sure if it's working or not
• PDHide: Top left of canvas element , not the entire Page