使用Selenium在画布上绘制

Question

我正在使用selenium和java（两者都是最新的）。尝试在我们的webapp中绘制模态内的小画布区域。我们用于画布的库是'签名板js'。我已经确认它不在iframe内或任何棘手的问题（它只是一个带有div.signature-input画布元素的常规div.modal-body）。

但它没有做任何事情。看过stackoverflow上的很多帖子，其中大部分都看起来很相同，尝试的变化很少（我一直都在尝试）。

这是我尝试的最新代码：//绘制某种签名

WebElement element = driver.findElement（Using.locator（SIGNATURE_AREA））; // canvas元素

Actions builder = new Actions（驱动程序）; builder.clickAndHold（element）.moveByOffset（10,50）。 moveByOffset（50,10）。 moveByOffset（-10，-50）。 。moveByOffset（-50，-10）.release（）执行（）;

我尝试了各种各样的补偿，但无济于事。如果有人有这方面的经验，真的很喜欢一只手。

Answer 1

我认为你的问题出现在代码中，我用ruby完成了它并且工作正常..下面的Ruby代码（在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)

所以我为你尝试了同样的东西，它的工作正常，它按预期绘制了两行。诀窍是不应该点击moveby，否则它将失去焦点。下面的代码在java和chrome中运行良好。我用https://sketchtoy.com/在画布上画画

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();

    }

}

请参见此屏幕截图：

如果这有效，请告诉我！