Merge pull request #8380 from nocodb/nc-fix/pw-flaky-0205

tests: PW flaky tests fix

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

@@ -183,7 +183,7 @@ export class BulkUpdatePage extends BasePage {
         uiAction: saveRowAction,
         requestUrlPathToMatch: 'api/v1/db/data/noco/',
         httpMethodsToMatch: ['GET'],
-        responseJsonMatcher: json => json['pageInfo'],
+        // responseJsonMatcher: json => json['pageInfo'],
       });
     }
 

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

@@ -127,8 +127,11 @@ export class ExpandedFormPage extends BasePage {
 
     await this.verifyToast({ message: `updated successfully.` });
     await this.rootPage.locator('[data-testid="grid-load-spinner"]').waitFor({ state: 'hidden' });
+
     // removing focus from toast
+    await this.rootPage.waitForTimeout(1000);
     await this.rootPage.locator('.nc-modal').click();
+    await this.rootPage.waitForTimeout(1000);
     await this.get().locator('.nc-expanded-form-header').locator('.nc-expand-form-close-btn').click();
     await this.get().waitFor({ state: 'hidden' });
   }

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

@@ -321,14 +321,26 @@ export class ColumnPageObject extends BasePage {
         // Date Format
         await this.get().locator('.nc-date-select').click();
         await this.rootPage.locator('.ant-select-item').locator(`text="${dateFormat}"`).click();
+
+        // allow UI to update
+        await this.rootPage.waitForTimeout(500);
+
         // Time Format
         await this.get().locator('.nc-time-select').click();
         await this.rootPage.locator('.ant-select-item').locator(`text="${timeFormat}"`).click();
+
+        // allow UI to update
+        await this.rootPage.waitForTimeout(500);
+
         break;
       case 'Date':
         await this.get().locator('.nc-date-select').click();
-        await this.rootPage.locator('.nc-date-select').pressSequentially(dateFormat);
+        await this.rootPage.locator('.nc-date-select').pressSequentially(dateFormat, { delay: 100 });
         await this.rootPage.locator('.ant-select-item').locator(`text="${dateFormat}"`).click();
+
+        // allow UI to update
+        await this.rootPage.waitForTimeout(500);
+
         break;
       default:
         break;

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

@@ -131,7 +131,7 @@ export class ToolbarFilterPage extends BasePage {
     skipWaitingResponse = true;
 
     const selectedField = await getTextExcludeIconText(
-      this.rootPage.locator('.nc-filter-field-select .ant-select-selection-item')
+      this.rootPage.locator('.nc-filter-field-select .ant-select-selection-item').first()
     );
     if (selectedField !== title) {
       await this.rootPage.locator('.nc-filter-field-select').last().click();
@@ -332,7 +332,7 @@ export class ToolbarFilterPage extends BasePage {
                 .locator(`.nc-dropdown-user-select-cell`)
                 .getByTestId('select-option-User-filter')
                 .getByText(v[i])
-                .click();
+                .click({ force: true });
             }
           }
           break;

tests/playwright/setup/index.ts

@@ -155,6 +155,7 @@ export interface NcContext {
   workspace: WorkspaceType;
   defaultProjectTitle: string;
   defaultTableTitle: string;
+  api: Api<any>;
 }
 
 selectors.setTestIdAttribute('data-testid');
@@ -344,7 +345,7 @@ async function localInit({
 
     // get current user information
     const user = await api.auth.me();
-    return { data: { base, user, workspace, token }, status: 200 };
+    return { data: { base, user, workspace, token, api }, status: 200 };
   } catch (e) {
     console.error(`Error resetting base: ${process.env.TEST_PARALLEL_INDEX}`, e);
     return { data: {}, status: 500 };
@@ -477,6 +478,7 @@ const setup = async ({
     workspace,
     defaultProjectTitle: 'Getting Started',
     defaultTableTitle: 'Features',
+    api: response?.data?.api,
   } as NcContext;
 };
 

tests/playwright/tests/db/columns/columnMultiSelect.spec.ts

@@ -5,10 +5,18 @@ import setup, { unsetup } from '../../../setup';
 import { ToolbarPage } from '../../../pages/Dashboard/common/Toolbar';
 import { Api } from 'nocodb-sdk';
 let api: Api<any>;
+const addRecordUsingAPI = async (context: any, tableId: string, rowAttributes: any) => {
+  try {
+    await api.dbTableRow.bulkCreate('noco', context.base.id, tableId, rowAttributes);
+  } catch (e) {
+    console.error(e);
+  }
+};
 
 test.describe('Multi select', () => {
   let dashboard: DashboardPage, grid: GridPage;
   let context: any;
+  let tableId: string;
 
   test.beforeEach(async ({ page }) => {
     context = await setup({ page, isEmptyProject: true });
@@ -22,7 +30,13 @@ test.describe('Multi select', () => {
       columnTitle: 'MultiSelect',
       options: ['Option 1', 'Option 2'],
     });
-    await grid.addNewRow({ index: 0, value: 'Row 0' });
+
+    api = context.api;
+
+    const tables = await api.dbTable.list(context.base.id);
+    tableId = tables.list.find((table: any) => table.title === 'sheet1').id;
+    await addRecordUsingAPI(context, tableId, [{ Id: 1, Title: `Row 0` }]);
+    await page.reload();
   });
 
   test.afterEach(async () => {
@@ -56,7 +70,14 @@ test.describe('Multi select', () => {
       multiSelect: true,
     });
 
-    await grid.addNewRow({ index: 1, value: 'Row 1' });
+    await addRecordUsingAPI(context, tableId, [
+      {
+        Id: 2,
+        Title: `Row 1`,
+      },
+    ]);
+    await grid.rootPage.reload();
+
     await grid.cell.selectOption.select({
       index: 1,
       columnHeader: 'MultiSelect',

tests/playwright/tests/db/columns/columnSingleSelect.spec.ts

@@ -3,15 +3,19 @@ import { DashboardPage } from '../../../pages/Dashboard';
 import { GridPage } from '../../../pages/Dashboard/Grid';
 import setup, { unsetup } from '../../../setup';
 import { ToolbarPage } from '../../../pages/Dashboard/common/Toolbar';
+import { Api } from 'nocodb-sdk';
 
 test.describe('Single select', () => {
   let dashboard: DashboardPage, grid: GridPage;
   let context: any;
+  let api: Api<any>;
+  let tableId: string;
 
   test.beforeEach(async ({ page }) => {
     context = await setup({ page, isEmptyProject: true });
     dashboard = new DashboardPage(page, context.base);
     grid = dashboard.grid;
+    api = context.api;
 
     await dashboard.treeView.createTable({ title: 'sheet1', baseTitle: context.base.title });
 
@@ -20,7 +24,11 @@ test.describe('Single select', () => {
       columnTitle: 'SingleSelect',
       options: ['Option 1', 'Option 2'],
     });
-    await grid.addNewRow({ index: 0, value: 'Row 0' });
+
+    const tables = await api.dbTable.list(context.base.id);
+    tableId = tables.list.find((table: any) => table.title === 'sheet1').id;
+    await api.dbTableRow.bulkCreate('noco', context.base.id, tableId, [{ Id: 1, Title: `Row 0` }]);
+    await page.reload();
   });
 
   test.afterEach(async () => {
@@ -120,12 +128,15 @@ test.describe('Single select - filter & sort', () => {
 
   let dashboard: DashboardPage, grid: GridPage, toolbar: ToolbarPage;
   let context: any;
+  let api: Api<any>;
+  let tableId: string;
 
   test.beforeEach(async ({ page }) => {
     context = await setup({ page });
     dashboard = new DashboardPage(page, context.base);
     toolbar = dashboard.grid.toolbar;
     grid = dashboard.grid;
+    api = context.api;
 
     await dashboard.treeView.createTable({ title: 'sheet1', baseTitle: context.base.title });
 
@@ -134,10 +145,16 @@ test.describe('Single select - filter & sort', () => {
       columnTitle: 'SingleSelect',
       options: ['foo', 'bar', 'baz'],
     });
-    await grid.addNewRow({ index: 0, value: '1' });
+
-    await grid.addNewRow({ index: 1, value: '2' });
+    const tables = await api.dbTable.list(context.base.id);
-    await grid.addNewRow({ index: 2, value: '3' });
+    tableId = tables.list.find((table: any) => table.title === 'sheet1').id;
-    await grid.addNewRow({ index: 3, value: '4' });
+    await api.dbTableRow.bulkCreate('noco', context.base.id, tableId, [
+      { Id: 1, Title: '1' },
+      { Id: 2, Title: '2' },
+      { Id: 3, Title: '3' },
+      { Id: 4, Title: '4' },
+    ]);
+    await page.reload();
 
     await grid.cell.selectOption.select({ index: 1, columnHeader: 'SingleSelect', option: 'foo', multiSelect: false });
     await grid.cell.selectOption.select({ index: 2, columnHeader: 'SingleSelect', option: 'bar', multiSelect: false });

tests/playwright/tests/db/columns/columnUserSelect.spec.ts

@@ -25,22 +25,15 @@ const roleDb = [
 async function beforeEachInit({ page }: { page: any }) {
   let workspacePage: WorkspacePage;
   let collaborationPage: CollaborationPage;
-  let api: Api<any>;
 
   const context: any = await setup({ page, isEmptyProject: true });
   const dashboard: DashboardPage = new DashboardPage(page, context.base);
+  const api = context.api;
 
   if (isEE()) {
     workspacePage = new WorkspacePage(page);
     collaborationPage = workspacePage.collaboration;
 
-    api = new Api({
-      baseURL: `http://localhost:8080/`,
-      headers: {
-        'xc-auth': context.token,
-      },
-    });
-
     for (let i = 0; i < roleDb.length; i++) {
       try {
         await api.auth.signup({
@@ -59,25 +52,36 @@ async function beforeEachInit({ page }: { page: any }) {
     }
   }
 
-  return { dashboard, context };
+  return { dashboard, context, api };
 }
 
 test.describe('User single select', () => {
   let dashboard: DashboardPage, grid: GridPage, topbar: TopbarPage;
   let context: any;
+  let api: Api<any>;
+  let tableId: string;
 
   test.beforeEach(async ({ page }) => {
     const initRsp = await beforeEachInit({ page: page });
     context = initRsp.context;
     dashboard = initRsp.dashboard;
+    api = initRsp.api;
     grid = dashboard.grid;
     topbar = dashboard.grid.topbar;
 
-    await dashboard.treeView.createTable({ title: 'Sheet1', baseTitle: context.base.title });
+    await dashboard.treeView.createTable({ title: 'sheet1', baseTitle: context.base.title });
 
     await grid.column.create({ title: 'User', type: 'User' });
 
-    await grid.addNewRow({ index: 0, value: 'Row 0' });
+    const tables = await api.dbTable.list(context.base.id);
+    tableId = tables.list.find((table: any) => table.title === 'sheet1').id;
+    await api.dbTableRow.bulkCreate('noco', context.base.id, tableId, [
+      {
+        Id: 1,
+        Title: `Row 0`,
+      },
+    ]);
+    await page.reload();
   });
 
   test.afterEach(async () => {
@@ -102,7 +106,14 @@ test.describe('User single select', () => {
     });
 
     // Add new row and verify default value is added in new cell
-    await grid.addNewRow({ index: 1, value: 'Row 1' });
+    await api.dbTableRow.bulkCreate('noco', context.base.id, tableId, [
+      {
+        Id: 2,
+        Title: `Row 1`,
+      },
+    ]);
+    await grid.rootPage.reload();
+
     await grid.cell.userOption.verify({
       index: 1,
       columnHeader: 'User',
@@ -130,9 +141,17 @@ test.describe('User single select', () => {
   });
 
   test('Field operations - duplicate column, convert to SingleLineText', async () => {
+    await api.dbTableRow.bulkCreate('noco', context.base.id, tableId, [
+      { Id: 2, Title: `Row 1` },
+      { Id: 3, Title: `Row 2` },
+      { Id: 4, Title: `Row 3` },
+      { Id: 5, Title: `Row 4` },
+      { Id: 6, Title: `Row 5` },
+    ]);
+    await grid.rootPage.reload();
+
     for (let i = 0; i <= 4; i++) {
       await grid.cell.userOption.select({ index: i, columnHeader: 'User', option: users[i], multiSelect: false });
-      await grid.addNewRow({ index: i + 1, value: `Row ${i + 1}` });
     }
 
     await grid.column.duplicateColumn({
@@ -164,10 +183,19 @@ test.describe('User single select', () => {
       multiSelect: false,
     });
 
+    // add 5 rows
+    await api.dbTableRow.bulkCreate('noco', context.base.id, tableId, [
+      { Id: 2, Title: `Row 1` },
+      { Id: 3, Title: `Row 2` },
+      { Id: 4, Title: `Row 3` },
+      { Id: 5, Title: `Row 4` },
+      { Id: 6, Title: `Row 5` },
+    ]);
+    await grid.rootPage.reload();
+
     // Edit, refresh and verify
     for (let i = 0; i <= 4; i++) {
       await grid.cell.userOption.select({ index: i, columnHeader: 'User', option: users[i], multiSelect: false });
-      await grid.addNewRow({ index: i + 1, value: `Row ${i + 1}` });
     }
 
     // refresh page
@@ -275,11 +303,14 @@ test.describe('User single select - filter, sort & GroupBy', () => {
 
   let dashboard: DashboardPage, grid: GridPage, toolbar: ToolbarPage;
   let context: any;
+  let api: Api<any>;
+  let tableId: string;
 
   test.beforeEach(async ({ page }) => {
     const initRsp = await beforeEachInit({ page: page });
     context = initRsp.context;
     dashboard = initRsp.dashboard;
+    api = initRsp.api;
     grid = dashboard.grid;
     toolbar = dashboard.grid.toolbar;
 
@@ -287,8 +318,18 @@ test.describe('User single select - filter, sort & GroupBy', () => {
 
     await grid.column.create({ title: 'User', type: 'User' });
 
+    const tables = await api.dbTable.list(context.base.id);
+    tableId = tables.list.find((table: any) => table.title === 'sheet1').id;
+    await api.dbTableRow.bulkCreate('noco', context.base.id, tableId, [
+      { Id: 1, Title: `0` },
+      { Id: 2, Title: `1` },
+      { Id: 3, Title: `2` },
+      { Id: 4, Title: `3` },
+      { Id: 5, Title: `4` },
+    ]);
+    await page.reload();
+
     for (let i = 0; i <= 4; i++) {
-      await grid.addNewRow({ index: i, value: `${i}` });
       await grid.cell.userOption.select({ index: i, columnHeader: 'User', option: users[i], multiSelect: false });
     }
   });
@@ -398,11 +439,14 @@ test.describe('User single select - filter, sort & GroupBy', () => {
 test.describe('User multiple select', () => {
   let dashboard: DashboardPage, grid: GridPage, topbar: TopbarPage;
   let context: any;
+  let api: Api<any>;
+  let tableId: string;
 
   test.beforeEach(async ({ page }) => {
     const initRsp = await beforeEachInit({ page: page });
     context = initRsp.context;
     dashboard = initRsp.dashboard;
+    api = initRsp.api;
     grid = dashboard.grid;
     topbar = dashboard.grid.topbar;
 
@@ -410,6 +454,9 @@ test.describe('User multiple select', () => {
 
     await grid.column.create({ title: 'User', type: 'User' });
     await grid.column.userOption.allowMultipleUser({ columnTitle: 'User', allowMultiple: true });
+
+    const tables = await api.dbTable.list(context.base.id);
+    tableId = tables.list.find((table: any) => table.title === 'Sheet1').id;
   });
 
   test.afterEach(async () => {
@@ -417,7 +464,8 @@ test.describe('User multiple select', () => {
   });
 
   test('Verify the default option count, select default value and verify', async () => {
-    await grid.addNewRow({ index: 0, value: 'Row 0' });
+    await api.dbTableRow.bulkCreate('noco', context.base.id, tableId, [{ Id: 1, Title: `Row 0` }]);
+    await grid.rootPage.reload();
 
     if (!isEE()) {
       await grid.column.userOption.verifyDefaultValueOptionCount({ columnTitle: 'User', totalCount: 5 });
@@ -436,7 +484,9 @@ test.describe('User multiple select', () => {
     });
 
     // Add new row and verify default value is added in new cell
-    await grid.addNewRow({ index: 1, value: 'Row 1' });
+    await api.dbTableRow.bulkCreate('noco', context.base.id, tableId, [{ Id: 2, Title: `Row 1` }]);
+    await grid.rootPage.reload();
+
     await grid.cell.userOption.verify({
       index: 1,
       columnHeader: 'User',
@@ -452,10 +502,17 @@ test.describe('User multiple select', () => {
   });
 
   test('Field operations - duplicate column, convert to SingleLineText', async () => {
+    await api.dbTableRow.bulkCreate('noco', context.base.id, tableId, [
+      { Id: 1, Title: `Row 0` },
+      { Id: 2, Title: `Row 1` },
+      { Id: 3, Title: `Row 2` },
+      { Id: 4, Title: `Row 3` },
+      { Id: 5, Title: `Row 4` },
+    ]);
+    await grid.rootPage.reload();
+
     let counter = 1;
     for (let i = 0; i <= 4; i++) {
-      await grid.addNewRow({ index: i, value: `Row ${i}` });
-
       await grid.cell.userOption.select({ index: i, columnHeader: 'User', option: users[i], multiSelect: true });
       await grid.cell.userOption.select({ index: i, columnHeader: 'User', option: users[counter], multiSelect: true });
 
@@ -497,11 +554,18 @@ test.describe('User multiple select', () => {
   });
 
   test('Cell Operation - edit, copy-paste and delete', async () => {
+    await api.dbTableRow.bulkCreate('noco', context.base.id, tableId, [
+      { Id: 1, Title: `Row 0` },
+      { Id: 2, Title: `Row 1` },
+      { Id: 3, Title: `Row 2` },
+      { Id: 4, Title: `Row 3` },
+      { Id: 5, Title: `Row 4` },
+    ]);
+    await grid.rootPage.reload();
+
     // Edit, refresh and verify
     let counter = 1;
     for (let i = 0; i <= 4; i++) {
-      await grid.addNewRow({ index: i, value: `Row ${i}` });
-
       await grid.cell.userOption.select({
         index: i,
         columnHeader: 'User',
@@ -617,11 +681,14 @@ test.describe('User multiple select - filter, sort & GroupBy', () => {
 
   let dashboard: DashboardPage, grid: GridPage, toolbar: ToolbarPage;
   let context: any;
+  let api: Api<any>;
+  let tableId: string;
 
   test.beforeEach(async ({ page }) => {
     const initRsp = await beforeEachInit({ page: page });
     context = initRsp.context;
     dashboard = initRsp.dashboard;
+    api = initRsp.api;
     grid = dashboard.grid;
     toolbar = dashboard.grid.toolbar;
 
@@ -630,9 +697,20 @@ test.describe('User multiple select - filter, sort & GroupBy', () => {
     await grid.column.create({ title: 'User', type: 'User' });
     await grid.column.userOption.allowMultipleUser({ columnTitle: 'User', allowMultiple: true });
 
+    const tables = await api.dbTable.list(context.base.id);
+    tableId = tables.list.find((table: any) => table.title === 'sheet1').id;
+
+    await api.dbTableRow.bulkCreate('noco', context.base.id, tableId, [
+      { Id: 1, Title: `0` },
+      { Id: 2, Title: `1` },
+      { Id: 3, Title: `2` },
+      { Id: 4, Title: `3` },
+      { Id: 5, Title: `4` },
+    ]);
+    await grid.rootPage.reload();
+
     let counter = 2;
     for (let i = 0; i <= 4; i++) {
-      await grid.addNewRow({ index: i, value: `${i}` });
       await grid.cell.userOption.select({ index: i, columnHeader: 'User', option: users[i], multiSelect: true });
       if (i !== 0) {
         await grid.cell.userOption.select({