Draw on a Canvas Using Selenium - selenium-webdriver

Question

I'm using selenium with java (latest for both). Trying to draw on a small canvas area inside a modal in our webapp. The library we used for our canvas was 'signature pad js'. I have confirmed it is not inside an iframe or anything tricky that could be the problem (it's just a regular div.modal-body with a div.signature-input canvas element).
But it is not doing anything. Have looked at many posts here on stackoverflow and most of them seem pretty identical with few variations to try (I've been trying them all).
Here's the latest code I tried:
// Draw a signature of some sort
WebElement element = driver.findElement(Using.locator(SIGNATURE_AREA)); // canvas element
Actions builder = new Actions(driver);
builder.clickAndHold(element).moveByOffset(10, 50).
moveByOffset(50,10).
moveByOffset(-10,-50).
moveByOffset(-50,-10).release().perform();
I've tried all sorts of offsets, and such to no avail.
If anyone has experience with this, would really love a hand.

Answer 1

I think your issue is in the code , I've done this with ruby and it worked fine.. Code in Ruby below (worked in FireFox)
driver.find_element(:xpath, "html/body/div[1]/div[5]/div[2]/canvas").click
element = driver.find_element(:xpath, "html/body/div[1]/div[5]/div[2]/canvas");
driver.action.move_to(element).perform
driver.action.click_and_hold(element).perform
driver.action.move_by(150, 50).click.perform
driver.action.move_to(element).perform
driver.action.click_and_hold(element).perform
driver.action.move_by(100, 50).click.perform
driver.action.move_to(element).perform
driver.action.click_and_hold(element).perform
driver.action.move_by(300, 10).click.perform
sleep (5)
So I have tried same thing using Java for you , and its working fine , Its drawing two lines as expected. The trick is that moveby should not be followed with a click otherwise it will loose focus. Below code is working fine in java and chrome . I used https://sketchtoy.com/ to draw on canvas
public class BrowserTesting {
WebDriver driver;
#Test
public void test1() throws InterruptedException {
//WebDriverManager.chromedriver().setup();
System.setProperty("webdriver.chrome.driver","C:\\Users\\pathtyourchrome\\chromedriver.exe");
ChromeOptions options = new ChromeOptions();
options.setExperimentalOption("useAutomationExtension", false);
//disable automation info bar
options.addArguments("disable-infobars");
driver = new ChromeDriver(options);
driver.get("https://sketchtoy.com/");
WebElement element = driver.findElement(By.xpath("//div[#class='sketch-canvas-container']/canvas"));//canvas element
Actions builder = new Actions(driver);
builder.moveToElement(element).perform();
builder.clickAndHold(element).perform();
builder.moveByOffset(150, 50).perform();
builder.moveToElement(element).perform();
builder.clickAndHold(element).perform();
builder.moveByOffset(100, 50).perform();
builder.moveToElement(element).perform();
Thread.sleep(5000);
//driver.quit();
}
}
See this screen shot for the drawing:
Let me know if this worked!