ensure Selenium waits for animation to finish

I've encountered a problem regarding waiting for an animation to complete. Previously, I could rely on Selenium functions like

wait.until(ExpectedConditions....

However, this is no longer sufficient. The element in question can be found in the HTML code below:

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

This particular element has the following CSS style:

.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;

I need to wait until the loader finishes its animation before proceeding with other Selenium actions such as clicks. I'm trying to avoid using static delays and similar methods. Can anyone provide guidance on how to create a specific function that checks when the animation is completed? Thank you in advance for any assistance...

javascriptselenium-webdriver

Answer №1

To determine the location, you can verify its position.

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

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

Execute the function by calling:

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

Answer №2

The animated sequence functions within a set timeframe. The values 1.5s and 0.5s represent durations in seconds.

Take a look at this specific CSS segment - 

animation: 1.5s ease-out 0.5s 1 slideInFromLeft;

You must allow for the specified time intervals mentioned in this CSS code to elapse.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Turning off devtools in Next.js

Currently, my focus is on developing an application using Next.js and I am in search of a way to prevent the opening of devtools. While exploring npm packages, I came across a promising tool called Disable-devtool - npm link. However, Next.js keeps present ...

javascriptreactjsnext.jsdevtoolsdisable

Can javascript be used to swap out the folder in my URL?

I have been searching for solutions on how to change the language of my website using jQuery, but so far I have not found anything that works for me. Let's take my website as an example: www.domain.com I have separate folders for different languages. ...

javascriptjqueryhtml

Why is the $match function in Mongoose not functioning properly with an array of ObjectIds in Node.js

Greetings! I've been trying to match an array of objectIds in Mongoose using Node.js, and although I achieved the desired result in the Mongo shell, I'm facing difficulties when implementing the same in my code. Here's a snippet from my col ...

javascriptnode.jsmongodb

What could be causing my React Router to display empty pages?

I've been working with the latest version of create-react-app and have been struggling to display the pages within my app. I've tried both functional components and class-based components, but nothing seems to work. I've wrapped the content ...

javascriptreactjsreact-routercreate-react-app

Can a single Axios request in JavaScript include both a Body and Files?

Is it possible to send both a file and body with the POST request below in axios? axios.post("http://localhost:3000/upload", formData) How can I include something in the body:{} section as well? Server response: files: { myFile: { nam ...

javascriptnode.jsreactjspostaxios

Loading your NextJS page with a full-page loader

I am looking to create a full-page loader for my NextJS app, similar to this example: https://jsfiddle.net/yaz9x42g/8/. The idea is that once the content is loaded, it should be revealed in a visually appealing way. I want to build a reusable component tha ...

javascriptreactjsnext.js

Ensure that the folder name contains specific characters

When working with AngularJS, I am developing a feature to create folders. One requirement is that if a folder name contains special characters like /, :, ?, "<", or |, an error message should be displayed stating "A folder name cannot contain any of the ...

javascriptangularjs

Encountering a NoClassDefFoundError when executing a properly compiled JAR file with dependencies, even though both commons-httpclient and httpcomponents dependencies are specified in

Looking to automate a basic user action using selenium webdriver from the main method (not within the test scope). The code works fine when run from the compiler but encounters an issue when running the jar file in various scenarios. The error message I&ap ...

javamavenselenium-webdriverapache-httpclient-4.x

Can someone please provide me with a Javascript code snippet that accomplishes the same function

<script> document.addEventListener('DOMContentLoaded', function () { const menuItems = document.querySelectorAll('.headmenu li'); menuItems.forEach(function (menuItem) { menuItem.addEventL ...

javascriptcss

Excessive amount of decimal places in a number can lead to its conversion into scientific notation

I received a price from a 3rd party API in scientific notation, but when I checked the actual price on their website, it was shown as 1.20 instead of 1.2052626e. Despite wanting to multiply this price and format it as a currency string, it always returns ...

javascriptnode.js

Is there any HTML code that is able to implement a currency format identical to the one we've customized in Google Sheets/Google Apps Script

I am currently working with a Google Sheet table that consists of 2 columns. The second column contains charges which can vary based on user input through a Google Form and are summed up using GAS. To view an example, click here. The data from this Googl ...

javascripthtmlcssgoogle-apps-scriptnumber-formatting

Showing nested arrays in API data using Angular

I would like to display the data from this API { "results": [ { "name": "Luke Skywalker", "height": "172", "mass": "77", & ...

javascripthtmlangular

Guide to invoking a jQuery function by clicking on each link tab

Below is a snippet of jQuery code that I am working with: <script> var init = function() { // Resize the canvases) for (i = 1; i <= 9; i++) { var s = "snowfall" + i var canvas = document.getElementById( ...

javascriptjqueryhtml

Reset an Angular service's public variable

I recently started working with Angular and encountered an issue that I couldn't find a solution for on Google or Stack Overflow. I believe my problem lies in not knowing what to search for. Here is the code snippet causing trouble: JSFiddle HTML &l ...

javascriptangularjs

Uncovering Inline Styles Infused with Javascript for Effective Debugging of Javascript Code

SITUATION: I have recently inherited a website from the previous developer who has scattered important functions across numerous lengthy JS files. I am struggling to track down the source of an inline CSS style within the JS or identify which function is d ...

javascripthtmlcssdebugginggoogle-chrome-devtools

Aurelia's numerous applications spread across various pages

Currently, I am in the process of finalizing the initial release of a large-scale website built using PHP (Phalcon), MySQL, and JQuery. The technology stack may be a bit outdated, but it was originally prototyped years ago and due to various circumstances, ...

javascriptaurelia

What is the best method for displaying a table using a JSON array?

I have a JSON array that I want to display in a table using React boxes: [ { id: 1, color: "red", size: "small" }, { id: 2, color: "blue", size: "medium" }, { id: 3, color: "green", size: "large" }, { id: 4, color: "yellow" ...

javascriptjsonreactjs

Listening for keypress events on a div element using React

I'm currently struggling with implementing a keypress listener on a component. My goal is to have my listener activated whenever the "ESC" key is pressed, but I can't seem to figure it out. The function component I am working with is quite stra ...

javascriptreactjstypescript

The setTimeout functionality is executing faster than expected

In my selenium test, I've noticed that the setTimeout function consistently finishes about 25% faster than it should. For example, when waiting for 20 seconds, the function completes after only 15 seconds. test.describe('basic login test',f ...

javascriptnode.jsseleniumwebstorm

Creating keystrokes through a batch file: A step-by-step guide

I need to automate a series of tasks using batch files: Initiate the Selenium server (webdriver-manager start) Execute Protractor tests (protractor conf.js) Stop the Selenium server This setup requires 2 separate command prompts, one for running the Sel ...

batch-fileseleniumselenium-webdriverprotractor