feat(testing): Fixed open table

packages/nc-gui/components/smartsheet/Grid.vue

@@ -480,8 +480,8 @@ watch(
         >
           <thead ref="tableHead">
             <tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
-              <th>
-                <div class="w-full h-full bg-gray-100 flex min-w-[70px] pl-5 pr-1 items-center">
+              <th pw-data="grid-id-column">
+                <div class="w-full h-full bg-gray-100 flex min-w-[70px] pl-5 pr-1 items-center" pw-data="nc-check-all">
                   <template v-if="!readOnly">
                     <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
                     <div

packages/nc-gui/components/smartsheet/Pagination.vue

@@ -19,7 +19,7 @@ const page = computed({
 
 <template>
   <div class="flex items-center mb-1">
-    <span v-if="count !== null && count !== Infinity" class="caption ml-5 text-gray-500">
+    <span v-if="count !== null && count !== Infinity" class="caption ml-5 text-gray-500" pw-data="grid-pagination">
       {{ count }} {{ count !== 1 ? $t('objects.records') : $t('objects.record') }}
     </span>
 

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

@@ -52,14 +52,14 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
                 </div>
 
                 <a-tooltip v-if="tab.title?.length > 12" placement="bottom">
-                  <div class="truncate">{{ tab.title }}</div>
+                  <div class="truncate" :data-pw="`nc-root-tabs-${tab.title}`">{{ tab.title }}</div>
 
                   <template #title>
                     <div>{{ tab.title }}</div>
                   </template>
                 </a-tooltip>
 
-                <div v-else>{{ tab.title }}</div>
+                <div v-else :data-pw="`nc-root-tabs-${tab.title}`">{{ tab.title }}</div>
               </div>
             </template>
           </a-tab-pane>

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

@@ -45,9 +45,8 @@ export class GridPage extends BasePage {
   }: { index?: number; title?: string } = {}) {
     const rowCount = await this.get().locator(".nc-grid-row").count();
     await this.get().locator(".nc-grid-add-new-cell").click();
-    if (rowCount + 1 !== (await this.get().locator(".nc-grid-row").count())) {
-      await this.get().locator(".nc-grid-add-new-cell").click();
-    }
+
+    expect.poll(async () => await this.get().locator(".nc-grid-row").count()).toBe(rowCount + 1)
 
     const cell = this.cell.get({ index, columnHeader: "Title" });
     await this.cell.dblclick({

scripts/playwright/pages/Dashboard/TreeView.ts

@@ -24,15 +24,26 @@ 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
-      .get()
-      .locator('[pw-data="grid-load-spinner"]')
-      .waitFor({ state: "hidden" });
-    await this.dashboard.get().locator('.nc-grid-add-new-cell').waitFor();
   }
 
   async createTable({ title }: { title: string }) {

scripts/playwright/tests/virtualColumnRelational.spec.ts

@@ -13,7 +13,6 @@ test.describe("Relational Columns", () => {
 
   test("Relational columns: HM, BT, MM", async () => {
     // close 'Team & Auth' tab
-    await dashboard.closeTab({ title: "Team & Auth" });
 
     ///////////// Has many
     //
@@ -58,7 +57,6 @@ test.describe("Relational Columns", () => {
       "Akishima",
     ]);
     await dashboard.linkRecord.close();
-    await dashboard.closeTab({ title: "Country" });
 
     ///////////// Belongs to
     //
@@ -73,7 +71,6 @@ test.describe("Relational Columns", () => {
         value: countryList[i],
       });
     }
-    await dashboard.closeTab({ title: "City" });
 
     ///////////// Many to many
     //
@@ -130,6 +127,5 @@ test.describe("Relational Columns", () => {
       "ALAMO VIDEOTAPE",
     ]);
     await dashboard.linkRecord.close();
-    await dashboard.closeTab({ title: "Actor" });
   });
 });