fix(playwright): revise waitForResponsePromise & add timeout

tests/playwright/pages/Base.ts

@@ -23,53 +23,32 @@ export default abstract class BasePage {
     requestUrlPathToMatch,
     // A function that takes the response body and returns true if the response is the one we are looking for
     responseJsonMatcher,
-    debug = false,
-    debugKey,
   }: {
     uiAction: () => Promise<any>;
     requestUrlPathToMatch: string;
     httpMethodsToMatch?: string[];
     responseJsonMatcher?: ResponseSelector;
-    debug?: boolean;
-    debugKey?: string;
   }) {
-    const waitForResponsePromise = this.rootPage.waitForResponse(async res => {
+    const [res] = await Promise.all([
+      this.rootPage.waitForResponse(
+        res =>
+          res.url().includes(requestUrlPathToMatch) &&
+          res.status() === 200 &&
+          httpMethodsToMatch.includes(res.request().method())
+      ),
+      uiAction(),
+    ]);
+
+    // handle JSON matcher if provided
     let isResJsonMatched = true;
     if (responseJsonMatcher) {
       try {
-          isResJsonMatched = responseJsonMatcher(await res.json());
-        } catch (e) {
-          return false;
-        }
+        isResJsonMatched = responseJsonMatcher(res.json());
+      } catch {
+        isResJsonMatched = false;
       }
-
-      if (debug) {
-        console.log(`${debugKey},waitForResponse`, {
-          resUrl: res.request().url(),
-          resMethod: res.request().method(),
-        });
-        console.log(`${debugKey},result`, {
-          resUrlResult: res.request().url().includes(requestUrlPathToMatch),
-          resMethodResult: httpMethodsToMatch.includes(res.request().method()),
-          resJsonResult: isResJsonMatched,
-        });
     }
-
-      const found =
-        res.request().url().includes(requestUrlPathToMatch) &&
-        httpMethodsToMatch.includes(res.request().method()) &&
-        isResJsonMatched;
-
-      return found;
-    });
-
-    const uiActionWithDelay = () => {
-      // Create a promise that resolves after a delay
-      const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
-      // Returning a promise that resolves with the result after the a delay
-      return delay(100).then(() => uiAction());
-    };
-    await Promise.all([waitForResponsePromise, uiActionWithDelay()]);
+    return isResJsonMatched;
   }
 
   async attachFile({ filePickUIAction, filePath }: { filePickUIAction: Promise<any>; filePath: string[] }) {

tests/playwright/pages/Dashboard/Grid/index.ts

@@ -69,6 +69,7 @@ export class GridPage extends BasePage {
       index,
       columnHeader,
     });
+    await this.rootPage.waitForTimeout(500);
 
     await cell.locator('input').fill(value);
   }

tests/playwright/pages/Dashboard/WebhookForm/index.ts

@@ -148,8 +148,10 @@ export class WebhookFormPage extends BasePage {
   async configureHeader({ key, value }: { key: string; value: string }) {
     // hardcode "Content-type: application/json"
     await this.get().locator(`.ant-tabs-tab-btn:has-text("Headers")`).click();
+    await this.rootPage.waitForTimeout(500);
 
     await this.get().locator('.nc-input-hook-header-key').click();
+    await this.rootPage.waitForTimeout(500);
 
     // kludge, as the dropdown is not visible even after scroll into view
     await this.rootPage.locator('.ant-select-dropdown:visible').hover();

tests/playwright/pages/Dashboard/common/Topbar/index.ts

@@ -68,6 +68,7 @@ export class TopbarPage extends BasePage {
 
   async openDetailedTab() {
     await this.btn_details.click();
+    await this.rootPage.waitForTimeout(500);
   }
 
   async openDataTab() {