等待动画按钮停止

Question

我想点击一个带有 name 的动画按钮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);
}