PWA-691: Fix Waits In PWA MFTF MagentoPwaWebDriver

- Adding locators to wait for in PWA webdriver
- Updating Magento webdriver to correctly use loading icon locators
- Updating Magento webdriver to use pageload_timeout

Author: dhaecker

Diff for: src/Magento/FunctionalTestingFramework/Module/MagentoPwaWebDriver.php

@@ -17,19 +17,33 @@
  */
 class MagentoPwaWebDriver extends MagentoWebDriver
 {
+    /**
+     * List of known PWA loading masks by selector
+     *
+     * Overriding the MagentoWebDriver array to contain applicable PWA locators.
+     *
+     * @var array
+     */
+    protected $loadingMasksLocators = [
+        '//div[contains(@class, "indicator-global-3ae")]',
+        '//div[contains(@class, "indicator-message-2he")]'
+    ];
+
     /**
      * Go to the page.
      *
      * Overriding the MagentoWebDriver version because it contains 'waitForPageLoad'.
      * The AJAX check in 'waitForPageLoad' does NOT work with a PWA.
      *
      * @param string $page
+     * @param null $timeout
      * @throws \Exception
      * @return void
      */
-    public function amOnPage($page)
+    public function amOnPage($page, $timeout = null)
     {
         WebDriver::amOnPage($page);
+        $this->waitForLoadingMaskToDisappear($timeout);
     }
 
     /**
@@ -43,11 +57,15 @@ public function amOnPage($page)
      */
     public function waitForPwaElementNotVisible($selector, $timeout = null)
     {
+        $timeout = $timeout ?? $this->_getConfig()['pageload_timeout'];
+
         // Determine what type of Selector is used.
         // Then use the correct JavaScript to locate the Element.
         if (\Codeception\Util\Locator::isXPath($selector)) {
+            $this->waitForLoadingMaskToDisappear($timeout);
             $this->waitForJS("return !document.evaluate(`$selector`, document);", $timeout);
         } else {
+            $this->waitForLoadingMaskToDisappear($timeout);
             $this->waitForJS("return !document.querySelector(`$selector`);", $timeout);
         }
     }
@@ -63,11 +81,15 @@ public function waitForPwaElementNotVisible($selector, $timeout = null)
      */
     public function waitForPwaElementVisible($selector, $timeout = null)
     {
+        $timeout = $timeout ?? $this->_getConfig()['pageload_timeout'];
+        
         // Determine what type of Selector is used.
         // Then use the correct JavaScript to locate the Element.
         if (\Codeception\Util\Locator::isXPath($selector)) {
+            $this->waitForLoadingMaskToDisappear($timeout);
             $this->waitForJS("return !!document && !!document.evaluate(`$selector`, document);", $timeout);
         } else {
+            $this->waitForLoadingMaskToDisappear($timeout);
             $this->waitForJS("return !!document && !!document.querySelector(`$selector`);", $timeout);
         }
     }

Diff for: src/Magento/FunctionalTestingFramework/Module/MagentoWebDriver.php

@@ -63,7 +63,7 @@ class MagentoWebDriver extends WebDriver
      *
      * @var array
      */
-    public static $loadingMasksLocators = [
+    protected $loadingMasksLocators = [
         '//div[contains(@class, "loading-mask")]',
         '//div[contains(@class, "admin_data-grid-loading-mask")]',
         '//div[contains(@class, "admin__data-grid-loading-mask")]',
@@ -439,7 +439,9 @@ public function waitForPageLoad($timeout = null)
      */
     public function waitForLoadingMaskToDisappear($timeout = null)
     {
-        foreach (self::$loadingMasksLocators as $maskLocator) {
+        $timeout = $timeout ?? $this->_getConfig()['pageload_timeout'];
+        
+        foreach ($this->loadingMasksLocators as $maskLocator) {
             // Get count of elements found for looping.
             // Elements are NOT useful for interaction, as they cannot be fed to codeception actions.
             $loadingMaskElements = $this->_findElements($maskLocator);