Selector improvements for E2E (#27271)

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

@@ -125,7 +125,9 @@ export const Pages = {
     url: '/explore',
     General: {
       container: 'Explore',
+      graph: 'Explore Graph',
       runButton: 'Run button',
+      table: 'Explore Table',
     },
     Toolbar: {
       navBar: '.explore-toolbar',

packages/grafana-ui/src/components/Graph/Graph.tsx

@@ -13,6 +13,7 @@ import { GraphDimensions } from './GraphTooltip/types';
 import { graphTimeFormat, graphTickFormatter } from './utils';
 
 export interface GraphProps {
+  ariaLabel?: string;
   children?: JSX.Element | JSX.Element[];
   series: GraphSeriesXY[];
   timeRange: TimeRange; // NOTE: we should aim to make `time` a property of the axis, not force it for all graphs
@@ -361,12 +362,12 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
   }
 
   render() {
-    const { height, width, series } = this.props;
+    const { ariaLabel, height, width, series } = this.props;
     const noDataToBeDisplayed = series.length === 0;
     const tooltip = this.renderTooltip();
     const context = this.renderContextMenu();
     return (
-      <div className="graph-panel">
+      <div className="graph-panel" aria-label={ariaLabel}>
         <div
           className="graph-panel__chart"
           ref={e => (this.element = e)}

packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx

@@ -73,6 +73,7 @@ export const GraphWithLegend: React.FunctionComponent<GraphWithLegendProps> = (p
     onHorizontalRegionSelected,
     timeZone,
     children,
+    ariaLabel,
   } = props;
   const { graphContainer, wrapper, legendContainer } = getGraphWithLegendStyles(props);
 
@@ -91,7 +92,7 @@ export const GraphWithLegend: React.FunctionComponent<GraphWithLegendProps> = (p
   }, []);
 
   return (
-    <div className={wrapper}>
+    <div className={wrapper} aria-label={ariaLabel}>
       <div className={graphContainer}>
         <Graph
           series={series}

packages/grafana-ui/src/components/Table/Table.tsx

@@ -28,6 +28,7 @@ import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
 const COLUMN_MIN_WIDTH = 150;
 
 export interface Props {
+  ariaLabel?: string;
   data: DataFrame;
   width: number;
   height: number;
@@ -111,6 +112,7 @@ function getInitialState(props: Props, columns: Column[]): Partial<ReactTableInt
 
 export const Table: FC<Props> = memo((props: Props) => {
   const {
+    ariaLabel,
     data,
     height,
     onCellFilterAdded,
@@ -182,7 +184,7 @@ export const Table: FC<Props> = memo((props: Props) => {
   const headerHeight = noHeader ? 0 : tableStyles.cellHeight;
 
   return (
-    <div {...getTableProps()} className={tableStyles.table}>
+    <div {...getTableProps()} className={tableStyles.table} aria-label={ariaLabel}>
       <CustomScrollbar hideVerticalTrack={true}>
         <div style={{ width: `${totalColumnsWidth}px` }}>
           {!noHeader && (

public/app/features/explore/Explore.tsx

@@ -389,6 +389,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
                         <>
                           {showMetrics && (
                             <ExploreGraphPanel
+                              ariaLabel={selectors.pages.Explore.General.graph}
                               series={graphResult}
                               width={width}
                               loading={loading}
@@ -406,6 +407,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
                           )}
                           {showTable && (
                             <TableContainer
+                              ariaLabel={selectors.pages.Explore.General.table}
                               width={width}
                               exploreId={exploreId}
                               onCellFilterAdded={

public/app/features/explore/ExploreGraphPanel.tsx

@@ -40,6 +40,7 @@ const getStyles = (theme: GrafanaTheme) => ({
 });
 
 interface Props extends Themeable {
+  ariaLabel?: string;
   series?: GraphSeriesXY[] | null;
   width: number;
   absoluteRange: AbsoluteTimeRange;
@@ -87,6 +88,7 @@ class UnThemedExploreGraphPanel extends PureComponent<Props, State> {
 
   renderGraph = () => {
     const {
+      ariaLabel,
       width,
       series,
       onHiddenSeriesChanged,
@@ -123,6 +125,7 @@ class UnThemedExploreGraphPanel extends PureComponent<Props, State> {
         {({ onSeriesToggle, toggledSeries }: GraphSeriesTogglerAPI) => {
           return (
             <GraphWithLegend
+              ariaLabel={ariaLabel}
               displayMode={LegendDisplayMode.List}
               height={height}
               isLegendVisible={true}

public/app/features/explore/TableContainer.tsx

@@ -13,6 +13,7 @@ import { FilterItem } from '@grafana/ui/src/components/Table/types';
 import { getFieldLinksForExplore } from './utils/links';
 
 interface TableContainerProps {
+  ariaLabel?: string;
   exploreId: ExploreId;
   loading: boolean;
   width: number;
@@ -41,7 +42,7 @@ export class TableContainer extends PureComponent<TableContainerProps> {
   }
 
   render() {
-    const { loading, onCellFilterAdded, showingTable, tableResult, width, splitOpen, range } = this.props;
+    const { loading, onCellFilterAdded, showingTable, tableResult, width, splitOpen, range, ariaLabel } = this.props;
 
     const height = this.getTableHeight();
     const tableWidth = width - config.theme.panelPadding * 2 - PANEL_BORDER;
@@ -61,7 +62,13 @@ export class TableContainer extends PureComponent<TableContainerProps> {
     return (
       <Collapse label="Table" loading={loading} collapsible isOpen={showingTable} onToggle={this.onClickTableButton}>
         {hasTableResult ? (
-          <Table data={tableResult!} width={tableWidth} height={height} onCellFilterAdded={onCellFilterAdded} />
+          <Table
+            ariaLabel={ariaLabel}
+            data={tableResult!}
+            width={tableWidth}
+            height={height}
+            onCellFilterAdded={onCellFilterAdded}
+          />
         ) : (
           <MetaInfoText metaItems={[{ value: '0 series returned' }]} />
         )}