セレンウェブドライバを使用してキャンバスに描画することはできません

Question

私はCANVASに何かを描くために以下を書いていますが、動作しません。

Actions builder = new Actions(browser); 
Action drawAction = builder.moveToElement(webElement,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(); 

デバッグモードでは動作しますが、通常は動作しません。ときどき動作し、時には動作しないことがあります。

だから、DOMでのcanvas要素であり、以下のコード、時々ドローキャンバスコードワークと時々ないを実行している場合は、HTMLコード

<fieldset class="signature kyc-signature odd field_with_errors has- 
    drawn" data-field="Registration::Field::Signature" data-field- 
    name="registration[signatureImageData]" data-name=" 
    [["legalPerson","firstName"],["legalPerson","lastName"]]"> 
    <label class="fieldset-label" for="signatureImageData-1a9012cc"> 
    </label> 
<div class="signature-well"> 
<input id="registration_signatureImageData" 
    name="registration[signatureImageData]" value="<?xml version="1.0" 
    encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD 
    SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg 
    xmlns="http://www.w3.org/2000/svg" version="1.1" width="62" 
     height="52"><path fill="none" stroke="#000000" stroke-width="2" 
stroke-linecap="round" stroke-linejoin="round" d="M 61 1 l 1 1"/><path 
fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" 
    stroke-linejoin="round" d="M 1 51 l 1 1"/></svg>" type="hidden"> 
    <a class="clear" href=""></a> 
    <div class="signature-container" data-sign-here=""> 
    <div style="padding:0 !important;margin:0 !important;width: 100% 
    !important; height: 0 !important;margin-top:-1em !important;margin- 
    bottom:1em !important;"></div> 
    <canvas class="jSignature" style="margin: 0px; padding: 0px; border: 
medium none; height: 180px; width: 769px;" width="769" height="180"> 
    </canvas> 
    <div style="padding:0 !important;margin:0 !important;width: 100% 
!important; height: 0 !important;margin-top:-1.5em !important;margin- 
bottom:1.5em !important;"></div> 
</div> 
<div class="name-underlined"> </div> 
</div> 
<div class="signature-description"> </div> 

です。

次のコードを使用して、キャンバス要素が表示されるまで待ちます。

public WebElement waitForElementToBeVisible() { 
     logger.info("[WaitForElement][Visibility][" + waitTime + "s] " + 
     formatLocator()); 

     // important: nullify implicitlyWait() 
     browser.manage().timeouts().implicitlyWait(0, TimeUnit.SECONDS); 

     // wait for element 
     Wait<WebDriver> wait = new WebDriverWait(browser, waitTime); 
     wait.until(new ExpectedCondition<WebElement>() { 
      public WebElement apply(WebDriver browser) { 
       try { 
        findElement(false); 
       } catch (Exception e) { 
        logger.error("Exception while waiting on: " + locator + 
      " " + e.getClass().getName() + ":" + e.getMessage()); 
       } 
       if (webElement != null && !webElement.isDisplayed()) { 
        webElement = null; 
       } 
       return webElement; 
      } 

      public String toString() { 
       return String.format("element %s(%s) to be visible", 
      locator, locator.getLocator()); 
      } 
      }); 

Answer 1

public void drawCanvas() { 
     Actions builder = new Actions(browser); 
     JavascriptExecutor executor = (JavascriptExecutor) browser; 
     executor.executeScript("arguments[0].scrollIntoView();", webElement); //Scroll the page and move where the element is located 
     Action drawAction = builder.moveToElement(webElement, 135, 15) //start points x axis and y axis. 
       .click() 
       .moveByOffset(200, 80) // 2nd points (x1,y1) 
       .click() 
       .moveByOffset(100, 100)// 3rd points (x2,y2) 
       .doubleClick() 
       .build(); 
     drawAction.perform(); 
    }