diff --git a/e2e/dashboards-suite/new-constant-variable.spec.ts b/e2e/dashboards-suite/new-constant-variable.spec.ts index a173a5cf6fb..1fff721a8a6 100644 --- a/e2e/dashboards-suite/new-constant-variable.spec.ts +++ b/e2e/dashboards-suite/new-constant-variable.spec.ts @@ -10,10 +10,10 @@ describe('Variables - Constant', () => { // Create a new "Constant" variable e2e.components.CallToActionCard.buttonV2('Add variable').click(); - e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelect().type('Constant{enter}'); - e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput().clear().type('VariableUnderTest').blur(); - e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput().type('Variable under test').blur(); - e2e.pages.Dashboard.Settings.Variables.Edit.ConstantVariable.constantOptionsQueryInput().type('pesto').blur(); + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelectV2().type('Constant{enter}'); + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInputV2().clear().type('VariableUnderTest').blur(); + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInputV2().type('Variable under test').blur(); + e2e.pages.Dashboard.Settings.Variables.Edit.ConstantVariable.constantOptionsQueryInputV2().type('pesto').blur(); e2e.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption().eq(0).should('have.text', 'pesto'); diff --git a/e2e/dashboards-suite/new-custom-variable.spec.ts b/e2e/dashboards-suite/new-custom-variable.spec.ts index 28aaca032b9..d9d0750f3b6 100644 --- a/e2e/dashboards-suite/new-custom-variable.spec.ts +++ b/e2e/dashboards-suite/new-custom-variable.spec.ts @@ -3,9 +3,9 @@ import { e2e } from '@grafana/e2e'; const PAGE_UNDER_TEST = 'kVi2Gex7z/test-variable-output'; function fillInCustomVariable(name: string, label: string, value: string) { - e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelect().type('Custom{enter}'); - e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput().clear().type(name).blur(); - e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput().type(label).blur(); + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelectV2().type('Custom{enter}'); + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInputV2().clear().type(name).blur(); + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInputV2().type(label).blur(); e2e.pages.Dashboard.Settings.Variables.Edit.CustomVariable.customValueInput().type(value).blur(); } @@ -42,7 +42,7 @@ describe('Variables - Custom', () => { // Create a new "Custom" variable e2e.components.CallToActionCard.buttonV2('Add variable').click(); - e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelect().type('Custom{enter}'); + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelectV2().type('Custom{enter}'); // Set it's name, label, and content fillInCustomVariable('VariableUnderTest', 'Variable under test', 'One : 1,Two : 2, Three : 3'); diff --git a/e2e/dashboards-suite/new-query-variable.spec.ts b/e2e/dashboards-suite/new-query-variable.spec.ts index 206e014a15b..dbc5d16f068 100644 --- a/e2e/dashboards-suite/new-query-variable.spec.ts +++ b/e2e/dashboards-suite/new-query-variable.spec.ts @@ -9,18 +9,18 @@ describe('Variables - Query - Add variable', () => { e2e.pages.Dashboard.Settings.Variables.List.newButton().should('be.visible').click(); - e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput() + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInputV2() .should('be.visible') .within((input) => { expect(input.attr('placeholder')).equals('name'); expect(input.val()).equals('query0'); }); - e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelect() + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelectV2() .should('be.visible') .within((select) => { e2e.components.Select.singleValue().should('have.text', 'Query'); }); - e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput() + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInputV2() .should('be.visible') .within((input) => { expect(input.attr('placeholder')).equals('optional display name'); @@ -33,7 +33,7 @@ describe('Variables - Query - Add variable', () => { expect(input.attr('placeholder')).equals('descriptive text'); expect(input.val()).equals(''); }); - e2e.pages.Dashboard.Settings.Variables.Edit.General.generalHideSelect() + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalHideSelectV2() .should('be.visible') .within((select) => { e2e.components.Select.singleValue().should('have.text', ''); @@ -45,19 +45,19 @@ describe('Variables - Query - Add variable', () => { e2e.components.Select.singleValue().should('have.text', 'gdev-testdata'); }); - e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRefreshSelect() + e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRefreshSelectV2() .should('be.visible') .within((select) => { e2e.components.Select.singleValue().should('have.text', 'On dashboard load'); }); - e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInput() + e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInputV2() .should('be.visible') .within((input) => { const placeholder = '/.*-(?.*)-(?.*)-.*/'; expect(input.attr('placeholder')).equals(placeholder); expect(input.val()).equals(''); }); - e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsSortSelect() + e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsSortSelectV2() .should('be.visible') .within((select) => { e2e.components.Select.singleValue().should('have.text', 'Disabled'); @@ -66,7 +66,7 @@ describe('Variables - Query - Add variable', () => { e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch().should('not.be.checked'); e2e.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption().should('not.exist'); - e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput().should('not.exist'); + e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInputV2().should('not.exist'); }); it('adding a single value query variable', () => { @@ -75,7 +75,7 @@ describe('Variables - Query - Add variable', () => { e2e.pages.Dashboard.Settings.Variables.List.newButton().should('be.visible').click(); - e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput() + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInputV2() .should('be.visible') .clear() .type('a label'); @@ -89,7 +89,7 @@ describe('Variables - Query - Add variable', () => { .type('*') .blur(); - e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInput() + e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInputV2() .should('be.visible') .type('/.*C.*/') .blur(); @@ -125,7 +125,7 @@ describe('Variables - Query - Add variable', () => { e2e.pages.Dashboard.Settings.Variables.List.newButton().should('be.visible').click(); - e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput() + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInputV2() .should('be.visible') .clear() .type('a label'); @@ -139,7 +139,7 @@ describe('Variables - Query - Add variable', () => { .type('*') .blur(); - e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInput() + e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInputV2() .should('be.visible') .type('/.*C.*/') .blur(); @@ -152,7 +152,7 @@ describe('Variables - Query - Add variable', () => { .click({ force: true }) .should('be.checked'); - e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput().within((input) => { + e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInputV2().within((input) => { expect(input.attr('placeholder')).equals('blank = auto'); expect(input.val()).equals(''); }); diff --git a/e2e/dashboards-suite/new-text-box-variable.spec.ts b/e2e/dashboards-suite/new-text-box-variable.spec.ts index bb19b03e4bc..0d79adb4dea 100644 --- a/e2e/dashboards-suite/new-text-box-variable.spec.ts +++ b/e2e/dashboards-suite/new-text-box-variable.spec.ts @@ -10,10 +10,10 @@ describe('Variables - Text box', () => { // Create a new "Custom" variable e2e.components.CallToActionCard.buttonV2('Add variable').click(); - e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelect().type('Text box{enter}'); - e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput().clear().type('VariableUnderTest').blur(); - e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput().type('Variable under test').blur(); - e2e.pages.Dashboard.Settings.Variables.Edit.TextBoxVariable.textBoxOptionsQueryInput().type('cat-dog').blur(); + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelectV2().type('Text box{enter}'); + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInputV2().clear().type('VariableUnderTest').blur(); + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInputV2().type('Variable under test').blur(); + e2e.pages.Dashboard.Settings.Variables.Edit.TextBoxVariable.textBoxOptionsQueryInputV2().type('cat-dog').blur(); e2e.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption().eq(0).should('have.text', 'cat-dog'); diff --git a/e2e/dashboards-suite/textbox-variables.spec.ts b/e2e/dashboards-suite/textbox-variables.spec.ts index 5f056cda09b..0f59bf6a9a9 100644 --- a/e2e/dashboards-suite/textbox-variables.spec.ts +++ b/e2e/dashboards-suite/textbox-variables.spec.ts @@ -201,7 +201,7 @@ function validateVariable(value: string) { e2e.pages.Dashboard.Settings.Variables.List.tableRowNameFields('text').should('be.visible').click(); - e2e.pages.Dashboard.Settings.Variables.Edit.TextBoxVariable.textBoxOptionsQueryInput() + e2e.pages.Dashboard.Settings.Variables.Edit.TextBoxVariable.textBoxOptionsQueryInputV2() .should('be.visible') .should('have.value', value); } @@ -234,7 +234,7 @@ function changeQueryInput() { e2e.pages.Dashboard.Settings.Variables.List.tableRowNameFields('text').should('be.visible').click(); - e2e.pages.Dashboard.Settings.Variables.Edit.TextBoxVariable.textBoxOptionsQueryInput() + e2e.pages.Dashboard.Settings.Variables.Edit.TextBoxVariable.textBoxOptionsQueryInputV2() .should('be.visible') .clear() .type('changed value') diff --git a/packages/grafana-e2e-selectors/src/selectors/pages.ts b/packages/grafana-e2e-selectors/src/selectors/pages.ts index ae1ca74046a..5a82afa9667 100644 --- a/packages/grafana-e2e-selectors/src/selectors/pages.ts +++ b/packages/grafana-e2e-selectors/src/selectors/pages.ts @@ -110,20 +110,28 @@ export const Pages = { */ modeLabelEdit: 'Variable editor Header mode Edit', generalNameInput: 'Variable editor Form Name field', + generalNameInputV2: 'data-testid Variable editor Form Name field', generalTypeSelect: 'Variable editor Form Type select', + generalTypeSelectV2: 'data-testid Variable editor Form Type select', generalLabelInput: 'Variable editor Form Label field', + generalLabelInputV2: 'data-testid Variable editor Form Label field', generalHideSelect: 'Variable editor Form Hide select', + generalHideSelectV2: 'data-testid Variable editor Form Hide select', selectionOptionsMultiSwitch: 'Variable editor Form Multi switch', selectionOptionsIncludeAllSwitch: 'Variable editor Form IncludeAll switch', selectionOptionsCustomAllInput: 'Variable editor Form IncludeAll field', + selectionOptionsCustomAllInputV2: 'data-testid Variable editor Form IncludeAll field', previewOfValuesOption: 'Variable editor Preview of Values option', submitButton: 'Variable editor Submit button', }, QueryVariable: { queryOptionsDataSourceSelect: Components.DataSourcePicker.container, queryOptionsRefreshSelect: 'Variable editor Form Query Refresh select', + queryOptionsRefreshSelectV2: 'data-testid Variable editor Form Query Refresh select', queryOptionsRegExInput: 'Variable editor Form Query RegEx field', + queryOptionsRegExInputV2: 'data-testid Variable editor Form Query RegEx field', queryOptionsSortSelect: 'Variable editor Form Query Sort select', + queryOptionsSortSelectV2: 'data-testid Variable editor Form Query Sort select', queryOptionsQueryInput: 'Variable editor Form Default Variable Query Editor textarea', valueGroupsTagsEnabledSwitch: 'Variable editor Form Query UseTags switch', valueGroupsTagsTagsQueryInput: 'Variable editor Form Query TagsQuery field', @@ -131,9 +139,14 @@ export const Pages = { }, ConstantVariable: { constantOptionsQueryInput: 'Variable editor Form Constant Query field', + constantOptionsQueryInputV2: 'data-testid Variable editor Form Constant Query field', + }, + DatasourceVariable: { + datasourceSelect: 'data-testid Variable editor', }, TextBoxVariable: { textBoxOptionsQueryInput: 'Variable editor Form TextBox Query field', + textBoxOptionsQueryInputV2: 'data-testid Variable editor Form TextBox Query field', }, CustomVariable: { customValueInput: 'data-testid custom-variable-input', diff --git a/packages/grafana-e2e/src/flows/addDashboard.ts b/packages/grafana-e2e/src/flows/addDashboard.ts index 2d4b089c6b4..d7efeb9c9ba 100644 --- a/packages/grafana-e2e/src/flows/addDashboard.ts +++ b/packages/grafana-e2e/src/flows/addDashboard.ts @@ -162,7 +162,7 @@ const addVariable = (config: PartialAddVariableConfig, isFirst: boolean): AddVar // This field is key to many reactive changes if (type !== VARIABLE_TYPE_QUERY) { - e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelect() + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelectV2() .should('be.visible') .within(() => { e2e.components.Select.singleValue().should('have.text', 'Query').click(); @@ -171,10 +171,10 @@ const addVariable = (config: PartialAddVariableConfig, isFirst: boolean): AddVar } if (label) { - e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput().type(label); + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInputV2().type(label); } - e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput().clear().type(name); + e2e.pages.Dashboard.Settings.Variables.Edit.General.generalNameInputV2().clear().type(name); if ( dataSource && @@ -188,7 +188,7 @@ const addVariable = (config: PartialAddVariableConfig, isFirst: boolean): AddVar } if (constantValue && type === VARIABLE_TYPE_CONSTANT) { - e2e.pages.Dashboard.Settings.Variables.Edit.ConstantVariable.constantOptionsQueryInput().type(constantValue); + e2e.pages.Dashboard.Settings.Variables.Edit.ConstantVariable.constantOptionsQueryInputV2().type(constantValue); } if (type === VARIABLE_TYPE_QUERY) { @@ -197,7 +197,7 @@ const addVariable = (config: PartialAddVariableConfig, isFirst: boolean): AddVar } if (regex) { - e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInput().type(regex); + e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInputV2().type(regex); } } diff --git a/public/app/features/variables/constant/ConstantVariableEditor.tsx b/public/app/features/variables/constant/ConstantVariableEditor.tsx index 2a21a6c8b5a..a054aebf240 100644 --- a/public/app/features/variables/constant/ConstantVariableEditor.tsx +++ b/public/app/features/variables/constant/ConstantVariableEditor.tsx @@ -36,7 +36,7 @@ export class ConstantVariableEditor extends PureComponent { onChange={this.onChange} onBlur={this.onBlur} labelWidth={20} - ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.ConstantVariable.constantOptionsQueryInput} + testId={selectors.pages.Dashboard.Settings.Variables.Edit.ConstantVariable.constantOptionsQueryInputV2} grow /> diff --git a/public/app/features/variables/datasource/DataSourceVariableEditor.tsx b/public/app/features/variables/datasource/DataSourceVariableEditor.tsx index fbe75981c8b..73af0609cea 100644 --- a/public/app/features/variables/datasource/DataSourceVariableEditor.tsx +++ b/public/app/features/variables/datasource/DataSourceVariableEditor.tsx @@ -15,6 +15,7 @@ import { VariableSectionHeader } from '../editor/VariableSectionHeader'; import { VariableSelectField } from '../editor/VariableSelectField'; import { SelectableValue } from '@grafana/data'; import { VariableTextField } from '../editor/VariableTextField'; +import { selectors } from '@grafana/e2e-selectors'; export interface OwnProps extends VariableEditorProps {} @@ -84,6 +85,7 @@ export class DataSourceVariableEditorUnConnected extends PureComponent { options={typeOptions} onChange={this.onDataSourceTypeChanged} labelWidth={10} + testId={selectors.pages.Dashboard.Settings.Variables.Edit.DatasourceVariable.datasourceSelect} /> diff --git a/public/app/features/variables/editor/SelectionOptionsEditor.tsx b/public/app/features/variables/editor/SelectionOptionsEditor.tsx index c9962cd9e4f..00ff36f0966 100644 --- a/public/app/features/variables/editor/SelectionOptionsEditor.tsx +++ b/public/app/features/variables/editor/SelectionOptionsEditor.tsx @@ -68,7 +68,7 @@ export const SelectionOptionsEditor: FunctionComponent diff --git a/public/app/features/variables/editor/VariableEditorEditor.tsx b/public/app/features/variables/editor/VariableEditorEditor.tsx index bb460931530..a1e6455f1e3 100644 --- a/public/app/features/variables/editor/VariableEditorEditor.tsx +++ b/public/app/features/variables/editor/VariableEditorEditor.tsx @@ -133,7 +133,7 @@ export class VariableEditorEditorUnConnected extends PureComponent { name="Name" placeholder="name" required - ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput} + testId={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalNameInputV2} /> @@ -150,7 +150,7 @@ export class VariableEditorEditorUnConnected extends PureComponent { onChange={this.onLabelChange} name="Label" placeholder="optional display name" - ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput} + testId={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInputV2} /> ); } diff --git a/public/app/features/variables/editor/VariableSelectField.tsx b/public/app/features/variables/editor/VariableSelectField.tsx index b01a9e8d1c8..4ef00603c35 100644 --- a/public/app/features/variables/editor/VariableSelectField.tsx +++ b/public/app/features/variables/editor/VariableSelectField.tsx @@ -10,7 +10,7 @@ interface VariableSelectFieldProps { options: Array>; onChange: (option: SelectableValue) => void; tooltip?: string; - ariaLabel?: string; + testId?: string; width?: number; labelWidth?: number; } @@ -21,7 +21,7 @@ export function VariableSelectField({ options, tooltip, onChange, - ariaLabel, + testId, width, labelWidth, }: PropsWithChildren>): ReactElement { @@ -34,7 +34,7 @@ export function VariableSelectField({ {name} -
+