Plugin E2E: Click on panel menu items

packages/plugin-e2e/src/e2e-selectors/types.ts

@@ -47,6 +47,8 @@ export type Components = {
       status: (status: string) => string;
       toggleTableViewPanel: (title: string) => string;
       PanelDataErrorMessage: string;
+      menuItems: (item: string) => string;
+      menu: (title: string) => string;
     };
     Visualization: {
       Table: {
@@ -59,6 +61,11 @@ export type Components = {
   VizLegend: {
     seriesName: (name: string) => string;
   };
+  Drawer: {
+    General: {
+      title: (title: string) => string;
+    };
+  };
   PanelEditor: {
     General: {
       content: string;

packages/plugin-e2e/src/e2e-selectors/versioned/components.ts

@@ -61,6 +61,8 @@ export const versionedComponents = {
       PanelDataErrorMessage: {
         '10.4.0': 'data-testid Panel data error message',
       },
+      menuItems: { '9.5.0': (item: string) => `data-testid Panel menu item ${item}` },
+      menu: { '9.5.0': (item: string) => `data-testid Panel menu ${item}` },
     },
     Visualization: {
       Table: {
@@ -82,6 +84,13 @@ export const versionedComponents = {
       [MIN_GRAFANA_VERSION]: (name: string) => `VizLegend series ${name}`,
     },
   },
+  Drawer: {
+    General: {
+      title: {
+        [MIN_GRAFANA_VERSION]: (title: string) => `Drawer title ${title}`,
+      },
+    },
+  },
   PanelEditor: {
     General: {
       content: {

packages/plugin-e2e/src/models/components/Panel.ts

@@ -32,6 +32,33 @@ export class Panel extends GrafanaPage {
     return panel.locator('[role="cell"]');
   }
 
+  /**
+   * Click on a menu item in the panel menu.
+   *
+   * Pass options.parentItem to specify the parent item of the menu item to click.
+   */
+  async clickOnMenuItem(item: string, options?: { parentItem?: string }): Promise<void> {
+    let panelMenu = this.getByGrafanaSelector(this.ctx.selectors.components.Panels.Panel.menu(''), {
+      startsWith: true,
+      root: this.locator,
+    });
+    let parentMenuItem = this.getByGrafanaSelector(
+      this.ctx.selectors.components.Panels.Panel.menuItems(options?.parentItem ?? '')
+    );
+    let menuItem = this.getByGrafanaSelector(this.ctx.selectors.components.Panels.Panel.menuItems(item));
+
+    // before 9.5.0, there were no proper selectors for the panel menu items
+    if (semver.lt(this.ctx.grafanaVersion, '9.5.0')) {
+      panelMenu = this.locator.getByRole('heading');
+      this.ctx.page.locator(`[aria-label="Panel header item ${options?.parentItem}"]`);
+      this.ctx.page.locator(`[aria-label="Panel header item ${item}"]`);
+    }
+
+    await panelMenu.click({ force: true });
+    options?.parentItem && parentMenuItem.hover();
+    await menuItem.click();
+  }
+
   /**
    * Returns the locator for the panel error (if any)
    */

packages/plugin-e2e/src/models/pages/DashboardPage.ts

@@ -53,9 +53,7 @@ export class DashboardPage extends GrafanaPage {
    * await expect(panel.fieldNames).toContainText(['time', 'temperature']);
    */
   getPanelByTitle(title: string): Panel {
-    let locator = this.getByGrafanaSelector(this.ctx.selectors.components.Panels.Panel.title(title), {
-      startsWith: true,
-    });
+    let locator = this.getByGrafanaSelector(this.ctx.selectors.components.Panels.Panel.title(title));
     // in older versions, the panel selector is added to a child element, so we need to go up two levels to get the wrapper
     if (semver.lt(this.ctx.grafanaVersion, '9.5.0')) {
       locator = locator.locator('..').locator('..');

packages/plugin-e2e/tests/as-admin-user/panel/panelMenu.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '../../../src';
+
+test('click on menu item', async ({ readProvisionedDashboard, gotoDashboardPage, page }) => {
+  const dashboard = await readProvisionedDashboard({ fileName: 'redshift.json' });
+  const dashboardPage = await gotoDashboardPage(dashboard);
+  const panel = await dashboardPage.getPanelByTitle('Basic table example');
+  await panel.clickOnMenuItem('Edit');
+  await expect(page).toHaveURL(/.*editPanel=.*/);
+});
+
+test('click on sub menu item', async ({ readProvisionedDashboard, gotoDashboardPage, page, selectors }) => {
+  const dashboard = await readProvisionedDashboard({ fileName: 'redshift.json' });
+  const dashboardPage = await gotoDashboardPage(dashboard);
+  const panel = await dashboardPage.getPanelByTitle('Basic table example');
+  await panel.clickOnMenuItem('Query', { parentItem: 'Inspect' });
+  await expect(
+    dashboardPage.getByGrafanaSelector(selectors.components.Drawer.General.title(''), { startsWith: true })
+  ).toBeVisible();
+});