diff --git a/packages/grafana-ui/src/components/MatchersUI/FieldsByFrameRefIdMatcher.test.tsx b/packages/grafana-ui/src/components/MatchersUI/FieldsByFrameRefIdMatcher.test.tsx
index c8ab4606ea7..a7038ee2bc6 100644
--- a/packages/grafana-ui/src/components/MatchersUI/FieldsByFrameRefIdMatcher.test.tsx
+++ b/packages/grafana-ui/src/components/MatchersUI/FieldsByFrameRefIdMatcher.test.tsx
@@ -2,6 +2,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
import React from 'react';
import { toDataFrame, FieldType } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
import { RefIDPicker, Props } from './FieldsByFrameRefIdMatcher';
@@ -45,7 +46,7 @@ describe('RefIDPicker', () => {
const select = await screen.findByRole('combobox');
fireEvent.keyDown(select, { keyCode: 40 });
- const selectOptions = screen.getAllByLabelText('Select option');
+ const selectOptions = screen.getAllByTestId(selectors.components.Select.option);
expect(selectOptions).toHaveLength(2);
expect(selectOptions[0]).toHaveTextContent('Query: AFrames (2): Series A, Second series');
diff --git a/packages/grafana-ui/src/components/Select/SelectBase.test.tsx b/packages/grafana-ui/src/components/Select/SelectBase.test.tsx
index ac152ab7892..8e7885d34a4 100644
--- a/packages/grafana-ui/src/components/Select/SelectBase.test.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectBase.test.tsx
@@ -4,6 +4,7 @@ import React, { useState } from 'react';
import { select } from 'react-select-event';
import { SelectableValue } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
import { SelectBase } from './SelectBase';
@@ -224,7 +225,7 @@ describe('SelectBase', () => {
it('renders menu with provided options', async () => {
render();
await userEvent.click(screen.getByText(/choose/i));
- const menuOptions = screen.getAllByLabelText('Select option');
+ const menuOptions = screen.getAllByTestId(selectors.components.Select.option);
expect(menuOptions).toHaveLength(2);
});
@@ -250,7 +251,7 @@ describe('SelectBase', () => {
await selectOptionInTest(selectEl, 'Option 2');
await userEvent.click(screen.getByText(/option 2/i));
- const menuOptions = screen.getAllByLabelText('Select option');
+ const menuOptions = screen.getAllByTestId(selectors.components.Select.option);
expect(menuOptions).toHaveLength(2);
});
});
diff --git a/packages/grafana-ui/src/components/Select/SelectMenu.tsx b/packages/grafana-ui/src/components/Select/SelectMenu.tsx
index e07c53d5b6e..a0dc9336d09 100644
--- a/packages/grafana-ui/src/components/Select/SelectMenu.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectMenu.tsx
@@ -5,6 +5,7 @@ import { MenuListProps } from 'react-select';
import { FixedSizeList as List } from 'react-window';
import { SelectableValue, toIconName } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
import { useTheme2 } from '../../themes/ThemeContext';
import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
@@ -155,7 +156,7 @@ export const SelectMenuOptions = ({
data.isDisabled && styles.optionDisabled
)}
{...rest}
- aria-label="Select option"
+ data-testid={selectors.components.Select.option}
title={data.title}
>
{icon && }
diff --git a/public/app/core/components/Select/OldFolderPicker.test.tsx b/public/app/core/components/Select/OldFolderPicker.test.tsx
index 9b86d840f65..3424c43be92 100644
--- a/public/app/core/components/Select/OldFolderPicker.test.tsx
+++ b/public/app/core/components/Select/OldFolderPicker.test.tsx
@@ -38,7 +38,7 @@ describe('OldFolderPicker', () => {
const pickerContainer = screen.getByTestId(selectors.components.FolderPicker.input);
selectEvent.openMenu(pickerContainer);
- const pickerOptions = await screen.findAllByLabelText('Select option');
+ const pickerOptions = await screen.findAllByTestId(selectors.components.Select.option);
expect(pickerOptions).toHaveLength(2);
expect(pickerOptions[0]).toHaveTextContent('Dash 1');
@@ -92,7 +92,7 @@ describe('OldFolderPicker', () => {
const pickerContainer = screen.getByTestId(selectors.components.FolderPicker.input);
selectEvent.openMenu(pickerContainer);
- const pickerOptions = await screen.findAllByLabelText('Select option');
+ const pickerOptions = await screen.findAllByTestId(selectors.components.Select.option);
expect(pickerOptions[0]).toHaveTextContent('Dashboards');
});
@@ -113,7 +113,7 @@ describe('OldFolderPicker', () => {
const pickerContainer = screen.getByTestId(selectors.components.FolderPicker.input);
selectEvent.openMenu(pickerContainer);
- const pickerOptions = await screen.findAllByLabelText('Select option');
+ const pickerOptions = await screen.findAllByTestId(selectors.components.Select.option);
expect(pickerOptions[0]).not.toHaveTextContent('Dashboards');
});
@@ -134,7 +134,7 @@ describe('OldFolderPicker', () => {
const pickerContainer = screen.getByTestId(selectors.components.FolderPicker.input);
selectEvent.openMenu(pickerContainer);
- const pickerOptions = await screen.findAllByLabelText('Select option');
+ const pickerOptions = await screen.findAllByTestId(selectors.components.Select.option);
expect(pickerOptions[0]).not.toHaveTextContent('Dashboards');
});
diff --git a/public/app/features/explore/extensions/AddToDashboard/index.test.tsx b/public/app/features/explore/extensions/AddToDashboard/index.test.tsx
index 83eb0ffc63e..2d142d7f811 100644
--- a/public/app/features/explore/extensions/AddToDashboard/index.test.tsx
+++ b/public/app/features/explore/extensions/AddToDashboard/index.test.tsx
@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event';
import React, { ReactNode } from 'react';
import { Provider } from 'react-redux';
+import { selectors } from '@grafana/e2e-selectors';
import { locationService, setEchoSrv } from '@grafana/runtime';
import { DataQuery, defaultDashboard } from '@grafana/schema';
import { backendSrv } from 'app/core/services/backend_srv';
@@ -56,7 +57,7 @@ describe('AddToDashboardButton', () => {
setEchoSrv(new Echo());
});
- /* The Add to dashboard form brings in the DashboardPicker, which will call backendSrv.search as part of its instantiation
+ /* The Add to dashboard form brings in the DashboardPicker, which will call backendSrv.search as part of its instantiation
If we do not need a list of dashboards for the test, return an empty array. */
beforeEach(() => {
// Mock the search response so we don't get any refused connection errors
@@ -237,9 +238,9 @@ describe('AddToDashboardButton', () => {
await userEvent.click(screen.getByRole('combobox', { name: /dashboard/i }));
await waitFor(async () => {
- await screen.findByLabelText('Select option');
+ await screen.findByTestId(selectors.components.Select.option);
});
- await userEvent.click(screen.getByLabelText('Select option'));
+ await userEvent.click(screen.getByTestId(selectors.components.Select.option));
await userEvent.click(screen.getByRole('button', { name: /open in new tab/i }));
@@ -278,9 +279,9 @@ describe('AddToDashboardButton', () => {
await userEvent.click(screen.getByRole('combobox', { name: /dashboard/i }));
await waitFor(async () => {
- await screen.findByLabelText('Select option');
+ await screen.findByTestId(selectors.components.Select.option);
});
- await userEvent.click(screen.getByLabelText('Select option'));
+ await userEvent.click(screen.getByTestId(selectors.components.Select.option));
await userEvent.click(screen.getByRole('button', { name: /open dashboard$/i }));
@@ -394,9 +395,9 @@ describe('AddToDashboardButton', () => {
await userEvent.click(screen.getByRole('combobox', { name: /dashboard/i }));
await waitFor(async () => {
- await screen.findByLabelText('Select option');
+ await screen.findByTestId(selectors.components.Select.option);
});
- await userEvent.click(screen.getByLabelText('Select option'));
+ await userEvent.click(screen.getByTestId(selectors.components.Select.option));
await userEvent.click(screen.getByRole('button', { name: /open in new tab/i }));
diff --git a/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/DimensionFields.test.tsx b/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/DimensionFields.test.tsx
index f0ea59df1ee..dfc44481ba8 100644
--- a/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/DimensionFields.test.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/DimensionFields.test.tsx
@@ -3,6 +3,8 @@ import userEvent from '@testing-library/user-event';
import React from 'react';
import { openMenu } from 'react-select-event';
+import { selectors } from '@grafana/e2e-selectors';
+
import createMockDatasource from '../../__mocks__/datasource';
import createMockPanelData from '../../__mocks__/panelData';
import createMockQuery from '../../__mocks__/query';
@@ -120,7 +122,7 @@ describe(`Azure Monitor QueryEditor`, () => {
);
const dimensionSelect = await screen.findByText('Field');
await user.click(dimensionSelect);
- const options = await screen.findAllByLabelText('Select option');
+ const options = await screen.findAllByTestId(selectors.components.Select.option);
expect(options).toHaveLength(1);
expect(options[0]).toHaveTextContent('Test Dimension 2');
});
@@ -161,7 +163,7 @@ describe(`Azure Monitor QueryEditor`, () => {
);
const labelSelect = await screen.findByText('Select value(s)');
await user.click(labelSelect);
- const options = await screen.findAllByLabelText('Select option');
+ const options = await screen.findAllByTestId(selectors.components.Select.option);
expect(options).toHaveLength(1);
expect(options[0]).toHaveTextContent('testlabel');
});
@@ -238,7 +240,7 @@ describe(`Azure Monitor QueryEditor`, () => {
);
const labelSelect = screen.getByLabelText('dimension-labels-select');
await openMenu(labelSelect);
- const options = await screen.findAllByLabelText('Select option');
+ const options = await screen.findAllByTestId(selectors.components.Select.option);
expect(options).toHaveLength(2);
expect(options[0]).toHaveTextContent('testlabel');
expect(options[1]).toHaveTextContent('testlabel2');
diff --git a/public/app/plugins/datasource/azuremonitor/components/TracesQueryEditor/Filter.tsx b/public/app/plugins/datasource/azuremonitor/components/TracesQueryEditor/Filter.tsx
index eaa0c47e5ac..975eae7b181 100644
--- a/public/app/plugins/datasource/azuremonitor/components/TracesQueryEditor/Filter.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/TracesQueryEditor/Filter.tsx
@@ -3,6 +3,7 @@ import React, { RefCallback, SyntheticEvent, useState } from 'react';
import { lastValueFrom } from 'rxjs';
import { CoreApp, DataFrame, getDefaultTimeRange, SelectableValue, TimeRange } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
import { AccessoryButton } from '@grafana/experimental';
import {
HorizontalGroup,
@@ -164,7 +165,7 @@ const Option = (props: React.PropsWithChildren) => {
data.isDisabled && styles.optionDisabled
)}
{...innerProps}
- aria-label="Select option"
+ data-testid={selectors.components.Select.option}
title={data.title}
onClick={onClickMultiOption}
onKeyDown={onClickMultiOption}
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.test.tsx b/public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.test.tsx
index 6edad7bdc84..be768bad8e2 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.test.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.test.tsx
@@ -4,6 +4,7 @@ import React from 'react';
import { openMenu, select } from 'react-select-event';
import { CustomVariableModel, getDefaultTimeRange } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
import { getTemplateSrv } from '@grafana/runtime';
import { createMockDatasource } from '../__mocks__/cloudMonitoringDatasource';
@@ -174,7 +175,7 @@ describe('VisualMetricQueryEditor', () => {
);
const service = await screen.findByLabelText('Service');
openMenu(service);
- expect(screen.getAllByLabelText('Select option').length).toEqual(2);
+ expect(screen.getAllByTestId(selectors.components.Select.option).length).toEqual(2);
});
it('resets query to default when service changes', async () => {
diff --git a/public/app/plugins/datasource/elasticsearch/components/hooks/useCreatableSelectPersistedBehaviour.test.tsx b/public/app/plugins/datasource/elasticsearch/components/hooks/useCreatableSelectPersistedBehaviour.test.tsx
index bc5d5eb529d..d9625d38048 100644
--- a/public/app/plugins/datasource/elasticsearch/components/hooks/useCreatableSelectPersistedBehaviour.test.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/hooks/useCreatableSelectPersistedBehaviour.test.tsx
@@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
+import { selectors } from '@grafana/e2e-selectors';
import { Select, InlineField } from '@grafana/ui';
import { useCreatableSelectPersistedBehaviour } from './useCreatableSelectPersistedBehaviour';
@@ -32,7 +33,7 @@ describe('useCreatableSelectPersistedBehaviour', () => {
// we type in the input 'Option 2', which should prompt an option creation
await userEvent.type(input, 'Option 2');
- const creatableOption = screen.getByLabelText('Select option');
+ const creatableOption = screen.getByTestId(selectors.components.Select.option);
expect(creatableOption).toHaveTextContent('Option 2');
// we click on the creatable option to trigger its creation
@@ -83,7 +84,7 @@ describe('useCreatableSelectPersistedBehaviour', () => {
// we type in the input 'Option 2', which should prompt an option creation
await userEvent.type(input, 'Option 2');
- await userEvent.click(screen.getByLabelText('Select option'));
+ await userEvent.click(screen.getByTestId(selectors.components.Select.option));
expect(onChange).toHaveBeenLastCalledWith({ value: 'Option 2' });
});
diff --git a/public/app/plugins/datasource/grafana-testdata-datasource/QueryEditor.test.tsx b/public/app/plugins/datasource/grafana-testdata-datasource/QueryEditor.test.tsx
index 926b133f3c2..b4b0e8e8b8d 100644
--- a/public/app/plugins/datasource/grafana-testdata-datasource/QueryEditor.test.tsx
+++ b/public/app/plugins/datasource/grafana-testdata-datasource/QueryEditor.test.tsx
@@ -2,6 +2,8 @@ import { fireEvent, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
+import { selectors } from '@grafana/e2e-selectors';
+
import { QueryEditor, Props } from './QueryEditor';
import { scenarios } from './__mocks__/scenarios';
import { defaultQuery } from './constants';
@@ -42,7 +44,7 @@ describe('Test Datasource Query Editor', () => {
let select = (await screen.findByText('Scenario')).nextSibling!.firstChild!;
await fireEvent.keyDown(select, { keyCode: 40 });
- const scs = screen.getAllByLabelText('Select option');
+ const scs = screen.getAllByTestId(selectors.components.Select.option);
expect(scs).toHaveLength(scenarios.length);
diff --git a/yarn.lock b/yarn.lock
index 8c14398c898..c2c50d403c2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3307,16 +3307,16 @@ __metadata:
languageName: unknown
linkType: soft
-"@grafana/plugin-e2e@npm:1.2.0":
- version: 1.2.0
- resolution: "@grafana/plugin-e2e@npm:1.2.0"
+"@grafana/plugin-e2e@npm:1.2.2":
+ version: 1.2.2
+ resolution: "@grafana/plugin-e2e@npm:1.2.2"
dependencies:
semver: "npm:^7.5.4"
uuid: "npm:^9.0.1"
yaml: "npm:^2.3.4"
peerDependencies:
"@playwright/test": ^1.41.2
- checksum: 10/b7af12f214ef4daff0d917b6715fde181b29d72923d1d5c5a5d17e0f17084f23450be91e877d659aa3c2472002253d127d2465d80e25accb59154027228dbb8c
+ checksum: 10/9e537f847f90f2c3a777d6ff449154ba52bcbfd9f434bfb438e5ad42b7c688e7363831ba7694b88e09da66a70fe6eb498729a75b7a6fb9e8cbb38b4fbbd51ed3
languageName: node
linkType: hard
@@ -16714,7 +16714,7 @@ __metadata:
"@grafana/lezer-logql": "npm:0.2.3"
"@grafana/monaco-logql": "npm:^0.0.7"
"@grafana/o11y-ds-frontend": "workspace:*"
- "@grafana/plugin-e2e": "npm:1.2.0"
+ "@grafana/plugin-e2e": "npm:1.2.2"
"@grafana/prometheus": "workspace:*"
"@grafana/runtime": "workspace:*"
"@grafana/saga-icons": "workspace:*"