feat(testing): Improvements with page objects

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>

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}) {

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}) {

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' });
   }
 }

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});