Add wait for element animation finished (#43)

* Add support wait for element animation
qahive · Aug 29, 2020 · 34091ff · 34091ff
1 parent d7a5730
commit 34091ff
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 2 deletions.
diff --git a/Examples/element-properties-demo.robot b/Examples/element-properties-demo.robot
@@ -30,9 +30,15 @@ Element should not contain text
 Element text should be
      Element Text Should Be    id=get_ajax    Change Content    ${True}
 
-Element test should not be
+Element text should not be
     Element Text Should Not Be    id=get_ajax    Change    ${True}    
 
+Element wait for animation
+    Click Button    id=popup_modal     
+    Wait Until Element Finished Animating    id:close_modal
+    Click Element    id:close_modal
+    Wait Until Element Is Hidden    id:close_modal    
+
 *** Keywords ***
 Open browser to test page
     ${HEADLESS}     Get variable value    ${HEADLESS}    ${False}

diff --git a/PuppeteerLibrary/keywords/waiting.py b/PuppeteerLibrary/keywords/waiting.py
@@ -201,3 +201,13 @@ def wait_until_element_is_enabled(self, selenium_locator, timeout=None):
         """
         return self.loop.run_until_complete(
             self.async_func.wait_until_element_is_enabled_async(selenium_locator, timeout))
+
+    @keyword
+    def wait_until_element_finished_animating(self, selenium_locator, timeout=None):
+        """
+        Waits until the specific element is finished animating.
+        Check by check element position.
+
+        """
+        return self.loop.run_until_complete(
+            self.async_func.wait_until_element_finished_animating_async(selenium_locator, timeout))
diff --git a/PuppeteerLibrary/keywords/waiting_async.py b/PuppeteerLibrary/keywords/waiting_async.py
@@ -1,7 +1,6 @@
 import asyncio
 import time
 import re
-from robot.utils import timestr_to_secs
 from PuppeteerLibrary.base.librarycomponent import LibraryComponent
 from PuppeteerLibrary.base.robotlibcore import keyword
 
@@ -120,6 +119,26 @@ async def validate_is_enabled():
             self.timestr_to_secs_for_default_timeout(timeout),
             'Element '+selenium_locator+' was not enabled.')
 
+    @keyword
+    async def wait_until_element_finished_animating_async(self, selenium_locator, timeout=None):
+        prev_rect_tmp = { 'value': None }
+        async def check_finished_animating():
+            element = await self.ctx.get_current_page().querySelector_with_selenium_locator(selenium_locator)
+            if prev_rect_tmp['value'] is None:
+                prev_rect_tmp['value'] = await element.boundingBox()
+                return False
+            prev_rect = prev_rect_tmp['value']
+            next_rect = await element.boundingBox()
+            if next_rect['x'] == prev_rect['x'] and next_rect['y'] == prev_rect['y']:
+                return True
+            else:
+                prev_rect_tmp['value'] = next_rect
+                return False
+        return await self._wait_until_worker(
+            check_finished_animating,
+            self.timestr_to_secs_for_default_timeout(timeout),
+            'Element '+selenium_locator+' was not enabled.')
+
     async def _wait_until_worker(self, condition, timeout, error=None):
         max_time = time.time() + timeout
         not_found = None

diff --git a/demoapp/html/index.html b/demoapp/html/index.html
@@ -3,6 +3,7 @@
 <head>
   <title>Login Page</title>
   <link href="demo.css" media="all" rel="stylesheet" type="text/css">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   <script type="text/javascript">
     function alertConfirm() {
       alert('Test alert');
@@ -71,7 +72,35 @@ <h3>Element property</h3>
         <button id="disabled-button" disabled>disable button</button>
         <button id="not-visible-button" style="display:None;">in visible button</button>
       </div>
+
+      <div style="margin-top: 30px;">
+        <button id="popup_modal" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
+          Launch demo modal
+        </button>
+      </div>
+  </div>
+
+  <!-- Modal -->
+  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          ...
+        </div>
+        <div class="modal-footer">
+          <button id="close_modal" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
   </div>
 
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 </body>
 </html>