Waiting for CSS animations #2085
Description
Are you requesting a feature or reporting a bug?
Bug
What is the current behavior?
We have a webpage which has a modal that slides into view from the right side. It's using CSS transitions for the same. We're seeing that testCafe doesn't wait for the transitioning element. Rather it starts reacting with the element as soon as it's added to the DOM.
This is causing random failures. Here's an example:
We have a modal with two textboxes. One for the name and one for the description. The modal also has an autofocus behavior which ensures that the name textbox has the focus after the modal is opened (animating).
Since testCafe doesn't wait for the modal to finish animating,
- the name is partially filled out before the modal is even completely open.
- It then starts filling out the description.
- At the same time, the autofocus kicks in and focuses on the name textbox.
- This results in the description string being split between the description textbox and the name textbox.
What is the expected behavior?
TestCafe should wait for the CSS transitions to finish before reacting with the element.
How would you reproduce the current behavior (if this is a bug)?
I can't reproduce this on my local machine running windowed or headless Chrome. It's happening only in headless chrome on our CI - VSTS in concurrent mode.
Specify your
operating system: Mac OS X 10.12.6
testcafe version: testcafe@0.18.7-20180117
node.js version: node/v6.12.2 darwin x64