From ad449801ab298c2f57da1c24edcdb5d6c31c0bee Mon Sep 17 00:00:00 2001
From: Shenoy Pratik <sgguruda@amazon.com>
Date: Mon, 13 Feb 2023 19:46:17 -0800
Subject: [PATCH] Operational panels cypress fix  (#244)

* cypress fix for panels

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* removed redundant useEffect

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* updating snapshots

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

---------

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
---
 .cypress/integration/3_panels.spec.js         | 363 ++++++++----------
 .../custom_panel_table.test.tsx.snap          |   4 +-
 .../custom_panel_view.test.tsx.snap           |  16 +
 .../custom_panels/custom_panel_table.tsx      |   4 +-
 .../custom_panels/custom_panel_view.tsx       |  23 +-
 .../helpers/add_visualization_popover.tsx     |   2 +
 .../visualization_container.test.tsx.snap     |   4 +
 .../visualization_container.tsx               |  22 +-
 .../visualization_flyout.test.tsx.snap        |  36 ++
 .../visualization_flyout.tsx                  |   6 +-
 .../__snapshots__/metrics_grid.test.tsx.snap  |   3 +
 11 files changed, 251 insertions(+), 232 deletions(-)

diff --git a/.cypress/integration/3_panels.spec.js b/.cypress/integration/3_panels.spec.js
index e7b349633..023a4d2ae 100644
--- a/.cypress/integration/3_panels.spec.js
+++ b/.cypress/integration/3_panels.spec.js
@@ -35,7 +35,6 @@ const moveToTestPanel = () => {
   cy.get('.euiTableCellContent').contains(TEST_PANEL).trigger('mouseover').click();
   cy.wait(delay * 3);
   cy.get('h1').contains(TEST_PANEL).should('exist');
-  cy.wait(delay);
 };
 
 describe('Adding sample data and visualization', () => {
@@ -103,73 +102,52 @@ describe('Testing panels table', () => {
   });
 
   it('Displays error toast for invalid panel name', () => {
-    cy.get('.euiButton__text').contains('Create panel').trigger('mouseover').click();
-    cy.wait(delay);
-    cy.get('.euiButton__text')
-      .contains(/^Create$/)
-      .trigger('mouseover')
-      .click();
-    cy.wait(delay);
-
+    cy.get('button[data-test-subj="customPanels__createNewPanels"]').click();
+    cy.get('button[data-test-subj="runModalButton"]').click();
     cy.get('.euiToastHeader__title').contains('Invalid Operational Panel name').should('exist');
   });
 
   it('Creates a panel and redirects to the panel', () => {
-    cy.get('.euiButton__text').contains('Create panel').trigger('mouseover').click();
-    cy.wait(delay);
+    cy.get('button[data-test-subj="customPanels__createNewPanels"]').click();
     cy.get('input.euiFieldText').focus().type(TEST_PANEL, {
       delay: 50,
     });
-    cy.get('.euiButton__text')
-      .contains(/^Create$/)
-      .trigger('mouseover')
-      .click();
-    cy.wait(delay);
-
+    cy.get('button[data-test-subj="runModalButton"]').click();
     cy.contains(TEST_PANEL).should('exist');
   });
 
-  it('Duplicates and renames a panel', () => {
+  it('Duplicates a panel', () => {
     cy.get('.euiCheckbox__input[title="Select this row"]').eq(0).trigger('mouseover').click();
-    cy.wait(delay);
-    cy.get('.euiButton__text').contains('Actions').trigger('mouseover').click();
-    cy.wait(delay);
-    cy.get('.euiContextMenuItem__text').contains('Duplicate').trigger('mouseover').click();
-    cy.wait(delay);
-    cy.get('.euiButton__text').contains('Duplicate').trigger('mouseover').click();
-    cy.wait(delay);
+    cy.get('button[data-test-subj="operationalPanelsActionsButton"]').click();
+    cy.get('button[data-test-subj="duplicateContextMenuItem"]').click();
+    cy.get('button[data-test-subj="runModalButton"]').click();
+  });
 
-    cy.get('.euiCheckbox__input[title="Select this row"]').eq(1).trigger('mouseover').click();
-    cy.wait(delay);
+  it('Renames a panel', () => {
     cy.get('.euiCheckbox__input[title="Select this row"]').eq(0).trigger('mouseover').click();
-    cy.wait(delay);
-    cy.get('.euiButton__text').contains('Actions').trigger('mouseover').click();
-    cy.wait(delay);
-    cy.get('.euiContextMenuItem__text').contains('Rename').trigger('mouseover').click();
-    cy.wait(delay);
+    cy.get('button[data-test-subj="operationalPanelsActionsButton"]').click();
+    cy.get('button[data-test-subj="renameContextMenuItem"]').click();
     cy.get('input.euiFieldText').focus().type(' (rename)', {
       delay: 50,
     });
-    cy.get('.euiButton__text').contains('Rename').trigger('mouseover').click();
-    cy.wait(delay);
+    cy.get('button[data-test-subj="runModalButton"]').click();
   });
 
   it('Searches existing panel', () => {
-    cy.get('input.euiFieldSearch').focus().type('this panel should not exist', {
-      delay: 50,
-    });
-    cy.wait(delay);
+    cy.get('input[data-test-subj="operationalPanelSearchBar"]')
+      .focus()
+      .type('this panel should not exist', {
+        delay: 50,
+      });
 
     cy.get('.euiTableCellContent__text').contains('No items found').should('exist');
 
-    cy.get('.euiFormControlLayoutClearButton').trigger('mouseover').click();
-    cy.wait(delay);
-    cy.get('input.euiFieldSearch')
+    cy.get('[aria-label="Clear input"]').click();
+    cy.get('input[data-test-subj="operationalPanelSearchBar"]')
       .focus()
       .type(TEST_PANEL + ' (copy) (rename)', {
         delay: 50,
       });
-    cy.wait(delay);
 
     cy.get('a.euiLink')
       .contains(TEST_PANEL + ' (copy) (rename)')
@@ -177,34 +155,26 @@ describe('Testing panels table', () => {
   });
 
   it('Deletes panels', () => {
-    cy.get('.euiCheckbox__input[data-test-subj="checkboxSelectAll"]').trigger('mouseover').click();
-    cy.wait(delay);
-    cy.get('.euiButton__text').contains('Actions').trigger('mouseover').click();
-    cy.wait(delay);
-    cy.get('.euiContextMenuItem__text').contains('Delete').trigger('mouseover').click();
-    cy.wait(delay);
-
-    cy.get('button.euiButton--danger').should('be.disabled');
+    cy.get('input[data-test-subj="checkboxSelectAll"]').click();
+    cy.get('button[data-test-subj="operationalPanelsActionsButton"]').click();
+    cy.get('button[data-test-subj="deleteContextMenuItem"]').click();
+    cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('be.disabled');
 
     cy.get('input.euiFieldText[placeholder="delete"]').focus().type('delete', {
       delay: 50,
     });
-    cy.get('button.euiButton--danger').should('not.be.disabled');
-    cy.get('.euiButton__text').contains('Delete').trigger('mouseover').click();
-
-    cy.get('.euiTextAlign').contains('No Operational Panels').should('exist');
+    cy.get('button[data-test-subj="popoverModal__deleteButton"]').should('not.be.disabled');
+    cy.get('button[data-test-subj="popoverModal__deleteButton"]').click();
+    cy.get('h2[data-test-subj="customPanels__noPanelsHome"]').should('exist');
+  });
 
+  it('Create a panel for testing', () => {
     // keep a panel for testing
-    cy.get('.euiButton__text').contains('Create panel').trigger('mouseover').click();
-    cy.wait(delay);
+    cy.get('button[data-test-subj="customPanels__createNewPanels"]').click();
     cy.get('input.euiFieldText').focus().type(TEST_PANEL, {
       delay: 50,
     });
-    cy.get('.euiButton__text')
-      .contains(/^Create$/)
-      .trigger('mouseover')
-      .click();
-    cy.wait(delay * 2);
+    cy.get('button[data-test-subj="runModalButton"]').click();
   });
 });
 
@@ -214,66 +184,42 @@ describe('Testing a panel', () => {
   });
 
   it('Opens visualization flyout from empty panel', () => {
-    cy.get('.euiButton').eq(4).contains('Add visualization').trigger('mouseover').click();
-    cy.wait(delay);
-    cy.get('.euiContextMenuItem__text')
-      .contains('Select existing visualization')
-      .trigger('mouseover')
-      .click();
-    cy.wait(delay);
-    cy.get('.euiButton').contains('Cancel').trigger('mouseover').click();
-    cy.get('.euiButton').eq(2).contains('Add visualization').trigger('mouseover').click();
-    cy.wait(delay);
-    cy.get('.euiContextMenuItem__text')
-      .contains('Select existing visualization')
-      .trigger('mouseover')
-      .click();
-    cy.wait(delay);
-    cy.get('.euiButton').contains('Cancel').trigger('mouseover').click();
-    cy.get('.euiButton').contains('Add visualization').first().trigger('mouseover').click();
-    cy.get('.euiContextMenuItem__text')
-      .contains('Create new visualization')
-      .trigger('mouseover')
-      .click();
-    cy.wait(delay);
-    cy.get('.euiBreadcrumb').contains('Explorer').should('exist');
-    cy.get('.euiCallOut').contains('No results match your search criteria').should('exist');
+    cy.get('button[data-test-subj="addVisualizationButton"]').eq(1).click();
+    cy.get('button[data-test-subj="selectExistingVizContextMenuItem"]').click();
+    cy.get('button[data-test-subj="closeFlyoutButton"]').click();
   });
 
   it('Redirects to correct page on breadcrumb click', () => {
     moveToTestPanel();
-    cy.get('.euiBreadcrumb').contains(TEST_PANEL).trigger('mouseover').click();
-    cy.wait(delay);
-    cy.get('.euiTitle').contains(TEST_PANEL).should('exist');
-    cy.get('.euiBreadcrumb').contains('Operational panels').trigger('mouseover').click();
-    cy.wait(delay);
-    cy.get('.euiTitle').contains('Operational panels').should('exist');
-    cy.get('.euiBreadcrumb').contains('Observability').trigger('mouseover').click();
-    cy.wait(delay);
-    cy.get('.euiTitle').contains('Event analytics').should('exist');
+    cy.get('a[data-test-subj="breadcrumb last"]').click();
+
+    cy.get('h1[data-test-subj="panelNameHeader"]').contains(TEST_PANEL).should('exist');
+    cy.get('a[data-test-subj="breadcrumb"]').contains('Operational panels').click();
+
+    cy.get('a[data-test-subj="breadcrumb last"]').contains('Operational panels').should('exist');
+    cy.get('a[data-test-subj="breadcrumb first"]').contains('Observability').click();
+
+    cy.get('a[data-test-subj="breadcrumb"]').contains('Event analytics').should('exist');
   });
 
   it('Duplicate the open panel', () => {
     moveToTestPanel();
-    cy.get('.euiButton__text').contains('Panel actions').trigger('mouseover').click();
-    cy.wait(delay);
-    cy.get('.euiContextMenuItem__text').contains('Duplicate panel').trigger('mouseover').click();
-    cy.wait(delay);
+    cy.get('button[data-test-subj="panelActionContextMenu"]').click();
+
+    cy.get('button[data-test-subj="duplicatePanelContextMenuItem"]').click();
+
     cy.get(`input.euiFieldText[value="${TEST_PANEL} (copy)"]`).should('exist');
-    cy.get('.euiButton__text').contains('Duplicate').trigger('mouseover').click();
-    cy.wait(delay * 3);
-    cy.get('.euiToastHeader__title').contains('successfully').should('exist');
-    cy.get('h1')
+    cy.get('button[data-test-subj="runModalButton"]').click();
+    cy.get('h1[data-test-subj="panelNameHeader"]')
       .contains(TEST_PANEL + ' (copy)')
       .should('exist');
-    cy.wait(delay);
   });
 
   it('Rename the open panel', () => {
-    cy.get('.euiButton__text').contains('Panel actions').trigger('mouseover').click();
-    cy.wait(delay);
-    cy.get('.euiContextMenuItem__text').contains('Rename panel').trigger('mouseover').click();
-    cy.wait(delay);
+    cy.get('button[data-test-subj="panelActionContextMenu"]').click();
+
+    cy.get('button[data-test-subj="renamePanelContextMenuItem"]').click();
+
     cy.get(`input.euiFieldText[value="${TEST_PANEL} (copy)"]`)
       .focus()
       .clear({ force: true })
@@ -281,11 +227,8 @@ describe('Testing a panel', () => {
       .type('Renamed Panel', {
         delay: 200,
       });
-    cy.get('.euiButton__text').contains('Rename').trigger('mouseover').click();
-    cy.wait(delay * 3);
-    cy.get('.euiToastHeader__title').contains('successfully').should('exist');
-    cy.get('h1').contains('Renamed Panel').should('exist');
-    cy.wait(delay);
+    cy.get('button[data-test-subj="runModalButton"]').click();
+    cy.get('h1[data-test-subj="panelNameHeader"]').contains('Renamed Panel').should('exist');
   });
 
   it('Change date filter of the panel', () => {
@@ -293,45 +236,37 @@ describe('Testing a panel', () => {
     cy.get('.euiButtonEmpty[data-test-subj="superDatePickerToggleQuickMenuButton"]').click({
       force: true,
     });
-    cy.get('.euiLink').contains('This year').trigger('mouseover').click();
-    cy.wait(delay * 2);
-    cy.get('.euiSuperDatePicker__prettyFormat[data-test-subj="superDatePickerShowDatesButton"]')
+    cy.get('button[data-test-subj="superDatePickerCommonlyUsed_This_year"]').click();
+    cy.get('button[data-test-subj="superDatePickerShowDatesButton"]')
       .contains('This year')
       .should('exist');
-    cy.wait(delay);
   });
 
   it('Add existing visualization #1', () => {
-    cy.get('.euiButton__text').contains('Add visualization').trigger('mouseover').click();
-    cy.wait(delay);
-    cy.get('.euiContextMenuItem__text')
-      .contains('Select existing visualization')
-      .trigger('mouseover')
-      .click();
-    cy.wait(delay);
+    cy.get('button[data-test-subj="addVisualizationButton"]').eq(0).click();
+
+    cy.get('button[data-test-subj="selectExistingVizContextMenuItem"]').click();
+
     cy.get('select').select(PPL_VISUALIZATIONS_NAMES[0]);
     cy.get('button[aria-label="refreshPreview"]').trigger('mouseover').click();
     cy.wait(delay * 2);
     cy.get('.plot-container').should('exist');
-    cy.get('.euiButton__text').contains(new RegExp('^Add$', 'g')).trigger('mouseover').click();
-    cy.wait(delay);
+    cy.get('button[data-test-subj="addFlyoutButton"]').click();
+
     cy.get('.euiToastHeader__title').contains('successfully').should('exist');
   });
 
   it('Add existing visualization #2', () => {
-    cy.get('.euiButton__text').contains('Add visualization').trigger('mouseover').click();
-    cy.wait(delay);
-    cy.get('.euiContextMenuItem__text')
-      .contains('Select existing visualization')
-      .trigger('mouseover')
-      .click();
-    cy.wait(delay);
+    cy.get('button[data-test-subj="addVisualizationButton"]').eq(0).click();
+
+    cy.get('button[data-test-subj="selectExistingVizContextMenuItem"]').click();
+
     cy.get('select').select(PPL_VISUALIZATIONS_NAMES[1]);
     cy.get('button[aria-label="refreshPreview"]').trigger('mouseover').click();
     cy.wait(delay * 2);
     cy.get('.plot-container').should('exist');
-    cy.get('.euiButton__text').contains(new RegExp('^Add$', 'g')).trigger('mouseover').click();
-    cy.wait(delay);
+    cy.get('button[data-test-subj="addFlyoutButton"]').click();
+
     cy.get('.euiToastHeader__title').contains('successfully').should('exist');
   });
 
@@ -345,7 +280,7 @@ describe('Testing a panel', () => {
         delay: 500,
       });
 
-    cy.get('.euiButton__text').contains('Refresh').trigger('mouseover').click();
+    cy.get('button[data-test-subj="superDatePickerApplyTimeButton"]').click();
     cy.wait(delay * 3);
     cy.get('.xtick').should('contain', 'OpenSearch-Air');
     cy.get('.xtick').should('contain', 'Munich Airport');
@@ -353,101 +288,101 @@ describe('Testing a panel', () => {
     cy.get('.xtick').contains('BeatsWest').should('not.exist');
     cy.get('.xtick').contains('Logstash Airways').should('not.exist');
     cy.get('.xtick').contains('OpenSearch Dashboards Airlines').should('not.exist');
-    cy.wait(delay);
   });
 
   it('Drag and drop a visualization', () => {
-    cy.get('.euiButton__text').contains('Edit').trigger('mouseover').click();
-    cy.wait(delay);
-    cy.get('h5')
+    cy.get('button[data-test-subj="editPanelButton"]').click();
+
+    cy.get('h5[data-test-subj="visualizationHeader"]')
       .contains(PPL_VISUALIZATIONS_NAMES[1])
       .trigger('mousedown', { which: 1 })
       .trigger('mousemove', { clientX: 1100, clientY: 0 })
       .trigger('mouseup', { force: true });
-    cy.wait(delay);
-    cy.get('.euiButton__text').contains('Save').trigger('mouseover').click();
+
+    cy.get('button[data-test-subj="savePanelButton"]').click();
     cy.wait(delay * 3);
     cy.get('div.react-grid-layout>div')
       .eq(1)
       .invoke('attr', 'style')
       .should('match', new RegExp('(.*)transform: translate((.*)10px)(.*)'));
-    cy.wait(delay);
   });
 
   it('Resize a visualization', () => {
-    cy.get('.euiButton__text').contains('Edit').trigger('mouseover').click();
-    cy.wait(delay);
+    cy.get('button[data-test-subj="editPanelButton"]').click();
+
     cy.get('.react-resizable-handle')
       .eq(1)
       .trigger('mousedown', { which: 1 })
       .trigger('mousemove', { clientX: 2000, clientY: 800 })
       .trigger('mouseup', { force: true });
-    cy.wait(delay);
-    cy.get('.euiButton__text').contains('Save').trigger('mouseover').click();
+
+    cy.get('button[data-test-subj="savePanelButton"]').click();
     cy.wait(delay * 3);
     cy.get('div.react-grid-layout>div').eq(1).invoke('height').should('match', new RegExp('470'));
-    cy.wait(delay);
   });
 
   it('Delete a visualization', () => {
-    cy.get('h5').contains(PPL_VISUALIZATIONS_NAMES[1]).should('exist');
-    cy.get('.euiButton__text').contains('Edit').trigger('mouseover').click();
-    cy.wait(delay);
+    cy.get('h5[data-test-subj="visualizationHeader"]')
+      .contains(PPL_VISUALIZATIONS_NAMES[1])
+      .should('exist');
+    cy.get('button[data-test-subj="editPanelButton"]').click();
+
     cy.get('.visualization-action-button > .euiIcon').eq(1).trigger('mouseover').click();
-    cy.wait(delay);
-    cy.get('.euiButton__text').contains('Save').trigger('mouseover').click();
+
+    cy.get('button[data-test-subj="savePanelButton"]').click();
     cy.wait(delay * 3);
-    cy.get('h5').contains(PPL_VISUALIZATIONS_NAMES[1]).should('not.exist');
-    cy.wait(delay);
+    cy.get('h5[data-test-subj="visualizationHeader"]')
+      .contains(PPL_VISUALIZATIONS_NAMES[1])
+      .should('not.exist');
   });
 
   it('Duplicate a visualization', () => {
-    cy.get('h5').contains(PPL_VISUALIZATIONS_NAMES[0]).should('exist');
+    cy.get('h5[data-test-subj="visualizationHeader"]')
+      .contains(PPL_VISUALIZATIONS_NAMES[0])
+      .should('exist');
     cy.get('button[aria-label="actionMenuButton"]').trigger('mouseover').click();
-    cy.get('.euiContextMenu__itemLayout > .euiContextMenuItem__text')
-      .contains('Duplicate')
-      .trigger('mouseover')
-      .click();
+    cy.get('button[data-test-subj="duplicateVizContextMenuItem"]').click();
     cy.wait(delay * 2);
     cy.get('.euiToastHeader__title').contains('successfully').should('exist');
-    cy.wait(delay);
-    cy.get('h5').eq(0).contains(PPL_VISUALIZATIONS_NAMES[0]).should('exist');
-    cy.get('h5').eq(1).contains(PPL_VISUALIZATIONS_NAMES[0]).should('exist');
-    cy.wait(delay);
+
+    cy.get('h5[data-test-subj="visualizationHeader"]')
+      .eq(0)
+      .contains(PPL_VISUALIZATIONS_NAMES[0])
+      .should('exist');
+    cy.get('h5[data-test-subj="visualizationHeader"]')
+      .eq(1)
+      .contains(PPL_VISUALIZATIONS_NAMES[0])
+      .should('exist');
   });
 
   it('Replace a visualization', () => {
-    cy.get('.visualization-action-button').eq(1).trigger('mouseover').click();
-    cy.get('.euiContextMenu__itemLayout > .euiContextMenuItem__text')
-      .contains('Replace')
-      .trigger('mouseover')
-      .click();
+    cy.get('button[aria-label="actionMenuButton"]').eq(1).click();
+    cy.get('button[data-test-subj="replaceVizContextMenuItem"]').click();
     cy.get('select').select(PPL_VISUALIZATIONS_NAMES[1]);
     cy.get('button[aria-label="refreshPreview"]').trigger('mouseover').click();
     cy.wait(delay * 3);
     cy.get('.plot-container').should('exist');
-    cy.get('.euiButton__text').contains(new RegExp('^Add$', 'g')).trigger('mouseover').click();
-    cy.wait(delay);
+    cy.get('button[data-test-subj="addFlyoutButton"]').click();
+
     cy.get('.euiToastHeader__title').contains('successfully').should('exist');
     cy.wait(delay);
-    cy.get('h5').eq(0).contains(PPL_VISUALIZATIONS_NAMES[0]).should('exist');
-    cy.get('h5').eq(1).contains(PPL_VISUALIZATIONS_NAMES[1]).should('exist');
-    cy.wait(delay);
+    cy.get('h5[data-test-subj="visualizationHeader"]')
+      .contains(PPL_VISUALIZATIONS_NAMES[0])
+      .should('exist');
+    cy.get('h5[data-test-subj="visualizationHeader"]')
+      .contains(PPL_VISUALIZATIONS_NAMES[1])
+      .should('exist');
   });
 
-  it('Create new visualization and add to panel', () => {
-    cy.get('.euiButton__text').contains('Add visualization').trigger('mouseover').click();
-    cy.wait(delay);
-    cy.get('.euiContextMenuItem__text')
-      .contains('Create new visualization')
-      .trigger('mouseover')
-      .click();
-    cy.wait(delay * 3);
+  it('add new visualization to panel', () => {
+    cy.get('button[data-test-subj="addVisualizationButton"]').eq(0).click();
+    cy.get('button[data-test-subj="createNewVizContextMenuItem"]').click();
     cy.url().should('match', new RegExp('(.*)#/event_analytics/explorer'));
+    cy.get('a[data-test-subj="eventExplorer__addNewTab"]').click();
     cy.get('[id^=autocomplete-textarea]').focus().type(PPL_VISUALIZATIONS[2], {
       delay: 50,
     });
-    cy.get('.euiButton__text').contains('Refresh').trigger('mouseover').click();
+    cy.get('button[data-test-subj="superDatePickerApplyTimeButton"]').click();
 
     supressResizeObserverIssue();
     cy.get('button[id="main-content-vis"]').contains('Visualizations').trigger('mouseover').click();
@@ -465,26 +400,32 @@ describe('Testing a panel', () => {
         delay: 50,
       });
     cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').trigger('mouseover').click();
-    cy.wait(delay);
+
     cy.get('.euiToastHeader__title').contains('successfully').should('exist');
     moveToTestPanel();
-    cy.get('h5').contains(PPL_VISUALIZATIONS_NAMES[0]).should('exist');
-    cy.get('h5').contains(PPL_VISUALIZATIONS_NAMES[1]).should('exist');
-    cy.get('h5').contains(PPL_VISUALIZATIONS_NAMES[2]).should('exist');
+    cy.get('h5[data-test-subj="visualizationHeader"]')
+      .contains(PPL_VISUALIZATIONS_NAMES[0])
+      .should('exist');
+    cy.get('h5[data-test-subj="visualizationHeader"]')
+      .contains(PPL_VISUALIZATIONS_NAMES[1])
+      .should('exist');
+    cy.get('h5[data-test-subj="visualizationHeader"]')
+      .contains(PPL_VISUALIZATIONS_NAMES[2])
+      .should('exist');
   });
 
-  it('Move to test panel and check visualization edit button', () => {
+  it('Check visualization edit button', () => {
     moveToTestPanel();
-    cy.get('h5').contains(PPL_VISUALIZATIONS_NAMES[0]).should('exist');
+    cy.get('h5[data-test-subj="visualizationHeader"]')
+      .contains(PPL_VISUALIZATIONS_NAMES[0])
+      .should('exist');
     cy.get('button[aria-label="actionMenuButton"]').eq(0).trigger('mouseover').click();
     supressResizeObserverIssue();
-    cy.get('.euiContextMenu__itemLayout > .euiContextMenuItem__text')
-      .contains('Edit')
-      .trigger('mouseover')
-      .click();
+    cy.get('button[data-test-subj="editVizContextMenuItem"]').click();
     cy.wait(delay * 3);
     cy.url().should('match', new RegExp('(.*)#/event_analytics/explorer'));
     cy.wait(delay);
+
     cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').trigger('mouseover').click();
     cy.wait(1000);
     cy.get('[data-test-subj="eventExplorer__querySaveName"]')
@@ -493,53 +434,51 @@ describe('Testing a panel', () => {
         delay: 200,
       });
     cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').trigger('mouseover').click();
-    cy.wait(delay);
+
     cy.get('.euiToastHeader__title').contains('successfully').should('exist');
     moveToTestPanel();
-    cy.get('h5').contains(NEW_VISUALIZATION_NAME).should('exist');
-    cy.get('h5').contains(PPL_VISUALIZATIONS_NAMES[1]).should('exist');
-    cy.get('h5').contains(PPL_VISUALIZATIONS_NAMES[2]).should('exist');
+    cy.get('h5[data-test-subj="visualizationHeader"]')
+      .contains(NEW_VISUALIZATION_NAME)
+      .should('exist');
+    cy.get('h5[data-test-subj="visualizationHeader"]')
+      .contains(PPL_VISUALIZATIONS_NAMES[1])
+      .should('exist');
+    cy.get('h5[data-test-subj="visualizationHeader"]')
+      .contains(PPL_VISUALIZATIONS_NAMES[2])
+      .should('exist');
   });
 });
 
 describe('Clean up all test data', () => {
-
   it('Delete visualizations from event analytics', () => {
     moveToEventsHome();
     cy.get('[data-test-subj="tablePaginationPopoverButton"]').trigger('mouseover').click();
-    cy.get('.euiContextMenuItem__text').contains('50 rows').trigger('mouseover').click();
+    cy.get('button[data-test-subj="tablePagination-50-rows"]').click();
     cy.get('.euiCheckbox__input[data-test-subj="checkboxSelectAll"]').trigger('mouseover').click();
-    cy.wait(delay);
-    cy.get('.euiButton__text').contains('Actions').trigger('mouseover').click();
-    cy.wait(delay);
-    cy.get('.euiContextMenuItem__text').contains('Delete').trigger('mouseover').click();
-    cy.wait(delay);
+    cy.get('button[data-test-subj="eventHomeAction"]').click();
+
+    cy.get('button[data-test-subj="eventHomeAction__delete"]').click();
     cy.get('button.euiButton--danger').should('be.disabled');
     cy.get('input.euiFieldText[placeholder="delete"]').focus().type('delete', {
       delay: 50,
     });
     cy.get('button.euiButton--danger').should('not.be.disabled');
-    cy.get('.euiButton__text').contains('Delete').trigger('mouseover').click();
-    cy.wait(delay);
+    cy.get('button[data-test-subj="popoverModal__deleteButton"]').click();
     cy.get('.euiTextAlign').contains('No Queries or Visualizations').should('exist');
   });
 
   it('Deletes test panel', () => {
     moveToPanelHome();
     cy.get('.euiCheckbox__input[data-test-subj="checkboxSelectAll"]').trigger('mouseover').click();
-    cy.wait(delay);
-    cy.get('.euiButton__text').contains('Actions').trigger('mouseover').click();
-    cy.wait(delay);
-    cy.get('.euiContextMenuItem__text').contains('Delete').trigger('mouseover').click();
-    cy.wait(delay);
+    cy.get('button[data-test-subj="operationalPanelsActionsButton"]').click();
+    cy.get('button[data-test-subj="deleteContextMenuItem"]').click();
     cy.get('button.euiButton--danger').should('be.disabled');
     cy.get('input.euiFieldText[placeholder="delete"]').focus().type('delete', {
       delay: 50,
     });
     cy.get('button.euiButton--danger').should('not.be.disabled');
-    cy.get('.euiButton__text').contains('Delete').trigger('mouseover').click();
+    cy.get('button[data-test-subj="popoverModal__deleteButton"]').click();
 
     cy.get('.euiTextAlign').contains('No Operational Panels').should('exist');
   });
 });
-
diff --git a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap
index 879d250c5..66fdf6c39 100644
--- a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap
+++ b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap
@@ -417,7 +417,9 @@ exports[`Panels Table Component renders empty panel table container 1`] = `
                         <div
                           className="euiTextAlign euiTextAlign--center"
                         >
-                          <h2>
+                          <h2
+                            data-test-subj="customPanels__noPanelsHome"
+                          >
                             No Operational Panels
                           </h2>
                           <EuiSpacer
diff --git a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
index ea88b57cd..ab362302d 100644
--- a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
+++ b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
@@ -136,6 +136,7 @@ exports[`Panels View Component renders panel view container with visualizations
                     >
                       <h1
                         className="euiTitle euiTitle--large"
+                        data-test-subj="panelNameHeader"
                       />
                     </EuiTitle>
                     <EuiFlexItem>
@@ -170,12 +171,14 @@ exports[`Panels View Component renders panel view container with visualizations
                             className="euiFlexItem"
                           >
                             <EuiButton
+                              data-test-subj="editPanelButton"
                               disabled={true}
                               iconType="pencil"
                               onClick={[Function]}
                             >
                               <EuiButtonDisplay
                                 baseClassName="euiButton"
+                                data-test-subj="editPanelButton"
                                 disabled={true}
                                 element="button"
                                 iconType="pencil"
@@ -185,6 +188,7 @@ exports[`Panels View Component renders panel view container with visualizations
                               >
                                 <button
                                   className="euiButton euiButton--primary euiButton-isDisabled"
+                                  data-test-subj="editPanelButton"
                                   disabled={true}
                                   onClick={[Function]}
                                   style={
@@ -259,6 +263,7 @@ exports[`Panels View Component renders panel view container with visualizations
                               anchorPosition="downCenter"
                               button={
                                 <EuiButton
+                                  data-test-subj="panelActionContextMenu"
                                   disabled={false}
                                   iconSide="right"
                                   iconType="arrowDown"
@@ -283,6 +288,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                   className="euiPopover__anchor"
                                 >
                                   <EuiButton
+                                    data-test-subj="panelActionContextMenu"
                                     disabled={false}
                                     iconSide="right"
                                     iconType="arrowDown"
@@ -290,6 +296,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                   >
                                     <EuiButtonDisplay
                                       baseClassName="euiButton"
+                                      data-test-subj="panelActionContextMenu"
                                       disabled={false}
                                       element="button"
                                       iconSide="right"
@@ -300,6 +307,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                     >
                                       <button
                                         className="euiButton euiButton--primary"
+                                        data-test-subj="panelActionContextMenu"
                                         disabled={false}
                                         onClick={[Function]}
                                         style={
@@ -1770,6 +1778,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                     >
                       <h1
                         className="euiTitle euiTitle--large"
+                        data-test-subj="panelNameHeader"
                       />
                     </EuiTitle>
                     <EuiFlexItem>
@@ -1804,12 +1813,14 @@ exports[`Panels View Component renders panel view container without visualizatio
                             className="euiFlexItem"
                           >
                             <EuiButton
+                              data-test-subj="editPanelButton"
                               disabled={true}
                               iconType="pencil"
                               onClick={[Function]}
                             >
                               <EuiButtonDisplay
                                 baseClassName="euiButton"
+                                data-test-subj="editPanelButton"
                                 disabled={true}
                                 element="button"
                                 iconType="pencil"
@@ -1819,6 +1830,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                               >
                                 <button
                                   className="euiButton euiButton--primary euiButton-isDisabled"
+                                  data-test-subj="editPanelButton"
                                   disabled={true}
                                   onClick={[Function]}
                                   style={
@@ -1889,6 +1901,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                               anchorPosition="downCenter"
                               button={
                                 <EuiButton
+                                  data-test-subj="panelActionContextMenu"
                                   disabled={false}
                                   iconSide="right"
                                   iconType="arrowDown"
@@ -1913,6 +1926,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                   className="euiPopover__anchor"
                                 >
                                   <EuiButton
+                                    data-test-subj="panelActionContextMenu"
                                     disabled={false}
                                     iconSide="right"
                                     iconType="arrowDown"
@@ -1920,6 +1934,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                   >
                                     <EuiButtonDisplay
                                       baseClassName="euiButton"
+                                      data-test-subj="panelActionContextMenu"
                                       disabled={false}
                                       element="button"
                                       iconSide="right"
@@ -1930,6 +1945,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                     >
                                       <button
                                         className="euiButton euiButton--primary"
+                                        data-test-subj="panelActionContextMenu"
                                         disabled={false}
                                         onClick={[Function]}
                                         style={
diff --git a/public/components/custom_panels/custom_panel_table.tsx b/public/components/custom_panels/custom_panel_table.tsx
index a2c7ce8d6..08ca2afef 100644
--- a/public/components/custom_panels/custom_panel_table.tsx
+++ b/public/components/custom_panels/custom_panel_table.tsx
@@ -212,6 +212,7 @@ export const CustomPanelTable = ({
   const popoverItems: ReactElement[] = [
     <EuiContextMenuItem
       key="rename"
+      data-test-subj="renameContextMenuItem"
       disabled={customPanels.length === 0 || selectedCustomPanels.length !== 1}
       onClick={() => {
         setIsActionsPopoverOpen(false);
@@ -222,6 +223,7 @@ export const CustomPanelTable = ({
     </EuiContextMenuItem>,
     <EuiContextMenuItem
       key="duplicate"
+      data-test-subj="duplicateContextMenuItem"
       disabled={customPanels.length === 0 || selectedCustomPanels.length !== 1}
       onClick={() => {
         setIsActionsPopoverOpen(false);
@@ -376,7 +378,7 @@ export const CustomPanelTable = ({
               <>
                 <EuiSpacer size="xxl" />
                 <EuiText textAlign="center">
-                  <h2>No Operational Panels</h2>
+                  <h2 data-test-subj="customPanels__noPanelsHome">No Operational Panels</h2>
                   <EuiSpacer size="m" />
                   <EuiText color="subdued">
                     Use operational panels to dive deeper into observability
diff --git a/public/components/custom_panels/custom_panel_view.tsx b/public/components/custom_panels/custom_panel_view.tsx
index bf83eec69..41766d4bd 100644
--- a/public/components/custom_panels/custom_panel_view.tsx
+++ b/public/components/custom_panels/custom_panel_view.tsx
@@ -406,19 +406,29 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
   };
 
   const cancelButton = (
-    <EuiButton iconType="cross" color="danger" onClick={() => editPanel('cancel')}>
+    <EuiButton
+      data-test-subj="cancelPanelButton"
+      iconType="cross"
+      color="danger"
+      onClick={() => editPanel('cancel')}
+    >
       Cancel
     </EuiButton>
   );
 
   const saveButton = (
-    <EuiButton iconType="save" onClick={() => editPanel('save')}>
+    <EuiButton data-test-subj="savePanelButton" iconType="save" onClick={() => editPanel('save')}>
       Save
     </EuiButton>
   );
 
   const editButton = (
-    <EuiButton iconType="pencil" onClick={() => editPanel('edit')} disabled={editDisabled}>
+    <EuiButton
+      data-test-subj="editPanelButton"
+      iconType="pencil"
+      onClick={() => editPanel('edit')}
+      disabled={editDisabled}
+    >
       Edit
     </EuiButton>
   );
@@ -437,6 +447,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
   // Panel Actions Button
   const panelActionsButton = (
     <EuiButton
+      data-test-subj="panelActionContextMenu"
       iconType="arrowDown"
       iconSide="right"
       onClick={() => setPanelsMenuPopover(true)}
@@ -478,6 +489,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
       items: [
         {
           name: 'Reload panel',
+          'data-test-subj': 'reloadPanelContextMenuItem',
           onClick: () => {
             setPanelsMenuPopover(false);
             fetchCustomPanel();
@@ -485,6 +497,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
         },
         {
           name: 'Rename panel',
+          'data-test-subj': 'renamePanelContextMenuItem',
           onClick: () => {
             setPanelsMenuPopover(false);
             renamePanel();
@@ -492,6 +505,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
         },
         {
           name: 'Duplicate panel',
+          'data-test-subj': 'duplicatePanelContextMenuItem',
           onClick: () => {
             setPanelsMenuPopover(false);
             clonePanel();
@@ -499,6 +513,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
         },
         {
           name: 'Delete panel',
+          'data-test-subj': 'deletePanelContextMenuItem',
           onClick: () => {
             setPanelsMenuPopover(false);
             deletePanel();
@@ -550,7 +565,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
               <>
                 <EuiPageHeaderSection>
                   <EuiTitle size="l">
-                    <h1>{openPanelName}</h1>
+                    <h1 data-test-subj="panelNameHeader">{openPanelName}</h1>
                   </EuiTitle>
                   <EuiFlexItem>
                     <EuiSpacer size="s" />
diff --git a/public/components/custom_panels/helpers/add_visualization_popover.tsx b/public/components/custom_panels/helpers/add_visualization_popover.tsx
index b59b1c43d..4dac54ab3 100644
--- a/public/components/custom_panels/helpers/add_visualization_popover.tsx
+++ b/public/components/custom_panels/helpers/add_visualization_popover.tsx
@@ -38,6 +38,7 @@ export const AddVisualizationPopover = ({
         items: [
           {
             name: 'Select existing visualization',
+            'data-test-subj': 'selectExistingVizContextMenuItem',
             onClick: () => {
               if (closeVizPopover != null) {
                 closeVizPopover();
@@ -47,6 +48,7 @@ export const AddVisualizationPopover = ({
           },
           {
             name: 'Create new visualization',
+            'data-test-subj': 'createNewVizContextMenuItem',
             onClick: () => {
               advancedVisualization();
             },
diff --git a/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap b/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap
index 76c430d1a..778d6e167 100644
--- a/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap
+++ b/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap
@@ -73,6 +73,7 @@ exports[`Visualization Container Component renders add visualization container 1
                         onMouseOver={[Function]}
                       >
                         <h5
+                          data-test-subj="visualizationHeader"
                           onBlur={[Function]}
                           onFocus={[Function]}
                         />
@@ -90,12 +91,14 @@ exports[`Visualization Container Component renders add visualization container 1
                 className="euiFlexItem euiFlexItem--flexGrowZero visualization-action-button"
               >
                 <EuiIcon
+                  data-test-subj="removeVisualizationButton"
                   onClick={[Function]}
                   type="crossInACircleFilled"
                 >
                   <EuiIconEmpty
                     aria-hidden={true}
                     className="euiIcon euiIcon--medium euiIcon-isLoading"
+                    data-test-subj="removeVisualizationButton"
                     focusable="false"
                     onClick={[Function]}
                     role="img"
@@ -104,6 +107,7 @@ exports[`Visualization Container Component renders add visualization container 1
                     <svg
                       aria-hidden={true}
                       className="euiIcon euiIcon--medium euiIcon-isLoading"
+                      data-test-subj="removeVisualizationButton"
                       focusable="false"
                       height={16}
                       onClick={[Function]}
diff --git a/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx b/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx
index 6d6001fee..986411c23 100644
--- a/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx
+++ b/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx
@@ -95,7 +95,6 @@ export const VisualizationContainer = ({
   spanParam,
 }: Props) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  const [disablePopover, setDisablePopover] = useState(false);
   const [visualizationTitle, setVisualizationTitle] = useState('');
   const [visualizationType, setVisualizationType] = useState('');
   const [visualizationMetaData, setVisualizationMetaData] = useState();
@@ -166,7 +165,7 @@ export const VisualizationContainer = ({
     <EuiContextMenuItem
       data-test-subj="editVizContextMenuItem"
       key="Edit"
-      disabled={disablePopover}
+      disabled={editMode}
       onClick={() => {
         closeActionsMenu();
         onEditClick(savedVisualizationId);
@@ -176,7 +175,8 @@ export const VisualizationContainer = ({
     </EuiContextMenuItem>,
     <EuiContextMenuItem
       key="Replace"
-      disabled={disablePopover}
+      data-test-subj="replaceVizContextMenuItem"
+      disabled={editMode}
       onClick={() => {
         closeActionsMenu();
         showFlyout(true, visualizationId);
@@ -186,7 +186,8 @@ export const VisualizationContainer = ({
     </EuiContextMenuItem>,
     <EuiContextMenuItem
       key="Duplicate"
-      disabled={disablePopover}
+      data-test-subj="duplicateVizContextMenuItem"
+      disabled={editMode}
       onClick={() => {
         closeActionsMenu();
         cloneVisualization(visualizationTitle, savedVisualizationId);
@@ -196,11 +197,11 @@ export const VisualizationContainer = ({
     </EuiContextMenuItem>,
   ];
 
-  let showModelPanel = [
+  const showModelPanel = [
     <EuiContextMenuItem
       data-test-subj="showCatalogPPLQuery"
       key="view_query"
-      disabled={disablePopover}
+      disabled={editMode}
       onClick={() => {
         closeActionsMenu();
         showModal('catalogModal');
@@ -286,10 +287,6 @@ export const VisualizationContainer = ({
     loadVisaulization();
   }, [onRefresh]);
 
-  useEffect(() => {
-    editMode ? setDisablePopover(true) : setDisablePopover(false);
-  }, [editMode]);
-
   return (
     <>
       <EuiPanel
@@ -306,13 +303,14 @@ export const VisualizationContainer = ({
             >
               <EuiText grow={false} className="panels-title-text">
                 <EuiToolTip delay="long" position="top" content={visualizationTitle}>
-                  <h5>{visualizationTitle}</h5>
+                  <h5 data-test-subj="visualizationHeader">{visualizationTitle}</h5>
                 </EuiToolTip>
               </EuiText>
             </EuiFlexItem>
             <EuiFlexItem grow={false} className="visualization-action-button">
-              {disablePopover ? (
+              {editMode ? (
                 <EuiIcon
+                  data-test-subj="removeVisualizationButton"
                   type="crossInACircleFilled"
                   onClick={() => {
                     removeVisualization(visualizationId);
diff --git a/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap b/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap
index 3c4bda7a0..6b9d3e801 100644
--- a/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap
+++ b/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap
@@ -50,6 +50,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
             grow={false}
           >
             <EuiButton
+              data-test-subj="closeFlyoutButton"
               onClick={[MockFunction]}
             >
               Cancel
@@ -59,6 +60,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
             grow={false}
           >
             <EuiButton
+              data-test-subj="addFlyoutButton"
               fill={true}
               onClick={[Function]}
             >
@@ -189,6 +191,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                         >
                           <button
                             class="euiButton euiButton--primary"
+                            data-test-subj="closeFlyoutButton"
                             type="button"
                           >
                             <span
@@ -207,6 +210,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                         >
                           <button
                             class="euiButton euiButton--primary euiButton--fill"
+                            data-test-subj="addFlyoutButton"
                             type="button"
                           >
                             <span
@@ -399,6 +403,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                 >
                                   <button
                                     class="euiButton euiButton--primary"
+                                    data-test-subj="closeFlyoutButton"
                                     type="button"
                                   >
                                     <span
@@ -417,6 +422,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                 >
                                   <button
                                     class="euiButton euiButton--primary euiButton--fill"
+                                    data-test-subj="addFlyoutButton"
                                     type="button"
                                   >
                                     <span
@@ -541,6 +547,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                   >
                                     <button
                                       class="euiButton euiButton--primary"
+                                      data-test-subj="closeFlyoutButton"
                                       type="button"
                                     >
                                       <span
@@ -559,6 +566,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                   >
                                     <button
                                       class="euiButton euiButton--primary euiButton--fill"
+                                      data-test-subj="addFlyoutButton"
                                       type="button"
                                     >
                                       <span
@@ -683,6 +691,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                     >
                                       <button
                                         class="euiButton euiButton--primary"
+                                        data-test-subj="closeFlyoutButton"
                                         type="button"
                                       >
                                         <span
@@ -701,6 +710,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                     >
                                       <button
                                         class="euiButton euiButton--primary euiButton--fill"
+                                        data-test-subj="addFlyoutButton"
                                         type="button"
                                       >
                                         <span
@@ -813,6 +823,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                       >
                                         <button
                                           class="euiButton euiButton--primary"
+                                          data-test-subj="closeFlyoutButton"
                                           type="button"
                                         >
                                           <span
@@ -831,6 +842,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                       >
                                         <button
                                           class="euiButton euiButton--primary euiButton--fill"
+                                          data-test-subj="addFlyoutButton"
                                           type="button"
                                         >
                                           <span
@@ -1041,10 +1053,12 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                         className="euiFlexItem euiFlexItem--flexGrowZero"
                                       >
                                         <EuiButton
+                                          data-test-subj="closeFlyoutButton"
                                           onClick={[MockFunction]}
                                         >
                                           <EuiButtonDisplay
                                             baseClassName="euiButton"
+                                            data-test-subj="closeFlyoutButton"
                                             disabled={false}
                                             element="button"
                                             isDisabled={false}
@@ -1053,6 +1067,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                           >
                                             <button
                                               className="euiButton euiButton--primary"
+                                              data-test-subj="closeFlyoutButton"
                                               disabled={false}
                                               onClick={[MockFunction]}
                                               style={
@@ -1093,11 +1108,13 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                         className="euiFlexItem euiFlexItem--flexGrowZero"
                                       >
                                         <EuiButton
+                                          data-test-subj="addFlyoutButton"
                                           fill={true}
                                           onClick={[Function]}
                                         >
                                           <EuiButtonDisplay
                                             baseClassName="euiButton"
+                                            data-test-subj="addFlyoutButton"
                                             disabled={false}
                                             element="button"
                                             fill={true}
@@ -1107,6 +1124,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                           >
                                             <button
                                               className="euiButton euiButton--primary euiButton--fill"
+                                              data-test-subj="addFlyoutButton"
                                               disabled={false}
                                               onClick={[Function]}
                                               style={
@@ -1277,6 +1295,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
             grow={false}
           >
             <EuiButton
+              data-test-subj="closeFlyoutButton"
               onClick={[MockFunction]}
             >
               Cancel
@@ -1286,6 +1305,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
             grow={false}
           >
             <EuiButton
+              data-test-subj="addFlyoutButton"
               fill={true}
               onClick={[Function]}
             >
@@ -1420,6 +1440,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                         >
                           <button
                             class="euiButton euiButton--primary"
+                            data-test-subj="closeFlyoutButton"
                             type="button"
                           >
                             <span
@@ -1438,6 +1459,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                         >
                           <button
                             class="euiButton euiButton--primary euiButton--fill"
+                            data-test-subj="addFlyoutButton"
                             type="button"
                           >
                             <span
@@ -1634,6 +1656,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                 >
                                   <button
                                     class="euiButton euiButton--primary"
+                                    data-test-subj="closeFlyoutButton"
                                     type="button"
                                   >
                                     <span
@@ -1652,6 +1675,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                 >
                                   <button
                                     class="euiButton euiButton--primary euiButton--fill"
+                                    data-test-subj="addFlyoutButton"
                                     type="button"
                                   >
                                     <span
@@ -1780,6 +1804,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                   >
                                     <button
                                       class="euiButton euiButton--primary"
+                                      data-test-subj="closeFlyoutButton"
                                       type="button"
                                     >
                                       <span
@@ -1798,6 +1823,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                   >
                                     <button
                                       class="euiButton euiButton--primary euiButton--fill"
+                                      data-test-subj="addFlyoutButton"
                                       type="button"
                                     >
                                       <span
@@ -1926,6 +1952,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                     >
                                       <button
                                         class="euiButton euiButton--primary"
+                                        data-test-subj="closeFlyoutButton"
                                         type="button"
                                       >
                                         <span
@@ -1944,6 +1971,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                     >
                                       <button
                                         class="euiButton euiButton--primary euiButton--fill"
+                                        data-test-subj="addFlyoutButton"
                                         type="button"
                                       >
                                         <span
@@ -2060,6 +2088,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                       >
                                         <button
                                           class="euiButton euiButton--primary"
+                                          data-test-subj="closeFlyoutButton"
                                           type="button"
                                         >
                                           <span
@@ -2078,6 +2107,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                       >
                                         <button
                                           class="euiButton euiButton--primary euiButton--fill"
+                                          data-test-subj="addFlyoutButton"
                                           type="button"
                                         >
                                           <span
@@ -2292,10 +2322,12 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                         className="euiFlexItem euiFlexItem--flexGrowZero"
                                       >
                                         <EuiButton
+                                          data-test-subj="closeFlyoutButton"
                                           onClick={[MockFunction]}
                                         >
                                           <EuiButtonDisplay
                                             baseClassName="euiButton"
+                                            data-test-subj="closeFlyoutButton"
                                             disabled={false}
                                             element="button"
                                             isDisabled={false}
@@ -2304,6 +2336,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                           >
                                             <button
                                               className="euiButton euiButton--primary"
+                                              data-test-subj="closeFlyoutButton"
                                               disabled={false}
                                               onClick={[MockFunction]}
                                               style={
@@ -2344,11 +2377,13 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                         className="euiFlexItem euiFlexItem--flexGrowZero"
                                       >
                                         <EuiButton
+                                          data-test-subj="addFlyoutButton"
                                           fill={true}
                                           onClick={[Function]}
                                         >
                                           <EuiButtonDisplay
                                             baseClassName="euiButton"
+                                            data-test-subj="addFlyoutButton"
                                             disabled={false}
                                             element="button"
                                             fill={true}
@@ -2358,6 +2393,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                           >
                                             <button
                                               className="euiButton euiButton--primary euiButton--fill"
+                                              data-test-subj="addFlyoutButton"
                                               disabled={false}
                                               onClick={[Function]}
                                               style={
diff --git a/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx b/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx
index 3c999e52c..db31f0d71 100644
--- a/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx
+++ b/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx
@@ -319,10 +319,12 @@ export const VisaulizationFlyout = ({
     <EuiFlyoutFooter>
       <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
-          <EuiButton onClick={closeFlyout}>Cancel</EuiButton>
+          <EuiButton data-test-subj="closeFlyoutButton" onClick={closeFlyout}>
+            Cancel
+          </EuiButton>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton onClick={addVisualization} fill>
+          <EuiButton data-test-subj="addFlyoutButton" onClick={addVisualization} fill>
             Add
           </EuiButton>
         </EuiFlexItem>
diff --git a/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap b/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap
index e03336e60..381df4aae 100644
--- a/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap
+++ b/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap
@@ -570,6 +570,7 @@ exports[`Metrics Grid Component renders Metrics Grid Component 1`] = `
                                         onMouseOver={[Function]}
                                       >
                                         <h5
+                                          data-test-subj="visualizationHeader"
                                           onBlur={[Function]}
                                           onFocus={[Function]}
                                         />
@@ -819,6 +820,7 @@ exports[`Metrics Grid Component renders Metrics Grid Component 1`] = `
                                         onMouseOver={[Function]}
                                       >
                                         <h5
+                                          data-test-subj="visualizationHeader"
                                           onBlur={[Function]}
                                           onFocus={[Function]}
                                         />
@@ -1069,6 +1071,7 @@ exports[`Metrics Grid Component renders Metrics Grid Component 1`] = `
                                         onMouseOver={[Function]}
                                       >
                                         <h5
+                                          data-test-subj="visualizationHeader"
                                           onBlur={[Function]}
                                           onFocus={[Function]}
                                         >