等待动画直到在 Selenium 中完成答案

【问题标题】：wait for animation until complete in Selenium等待动画直到在 Selenium 中完成
【发布时间】：2019-03-19 16:23:00
【问题描述】：

我遇到了等待动画完成的问题。到目前为止，使用像

这样的 selenium 函数就足够了

wait.until(ExpectedConditions....

但现在不可能了。我有 HTML 中的元素

<div content-c2="" class="nav-loader"></div>

该元素具有以下 CSS 样式：

.nav-header[content-c2] .nav-loader[content-c2] {
width: 100%;
height: 2px;
background: #EE3D42;
float: left;
clear: both;
animation: 1.5s ease-out 0.5s 1 slideInFromLeft;

我需要等到加载程序完成，然后我才能继续执行进一步的 selenium 操作，例如单击，.... 我想避免使用静态延迟等。谁能帮我定制特定的检查功能动画完成了吗？感谢您的提示...

【问题讨论】：

使用相关的 HTML、代码试验和错误堆栈跟踪更新问题。
试过这个来源，但即使动画完成它仍然返回false...seanglover.com/blog/2012/04/…

标签： javascript selenium-webdriver

【解决方案1】：

你可以查看位置

waitAnimationComplete = async(selector, newDriver = driver) => {
    const elem = await newDriver.wait(until.elementLocated(By.css(selector)))
    const loc1 = await elem.getRect()

    await newDriver.wait(new Condition('wait animation complete', () => {
        return new Promise((resolve, reject) => {
            elem.getRect()
                .then(loc2 => resolve(loc1.x === loc2.x && loc1.y === loc2.y))
        })
    }))
};

打电话

await waitAnimationComplete('your css selector of button ...')

【讨论】：

【解决方案2】：

动画本身适用于静态时间。 1.5s 和 0.5s 是以秒为单位的时间。

请检查这个 CSS 部分 - animation: 1.5s ease-out 0.5s 1 slideInFromLeft;

您需要等待此 CSS 代码中提供的任何时间。

【讨论】：

嗯，是不是说是静态延迟无法检查？
可以查。您可以获取此 css 属性并根据该属性放置动态等待。
但是 css 属性在外部 css 文件中。 DOM 结构和所有元素在动画期间和完成后保持不变。所以不知道如何获取它......
每当页面加载时，所有相关的 html 和 css 也会加载到服务器上存在的任何文件中。我们可以使用 selenium 或 JavaScript 获取这些属性，在线查看。