fix: premature resolution of wait conditions when using scopedBy

When using a function style selector wait conditions fail early if the
scoped selector does not yield any results. Instead we should continue
to wait/check until the wait condition times out.

Additionally in order to retain custom friendly error messages that
include the selector that an exception occurred on we fallback to the
original wait behavior which includes the custom errors.

packages/page-objects/src/base-element.js

@@ -41,6 +41,16 @@ class BaseElement extends BasePageObject {
 
   async waitForInsert() {
     await handleError.call(this, async () => {
+      if (typeof this._selector === 'function') {
+        try {
+          return await this._browser.waitUntil(async () => await this.isExisting());
+        } catch (e) {
+          // if the waitUntil condition fails fall through to the original non-scoped
+          // call so we continue to throw custom human readable faltest errors about the
+          // element selector that is missing
+        }
+      }
+
       await this._browser.waitForInsert(this._selector);
     }, async elementError => {
       // If it's an expected error, that means a parent doesn't exist,
@@ -56,6 +66,16 @@ class BaseElement extends BasePageObject {
 
   async waitForDestroy() {
     await handleError.call(this, async () => {
+      if (typeof this._selector === 'function') {
+        try {
+          return await this._browser.waitUntil(async () => !(await this.isExisting()));
+        } catch (e) {
+          // if the waitUntil condition fails fall through to the original non-scoped
+          // call so we continue to throw custom human readable faltest errors about the
+          // element selector that was not destroyed
+        }
+      }
+
       await this._browser.waitForDestroy(this._selector);
     }, () => {
       // If it's an expected error, that means a parent doesn't exist,

packages/page-objects/src/element.js

@@ -12,10 +12,12 @@ class Element extends BaseElement {
   }
 
   async waitForEnabled() {
+    await this.waitForInsert();
     await this._browser.waitForEnabled(this._selector, ...arguments);
   }
 
   async waitForDisabled() {
+    await this.waitForInsert();
     await this._browser.waitForDisabled(this._selector, ...arguments);
   }
 
@@ -24,10 +26,12 @@ class Element extends BaseElement {
   }
 
   async waitForVisible() {
+    await this.waitForInsert();
     await this._browser.waitForVisible(this._selector, ...arguments);
   }
 
   async waitForHidden() {
+    await this.waitForInsert();
     await this._browser.waitForHidden(this._selector, ...arguments);
   }