等待动画直到在 Selenium 中完成

Question

我面临着等待动画完成的问题。 到目前为止，使用 selenium 函数就足够了

等待.直到（预期条件....

但现在不可能了。 我有 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;

我需要等到加载程序完成，然后我可以继续执行进一步的硒操作，例如单击，...。我想避免使用静态延迟等。任何人都可以帮助我如何定制特定功能以在动画完成后进行检查? 谢谢提示...

Answer 1

检出此样本（使用打字稿和量角器）

使其适应您的需求

export async function waitForAnimation() {

    let loadingIcon = element(by.css('div.spinner'));
    try {
        // setting minimal timeout to search for the element
        await browser.manage().timeouts().implicitlyWait(500);

        // trigger check if there is such element on the page.
        await loadingIcon.getWebElement();

        await browser.wait(ExpectedConditions.invisibilityOf(loadingIcon), 10000, 'Loading icon is still present...');
    } catch (e) {
        // loading icon is not present so ignore the exception
    } finally {
        // Setting browser implicit timeout back to the original configuration.
        await browser.manage().timeouts().implicitlyWait(5000);
    }
}

Answer 2

您可以检查位置

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 ...')

Answer 3

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

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

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