E2E: migrate to playwright (#107241)

* separate playwright into its own folder * better separation * add login scenario, add tags * remove ui option * update CODEOWNERS * add a panels suite test * migrate queries test to playwright * rename + add dashlist test * add panelEdit_base * add geomap map controls test * add geomap-layer-types * add geomap-spatial-operations tests * add frontend-sandbox-panel tests * add smoke-tests-suite * add comment about adding datasource * add dashboard-browse-nested * add dashboard-browse * add dashboard-export-json * add dashboard-keybindings test * remove @wip tag * turn on screenshots and add comment for why this test fails * add dashboard-links-without-slug test * try adding permissions in the test as well * add dashboard-live-streaming * context in the test doesn't work - sad * create dashboard-public-templating * add dashboard-public-create and make live streaming more resilient * add share externally test * add dashboard-share-internally * add share-snapshot-create test * add dashboard-templating * add timepicker tests * add embedded-dashboard test * add general_dashboards test * add import-dashboard test * add load-options-from-url test * add new-constant-variable test * add custom-variable test * add new-datasource-variable test * add new-interval-variable test * add text-box-variable test * add new-query-variable test * add horizontal repeat test * add panel-vertical-repeat test * add empty-row-repeat test * add set-options-from-ui test * add snapshot-create test * add templating test * add textbox-variables test * add cloud-plugins-suite * add storybook verification tests * add playwright storybook verification workflow * add playwright browsers * update CODEOWNERS * test change to trigger storybook verification workflows * try container instead * get the version right... * go back to installing - less chance of forgetting to update * Basic Github Actions Squashed commit of the following: commit f84c650a71 Author: joshhunt <josh.hunt@grafana.com> Date: Tue Jul 1 13:23:46 2025 +0100 add arg for sharding, but not using it yet commit 7bcf0512c6 Author: joshhunt <josh.hunt@grafana.com> Date: Tue Jul 1 12:30:30 2025 +0100 less newline commit b643911882 Author: joshhunt <josh.hunt@grafana.com> Date: Tue Jul 1 12:24:31 2025 +0100 less logs commit 38f871e9c2 Author: joshhunt <josh.hunt@grafana.com> Date: Tue Jul 1 10:00:26 2025 +0100 fix yaml commit db9a773136 Author: joshhunt <josh.hunt@grafana.com> Date: Tue Jul 1 09:57:47 2025 +0100 clean up files commit c0525f41fa Author: joshhunt <josh.hunt@grafana.com> Date: Tue Jul 1 09:44:56 2025 +0100 gha workflow commit 895bea7c52 Author: joshhunt <josh.hunt@grafana.com> Date: Mon Jun 30 19:33:08 2025 +0100 working dagger commit cea1f84437 Author: joshhunt <josh.hunt@grafana.com> Date: Mon Jun 30 16:17:46 2025 +0100 wip * shard gha * some tidy up * add flags for exporting results, and a gha step to merge runs * fix shard gha * add dashboard-duplicate-panel test * add dashboard-outline test * add dashboards-add-panel * remove some commented out code * add dashboards-title-description test * add dashboards-remove-panel * don't install cypress * gha: check playwright results * add dashboards-edit-adhoc-variables test * fix check-jobs * add dagger cloud token * add dagger cloud token * add edit-datasource-variable test * update CODEOWNERS * add dashboards-edit-group-by-variables (skipped for now) * add dashboards-edit-panel-title-description test * add dashboards-edit-transparent-bg test * add dashboards-edit-query-variables test * run with 8 shards * add dashboards-edit-variables * tidy up gha * add dashboard-group-panels * fix action * try to cache the grafana build * fix missing action becuase no checkout, use builtin continue-on-error instead * fix missing id * cat out.txt * debug build cache * fix debug build cache * add dashboards-panel-layouts test * tidy up * no more debug * fix grafana dir * add dashboards-move-panel test * skip some failing tests * mark up plugins tests with @plugins tag, only run @plugins tests in drone * Hackathon/Playwright Conversion - Various Suite (#107516) * Playwright Migration: Various Suite tests * skipping bad tests * fix some tests that can fail * fix uid * separate user for the verify-i18n test * build test plugins for grafana server * properly blur input fields * login manually * get dashboardPage from goto * ignore a couple of type assertions * remove a couple of timeouts * remove timeouts on dashboard-share-internally * use toBeHidden * make dashboard-share-internally more stable * remove TEMP_DAGGER_TOKEN * clean up visaulization-suggestions * unskip gauge test * unskip trace-view-scrolling * attempt to make create variable utils stable * unskip loki tests * make go linter happy * unskip edit-group-by-variables test * unskip move panel tests * isolate dashboard-timepicker tests with separate user * create data source as part of smoke test * make sure we're awaiting in dashboard-edit-adhoc-variables * make dashboards-edit-variables test more robust * Hackathon Playwright: Dashboards Search (#107580) * Hackathon Playwright: Dashboards Search * Feedback changes * make trace-view-scrolling more stable * add json report and bench step * fix bench version * move fail step to after the playwright report so we can report test failures * fix output file name * fix typo * try wrap in expect.poll * stability * bit more tidy up * fix dashboard-new-layouts tests * move test-plugins to e2e-playwright * fix go code for drone e2e run * move loki plugin-e2e test * make v2 dashboards work again --------- Co-authored-by: joshhunt <josh.hunt@grafana.com> Co-authored-by: Josh Hunt <joshhunt@users.noreply.github.com> Co-authored-by: Collin Fingar <collin.fingar@grafana.com> Co-authored-by: Jeff Levin <jeff@levinology.com>
2025-07-11 10:31:33 +01:00
parent ea0ddb3fc9
commit b6580ccb10
250 changed files with 22677 additions and 1038 deletions
@@ -0,0 +1,544 @@
+import { readFileSync } from 'fs';
+import { load } from 'js-yaml';
+import { Page } from 'playwright-core';
+import { v4 as uuidv4 } from 'uuid';
+
+import {
+  test,
+  expect,
+  CreateDataSourcePageArgs,
+  DataSourceConfigPage,
+  E2ESelectorGroups,
+  DashboardPage,
+} from '@grafana/plugin-e2e';
+
+import { AzureQueryType } from '../../public/app/plugins/datasource/azuremonitor/dataquery.gen';
+import { selectors as azMonSelectors } from '../../public/app/plugins/datasource/azuremonitor/e2e/selectors';
+import {
+  AzureMonitorDataSourceJsonData,
+  AzureMonitorDataSourceSecureJsonData,
+} from '../../public/app/plugins/datasource/azuremonitor/types/types';
+
+const provisioningPath = 'provisioning/datasources/azmonitor-ds.yaml';
+
+type AzureMonitorConfig = {
+  secureJsonData: AzureMonitorDataSourceSecureJsonData;
+  jsonData: AzureMonitorDataSourceJsonData;
+};
+
+type AzureMonitorProvision = { datasources: AzureMonitorConfig[] };
+
+const dataSourceName = `Azure Monitor E2E Tests - ${uuidv4()}`;
+const storageAcctName = 'azmonteststorage';
+const logAnalyticsName = 'az-mon-test-logs';
+const applicationInsightsName = 'az-mon-test-ai-a';
+const rootSubscription = 'grafanalabs-datasources-dev';
+
+async function provisionAzureMonitorDatasources(
+  createDataSourceConfigPage: (args: CreateDataSourcePageArgs) => Promise<DataSourceConfigPage>,
+  datasourceConfig: AzureMonitorConfig,
+  page: Page,
+  selectors: E2ESelectorGroups
+) {
+  const configPage = await createDataSourceConfigPage({
+    type: 'grafana-azure-monitor-datasource',
+    name: dataSourceName,
+  });
+
+  const azureCloudInput = page.getByTestId(azMonSelectors.components.configEditor.azureCloud.input).locator('input');
+  await azureCloudInput.fill('Azure');
+  await azureCloudInput.press('Enter');
+  const tenantIdInput = page.getByTestId(azMonSelectors.components.configEditor.tenantID.input).locator('input');
+  await tenantIdInput.fill(datasourceConfig.jsonData.tenantId!);
+  const clientIdInput = page.getByTestId(azMonSelectors.components.configEditor.clientID.input).locator('input');
+  await clientIdInput.fill(datasourceConfig.jsonData.clientId!);
+  const clientSecretInput = page
+    .getByTestId(azMonSelectors.components.configEditor.clientSecret.input)
+    .locator('input');
+  await clientSecretInput.fill(datasourceConfig.secureJsonData.clientSecret!);
+  const loadSubscriptionsButton = page.getByTestId(azMonSelectors.components.configEditor.loadSubscriptions.button);
+  await loadSubscriptionsButton.click();
+  const defaultSubscriptionInput = page
+    .getByTestId(azMonSelectors.components.configEditor.defaultSubscription.input)
+    .locator('input');
+  await defaultSubscriptionInput.fill('datasources');
+  await configPage
+    .getByGrafanaSelector(selectors.components.Select.option)
+    .filter({
+      hasText: 'datasources',
+    })
+    .click();
+  await configPage.saveAndTest();
+}
+
+// TODO unskip when we've figured out how to populate the credentials in CI
+test.describe.skip(
+  'Azure Monitor datasource',
+  {
+    tag: ['@cloud-plugins'],
+  },
+  () => {
+    let datasourceConfig: AzureMonitorConfig;
+
+    test.beforeAll(async () => {
+      // Check if we're running in CI
+      const CI = process.env.CI;
+      if (CI) {
+        const outputs = JSON.parse(readFileSync('outputs.json', 'utf8'));
+        datasourceConfig = {
+          jsonData: {
+            cloudName: 'Azure',
+            tenantId: outputs.tenantId,
+            clientId: outputs.clientId,
+          },
+          secureJsonData: { clientSecret: outputs.clientSecret },
+        };
+      } else {
+        const yamlContent = readFileSync(provisioningPath, 'utf8');
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        const yaml = load(yamlContent) as AzureMonitorProvision;
+        datasourceConfig = yaml.datasources[0];
+      }
+    });
+
+    test('create dashboard, add panel for metrics, log analytics, ARG, and traces queries', async ({
+      createDataSourceConfigPage,
+      gotoDashboardPage,
+      selectors,
+      page,
+    }) => {
+      // this test can absolutely take longer than the default 30s timeout
+      test.setTimeout(120000);
+      await provisionAzureMonitorDatasources(createDataSourceConfigPage, datasourceConfig, page, selectors);
+      // Create new dashboard
+      const dashboardPage = await gotoDashboardPage({
+        timeRange: {
+          from: 'now-6h',
+          to: 'now',
+          zone: 'Coordinated Universal Time',
+        },
+      });
+
+      // Add metrics panel
+      const metricsPanel = await dashboardPage.addPanel();
+
+      // Select Azure Monitor datasource
+      const datasourcePicker = metricsPanel.getByGrafanaSelector(selectors.components.DataSourcePicker.inputV2);
+      await datasourcePicker.fill(dataSourceName);
+      const datasourceList = metricsPanel.getByGrafanaSelector(selectors.components.DataSourcePicker.dataSourceList);
+      await datasourceList.getByText(dataSourceName).click();
+
+      // Configure metrics query
+      const resourcePickerButton = page.getByTestId(azMonSelectors.components.queryEditor.resourcePicker.select.button);
+      await resourcePickerButton.click();
+      await expect(page.getByText(rootSubscription)).toBeVisible({ timeout: 30000 });
+      const resourceSearchInput = page.getByTestId(azMonSelectors.components.queryEditor.resourcePicker.search.input);
+      await resourceSearchInput.fill(storageAcctName);
+      await expect(page.getByText(storageAcctName)).toBeVisible({ timeout: 30000 });
+      await page.getByText(storageAcctName).click();
+      const applyButton = page.getByTestId(azMonSelectors.components.queryEditor.resourcePicker.apply.button);
+      await applyButton.click();
+      await expect(page.getByText('microsoft.storage/storageaccounts')).toBeVisible();
+      const metricNameInput = page
+        .getByTestId(azMonSelectors.components.queryEditor.metricsQueryEditor.metricName.input)
+        .locator('input');
+      await metricNameInput.fill('Used capacity');
+      await metricNameInput.press('Enter');
+
+      // Save and go back to dashboard
+      metricsPanel.backToDashboard();
+
+      // Add logs panel
+      const logsPanel = await dashboardPage.addPanel();
+
+      // Select Azure Monitor datasource
+      await datasourcePicker.fill(dataSourceName);
+      await datasourceList.getByText(dataSourceName).click();
+
+      // Switch to Logs query type
+      const queryTypeSelect = page.getByTestId(azMonSelectors.components.queryEditor.header.select).locator('input');
+      await queryTypeSelect.fill('Logs');
+      await queryTypeSelect.press('Enter');
+
+      // Configure logs query
+      await resourcePickerButton.click();
+      await expect(page.getByText(rootSubscription)).toBeVisible({ timeout: 30000 });
+      await resourceSearchInput.fill(logAnalyticsName);
+      await expect(page.getByText(logAnalyticsName)).toBeVisible({ timeout: 30000 });
+      await page.getByText(logAnalyticsName).click();
+      await applyButton.click();
+      let codeEditor = logsPanel.getByGrafanaSelector(selectors.components.CodeEditor.container).locator('textarea');
+      await codeEditor.fill('AzureDiagnostics', { force: true });
+      const formatSelection = page
+        .getByTestId(azMonSelectors.components.queryEditor.logsQueryEditor.formatSelection.input)
+        .locator('input');
+      await formatSelection.fill('Time series');
+      await formatSelection.press('Enter');
+
+      // Save and go back to dashboard
+      logsPanel.backToDashboard();
+
+      // Add Azure Resource Graph panel
+      const resourceGraphPanel = await dashboardPage.addPanel();
+
+      // Select Azure Monitor datasource
+      await datasourcePicker.fill(dataSourceName);
+      await datasourceList.getByText(dataSourceName).click();
+
+      // Switch to Azure Resource Graph query type
+      await queryTypeSelect.fill('Azure Resource Graph');
+      await queryTypeSelect.press('Enter');
+
+      // Configure Azure Resource Graph query
+      const subscriptionsInput = page
+        .getByTestId(azMonSelectors.components.queryEditor.argsQueryEditor.subscriptions.input)
+        .locator('input');
+      await subscriptionsInput.fill('datasources');
+      await subscriptionsInput.press('Enter');
+      codeEditor = resourceGraphPanel
+        .getByGrafanaSelector(selectors.components.CodeEditor.container)
+        .locator('textarea');
+      await codeEditor.fill(
+        "Resources | where resourceGroup == 'cloud-plugins-e2e-test-azmon' | project name, resourceGroup"
+      );
+
+      // Save and go back to dashboard
+      resourceGraphPanel.backToDashboard();
+
+      // Add traces panel
+      const tracesPanel = await dashboardPage.addPanel();
+
+      // Select Azure Monitor datasource
+      await datasourcePicker.fill(dataSourceName);
+      await datasourceList.getByText(dataSourceName).click();
+
+      // Switch to Traces query type
+      await queryTypeSelect.fill('Traces');
+      await queryTypeSelect.press('Enter');
+
+      // Configure traces query
+      await resourcePickerButton.click();
+      await expect(page.getByText(rootSubscription)).toBeVisible({ timeout: 30000 });
+      await resourceSearchInput.fill(applicationInsightsName);
+      await expect(page.getByText(applicationInsightsName)).toBeVisible({ timeout: 30000 });
+      await page.getByText(applicationInsightsName).click();
+      await applyButton.click();
+      await formatSelection.fill('Trace');
+      await formatSelection.press('Enter');
+    });
+
+    test('create dashboard with template variables', async ({
+      createDataSourceConfigPage,
+      gotoDashboardPage,
+      page,
+      selectors,
+    }) => {
+      await provisionAzureMonitorDatasources(createDataSourceConfigPage, datasourceConfig, page, selectors);
+      // Create new dashboard
+      const dashboardPage = await gotoDashboardPage({
+        timeRange: {
+          from: 'now-6h',
+          to: 'now',
+        },
+      });
+
+      // Add subscription variable
+      await addAzureMonitorVariable(
+        page,
+        dashboardPage,
+        selectors,
+        'subscription',
+        AzureQueryType.SubscriptionsQuery,
+        true
+      );
+
+      // Add resource groups variable
+      await addAzureMonitorVariable(
+        page,
+        dashboardPage,
+        selectors,
+        'resourceGroups',
+        AzureQueryType.ResourceGroupsQuery,
+        false,
+        {
+          subscription: '$subscription',
+        }
+      );
+
+      // Add namespaces variable
+      await addAzureMonitorVariable(
+        page,
+        dashboardPage,
+        selectors,
+        'namespaces',
+        AzureQueryType.NamespacesQuery,
+        false,
+        {
+          subscription: '$subscription',
+          resourceGroup: '$resourceGroups',
+        }
+      );
+
+      // Add region variable
+      await addAzureMonitorVariable(page, dashboardPage, selectors, 'region', AzureQueryType.LocationsQuery, false, {
+        subscription: '$subscription',
+      });
+
+      // Add resource variable
+      await addAzureMonitorVariable(
+        page,
+        dashboardPage,
+        selectors,
+        'resource',
+        AzureQueryType.ResourceNamesQuery,
+        false,
+        {
+          subscription: '$subscription',
+          resourceGroup: '$resourceGroups',
+          namespace: '$namespaces',
+          region: '$region',
+        }
+      );
+
+      // Set variable values
+      const subscriptionVariable = dashboardPage
+        .getByGrafanaSelector(selectors.pages.Dashboard.SubMenu.submenuItemLabels('subscription'))
+        .locator('..')
+        .locator('input');
+      await subscriptionVariable.click();
+      await dashboardPage
+        .getByGrafanaSelector(selectors.components.Select.option)
+        .filter({ hasText: 'grafanalabs-datasources-dev' })
+        .click();
+
+      const resourceGroupsVariable = dashboardPage
+        .getByGrafanaSelector(selectors.pages.Dashboard.SubMenu.submenuItemLabels('resourceGroups'))
+        .locator('..')
+        .locator('input');
+      await resourceGroupsVariable.fill('cloud-plugins-e2e-test-azmon');
+      await resourceGroupsVariable.press('ArrowDown');
+      await resourceGroupsVariable.press('Enter');
+
+      const namespacesVariable = dashboardPage
+        .getByGrafanaSelector(selectors.pages.Dashboard.SubMenu.submenuItemLabels('namespaces'))
+        .locator('..')
+        .locator('input');
+      await namespacesVariable.fill('microsoft.storage/storageaccounts');
+      await namespacesVariable.press('ArrowDown');
+      await namespacesVariable.press('Enter');
+
+      const regionVariable = dashboardPage
+        .getByGrafanaSelector(selectors.pages.Dashboard.SubMenu.submenuItemLabels('region'))
+        .locator('..')
+        .locator('input');
+      await regionVariable.fill('uk south');
+      await regionVariable.press('ArrowDown');
+      await regionVariable.press('Enter');
+
+      const resourceVariable = dashboardPage
+        .getByGrafanaSelector(selectors.pages.Dashboard.SubMenu.submenuItemLabels('resource'))
+        .locator('..')
+        .locator('input');
+      await resourceVariable.fill(storageAcctName);
+      await resourceVariable.press('ArrowDown');
+      await resourceVariable.press('Enter');
+
+      // Add panel with template variables
+      const newPanel = await dashboardPage.addPanel();
+
+      const datasourcePicker = newPanel.getByGrafanaSelector(selectors.components.DataSourcePicker.inputV2);
+      await datasourcePicker.fill(dataSourceName);
+      const datasourceList = newPanel.getByGrafanaSelector(selectors.components.DataSourcePicker.dataSourceList);
+      await datasourceList.getByText(dataSourceName).click();
+
+      const resourcePickerButton = page.getByTestId(azMonSelectors.components.queryEditor.resourcePicker.select.button);
+      await resourcePickerButton.click();
+      const advancedCollapse = page.getByTestId(azMonSelectors.components.queryEditor.resourcePicker.advanced.collapse);
+      await advancedCollapse.click();
+      const advancedSubscription = page
+        .getByTestId(azMonSelectors.components.queryEditor.resourcePicker.advanced.subscription.input)
+        .locator('input');
+      await advancedSubscription.fill('$subscription');
+      const advancedResourceGroup = page
+        .getByTestId(azMonSelectors.components.queryEditor.resourcePicker.advanced.resourceGroup.input)
+        .locator('input');
+      await advancedResourceGroup.fill('$resourceGroups');
+      const advancedNamespace = page
+        .getByTestId(azMonSelectors.components.queryEditor.resourcePicker.advanced.namespace.input)
+        .locator('input');
+      await advancedNamespace.fill('$namespaces');
+      const advancedRegion = page
+        .getByTestId(azMonSelectors.components.queryEditor.resourcePicker.advanced.region.input)
+        .locator('input');
+      await advancedRegion.fill('$region');
+      const advancedResource = page
+        .getByTestId(azMonSelectors.components.queryEditor.resourcePicker.advanced.resource.input)
+        .locator('input');
+      await advancedResource.fill('$resource');
+
+      const applyButton = page.getByTestId(azMonSelectors.components.queryEditor.resourcePicker.apply.button);
+      await applyButton.click();
+
+      const metricNameInput = page
+        .getByTestId(azMonSelectors.components.queryEditor.metricsQueryEditor.metricName.input)
+        .locator('input');
+      await metricNameInput.fill('Transactions');
+      await metricNameInput.press('Enter');
+    });
+
+    // Helper function to add template variables
+    async function addAzureMonitorVariable(
+      page: Page,
+      dashboardPage: DashboardPage,
+      selectors: E2ESelectorGroups,
+      name: string,
+      type: AzureQueryType,
+      isFirst: boolean,
+      options?: {
+        subscription?: string;
+        resourceGroup?: string;
+        namespace?: string;
+        resource?: string;
+        region?: string;
+      }
+    ) {
+      // Navigate to variables settings
+      await dashboardPage.getByGrafanaSelector(selectors.components.NavToolbar.editDashboard.settingsButton).click();
+      await dashboardPage.getByGrafanaSelector(selectors.components.Tab.title('Variables')).click();
+
+      if (isFirst) {
+        await dashboardPage
+          .getByGrafanaSelector(selectors.pages.Dashboard.Settings.Variables.List.addVariableCTAV2)
+          .click();
+      } else {
+        await page.getByTestId(selectors.pages.Dashboard.Settings.Variables.List.newButton).click();
+      }
+
+      // Configure variable
+      const nameInput = dashboardPage.getByGrafanaSelector(
+        selectors.pages.Dashboard.Settings.Variables.Edit.General.generalNameInputV2
+      );
+      await nameInput.clear();
+      await nameInput.fill(name);
+
+      const datasourcePicker = dashboardPage.getByGrafanaSelector(selectors.components.DataSourcePicker.inputV2);
+      await datasourcePicker.fill(dataSourceName);
+      const datasourceList = dashboardPage.getByGrafanaSelector(selectors.components.DataSourcePicker.dataSourceList);
+      await datasourceList.getByText(dataSourceName).click();
+
+      const queryTypeInput = page
+        .getByTestId(azMonSelectors.components.variableEditor.queryType.input)
+        .locator('input');
+      await queryTypeInput.fill(type.replace('Azure', '').trim());
+      await queryTypeInput.press('Enter');
+
+      // Configure type-specific options
+      switch (type) {
+        case AzureQueryType.ResourceGroupsQuery:
+          if (options?.subscription) {
+            const subscriptionInput = page
+              .getByTestId(azMonSelectors.components.variableEditor.subscription.input)
+              .locator('input');
+            await subscriptionInput.fill(options.subscription);
+            await subscriptionInput.press('Enter');
+          }
+          break;
+        case AzureQueryType.LocationsQuery:
+          if (options?.subscription) {
+            const subscriptionInput = page
+              .getByTestId(azMonSelectors.components.variableEditor.subscription.input)
+              .locator('input');
+            await subscriptionInput.fill(options.subscription);
+            await subscriptionInput.press('Enter');
+          }
+          break;
+        case AzureQueryType.NamespacesQuery:
+          if (options?.subscription) {
+            const subscriptionInput = page
+              .getByTestId(azMonSelectors.components.variableEditor.subscription.input)
+              .locator('input');
+            await subscriptionInput.fill(options.subscription);
+            await subscriptionInput.press('Enter');
+          }
+          if (options?.resourceGroup) {
+            const resourceGroupInput = page
+              .getByTestId(azMonSelectors.components.variableEditor.resourceGroup.input)
+              .locator('input');
+            await resourceGroupInput.fill(options.resourceGroup);
+            await resourceGroupInput.press('Enter');
+          }
+          break;
+        case AzureQueryType.ResourceNamesQuery:
+          if (options?.subscription) {
+            const subscriptionInput = page
+              .getByTestId(azMonSelectors.components.variableEditor.subscription.input)
+              .locator('input');
+            await subscriptionInput.fill(options.subscription);
+            await subscriptionInput.press('Enter');
+          }
+          if (options?.resourceGroup) {
+            const resourceGroupInput = page
+              .getByTestId(azMonSelectors.components.variableEditor.resourceGroup.input)
+              .locator('input');
+            await resourceGroupInput.fill(options.resourceGroup);
+            await resourceGroupInput.press('Enter');
+          }
+          if (options?.namespace) {
+            const namespaceInput = page
+              .getByTestId(azMonSelectors.components.variableEditor.namespace.input)
+              .locator('input');
+            await namespaceInput.fill(options.namespace);
+            await namespaceInput.press('Enter');
+          }
+          if (options?.region) {
+            const regionInput = page
+              .getByTestId(azMonSelectors.components.variableEditor.region.input)
+              .locator('input');
+            await regionInput.fill(options.region);
+            await regionInput.press('Enter');
+          }
+          break;
+        case AzureQueryType.MetricNamesQuery:
+          if (options?.subscription) {
+            const subscriptionInput = page
+              .getByTestId(azMonSelectors.components.variableEditor.subscription.input)
+              .locator('input');
+            await subscriptionInput.fill(options.subscription);
+            await subscriptionInput.press('Enter');
+          }
+          if (options?.resourceGroup) {
+            const resourceGroupInput = page
+              .getByTestId(azMonSelectors.components.variableEditor.resourceGroup.input)
+              .locator('input');
+            await resourceGroupInput.fill(options.resourceGroup);
+            await resourceGroupInput.press('Enter');
+          }
+          if (options?.namespace) {
+            const namespaceInput = page
+              .getByTestId(azMonSelectors.components.variableEditor.namespace.input)
+              .locator('input');
+            await namespaceInput.fill(options.namespace);
+            await namespaceInput.press('Enter');
+          }
+          if (options?.resource) {
+            const resourceInput = page
+              .getByTestId(azMonSelectors.components.variableEditor.resource.input)
+              .locator('input');
+            await resourceInput.fill(options.resource);
+            await resourceInput.press('Enter');
+          }
+          break;
+      }
+
+      // Save variable
+      await dashboardPage
+        .getByGrafanaSelector(selectors.pages.Dashboard.Settings.Variables.Edit.General.submitButton)
+        .click();
+
+      // Go back to dashboard
+      await dashboardPage
+        .getByGrafanaSelector(selectors.components.NavToolbar.editDashboard.backToDashboardButton)
+        .click();
+    }
+  }
+);