Azure Monitor: E2E Tests (#54619)

* Update credentials form with data-testids and aria-labels

* Update gitignore

* Add example dashboard

* Stub out E2E test for creating ds and importing dashboard

* Add component selectors

* Remove subscription check temporarily

* Appropriately set disabled prop

* Fix lint issues

* Update to use selectors and wait on subscriptions request

* Add test for metrics panel

- Add required selectors for resource picker and metrics query editor

* Add logs and ARG basic query scenarios

- More selector updates

* Add E2E test for template variables

- Tests advanced resource picker
- Adds required selectors

* Remove log and add annotation e2e test

* Update test

* Prettier/betterer updates

- Remove gitignore change

* Lint issues

* Update betterer results

* Lint issue and remove unneeded import

* Don't print certain commands

* Avoiding flakiness

- Ensure code editor has sufficient time to load in ARG test
- Avoid flakiness around correct template variable being selected by typing in resource name

* Remove be.visible requirement

* Update test

* Update selector name

* Reuse datasource

* Fix datasource reuse and combine query tests

* Remove import dashboard step as unneeded

* Review

- Randomise datasource name
- Skip annotations test
- Remove unused example dashboard

* Update to ensure e2e test works in CI

* Update e2e test

- Update environment variables (process is not available in cypress)
- Add wait on resource picker searches to avoid flakiness
- Update subscription and resource group names

* Update CODEOWNERS

* Parse credentials in CI from outputs file

* Update outputs file path

* Fix selector

* Undo selector change

* Update e2e tests

- Set default subscription
- Fix datasource selection in variable editor
- Fix resource picker search flakiness
- Set subscription in ARG query test
- Fix resource group selection
- Update resource group

* Review

* Review 2

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ArgQueryEditor/ArgQueryEditor.test.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import createMockDatasource from '../../__mocks__/datasource';
 import createMockQuery from '../../__mocks__/query';
+import { selectors } from '../../e2e/selectors';
 
 import ArgQueryEditor from './ArgQueryEditor';
 
@@ -31,7 +32,9 @@ const defaultProps = {
 describe('ArgQueryEditor', () => {
   it('should render', async () => {
     render(<ArgQueryEditor {...defaultProps} />);
-    expect(await screen.findByTestId('azure-monitor-arg-query-editor-with-experimental-ui')).toBeInTheDocument();
+    expect(
+      await screen.findByTestId(selectors.components.queryEditor.argsQueryEditor.container.input)
+    ).toBeInTheDocument();
   });
 
   it('should select a subscription from the fetched array', async () => {
@@ -40,7 +43,9 @@ describe('ArgQueryEditor', () => {
     });
     const onChange = jest.fn();
     render(<ArgQueryEditor {...defaultProps} datasource={datasource} onChange={onChange} />);
-    expect(await screen.findByTestId('azure-monitor-arg-query-editor-with-experimental-ui')).toBeInTheDocument();
+    expect(
+      await screen.findByTestId(selectors.components.queryEditor.argsQueryEditor.container.input)
+    ).toBeInTheDocument();
     expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ subscriptions: ['foo'] }));
   });
 
@@ -50,7 +55,9 @@ describe('ArgQueryEditor', () => {
       subscriptions: ['bar'],
     });
     render(<ArgQueryEditor {...defaultProps} onChange={onChange} query={query} />);
-    expect(await screen.findByTestId('azure-monitor-arg-query-editor-with-experimental-ui')).toBeInTheDocument();
+    expect(
+      await screen.findByTestId(selectors.components.queryEditor.argsQueryEditor.container.input)
+    ).toBeInTheDocument();
     expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ subscriptions: ['bar'] }));
   });
 
@@ -63,7 +70,9 @@ describe('ArgQueryEditor', () => {
       subscriptions: ['bar'],
     });
     render(<ArgQueryEditor {...defaultProps} datasource={datasource} onChange={onChange} query={query} />);
