Wait for animation support fading (#63)

atthaboon · web-flow · commit c5c805866a65 · 2020-11-15T13:25:30.000+07:00
* Init modal fade demo
* Wait for animation also check visible
diff --git a/Examples/utilities/wait.robot b/Examples/utilities/wait.robot
@@ -58,6 +58,23 @@ Wait for element is enabled
     Wait Until Element Is Enabled    id=prop-enable
     Click Element    id=prop-enable
 
+Wait for element finished moving animation
+    Open browser to test page    ${HOME_PAGE_URL}
+    Run Async Keywords    
+    ...    Wait Until Element Is Visible    id=close_modal    AND
+    ...    Click Element    id=popup_modal
+    Wait Until Element Finished Animating    id=close_modal
+    Click Element    id=close_modal
+    Wait Until Element Is Hidden    id=close_modal
+    
+Wait for element finished fading animation
+    Open browser to test page    ${HOME_PAGE_URL}
+    Run Async Keywords    
+    ...    Wait Until Element Is Visible    id=close_modal_fade    AND
+    ...    Click Element    id=popup_modal_fade
+    Wait Until Element Finished Animating    id=close_modal_fade    timeout=1s
+    Click Element    id=close_modal_fade
+    Wait Until Element Is Hidden    id=close_modal_fade
 
 *** Keywords ***
 Open browser to test page
diff --git a/PuppeteerLibrary/puppeteer/async_keywords/puppeteer_waiting.py b/PuppeteerLibrary/puppeteer/async_keywords/puppeteer_waiting.py
@@ -139,6 +139,7 @@ async def validate_is_enabled():
     async def wait_until_element_finished_animating(self, locator, timeout=None):
         prev_rect_tmp = { 'value': None }
         async def check_finished_animating():
+            await self.wait_until_element_is_visible(locator)
             element = await self.library_ctx.get_current_page().querySelector_with_selenium_locator(locator)
             if prev_rect_tmp['value'] is None:
                 prev_rect_tmp['value'] = await element.boundingBox()
diff --git a/demoapp/html/basic-html-elements.html b/demoapp/html/basic-html-elements.html
@@ -5,10 +5,23 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
     <link rel="stylesheet" href="css/basic-html-elements.css" media="all" type="text/css">
     <title>Basic HTML Elements</title>
+
+    <style>
+      .fade2 {
+          opacity: 0;
+          transition: all 0.5s linear;
+      }
+
+      .fade2.show {
+          opacity: 1;
+      }
+    </style>
   </head>
   <body>
 
@@ -226,6 +239,11 @@ <h2>Modal</h2>
           Launch demo modal
         </button>
       </div>
+      <div class="row" style="margin-top: 20px;">
+        <button id="popup_modal_fade" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFade">
+          Launch demo modal fade
+        </button>
+      </div>
       <hr>
       <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
         <div class="modal-dialog" role="document">
@@ -245,6 +263,26 @@ <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
           </div>
         </div>
       </div>
+
+      <div class="modal fade2" id="exampleModalFade" tabindex="-1" role="dialog" aria-labelledby="exampleModalFade" aria-hidden="true">
+        <div class="modal-dialog" id="exampleModalFadeDialog" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title" id="exampleModalFadeTitle">Fade 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_fade" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
     </div>
 
     <div class="container">
