e2e: Uses Cypress instead of Puppeteer (#20753)

* WIP: intial commit

* Tests: Runs e2e tests

* Refactor: Adds BASE_URL support

* Refactor: Adds namespacing

* Refactor: Cleans up the Page api

* Build: Adds to build-branches-and-prs job for testing

* Build: Hardcoded image for now

* Refactor: Uses Selectors in App

* Refactor: Adds addDataSource flow

* WIP

* Refactor: Adds e2eScenario

* Refactor: Adds add and delete scenarios

* Refactor: Adds logging

* Refactor: Adds ability to for Selectors with variables

* Refactor: Using variable selectors instead

* Refactor: Adds flow until Share Panel

* Refactor: Adds clicking on rendered image link

* Refactor: Deletes log output

* Refactor: Updates snapshots

* Chore: Reverts changes

* Refactor: Removes log plugin because maybe it breaks yarn build

* Refactor: Adds rendered image download

* Refactor: Adds image comparison

* Refactor: Removes uncaught errors override

* Refactor: Changes order of images to compare

* Refactor: Updates truth image

* Build: Updates path to CI artifacts

* Refactor: Cleaning up types and config

* wip

* Refactor: Cleans up external api

* Refactor: More cleanup

* Refactor: More cleanup

* Refactor: Removes usages of Pages and Flows

* Refactor: Removes last traces of Cypress in spec

* Refactor: Adds comments

public/app/features/datasources/settings/BasicSettings.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 import { FormLabel, Input, Switch } from '@grafana/ui';
+import { e2e } from '@grafana/e2e';
 
 export interface Props {
   dataSourceName: string;
@@ -28,7 +29,7 @@ const BasicSettings: FC<Props> = ({ dataSourceName, isDefault, onDefaultChange,
             placeholder="Name"
             onChange={event => onNameChange(event.target.value)}
             required
-            aria-label="Datasource settings page name input field"
+            aria-label={e2e.pages.DataSource.selectors.name}
           />
         </div>
         <Switch

public/app/features/datasources/settings/ButtonRow.tsx

@@ -1,4 +1,6 @@
 import React, { FC } from 'react';
+import { e2e } from '@grafana/e2e';
+
 import config from 'app/core/config';
 
 export interface Props {
@@ -17,7 +19,7 @@ const ButtonRow: FC<Props> = ({ isReadOnly, onDelete, onSubmit, onTest }) => {
           className="btn btn-primary"
           disabled={isReadOnly}
           onClick={event => onSubmit(event)}
-          aria-label="Save and Test button"
+          aria-label={e2e.pages.DataSource.selectors.saveAndTest}
         >
           Save &amp; Test
         </button>
@@ -32,7 +34,7 @@ const ButtonRow: FC<Props> = ({ isReadOnly, onDelete, onSubmit, onTest }) => {
         className="btn btn-danger"
         disabled={isReadOnly}
         onClick={onDelete}
-        aria-label="Delete button"
+        aria-label={e2e.pages.DataSource.selectors.delete}
       >
         Delete
       </button>

public/app/features/datasources/settings/DataSourceSettingsPage.tsx

@@ -3,6 +3,7 @@ import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 import isString from 'lodash/isString';
+import { e2e } from '@grafana/e2e';
 // Components
 import Page from 'app/core/components/Page/Page';
 import { GenericDataSourcePlugin, PluginSettings } from './PluginSettings';
@@ -271,7 +272,7 @@ export class DataSourceSettingsPage extends PureComponent<Props, State> {
 
         <div className="gf-form-group">
           {testingMessage && (
-            <div className={`alert-${testingStatus} alert`} aria-label="Datasource settings page Alert">
+            <div className={`alert-${testingStatus} alert`} aria-label={e2e.pages.DataSource.selectors.alert}>
               <div className="alert-icon">
                 {testingStatus === 'error' ? (
                   <i className="fa fa-exclamation-triangle" />
@@ -280,7 +281,7 @@ export class DataSourceSettingsPage extends PureComponent<Props, State> {
                 )}
               </div>
               <div className="alert-body">
-                <div className="alert-title" aria-label="Datasource settings page Alert message">
+                <div className="alert-title" aria-label={e2e.pages.DataSource.selectors.alertMessage}>
                   {testingMessage}
                 </div>
               </div>

public/app/features/datasources/settings/__snapshots__/BasicSettings.test.tsx.snap

@@ -22,7 +22,7 @@ exports[`Render should render component 1`] = `
         Name
       </Component>
       <Input
-        aria-label="Datasource settings page name input field"
+        aria-label="Data source settings page name input field"
         className="gf-form-input max-width-23"
         onChange={[Function]}
         placeholder="Name"

public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`Render should render component 1`] = `
     Test
   </button>
   <button
-    aria-label="Delete button"
+    aria-label="Data source settings page Delete button"
     className="btn btn-danger"
     disabled={true}
     onClick={[MockFunction]}
@@ -34,7 +34,7 @@ exports[`Render should render with buttons enabled 1`] = `
   className="gf-form-button-row"
 >
   <button
-    aria-label="Save and Test button"
+    aria-label="Data source settings page Save and Test button"
     className="btn btn-primary"
     disabled={false}
     onClick={[Function]}
@@ -43,7 +43,7 @@ exports[`Render should render with buttons enabled 1`] = `
     Save & Test
   </button>
   <button
-    aria-label="Delete button"
+    aria-label="Data source settings page Delete button"
     className="btn btn-danger"
     disabled={false}
     onClick={[MockFunction]}