From 034d1d4c5320906b6e1d0d28fa330b38b2942f4f Mon Sep 17 00:00:00 2001 From: ktx-akshay Date: Mon, 28 Apr 2025 12:19:14 +0530 Subject: [PATCH] test: multi y-axis test case fix (#6641) --- .../pages/dashboardPages/dashboard-chart.js | 33 +++++--- .../dashboardPages/dashboard-panel-actions.js | 21 +++++ .../pages/dashboardPages/dashboard-time.js | 10 ++- .../dashboards/dashboard-multi-y-axis.spec.js | 82 +++++++++++++++++++ 4 files changed, 132 insertions(+), 14 deletions(-) diff --git a/tests/ui-testing/pages/dashboardPages/dashboard-chart.js b/tests/ui-testing/pages/dashboardPages/dashboard-chart.js index 9b6b6da077..56e47a09b2 100644 --- a/tests/ui-testing/pages/dashboardPages/dashboard-chart.js +++ b/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 diff --git a/tests/ui-testing/pages/dashboardPages/dashboard-panel-actions.js b/tests/ui-testing/pages/dashboardPages/dashboard-panel-actions.js index ced38d9280..b7da3f4054 100644 --- a/tests/ui-testing/pages/dashboardPages/dashboard-panel-actions.js +++ b/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(); + } } diff --git a/tests/ui-testing/pages/dashboardPages/dashboard-time.js b/tests/ui-testing/pages/dashboardPages/dashboard-time.js index f09dfb374c..9f7d9c8d6b 100644 --- a/tests/ui-testing/pages/dashboardPages/dashboard-time.js +++ b/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(); diff --git a/tests/ui-testing/playwright-tests/dashboards/dashboard-multi-y-axis.spec.js b/tests/ui-testing/playwright-tests/dashboards/dashboard-multi-y-axis.spec.js index 78fbad4f65..de86d1019c 100644 --- a/tests/ui-testing/playwright-tests/dashboards/dashboard-multi-y-axis.spec.js +++ b/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