diff --git a/e2e/panels-suite/panelEdit_base.spec.ts b/e2e/panels-suite/panelEdit_base.spec.ts
index 2ae5daa1cd2..d24a2fe5dac 100644
--- a/e2e/panels-suite/panelEdit_base.spec.ts
+++ b/e2e/panels-suite/panelEdit_base.spec.ts
@@ -17,7 +17,7 @@ e2e.scenario({
     e2e.flows.openDashboard({ uid: 'TkZXxlNG3' });
     e2e().wait('@query');
 
-    e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Edit, PANEL_UNDER_TEST, true);
+    e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Edit, PANEL_UNDER_TEST);
 
     // New panel editor opens when navigating from Panel menu
     e2e.components.PanelEditor.General.content().should('be.visible');
diff --git a/e2e/various-suite/inspect-drawer.spec.ts b/e2e/various-suite/inspect-drawer.spec.ts
index e8ce12099b6..155f1c7cd12 100644
--- a/e2e/various-suite/inspect-drawer.spec.ts
+++ b/e2e/various-suite/inspect-drawer.spec.ts
@@ -37,7 +37,7 @@ e2e.scenario({
     e2e.flows.openDashboard({ uid: 'wfTJJL5Wz' });
 
     // testing opening inspect drawer directly by clicking on Inspect in header menu
-    e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Inspect, PANEL_UNDER_TEST, true);
+    e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Inspect, PANEL_UNDER_TEST);
 
     expectDrawerTabsAndContent();
 
@@ -49,7 +49,7 @@ e2e.scenario({
     expectSubMenuScenario('Query');
     expectSubMenuScenario('Panel JSON', 'JSON');
 
-    e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Edit, PANEL_UNDER_TEST, true);
+    e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Edit, PANEL_UNDER_TEST);
 
     e2e.components.QueryTab.queryInspectorButton().should('be.visible').click();
 
diff --git a/packages/grafana-e2e/src/flows/openPanelMenuItem.ts b/packages/grafana-e2e/src/flows/openPanelMenuItem.ts
index 7a08cd9440f..1ccd5206826 100644
--- a/packages/grafana-e2e/src/flows/openPanelMenuItem.ts
+++ b/packages/grafana-e2e/src/flows/openPanelMenuItem.ts
@@ -7,26 +7,51 @@ export enum PanelMenuItems {
   Extensions = 'Extensions',
 }
 
-export const openPanelMenuItem = (menu: PanelMenuItems, panelTitle = 'Panel Title', isReactPanel = false) => {
+export const openPanelMenuItem = (menu: PanelMenuItems, panelTitle = 'Panel Title') => {
   // we changed the way we open the panel menu in react panels with the new panel header
-  if (isReactPanel) {
-    e2e.components.Panels.Panel.menu(panelTitle).click({ force: true }); // force click because menu is hidden and show on hover
-    e2e.components.Panels.Panel.menuItems(menu).should('be.visible').click();
-  } else {
-    // this is the old way of opening the panel menu from the title
-    e2e.components.Panels.Panel.title(panelTitle).should('be.visible').click();
-    e2e.components.Panels.Panel.headerItems(menu).should('be.visible').click();
-  }
+  detectPanelType(panelTitle, (isAngularPanel) => {
+    if (isAngularPanel) {
+      e2e.components.Panels.Panel.title(panelTitle).should('be.visible').click();
+      e2e.components.Panels.Panel.headerItems(menu).should('be.visible').click();
+    } else {
+      e2e.components.Panels.Panel.menu(panelTitle).click({ force: true }); // force click because menu is hidden and show on hover
+      e2e.components.Panels.Panel.menuItems(menu).should('be.visible').click();
+    }
+  });
 };
 
 export const openPanelMenuExtension = (extensionTitle: string, panelTitle = 'Panel Title') => {
-  e2e.components.Panels.Panel.title(panelTitle).should('be.visible').click();
-
-  e2e.components.Panels.Panel.headerItems(PanelMenuItems.Extensions)
-    .should('be.visible')
-    .parent()
-    .parent()
-    .invoke('addClass', 'open');
-
-  e2e.components.Panels.Panel.headerItems(extensionTitle).should('be.visible').click();
+  const menuItem = PanelMenuItems.Extensions;
+  // we changed the way we open the panel menu in react panels with the new panel header
+  detectPanelType(panelTitle, (isAngularPanel) => {
+    if (isAngularPanel) {
+      e2e.components.Panels.Panel.title(panelTitle).should('be.visible').click();
+      e2e.components.Panels.Panel.headerItems(menuItem)
+        .should('be.visible')
+        .parent()
+        .parent()
+        .invoke('addClass', 'open');
+      e2e.components.Panels.Panel.headerItems(extensionTitle).should('be.visible').click();
+    } else {
+      e2e.components.Panels.Panel.menu(panelTitle).click({ force: true }); // force click because menu is hidden and show on hover
+      e2e.components.Panels.Panel.menuItems(menuItem).trigger('mouseover', { force: true });
+      e2e.components.Panels.Panel.menuItems(extensionTitle).click({ force: true });
+    }
+  });
 };
+
+function detectPanelType(panelTitle: string, detected: (isAngularPanel: boolean) => void) {
+  e2e.components.Panels.Panel.title(panelTitle).then((el) => {
+    const isAngularPanel = el.find('plugin-component.ng-scope').length > 0;
+
+    if (isAngularPanel) {
+      Cypress.log({
+        name: 'detectPanelType',
+        displayName: 'detector',
+        message: 'Angular panel detected, will use legacy selectors.',
+      });
+    }
+
+    detected(isAngularPanel);
+  });
+}
diff --git a/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx b/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx
index e1c76ff94cf..fd1ceed7030 100644
--- a/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx
@@ -197,7 +197,11 @@ export class PanelChromeAngularUnconnected extends PureComponent<Props, State> {
     });
 
     return (
-      <div className={containerClassNames} aria-label={selectors.components.Panels.Panel.containerByTitle(panel.title)}>
+      <div
+        className={containerClassNames}
+        data-testid={selectors.components.Panels.Panel.title(panel.title)}
+        aria-label={selectors.components.Panels.Panel.containerByTitle(panel.title)}
+      >
         <PanelHeader
           panel={panel}
           dashboard={dashboard}