fix: Fix flaky E2E tests

Author: pulpdrew

packages/app/src/components/DBSearchPageFilters.tsx

@@ -100,6 +100,7 @@ export function cleanedFacetName(key: string): string {
 }
 
 type FilterCheckboxProps = {
+  columnName: string;
   label: string;
   value?: 'included' | 'excluded' | false;
   pinned: boolean;
@@ -160,6 +161,7 @@ const FilterPercentage = ({ percentage, isLoading }: FilterPercentageProps) => {
 };
 
 const FilterCheckbox = ({
+  columnName,
   value,
   label,
   pinned,
@@ -171,10 +173,11 @@ const FilterCheckbox = ({
   percentage,
   isPercentageLoading,
 }: FilterCheckboxProps) => {
+  const testIdPrefix = `filter-checkbox-${columnName}-${label}`;
   return (
     <div
       className={cx(classes.filterCheckbox, className)}
-      data-testid={`filter-checkbox-${label}`}
+      data-testid={testIdPrefix}
     >
       <Group
         gap={8}
@@ -189,7 +192,7 @@ const FilterCheckbox = ({
             // taken care by the onClick in the group
           }}
           indeterminate={value === 'excluded'}
-          data-testid={`filter-checkbox-input-${label}`}
+          data-testid={`${testIdPrefix}-input`}
         />
         <Tooltip
           openDelay={label.length > 22 ? 0 : 1500}
@@ -234,14 +237,14 @@ const FilterCheckbox = ({
           <TextButton
             onClick={onClickOnly}
             label="Only"
-            data-testid={`filter-only-${label}`}
+            data-testid={`${testIdPrefix}-only`}
           />
         )}
         {onClickExclude && (
           <TextButton
             onClick={onClickExclude}
             label="Exclude"
-            data-testid={`filter-exclude-${label}`}
+            data-testid={`${testIdPrefix}-exclude`}
           />
         )}
         <ActionIcon
@@ -252,14 +255,14 @@ const FilterCheckbox = ({
           aria-label={pinned ? 'Unpin field' : 'Pin field'}
           role="checkbox"
           aria-checked={pinned}
-          data-testid={`filter-pin-${label}`}
+          data-testid={`${testIdPrefix}-pin`}
         >
           {pinned ? <IconPinFilled size={12} /> : <IconPin size={12} />}
         </ActionIcon>
       </div>
       {pinned && (
         <Center me="1px">
-          <IconPinFilled size={12} data-testid={`filter-pin-${label}-pinned`} />
+          <IconPinFilled size={12} data-testid={`${testIdPrefix}-pin-pinned`} />
         </Center>
       )}
     </div>
@@ -755,6 +758,7 @@ export const FilterGroup = ({
                 {displayedOptions.map(option => (
                   <FilterCheckbox
                     key={option.value.toString()}
+                    columnName={name}
                     label={option.label}
                     pinned={isPinned(option.value)}
                     className={

packages/app/tests/e2e/components/FilterComponent.ts

@@ -49,50 +49,59 @@ export class FilterComponent {
   }
 
   /**
-   * Get checkbox for a specific filter value
+   * Get checkbox for a specific filter value within a column
+   * @param columnName - e.g., 'ServiceName', 'SeverityText'
    * @param valueName - e.g., 'info', 'error', 'debug'
    */
-  getFilterCheckbox(valueName: string) {
-    return this.page.getByTestId(`filter-checkbox-${valueName}`);
+  getFilterCheckbox(columnName: string, valueName: string) {
+    return this.page.getByTestId(`filter-checkbox-${columnName}-${valueName}`);
   }
 
   /**
-   * Get checkbox input element
+   * Get checkbox input element within a column
    */
-  getFilterCheckboxInput(valueName: string) {
-    return this.page.getByTestId(`filter-checkbox-input-${valueName}`);
+  getFilterCheckboxInput(columnName: string, valueName: string) {
+    return this.page.getByTestId(
+      `filter-checkbox-${columnName}-${valueName}-input`,
+    );
   }
 
   /**
    * Apply/select a filter value
    */
-  async applyFilter(valueName: string) {
-    const checkbox = this.getFilterCheckbox(valueName);
+  async applyFilter(columnName: string, valueName: string) {
+    const checkbox = this.getFilterCheckbox(columnName, valueName);
     await checkbox.click();
   }
 
   /**
    * Exclude a filter value (invert the filter)
    */
-  async excludeFilter(valueName: string) {
-    const filterCheckbox = this.getFilterCheckbox(valueName);
-    await this.scrollAndClick(filterCheckbox, `filter-exclude-${valueName}`);
+  async excludeFilter(columnName: string, valueName: string) {
+    const filterCheckbox = this.getFilterCheckbox(columnName, valueName);
+    await this.scrollAndClick(
+      filterCheckbox,
+      `filter-checkbox-${columnName}-${valueName}-exclude`,
+    );
   }
 
   /**
    * Pin a filter value to persist it
    */
-  async pinFilter(valueName: string) {
-    const filterCheckbox = this.getFilterCheckbox(valueName);
-    await this.scrollAndClick(filterCheckbox, `filter-pin-${valueName}`);
+  async pinFilter(columnName: string, valueName: string) {
+    const filterCheckbox = this.getFilterCheckbox(columnName, valueName);
+    await this.scrollAndClick(
+      filterCheckbox,
+      `filter-checkbox-${columnName}-${valueName}-pin`,
+    );
   }
 
   /**
    * Clear/unselect a filter
    */
-  async clearFilter(valueName: string) {
-    const input = this.getFilterCheckboxInput(valueName);
-    const checkbox = this.getFilterCheckbox(valueName);
+  async clearFilter(columnName: string, valueName: string) {
+    const input = this.getFilterCheckboxInput(columnName, valueName);
+    const checkbox = this.getFilterCheckbox(columnName, valueName);
     await checkbox.click();
     await input.click();
   }
@@ -160,8 +169,11 @@ export class FilterComponent {
   /**
    * Check if filter checkbox is indeterminate (excluded state)
    */
-  async isFilterExcluded(valueName: string): Promise<boolean> {
-    const input = this.getFilterCheckboxInput(valueName);
+  async isFilterExcluded(
+    columnName: string,
+    valueName: string,
+  ): Promise<boolean> {
+    const input = this.getFilterCheckboxInput(columnName, valueName);
     const indeterminate = await input.getAttribute('data-indeterminate');
     return indeterminate === 'true';
   }
@@ -170,7 +182,9 @@ export class FilterComponent {
    * Get all filter values for a specific filter group
    */
   getFilterValues(filterGroupName: string) {
-    return this.page.getByTestId(`filter-checkbox-${filterGroupName}`);
+    return this.page.getByTestId(
+      new RegExp(`^filter-checkbox-${filterGroupName}-`),
+    );
   }
 
   /**
@@ -223,7 +237,9 @@ export class FilterComponent {
     // Wait for initial facet options to load
     const group = this.getFilterGroup(filterGroupName);
     await group
-      .locator('[data-testid^="filter-checkbox-input-"]')
+      .locator(
+        `[data-testid^="filter-checkbox-${filterGroupName}-"][data-testid$="-input"]`,
+      )
       .first()
       .waitFor({ state: 'visible', timeout: 10000 });
 
@@ -232,7 +248,7 @@ export class FilterComponent {
     const visible: string[] = [];
     for (const value of candidates) {
       if (visible.length >= count) break;
-      const input = this.getFilterCheckboxInput(value);
+      const input = this.getFilterCheckboxInput(filterGroupName, value);
       if (await input.isVisible()) visible.push(value);
     }
     if (visible.length < count) {