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/core/components/Login/LoginForm.tsx

@@ -1,4 +1,6 @@
-import React, { PureComponent, SyntheticEvent, ChangeEvent } from 'react';
+import React, { ChangeEvent, PureComponent, SyntheticEvent } from 'react';
+import { e2e } from '@grafana/e2e';
+
 import { FormModel } from './LoginCtrl';
 
 interface Props {
@@ -72,7 +74,7 @@ export class LoginForm extends PureComponent<Props, State> {
             className="gf-form-input login-form-input"
             required
             placeholder={this.props.loginHint}
-            aria-label="Username input field"
+            aria-label={e2e.pages.Login.selectors.username}
             onChange={this.onChangeUsername}
           />
         </div>
@@ -85,7 +87,7 @@ export class LoginForm extends PureComponent<Props, State> {
             ng-model="formModel.password"
             id="inputPassword"
             placeholder={this.props.passwordHint}
-            aria-label="Password input field"
+            aria-label={e2e.pages.Login.selectors.password}
             onChange={this.onChangePassword}
           />
         </div>
@@ -93,7 +95,7 @@ export class LoginForm extends PureComponent<Props, State> {
           {!this.props.isLoggingIn ? (
             <button
               type="submit"
-              aria-label="Login button"
+              aria-label={e2e.pages.Login.selectors.submit}
               className={`btn btn-large p-x-2 ${this.state.valid ? 'btn-primary' : 'btn-inverse'}`}
               onClick={this.onSubmit}
               disabled={!this.state.valid}

public/app/core/components/search/search_results.html

@@ -20,7 +20,7 @@
   <div class="search-section__header" ng-show="section.hideHeader"></div>
 
   <div ng-if="section.expanded">
-    <a ng-repeat="item in section.items" class="search-item search-item--indent" ng-class="{'selected': item.selected}" ng-href="{{::item.url}}" aria-label="{{::item.title}}">
+    <a ng-repeat="item in section.items" class="search-item search-item--indent" ng-class="{'selected': item.selected}" ng-href="{{::item.url}}" aria-label={{ctrl.selectors.dashboards(item.title)}}>
       <div ng-click="ctrl.toggleSelection(item, $event)" class="center-vh">
         <gf-form-checkbox
            ng-show="ctrl.editable"

public/app/core/components/search/search_results.ts

@@ -1,4 +1,6 @@
 import _ from 'lodash';
+import { e2e } from '@grafana/e2e';
+
 import coreModule from '../../core_module';
 import appEvents from 'app/core/app_events';
 import { CoreEvents } from 'app/types';
@@ -9,9 +11,12 @@ export class SearchResultsCtrl {
   onTagSelected: any;
   onFolderExpanding: any;
   editable: boolean;
+  selectors: typeof e2e.pages.Dashboards.selectors;
 
   /** @ngInject */
-  constructor(private $location: any) {}
+  constructor(private $location: any) {
+    this.selectors = e2e.pages.Dashboards.selectors;
+  }
 
   toggleFolderExpand(section: any) {
     if (section.toggle) {