How to automate heavy Javascript application?

TL;DR

Ember and Angular are examples of powerful web frameworks written in Javascript. Today, many modern websites are moving from traditional server side templates page generation and adapt those frameworks. How that affects browser automatization?

In asynchronous world, before any interaction with page element, it is good practice to wait for that element to become visible.

Here are watir webdriver waiting methods, and page object waiting methods. And in “heavy javascript application”, when I wait for element to become visible, I got exception

Watir::Exception::UnknownObjectException

The main issue here is that when you do some action, let’s say button click, javascript framework manipulates DOM tree. Your element was present in DOM tree before the action, but after the action was removed and you got UnknownObjectException.

Watir webdriver also has present wait methods, but that does not cover UnknownObjectException.

So, in order to tackle this problem, you need to write your UnknownObjectException handler, something like this:

Watir::Wait.until(load_timeout){
  begin     
    loading_layout_element.visible?
  rescue Watir::Exception::UnknownObjectException
    false
  end
}