-    expect(await screen.findByTestId('azure-monitor-arg-query-editor-with-experimental-ui')).toBeInTheDocument();
+    expect(
+      await screen.findByTestId(selectors.components.queryEditor.argsQueryEditor.container.input)
+    ).toBeInTheDocument();
     expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ subscriptions: ['foo'] }));
     expect(onChange).not.toHaveBeenCalledWith(expect.objectContaining({ subscriptions: ['bar'] }));
   });
@@ -77,7 +86,9 @@ describe('ArgQueryEditor', () => {
       subscriptions: ['foo', 'bar', 'foobar'],
     });
     render(<ArgQueryEditor {...defaultProps} datasource={datasource} onChange={onChange} query={query} />);
-    expect(await screen.findByTestId('azure-monitor-arg-query-editor-with-experimental-ui')).toBeInTheDocument();
+    expect(
+      await screen.findByTestId(selectors.components.queryEditor.argsQueryEditor.container.input)
+    ).toBeInTheDocument();
     expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ subscriptions: ['foo', 'bar'] }));
     expect(onChange).not.toHaveBeenCalledWith(expect.objectContaining({ subscriptions: ['foo', 'bar', 'foobar'] }));
   });

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ArgQueryEditor/ArgQueryEditor.tsx

@@ -4,6 +4,7 @@ import React, { useState, useMemo } from 'react';
 import { EditorFieldGroup, EditorRow, EditorRows } from '@grafana/experimental';
 
 import Datasource from '../../datasource';
+import { selectors } from '../../e2e/selectors';
 import { AzureMonitorErrorish, AzureMonitorOption, AzureMonitorQuery } from '../../types';
 import SubscriptionField from '../SubscriptionField';
 
