使用 Selenium 在画布上绘图

Question

我将 selenium 与 java 一起使用（两者都是最新的）。尝试在我们的网络应用程序中的模式内的小画布区域上绘图。我们用于画布的库是“signature pad js”。我已经确认它不在 iframe 内或任何可能成为问题的棘手问题（它只是一个带有 div.signature-input canvas 元素的常规 div.modal-body ）。

但它没有做任何事情。我在 stackoverflow 上看过很多帖子，其中大多数看起来都非常相同，只有很少的变化可供尝试（我一直在尝试所有这些）。

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

WebElement 元素 = driver.findElement(Using.locator(SIGNATURE_AREA)); // 画布元素

动作构建器=新动作（驱动程序）；builder.clickAndHold(element).moveByOffset(10, 50)。moveByOffset(50,10)。通过偏移移动（-10，-50）。moveByOffset(-50,-10).release().perform();

我尝试过各种补偿方式，但都没有效果。如果有人有这方面的经验，真的会喜欢一只手。

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)

所以我用Java为你尝试了同样的事情，它工作正常，它按预期绘制了两条线。诀窍是 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();

    }

}

请参阅该绘图的屏幕截图：

让我知道这是否有效！