e2e: creates a separate package for selectors (#23858)

* Initial commit * Chore: fixes after merge * Chore: removes todos * Chore: uncomment test * Chore: adds missing externals to rollup config * Refactor: selectors is master for everything * Docs: updates Docs * Chore: adds e2e-selectors to publish
2025-02-25 18:55:37 -06:00 · 2020-04-27 09:09:05 +02:00
parent 9ac7263e66
commit b09b49fb37
105 changed files with 691 additions and 760 deletions
--- a/public/app/core/components/BackButton/BackButton.tsx
+++ b/public/app/core/components/BackButton/BackButton.tsx
@@ -1,6 +1,6 @@
 import React, { ButtonHTMLAttributes } from 'react';
 import { IconButton } from '@grafana/ui';
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';

 export interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
  surface: 'dashboard' | 'panel' | 'header';
@@ -14,7 +14,7 @@ export const BackButton: React.FC<Props> = ({ surface, onClick }) => {
      tooltipPlacement="bottom"
      size="xxl"
      surface={surface}
-      aria-label={e2e.components.BackButton.selectors.backArrow}
+      aria-label={selectors.components.BackButton.backArrow}
      onClick={onClick}
    />
  );
--- a/public/app/core/components/Login/ChangePassword.tsx
+++ b/public/app/core/components/Login/ChangePassword.tsx
@@ -1,9 +1,9 @@
 import React, { ChangeEvent, PureComponent, SyntheticEvent } from 'react';
 import { Tooltip } from '@grafana/ui';
 import { AppEvents } from '@grafana/data';
-import { e2e } from '@grafana/e2e';

 import appEvents from 'app/core/app_events';
+import { selectors } from '@grafana/e2e-selectors';

 interface Props {
  onSubmit: (pw: string) => void;
@@ -117,7 +117,7 @@ export class ChangePassword extends PureComponent<Props, State> {
              placement="bottom"
              content="If you skip you will be prompted to change password next time you login."
            >
-              <a className="btn btn-link" onClick={this.onSkip} aria-label={e2e.pages.Login.selectors.skip}>
+              <a className="btn btn-link" onClick={this.onSkip} aria-label={selectors.pages.Login.skip}>
                Skip
              </a>
            </Tooltip>
--- a/public/app/core/components/Login/LoginForm.tsx
+++ b/public/app/core/components/Login/LoginForm.tsx
@@ -1,5 +1,5 @@
 import React, { ChangeEvent, PureComponent, SyntheticEvent } from 'react';
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';

 import { FormModel } from './LoginCtrl';

@@ -74,7 +74,7 @@ export class LoginForm extends PureComponent<Props, State> {
            className="gf-form-input login-form-input"
            required
            placeholder={this.props.loginHint}
-            aria-label={e2e.pages.Login.selectors.username}
+            aria-label={selectors.pages.Login.username}
            onChange={this.onChangeUsername}
          />
        </div>
@@ -87,7 +87,7 @@ export class LoginForm extends PureComponent<Props, State> {
            ng-model="formModel.password"
            id="inputPassword"
            placeholder={this.props.passwordHint}
-            aria-label={e2e.pages.Login.selectors.password}
+            aria-label={selectors.pages.Login.password}
            onChange={this.onChangePassword}
          />
        </div>
@@ -95,7 +95,7 @@ export class LoginForm extends PureComponent<Props, State> {
          {!this.props.isLoggingIn ? (
            <button
              type="submit"
-              aria-label={e2e.pages.Login.selectors.submit}
+              aria-label={selectors.pages.Login.submit}
              className={`btn btn-large p-x-2 ${this.state.valid ? 'btn-primary' : 'btn-inverse'}`}
              onClick={this.onSubmit}
              disabled={!this.state.valid}
--- a/public/app/core/components/search/search_results.ts
+++ b/public/app/core/components/search/search_results.ts
--- a/public/app/core/directives/value_select_dropdown.ts
+++ b/public/app/core/directives/value_select_dropdown.ts
@@ -5,7 +5,7 @@ import filter from 'lodash/filter';
 import find from 'lodash/find';
 import indexOf from 'lodash/indexOf';
 import map from 'lodash/map';
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';

 import coreModule from '../core_module';
 import { GrafanaRootScope } from 'app/routes/GrafanaCtrl';
@@ -27,13 +27,13 @@ export class ValueSelectDropdownCtrl {
  onUpdated: any;
  queryHasSearchFilter: boolean;
  debouncedQueryChanged: Function;
-  selectors: typeof e2e.pages.Dashboard.SubMenu.selectors;
+  selectors: typeof selectors.pages.Dashboard.SubMenu;

  /** @ngInject */
  constructor(private $scope: IScope) {
    this.queryHasSearchFilter = this.variable ? containsSearchFilter(this.variable.query) : false;
    this.debouncedQueryChanged = debounce(this.queryChanged.bind(this), 200);
-    this.selectors = e2e.pages.Dashboard.SubMenu.selectors;
+    this.selectors = selectors.pages.Dashboard.SubMenu;
  }

  show() {
--- a/public/app/core/services/util_srv.ts
+++ b/public/app/core/services/util_srv.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';

 import coreModule from 'app/core/core_module';
 import appEvents from 'app/core/app_events';
@@ -103,7 +103,7 @@ export class UtilSrv {
    scope.yesText = payload.yesText || 'Yes';
    scope.noText = payload.noText || 'Cancel';
    scope.confirmTextValid = scope.confirmText ? false : true;
-    scope.selectors = e2e.pages.ConfirmModal.selectors;
+    scope.selectors = selectors.pages.ConfirmModal;

    appEvents.emit(CoreEvents.showModal, {
      src: 'public/app/partials/confirm_modal.html',
--- a/public/app/features/alerting/AlertTab.tsx
+++ b/public/app/features/alerting/AlertTab.tsx
@@ -2,8 +2,9 @@ import React, { PureComponent } from 'react';
 import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux';
 import { css } from 'emotion';
 import { Alert, Button, IconName } from '@grafana/ui';
-
+import { selectors } from '@grafana/e2e-selectors';
 import { AngularComponent, getAngularLoader, getDataSourceSrv } from '@grafana/runtime';
+
 import appEvents from 'app/core/app_events';
 import { getAlertingValidationMessage } from './getAlertingValidationMessage';

@@ -18,7 +19,6 @@ import { TestRuleResult } from './TestRuleResult';
 import { AppNotificationSeverity, CoreEvents, StoreState } from 'app/types';
 import { updateLocation } from 'app/core/actions';
 import { PanelEditorTabId } from '../dashboard/components/PanelEditor/types';
-import { e2e } from '@grafana/e2e';

 interface OwnProps {
  dashboard: DashboardModel;
@@ -206,7 +206,7 @@ class UnConnectedAlertTab extends PureComponent<Props, State> {

    return (
      <EditorTabBody toolbarItems={toolbarItems}>
-        <div aria-label={e2e.components.AlertTab.selectors.content}>
+        <div aria-label={selectors.components.AlertTab.content}>
          {alert && hasTransformations && (
            <Alert
              severity={AppNotificationSeverity.Error}
--- a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
+++ b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
@@ -3,6 +3,7 @@ import React, { useMemo } from 'react';
 import _ from 'lodash';
 import { LocationUpdate } from '@grafana/runtime';
 import { Button, HorizontalGroup, IconButton, stylesFactory, useTheme } from '@grafana/ui';
+import { selectors } from '@grafana/e2e-selectors';
 import { connect, MapDispatchToProps } from 'react-redux';
 // Utils
 import config from 'app/core/config';
@@ -13,7 +14,6 @@ import { addPanel } from 'app/features/dashboard/state/reducers';
 // Types
 import { DashboardModel, PanelModel } from '../../state';
 import { LS_PANEL_COPY_KEY } from 'app/core/constants';
-import { e2e } from '@grafana/e2e';
 import { css, cx, keyframes } from 'emotion';
 import { GrafanaTheme } from '@grafana/data';
 import tinycolor from 'tinycolor2';
@@ -168,7 +168,7 @@ const AddPanelWidgetCreate: React.FC<AddPanelWidgetCreateProps> = ({ onCreate, o
  return (
    <div className={styles.wrapper}>
      <HorizontalGroup>
-        <Button icon="plus" size="md" onClick={onCreate} aria-label={e2e.pages.AddDashboard.selectors.addNewPanel}>
+        <Button icon="plus" size="md" onClick={onCreate} aria-label={selectors.pages.AddDashboard.addNewPanel}>
          Add new panel
        </Button>
        {copiedPanelPlugins.length === 1 && (
--- a/public/app/features/dashboard/components/DashNav/DashNavButton.tsx
+++ b/public/app/features/dashboard/components/DashNav/DashNavButton.tsx
@@ -1,8 +1,8 @@
 // Libraries
 import React, { FunctionComponent } from 'react';
 // Components
-import { Tooltip, Icon, IconName, IconType, IconSize } from '@grafana/ui';
-import { e2e } from '@grafana/e2e';
+import { Icon, IconName, IconSize, IconType, Tooltip } from '@grafana/ui';
+import { selectors } from '@grafana/e2e-selectors';

 interface Props {
  icon?: IconName;
@@ -31,7 +31,7 @@ export const DashNavButton: FunctionComponent<Props> = ({
        <button
          className={`btn navbar-button navbar-button--${classSuffix}`}
          onClick={onClick}
-          aria-label={e2e.pages.Dashboard.Toolbar.selectors.toolbarItems(tooltip)}
+          aria-label={selectors.pages.Dashboard.Toolbar.toolbarItems(tooltip)}
        >
          {icon && <Icon name={icon} type={iconType} size={iconSize || 'lg'} />}
          {children}
--- a/public/app/features/dashboard/components/DashboardSettings/SettingsCtrl.ts
+++ b/public/app/features/dashboard/components/DashboardSettings/SettingsCtrl.ts
@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import _ from 'lodash';
 import angular, { ILocationService, IScope } from 'angular';
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';

 import { appEvents, contextSrv, coreModule } from 'app/core/core';
 import { DashboardModel } from '../../state/DashboardModel';
@@ -24,7 +24,7 @@ export class SettingsCtrl {
  canDelete: boolean;
  sections: any[];
  hasUnsavedFolderChange: boolean;
-  selectors: typeof e2e.pages.Dashboard.Settings.General.selectors;
+  selectors: typeof selectors.pages.Dashboard.Settings.General;
  useAngularTemplating: boolean;

  /** @ngInject */
@@ -59,7 +59,7 @@ export class SettingsCtrl {

    appEvents.on(CoreEvents.dashboardSaved, this.onPostSave.bind(this), $scope);

-    this.selectors = e2e.pages.Dashboard.Settings.General.selectors;
+    this.selectors = selectors.pages.Dashboard.Settings.General;
    this.useAngularTemplating = !getConfig().featureToggles.newVariables;
  }

--- a/public/app/features/dashboard/components/Inspector/InspectDataTab.tsx
+++ b/public/app/features/dashboard/components/Inspector/InspectDataTab.tsx
@@ -8,12 +8,13 @@ import {
  transformDataFrame,
 } from '@grafana/data';
 import { Button, Field, Icon, Select, Table } from '@grafana/ui';
+import { selectors } from '@grafana/e2e-selectors';
+import AutoSizer from 'react-virtualized-auto-sizer';
+
 import { getPanelInspectorStyles } from './styles';
 import { config } from 'app/core/config';
-import AutoSizer from 'react-virtualized-auto-sizer';
 import { saveAs } from 'file-saver';
 import { cx } from 'emotion';
-import { e2e } from '@grafana/e2e';

 interface Props {
  data: DataFrame[];
@@ -109,7 +110,7 @@ export class InspectDataTab extends PureComponent<Props, State> {
    });

    return (
-      <div className={styles.dataTabContent} aria-label={e2e.components.PanelInspector.Data.selectors.content}>
+      <div className={styles.dataTabContent} aria-label={selectors.components.PanelInspector.Data.content}>
        <div className={styles.toolbar}>
          <Field label="Transformer" className="flex-grow-1">
            <Select options={transformationOptions} value={transformId} onChange={this.onTransformationChange} />
--- a/public/app/features/dashboard/components/Inspector/InspectJSONTab.tsx
+++ b/public/app/features/dashboard/components/Inspector/InspectJSONTab.tsx
@@ -2,10 +2,11 @@ import React, { PureComponent } from 'react';
 import { chain } from 'lodash';
 import { AppEvents, PanelData, SelectableValue } from '@grafana/data';
 import { Button, ClipboardButton, Field, JSONFormatter, Select, TextArea } from '@grafana/ui';
+import { selectors } from '@grafana/e2e-selectors';
+
 import { appEvents } from 'app/core/core';
 import { DashboardModel, PanelModel } from '../../state';
 import { getPanelInspectorStyles } from './styles';
-import { e2e } from '@grafana/e2e';

 enum ShowContent {
  PanelJSON = 'panel',
@@ -142,7 +143,7 @@ export class InspectJSONTab extends PureComponent<Props, State> {

    return (
      <>
-        <div className={styles.toolbar} aria-label={e2e.components.PanelInspector.Json.selectors.content}>
+        <div className={styles.toolbar} aria-label={selectors.components.PanelInspector.Json.content}>
          <Field label="Select source" className="flex-grow-1">
            <Select options={options} value={selected} onChange={this.onSelectChanged} />
          </Field>
--- a/public/app/features/dashboard/components/Inspector/PanelInspector.tsx
+++ b/public/app/features/dashboard/components/Inspector/PanelInspector.tsx
@@ -7,6 +7,7 @@ import { QueryInspector } from './QueryInspector';

 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
 import { CustomScrollbar, Drawer, JSONFormatter, TabContent } from '@grafana/ui';
+import { selectors } from '@grafana/e2e-selectors';
 import { getDataSourceSrv, getLocationSrv } from '@grafana/runtime';
 import {
  DataFrame,
@@ -25,7 +26,6 @@ import { config } from 'app/core/config';
 import { getPanelInspectorStyles } from './styles';
 import { StoreState } from 'app/types';
 import { InspectDataTab } from './InspectDataTab';
-import { e2e } from '@grafana/e2e';

 interface OwnProps {
  dashboard: DashboardModel;
@@ -223,7 +223,7 @@ export class PanelInspectorUnconnected extends PureComponent<Props, State> {
    }

    return (
-      <div aria-label={e2e.components.PanelInspector.Stats.selectors.content}>
+      <div aria-label={selectors.components.PanelInspector.Stats.content}>
        {this.renderStatsTable('Stats', stats)}
        {this.renderStatsTable('Data source stats', dataStats)}
      </div>
--- a/public/app/features/dashboard/components/Inspector/QueryInspector.tsx
+++ b/public/app/features/dashboard/components/Inspector/QueryInspector.tsx
@@ -1,12 +1,13 @@
 import React, { PureComponent } from 'react';
+import { Button, JSONFormatter, LoadingPlaceholder } from '@grafana/ui';
+import { selectors } from '@grafana/e2e-selectors';
+import { AppEvents, PanelEvents } from '@grafana/data';
+
 import appEvents from 'app/core/app_events';
 import { CopyToClipboard } from 'app/core/components/CopyToClipboard/CopyToClipboard';
-import { Button, JSONFormatter, LoadingPlaceholder } from '@grafana/ui';
 import { CoreEvents } from 'app/types';
-import { AppEvents, PanelEvents } from '@grafana/data';
 import { PanelModel } from 'app/features/dashboard/state';
 import { getPanelInspectorStyles } from './styles';
-import { e2e } from '@grafana/e2e';

 interface DsQuery {
  isLoading: boolean;
@@ -189,7 +190,7 @@ export class QueryInspector extends PureComponent<Props, State> {

    return (
      <>
-        <div aria-label={e2e.components.PanelInspector.Query.selectors.content}>
+        <div aria-label={selectors.components.PanelInspector.Query.content}>
          <h3 className="section-heading">Query inspector</h3>
          <p className="small muted">
            Query inspector allows you to view raw request and response. To collect this data Grafana needs to issue a
--- a/public/app/features/dashboard/components/PanelEditor/FieldConfigEditor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/FieldConfigEditor.tsx
@@ -13,7 +13,7 @@ import { getDataLinksVariableSuggestions } from '../../../panel/panellinks/link_
 import { OverrideEditor } from './OverrideEditor';
 import groupBy from 'lodash/groupBy';
 import { OptionsGroup } from './OptionsGroup';
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';

 interface Props {
  plugin: PanelPlugin;
@@ -103,7 +103,7 @@ export const OverrideFieldConfigEditor: React.FC<Props> = props => {
  };

  return (
-    <div aria-label={e2e.components.OverridesConfigEditor.selectors.content}>
+    <div aria-label={selectors.components.OverridesConfigEditor.content}>
      {renderOverrides()}
      {renderAddOverride()}
    </div>
@@ -183,7 +183,7 @@ export const DefaultFieldConfigEditor: React.FC<Props> = ({ data, onChange, conf
  const groupedConfigs = groupBy(plugin.fieldConfigRegistry.list(), i => i.category && i.category[0]);

  return (
-    <div aria-label={e2e.components.FieldConfigEditor.selectors.content}>
+    <div aria-label={selectors.components.FieldConfigEditor.content}>
      {Object.keys(groupedConfigs).map((k, i) => {
        const groupItemsCounter = countGroupItems(groupedConfigs[k], config);

--- a/public/app/features/dashboard/components/PanelEditor/OptionsGroup.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsGroup.tsx
@@ -4,7 +4,7 @@ import { GrafanaTheme } from '@grafana/data';
 import { Icon, stylesFactory, useTheme } from '@grafana/ui';
 import { PANEL_EDITOR_UI_STATE_STORAGE_KEY } from './state/reducers';
 import { useLocalStorage } from 'react-use';
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';

 export interface OptionsGroupProps {
  id: string;
@@ -101,7 +101,7 @@ const CollapsibleSection: FC<Omit<OptionsGroupProps, 'persistMe'>> = ({
      <div
        className={styles.header}
        onClick={() => toggleExpand(!isExpanded)}
-        aria-label={e2e.components.OptionsGroup.selectors.toggle(id)}
+        aria-label={selectors.components.OptionsGroup.toggle(id)}
      >
        <div className={cx(styles.toggle, 'editor-options-group-toggle')}>
          <Icon name={isExpanded ? 'angle-down' : 'angle-right'} />
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx
@@ -8,7 +8,7 @@ import { css } from 'emotion';
 import { PanelOptionsTab } from './PanelOptionsTab';
 import { DashNavButton } from 'app/features/dashboard/components/DashNav/DashNavButton';
 import { usePanelLatestData } from './usePanelLatestData';
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';

 interface Props {
  plugin: PanelPlugin;
@@ -81,7 +81,7 @@ export const OptionsPaneContent: React.FC<Props> = ({
  const showMainTab = activeTab === 'options' || plugin.meta.skipDataQuery;

  return (
-    <div className={styles.panelOptionsPane} aria-label={e2e.components.PanelEditor.OptionsPane.selectors.content}>
+    <div className={styles.panelOptionsPane} aria-label={selectors.components.PanelEditor.OptionsPane.content}>
      {plugin && (
        <div className={styles.wrapper}>
          <TabsBar className={styles.tabsBar}>
@@ -185,7 +185,7 @@ export const TabsBarContent: React.FC<{
  return (
    <>
      {width < 352 ? (
-        <div className="flex-grow-1" aria-label={e2e.components.PanelEditor.OptionsPane.selectors.select}>
+        <div className="flex-grow-1" aria-label={selectors.components.PanelEditor.OptionsPane.select}>
          <Select
            options={tabs}
            value={active}
--- a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
@@ -31,7 +31,7 @@ import { SubMenuItems } from 'app/features/dashboard/components/SubMenu/SubMenuI
 import { BackButton } from 'app/core/components/BackButton/BackButton';
 import { appEvents } from 'app/core/core';
 import { SaveDashboardModalProxy } from '../SaveDashboard/SaveDashboardModalProxy';
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';

 interface OwnProps {
  dashboard: DashboardModel;
@@ -197,7 +197,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
        onDragFinished={size => this.onDragFinished(Pane.Top, size)}
      >
        {this.renderPanel(styles)}
-        <div className={styles.tabsWrapper} aria-label={e2e.components.PanelEditor.DataPane.selectors.content}>
+        <div className={styles.tabsWrapper} aria-label={selectors.components.PanelEditor.DataPane.content}>
          <PanelEditorTabs panel={panel} dashboard={dashboard} tabs={tabs} onChangeTab={this.onChangeTab} data={data} />
        </div>
      </SplitPane>
@@ -332,7 +332,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
    }

    return (
-      <div className={styles.wrapper} aria-label={e2e.components.PanelEditor.General.selectors.content}>
+      <div className={styles.wrapper} aria-label={selectors.components.PanelEditor.General.content}>
        {this.editorToolbar(styles)}
        <div className={styles.verticalSplitPanesWrapper}>
          {uiState.isPanelOptionsVisible ? this.renderWithOptionsPane(styles) : this.renderHorizontalSplit(styles)}
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
@@ -1,7 +1,8 @@
 import React, { useMemo } from 'react';

-import { Button, HorizontalGroup, TextArea, Form, Checkbox } from '@grafana/ui';
-import { e2e } from '@grafana/e2e';
+import { Button, Checkbox, Form, HorizontalGroup, TextArea } from '@grafana/ui';
+import { selectors } from '@grafana/e2e-selectors';
+
 import { SaveDashboardFormProps } from '../types';

 interface SaveDashboardFormDTO {
@@ -37,7 +38,7 @@ export const SaveDashboardForm: React.FC<SaveDashboardFormProps> = ({ dashboard,
                label="Save current time range as dashboard default"
                name="saveTimerange"
                ref={register}
-                aria-label={e2e.pages.SaveDashboardModal.selectors.saveTimerange}
+                aria-label={selectors.pages.SaveDashboardModal.saveTimerange}
              />
            )}
            {hasVariableChanged && (
@@ -45,7 +46,7 @@ export const SaveDashboardForm: React.FC<SaveDashboardFormProps> = ({ dashboard,
                label="Save current variable values as dashboard default"
                name="saveVariables"
                ref={register}
-                aria-label={e2e.pages.SaveDashboardModal.selectors.saveVariables}
+                aria-label={selectors.pages.SaveDashboardModal.saveVariables}
              />
            )}
            {(hasVariableChanged || hasTimeChanged) && <div className="gf-form-group" />}
@@ -54,7 +55,7 @@ export const SaveDashboardForm: React.FC<SaveDashboardFormProps> = ({ dashboard,
          </div>

          <HorizontalGroup>
-            <Button type="submit" aria-label={e2e.pages.SaveDashboardModal.selectors.save}>
+            <Button type="submit" aria-label={selectors.pages.SaveDashboardModal.save}>
              Save
            </Button>
            <Button variant="secondary" onClick={onCancel}>
--- a/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { e2e } from '@grafana/e2e';
+import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
 import { LegacyForms, ClipboardButton, Icon, InfoBox } from '@grafana/ui';
 const { Select, Switch } = LegacyForms;
 import { SelectableValue, PanelModel, AppEvents } from '@grafana/data';
@@ -86,7 +86,7 @@ export class ShareLink extends PureComponent<Props, State> {
  render() {
    const { panel } = this.props;
    const { useCurrentTimeRange, includeTemplateVars, selectedTheme, shareUrl, imageUrl } = this.state;
-    const selectors = e2e.pages.SharePanelModal.selectors;
+    const selectors = e2eSelectors.pages.SharePanelModal;

    return (
      <div className="share-modal-body">
--- a/public/app/features/dashboard/components/SubMenu/SubMenuCtrl.ts
+++ b/public/app/features/dashboard/components/SubMenu/SubMenuCtrl.ts
@@ -1,6 +1,6 @@
 import angular, { ILocationService } from 'angular';
 import _ from 'lodash';
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';
 import { VariableSrv } from 'app/features/templating/all';
 import { CoreEvents } from '../../../../types';

@@ -9,7 +9,7 @@ export class SubMenuCtrl {
  variables: any;
  dashboard: any;
  submenuEnabled: boolean;
-  selectors: typeof e2e.pages.Dashboard.SubMenu.selectors;
+  selectors: typeof selectors.pages.Dashboard.SubMenu;

  /** @ngInject */
  constructor(private variableSrv: VariableSrv, private $location: ILocationService) {
@@ -19,7 +19,7 @@ export class SubMenuCtrl {
    this.dashboard.events.on(CoreEvents.submenuVisibilityChanged, (enabled: boolean) => {
      this.submenuEnabled = enabled;
    });
-    this.selectors = e2e.pages.Dashboard.SubMenu.selectors;
+    this.selectors = selectors.pages.Dashboard.SubMenu;
  }

  annotationStateChanged() {
--- a/public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx
+++ b/public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent, useEffect, useState } from 'react';
 import { VariableHide, VariableModel } from '../../../templating/types';
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';
 import { PickerRenderer } from '../../../variables/pickers/PickerRenderer';

 interface Props {
@@ -24,7 +24,7 @@ export const SubMenuItems: FunctionComponent<Props> = ({ variables }) => {
          <div
            key={variable.id}
            className="submenu-item gf-form-inline"
-            aria-label={e2e.pages.Dashboard.SubMenu.selectors.submenuItem}
+            aria-label={selectors.pages.Dashboard.SubMenu.submenuItem}
          >
            <PickerRenderer variable={variable} />
          </div>
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
+++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
@@ -11,7 +11,7 @@ import {
 import { TransformationOperationRow } from './TransformationOperationRow';
 import { Card, CardProps } from '../../../../core/components/Card/Card';
 import { css } from 'emotion';
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';

 interface Props {
  onChange: (transformations: DataTransformerConfig[]) => void;
@@ -145,7 +145,7 @@ export class TransformationsEditor extends React.PureComponent<Props> {
    return (
      <CustomScrollbar autoHeightMin="100%">
        <Container padding="md">
-          <div aria-label={e2e.components.TransformTab.selectors.content}>
+          <div aria-label={selectors.components.TransformTab.content}>
            {!hasTransformationsConfigured && this.renderNoAddedTransformsState()}
            {hasTransformationsConfigured && this.renderTransformationEditors()}
            {hasTransformationsConfigured && this.renderTransformationSelector()}
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import { isEqual } from 'lodash';
-import { DataLink, ScopedVars, PanelMenuItem, PanelData, LoadingState, QueryResultMetaNotice } from '@grafana/data';
+import { DataLink, LoadingState, PanelData, PanelMenuItem, QueryResultMetaNotice, ScopedVars } from '@grafana/data';
 import { AngularComponent } from '@grafana/runtime';
-import { ClickOutsideWrapper, Tooltip, Icon } from '@grafana/ui';
-import { e2e } from '@grafana/e2e';
+import { ClickOutsideWrapper, Icon, Tooltip } from '@grafana/ui';
+import { selectors } from '@grafana/e2e-selectors';

 import PanelHeaderCorner from './PanelHeaderCorner';
 import { PanelHeaderMenu } from './PanelHeaderMenu';
@@ -159,7 +159,7 @@ export class PanelHeader extends Component<Props, State> {
            className="panel-title-container"
            onClick={this.onMenuToggle}
            onMouseDown={this.onMouseDown}
-            aria-label={e2e.components.Panels.Panel.selectors.title(title)}
+            aria-label={selectors.components.Panels.Panel.title(title)}
          >
            <div className="panel-title">
              {Object.values(notices).map(this.renderNotice)}
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { css } from 'emotion';
 import { PanelMenuItem } from '@grafana/data';
 import { Icon, IconName, useTheme } from '@grafana/ui';
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';

 interface Props {
  children: any;
@@ -30,7 +30,7 @@ export const PanelHeaderMenuItem: FC<Props & PanelMenuItem> = props => {
    <li className={isSubMenu ? 'dropdown-submenu' : undefined}>
      <a onClick={props.onClick} href={props.href}>
        {props.iconClassName && <Icon name={props.iconClassName as IconName} className={menuIconClassName} />}
-        <span className="dropdown-item-text" aria-label={e2e.components.Panels.Panel.selectors.headerItems(props.text)}>
+        <span className="dropdown-item-text" aria-label={selectors.components.Panels.Panel.headerItems(props.text)}>
          {props.text}
          {isSubMenu && <Icon name="angle-right" className={shortcutIconClassName} />}
        </span>
--- a/public/app/features/dashboard/panel_editor/EditorTabBody.tsx
+++ b/public/app/features/dashboard/panel_editor/EditorTabBody.tsx
@@ -1,9 +1,8 @@
-// Libraries
 import React, { PureComponent } from 'react';
-// Components
 import { CustomScrollbar, Icon, IconName, PanelOptionsGroup } from '@grafana/ui';
+import { selectors } from '@grafana/e2e-selectors';
+
 import { FadeIn } from 'app/core/components/Animations/FadeIn';
-import { e2e } from '@grafana/e2e';

 interface Props {
  children: JSX.Element;
@@ -92,7 +91,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
          className="btn navbar-button"
          onClick={onClick}
          disabled={view.disabled}
-          aria-label={e2e.components.QueryEditorToolbarItem.selectors.button(view.title)}
+          aria-label={selectors.components.QueryEditorToolbarItem.button(view.title)}
        >
          {view.icon && <Icon name={view.icon as IconName} />} {view.title}
        </button>
--- a/public/app/features/dashboard/panel_editor/QueriesTab.tsx
+++ b/public/app/features/dashboard/panel_editor/QueriesTab.tsx
@@ -3,7 +3,7 @@ import React, { PureComponent } from 'react';
 // Components
 import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
 import { QueryOptions } from './QueryOptions';
-import { CustomScrollbar, stylesFactory, Button, HorizontalGroup, Modal } from '@grafana/ui';
+import { Button, CustomScrollbar, HorizontalGroup, Modal, stylesFactory } from '@grafana/ui';
 import { getLocationSrv } from '@grafana/runtime';
 import { QueryEditorRows } from './QueryEditorRows';
 // Services
@@ -20,7 +20,7 @@ import { Unsubscribable } from 'rxjs';
 import { DashboardQueryEditor, isSharedDashboardQuery } from 'app/plugins/datasource/dashboard';
 import { expressionDatasource, ExpressionDatasourceID } from 'app/features/expressions/ExpressionDatasource';
 import { css } from 'emotion';
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';

 interface Props {
  panel: PanelModel;
@@ -178,7 +178,7 @@ export class QueriesTab extends PureComponent<Props, State> {
            <Button
              variant="secondary"
              onClick={this.openQueryInspector}
-              aria-label={e2e.components.QueryTab.selectors.queryInspectorButton}
+              aria-label={selectors.components.QueryTab.queryInspectorButton}
            >
              Query inspector
            </Button>
@@ -245,7 +245,7 @@ export class QueriesTab extends PureComponent<Props, State> {
    }

    return (
-      <div aria-label={e2e.components.QueryTab.selectors.content}>
+      <div aria-label={selectors.components.QueryTab.content}>
        <QueryEditorRows
          queries={panel.targets}
          datasource={currentDS}
--- a/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx
+++ b/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { GrafanaTheme, PanelPluginMeta } from '@grafana/data';
 import { stylesFactory, useTheme, styleMixins } from '@grafana/ui';
 import { css, cx } from 'emotion';
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';
 import { PanelPluginBadge } from '../../plugins/PluginSignatureBadge';

 interface Props {
@@ -22,7 +22,7 @@ const VizTypePickerPlugin: React.FC<Props> = ({ isCurrent, plugin, onClick, disa
  });

  return (
-    <div className={styles.wrapper} aria-label={e2e.components.PluginVisualization.selectors.item(plugin.name)}>
+    <div className={styles.wrapper} aria-label={selectors.components.PluginVisualization.item(plugin.name)}>
      <div className={cssClass} onClick={disabled ? () => {} : onClick} title={plugin.name}>
        <div className={styles.bg} />
        <div className={styles.itemContent}>
--- a/public/app/features/datasources/DataSourcesListItem.tsx
+++ b/public/app/features/datasources/DataSourcesListItem.tsx
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { DataSourceSettings } from '@grafana/data';
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';

 export interface Props {
  dataSource: DataSourceSettings;
@@ -20,7 +20,7 @@ export class DataSourcesListItem extends PureComponent<Props> {
              <img src={dataSource.typeLogoUrl} alt={dataSource.name} />
            </figure>
            <div className="card-item-details">
-              <div className="card-item-name" aria-label={e2e.pages.DataSources.selectors.dataSources(dataSource.name)}>
+              <div className="card-item-name" aria-label={selectors.pages.DataSources.dataSources(dataSource.name)}>
                {dataSource.name}
                {dataSource.isDefault && <span className="btn btn-secondary btn-small card-item-label">default</span>}
              </div>
--- a/public/app/features/datasources/NewDataSourcePage.tsx
+++ b/public/app/features/datasources/NewDataSourcePage.tsx
@@ -2,8 +2,8 @@ import React, { FC, PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
 import { DataSourcePluginMeta, NavModel } from '@grafana/data';
-import { List, LinkButton, Button } from '@grafana/ui';
-import { e2e } from '@grafana/e2e';
+import { Button, LinkButton, List } from '@grafana/ui';
+import { selectors } from '@grafana/e2e-selectors';

 import Page from 'app/core/components/Page/Page';
 import { DataSourcePluginCategory, StoreState } from 'app/types';
@@ -126,7 +126,7 @@ const DataSourceTypeCard: FC<DataSourceTypeCardProps> = props => {
    <Card
      title={plugin.name}
      description={plugin.info.description}
-      ariaLabel={e2e.pages.AddDataSource.selectors.dataSourcePlugins(plugin.name)}
+      ariaLabel={selectors.pages.AddDataSource.dataSourcePlugins(plugin.name)}
      logoUrl={plugin.info.logos.small}
      actions={
        <>
@@ -154,7 +154,7 @@ const DataSourceTypeCard: FC<DataSourceTypeCardProps> = props => {
      }
      className={isPhantom && 'add-data-source-item--phantom'}
      onClick={onClick}
-      aria-label={e2e.pages.AddDataSource.selectors.dataSourcePlugins(plugin.name)}
+      aria-label={selectors.pages.AddDataSource.dataSourcePlugins(plugin.name)}
    />
  );
 };
--- a/public/app/features/datasources/settings/BasicSettings.tsx
+++ b/public/app/features/datasources/settings/BasicSettings.tsx
@@ -1,7 +1,8 @@
 import React, { FC } from 'react';
 import { InlineFormLabel, LegacyForms } from '@grafana/ui';
+import { selectors } from '@grafana/e2e-selectors';
+
 const { Input, Switch } = LegacyForms;
-import { e2e } from '@grafana/e2e';

 export interface Props {
  dataSourceName: string;
@@ -30,7 +31,7 @@ const BasicSettings: FC<Props> = ({ dataSourceName, isDefault, onDefaultChange,
            placeholder="Name"
            onChange={event => onNameChange(event.target.value)}
            required
-            aria-label={e2e.pages.DataSource.selectors.name}
+            aria-label={selectors.pages.DataSource.name}
          />
        </div>
        <Switch
--- a/public/app/features/datasources/settings/ButtonRow.tsx
+++ b/public/app/features/datasources/settings/ButtonRow.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';

 import config from 'app/core/config';

@@ -19,7 +19,7 @@ const ButtonRow: FC<Props> = ({ isReadOnly, onDelete, onSubmit, onTest }) => {
          className="btn btn-primary"
          disabled={isReadOnly}
          onClick={event => onSubmit(event)}
-          aria-label={e2e.pages.DataSource.selectors.saveAndTest}
+          aria-label={selectors.pages.DataSource.saveAndTest}
        >
          Save &amp; Test
        </button>
@@ -34,7 +34,7 @@ const ButtonRow: FC<Props> = ({ isReadOnly, onDelete, onSubmit, onTest }) => {
        className="btn btn-danger"
        disabled={isReadOnly}
        onClick={onDelete}
-        aria-label={e2e.pages.DataSource.selectors.delete}
+        aria-label={selectors.pages.DataSource.delete}
      >
        Delete
      </button>
--- a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
+++ b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
@@ -2,7 +2,8 @@
 import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import isString from 'lodash/isString';
-import { e2e } from '@grafana/e2e';
+import { Icon } from '@grafana/ui';
+import { selectors } from '@grafana/e2e-selectors';
 // Components
 import Page from 'app/core/components/Page/Page';
 import { GenericDataSourcePlugin, PluginSettings } from './PluginSettings';
@@ -24,7 +25,6 @@ import { getRouteParamsId } from 'app/core/selectors/location';
 // Types
 import { CoreEvents, StoreState } from 'app/types/';
 import { DataSourcePluginMeta, DataSourceSettings, NavModel, UrlQueryMap } from '@grafana/data';
-import { Icon } from '@grafana/ui';
 import { getDataSourceLoadingNav } from '../state/navModel';
 import PluginStateinfo from 'app/features/plugins/PluginStateInfo';
 import { dataSourceLoaded, setDataSourceName, setIsDefault } from '../state/reducers';
@@ -204,12 +204,12 @@ export class DataSourceSettingsPage extends PureComponent<Props> {

        <div className="gf-form-group">
          {testingStatus && testingStatus.message && (
-            <div className={`alert-${testingStatus.status} alert`} aria-label={e2e.pages.DataSource.selectors.alert}>
+            <div className={`alert-${testingStatus.status} alert`} aria-label={selectors.pages.DataSource.alert}>
              <div className="alert-icon">
                {testingStatus.status === 'error' ? <Icon name="exclamation-triangle" /> : <Icon name="check" />}
              </div>
              <div className="alert-body">
-                <div className="alert-title" aria-label={e2e.pages.DataSource.selectors.alertMessage}>
+                <div className="alert-title" aria-label={selectors.pages.DataSource.alertMessage}>
                  {testingStatus.message}
                </div>
              </div>
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -1,23 +1,34 @@
-// Libraries
 import React from 'react';
 import { hot } from 'react-hot-loader';
 import { css, cx } from 'emotion';
+import { compose } from 'redux';
 import { connect } from 'react-redux';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import memoizeOne from 'memoize-one';
+import { selectors } from '@grafana/e2e-selectors';
+import { ErrorBoundaryAlert, stylesFactory, withTheme } from '@grafana/ui';
+import {
+  AbsoluteTimeRange,
+  DataQuery,
+  DataSourceApi,
+  ExploreMode,
+  GrafanaTheme,
+  GraphSeriesXY,
+  LoadingState,
+  PanelData,
+  RawTimeRange,
+  TimeRange,
+  TimeZone,
+} from '@grafana/data';

-// Services & Utils
 import store from 'app/core/store';
 import config from 'app/core/config';
-
-// Components
-import { ErrorBoundaryAlert, stylesFactory, withTheme } from '@grafana/ui';
 import LogsContainer from './LogsContainer';
 import QueryRows from './QueryRows';
 import TableContainer from './TableContainer';
 import RichHistoryContainer from './RichHistory/RichHistoryContainer';
-// Actions
 import {
+  addQueryRow,
  changeSize,
  initializeExplore,
  modifyQueries,
@@ -25,23 +36,8 @@ import {
  scanStart,
  setQueries,
  toggleGraph,
-  addQueryRow,
  updateTimeRange,
 } from './state/actions';
-// Types
-import {
-  AbsoluteTimeRange,
-  DataQuery,
-  DataSourceApi,
-  GraphSeriesXY,
-  PanelData,
-  RawTimeRange,
-  TimeRange,
-  TimeZone,
-  LoadingState,
-  ExploreMode,
-  GrafanaTheme,
-} from '@grafana/data';

 import { ExploreId, ExploreItemState, ExploreUIState, ExploreUpdateState, ExploreUrlState } from 'app/types/explore';
 import { StoreState } from 'app/types';
@@ -49,10 +45,10 @@ import {
  DEFAULT_RANGE,
  DEFAULT_UI_STATE,
  ensureQueries,
-  getTimeRangeFromUrl,
-  getTimeRange,
-  lastUsedDatasourceKeyForOrgId,
  getFirstNonQueryRowSpecificError,
+  getTimeRange,
+  getTimeRangeFromUrl,
+  lastUsedDatasourceKeyForOrgId,
 } from 'app/core/utils/explore';
 import { Emitter } from 'app/core/utils/emitter';
 import { ExploreToolbar } from './ExploreToolbar';
@@ -63,8 +59,6 @@ import { scanStopAction } from './state/actionTypes';
 import { ExploreGraphPanel } from './ExploreGraphPanel';
 import { TraceView } from './TraceView/TraceView';
 import { SecondaryActions } from './SecondaryActions';
-import { compose } from 'redux';
-import { e2e } from '@grafana/e2e';

 const getStyles = stylesFactory((theme: GrafanaTheme) => {
  return {
@@ -320,7 +314,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
    const queryError = getFirstNonQueryRowSpecificError(queryErrors);

    return (
-      <div className={exploreClass} ref={this.getRef} aria-label={e2e.pages.Explore.General.selectors.container}>
+      <div className={exploreClass} ref={this.getRef} aria-label={selectors.pages.Explore.General.container}>
        <ExploreToolbar exploreId={exploreId} onChangeTime={this.onChangeTime} />
        {datasourceMissing ? this.renderEmptyState() : null}
        {datasourceInstance && (
--- a/public/app/features/explore/RunButton.tsx
+++ b/public/app/features/explore/RunButton.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { RefreshPicker } from '@grafana/ui';
+import { selectors } from '@grafana/e2e-selectors';
 import memoizeOne from 'memoize-one';
 import { css } from 'emotion';
 import classNames from 'classnames';
-import { e2e } from '@grafana/e2e';

 import { ResponsiveButton } from './ResponsiveButton';

@@ -43,7 +43,7 @@ export function RunButton(props: Props) {
      })}
      icon={loading ? 'fa fa-spinner' : 'sync'}
      iconClassName={loading && ' fa-spin run-icon'}
-      aria-label={e2e.pages.Explore.General.selectors.runButton}
+      aria-label={selectors.pages.Explore.General.runButton}
    />
  );

--- a/public/app/features/search/components/SearchItem.tsx
+++ b/public/app/features/search/components/SearchItem.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useCallback, CSSProperties } from 'react';
 import { css, cx } from 'emotion';
 import { GrafanaTheme } from '@grafana/data';
-import { e2e } from '@grafana/e2e';
+import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
 import { useTheme, TagList, styleMixins, stylesFactory } from '@grafana/ui';
 import { DashboardSectionItem, OnToggleChecked } from '../types';
 import { SearchCheckbox } from './SearchCheckbox';
@@ -15,7 +15,7 @@ export interface Props {
  style?: CSSProperties;
 }

-const { selectors } = e2e.pages.Dashboards;
+const selectors = e2eSelectors.pages.Dashboards;

 export const SearchItem: FC<Props> = ({ item, editable, onToggleChecked, onTagSelected, style }) => {
  const theme = useTheme();
--- a/public/app/features/templating/DefaultVariableQueryEditor.tsx
+++ b/public/app/features/templating/DefaultVariableQueryEditor.tsx
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { VariableQueryProps } from 'app/types/plugins';
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';

 export default class DefaultVariableQueryEditor extends PureComponent<VariableQueryProps, any> {
  constructor(props: VariableQueryProps) {
@@ -38,7 +38,7 @@ export default class DefaultVariableQueryEditor extends PureComponent<VariableQu
          onBlur={this.onBlur}
          placeholder="metric name or tags query"
          required
-          aria-label={e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.selectors.queryOptionsQueryInput}
+          aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsQueryInput}
        />
      </div>
    );
--- a/public/app/features/templating/editor_ctrl.ts
+++ b/public/app/features/templating/editor_ctrl.ts
@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import { AppEvents } from '@grafana/data';
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';

 import coreModule from 'app/core/core_module';
 import { variableTypes } from './types';
@@ -60,10 +60,10 @@ export class VariableEditorCtrl {
    ];

    $scope.selectors = {
-      ...e2e.pages.Dashboard.Settings.Variables.List.selectors,
-      ...e2e.pages.Dashboard.Settings.Variables.Edit.General.selectors,
-      ...e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.selectors,
-      ...e2e.pages.Dashboard.Settings.Variables.Edit.ConstantVariable.selectors,
+      ...selectors.pages.Dashboard.Settings.Variables.List,
+      ...selectors.pages.Dashboard.Settings.Variables.Edit.General,
+      ...selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable,
+      ...selectors.pages.Dashboard.Settings.Variables.Edit.ConstantVariable,
    };

    $scope.init = () => {
--- a/public/app/features/variables/constant/ConstantVariableEditor.tsx
+++ b/public/app/features/variables/constant/ConstantVariableEditor.tsx
@@ -1,5 +1,5 @@
 import React, { ChangeEvent, FocusEvent, PureComponent } from 'react';
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';

 import { ConstantVariableModel } from '../../templating/types';
 import { VariableEditorProps } from '../editor/types';
@@ -36,9 +36,7 @@ export class ConstantVariableEditor extends PureComponent<Props> {
              onChange={this.onChange}
              onBlur={this.onBlur}
              placeholder="your metric prefix"
-              aria-label={
-                e2e.pages.Dashboard.Settings.Variables.Edit.ConstantVariable.selectors.constantOptionsQueryInput
-              }
+              aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.ConstantVariable.constantOptionsQueryInput}
            />
          </div>
        </div>
--- a/public/app/features/variables/editor/SelectionOptionsEditor.tsx
+++ b/public/app/features/variables/editor/SelectionOptionsEditor.tsx
@@ -1,11 +1,12 @@
 import React, { FunctionComponent, useCallback } from 'react';
 import { LegacyForms } from '@grafana/ui';
-const { Switch } = LegacyForms;
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';

 import { VariableWithMultiSupport } from '../../templating/types';
 import { VariableEditorProps } from './types';
-import { VariableIdentifier, toVariableIdentifier } from '../state/types';
+import { toVariableIdentifier, VariableIdentifier } from '../state/types';
+
+const { Switch } = LegacyForms;

 export interface SelectionOptionsEditorProps<Model extends VariableWithMultiSupport = VariableWithMultiSupport>
  extends VariableEditorProps<Model> {
@@ -37,7 +38,7 @@ export const SelectionOptionsEditor: FunctionComponent<SelectionOptionsEditorPro
    <div className="section gf-form-group">
      <h5 className="section-heading">Selection Options</h5>
      <div className="section">
-        <div aria-label={e2e.pages.Dashboard.Settings.Variables.Edit.General.selectors.selectionOptionsMultiSwitch}>
+        <div aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsMultiSwitch}>
          <Switch
            label="Multi-value"
            labelClass="width-10"
@@ -46,9 +47,7 @@ export const SelectionOptionsEditor: FunctionComponent<SelectionOptionsEditorPro
            tooltip={'Enables multiple values to be selected at the same time'}
          />
        </div>
-        <div
-          aria-label={e2e.pages.Dashboard.Settings.Variables.Edit.General.selectors.selectionOptionsIncludeAllSwitch}
-        >
+        <div aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch}>
          <Switch
            label="Include All option"
            labelClass="width-10"
@@ -67,7 +66,7 @@ export const SelectionOptionsEditor: FunctionComponent<SelectionOptionsEditorPro
            value={props.variable.allValue ?? ''}
            onChange={onAllValueChanged}
            placeholder="blank = auto"
-            aria-label={e2e.pages.Dashboard.Settings.Variables.Edit.General.selectors.selectionOptionsCustomAllInput}
+            aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput}
          />
        </div>
      )}
--- a/public/app/features/variables/editor/VariableEditorContainer.tsx
+++ b/public/app/features/variables/editor/VariableEditorContainer.tsx
@@ -1,8 +1,9 @@
 import React, { MouseEvent, PureComponent } from 'react';
+import { Icon } from '@grafana/ui';
+import { selectors } from '@grafana/e2e-selectors';
+
 import { NEW_VARIABLE_ID, toVariableIdentifier, toVariablePayload, VariableIdentifier } from '../state/types';
 import { StoreState } from '../../../types';
-import { e2e } from '@grafana/e2e';
-import { Icon } from '@grafana/ui';
 import { VariableEditorList } from './VariableEditorList';
 import { VariableEditorEditor } from './VariableEditorEditor';
 import { MapDispatchToProps, MapStateToProps } from 'react-redux';
@@ -69,7 +70,7 @@ class VariableEditorContainerUnconnected extends PureComponent<Props> {
          <h3 className="dashboard-settings__header">
            <a
              onClick={this.onChangeToListMode}
-              aria-label={e2e.pages.Dashboard.Settings.Variables.Edit.General.selectors.headerLink}
+              aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.General.headerLink}
            >
              Variables
            </a>
@@ -77,7 +78,7 @@ class VariableEditorContainerUnconnected extends PureComponent<Props> {
              <span>
                <Icon
                  name="angle-right"
-                  aria-label={e2e.pages.Dashboard.Settings.Variables.Edit.General.selectors.modeLabelNew}
+                  aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.General.modeLabelNew}
                />
                New
              </span>
@@ -86,7 +87,7 @@ class VariableEditorContainerUnconnected extends PureComponent<Props> {
              <span>
                <Icon
                  name="angle-right"
-                  aria-label={e2e.pages.Dashboard.Settings.Variables.Edit.General.selectors.modeLabelEdit}
+                  aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.General.modeLabelEdit}
                />
                Edit
              </span>
@@ -99,7 +100,7 @@ class VariableEditorContainerUnconnected extends PureComponent<Props> {
              type="button"
              className="btn btn-primary"
              onClick={this.onNewVariable}
-              aria-label={e2e.pages.Dashboard.Settings.Variables.List.selectors.newButton}
+              aria-label={selectors.pages.Dashboard.Settings.Variables.List.newButton}
            >
              New
            </a>
--- a/public/app/features/variables/editor/VariableEditorEditor.tsx
+++ b/public/app/features/variables/editor/VariableEditorEditor.tsx
@@ -2,7 +2,8 @@ import React, { ChangeEvent, FormEvent, PureComponent } from 'react';
 import isEqual from 'lodash/isEqual';
 import { AppEvents, VariableType } from '@grafana/data';
 import { InlineFormLabel } from '@grafana/ui';
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';
+
 import { variableAdapters } from '../adapters';
 import { NEW_VARIABLE_ID, toVariablePayload, VariableIdentifier } from '../state/types';
 import { VariableHide, VariableModel } from '../../templating/types';
@@ -129,7 +130,7 @@ export class VariableEditorEditorUnConnected extends PureComponent<Props> {
                  required
                  value={this.props.editor.name}
                  onChange={this.onNameChange}
-                  aria-label={e2e.pages.Dashboard.Settings.Variables.Edit.General.selectors.generalNameInput}
+                  aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalNameInput}
                />
              </div>
              <div className="gf-form max-width-19">
@@ -141,7 +142,7 @@ export class VariableEditorEditorUnConnected extends PureComponent<Props> {
                    className="gf-form-input"
                    value={this.props.variable.type}
                    onChange={this.onTypeChange}
-                    aria-label={e2e.pages.Dashboard.Settings.Variables.Edit.General.selectors.generalTypeSelect}
+                    aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalTypeSelect}
                  >
                    {variableAdapters.list().map(({ id, name }) => (
                      <option key={id} label={name} value={id}>
@@ -168,7 +169,7 @@ export class VariableEditorEditorUnConnected extends PureComponent<Props> {
                  value={this.props.variable.label ?? ''}
                  onChange={this.onLabelChange}
                  placeholder="optional display name"
-                  aria-label={e2e.pages.Dashboard.Settings.Variables.Edit.General.selectors.generalLabelInput}
+                  aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalLabelInput}
                />
              </div>
              <div className="gf-form max-width-19">
@@ -178,7 +179,7 @@ export class VariableEditorEditorUnConnected extends PureComponent<Props> {
                    className="gf-form-input"
                    value={this.props.variable.hide}
                    onChange={this.onHideChange}
-                    aria-label={e2e.pages.Dashboard.Settings.Variables.Edit.General.selectors.generalHideSelect}
+                    aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.General.generalHideSelect}
                  >
                    <option label="" value={VariableHide.dontHide}>
                      {''}
@@ -204,7 +205,7 @@ export class VariableEditorEditorUnConnected extends PureComponent<Props> {
              <button
                type="submit"
                className="btn btn-primary"
-                aria-label={e2e.pages.Dashboard.Settings.Variables.Edit.General.selectors.updateButton}
+                aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.General.updateButton}
              >
                Update
              </button>
@@ -213,7 +214,7 @@ export class VariableEditorEditorUnConnected extends PureComponent<Props> {
              <button
                type="submit"
                className="btn btn-primary"
-                aria-label={e2e.pages.Dashboard.Settings.Variables.Edit.General.selectors.addButton}
+                aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.General.addButton}
              >
                Add
              </button>
--- a/public/app/features/variables/editor/VariableEditorList.tsx
+++ b/public/app/features/variables/editor/VariableEditorList.tsx
@@ -1,9 +1,10 @@
 import React, { MouseEvent, PureComponent } from 'react';
-import { e2e } from '@grafana/e2e';
+import { Icon } from '@grafana/ui';
+import { selectors } from '@grafana/e2e-selectors';
+
 import EmptyListCTA from '../../../core/components/EmptyListCTA/EmptyListCTA';
 import { QueryVariableModel, VariableModel } from '../../templating/types';
 import { toVariableIdentifier, VariableIdentifier } from '../state/types';
-import { Icon } from '@grafana/ui';

 export interface Props {
  variables: VariableModel[];
@@ -72,7 +73,7 @@ export class VariableEditorList extends PureComponent<Props> {
            <div>
              <table
                className="filter-table filter-table--hover"
-                aria-label={e2e.pages.Dashboard.Settings.Variables.List.selectors.table}
+                aria-label={selectors.pages.Dashboard.Settings.Variables.List.table}
              >
                <thead>
                  <tr>
@@ -90,7 +91,7 @@ export class VariableEditorList extends PureComponent<Props> {
                          <span
                            onClick={event => this.onEditClick(event, toVariableIdentifier(variable))}
                            className="pointer template-variable"
-                            aria-label={e2e.pages.Dashboard.Settings.Variables.List.selectors.tableRowNameFields(
+                            aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowNameFields(
                              variable.name
                            )}
                          >
@@ -101,7 +102,7 @@ export class VariableEditorList extends PureComponent<Props> {
                          style={{ maxWidth: '200px' }}
                          onClick={event => this.onEditClick(event, toVariableIdentifier(variable))}
                          className="pointer max-width"
-                          aria-label={e2e.pages.Dashboard.Settings.Variables.List.selectors.tableRowDefinitionFields(
+                          aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowDefinitionFields(
                            variable.name
                          )}
                        >
@@ -113,7 +114,7 @@ export class VariableEditorList extends PureComponent<Props> {
                            <Icon
                              onClick={event => this.onChangeVariableOrder(event, variable, MoveType.up)}
                              name="arrow-up"
-                              aria-label={e2e.pages.Dashboard.Settings.Variables.List.selectors.tableRowArrowUpButtons(
+                              aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowArrowUpButtons(
                                variable.name
                              )}
                            />
@@ -124,7 +125,7 @@ export class VariableEditorList extends PureComponent<Props> {
                            <Icon
                              onClick={event => this.onChangeVariableOrder(event, variable, MoveType.down)}
                              name="arrow-down"
-                              aria-label={e2e.pages.Dashboard.Settings.Variables.List.selectors.tableRowArrowDownButtons(
+                              aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowArrowDownButtons(
                                variable.name
                              )}
                            />
@@ -134,7 +135,7 @@ export class VariableEditorList extends PureComponent<Props> {
                          <a
                            onClick={event => this.onDuplicateVariable(event, toVariableIdentifier(variable))}
                            className="btn btn-inverse btn-small"
-                            aria-label={e2e.pages.Dashboard.Settings.Variables.List.selectors.tableRowDuplicateButtons(
+                            aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowDuplicateButtons(
                              variable.name
                            )}
                          >
@@ -145,7 +146,7 @@ export class VariableEditorList extends PureComponent<Props> {
                          <a
                            onClick={event => this.onRemoveVariable(event, toVariableIdentifier(variable))}
                            className="btn btn-danger btn-small"
-                            aria-label={e2e.pages.Dashboard.Settings.Variables.List.selectors.tableRowRemoveButtons(
+                            aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowRemoveButtons(
                              variable.name
                            )}
                          >
--- a/public/app/features/variables/editor/VariableValuesPreview.tsx
+++ b/public/app/features/variables/editor/VariableValuesPreview.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { VariableModel, VariableOption, VariableWithOptions } from '../../templating/types';
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';

 export interface VariableValuesPreviewProps {
  variable: VariableModel;
@@ -30,7 +30,7 @@ export const VariableValuesPreview: React.FunctionComponent<VariableValuesPrevie
          <div className="gf-form" key={`${o.value}-${index}`}>
            <span
              className="gf-form-label"
-              aria-label={e2e.pages.Dashboard.Settings.Variables.Edit.General.selectors.previewOfValuesOption}
+              aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption}
            >
              {o.text}
            </span>
--- a/public/app/features/variables/pickers/PickerRenderer.tsx
+++ b/public/app/features/variables/pickers/PickerRenderer.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent, useMemo } from 'react';
 import { VariableHide, VariableModel } from '../../templating/types';
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';
 import { variableAdapters } from '../adapters';

 interface Props {
@@ -20,7 +20,7 @@ export const PickerRenderer: FunctionComponent<Props> = props => {
      {props.variable.hide === VariableHide.dontHide && (
        <label
          className="gf-form-label gf-form-label--variable"
-          aria-label={e2e.pages.Dashboard.SubMenu.selectors.submenuItemLabels(labelOrName)}
+          aria-label={selectors.pages.Dashboard.SubMenu.submenuItemLabels(labelOrName)}
        >
          {labelOrName}
        </label>
--- a/public/app/features/variables/pickers/shared/VariableLink.tsx
+++ b/public/app/features/variables/pickers/shared/VariableLink.tsx
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import { getTagColorsFromName, Icon } from '@grafana/ui';
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';
+
 import { VariableTag } from '../../../templating/types';

 interface Props {
@@ -22,7 +23,7 @@ export class VariableLink extends PureComponent<Props> {
      <a
        onClick={this.onClick}
        className="variable-value-link"
-        aria-label={e2e.pages.Dashboard.SubMenu.selectors.submenuItemValueDropDownValueLinkTexts(`${text}`)}
+        aria-label={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${text}`)}
      >
        {text}
        {tags.map(tag => {
--- a/public/app/features/variables/pickers/shared/VariableOptions.tsx
+++ b/public/app/features/variables/pickers/shared/VariableOptions.tsx
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
-import { getTagColorsFromName, Tooltip, Icon } from '@grafana/ui';
-import { e2e } from '@grafana/e2e';
+import { getTagColorsFromName, Icon, Tooltip } from '@grafana/ui';
+import { selectors } from '@grafana/e2e-selectors';
+
 import { VariableOption, VariableTag } from '../../../templating/types';

 export interface Props {
@@ -42,7 +43,7 @@ export class VariableOptions extends PureComponent<Props> {
    return (
      <div
        className={`${multi ? 'variable-value-dropdown multi' : 'variable-value-dropdown single'}`}
-        aria-label={e2e.pages.Dashboard.SubMenu.selectors.submenuItemValueDropDownDropDown}
+        aria-label={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownDropDown}
      >
        <div className="variable-options-wrapper">
          <div className="variable-options-column">
@@ -95,7 +96,7 @@ export class VariableOptions extends PureComponent<Props> {
    return (
      <a key={`${option.value}`} className={highlightClass} onClick={this.onToggle(option)}>
        <span className="variable-option-icon"></span>
-        <span aria-label={e2e.pages.Dashboard.SubMenu.selectors.submenuItemValueDropDownOptionTexts(`${option.text}`)}>
+        <span aria-label={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts(`${option.text}`)}>
          {option.text}
        </span>
      </a>
--- a/public/app/features/variables/query/QueryVariableEditor.tsx
+++ b/public/app/features/variables/query/QueryVariableEditor.tsx
@@ -1,7 +1,6 @@
 import React, { ChangeEvent, PureComponent } from 'react';
-import { e2e } from '@grafana/e2e';
 import { InlineFormLabel, LegacyForms } from '@grafana/ui';
-const { Switch } = LegacyForms;
+import { selectors } from '@grafana/e2e-selectors';

 import templateSrv from '../../templating/template_srv';
 import { SelectionOptionsEditor } from '../editor/SelectionOptionsEditor';
@@ -16,6 +15,8 @@ import { connectWithStore } from '../../../core/utils/connectWithReduxStore';
 import { toVariableIdentifier } from '../state/types';
 import { changeVariableMultiValue } from '../state/actions';

+const { Switch } = LegacyForms;
+
 export interface OwnProps extends VariableEditorProps<QueryVariableModel> {}

 interface ConnectedProps {
@@ -131,7 +132,7 @@ export class QueryVariableEditorUnConnected extends PureComponent<Props, State>
                  onChange={this.onDataSourceChange}
                  required
                  aria-label={
-                    e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.selectors.queryOptionsDataSourceSelect
+                    selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsDataSourceSelect
                  }
                >
                  {this.props.editor.extended?.dataSources.length &&
@@ -153,9 +154,7 @@ export class QueryVariableEditorUnConnected extends PureComponent<Props, State>
                  className="gf-form-input"
                  value={this.props.variable.refresh}
                  onChange={this.onRefreshChange}
-                  aria-label={
-                    e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.selectors.queryOptionsRefreshSelect
-                  }
+                  aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRefreshSelect}
                >
                  <option label="Never" value={VariableRefresh.never}>
                    Never
@@ -194,7 +193,7 @@ export class QueryVariableEditorUnConnected extends PureComponent<Props, State>
              value={this.state.regex ?? this.props.variable.regex}
              onChange={this.onRegExChange}
              onBlur={this.onRegExBlur}
-              aria-label={e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.selectors.queryOptionsRegExInput}
+              aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsRegExInput}
            />
          </div>
          <div className="gf-form max-width-21">
@@ -206,7 +205,7 @@ export class QueryVariableEditorUnConnected extends PureComponent<Props, State>
                className="gf-form-input"
                value={this.props.variable.sort}
                onChange={this.onSortChange}
-                aria-label={e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.selectors.queryOptionsSortSelect}
+                aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsSortSelect}
              >
                <option label="Disabled" value={VariableSort.disabled}>
                  Disabled
@@ -249,9 +248,7 @@ export class QueryVariableEditorUnConnected extends PureComponent<Props, State>
        <div className="gf-form-group">
          <h5>Value groups/tags (Experimental feature)</h5>
          <div
-            aria-label={
-              e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.selectors.valueGroupsTagsEnabledSwitch
-            }
+            aria-label={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.valueGroupsTagsEnabledSwitch}
          >
            <Switch
              label="Enabled"
@@ -272,7 +269,7 @@ export class QueryVariableEditorUnConnected extends PureComponent<Props, State>
                  onChange={this.onTagsQueryChange}
                  onBlur={this.onTagsQueryBlur}
                  aria-label={
-                    e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.selectors.valueGroupsTagsTagsQueryInput
+                    selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.valueGroupsTagsTagsQueryInput
                  }
                />
              </div>
@@ -286,8 +283,7 @@ export class QueryVariableEditorUnConnected extends PureComponent<Props, State>
                  onChange={this.onTagValuesQueryChange}
                  onBlur={this.onTagValuesQueryBlur}
                  aria-label={
-                    e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.selectors
-                      .valueGroupsTagsTagsValuesQueryInput
+                    selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.valueGroupsTagsTagsValuesQueryInput
                  }
                />
              </div>
--- a/public/app/plugins/datasource/testdata/query_ctrl.ts
+++ b/public/app/plugins/datasource/testdata/query_ctrl.ts
@@ -2,7 +2,7 @@ import _ from 'lodash';
 import { IScope } from 'angular';
 import { getBackendSrv } from '@grafana/runtime';
 import { dateMath, dateTime } from '@grafana/data';
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';

 import { QueryCtrl } from 'app/plugins/sdk';
 import { defaultQuery } from './runStreams';
@@ -34,7 +34,7 @@ export class TestDataQueryCtrl extends QueryCtrl {
  digest: (promise: Promise<any>) => Promise<any>;

  showLabels = false;
-  selectors: typeof e2e.components.DataSource.TestData.QueryTab.selectors;
+  selectors: typeof selectors.components.DataSource.TestData.QueryTab;

  /** @ngInject */
  constructor($scope: IScope, $injector: any) {
@@ -45,7 +45,7 @@ export class TestDataQueryCtrl extends QueryCtrl {
    this.newPointTime = dateTime();
    this.selectedPoint = { text: 'Select point', value: null };
    this.showLabels = showLabelsFor.includes(this.target.scenarioId);
-    this.selectors = e2e.components.DataSource.TestData.QueryTab.selectors;
+    this.selectors = selectors.components.DataSource.TestData.QueryTab;
  }

  getPoints() {
--- a/public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx
+++ b/public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx
@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import { TimeSeries } from 'app/core/core';
-import { SeriesColorPicker, Icon } from '@grafana/ui';
-import { e2e } from '@grafana/e2e';
+import { Icon, SeriesColorPicker } from '@grafana/ui';
+import { selectors } from '@grafana/e2e-selectors';

 export const LEGEND_STATS = ['min', 'max', 'avg', 'current', 'total'];

@@ -143,7 +143,7 @@ class LegendSeriesLabel extends PureComponent<LegendSeriesLabelProps & LegendSer
        title={label}
        key="label"
        onClick={e => this.props.onLabelClick(e)}
-        aria-label={e2e.components.Panels.Visualization.Graph.Legend.selectors.legendItemAlias(label)}
+        aria-label={selectors.components.Panels.Visualization.Graph.Legend.legendItemAlias(label)}
      >
        {label}
      </a>,
--- a/public/app/plugins/panel/graph/axes_editor.ts
+++ b/public/app/plugins/panel/graph/axes_editor.ts
@@ -1,4 +1,4 @@
-import { e2e } from '@grafana/e2e';
+import { selectors } from '@grafana/e2e-selectors';
 import { GraphCtrl } from './module';

 export class AxesEditorCtrl {
@@ -8,7 +8,7 @@ export class AxesEditorCtrl {
  xAxisModes: any;
  xAxisStatOptions: any;
  xNameSegment: any;
-  selectors: typeof e2e.components.Panels.Visualization.Graph.VisualizationTab.selectors;
+  selectors: typeof selectors.components.Panels.Visualization.Graph.VisualizationTab;

  /** @ngInject */
  constructor(private $scope: any) {
@@ -45,7 +45,7 @@ export class AxesEditorCtrl {
        this.panel.xaxis.name = 'specify field';
      }
    }
-    this.selectors = e2e.components.Panels.Visualization.Graph.VisualizationTab.selectors;
+    this.selectors = selectors.components.Panels.Visualization.Graph.VisualizationTab;
  }

  setUnitFormat(axis: { format: any }) {