Create custom commands in Cypress

Two functions are moved from the 'helpers' module to Cypress 'commands'.

Author: MatteoStifano

tests/cypress/e2e/helpers.ts

@@ -11,19 +11,6 @@ export const inputServiceSelector = 'input[id="input_Service"]';
 export const inputTemplateSelector = 'input[id="input_Predefined graph"]';
 export const panelContentSelector = '[class="panel-content"]';
 
-export function loginGrafana(grafanaUsername: string, passwordGrafana: string) {
-  cy.visit('/login');
-  cy.get('input[name="user"]').type(grafanaUsername);
-  cy.get('input[name="password"]').type(passwordGrafana);
-  cy.get('[aria-label="Login button"]').click();
-}
-
-export function addNewPanel() {
-  // add a new panel in a new dashboard
-  cy.visit('/dashboard/new');
-  cy.get('button[aria-label="Add new panel"]').click();
-}
-
 export function addCmkDatasource(cmkUsername: string, cmkPassword: string) {
   cy.visit('/datasources/new');
   cy.get('button[aria-label="Add data source Checkmk"]').contains('Checkmk').click();

tests/cypress/e2e/spec.cy.ts

@@ -1,3 +1,4 @@
+import '../support/commands';
 import {
   activateCmkChanges,
   createCmkAutomationUser,
@@ -8,7 +9,6 @@ import {
 } from './api_helpers';
 import {
   addCmkDatasource,
-  addNewPanel,
   inputFilterSelector,
   inputGraphTypeSelector,
   inputHostLabelsSelector,
@@ -18,7 +18,6 @@ import {
   inputServiceRegexSelector,
   inputServiceSelector,
   inputTemplateSelector,
-  loginGrafana,
   panelContentSelector,
   rmCmkDatasource,
   saveDashboard,
@@ -42,13 +41,13 @@ describe('e2e tests', () => {
     executeServiceDiscovery(hostName1, 'new');
     activateCmkChanges('cmk');
 
-    loginGrafana(Cypress.env('grafanaUsername'), Cypress.env('grafanaPassword'));
+    cy.loginGrafana();
     addCmkDatasource(cmkUser, cmkPassword);
   });
 
   it('time-usage panel by service (single host)', {}, () => {
-    loginGrafana(Cypress.env('grafanaUsername'), Cypress.env('grafanaPassword'));
-    addNewPanel();
+    cy.loginGrafana();
+    cy.addNewPanel();
 
     cy.get(inputFilterSelector).type('Hostname{enter}'); // Filter -> 'Host name'
     cy.get(inputFilterSelector).type('Service{enter}'); // Filter -> 'Service'
@@ -69,8 +68,8 @@ describe('e2e tests', () => {
   });
 
   it('time-usage panel by service (multiple hosts)', {}, () => {
-    loginGrafana(Cypress.env('grafanaUsername'), Cypress.env('grafanaPassword'));
-    addNewPanel();
+    cy.loginGrafana();
+    cy.addNewPanel();
 
     cy.get(inputFilterSelector).type('Service{enter}'); // Filter -> 'Service'
 
@@ -92,8 +91,8 @@ describe('e2e tests', () => {
   });
 
   it('RAM-used panel by service regex (multiple hosts)', {}, () => {
-    loginGrafana(Cypress.env('grafanaUsername'), Cypress.env('grafanaPassword'));
-    addNewPanel();
+    cy.loginGrafana();
+    cy.addNewPanel();
 
     cy.get(inputFilterSelector).type('Service regex{enter}'); // Filter -> 'Service'
     cy.contains('Service regex').should('exist');
@@ -113,8 +112,8 @@ describe('e2e tests', () => {
   });
 
   it('RAM-used panel by host labels (multiple hosts, single metric)', {}, () => {
-    loginGrafana(Cypress.env('grafanaUsername'), Cypress.env('grafanaPassword'));
-    addNewPanel();
+    cy.loginGrafana();
+    cy.addNewPanel();
 
     cy.get(inputFilterSelector).type('Host labels{enter}'); // Filter -> 'Host labels'
     cy.contains('Host labels').should('exist');
@@ -140,8 +139,8 @@ describe('e2e tests', () => {
   });
 
   it('RAM-used panel by service regex and hostname regex', {}, () => {
-    loginGrafana(Cypress.env('grafanaUsername'), Cypress.env('grafanaPassword'));
-    addNewPanel();
+    cy.loginGrafana();
+    cy.addNewPanel();
 
     cy.get(inputFilterSelector).type('Service regex{enter}'); // Filter -> 'Service'
     cy.contains('Service regex').should('exist');

tests/cypress/support/commands.ts

@@ -1,37 +1,23 @@
-/// <reference types="cypress" />
-// ***********************************************
-// This example commands.ts shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-//
-// declare global {
-//   namespace Cypress {
-//     interface Chainable {
-//       login(email: string, password: string): Chainable<void>
-//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
-//     }
-//   }
-// }
+export {};
+
+Cypress.Commands.add('loginGrafana', () => {
+  cy.visit('/login');
+  cy.get('input[name="user"]').type(Cypress.env('grafanaUsername'));
+  cy.get('input[name="password"]').type(Cypress.env('grafanaPassword'));
+  cy.get('[aria-label="Login button"]').click();
+});
+
+Cypress.Commands.add('addNewPanel', () => {
+  // add a new panel in a new dashboard
+  cy.visit('/dashboard/new');
+  cy.get('button[aria-label="Add new panel"]').click();
+});
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      loginGrafana(): Chainable<void>;
+      addNewPanel(): Chainable<void>;
+    }
+  }
+}