feat(testing): Stability

scripts/playwright/pages/Dashboard/ExpandedForm/index.ts

@@ -26,6 +26,15 @@ export class ExpandedFormPage extends BasePage {
     return this.dashboard.get().locator(`.nc-drawer-expanded-form`);
   }
 
+  async gotoUsingUrlAndRowId({ rowId }: { rowId: string }) {
+    const url = await this.dashboard.rootPage.url();
+    const expandedFormUrl = "/" + url.split("/").slice(3).join("/").split("?")[0] + `?rowId=${rowId}`
+    await this.rootPage.goto(
+      expandedFormUrl
+    );
+    await this.dashboard.waitForLoaderToDisappear();
+  }
+
   async fillField({
     columnTitle,
     value,

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

@@ -118,7 +118,13 @@ export class WebhookFormPage extends BasePage {
   }
 
   async save() {
-    await this.saveButton.click();
+    const saveAction = this.saveButton.click();
+    await this.waitForResponse({
+      uiAction: saveAction,
+      requestUrlPathToMatch: "/hooks",
+      httpMethodsToMatch: ["POST", "PATCH"],
+    })
+    await this.verifyToast({ message: 'Webhook details updated successfully'});
   }
 
   async test() {

scripts/playwright/pages/Dashboard/common/Toolbar/Fields.ts

@@ -17,14 +17,17 @@ export class ToolbarFieldsPage extends BasePage {
   // todo: Click and toggle are similar method. Remove one of them
   async toggle({ title, isLocallySaved }: { title: string; isLocallySaved?: boolean }) {
     await this.toolbar.clickFields();
-    await this.waitForResponse({
-      uiAction: this.get()
+    const toggleColumn = this.get()
         .locator(`[pw-data="nc-fields-menu-${title}"]`)
         .locator('input[type="checkbox"]')
-        .click(),
+        .click();
+
+    await this.waitForResponse({
+      uiAction: toggleColumn,
       requestUrlPathToMatch: isLocallySaved ? '/api/v1/db/public/' : '/api/v1/db/data/noco/',
       httpMethodsToMatch: ['GET'],
     });
+    await this.toolbar.parent.dashboard.waitForLoaderToDisappear();
     await this.toolbar.clickFields();
   }
 

scripts/playwright/pages/Dashboard/common/Toolbar/Filter.ts

@@ -52,33 +52,33 @@ export class ToolbarFilterPage extends BasePage {
 
     await this.get().locator(`button:has-text("Add Filter")`).first().click();
 
-    const selectedColumnTitle = await this.rootPage.locator('.nc-filter-field-select').textContent();
     await this.rootPage.locator(".nc-filter-field-select").last().click();
-    if(selectedColumnTitle !== columnTitle) {
-      const selectColumn = this.rootPage
-      .locator("div.ant-select-dropdown.nc-dropdown-toolbar-field-list")
-      .locator(`div[label="${columnTitle}"][aria-selected="false"]:visible`)
-      .click();
-      await this.waitForResponse({
-        uiAction: selectColumn,
-        httpMethodsToMatch: isLocallySaved ? [ "GET" ] : ["POST", "PATCH" ],
-        requestUrlPathToMatch: isLocallySaved ? `/api/v1/db/public/` : `/filters`,
-      });
-    }
+    const selectColumn = this.rootPage
+    .locator("div.ant-select-dropdown.nc-dropdown-toolbar-field-list")
+    .locator(`div[label="${columnTitle}"][aria-selected="false"]:visible`)
+    .click();
+    await this.waitForResponse({
+      uiAction: selectColumn,
+      httpMethodsToMatch: isLocallySaved ? [ "GET" ] : ["POST", "PATCH" ],
+      requestUrlPathToMatch: isLocallySaved ? `/api/v1/db/public/` : `/filters`,
+    });
+    await this.toolbar.parent.dashboard.waitForLoaderToDisappear();
+
 
     const selectedOpType = await this.rootPage.locator('.nc-filter-operation-select').textContent();
     if(selectedOpType !== opType) {
       await this.rootPage.locator(".nc-filter-operation-select").last().click();
       const selectOpType = this.rootPage
-      .locator(".nc-dropdown-filter-comp-op")
-      .locator(`.ant-select-item:has-text("${opType}")`)
-      .click();
+        .locator(".nc-dropdown-filter-comp-op")
+        .locator(`.ant-select-item:has-text("${opType}")`)
+        .click();
       
       await this.waitForResponse({
         uiAction: selectOpType,
         httpMethodsToMatch: isLocallySaved ? [ "GET" ] :  ["POST", "PATCH"],
         requestUrlPathToMatch: isLocallySaved ? `/api/v1/db/public/` : `/filters`,
       });
+      await this.toolbar.parent.dashboard.waitForLoaderToDisappear();
     }
 
     const fillFilter = this.rootPage
@@ -90,6 +90,7 @@ export class ToolbarFilterPage extends BasePage {
       httpMethodsToMatch: ["GET"],
       requestUrlPathToMatch: isLocallySaved ? `/api/v1/db/public/` : `/api/v1/db/data/noco/`,
     });
+    await this.toolbar.parent.dashboard.waitForLoaderToDisappear();
 
     await this.toolbar.clickFilter();
 

scripts/playwright/pages/Dashboard/common/Toolbar/Sort.ts

@@ -41,12 +41,20 @@ export class ToolbarSortPage extends BasePage {
 
     await this.get().locator(`button:has-text("Add Sort Option")`).click();
 
+
     await this.rootPage.locator(".nc-sort-field-select").last().click();
-    await this.rootPage
+    const selectColumn = this.rootPage
       .locator("div.ant-select-dropdown.nc-dropdown-toolbar-field-list")
       .locator(`div[label="${columnTitle}"]`)
       .last()
       .click();
+    await this.waitForResponse({
+      uiAction: selectColumn,
+      httpMethodsToMatch: isLocallySaved ? [ "GET" ] : ["POST", "PATCH" ],
+      requestUrlPathToMatch: isLocallySaved ? `/api/v1/db/public/` : `/sorts`,
+    });
+    await this.toolbar.parent.dashboard.waitForLoaderToDisappear();
+
 
     await this.rootPage.locator(".nc-sort-dir-select").last().click();
     const selectSortDirection =  this.rootPage
@@ -60,7 +68,7 @@ export class ToolbarSortPage extends BasePage {
       httpMethodsToMatch: ["GET"],
       requestUrlPathToMatch:  isLocallySaved ? `/api/v1/db/public/`: `/api/v1/db/data/noco/`,
     });
-
+    await this.toolbar.parent.dashboard.waitForLoaderToDisappear();
     // close sort menu
     await this.toolbar.clickSort();
     await this.toolbar.parent.waitLoading();

scripts/playwright/pages/Dashboard/index.ts

@@ -235,6 +235,7 @@ export class DashboardPage extends BasePage {
     await this.rootPage.locator('[pw-data="nc-project-menu"]').click();
   }
 
+  // Wait for the loader i.e the loader than appears when rows are being fetched, saved etc on the top right of dashboard
   async waitForLoaderToDisappear() {
     await this.rootPage
       .locator('[pw-data="nc-loading"]')

scripts/playwright/pages/LoginPage/index.ts

@@ -36,7 +36,10 @@ export class LoginPage extends BasePage {
   async submit() {
     await this.get().locator(`[pw-data="nc-form-signin__submit"]`).click();
     
-    await expect(this.rootPage).toHaveURL("http://localhost:3000/#/");
+    // todo: Login api can take some time to respond if server is under load
+    await expect(this.rootPage).toHaveURL("http://localhost:3000/#/", {
+      timeout: 15000,
+    });
   }
 
   async signIn({ email, password, withoutPrefix }: { email: string; password: string, withoutPrefix?: boolean }) {

scripts/playwright/tests/01-webhook.spec.ts

@@ -59,7 +59,10 @@ test.describe.serial("Webhook", async () => {
     webhook = dashboard.webhookForm;
   });
 
-  test("CRUD", async ({ request }) => {
+  test("CRUD", async ({ request, page }) => {
+    // todo: Waiting for the server to start
+    await page.waitForTimeout(1000);
+
     // close 'Team & Auth' tab
     await clearServerData({ request });
     await dashboard.closeTab({ title: "Team & Auth" });

scripts/playwright/tests/expandedFormUrl.spec.ts

@@ -48,11 +48,8 @@ test.describe("Expanded form URL", () => {
     // expect(expandedFormUrl).toContain("rowId=1");
 
     // access a new rowID using URL
-    let url = await dashboard.rootPage.url();
     await dashboard.expandedForm.close();
-    await dashboard.rootPage.goto(
-      "/" + url.split("/").slice(3).join("/").split("?")[0] + "?rowId=2"
-    );
+    await dashboard.expandedForm.gotoUsingUrlAndRowId({ rowId: "2" });
     await dashboard.expandedForm.verify({
       header: "Algeria",
       url: "rowId=2",
@@ -60,17 +57,13 @@ test.describe("Expanded form URL", () => {
     await dashboard.expandedForm.close();
 
     // visit invalid rowID
-    await dashboard.rootPage.goto(
-      "/" + url.split("/").slice(3).join("/").split("?")[0] + "?rowId=999"
-    );
+    await dashboard.expandedForm.gotoUsingUrlAndRowId({ rowId: "999" });
     await dashboard.verifyToast({ message: "Record not found" });
     // ensure grid is displayed after invalid URL access
     await viewObj.verifyRowCount({ count: 25 });
 
     // Nested URL
-    await dashboard.rootPage.goto(
-      "/" + url.split("/").slice(3).join("/").split("?")[0] + "?rowId=1"
-    );
+    await dashboard.expandedForm.gotoUsingUrlAndRowId({ rowId: "1" });
     await dashboard.expandedForm.verify({
       header: "Afghanistan",
       url: "rowId=1",