Question

我在等待动画直到完成时面临一个问题。到目前为止，使用

之类的硒功能就足够了

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;

我需要等到加载器完成后，才能继续进行其他硒动作，例如单击，...。我想避免使用静态延迟等。有人可以帮助我如何定制特定功能以进行一次检查吗？动画完成了吗？感谢您的提示...

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

动画本身在静态时间内工作。 1.5s和0.5s是以秒为单位的时间。

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

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

Answer 3

您可以查看位置

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

等待动画，直到在Selenium中完成

3 个答案: