PMM-14544 new navigation tests

e2e_tests/eslint.config.mjs

@@ -280,6 +280,7 @@ export default defineConfig([
             'verifyQanStoredMetricsHaveData',
             'verifyTotalQueryCount',
             'verifyRTAAgentStatus',
+            'verifyAllMenuItems',
           ],
         },
       ],

e2e_tests/fixtures/pmmTest.ts

@@ -11,6 +11,7 @@ import ThemePage from '@pages/theme.page';
 import TourPage from '@pages/tour.page';
 import WelcomePage from '@pages/welcome.page';
 import Mocks from '@helpers/mocks.helper';
+import LeftNavigation from '@pages/navigation.page';
 import ServicesPage from '@pages/inventory/services.page';
 import AgentsPage from '@pages/inventory/agents.page';
 import PortalRemoval from '@pages/portalRemoval.page';
@@ -35,6 +36,7 @@ const pmmTest = base.extend<{
   tour: TourPage;
   welcomePage: WelcomePage;
   mocks: Mocks;
+  leftNavigation: LeftNavigation;
   portalRemoval: PortalRemoval;
   queryAnalytics: QueryAnalytics;
   nodesPage: NodesPage;
@@ -98,6 +100,11 @@ const pmmTest = base.extend<{
 
     await use(helpPage);
   },
+  leftNavigation: async ({ page }, use) => {
+    const leftNavigation = new LeftNavigation(page);
+
+    await use(leftNavigation);
+  },
   mocks: async ({ page }, use) => {
     const mocks = new Mocks(page);
 

e2e_tests/helpers/grafana.helper.ts

@@ -17,6 +17,21 @@ export default class GrafanaHelper {
     return this.page;
   };
 
+  createUser = async (username: string, password: string) => {
+    const authToken = GrafanaHelper.getToken();
+    const response = await this.page.request.post('graph/api/admin/users', {
+      data: {
+        login: username,
+        name: username,
+        OrgId: 1,
+        password: password,
+      },
+      headers: { Authorization: `Basic ${authToken}` },
+    });
+
+    return response;
+  };
+
   static getAuthHeader = (username = 'admin', password = process.env.ADMIN_PASSWORD || 'admin') => ({
     Authorization: `Basic ${this.getToken(username, password)}`,
   });

e2e_tests/pages/base.page.ts

@@ -1,13 +1,79 @@
-import { Page, Locator } from '@playwright/test';
+import { expect, Page, Locator } from '@playwright/test';
+import { Timeouts } from '@helpers/timeouts';
+
+export type DropdownName = 'Service Name' | 'Node Name';
+
+export interface NestedLocators {
+  [key: string]: NestedLocator | boolean | undefined;
+  locator?: Locator;
+  verifyTimeRange?: boolean;
+}
+
+export type NestedLocator = Locator | NestedLocators;
+export type NestedLocatorMap = Record<string, NestedLocator>;
 
 export default abstract class BasePage {
   abstract builders: Record<string, (...args: string[]) => Locator>;
-  abstract buttons: Record<string, Locator>;
+  abstract buttons: NestedLocatorMap;
   abstract elements: Record<string, Locator>;
   abstract inputs: Record<string, Locator>;
   abstract messages: Record<string, Locator>;
 
   constructor(protected page: Page) {}
 
+  duplicateCurrentPage = async (): Promise<Page> => {
+    const url = this.page.url();
+    const newPage = await this.page.context().newPage();
+
+    await newPage.goto(url);
+    await newPage.locator('#grafana-iframe').waitFor({ state: 'visible' });
+    this.page = newPage;
+
+    return newPage;
+  };
+
   protected grafanaIframe = () => this.page.frameLocator('//*[@id="grafana-iframe"]');
+
+  selectTimeRange = async (timeRange: string): Promise<void> => {
+    await this.elements.timePickerOpenButton.click();
+
+    const timeRangeOption = this.grafanaIframe().locator(`//*[contains(text(), "${timeRange}")]`);
+
+    await timeRangeOption.click();
+  };
+
+  selectVariableValue = async (dropDownName: DropdownName, dropDownValue?: string): Promise<string> => {
+    const frame = this.grafanaIframe();
+    const wrapper = frame.getByTestId('data-testid template variable').filter({ hasText: dropDownName });
+    const combobox = wrapper.getByRole('combobox');
+
+    await combobox.click();
+
+    const options = frame.getByRole('option');
+
+    await options.nth(1).waitFor({
+      state: 'visible',
+      timeout: Timeouts.TEN_SECONDS,
+    });
+
+    const valueToSelect = dropDownValue
+      ? options.filter({
+          hasText: new RegExp(`^${dropDownValue}$`, 'i'),
+        })
+      : options.filter({
+          hasText: /^(?!All$).+/i,
+        });
+    const selectedOption = (await valueToSelect.first().textContent())?.trim() ?? '';
+
+    await valueToSelect.first().click();
+    await this.page.keyboard.press('Escape');
+
+    await expect(combobox).toHaveAttribute('aria-expanded', 'false');
+
+    return selectedOption;
+  };
+
+  switchPage = (page: Page) => {
+    this.page = page;
+  };
 }