e2e: Adds better log information during test runs (#20987)

* e2e: Adds log output when you use a selector

* e2e: Adds more log output

* Refactor: Changes after PR comments

packages/grafana-e2e/cypress/plugins/index.js

@@ -10,6 +10,12 @@ module.exports = on => {
   // });
   on('file:preprocessor', cypressTypeScriptPreprocessor);
   on('task', {
-    compareSnapshotsPlugin
+    compareSnapshotsPlugin,
+  });
+  on('task', {
+    log(args) {
+      args.optional ? console.log(args.message, args.optional) : console.log(args.message);
+      return null;
+    },
   });
 };

packages/grafana-e2e/cypress/support/commands.ts

@@ -21,3 +21,7 @@ Cypress.Commands.add('compareSnapshot', (args: CompareSnapshotArgs) => {
     }
   });
 });
+
+Cypress.Commands.add('logToConsole', (message: string, optional?: any) => {
+  cy.task('log', { message, optional });
+});

packages/grafana-e2e/cypress/support/index.d.ts

@@ -3,5 +3,6 @@
 declare namespace Cypress {
   interface Chainable {
     compareSnapshot(args: CompareSnapshotArgs): void;
+    logToConsole(message: string, optional?: any): void;
   }
 }

packages/grafana-e2e/package.json

@@ -26,7 +26,6 @@
   "devDependencies": {
     "@cypress/webpack-preprocessor": "4.1.1",
     "blink-diff": "1.0.13",
-    "cypress": "3.6.1",
     "rollup": "1.6.0",
     "rollup-plugin-commonjs": "9.2.1",
     "rollup-plugin-node-resolve": "4.0.1",
@@ -37,5 +36,8 @@
     "ts-loader": "6.2.1",
     "typescript": "3.7.2"
   },
-  "types": "src/index.ts"
+  "types": "src/index.ts",
+  "dependencies": {
+    "cypress": "3.7.0"
+  }
 }

packages/grafana-e2e/src/flows/addDashboard.ts

@@ -2,9 +2,11 @@ import { e2e } from '../index';
 import { Url } from '../support/url';
 
 export const addDashboard = async (): Promise<{ dashboardTitle: string; uid: string }> => {
+  e2e().logToConsole('Adding dashboard');
   e2e.pages.AddDashboard.visit();
 
   const dashboardTitle = e2e.flows.saveNewDashboard();
+  e2e().logToConsole('Added dashboard with title:', dashboardTitle);
 
   return new Promise(resolve => {
     e2e()

packages/grafana-e2e/src/flows/addDataSource.ts

@@ -2,7 +2,7 @@ import { e2e } from '../index';
 
 export const addDataSource = (pluginName?: string): string => {
   pluginName = pluginName || 'TestData DB';
-
+  e2e().logToConsole('Adding data source with pluginName:', pluginName);
   e2e.pages.AddDataSource.visit();
   e2e.pages.AddDataSource.dataSourcePlugins(pluginName).click();
 
@@ -12,6 +12,7 @@ export const addDataSource = (pluginName?: string): string => {
   e2e.pages.DataSource.saveAndTest().click();
   e2e.pages.DataSource.alert().should('exist');
   e2e.pages.DataSource.alertMessage().should('contain.text', 'Data source is working');
+  e2e().logToConsole('Added data source with name:', dataSourceName);
 
   return dataSourceName;
 };

packages/grafana-e2e/src/flows/deleteDashboard.ts

@@ -2,6 +2,7 @@ import { Url } from '../support/url';
 import { e2e } from '../index';
 
 export const deleteDashboard = (dashBoardUid: string) => {
+  e2e().logToConsole('Deleting dashboard with uid:', dashBoardUid);
   e2e().request('DELETE', Url.fromBaseUrl(`/api/dashboards/uid/${dashBoardUid}`));
 
   /* https://github.com/cypress-io/cypress/issues/2831

packages/grafana-e2e/src/flows/deleteDataSource.ts

@@ -2,6 +2,7 @@ import { Url } from '../support/url';
 import { e2e } from '../index';
 
 export const deleteDataSource = (dataSourceName: string) => {
+  e2e().logToConsole('Deleting data source with name:', dataSourceName);
   e2e().request('DELETE', Url.fromBaseUrl(`/api/datasources/name/${dataSourceName}`));
 
   /* https://github.com/cypress-io/cypress/issues/2831

packages/grafana-e2e/src/flows/login.ts

 import { e2e } from '../index';
 
 export const login = (username: string, password: string) => {
+  e2e().logToConsole('Trying to login with:', { username, password });
   e2e.pages.Login.visit();
   e2e.pages.Login.username().type(username);
   e2e.pages.Login.password().type(password);
   e2e.pages.Login.submit().click();
+  e2e().logToConsole('Logged in with', { username, password });
 };

packages/grafana-e2e/src/support/types.ts

@@ -20,15 +20,22 @@ export const pageFactory = <S extends Selectors>({ url, selectors }: PageFactory
     const value = selectors[key];
     if (typeof value === 'string') {
       // @ts-ignore
-      pageObjects[key] = () => e2e().get(Selector.fromAriaLabel(value));
+      pageObjects[key] = () => {
+        e2e().logToConsole('Retrieving Selector:', value);
+        return e2e().get(Selector.fromAriaLabel(value));
+      };
     }
     if (typeof value === 'function') {
       // @ts-ignore
       pageObjects[key] = (text?: string) => {
         if (!text) {
-          return e2e().get(value());
+          const selector = value();
+          e2e().logToConsole('Retrieving Selector:', selector);
+          return e2e().get(selector);
         }
-        return e2e().get(Selector.fromAriaLabel(value(text)));
+        const selector = value(text);
+        e2e().logToConsole('Retrieving Selector:', selector);
+        return e2e().get(Selector.fromAriaLabel(selector));
       };
     }
   });

packages/grafana-e2e/tsconfig.json

 {
   "extends": "../tsconfig.json",
-  "include": ["src/**/*.ts"],
+  "include": ["src/**/*.ts", "./cypress/support/index.d.ts"],
   "exclude": ["dist", "node_modules"],
   "compilerOptions": {
     "types": ["cypress"],

yarn.lock

@@ -7932,10 +7932,10 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
-cypress@3.6.1:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-3.6.1.tgz#4420957923879f60b7a5146ccbf81841a149b653"
-  integrity sha512-6n0oqENdz/oQ7EJ6IgESNb2M7Bo/70qX9jSJsAziJTC3kICfEMmJUlrAnP9bn+ut24MlXQST5nRXhUP5nRIx6A==
+cypress@3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-3.7.0.tgz#e2cd71b87b6ce0d4c72c6ea25da1005d75c1f231"
+  integrity sha512-o+vfRxqAba8TduelzfZQ4WHmj2yNEjaoO2EuZ8dZ9pJpuW+WGtBGheKIp6zkoQsp8ZgFe8OoHh1i2mY8BDnMAw==
   dependencies:
     "@cypress/listr-verbose-renderer" "0.4.1"
     "@cypress/xvfb" "1.2.4"