PMM-14596: Refactor autowaiting for panel loadings for UI tests (#838)

* PMM-14596: Refactor dashboard tests to utilize loadAllPanels method for improved readability and maintainability

* fix to autowait

* fix panel flakiness

* updated Expects

* remove redundancies

* fix dashboard

* fix panels

Author: travagliad

e2e_tests/components/dashboards/panels/panel.component.ts

@@ -6,7 +6,9 @@ export default class PanelComponent {
   constructor() {}
 
   protected verifyData = async (locator: Locator, panelName: string) => {
-    await locator.first().scrollIntoViewIfNeeded({ timeout: Timeouts.ONE_SECOND });
+    const target = locator.first();
+    await target.waitFor({ state: 'visible', timeout: Timeouts.ONE_MINUTE });
+    await target.scrollIntoViewIfNeeded();
     const barGaugeTexts = await locator.allTextContents();
     for (const barGaugeText of barGaugeTexts) {
       expect.soft(barGaugeText.length, `Panel: ${panelName} has empty values!`).toBeGreaterThan(0);

e2e_tests/pages/dashboards/dashboards.page.ts

@@ -1,4 +1,4 @@
-import { Page, expect } from '@playwright/test';
+import { Page, expect, test } from '@playwright/test';
 import { GrafanaPanel } from '@interfaces/grafanaPanel';
 import { GetService } from '@interfaces/inventory';
 import { replaceWildcards } from '@helpers/metrics.helper';
@@ -58,11 +58,7 @@ export default class Dashboards {
   }
 
   private elements = {
-    expandRow: () => this.page.locator('//*[@aria-label="Expand row"]'),
-    row: () =>
-      this.page.locator(
-        '//button[contains(@data-testid, "dashboard-row-title")]//ancestor::div[contains(@class, "react-grid-item")]',
-      ),
+    expandRow: () => this.page.getByLabel('Expand row'),
     panelName: () => this.page.locator('//section[contains(@data-testid, "Panel header")]//h2'),
     noDataPanel: () =>
       this.page.locator(
@@ -72,102 +68,66 @@ export default class Dashboards {
       this.page.locator(
         '//*[(text()="No data") or (text()="NO DATA") or (text()="N/A") or (text()="-") or (text() = "No Data") or (@data-testid="data-testid Panel data error message")]//ancestor::section//h2',
       ),
-    rowByName: (rowName: string) =>
-      this.page.locator(
-        `//button[contains(@data-testid, "dashboard-row-title") and contains(@data-testid, "${rowName}")]`,
-      ),
+    refreshButton: () => this.page.getByLabel('Refresh', { exact: true }),
+    loadingIndicator: () => this.page.getByLabel('data-testid Loading indicator', { exact: true }),
+    loadingText: () => this.page.getByText('Loading plugin panel...', { exact: true }),
     loadingBar: () => this.page.getByLabel('Panel loading bar'),
     gridItems: () => this.page.locator('.react-grid-item'),
   };
 
-  public async loadAllPanels() {
-    await this.expandAllRows();
-
-    const items = this.elements.gridItems();
-    const totalItems = await items.count();
-
-    // Open every item and wait until the item has at least one child, indicating content started to load.
-    for (let i = 0; i < totalItems; i++) {
-      const item = items.nth(i);
-      await item.scrollIntoViewIfNeeded();
-      await expect
-        .poll(async () => await item.locator(':scope > *').count(), { timeout: Timeouts.ONE_MINUTE })
-        .toBeGreaterThan(0);
-    }
+  private async loadAllPanels() {
+    const expectPanel = expect.configure({ timeout: Timeouts.ONE_MINUTE });
+    // Wait for the dashboard to be visible before proceeding.
+    await test.step('Wait for initial loading to finish', async () => {
+      await expectPanel(this.elements.refreshButton()).toBeVisible();
+      await expectPanel(this.elements.loadingIndicator()).toHaveCount(0);
+      await expectPanel(this.elements.loadingText()).toHaveCount(0);
+    });
+
+    // Expand rows if present and wait for content in each item.
+    await test.step('Expand rows and load panel content', async () => {
+      for (let i = 0; i < (await this.elements.gridItems().count()); i++) {
+        const item = this.elements.gridItems().nth(i);
+        await item.scrollIntoViewIfNeeded();
+
+        const expandButton = item.getByLabel('Expand row');
+        if (await expandButton.isVisible()) {
+          await expandButton.click();
+        }
+
+        await expectPanel(item.locator(':scope > *')).not.toHaveCount(0);
+      }
+    });
 
-    // Confirm no loading bars remain.
-    await expect
-      .poll(async () => await this.elements.loadingBar().count(), {
-        timeout: Timeouts.ONE_MINUTE,
-      })
-      .toBe(0);
+    // Confirms that there are no remaining loading bars.
+    await test.step('Wait for loading to finish', async () => {
+      await expectPanel(this.elements.loadingBar()).toHaveCount(0);
+    });
   }
 
-  public async verifyAllPanelsHaveData(noDataMetrics: string[]) {
-    const noDataPanels = new Set<string>();
-
-    for (let i = 0; i < 10; i++) {
-      const noDataPanelNames = await this.elements.noDataPanelName().allTextContents();
-      noDataPanelNames.forEach((panelName: string) => noDataPanels.add(panelName));
-
-      await this.page.keyboard.press('PageDown');
-      await this.page.waitForTimeout(Timeouts.HALF_SECOND);
-    }
-
-    await this.page.keyboard.press('Home');
-    await this.page.waitForTimeout(Timeouts.HALF_SECOND);
-
+  async verifyAllPanelsHaveData(noDataMetrics: string[]) {
+    await this.loadAllPanels();
+    const noDataPanels = await this.elements.noDataPanelName().allTextContents();
     const missingMetrics = Array.from(noDataPanels).filter((e) => !noDataMetrics.includes(e));
-    const extraMetrics = noDataMetrics.filter((e) => !noDataPanels.has(e));
+    const extraMetrics = noDataMetrics.filter((e) => !noDataPanels.includes(e));
 
     expect.soft(missingMetrics, `Metrics without data are: ${missingMetrics}`).toHaveLength(0);
     expect
       .soft(extraMetrics, `Metrics with data that are expected to be empty are: ${extraMetrics}`)
       .toHaveLength(0);
   }
 
-  public async verifyMetricsPresent(expectedMetrics: GrafanaPanel[], serviceList?: GetService[]) {
+  async verifyMetricsPresent(expectedMetrics: GrafanaPanel[], serviceList?: GetService[]) {
     expectedMetrics = serviceList ? replaceWildcards(expectedMetrics, serviceList) : expectedMetrics;
     const expectedMetricsNames = expectedMetrics.map((e) => e.name);
-    await this.page.keyboard.press('Home');
-    const availableMetrics = await this.getAllAvailablePanels();
+    await this.loadAllPanels();
+    const availableMetrics = await this.elements.panelName().allTextContents();
 
     expect(availableMetrics.sort()).toEqual(expectedMetricsNames.sort());
-
-    await this.page.keyboard.press('Home');
-    await this.page.waitForTimeout(Timeouts.HALF_SECOND);
-  }
-
-  expandAllRows = async () => {
-    await this.elements.row().first().waitFor({ state: 'visible' });
-    await this.page.keyboard.press('End');
-    await this.page.waitForTimeout(Timeouts.ONE_SECOND);
-    const rowsName = await this.elements.expandRow().allTextContents();
-
-    for (const rowName of rowsName) {
-      await this.elements.rowByName(rowName).click();
-      await this.page.waitForTimeout(Timeouts.ONE_SECOND);
-    }
-
-    await this.page.keyboard.press('Home');
-    await this.page.waitForTimeout(Timeouts.ONE_SECOND);
-  };
-
-  private async getAllAvailablePanels(): Promise<string[]> {
-    const availableMetrics = new Set<string>();
-
-    for (let i = 0; i < 10; i++) {
-      await this.page.keyboard.press('PageDown');
-      await this.page.waitForTimeout(Timeouts.ONE_SECOND);
-      (await this.elements.panelName().allTextContents()).forEach((availableMetric) =>
-        availableMetrics.add(availableMetric),
-      );
-    }
-
-    return Array.from(availableMetrics.values());
   }
 
-  public verifyPanelValues = async (panels: GrafanaPanel[], serviceList?: GetService[]) => {
+  async verifyPanelValues(panels: GrafanaPanel[], serviceList?: GetService[]) {
+    await this.loadAllPanels();
     const panelList = serviceList ? replaceWildcards(panels, serviceList) : panels;
     for (const panel of panelList) {
       switch (panel.type) {

e2e_tests/pages/dashboards/valkey/valkeyCommandDetailDashboard.ts

@@ -28,6 +28,12 @@ export default class ValkeyCommandDetailDashboard {
     { name: 'valkey-replica-4-svc-* - Total Time Spent by Command/Sec', type: 'unknown' },
     { name: 'valkey-replica-5-svc-* - Total Time Spent by Command/Sec', type: 'unknown' },
     { name: 'valkey-replica-6-svc-* - Total Time Spent by Command/Sec', type: 'unknown' },
+    // For some reason these panels have identical names even though they are different
+    { name: 'Commands Totals', type: 'unknown' },
+    { name: 'Commands Totals', type: 'unknown' },
+    { name: 'Commands Totals', type: 'unknown' },
+    { name: 'Commands Totals', type: 'unknown' },
+    { name: 'Commands Totals', type: 'unknown' },
     { name: 'Commands Totals', type: 'unknown' },
     { name: 'valkey-primary-1-svc-* - Command Percentiles', type: 'unknown' },
     { name: 'valkey-primary-2-svc-* - Command Percentiles', type: 'unknown' },

e2e_tests/tests/dashboards/mysql/mysqlDashboards.test.ts

@@ -16,7 +16,6 @@ pmmTest(
       }),
     );
 
-    await dashboard.expandAllRows();
     await dashboard.verifyMetricsPresent(dashboard.mysqlInstanceOverview.metrics);
     await dashboard.verifyAllPanelsHaveData(dashboard.mysqlInstanceOverview.noDataMetrics);
     await dashboard.verifyPanelValues(dashboard.mysqlInstanceOverview.metrics);

e2e_tests/tests/dashboards/valkey/valkeyDashboards.test.ts

@@ -21,7 +21,6 @@ for (const dashboardName of Object.keys(valkeyDashboards)) {
         }),
       );
 
-      await dashboard.loadAllPanels();
       await dashboard.verifyMetricsPresent(dashboardPage.metrics, serviceList);
       await dashboard.verifyAllPanelsHaveData([]);
       await dashboard.verifyPanelValues(dashboardPage.metrics, serviceList);