From bdc3aaed6a2c62a68b0ac353b7136c1bdd67ce4d Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 6 Oct 2022 16:37:33 +0530
Subject: [PATCH] feat(testing): Improvements with page objects

---
 packages/nc-gui/components/smartsheet/Grid.vue    | 2 +-
 scripts/playwright/pages/Cell/SelectOptionCell.ts | 2 ++
 scripts/playwright/pages/Cell/index.ts            | 2 +-
 scripts/playwright/pages/Dashboard.ts             | 1 +
 scripts/playwright/tests/multiSelect.spec.ts      | 2 +-
 5 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 80892f7eab..b32549ed3a 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -461,7 +461,7 @@ watch(
 
 <template>
   <div class="relative flex flex-col h-full min-h-0 w-full">
-    <general-overlay :model-value="isLoading" inline transition class="!bg-opacity-15">
+    <general-overlay :model-value="isLoading" inline transition class="!bg-opacity-15" pw-data="grid-load">
       <div class="flex items-center justify-center h-full w-full !bg-white !bg-opacity-85 z-1000">
         <a-spin size="large" />
       </div>
diff --git a/scripts/playwright/pages/Cell/SelectOptionCell.ts b/scripts/playwright/pages/Cell/SelectOptionCell.ts
index 29dfe3ccb6..aac41e16a4 100644
--- a/scripts/playwright/pages/Cell/SelectOptionCell.ts
+++ b/scripts/playwright/pages/Cell/SelectOptionCell.ts
@@ -20,6 +20,8 @@ export class SelectOptionCellPageObject {
     if(multiSelect) await this.cell.get({index, columnHeader}).click();
 
     await this.cell.page.locator(`.nc-dropdown-single-select-cell`).nth(index).waitFor({state: 'hidden'});
+    // todo: Remove this wait. Should be solved by adding pw-data-attribute with cell info to the a-select-option of the cell
+    await this.cell.page.waitForTimeout(200);
   }
 
   async clear({index, columnHeader, multiSelect}: {index: number, columnHeader: string, multiSelect?: boolean}) {
diff --git a/scripts/playwright/pages/Cell/index.ts b/scripts/playwright/pages/Cell/index.ts
index 3acb3a6574..138894d479 100644
--- a/scripts/playwright/pages/Cell/index.ts
+++ b/scripts/playwright/pages/Cell/index.ts
@@ -11,7 +11,7 @@ export class CellPageObject {
   }
 
   get({index, columnHeader}: {index: number, columnHeader: string}): Locator {
-    return this.page.locator(`tr.nc-grid-row:nth-child(${index + 1}) > [data-title="${columnHeader}"]`);
+    return this.page.locator(`td[data-pw="cell-${columnHeader}-${index}"]`);
   }
 
   async click({index, columnHeader}: {index: number, columnHeader: string}) {
diff --git a/scripts/playwright/pages/Dashboard.ts b/scripts/playwright/pages/Dashboard.ts
index 53fd1d332d..f0c7d70f68 100644
--- a/scripts/playwright/pages/Dashboard.ts
+++ b/scripts/playwright/pages/Dashboard.ts
@@ -32,5 +32,6 @@ export class DashboardPage {
     await this.page.locator('button:has-text("Submit")').click();
 
     await expect(this.page).toHaveURL(`http://localhost:3000/#/nc/${this.project.id}/table/${title}`);
+    await this.page.locator('[pw-data="grid-load-spinner"]').waitFor({ state: 'hidden' });
   }
 }
\ No newline at end of file
diff --git a/scripts/playwright/tests/multiSelect.spec.ts b/scripts/playwright/tests/multiSelect.spec.ts
index eddeb78cb2..ee0ef8908e 100644
--- a/scripts/playwright/tests/multiSelect.spec.ts
+++ b/scripts/playwright/tests/multiSelect.spec.ts
@@ -25,7 +25,7 @@ test.describe.serial('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: 0, title: "Row 0"});
+    await grid.addNewRow({index: 1, title: "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});