1

For Angular and Jquery it is possible to check if something on the page is currently animating. For example I can just use the css selector ".ng-animating" to check if any elements have the animating class on them.

We use this a lot for our end 2 end test automation, for example to only assert if elements are displayed on the page after the user has done some action. We will just wait untill no elements have the ".ng-animating class".

We started using Vue for a few new projects and I am trying to also find out if it is possible so query some attribute, or set some event when it start to animate and finishes the animations. Does somebody know how to? Or have a different approach which will also work?

Guy
  • 46,488
  • 10
  • 44
  • 88
Sjoerd van Loon
  • 79
  • 12

2 Answers2

1

According to the docs there are 6 classes for animation

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)

Perhaps you can use a pair of them.

tony19
  • 125,647
  • 18
  • 229
  • 307
Guy
  • 46,488
  • 10
  • 44
  • 88
  • 2
    Yes, this worked! Made a selector like this to check if something had these class names: document.querySelector( "[class$=-enter], [class$=-enter-to], [class$=-enter-active], [class$=-leave],class$=-leave-to], [class$=-leave-active]" ); – Sjoerd van Loon Feb 12 '20 at 13:30
0

When dealing with applications built with Angular and/or jQuery, to query the class attribute ng-animating you can induce WebDriverWait and you can use the following based Locator Strategies:

  • When it starts to animations use ExpectedConditions as visibilityOfElementLocated():

    new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector(".ng-animating")));

  • When it finishes the animations use ExpectedConditions as invisibilityOfElementLocated():

    new WebDriverWait(driver, 20).until(ExpectedConditions.invisibilityOfElementLocated(By.cssSelector(".ng-animating")));
undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
  • 1
    This is how you implement it when you finally have the selector. As stated in my first sentence I was already aware how to do it for jquery or angular. VueJs was being a bore. Thank your for the reaction. – Sjoerd van Loon Feb 12 '20 at 13:32