Automate testing of web page element transition with Selenium

In web page automated testing, it is easy to test using state of an HTML element that is present on the screen. It does not matter if it is in visible state or it is in invisible state. One use case that presents lot of challenge is when an element uses transition (ease-in and ease-out) to make it visible. It is even a bigger challenge if the element is present on the page but has been placed outside of the bounds of the page. Consider a case where you have a menu panel on left or right side of the page. It could be placed with a left position of negative value to keep it invisible. When a user clicks on some action element like icon, this element transitions from left side or right side and shows itself to the user.

If you are asked to automate testing of this transition then you have some work to do. The element is present on the page even if it is placed outside of the view port. It's state is not hidden so you can not really test for visibility of this element. Let's see how this can be automated. When you will click on an action element, the transition will change the x or y coordinate of the element to move it into the view port. Sometime both x and y coordinate could be changed depending on type of transition to use. Therefore you will need to implement some automated test mechanism to check if left or position of the element has changed to the desired location so you could say that the transition has worked correctly.

Following code snippet shows Python code that uses Selenium to test that the menu panel from left has become visible when the user has clicked on the icon.

#wait for some time to allow sidebar to reposition
WebDriverWait(self.driver, 2).until(self.WaitForEaseToComplete(sideBarPanel, 0))

class WaitForEaseToComplete(object):
        def __init__(self, element, endPosition):
            self.element = element
            self.endPosition = endPosition
        def __call__(self, driver):
            currentLocation = self.element.location
            x = int(currentLocation["x"])
            return x >= self.endPosition

Let me explain above code. WebDriverWait is going to wait for a maximum of 2s till the sideBarPanel becomes visible. The visibility of this panel is defined by its left position to take a value of 0px. Since there is no built-in expected condition for transition, I had to implement my own expected condition in class named WaitForEaseToComplete. I have passed in reference to web element and expected end position. When transition has changed the left position of panel to 0px, this expected condition function will return true.