等待動畫按鈕停止

Question

我想單擊名稱爲ready的動畫按鈕。這是源代碼：

http://pastebin.com/up29pSRQ

我測試此代碼：

driver.switchTo().frame("iwg-game-full"); 
     WebElement until = waitPage.until(ExpectedConditions.presenceOfElementLocated(By.id("ready"))); 

     if (until.isDisplayed()) 
     { 
      System.out.println("Play button is displayed"); 

      driver.findElementById("ready").click(); 
     } 

但是當我運行的代碼我立即得到消息Play button is displayed。我如何等待動畫完成？動畫

CSS代碼：

.popIn .animating { 
    animation: 0.5s ease 0s normal both 1 running popIn; 
    filter: blur(0px); 
    left: 0; 
    opacity: 0; 
    position: absolute; 
    top: 0; 
    will-change: transform; 
} 
@keyframes popIn { 
0% { 
    opacity: 0; 
    transform: scale(0.1); 
} 
50% { 
    opacity: 1; 
} 
100% { 
    opacity: 1; 
    transform: scale(1); 
} 
} 

.popIn:nth-child(1) .animating { 
    animation-delay: 0.1s; 
} 
.popIn:nth-child(2) .animating { 
    animation-delay: 0.2s; 
} 
.popIn:nth-child(3) .animating { 
    animation-delay: 0.3s; 
} 

Answer 1

我會用一個自定義的狀態，等待目標元素成爲顯示和穩定。如果兩個呼叫之間的位置保持不變，則該元素可以被認爲是穩定的。

下面是一個例子：

WebElement element = new WebDriverWait(driver, 20) 
    .until(steadinessOfElementLocated(By.id("ready"))); 

public static ExpectedCondition<WebElement> steadinessOfElementLocated(final By locator) { 
    return new ExpectedCondition<WebElement>() { 

     private WebElement _element = null; 
     private Point _location = null; 

     @Override 
     public WebElement apply(WebDriver driver) { 
      if(_element == null) { 
       try { 
        _element = driver.findElement(locator); 
       } catch (NoSuchElementException e) { 
        return null; 
       } 
      } 

      try { 
       if(_element.isDisplayed()){ 
        Point location = _element.getLocation(); 
        if(location.equals(_location) && isOnTop(_element)) { 
         return _element; 
        } 
        _location = location; 
       } 
      } catch (StaleElementReferenceException e) { 
       _element = null; 
      } 

      return null; 
     } 

     @Override 
     public String toString() { 
      return "steadiness of element located by " + locator; 
     } 
    }; 
} 

public static boolean isOnTop(WebElement element) { 
    WebDriver driver = ((RemoteWebElement)element).getWrappedDriver(); 

    return (boolean)((JavascriptExecutor)driver).executeScript(
     "var elm = arguments[0];" + 
     "var doc = elm.ownerDocument || document;" + 
     "var rect = elm.getBoundingClientRect();" + 
     "return elm === doc.elementFromPoint(rect.left + (rect.width/2), rect.top + (rect.height/2));" 
     , element); 
} 

Answer 2

代碼的引擎收錄有is-visible pulsing爲一類的按鈕和動畫（上述）的CSS代碼中有類名popIn .animating

好像一旦動畫完成，按鈕的類名將從popIn .animating更改爲is-visible...。

如果是這種情況，您可以使用顯式等待來獲取屬性更改。嘗試下面的東西，它應該工作。

webdriver.wait().until(ExpectedConditions.presenceOfElementLocated(By.xpath("//button[contains(@class, 'popIn .animating')]"))); 

Answer 3

我猜，那動畫「打出了」使用jQuery，所以你可以這樣做：

((JavaScriptExecutor)driver).ExecuteScript("return jQuery.active == 0"); 

如果將其轉換爲Boolean，你只需要添加一個超時等待它變成true。

你甚至可以做到這一點使用WebDriverWait：

WebDriverWait wait = new WebDriverWait(driver, 30); 
wait.until(new Predicate<WebDriver>() { 
    public boolean apply(WebDriver driver) { 
     return ((JavaScriptExecutor)driver).executeScript("return jQuery.active == 0"); 
     } 
    } 
);