fix(test): fix flaky playwright tests (#23160)

* fix tag spec flakiness

* fix test

* fix xustom property flaky test

* fix tags spec

* fix tag flakiness

* fix test

* fix flakiness

* fix flaky test

* fix test flakiness

* update test

* fix flkay tests

* fix test

* update test

* fix flkay test

---------

Co-authored-by: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>

openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/GlobalSearch.spec.ts

@@ -45,6 +45,10 @@ test('searching for longer description should work', async ({ page }) => {
     }
   );
 
+  await page.waitForSelector('[data-testid="search-results"]', {
+    state: 'visible',
+  });
+
   await expect(
     page
       .getByTestId('search-results')

openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Tags.spec.ts

@@ -369,9 +369,12 @@ test('Classification Page', async ({ page }) => {
           response.url().includes('/api/v1/feed/tasks/') &&
           response.url().includes('/resolve')
       );
-      await page.click(
+
+      const acceptButton = page.locator(
         '.ant-btn-compact-first-item:has-text("Accept Suggestion")'
       );
+      await acceptButton.waitFor({ state: 'visible' });
+      await acceptButton.click();
       await acceptSuggestion;
       await page.click('[data-testid="table"]');
 

openmetadata-ui/src/main/resources/ui/playwright/support/tag/ClassificationClass.ts

@@ -43,8 +43,10 @@ export class ClassificationClass {
   }
 
   async visitPage(page: Page) {
-    const getTags = page.waitForResponse('/api/v1/tags*');
     await sidebarClick(page, SidebarItem.TAGS);
+
+    const getTags = page.waitForResponse('/api/v1/tags*');
+    await page.waitForSelector('[data-testid="side-panel-classification"]');
     await getTags;
     await page
       .locator(`[data-testid="side-panel-classification"]`)

openmetadata-ui/src/main/resources/ui/playwright/support/tag/TagClass.ts

@@ -69,6 +69,7 @@ export class TagClass {
       this.responseData.classification.name,
       this.responseData.classification.displayName
     );
+    await page.getByTestId(this.data.name).waitFor({ state: 'visible' });
     await page.getByTestId(this.data.name).click();
     await page.waitForLoadState('networkidle');
   }

openmetadata-ui/src/main/resources/ui/playwright/support/user/UserClass.ts

@@ -205,7 +205,9 @@ export class UserClass {
     await page.goto('/');
     await page.waitForURL('**/signin');
     await page.waitForLoadState('networkidle');
-    await page.fill('input[id="email"]', userName);
+    const emailInput = page.locator('input[id="email"]');
+    await emailInput.waitFor({ state: 'visible' });
+    await emailInput.fill(userName);
     await page.locator('#email').press('Tab');
     await page.fill('input[id="password"]', password);
     const loginRes = page.waitForResponse('/api/v1/users/login');

openmetadata-ui/src/main/resources/ui/playwright/utils/advancedSearch.ts

@@ -220,7 +220,11 @@ export const selectOption = async (
     state: 'visible',
   });
 
-  await page.click(`.ant-select-dropdown:visible [title="${optionTitle}"]`);
+  const optionLocator = page
+    .locator(`.ant-select-dropdown:visible [title="${optionTitle}"]`)
+    .first();
+  await optionLocator.waitFor({ state: 'visible' });
+  await optionLocator.click();
 };
 
 export const fillRule = async (

openmetadata-ui/src/main/resources/ui/playwright/utils/sidebar.ts

@@ -29,16 +29,20 @@ export const clickOnLogo = async (page: Page) => {
 export const sidebarClick = async (page: Page, id: string) => {
   const items = SIDEBAR_LIST_ITEMS[id as keyof typeof SIDEBAR_LIST_ITEMS];
   if (items) {
-    await page.hover(
+    await page.hover('[data-testid="left-sidebar"]');
-      `[data-testid="left-sidebar"] [data-menu-id*="${items[0]}"]`
+    await page.click(`[data-testid="${items[0]}"]`);
-    );
-    await page.waitForSelector(`[data-testid="app-bar-item-${items[1]}"]`, {
-      state: 'visible',
-    });
 
-    await page.click(`[data-testid="app-bar-item-${items[1]}"]`);
+    const targetElement = page
+      .locator(`[data-testid="app-bar-item-${items[1]}"]`)
+      .first();
+    await targetElement.waitFor({ state: 'visible' });
+    await targetElement.click();
   } else {
-    await page.click(`[data-testid="app-bar-item-${id}"]`);
+    const targetElement = page
+      .locator(`[data-testid="app-bar-item-${id}"]`)
+      .first();
+    await targetElement.waitFor({ state: 'visible' });
+    await targetElement.click();
   }
 
   await page.mouse.move(1280, 0); // Move mouse to top right corner

openmetadata-ui/src/main/resources/ui/playwright/utils/tag.ts

@@ -81,7 +81,7 @@ export const visitClassificationPage = async (
   await fetchTags;
   await page.waitForLoadState('networkidle');
   await page.waitForSelector(
-    '[data-testid="tags-container"] [data-testid="loader"]',
+    '[data-testid="tags-container"] .table-container [data-testid="loader"]',
     { state: 'detached' }
   );
 };