@grafana/e2e: improvements (#26838)

* Minor changes

* Only expect login “change password” notification for default passwords

* Optionally populate basic auth when adding a datasource

* Optionally match screenshot when adding a panel

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

@@ -3,25 +3,43 @@ import { e2e } from '../index';
 import { fromBaseUrl, getDataSourceId } from '../support/url';
 import { fromBaseUrl, getDataSourceId } from '../support/url';
 
 
 export interface AddDataSourceConfig {
 export interface AddDataSourceConfig {
+  basicAuth: boolean;
+  basicAuthPassword: string;
+  basicAuthUser: string;
   checkHealth: boolean;
   checkHealth: boolean;
   expectedAlertMessage: string | RegExp;
   expectedAlertMessage: string | RegExp;
   form: Function;
   form: Function;
   name: string;
   name: string;
+  skipTlsVerify: boolean;
   type: string;
   type: string;
 }
 }
 
 
 // @todo this actually returns type `Cypress.Chainable`
 // @todo this actually returns type `Cypress.Chainable`
 export const addDataSource = (config?: Partial<AddDataSourceConfig>): any => {
 export const addDataSource = (config?: Partial<AddDataSourceConfig>): any => {
   const fullConfig = {
   const fullConfig = {
+    basicAuth: false,
+    basicAuthPassword: '',
+    basicAuthUser: '',
     checkHealth: false,
     checkHealth: false,
     expectedAlertMessage: 'Data source is working',
     expectedAlertMessage: 'Data source is working',
     form: () => {},
     form: () => {},
     name: `e2e-${Date.now()}`,
     name: `e2e-${Date.now()}`,
+    skipTlsVerify: false,
     type: 'TestData DB',
     type: 'TestData DB',
     ...config,
     ...config,
   } as AddDataSourceConfig;
   } as AddDataSourceConfig;
 
 
-  const { checkHealth, expectedAlertMessage, form, name, type } = fullConfig;
+  const {
+    basicAuth,
+    basicAuthPassword,
+    basicAuthUser,
+    checkHealth,
+    expectedAlertMessage,
+    form,
+    name,
+    skipTlsVerify,
+    type,
+  } = fullConfig;
 
 
   e2e().logToConsole('Adding data source with name:', name);
   e2e().logToConsole('Adding data source with name:', name);
   e2e.pages.AddDataSource.visit();
   e2e.pages.AddDataSource.visit();
@@ -32,7 +50,39 @@ export const addDataSource = (config?: Partial<AddDataSourceConfig>): any => {
 
 
   e2e.pages.DataSource.name().clear();
   e2e.pages.DataSource.name().clear();
   e2e.pages.DataSource.name().type(name);
   e2e.pages.DataSource.name().type(name);
+
+  if (basicAuth) {
+    e2e()
+      .contains('label', 'Basic auth')
+      .scrollIntoView()
+      .click();
+    e2e()
+      .contains('.gf-form-group', 'Basic Auth Details')
+      .should('be.visible')
+      .scrollIntoView()
+      .within(() => {
+        if (basicAuthUser) {
+          e2e()
+            .get('[placeholder=user]')
+            .type(basicAuthUser);
+        }
+        if (basicAuthPassword) {
+          e2e()
+            .get('[placeholder=Password]')
+            .type(basicAuthPassword);
+        }
+      });
+  }
+
+  if (skipTlsVerify) {
+    e2e()
+      .contains('label', 'Skip TLS Verify')
+      .scrollIntoView()
+      .click();
+  }
+
   form();
   form();
+
   e2e.pages.DataSource.saveAndTest().click();
   e2e.pages.DataSource.saveAndTest().click();
   e2e.pages.DataSource.alert().should('exist');
   e2e.pages.DataSource.alert().should('exist');
   e2e.pages.DataSource.alertMessage().contains(expectedAlertMessage); // assertion
   e2e.pages.DataSource.alertMessage().contains(expectedAlertMessage); // assertion

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

@@ -10,10 +10,11 @@ export interface AddPanelConfig {
   };
   };
   dashboardUid: string;
   dashboardUid: string;
   dataSourceName: string;
   dataSourceName: string;
+  matchScreenshot: boolean;
   queriesForm: (config: AddPanelConfig) => void;
   queriesForm: (config: AddPanelConfig) => void;
   panelTitle: string;
   panelTitle: string;
+  screenshotName: string;
   visualizationName: string;
   visualizationName: string;
-  waitForChartData: boolean;
 }
 }
 
 
 // @todo this actually returns type `Cypress.Chainable`
 // @todo this actually returns type `Cypress.Chainable`
@@ -26,14 +27,24 @@ export const addPanel = (config?: Partial<AddPanelConfig>): any =>
       },
       },
       dashboardUid: lastAddedDashboardUid,
       dashboardUid: lastAddedDashboardUid,
       dataSourceName: lastAddedDataSource,
       dataSourceName: lastAddedDataSource,
