feat(testing): Reduced flakyness

scripts/playwright/pages/Dashboard/Grid/Column/index.ts

@@ -100,7 +100,12 @@ export class ColumnPageObject extends BasePage {
       .click();
     await this.rootPage.locator('li[role="menuitem"]:has-text("Edit")').click();
 
-    await this.get().waitFor({ state: "visible" });
+    await this.get().waitFor({state: 'visible'});
+
+    // todo: Hack to wait for the modal to be fully loaded
+    await this.fillTitle({title: "dummy"});
+    await this.fillTitle({title});
+    await this.get().locator('label[title="Column Name"]').click();
   }
 
   async save({ isUpdated }: { isUpdated?: boolean } = {}) {

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

@@ -21,4 +21,9 @@ export class ToolbarFieldsPage extends BasePage {
       .click();
     await this.toolbar.clickFields();
   }
+  
+  async click({ title}: { title: string }) {
+    await this.get().locator(`[pw-data="grid-fields-menu-${title}"]`).locator('input[type="checkbox"]').click();
+    await this.toolbar.grid.waitLoading();
+  }
 }

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

@@ -42,6 +42,7 @@ export class ToolbarFilterPage extends BasePage {
     await this.rootPage.locator(".nc-filter-value-select").last().fill(value);
 
     await this.toolbar.clickFilter();
+    await this.toolbar.grid.waitLoading();
   }
 
   click({ title }: { title: string }) {

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

@@ -40,6 +40,7 @@ export class ToolbarSortPage extends BasePage {
 
     // close sort menu
     await this.toolbar.clickSort();
+    await this.toolbar.grid.waitLoading();
   }
 
   async resetSort() {

scripts/playwright/pages/Dashboard/Grid/Toolbar/index.ts

@@ -3,12 +3,14 @@ import { GridPage } from "..";
 import { ToolbarFieldsPage } from "./Fields";
 import { ToolbarSortPage } from "./Sort";
 import { ToolbarFilterPage } from "./Filter";
+import { ToolbarShareViewPage } from "./ShareView";
 
 export class ToolbarPage extends BasePage {
   readonly grid: GridPage;
   readonly fields: ToolbarFieldsPage;
   readonly sort: ToolbarSortPage;
   readonly filter: ToolbarFilterPage;
+  readonly shareView: ToolbarShareViewPage;
 
   constructor(grid: GridPage) {
     super(grid.rootPage);
@@ -16,6 +18,7 @@ export class ToolbarPage extends BasePage {
     this.fields = new ToolbarFieldsPage(this);
     this.sort = new ToolbarSortPage(this);
     this.filter = new ToolbarFilterPage(this);
+    this.shareView = new ToolbarShareViewPage(this);
   }
 
   get() {
@@ -23,19 +26,39 @@ export class ToolbarPage extends BasePage {
   }
 
   async clickFields() {
+    const menuOpen = await this.fields.get().isVisible();
+
     await this.get().locator(`button:has-text("Fields")`).click();
+
+    // Wait for the menu to close
+    if(menuOpen) await this.fields.get().waitFor({ state: "hidden" });
   }
 
   async clickSort() {
+    const menuOpen = await this.sort.get().isVisible();
+
     await this.get().locator(`button:has-text("Sort")`).click();
+
+    // Wait for the menu to close
+    if(menuOpen) await this.sort.get().waitFor({ state: "hidden" });
   }
 
   async clickFilter() {
+    const menuOpen = await this.filter.get().isVisible();
+
     await this.get().locator(`button:has-text("Filter")`).click();
+
+    // Wait for the menu to close
+    if(menuOpen) await this.filter.get().waitFor({ state: "hidden" });
   }
 
   async clickShareView() {
+    const menuOpen = await this.shareView.get().isVisible();
+
     await this.get().locator(`button:has-text("Share View")`).click();
+
+    // Wait for the menu to close
+    if(menuOpen) await this.shareView.get().waitFor({ state: "hidden" });
   }
 
   async clickAddNewRow() {

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

@@ -55,7 +55,7 @@ export class GridPage extends BasePage {
     });
 
     await cell.locator("input").fill(title ?? `Row ${index}`);
-    await cell.locator("input").press("Enter");
+    await this.cell.grid.get().locator('[data-title="Title"]').locator('span[title="Title"]').click();
   }
 
   async verifyRow({ index }: { index: number }) {
@@ -124,7 +124,7 @@ export class GridPage extends BasePage {
     await this.rootPage.locator("text=Delete Selected Rows").click();
   }
 
-  async pagination({ page }: { page: string }) {
+  private async pagination({ page }: { page: string }) {
     await this.get().locator(`.nc-pagination`).waitFor();
 
     if (page === "<")
@@ -137,9 +137,20 @@ export class GridPage extends BasePage {
     );
   }
 
+  async clickPagination({ page }: { page: string }) {
+    (await this.pagination({ page })).click();
+    await this.waitLoading();
+  }
+
   async verifyActivePage({ page }: { page: string }) {
     expect(await this.pagination({ page })).toHaveClass(
       /ant-pagination-item-active/
     );
   }
+
+  async waitLoading() {
+    await this.dashboard.get()
+      .locator('[pw-data="grid-load-spinner"]')
+      .waitFor({ state: "hidden" });
+  }
 }

scripts/playwright/pages/Dashboard/Settings/Metadata.ts

@@ -16,7 +16,10 @@ export class MetaDataPage extends BasePage {
 
   async clickReload(){
     await this.get().locator(`button:has-text("Reload")`).click();
-    await this.get().locator(`.animate-spin`).waitFor({state: 'visible'});
+
+    // todo: Remove this wait
+    await this.rootPage.waitForTimeout(100);
+    // await this.get().locator(`.animate-spin`).waitFor({state: 'visible'});
     await this.get().locator(`.animate-spin`).waitFor({state: 'detached'});
   }
 

scripts/playwright/playwright.config.ts

@@ -13,7 +13,7 @@ import { devices } from '@playwright/test';
 const config: PlaywrightTestConfig = {
   testDir: './tests',
   /* Maximum time one test can run for. */
-  timeout: process.env.CI ? 80 * 1000 : 40 * 1000,
+  timeout: process.env.CI ? 80 * 1000 : 50 * 1000,
   expect: {
     /**
      * Maximum time expect() should wait for the condition to be met.
@@ -34,7 +34,7 @@ const config: PlaywrightTestConfig = {
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
-    actionTimeout: process.env.CI ? 0: 10000,
+    actionTimeout: 10000,
     /* Base URL to use in actions like `await page.goto('/')`. */
     baseURL: 'http://localhost:3000',
 

scripts/playwright/tests/metaSync.spec.ts

@@ -30,6 +30,8 @@ test.describe('Meta sync', () => {
   })
 
   test('Meta sync', async () => {
+    test.setTimeout(process.env.CI ? 100000 : 70000);
+
     await dashboard.gotoSettings();
     await settings.selectTab({title: 'Project Metadata'});
 
@@ -141,13 +143,9 @@ test.describe('Meta sync', () => {
     await dashboard.grid.toolbar.fields.click({title: 'Col1'});
     await dashboard.grid.toolbar.clickFields();
 
-    await dashboard.grid.toolbar.clickSort();
-    await dashboard.grid.toolbar.sort.addNew({columnTitle: 'Col1', isAscending: false});
-    await dashboard.grid.toolbar.clickSort();
+    await dashboard.grid.toolbar.sort.addSort({columnTitle: 'Col1', isAscending: false});
 
-    await dashboard.grid.toolbar.clickFilter();
     await dashboard.grid.toolbar.filter.addNew({columnTitle: 'Col1', opType: '>=', value: '5'});
-    await dashboard.grid.toolbar.clickFilter();
 
     await dashboard.grid.verifyRowCount({count: 5});
   })

scripts/playwright/tests/pagination.spec.ts

@@ -5,7 +5,7 @@ import setup from "../setup";
 test.describe("Grid pagination", () => {
   let dashboard: DashboardPage;
   let context: any;
-
+  
   test.beforeEach(async ({ page }) => {
     context = await setup({ page });
     dashboard = new DashboardPage(page, context.project);
@@ -17,10 +17,10 @@ test.describe("Grid pagination", () => {
 
     await dashboard.treeView.openTable({ title: "Country" });
     // click ">" to go to next page
-    (await dashboard.grid.pagination({ page: ">" })).click();
+    (await dashboard.grid.clickPagination({ page: ">" }));
     await dashboard.grid.verifyActivePage({ page: "2" });
     // click "<" to go to prev page
-    (await dashboard.grid.pagination({ page: "<" })).click();
+    (await dashboard.grid.clickPagination({ page: "<" }));
     await dashboard.grid.verifyActivePage({ page: "1" });
   });
 });