@@ -73,7 +74,7 @@ const ArgQueryEditor: React.FC<ArgQueryEditorProps> = ({
   }, [datasource]);
 
   return (
-    <span data-testid="azure-monitor-arg-query-editor-with-experimental-ui">
+    <span data-testid={selectors.components.queryEditor.argsQueryEditor.container.input}>
       <EditorRows>
         <EditorRow>
           <EditorFieldGroup>

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AzureCredentialsForm.tsx

@@ -1,10 +1,12 @@
 import React, { ChangeEvent, FunctionComponent, useEffect, useReducer, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { InlineFormLabel, LegacyForms, Button, Select } from '@grafana/ui';
+import { InlineFormLabel, LegacyForms, Button, Select, InlineField } from '@grafana/ui';
 
 import { isCredentialsComplete } from '../credentials';
+import { selectors } from '../e2e/selectors';
 import { AzureAuthType, AzureCredentials } from '../types';
+
 const { Input } = LegacyForms;
 
 export interface Props {
@@ -28,6 +30,8 @@ const authTypeOptions: Array<SelectableValue<AzureAuthType>> = [
   },
 ];
 
+const LABEL_WIDTH = 18;
+
 export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) => {
   const { credentials, azureCloudOptions, onCredentialsChange, getSubscriptions, disabled } = props;
   const hasRequiredFields = isCredentialsComplete(credentials);
@@ -153,68 +157,77 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
   return (
     <div className="gf-form-group">
       {props.managedIdentityEnabled && (
-        <div className="gf-form-inline">
-          <div className="gf-form">
-            <InlineFormLabel className="width-12" tooltip="Choose the type of authentication to Azure services">
-              Authentication
-            </InlineFormLabel>
-            <Select
-              className="width-15"
-              value={authTypeOptions.find((opt) => opt.value === credentials.authType)}
-              options={authTypeOptions}
-              onChange={onAuthTypeChange}
-              disabled={disabled}
-            />
-          </div>
-        </div>
+        <InlineField
+          label="Authentication"
+          labelWidth={LABEL_WIDTH}
+          tooltip="Choose the type of authentication to Azure services"
+          data-testid={selectors.components.configEditor.authType.select}
+          htmlFor="authentication-type"
+        >
+          <Select
+            className="width-15"
+            value={authTypeOptions.find((opt) => opt.value === credentials.authType)}
+            options={authTypeOptions}
+            onChange={onAuthTypeChange}
+            disabled={disabled}
+          />
+        </InlineField>
       )}
       {credentials.authType === 'clientsecret' && (
         <>
           {azureCloudOptions && (
-            <div className="gf-form-inline">
-              <div className="gf-form">
-                <InlineFormLabel className="width-12" tooltip="Choose an Azure Cloud">
-                  Azure Cloud
-                </InlineFormLabel>
-                <Select
-                  aria-label="Azure Cloud"
-                  className="width-15"
-                  value={azureCloudOptions.find((opt) => opt.value === credentials.azureCloud)}
-                  options={azureCloudOptions}
-                  onChange={onAzureCloudChange}
-                  disabled={disabled}
-                />
-              </div>
-            </div>
+            <InlineField
+              label="Azure Cloud"
+              labelWidth={LABEL_WIDTH}
+              tooltip="Choose an Azure Cloud"
+              data-testid={selectors.components.configEditor.azureCloud.input}
+              htmlFor="azure-cloud-type"
+              disabled={disabled}
+            >
+              <Select
+                inputId="azure-cloud-type"
+                aria-label="Azure Cloud"
+                className="width-15"
+                value={azureCloudOptions.find((opt) => opt.value === credentials.azureCloud)}
+                options={azureCloudOptions}
+                onChange={onAzureCloudChange}
+              />
+            </InlineField>
           )}
-          <div className="gf-form-inline">
-            <div className="gf-form">
-              <InlineFormLabel className="width-12">Directory (tenant) ID</InlineFormLabel>
-              <div className="width-15">
-                <Input
-                  className="width-30"
-                  placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
-                  value={credentials.tenantId || ''}
-                  onChange={onTenantIdChange}
-                  disabled={disabled}
-                />
-              </div>
+          <InlineField
+            label="Directory (tenant) ID"
+            labelWidth={LABEL_WIDTH}
+            data-testid={selectors.components.configEditor.tenantID.input}
+            htmlFor="tenant-id"
+          >
+            <div className="width-15">
+              <Input
+                aria-label="Tenant ID"
+                className="width-30"
+                placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
+                value={credentials.tenantId || ''}
+                onChange={onTenantIdChange}
+                disabled={disabled}
+              />
             </div>
-          </div>
-          <div className="gf-form-inline">
-            <div className="gf-form">
-              <InlineFormLabel className="width-12">Application (client) ID</InlineFormLabel>
-              <div className="width-15">
-                <Input
-                  className="width-30"
-                  placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
-                  value={credentials.clientId || ''}
-                  onChange={onClientIdChange}
-                  disabled={disabled}
-                />
-              </div>
+          </InlineField>
+          <InlineField
+            label="Application (client) ID"
+            labelWidth={LABEL_WIDTH}
+            data-testid={selectors.components.configEditor.clientID.input}
+            htmlFor="tenant-id"
+          >
+            <div className="width-15">
+              <Input
+                className="width-30"
+                aria-label="Client ID"
+                placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
+                value={credentials.clientId || ''}
+                onChange={onClientIdChange}
+                disabled={disabled}
+              />
             </div>
-          </div>
+          </InlineField>
           {!disabled &&
             (typeof credentials.clientSecret === 'symbol' ? (
               <div className="gf-form-inline">
@@ -231,27 +244,28 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
                 </div>
               </div>
             ) : (
-              <div className="gf-form-inline">
-                <div className="gf-form">
-                  <InlineFormLabel className="width-12">Client Secret</InlineFormLabel>
-                  <div className="width-15">
-                    <Input
-                      className="width-30"
-                      placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
-                      value={credentials.clientSecret || ''}
-                      onChange={onClientSecretChange}
-                      disabled={disabled}
-                    />
-                  </div>
-                </div>
-              </div>
+              <InlineField
+                label="Client Secret"
+                labelWidth={LABEL_WIDTH}
+                data-testid={selectors.components.configEditor.clientSecret.input}
+                htmlFor="client-secret"
+              >
+                <Input
+                  className="width-30"
+                  aria-label="Client Secret"
+                  placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
+                  value={credentials.clientSecret || ''}
+                  onChange={onClientSecretChange}
+                  disabled={disabled}
+                />
+              </InlineField>
             ))}
         </>
       )}
       {getSubscriptions && (
         <>
           <div className="gf-form-inline">
-            <div className="gf-form">
+            <div className="gf-form" data-testid={selectors.components.configEditor.defaultSubscription.input}>
               <InlineFormLabel className="width-12">Default Subscription</InlineFormLabel>
               <div className="width-30">
                 <Select
@@ -274,10 +288,12 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
                 <div className="max-width-30 gf-form-inline">
                   <Button
                     variant="secondary"
+                    aria-label="Load Subscriptions"
                     size="sm"
                     type="button"
                     onClick={onLoadSubscriptions}
                     disabled={!hasRequiredFields}
+                    data-testid={selectors.components.configEditor.loadSubscriptions.button}
                   >
                     Load Subscriptions
                   </Button>

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/FormatAsField.tsx

@@ -3,6 +3,7 @@ import React, { useCallback, useMemo } from 'react';
 import { SelectableValue } from '@grafana/data';
 import { Select } from '@grafana/ui';
 
+import { selectors } from '../../e2e/selectors';
 import { AzureQueryEditorFieldProps } from '../../types';
 import { Field } from '../Field';
 
@@ -30,7 +31,7 @@ const FormatAsField: React.FC<AzureQueryEditorFieldProps> = ({ query, variableOp
   );
 
   return (
-    <Field label="Format as">
+    <Field label="Format as" data-testid={selectors.components.queryEditor.logsQueryEditor.formatSelection.input}>
       <Select
         inputId="azure-monitor-logs-workspaces-field"
         value={query.azureLogAnalytics?.resultFormat}

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricNameField.tsx

@@ -3,6 +3,7 @@ import React, { useCallback, useMemo } from 'react';
 import { SelectableValue } from '@grafana/data';
 import { Select } from '@grafana/ui';
 
+import { selectors } from '../../e2e/selectors';
 import { AzureQueryEditorFieldProps, AzureMonitorOption } from '../../types';
 import { Field } from '../Field';
 
@@ -28,7 +29,7 @@ const MetricNameField: React.FC<MetricNameProps> = ({ metricNames, query, variab
   const options = useMemo(() => [...metricNames, variableOptionGroup], [metricNames, variableOptionGroup]);
 
   return (
-    <Field label="Metric">
+    <Field label="Metric" data-testid={selectors.components.queryEditor.metricsQueryEditor.metricName.input}>
       <Select
         inputId="azure-monitor-metrics-metric-field"
         value={query.azureMonitor?.metricName ?? null}

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryEditor/QueryEditor.test.tsx

@@ -83,6 +83,8 @@ describe('Azure Monitor QueryEditor', () => {
 
     render(<QueryEditor query={mockQuery} datasource={mockDatasource} onChange={() => {}} onRunQuery={() => {}} />);
 
-    await waitFor(() => expect(screen.getByTestId('azure-monitor-experimental-header')).toBeInTheDocument());
+    await waitFor(() =>
+      expect(screen.getByTestId('data-testid azure-monitor-experimental-header')).toBeInTheDocument()
+    );
   });
 });

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryHeader.tsx

@@ -3,6 +3,7 @@ import React, { useCallback } from 'react';
 import { SelectableValue } from '@grafana/data';
 import { EditorHeader, InlineSelect } from '@grafana/experimental';
 
+import { selectors } from '../e2e/selectors';
 import { AzureMonitorQuery, AzureQueryType } from '../types';
 
 interface QueryTypeFieldProps {
@@ -29,7 +30,7 @@ export const QueryHeader: React.FC<QueryTypeFieldProps> = ({ query, onQueryChang
   );
 
   return (
-    <span data-testid="azure-monitor-experimental-header">
+    <span data-testid={selectors.components.queryEditor.header.select}>
       <EditorHeader>
         <InlineSelect
           label="Service"

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ResourceField/ResourceField.tsx

@@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Button, Icon, Modal, useStyles2 } from '@grafana/ui';
 
 import Datasource from '../../datasource';
+import { selectors } from '../../e2e/selectors';
 import { ResourcePickerQueryType } from '../../resourcePicker/resourcePickerData';
 import { AzureQueryEditorFieldProps, AzureMetricResource } from '../../types';
 import { Field } from '../Field';
@@ -50,7 +51,7 @@ const ResourceField: React.FC<ResourceFieldProps<string | AzureMetricResource>>
   );
 
   return (
-    <>
+    <span data-testid={selectors.components.queryEditor.resourcePicker.select.button}>
       <Modal
         className={styles.modal}
         title="Select a resource"
@@ -74,7 +75,7 @@ const ResourceField: React.FC<ResourceFieldProps<string | AzureMetricResource>>
           <ResourceLabel resource={resource} datasource={datasource} />
         </Button>
       </Field>
-    </>
+    </span>
   );
 };
 

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ResourcePicker/Advanced.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 
 import { Icon, Input, Tooltip, Collapse, Label, InlineField } from '@grafana/ui';
 
+import { selectors } from '../../e2e/selectors';
 import { AzureMetricResource } from '../../types';
 import { Space } from '../Space';
 
@@ -14,7 +15,7 @@ const Advanced = ({ resource, onChange }: ResourcePickerProps<string | AzureMetr
   const [isAdvancedOpen, setIsAdvancedOpen] = useState(!!resource && JSON.stringify(resource).includes('$'));
 
   return (
-    <div>
+    <div data-testid={selectors.components.queryEditor.resourcePicker.advanced.collapse}>
       <Collapse
         collapsible
         label="Advanced"
@@ -63,6 +64,7 @@ const Advanced = ({ resource, onChange }: ResourcePickerProps<string | AzureMetr
               transparent
               htmlFor="input-advanced-resource-picker-subscription"
               labelWidth={15}
+              data-testid={selectors.components.queryEditor.resourcePicker.advanced.subscription.input}
             >
               <Input
                 id="input-advanced-resource-picker-subscription"
@@ -77,6 +79,7 @@ const Advanced = ({ resource, onChange }: ResourcePickerProps<string | AzureMetr
               transparent
               htmlFor="input-advanced-resource-picker-resourceGroup"
               labelWidth={15}
+              data-testid={selectors.components.queryEditor.resourcePicker.advanced.resourceGroup.input}
             >
               <Input
                 id="input-advanced-resource-picker-resourceGroup"
@@ -91,6 +94,7 @@ const Advanced = ({ resource, onChange }: ResourcePickerProps<string | AzureMetr
               transparent
               htmlFor="input-advanced-resource-picker-metricNamespace"
               labelWidth={15}
+              data-testid={selectors.components.queryEditor.resourcePicker.advanced.namespace.input}
             >
               <Input
                 id="input-advanced-resource-picker-metricNamespace"
@@ -105,6 +109,7 @@ const Advanced = ({ resource, onChange }: ResourcePickerProps<string | AzureMetr
               transparent
               htmlFor="input-advanced-resource-picker-resourceName"
               labelWidth={15}
+              data-testid={selectors.components.queryEditor.resourcePicker.advanced.resource.input}
             >
               <Input
                 id="input-advanced-resource-picker-resourceName"

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ResourcePicker/ResourcePicker.tsx

@@ -4,6 +4,7 @@ import { useEffectOnce } from 'react-use';
 
 import { Alert, Button, LoadingPlaceholder, useStyles2 } from '@grafana/ui';
 
+import { selectors } from '../../e2e/selectors';
 import ResourcePickerData, { ResourcePickerQueryType } from '../../resourcePicker/resourcePickerData';
 import { AzureMetricResource } from '../../types';
 import messageFromError from '../../utils/messageFromError';
@@ -232,7 +233,11 @@ const ResourcePicker = ({
         <Advanced resource={internalSelected} onChange={(r) => setInternalSelected(r)} />
         <Space v={2} />
 
-        <Button disabled={!!errorMessage} onClick={handleApply}>
+        <Button
+          disabled={!!errorMessage}
+          onClick={handleApply}
+          data-testid={selectors.components.queryEditor.resourcePicker.apply.button}
+        >
           Apply
         </Button>
 

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ResourcePicker/Search.tsx

@@ -3,6 +3,8 @@ import React, { useEffect, useMemo, useState } from 'react';
 
 import { Icon, Input } from '@grafana/ui';
 
+import { selectors } from '../../e2e/selectors';
+
 const Search = ({ searchFn }: { searchFn: (searchPhrase: string) => void }) => {
   const [searchFilter, setSearchFilter] = useState('');
 
@@ -25,6 +27,7 @@ const Search = ({ searchFn }: { searchFn: (searchPhrase: string) => void }) => {
         debouncedSearch(searchPhrase);
       }}
       placeholder="search for a resource"
+      data-testid={selectors.components.queryEditor.resourcePicker.search.input}
     />
   );
 };

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/SubscriptionField.tsx

@@ -3,6 +3,7 @@ import React, { useCallback, useMemo } from 'react';
 import { SelectableValue } from '@grafana/data';
 import { Select, MultiSelect } from '@grafana/ui';
 
+import { selectors } from '../e2e/selectors';
 import { AzureMonitorQuery, AzureQueryEditorFieldProps, AzureMonitorOption, AzureQueryType } from '../types';
 import { findOptions } from '../utils/common';
 
@@ -67,7 +68,7 @@ const SubscriptionField: React.FC<SubscriptionFieldProps> = ({
   const options = useMemo(() => [...subscriptions, variableOptionGroup], [subscriptions, variableOptionGroup]);
 
   return multiSelect ? (
-    <Field label="Subscriptions">
+    <Field label="Subscriptions" data-testid={selectors.components.queryEditor.argsQueryEditor.subscriptions.input}>
       <MultiSelect
         isClearable
         value={findOptions([...subscriptions, ...variableOptionGroup.options], query.subscriptions)}
@@ -78,7 +79,7 @@ const SubscriptionField: React.FC<SubscriptionFieldProps> = ({
       />
     </Field>
   ) : (
-    <Field label="Subscription">
+    <Field label="Subscription" data-testid={selectors.components.queryEditor.argsQueryEditor.subscriptions.input}>
       <Select
         value={query.subscription}
         inputId="azure-monitor-subscriptions-field"

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/VariableEditor/VariableEditor.tsx

@@ -6,6 +6,7 @@ import { SelectableValue } from '@grafana/data';
 import { Alert, InlineField, Select } from '@grafana/ui';
 
 import DataSource from '../../datasource';
+import { selectors } from '../../e2e/selectors';
 import { migrateQuery } from '../../grafanaTemplateVariableFns';
 import { AzureMonitorOption, AzureMonitorQuery, AzureQueryType } from '../../types';
 import useLastError from '../../utils/useLastError';
@@ -201,7 +202,11 @@ const VariableEditor = (props: Props) => {
 
   return (
     <>
-      <InlineField label="Select query type" labelWidth={20}>
+      <InlineField
+        label="Select query type"
+        labelWidth={20}
+        data-testid={selectors.components.variableEditor.queryType.input}
+      >
         <Select
           aria-label="select query type"
           onChange={onQueryTypeChange}
@@ -235,7 +240,11 @@ const VariableEditor = (props: Props) => {
         <GrafanaTemplateVariableFnInput query={query} updateQuery={props.onChange} datasource={datasource} />
       )}
       {requireSubscription && (
-        <InlineField label="Select subscription" labelWidth={20}>
+        <InlineField
+          label="Select subscription"
+          labelWidth={20}
+          data-testid={selectors.components.variableEditor.subscription.input}
+        >
           <Select
             aria-label="select subscription"
             onChange={onChangeSubscription}
@@ -246,7 +255,11 @@ const VariableEditor = (props: Props) => {
         </InlineField>
       )}
       {(requireResourceGroup || hasResourceGroup) && (
-        <InlineField label="Select resource group" labelWidth={20}>
+        <InlineField
+          label="Select resource group"
+          labelWidth={20}
+          data-testid={selectors.components.variableEditor.resourceGroup.input}
+        >
           <Select
             aria-label="select resource group"
             onChange={onChangeResourceGroup}
@@ -262,7 +275,11 @@ const VariableEditor = (props: Props) => {
         </InlineField>
       )}
       {(requireNamespace || hasNamespace) && (
-        <InlineField label="Select namespace" labelWidth={20}>
+        <InlineField
+          label="Select namespace"
+          labelWidth={20}
+          data-testid={selectors.components.variableEditor.namespace.input}
+        >
           <Select
             aria-label="select namespace"
             onChange={onChangeNamespace}
@@ -278,7 +295,11 @@ const VariableEditor = (props: Props) => {
         </InlineField>
       )}
       {requireResource && (
-        <InlineField label="Select resource" labelWidth={20}>
+        <InlineField
+          label="Select resource"
+          labelWidth={20}
+          data-testid={selectors.components.variableEditor.resource.input}
+        >
           <Select
             aria-label="select resource"
             onChange={onChangeResource}

public/app/plugins/datasource/grafana-azure-monitor-datasource/e2e/selectors.ts

@@ -0,0 +1,100 @@
+import { E2ESelectors } from '@grafana/e2e-selectors';
+
+export const components = {
+  configEditor: {
+    authType: {
+      select: 'data-testid auth-type',
+    },
+    azureCloud: {
+      input: 'data-testid azure-cloud',
+    },
+    tenantID: {
+      input: 'data-testid tenant-id',
+    },
+    clientID: {
+      input: 'data-testid client-id',
+    },
+    clientSecret: {
+      input: 'data-testid client-secret',
+    },
+    loadSubscriptions: {
+      button: 'data-testid load-subscriptions',
+    },
+    defaultSubscription: {
+      input: 'data-testid default-subscription',
+    },
+  },
+  queryEditor: {
+    header: {
+      select: 'data-testid azure-monitor-experimental-header',
+    },
+    resourcePicker: {
+      select: {
+        button: 'data-testid resource-picker-select',
+      },
+      search: {
+        input: 'data-testid resource-picker-search',
+      },
+      apply: {
+        button: 'data-testid resource-picker-apply',
+      },
+      cancel: {
+        button: 'data-testid resource-picker-cancel',
+      },
+      advanced: {
+        collapse: 'data-testid resource-picker-advanced',
+        subscription: {
+          input: 'data-testid resource-picker-subscription',
+        },
+        resourceGroup: {
+          input: 'data-testid resource-picker-resource-group',
+        },
+        namespace: {
+          input: 'data-testid resource-picker-namespace',
+        },
+        resource: {
+          input: 'data-testid resource-picker-resource',
+        },
+      },
+    },
+    metricsQueryEditor: {
+      metricName: {
+        input: 'data-testid metric-name',
+      },
+    },
+    logsQueryEditor: {
+      formatSelection: {
+        input: 'data-testid format-selection',
+      },
+    },
+    argsQueryEditor: {
+      container: {
+        input: 'data-testid azure-monitor-arg-query-editor',
+      },
+      subscriptions: {
+        input: 'data-testid azure-monitor-args-subscription',
+      },
+    },
+  },
+  variableEditor: {
+    queryType: {
+      input: 'data-testid query-type',
+    },
+    subscription: {
+      input: 'data-testid subscription',
+    },
+    resourceGroup: {
+      input: 'data-testid resource-group',
+    },
+    namespace: {
+      input: 'data-testid namespace',
+    },
+    resource: {
+      input: 'data-testid resource',
+    },
+  },
+};
+
+export const selectors: { components: E2ESelectors<typeof components> } = {
+  components: components,
+};