@grafana/e2e: selector improvements (#27235)

* Added labels and selectors for explore page

* Added selector for annotations

* Used selector for time picker label

packages/grafana-e2e-selectors/src/selectors/pages.ts

@@ -55,6 +55,11 @@ export const Pages = {
         timezone: 'Time zone picker select container',
         title: 'Dashboard settings page title',
       },
+      Annotations: {
+        List: {
+          addAnnotationCTA: 'Call to action button Add Annotation Query',
+        },
+      },
       Variables: {
         List: {
           addVariableCTA: 'Call to action button Add variable',
@@ -122,5 +127,8 @@ export const Pages = {
       container: 'Explore',
       runButton: 'Run button',
     },
+    Toolbar: {
+      navBar: '.explore-toolbar',
+    },
   },
 };

packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerFooter.tsx

@@ -8,6 +8,7 @@ import { TimeZoneOffset } from '../TimeZonePicker/TimeZoneOffset';
 import { Button } from '../../Button';
 import { TimeZonePicker } from '../TimeZonePicker';
 import isString from 'lodash/isString';
+import { selectors } from '@grafana/e2e-selectors';
 
 interface Props {
   timeZone?: TimeZone;
@@ -45,7 +46,7 @@ export const TimePickerFooter: FC<Props> = props => {
   if (isEditing) {
     return (
       <div className={cx(style.container, style.editContainer)}>
-        <div aria-label="Time zone picker select container" className={style.timeZoneContainer}>
+        <div aria-label={selectors.components.TimeZonePicker.container} className={style.timeZoneContainer}>
           <TimeZonePicker
             includeInternal={true}
             onChange={timeZone => {

public/app/features/explore/QueryRow.tsx

@@ -21,6 +21,7 @@ import {
   AbsoluteTimeRange,
   LoadingState,
 } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 
 import { ExploreItemState, ExploreId } from 'app/types/explore';
 import { Emitter } from 'app/core/utils/emitter';
@@ -166,7 +167,7 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
 
     return (
       <>
-        <div className="query-row">
+        <div className="query-row" aria-label={selectors.components.QueryEditorRows.rows}>
           <div className="query-row-field flex-shrink-1">{this.renderQueryEditor()}</div>
           <QueryRowActions
             canToggleEditorModes={canToggleEditorModes}