Add custom commands for selecting form elements

Author: asirvadAbrahamVarghese

cypress/README.md

@@ -56,6 +56,13 @@ ManageIQ implements the following cypress extensions:
 * `cy.toolbarItems(toolbarButton)` - returns an array of objects {text: String, disabled: Boolean} for the toolbar dropdown buttons for when a toolbar button is clicked. `toolbarButton` is the string for the text of the toolbar button that you want to click on.
 * `cy.toolbar(toolbarButton, dropdownButton)` - click on the toolbar button specified by the user. Can also then click on a specified dropdown button as well. `toolbarButton` is the string for the text of the toolbar button that you want to click on. `dropdownButton` is the string for the text of the toolbar dropdown button that you want to click on. s
 
+##### element_selectors
+
+* `cy.getFormFooterButtonByType(name, type)` - retrieves form footer button by its name and type. `name` is the name or text content of the button. `type` is the HTML button type (e.g., 'button', 'submit', 'reset'). Defaults to 'button'. e.g. `cy.getFormFooterButtonByType('Save');`, `cy.getFormFooterButtonByType('Reset', 'reset');`
+* `cy.getFormInputFieldById(inputId, type)` - retrieves a form input field by its ID and type. `inputId` is the ID of the input field. `type` is the HTML input type (e.g., 'text', 'email', 'password'). Defaults to 'text'. e.g. `cy.getFormInputFieldById('name');`, `cy.getFormInputFieldById('name', 'text');`
+* `getFormLabelByInputId(inputId)` - retrieves a form label associated with a specific input field by its ID. `inputId` is the ID of the input field. e.g. `cy.getFormLabelByInputId('name');`
+* `cy.getFormSelectFieldById(selectId)` - retrieves a form select field by its ID. `selectId` is the ID of the select field. e.g. `cy.getFormSelectFieldById('select-scan-limit');`
+
 #### Assertions
 
 * `cy.expect_explorer_title(title)` - check that the title on an explorer screen matches the provided title. `title`: String for the title.

cypress/support/commands/element_selectors.js

@@ -0,0 +1,57 @@
+/* eslint-disable no-undef */
+
+/**
+ * Retrieves a form footer button by its name and type.
+ *
+ * @param {string} name - The name or text content of the button.
+ * @param {string} [type='button'] - The HTML button type (e.g., 'button', 'submit', 'reset'). Defaults to 'button'.
+ * @returns {Element} The matched button element.
+ *
+ * Example:
+ *   cy.getFormFooterButtonByType('Save Changes');
+ *   cy.getFormFooterButtonByType('Reset', 'reset');
+ */
+Cypress.Commands.add('getFormFooterButtonByType', (name, type = 'button') =>
+  cy.contains(`#main-content .bx--btn-set button[type="${type}"]`, name)
+);
+
+/**
+ * Retrieves a form input field by its ID and type.
+ *
+ * @param {string} inputId - The ID of the input field.
+ * @param {string} [type='text'] - The HTML input type (e.g., 'text', 'email', 'password'). Defaults to 'text'.
+ * @returns {Element} The matched input field element.
+ *
+ * Example:
+ *   cy.getFormInputFieldById('name');
+ *   cy.getFormInputFieldById('name', 'text');
+ */
+Cypress.Commands.add('getFormInputFieldById', (inputId, type = 'text') =>
+  cy.get(`#main-content .bx--form input#${inputId}[type="${type}"]`)
+);
+
+/**
+ * Retrieves a form label associated with a specific input field by its ID.
+ *
+ * @param {string} inputId - The ID of the input field.
+ * @returns {Element} The matched label element.
+ *
+ * Example:
+ *   cy.getFormLabelByInputId('name');
+ */
+Cypress.Commands.add('getFormLabelByInputId', (inputId) =>
+  cy.get(`#main-content .bx--form label[for="${inputId}"]`)
+);
+
+/**
+ * Retrieves a form select field by its ID.
+ *
+ * @param {string} selectId - The ID of the select field.
+ * @returns {Element} The matched select field element.
+ *
+ * Example:
+ *   cy.getFormSelectFieldById('select-scan-limit');
+ */
+Cypress.Commands.add('getFormSelectFieldById', (selectId) =>
+  cy.get(`#main-content .bx--form select#${selectId}`)
+);

cypress/support/e2e.js

@@ -41,6 +41,7 @@
 
 // Commands
 import './commands/explorer.js'
+import './commands/element_selectors.js';
 import './commands/gtl.js'
 import './commands/login.js'
 import './commands/menu.js'