fix: groupBy hidden & select field playwright test case fail issue

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

@@ -51,6 +51,8 @@ export class UserOptionColumnPageObject extends BasePage {
     const selector = this.column.get().locator('.nc-user-select >> .ant-select-selector');
     await selector.click();
 
+    await this.rootPage.locator('.nc-dropdown-user-select-cell').waitFor({ state: 'visible' });
+
     if (multiSelect) {
       const optionsToSelect = Array.isArray(option) ? option : [option];
 
@@ -60,11 +62,12 @@ export class UserOptionColumnPageObject extends BasePage {
 
       // Press `Escape` to close the dropdown
       await this.rootPage.keyboard.press('Escape');
-      await this.rootPage.locator('.nc-dropdown-user-select-cell').waitFor({ state: 'hidden' });
     } else if (!Array.isArray(option)) {
       await this.selectOption({ option });
     }
 
+    await this.rootPage.locator('.nc-dropdown-user-select-cell').waitFor({ state: 'hidden' });
+
     await this.column.save({ isUpdated: true });
   }
 
@@ -91,6 +94,8 @@ export class UserOptionColumnPageObject extends BasePage {
 
     await this.column.get().locator('.nc-cell-user > .nc-user-select').click();
 
+    await this.rootPage.locator('.nc-dropdown-user-select-cell').waitFor({ state: 'visible' });
+
     expect(await this.rootPage.getByTestId(`select-option-${columnTitle}-undefined`).count()).toEqual(totalCount);
     await this.column.get().locator('.nc-cell-user').click();
 

tests/playwright/pages/Dashboard/Grid/Group.ts

@@ -74,6 +74,7 @@ export class GroupPageObject extends BasePage {
     value: string;
   }) {
     const gridWrapper = this.get({ indexMap });
+    await gridWrapper.scrollIntoViewIfNeeded();
     await gridWrapper
       .locator(`.nc-group-table .nc-grid-row:nth-child(${rowIndex + 1}) [data-title="${columnHeader}"]`)
       .scrollIntoViewIfNeeded();

tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts

@@ -39,24 +39,29 @@ export class SelectOptionCellPageObject extends BasePage {
 
     await selectCell.click();
 
+    if (multiSelect) {
+      await this.rootPage.locator('.nc-dropdown-multi-select-cell').waitFor({ state: 'visible' });
+    } else {
+      await this.rootPage.locator('.nc-dropdown-single-select-cell').waitFor({ state: 'visible' });
+    }
+
     if (index === -1) {
       const selectOption = this.rootPage.getByTestId(`select-option-${columnHeader}-undefined`).getByText(option);
-      await selectOption.waitFor({ state: 'visible' });
+      await selectOption.scrollIntoViewIfNeeded();
       await selectOption.click();
     } else {
       const selectOption = this.rootPage.getByTestId(`select-option-${columnHeader}-${index}`).getByText(option);
-      await selectOption.waitFor({ state: 'visible' });
+      await selectOption.scrollIntoViewIfNeeded();
       await selectOption.click();
     }
 
     if (multiSelect) {
       // Press `Escape` to close the dropdown
       await this.rootPage.keyboard.press('Escape');
+      await this.rootPage.locator('.nc-dropdown-multi-select-cell').waitFor({ state: 'hidden' });
+    } else {
+      await this.rootPage.locator('.nc-dropdown-single-select-cell').waitFor({ state: 'hidden' });
     }
-    await this.rootPage
-      .getByTestId(`select-option-${columnHeader}-${index}`)
-      .getByText(option)
-      .waitFor({ state: 'hidden' });
   }
 
   async clear({ index, columnHeader, multiSelect }: { index: number; columnHeader: string; multiSelect?: boolean }) {

tests/playwright/pages/Dashboard/common/Cell/UserOptionCell.ts

@@ -37,13 +37,15 @@ export class UserOptionCellPageObject extends BasePage {
 
     await selectCell.click();
 
+    await this.rootPage.locator('.nc-dropdown-user-select-cell').waitFor({ state: 'visible' });
+
     if (index === -1) {
       const selectOption = this.rootPage.getByTestId(`select-option-${columnHeader}-undefined`).getByText(option);
-      await selectOption.waitFor({ state: 'visible' });
+      await selectOption.scrollIntoViewIfNeeded();
       await selectOption.click();
     } else {
       const selectOption = this.rootPage.getByTestId(`select-option-${columnHeader}-${index}`).getByText(option);
-      await selectOption.waitFor({ state: 'visible' });
+      await selectOption.scrollIntoViewIfNeeded();
       await selectOption.click();
     }
 
@@ -52,10 +54,7 @@ export class UserOptionCellPageObject extends BasePage {
       await this.rootPage.keyboard.press('Escape');
     }
 
-    await this.rootPage
+    await this.rootPage.locator('.nc-dropdown-user-select-cell').waitFor({ state: 'hidden' });
-      .getByTestId(`select-option-${columnHeader}-${index}`)
-      .getByText(option)
-      .waitFor({ state: 'hidden' });
   }
 
   async clear({ index, columnHeader, multiSelect }: { index: number; columnHeader: string; multiSelect?: boolean }) {