update

Qxisylolo · Qxisylolo · commit de92f5bf1ffc · 2025-11-10T18:01:46.000+08:00
Signed-off-by: Qxisylolo &lt;qianxisy@amazon.com&gt;
diff --git a/cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_area.spec.js b/cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_area.spec.js
@@ -36,13 +36,13 @@ export const runCreateVisTests = () => {
     });
     it('should create a area visualization using a query with one metric and one categories', () => {
       const query = `source=${datasetName} | stats count() by category`;
-      cy.explore.createVisualizationWithQuery(query, 'Area', datasetName, {
+      cy.explore.createVisualizationWithQuery(query, 'area', datasetName, {
         shouldManualSelectChartType: true,
       });
     });
     it('should change axes style of area chart and reflect immediatly to the area visualization', () => {
       const query = `source=${datasetName} | stats count() by category`;
-      cy.explore.createVisualizationWithQuery(query, 'Area', datasetName, {
+      cy.explore.createVisualizationWithQuery(query, 'area', datasetName, {
         shouldManualSelectChartType: true,
       });
       let beforeCanvasDataUrl;
@@ -63,7 +63,7 @@ export const runCreateVisTests = () => {
 
     it('should add threshold for area chart and reflect immediatly to the area visualization', () => {
       const query = `source=${datasetName} | stats count() by category`;
-      cy.explore.createVisualizationWithQuery(query, 'Area', datasetName, {
+      cy.explore.createVisualizationWithQuery(query, 'area', datasetName, {
         shouldManualSelectChartType: true,
       });
       let beforeCanvasDataUrl;
diff --git a/cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_bar.spec.js b/cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_bar.spec.js
@@ -36,11 +36,11 @@ export const runCreateVisTests = () => {
     });
     it('should create a bar visualization using a query with one metric and one category', () => {
       const query = `source=${datasetName} | stats count() by category`;
-      cy.explore.createVisualizationWithQuery(query, 'Bar', datasetName);
+      cy.explore.createVisualizationWithQuery(query, 'bar', datasetName);
     });
     it('should change axes style of bar chart and reflect immediatly to the bar visualization', () => {
       const query = `source=${datasetName} | stats count() by category`;
-      cy.explore.createVisualizationWithQuery(query, 'Bar', datasetName);
+      cy.explore.createVisualizationWithQuery(query, 'bar', datasetName);
       let beforeCanvasDataUrl;
       cy.get('canvas.marks')
         .should('be.visible')
@@ -58,7 +58,7 @@ export const runCreateVisTests = () => {
     });
     it('should add border for bar and reflect immediatly to the bar visualization', () => {
       const query = `source=${datasetName} | stats count() by category`;
-      cy.explore.createVisualizationWithQuery(query, 'Bar', datasetName);
+      cy.explore.createVisualizationWithQuery(query, 'bar', datasetName);
       let beforeCanvasDataUrl;
       cy.get('canvas.marks')
         .should('be.visible')
@@ -75,7 +75,7 @@ export const runCreateVisTests = () => {
     });
     it('should add threshold for bar chart and reflect immediatly to the bar visualization', () => {
       const query = `source=${datasetName} | stats count() by category`;
-      cy.explore.createVisualizationWithQuery(query, 'Bar', datasetName);
+      cy.explore.createVisualizationWithQuery(query, 'bar', datasetName);
       let beforeCanvasDataUrl;
       cy.get('canvas.marks')
         .should('be.visible')
diff --git a/cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_bar_gauge.spec.js b/cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_bar_gauge.spec.js
@@ -34,14 +34,14 @@ export const runCreateVisTests = () => {
     });
     it('should create a bar gauge visualization using a query with one metric and one category', () => {
       const query = `source=${datasetName} | stats count() by category`;
-      cy.explore.createVisualizationWithQuery(query, 'Bar Gauge', datasetName, {
+      cy.explore.createVisualizationWithQuery(query, 'bar_gauge', datasetName, {
         shouldManualSelectChartType: true,
       });
     });
 
     it('should change style options and the changes reflect immediately to the bar gauge visualization', () => {
       const query = `source=${datasetName} | stats count() by category`;
-      cy.explore.createVisualizationWithQuery(query, 'Bar Gauge', datasetName, {
+      cy.explore.createVisualizationWithQuery(query, 'bar_gauge', datasetName, {
         shouldManualSelectChartType: true,
       });
       let beforeCanvasDataUrl;
@@ -60,7 +60,7 @@ export const runCreateVisTests = () => {
     });
     it('should add threshold for bar gauge chart and reflect immediatly to the bar gauge visualization', () => {
       const query = `source=${datasetName} | stats count() by category`;
-      cy.explore.createVisualizationWithQuery(query, 'Bar Gauge', datasetName, {
+      cy.explore.createVisualizationWithQuery(query, 'bar_gauge', datasetName, {
         shouldManualSelectChartType: true,
       });
       let beforeCanvasDataUrl;
diff --git a/cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_gauge.spec.js b/cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_gauge.spec.js
@@ -35,14 +35,14 @@ export const runCreateVisTests = () => {
     });
     it('should create a gauge visualization using a query with one metric', () => {
       const query = `source=${datasetName} | stats count()`;
-      cy.explore.createVisualizationWithQuery(query, 'Gauge', datasetName, {
+      cy.explore.createVisualizationWithQuery(query, 'gauge', datasetName, {
         shouldManualSelectChartType: true,
       });
     });
 
     it('should change style options and the changes reflect immediately to the gauge visualization', () => {
       const query = `source=${datasetName} | stats count()`;
-      cy.explore.createVisualizationWithQuery(query, 'Gauge', datasetName, {
+      cy.explore.createVisualizationWithQuery(query, 'gauge', datasetName, {
         shouldManualSelectChartType: true,
       });
       let beforeCanvasDataUrl;
@@ -60,7 +60,7 @@ export const runCreateVisTests = () => {
     });
     it('should add threshold for gauge chart and reflect immediatly to the gauge visualization', () => {
       const query = `source=${datasetName} | stats count()`;
-      cy.explore.createVisualizationWithQuery(query, 'Gauge', datasetName, {
+      cy.explore.createVisualizationWithQuery(query, 'gauge', datasetName, {
         shouldManualSelectChartType: true,
       });
       let beforeCanvasDataUrl;
diff --git a/cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_heatmap.spec.js b/cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_heatmap.spec.js
@@ -36,11 +36,11 @@ export const runCreateVisTests = () => {
     });
     it('should create a heatmap visualization using a query with one metric and two categories', () => {
       const query = `source=${datasetName} | stats avg(bytes_transferred) by service_endpoint, category`;
-      cy.explore.createVisualizationWithQuery(query, 'Heatmap', datasetName);
+      cy.explore.createVisualizationWithQuery(query, 'heatmap', datasetName);
     });
     it('should change axes style of heatmap chart and reflect immediatly to the heatmap visualization', () => {
       const query = `source=${datasetName} | stats avg(bytes_transferred) by service_endpoint, category`;
-      cy.explore.createVisualizationWithQuery(query, 'Heatmap', datasetName);
+      cy.explore.createVisualizationWithQuery(query, 'heatmap', datasetName);
       let beforeCanvasDataUrl;
       cy.get('canvas.marks')
         .should('be.visible')
@@ -58,7 +58,7 @@ export const runCreateVisTests = () => {
     });
     it('should turn off legend of heatmap chart and reflect immediatly to the heatmap visualization', () => {
       const query = `source=${datasetName} | stats avg(bytes_transferred) by service_endpoint, category`;
-      cy.explore.createVisualizationWithQuery(query, 'Heatmap', datasetName);
+      cy.explore.createVisualizationWithQuery(query, 'heatmap', datasetName);
       let beforeCanvasDataUrl;
       cy.get('canvas.marks')
         .should('be.visible')
@@ -76,7 +76,7 @@ export const runCreateVisTests = () => {
     });
     it('should update style of heatmap chart and reflect immediatly to the heatmap visualization', () => {
       const query = `source=${datasetName} | stats avg(bytes_transferred) by service_endpoint, category`;
-      cy.explore.createVisualizationWithQuery(query, 'Heatmap', datasetName);
+      cy.explore.createVisualizationWithQuery(query, 'heatmap', datasetName);
       let beforeCanvasDataUrl;
       cy.get('canvas.marks')
         .should('be.visible')
diff --git a/cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_histogram.spec.js b/cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_histogram.spec.js
@@ -11,7 +11,7 @@ const workspaceName = getRandomizedWorkspaceName();
 const datasetName = `${INDEX_WITH_TIME_1}*`;
 
 export const runCreateVisTests = () => {
-  describe('create Histogram visualization tests', () => {
+  describe('create histogram visualization tests', () => {
     before(() => {
       cy.osd.setupWorkspaceAndDataSourceWithIndices(workspaceName, [INDEX_WITH_TIME_1]);
       cy.explore.createWorkspaceDataSets({
@@ -39,7 +39,7 @@ export const runCreateVisTests = () => {
 
     it('should create a histogram visualization', () => {
       const query = `source=${datasetName} | fields response_time`;
-      cy.explore.createVisualizationWithQuery(query, 'Histogram', datasetName, {
+      cy.explore.createVisualizationWithQuery(query, 'histogram', datasetName, {
         shouldManualSelectChartType: true,
       });
       cy.getElementByTestId('field-x').contains('response_time');
@@ -48,7 +48,7 @@ export const runCreateVisTests = () => {
 
     it('should change style options and the changes reflect immediately to the histogram visualization', () => {
       const query = `source=${datasetName} | fields response_time`;
-      cy.explore.createVisualizationWithQuery(query, 'Histogram', datasetName, {
+      cy.explore.createVisualizationWithQuery(query, 'histogram', datasetName, {
         shouldManualSelectChartType: true,
       });
 
diff --git a/cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_line.spec.js b/cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_line.spec.js
@@ -36,11 +36,11 @@ export const runCreateVisTests = () => {
     });
     it('should create a line visualization using a query with timestamp', () => {
       const query = `source=${datasetName} | stats count() by event_time`;
-      cy.explore.createVisualizationWithQuery(query, 'Line', datasetName);
+      cy.explore.createVisualizationWithQuery(query, 'line', datasetName);
     });
     it('should change axes style of line chart and reflect immediatly to the line visualization', () => {
       const query = `source=${datasetName} | stats count() by event_time`;
-      cy.explore.createVisualizationWithQuery(query, 'Line', datasetName);
+      cy.explore.createVisualizationWithQuery(query, 'line', datasetName);
       let beforeCanvasDataUrl;
       cy.get('canvas.marks')
         .should('be.visible')
@@ -59,7 +59,7 @@ export const runCreateVisTests = () => {
     });
     it('should change line interpolation of line chart and reflect immediatly to the line visualization', () => {
       const query = `source=${datasetName} | stats count() by event_time`;
-      cy.explore.createVisualizationWithQuery(query, 'Line', datasetName);
+      cy.explore.createVisualizationWithQuery(query, 'line', datasetName);
       let beforeCanvasDataUrl;
       cy.get('canvas.marks')
         .should('be.visible')
@@ -76,7 +76,7 @@ export const runCreateVisTests = () => {
     });
     it('should add threshold for line chart and reflect immediatly to the line visualization', () => {
       const query = `source=${datasetName} | stats count() by event_time`;
-      cy.explore.createVisualizationWithQuery(query, 'Line', datasetName);
+      cy.explore.createVisualizationWithQuery(query, 'line', datasetName);
       let beforeCanvasDataUrl;
       cy.get('canvas.marks')
         .should('be.visible')
diff --git a/cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_metric.spec.js b/cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_metric.spec.js
@@ -11,7 +11,7 @@ const workspaceName = getRandomizedWorkspaceName();
 const datasetName = `${INDEX_WITH_TIME_1}*`;
 
 export const runCreateVisTests = () => {
-  describe('create Metric visualization tests', () => {
+  describe('create metric visualization tests', () => {
     before(() => {
       cy.osd.setupWorkspaceAndDataSourceWithIndices(workspaceName, [INDEX_WITH_TIME_1]);
       cy.explore.createWorkspaceDataSets({
@@ -36,14 +36,14 @@ export const runCreateVisTests = () => {
     });
     it('should create a metric visualization using a single metric query', () => {
       const query = `source=${datasetName} | stats count()`;
-      cy.explore.createVisualizationWithQuery(query, 'Metric', datasetName);
+      cy.explore.createVisualizationWithQuery(query, 'metric', datasetName);
       cy.getElementByTestId('field-value').contains('count()');
       cy.get('canvas.marks').should('be.visible');
     });
 
     it('should change style options and the changes reflect immediately to the metric visualization', () => {
       const query = `source=${datasetName} | stats count()`;
-      cy.explore.createVisualizationWithQuery(query, 'Metric', datasetName);
+      cy.explore.createVisualizationWithQuery(query, 'metric', datasetName);
       let beforeCanvasDataUrl;
       cy.get('canvas.marks')
         .should('be.visible')
@@ -62,7 +62,7 @@ export const runCreateVisTests = () => {
 
     it('should create a metric sparkline visualization using a metric query with time bucket', () => {
       const query = `source=${datasetName} | stats count() by span(timestamp, 1d)`;
-      cy.explore.createVisualizationWithQuery(query, 'Metric', datasetName, {
+      cy.explore.createVisualizationWithQuery(query, 'metric', datasetName, {
         shouldManualSelectChartType: true,
       });
       cy.getElementByTestId('field-value').contains('count()');
diff --git a/cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_pie.spec.js b/cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_pie.spec.js
@@ -37,13 +37,13 @@ export const runCreateVisTests = () => {
     it('should create a pie visualization using a query with one metric and one categories', () => {
       const query = `source=${datasetName} | stats count() by category`;
 
-      cy.explore.createVisualizationWithQuery(query, 'Pie', datasetName, {
+      cy.explore.createVisualizationWithQuery(query, 'pie', datasetName, {
         shouldManualSelectChartType: true,
       });
     });
     it('should turn off legend of pie chart and reflect immediatly to the pie visualization', () => {
       const query = `source=${datasetName} | stats count() by category`;
-      cy.explore.createVisualizationWithQuery(query, 'Pie', datasetName, {
+      cy.explore.createVisualizationWithQuery(query, 'pie', datasetName, {
         shouldManualSelectChartType: true,
       });
 
@@ -65,7 +65,7 @@ export const runCreateVisTests = () => {
 
     it('should update pie chart style and reflect immediatly to the pie visualization', () => {
       const query = `source=${datasetName} | stats count() by category`;
-      cy.explore.createVisualizationWithQuery(query, 'Pie', datasetName, {
+      cy.explore.createVisualizationWithQuery(query, 'pie', datasetName, {
         shouldManualSelectChartType: true,
       });
 
diff --git a/cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_scatter.spec.js b/cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/06/rule_matching_vis_scatter.spec.js
@@ -36,11 +36,11 @@ export const runCreateVisTests = () => {
     });
     it('should create a scatter plot visualization using a query with two metrics and one category', () => {
       const query = `source=${datasetName} | fields bytes_transferred, status_code`;
-      cy.explore.createVisualizationWithQuery(query, 'Scatter', datasetName);
+      cy.explore.createVisualizationWithQuery(query, 'scatter', datasetName);
     });
     it('should change axes style of scatter chart and reflect immediatly to the scatter visualization', () => {
       const query = `source=${datasetName} | fields bytes_transferred, status_code`;
-      cy.explore.createVisualizationWithQuery(query, 'Scatter', datasetName);
+      cy.explore.createVisualizationWithQuery(query, 'scatter', datasetName);
       let beforeCanvasDataUrl;
       cy.get('canvas.marks')
         .should('be.visible')
@@ -59,7 +59,7 @@ export const runCreateVisTests = () => {
     });
     it('should change point style of scatter chart and reflect immediatly to the scatter visualization', () => {
       const query = `source=${datasetName} | fields bytes_transferred, status_code`;
-      cy.explore.createVisualizationWithQuery(query, 'Scatter', datasetName);
+      cy.explore.createVisualizationWithQuery(query, 'scatter', datasetName);
       let beforeCanvasDataUrl;
       cy.get('canvas.marks')
         .should('be.visible')
diff --git a/cypress/utils/commands.explore.js b/cypress/utils/commands.explore.js
@@ -519,19 +519,15 @@ cy.explore.add('createVisualizationWithQuery', (query, chartType, datasetName, o
 
   // for pie and area, it needs manual chart type switch
   if (options && options.shouldManualSelectChartType) {
-    cy.get('.euiContextMenuItem.euiSuperSelect__item')
-      .contains(chartType)
-      .should('be.visible')
-      .click();
+    cy.getElementByTestId('exploreChartTypeSelector').should('be.visible').click();
+    cy.getElementByTestId(`exploreChartTypeSelector-${chartType}`).should('be.visible').click();
   }
 
   // Ensure chart type is correct
   cy.getElementByTestId('exploreChartTypeSelector').should('be.visible').click();
-  cy.get('[role="option"][aria-selected="true"]')
-    .should('be.visible')
-    .and('contain.text', chartType);
+  cy.getElementByTestId(`exploreChartTypeSelector-${chartType}`).should('be.visible');
+
   cy.get('body').click(0, 0);
-  cy.getElementByTestId('exploreVisStylePanel').should('be.visible');
 });
 
 cy.explore.add('setupWorkspaceAndDataSourceWithTraces', (workspaceName, traceIndices) => {
