test: multi y-axis test case fix (#6641)

tests/ui-testing/pages/dashboardPages/dashboard-chart.js

@@ -48,6 +48,7 @@ export default class ChartTypeSelector {
   }
 
   // Search field and added for X, Y,Breakdown etc.
+
   async searchAndAddField(fieldName, target) {
     const searchInput = this.page.locator(
       '[data-test="index-field-search-input"]'
@@ -56,23 +57,31 @@ export default class ChartTypeSelector {
     await searchInput.fill(fieldName);
 
     const buttonSelectors = {
-      x: '[data-test="dashboard-add-x-data"]',
-      y: '[data-test="dashboard-add-y-data"]',
-      b: '[data-test="dashboard-add-b-data"]',
-      filter: '[data-test="dashboard-add-filter-data"]',
-      latitude: '[data-test="dashboard-add-latitude-data"]',
-      longitude: '[data-test="dashboard-add-longitude-data"]',
-      weight: '[data-test="dashboard-add-weight-data"]',
-      z: '[data-test="dashboard-add-z-data"]',
+      x: "dashboard-add-x-data",
+      y: "dashboard-add-y-data",
+      b: "dashboard-add-b-data",
+      filter: "dashboard-add-filter-data",
+      latitude: "dashboard-add-latitude-data",
+      longitude: "dashboard-add-longitude-data",
+      weight: "dashboard-add-weight-data",
+      z: "dashboard-add-z-data",
     };
 
-    const buttonSelector = buttonSelectors[target];
-
-    if (!buttonSelector) {
+    const buttonTestId = buttonSelectors[target];
+    if (!buttonTestId) {
       throw new Error(`Invalid target type: ${target}`);
     }
 
-    await this.page.locator(buttonSelector).click();
+    // Locate the specific field item container that contains the field name
+    const fieldItem = this.page.locator(`[data-test^="field-list-item-"]`, {
+      hasText: fieldName,
+    });
+
+    // Now locate the button within that field item
+    const button = fieldItem.locator(`[data-test="${buttonTestId}"]`);
+
+    // Click the button
+    await button.click();
   }
 
   // Add filter condition

tests/ui-testing/pages/dashboardPages/dashboard-panel-actions.js

@@ -35,4 +35,25 @@ export default class DashboardactionPage {
       return btn && btn.classList.contains("bg-secondary");
     });
   }
+
+  //Dashboard panel actions(Edit, Layout, Duplicate, Inspector, Move, Delete)
+
+  async selectPanelAction(panelName, action) {
+    const actionDataTestIds = {
+      Edit: "dashboard-edit-panel",
+      Layout: "dashboard-edit-layout",
+      Duplicate: "dashboard-duplicate-panel",
+      Inspector: "dashboard-query-inspector-panel",
+      Move: "dashboard-move-to-another-panel",
+      Delete: "dashboard-delete-panel",
+    };
+
+    const actionTestId = actionDataTestIds[action];
+    if (!actionTestId) throw new Error(`Unknown action: ${action}`);
+
+    await this.page
+      .locator(`[data-test="dashboard-edit-panel-${panelName}-dropdown"]`)
+      .click();
+    await this.page.locator(`[data-test="${actionTestId}"]`).click();
+  }
 }

tests/ui-testing/pages/dashboardPages/dashboard-time.js

@@ -5,15 +5,21 @@ import { expect } from "@playwright/test";
 export default class DateTimeHelper {
   constructor(page) {
     this.page = page;
-    this.applyQueryBtn = page.locator('[data-test="dashboard-apply"]');
     this.timePickerBtn = page.locator('[data-test="date-time-btn"]');
     this.applyTimeBtn = page.locator('[data-test="date-time-apply-btn"]');
   }
   // set relative time range
   async setRelativeTimeRange(rangeCode) {
     // Minutes= m	Hours= h	Days= d	Weeks= w	Months= M
-    await this.applyQueryBtn.click();
+
+    await this.page.waitForSelector(
+      '[data-test="date-time-btn"]:not([disabled])',
+      {
+        timeout: 15000,
+      }
+    );
     await this.timePickerBtn.click();
+
     await this.page
       .locator(`[data-test="date-time-relative-${rangeCode}-btn"]`)
       .click();

tests/ui-testing/playwright-tests/dashboards/dashboard-multi-y-axis.spec.js

@@ -64,6 +64,88 @@ test.describe("dashboard multi y axis testcases", () => {
 
     await dateTimeHelper.setRelativeTimeRange("6-w");
 
+    await dashboardPageActions.applyDashboardBtn();
+
+    await dashboardPageActions.waitForChartToRender();
+
+    await page
+      .locator('[data-test="dashboard-panel-data-view-query-inspector-btn"]')
+      .click();
+
+    await expect(
+      page
+        .getByRole("cell", {
+          name: 'SELECT histogram(_timestamp) as "x_axis_1", count(kubernetes_namespace_name) as "y_axis_1", count(kubernetes_container_name) as "y_axis_2", kubernetes_labels_name as "breakdown_1" FROM "e2e_automate" GROUP BY x_axis_1, breakdown_1 ORDER BY x_axis_1 ASC',
+        })
+        .first()
+    ).toBeVisible();
+
+    await page.locator('[data-test="query-inspector-close-btn"]').click();
+
+    await dashboardPageActions.addPanelName(randomDashboardName);
+
+    await dashboardPageActions.savePanel();
+
+    await page.locator('[data-test="dashboard-back-btn"]').click();
+
+    await deleteDashboard(page, randomDashboardName);
+  });
+
+  test("should correctly display and update multiple Y-axes in edit panel.", async ({
+    page,
+  }) => {
+    const chartTypeSelector = new ChartTypeSelector(page);
+    const dashboardPage = new DashboardListPage(page);
+    const dashboardCreate = new DashboardCreate(page);
+    const dateTimeHelper = new DateTimeHelper(page);
+    const dashboardPageActions = new DashboardactionPage(page);
+
+    await dashboardPage.menuItem("dashboards-item");
+
+    await waitForDashboardPage(page);
+
+    await dashboardCreate.createDashboard(randomDashboardName);
+
+    await dashboardCreate.addPanel();
+
+    await chartTypeSelector.selectChartType("stacked");
+
+    await chartTypeSelector.selectStreamType("logs");
+
+    await chartTypeSelector.selectStream("e2e_automate");
+
+    await chartTypeSelector.searchAndAddField("kubernetes_namespace_name", "y");
+
+    await chartTypeSelector.searchAndAddField("kubernetes_container_name", "y");
+
+    await chartTypeSelector.searchAndAddField("kubernetes_labels_name", "b");
+
+    await dateTimeHelper.setRelativeTimeRange("6-w");
+
+    await dashboardPageActions.applyDashboardBtn();
+
+    await dashboardPageActions.waitForChartToRender();
+
+    await page
+      .locator('[data-test="dashboard-panel-data-view-query-inspector-btn"]')
+      .click();
+
+    await expect(
+      page
+        .getByRole("cell", {
+          name: 'SELECT histogram(_timestamp) as "x_axis_1", count(kubernetes_namespace_name) as "y_axis_1", count(kubernetes_container_name) as "y_axis_2", kubernetes_labels_name as "breakdown_1" FROM "e2e_automate" GROUP BY x_axis_1, breakdown_1 ORDER BY x_axis_1 ASC',
+        })
+        .first()
+    ).toBeVisible();
+
+    await page.locator('[data-test="query-inspector-close-btn"]').click();
+
+    await dashboardPageActions.addPanelName(randomDashboardName);
+
+    await dashboardPageActions.savePanel();
+
+    await dashboardPageActions.selectPanelAction(randomDashboardName, "Edit");
+
     await dashboardPageActions.waitForChartToRender();
 
     await page