Add e2e test for exemplars flow (#33972)

* Add e2e test for exemplars flow

* Check if data source is created

* Lets see what is going on

* Try again

* Updating the image maybe?

* Revert "Updating the image maybe?"

This reverts commit 968b44b0d9.

* Try with force

* Use electron

* Wait for new url?

* Wait?????

* Should be good now

* Revert e2e recording

public/app/plugins/datasource/prometheus/configuration/ExemplarSetting.tsx

@@ -1,6 +1,7 @@
-import { Button, InlineField, InlineSwitch, Input } from '@grafana/ui';
-import { DataSourcePicker } from '@grafana/runtime';
 import { css } from '@emotion/css';
+import { selectors } from '@grafana/e2e-selectors';
+import { DataSourcePicker } from '@grafana/runtime';
+import { Button, InlineField, InlineSwitch, Input } from '@grafana/ui';
 import React, { useState } from 'react';
 import { ExemplarTraceIdDestination } from '../types';
 
@@ -17,7 +18,11 @@ export default function ExemplarSetting({ value, onChange, onDelete }: Props) {
     <div className="gf-form-group">
       <InlineField label="Internal link" labelWidth={24}>
         <>
-          <InlineSwitch value={isInternalLink} onChange={(ev) => setIsInternalLink(ev.currentTarget.checked)} />
+          <InlineSwitch
+            value={isInternalLink}
+            aria-label={selectors.components.DataSource.Prometheus.configPage.internalLinkSwitch}
+            onChange={(ev) => setIsInternalLink(ev.currentTarget.checked)}
+          />
           <Button
             variant="destructive"
             title="Remove link"

public/app/plugins/datasource/prometheus/configuration/ExemplarsSettings.tsx

@@ -1,5 +1,6 @@
-import { Button } from '@grafana/ui';
 import { css } from '@emotion/css';
+import { selectors } from '@grafana/e2e-selectors';
+import { Button } from '@grafana/ui';
 import React from 'react';
 import { ExemplarTraceIdDestination } from '../types';
 import ExemplarSetting from './ExemplarSetting';
@@ -36,6 +37,7 @@ export function ExemplarsSettings({ options, onChange }: Props) {
 
       <Button
         variant="secondary"
+        aria-label={selectors.components.DataSource.Prometheus.configPage.exemplarsAddButton}
         className={css`
           margin-bottom: 10px;
         `}

public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx

@@ -1,3 +1,4 @@
+import { css, cx } from '@emotion/css';
 import {
   DataFrame,
   dateTimeFormat,
@@ -8,8 +9,8 @@ import {
   systemDateFormats,
   TimeZone,
 } from '@grafana/data';
-import { FieldLinkList, Portal, VizTooltipContainer, useStyles } from '@grafana/ui';
-import { css, cx } from '@emotion/css';
+import { selectors } from '@grafana/e2e-selectors';
+import { FieldLinkList, Portal, useStyles, VizTooltipContainer } from '@grafana/ui';
 import React, { useCallback, useRef, useState } from 'react';
 
 interface ExemplarMarkerProps {
@@ -99,7 +100,13 @@ export const ExemplarMarker: React.FC<ExemplarMarkerProps> = ({ timeZone, dataFr
 
   return (
     <>
-      <div ref={markerRef} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} className={styles.markerWrapper}>
+      <div
+        ref={markerRef}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        className={styles.markerWrapper}
+        aria-label={selectors.components.DataSource.Prometheus.exemplarMarker}
+      >
         <svg viewBox="0 0 599 599" width="8" height="8" className={cx(styles.marble, isOpen && styles.activeMarble)}>
           <path d="M 300,575 L 575,300 L 300,25 L 25,300 L 300,575 Z" />
         </svg>