feat(testing): Reduced flakyness

packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue

@@ -68,7 +68,7 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
         <span class="flex-1" />
 
         <div class="flex justify-center self-center mr-2 min-w-[115px]">
-          <div v-show="isLoading" class="flex items-center gap-2 ml-3 text-gray-200">
+          <div v-show="isLoading" class="flex items-center gap-2 ml-3 text-gray-200" pw-data="nc-loading">
             {{ $t('general.loading') }}
 
             <MdiLoading class="animate-infinite animate-spin" />

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

@@ -35,7 +35,7 @@ export class ExpandedFormPage extends BasePage {
     await this.get().press("Escape");
     await this.get().waitFor({ state: "hidden" });
     await this.toastWait({ message: `updated successfully.` });
-    await this.get()
+    await this.rootPage
       .locator('[pw-data="grid-load-spinner"]')
       .waitFor({ state: "hidden" });
   }

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

@@ -155,11 +155,6 @@ export class ColumnPageObject extends BasePage {
 
     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();
-
     switch (type) {
       case "Formula":
         await this.get().locator(".nc-formula-input").fill(formula);

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

@@ -32,7 +32,7 @@ export class GridPage extends BasePage {
   }
 
   async rowCount() {
-    await this.get().locator(".nc-grid-row").count();
+    return await this.get().locator(".nc-grid-row").count();
   }
 
   async verifyRowCount({ count }: { count: number }) {
@@ -41,9 +41,9 @@ export class GridPage extends BasePage {
 
   async addNewRow({
     index = 0,
-    title = "Title",
+    columnHeader = "Title",
     value,
-  }: { index?: number; title?: string; value?: string } = {}) {
+  }: { index?: number; columnHeader?: string; value?: string } = {}) {
     const rowCount = await this.get().locator(".nc-grid-row").count();
     await this.get().locator(".nc-grid-add-new-cell").click();
 
@@ -51,22 +51,24 @@ export class GridPage extends BasePage {
       .poll(async () => await this.get().locator(".nc-grid-row").count())
       .toBe(rowCount + 1);
 
-    const cell = this.cell.get({ index, columnHeader: title });
+    const cell = this.cell.get({ index, columnHeader });
     await this.cell.dblclick({
       index,
-      columnHeader: title,
+      columnHeader,
     });
 
-    if (value) {
-      await cell.locator("input").fill(value);
-    } else {
-      await cell.locator("input").fill(title ?? `Row ${index}`);
-    }
+
+    await cell.locator("input").fill(value ?? `Row ${index}`);
+
     await this.cell.grid
       .get()
-      .locator(`[data-title="${title}"]`)
-      .locator(`span[title="${title}"]`)
+      .locator(`[data-title="${columnHeader}"]`)
+      .locator(`span[title="${columnHeader}"]`)
       .click();
+
+      await this.rootPage.waitForResponse(async (res) => {
+        return (await res.json())[columnHeader] === value;
+      });
   }
 
   async verifyRow({ index }: { index: number }) {
@@ -114,6 +116,7 @@ export class GridPage extends BasePage {
   async openExpandedRow({ index }: { index: number }) {
     await this.row(index).locator(`td[pw-data="cell-id-${index}"]`).hover();
     await this.row(index).locator(`div[pw-data="nc-expand-${index}"]`).click();
+    await (await this.rootPage.locator('.ant-drawer-body').elementHandle())?.waitForElementState('stable');
   }
 
   async selectAll() {
@@ -125,7 +128,15 @@ export class GridPage extends BasePage {
     await this.get()
       .locator('[pw-data="nc-check-all"]')
       .locator('input[type="checkbox"]')
-      .click();
+      .check({
+        force: true,
+      });
+
+    const rowCount = await this.rowCount();
+    for(let i = 0; i < rowCount; i++) {
+      await expect.poll(async () => await this.row(i).locator(`[pw-data="cell-id-${i}"]`).locator('span.ant-checkbox-checked').count()).toBe(1);
+    }
+    await this.rootPage.waitForTimeout(300);
   }
 
   async deleteAll() {

scripts/playwright/pages/Dashboard/TreeView.ts

@@ -24,26 +24,7 @@ export class TreeViewPage extends BasePage {
   //
   async openTable({ title }: { title: string }) {
     await this.get().locator(`.nc-project-tree-tbl-${title}`).click();
-    
-    // wait for the column, active tab animation will be started
-    await this.dashboard.get().locator('[pw-data="grid-id-column"]').waitFor();
-    await this.dashboard.tabBar.locator(`.ant-tabs-tab-active:has-text("${title}")`).waitFor();
-
-    // wait active tab animation to finish
-    await expect.poll(async () => {
-      return await this.dashboard.tabBar.locator(`[data-pw="nc-root-tabs-${title}"]`).evaluate((el) => {
-        return window.getComputedStyle(el).getPropertyValue("color")
-      })
-    }).toBe("rgb(67, 81, 232)"); // active tab text color
-
-    await this.dashboard
-    .get()
-    .locator('[pw-data="grid-load-spinner"]')
-    .waitFor({ state: "hidden" });
-
-    await expect(this.rootPage).toHaveURL(
-      `/#/nc/${this.project.id}/table/${title}`
-    );
+    await this.dashboard.waitForTabRender({ title });
   }
 
   async createTable({ title }: { title: string }) {
@@ -54,13 +35,7 @@ export class TreeViewPage extends BasePage {
     await this.dashboard.get().locator('[placeholder="Enter table name"]').fill(title);
     await this.dashboard.get().locator('button:has-text("Submit")').click();
 
-    await expect(this.rootPage).toHaveURL(
-      `/#/nc/${this.project.id}/table/${title}`
-    );
-    await this.dashboard.get()
-      .locator('[pw-data="grid-load-spinner"]')
-      .waitFor({ state: "hidden" });
-    await this.dashboard.get().locator('.nc-grid-add-new-cell').waitFor();
+    await this.dashboard.waitForTabRender({ title });
   }
 
   async verifyTable({ title, index }: { title: string; index?: number }) {

scripts/playwright/pages/Dashboard/index.ts

@@ -64,4 +64,26 @@ export class DashboardPage extends BasePage {
     // await tab.waitFor({ state: "detached" });
     await this.rootPage.waitForTimeout(2000);
   }
+
+  async waitForTabRender({ title }: { title: string }) {
+        // wait for the column, active tab animation will be started
+    await this.get().locator('[pw-data="grid-id-column"]').waitFor();
+    await this.tabBar.locator(`.ant-tabs-tab-active:has-text("${title}")`).waitFor();
+
+    // wait active tab animation to finish
+    await expect.poll(async () => {
+      return await this.tabBar.locator(`[data-pw="nc-root-tabs-${title}"]`).evaluate((el) => {
+        return window.getComputedStyle(el).getPropertyValue("color")
+      })
+    }).toBe("rgb(67, 81, 232)"); // active tab text color
+
+    await this
+    .get()
+    .locator('[pw-data="grid-load-spinner"]')
+    .waitFor({ state: "hidden" });
+
+    await expect(this.rootPage).toHaveURL(
+      `/#/nc/${this.project.id}/table/${title}`
+    );
+  }
 }

scripts/playwright/tests/multiSelect.spec.ts

@@ -16,7 +16,7 @@ test.describe('Multi select', () => {
     await dashboard.treeView.createTable({ title: 'sheet1' });
   
     await grid.column.create({ title: 'MultiSelect', type: 'MultiSelect' });
-    await grid.addNewRow({index: 0, title: "Row 0"});
+    await grid.addNewRow({index: 0, value: "Row 0"});
   })
 
   test('Select and clear options and rename options', async () => {
@@ -26,7 +26,7 @@ test.describe('Multi select', () => {
     await grid.cell.selectOption.select({index: 0, columnHeader: 'MultiSelect', option: 'Option 2', multiSelect: true});
     await grid.cell.selectOption.verify({index: 0, columnHeader: 'MultiSelect', option: 'Option 2', multiSelect: true});
 
-    await grid.addNewRow({index: 1, title: "Row 1"});
+    await grid.addNewRow({index: 1, value: "Row 1"});
     await grid.cell.selectOption.select({index: 1, columnHeader: 'MultiSelect', option: 'Option 1', multiSelect: true});
 
     await grid.cell.selectOption.clear({index: 0, columnHeader: 'MultiSelect', multiSelect: true});

scripts/playwright/tests/singleSelect.spec.ts

@@ -16,7 +16,7 @@ test.describe('Single select', () => {
     await dashboard.treeView.createTable({ title: 'sheet1' });
   
     await grid.column.create({ title: 'SingleSelect', type: 'SingleSelect' });
-    await grid.addNewRow({index: 0, title: "Row 0"});
+    await grid.addNewRow({index: 0, value: "Row 0"});
   })
 
   test('Select and clear options and rename options', async () => {