+      matchScreenshot: false,
       panelTitle: `e2e-${Date.now()}`,
       panelTitle: `e2e-${Date.now()}`,
       queriesForm: () => {},
       queriesForm: () => {},
+      screenshotName: 'chart',
       visualizationName: 'Table',
       visualizationName: 'Table',
-      waitForChartData: true,
       ...config,
       ...config,
     } as AddPanelConfig;
     } as AddPanelConfig;
 
 
-    const { chartData, dashboardUid, dataSourceName, panelTitle, queriesForm, visualizationName } = fullConfig;
+    const {
+      chartData,
+      dashboardUid,
+      dataSourceName,
+      matchScreenshot,
+      panelTitle,
+      queriesForm,
+      screenshotName,
+      visualizationName,
+    } = fullConfig;
 
 
     e2e.flows.openDashboard({ uid: dashboardUid });
     e2e.flows.openDashboard({ uid: dashboardUid });
     e2e.pages.Dashboard.Toolbar.toolbarItems('Add panel').click();
     e2e.pages.Dashboard.Toolbar.toolbarItems('Add panel').click();
@@ -88,6 +99,13 @@ export const addPanel = (config?: Partial<AddPanelConfig>): any =>
     // Wait for RxJS
     // Wait for RxJS
     e2e().wait(500);
     e2e().wait(500);
 
 
+    if (matchScreenshot) {
+      e2e.components.Panels.Panel.containerByTitle(panelTitle)
+        .find('.panel-content')
+        .screenshot(screenshotName);
+      e2e().compareScreenshots(screenshotName);
+    }
+
     // @todo remove `wrap` when possible
     // @todo remove `wrap` when possible
     return e2e().wrap({ config: fullConfig });
     return e2e().wrap({ config: fullConfig });
   });
   });

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

 import { e2e } from '../index';
 import { e2e } from '../index';
 
 
-export const login = (username: string = 'admin', password: string = 'admin') => {
+const DEFAULT_USERNAME = 'admin';
+const DEFAULT_PASSWORD = 'admin';
+
+export const login = (username = DEFAULT_USERNAME, password = DEFAULT_PASSWORD) => {
   e2e().logToConsole('Logging in with username:', username);
   e2e().logToConsole('Logging in with username:', username);
   e2e.pages.Login.visit();
   e2e.pages.Login.visit();
   e2e.pages.Login.username()
   e2e.pages.Login.username()
@@ -10,13 +13,11 @@ export const login = (username: string = 'admin', password: string = 'admin') =>
   e2e.pages.Login.submit().click();
   e2e.pages.Login.submit().click();
 
 
   // Local tests will have insecure credentials
   // Local tests will have insecure credentials
-  e2e()
-    .url()
-    .then(url => {
+  if (password === DEFAULT_PASSWORD) {
     e2e.pages.Login.skip()
     e2e.pages.Login.skip()
       .should('be.visible')
       .should('be.visible')
       .click();
       .click();
-    });
+  }
 
 
   e2e()
   e2e()
     .get('.login-page')
     .get('.login-page')