Merge pull request #9689 from asirvadAbrahamVarghese/enhance-form-element-selectors

Enhance form element selectors

Author: jrafanie

cypress/README.md

@@ -82,7 +82,7 @@ ManageIQ implements the following cypress extensions:
 
 ##### element_selectors
 
-* `cy.getFormFooterButtonByTypeWithText({ buttonType, buttonText })` - retrieves form footer button by its name and type. `buttonText` is the name or text content of the button. `buttonType` is the HTML button type (e.g., 'button', 'submit', 'reset'). Defaults to 'button'. e.g. `cy.getFormFooterButtonByType({buttonType: 'Reset', buttonText: 'reset'});`, `cy.getFormFooterButtonByTypeWithText({buttonText: 'Cancel'});`
+* `cy.getFormFooterButtonByTypeWithText({ buttonType, buttonText, buttonWrapperClass })` - retrieves form footer button by its name and type. `buttonText` is the name or text content of the button. `buttonType` is the HTML button type (e.g., 'button', 'submit', 'reset'). Defaults to 'button'. `buttonWrapperClass` is the CSS class of the wrapper element containing the buttons. Defaults to 'bx--btn-set'. e.g. `cy.getFormFooterButtonByTypeWithText({buttonText: 'Cancel'});`, `cy.getFormFooterButtonByTypeWithText({buttonText: 'Submit', buttonType: 'submit'});`, `cy.getFormFooterButtonByTypeWithText({buttonText: 'Save', buttonWrapperClass: 'custom-wrapper'});`
 * `cy.getFormInputFieldByIdAndType({ inputId, inputType })` - retrieves a form input field by its ID and type. `inputId` is the ID of the input field. `inputType` is the HTML input type (e.g., 'text', 'email', 'password'). Defaults to 'text'. e.g. `cy.getFormInputFieldByIdAndType({inputId: 'name'});`, `cy.getFormInputFieldByIdAndType({inputId: 'name', inputType: 'text'});`
 * `cy.getFormLabelByForAttribute({ forValue })` - retrieves a form label associated with a specific input field by its 'for' attribute. `forValue` is the value of the 'for' attribute that matches the input field's ID. e.g. `cy.getFormLabelByForAttribute({forValue: 'name'});`
 * `cy.getFormLegendByText({ legendText })` - retrieves a form legend element by its text content. Legend elements are typically used as captions for fieldset elements in forms. `legendText` is the text content of the legend element. e.g. `cy.getFormLegendByText({legendText: 'Basic Information'});`
@@ -93,7 +93,7 @@ ManageIQ implements the following cypress extensions:
 
 * `cy.validateFormLabels(labelConfigs)` - validates form field labels based on provided configurations. `labelConfigs` is an array of label configuration objects with properties: `forValue` (required) - the 'for' attribute value of the label, `expectedText` (optional) - the expected text content of the label. e.g. `cy.validateFormLabels([{ forValue: 'name', expectedText: 'Name' }, { forValue: 'email', expectedText: 'Email Address' }]);` or using constants: `cy.validateFormLabels([{ [LABEL_CONFIG_KEYS.FOR_VALUE]: 'name', [LABEL_CONFIG_KEYS.EXPECTED_TEXT]: 'Name' }]);`
 * `cy.validateFormFields(fieldConfigs)` - validates form input fields based on provided configurations. `fieldConfigs` is an array of field configuration objects with properties: `id` (required) - the ID of the form field, `fieldType` (optional, default: 'input') - the type of field ('input', 'select', 'textarea'), `inputFieldType` (optional, default: 'text') - the type of input field ('text', 'password', 'number'), `shouldBeDisabled` (optional, default: false) - whether the field should be disabled, `expectedValue` (optional) - the expected value of the field. e.g. `cy.validateFormFields([{ id: 'name', shouldBeDisabled: true }, { id: 'role', fieldType: 'select', expectedValue: 'admin' }]);` or using constants: `cy.validateFormFields([{ [FIELD_CONFIG_KEYS.ID]: 'email', [FIELD_CONFIG_KEYS.INPUT_FIELD_TYPE]: 'email' }, { [FIELD_CONFIG_KEYS.ID]: 'name', [FIELD_CONFIG_KEYS.SHOULD_BE_DISABLED]: true }]);`
-* `cy.validateFormFooterButtons(buttonConfigs)` - validates form buttons based on provided configurations. `buttonConfigs` is an array of button configuration objects with properties: `buttonText` (required) - the text of the button, `buttonType` (optional, default: 'button') - the type of button (e.g., 'submit', 'reset'), `shouldBeDisabled` (optional, default: false) - whether the button should be disabled. e.g. `cy.validateFormFooterButtons([{ buttonText: 'Cancel' }, { buttonText: 'Submit', buttonType: 'submit', shouldBeDisabled: true }]);` or using constants: `cy.validateFormFooterButtons([{ [BUTTON_CONFIG_KEYS.TEXT]: 'Cancel' }]);`
+* `cy.validateFormFooterButtons(buttonConfigs)` - validates form buttons based on provided configurations. `buttonConfigs` is an array of button configuration objects with properties: `buttonText` (required) - the text of the button, `buttonType` (optional, default: 'button') - the type of button (e.g., 'submit', 'reset'), `shouldBeDisabled` (optional, default: false) - whether the button should be disabled, `buttonWrapperClass` (optional, default: 'bx--btn-set') - the CSS class of the wrapper element containing the buttons. e.g. `cy.validateFormFooterButtons([{ buttonText: 'Cancel' }, { buttonText: 'Submit', buttonType: 'submit', shouldBeDisabled: true }]);`, `cy.validateFormFooterButtons([{ buttonText: 'Save', buttonWrapperClass: 'custom-wrapper' }]);` or using constants: `cy.validateFormFooterButtons([{ [BUTTON_CONFIG_KEYS.TEXT]: 'Cancel', [BUTTON_CONFIG_KEYS.BUTTON_WRAPPER_CLASS]: 'custom-button-wrapper' }]);`
 
 #### Assertions
 

cypress/support/commands/constants/command_constants.js

@@ -31,6 +31,7 @@ export const BUTTON_CONFIG_KEYS = {
   BUTTON_TEXT: 'buttonText',
   BUTTON_TYPE: 'buttonType',
   SHOULD_BE_DISABLED: 'shouldBeDisabled',
+  BUTTON_WRAPPER_CLASS: 'buttonWrapperClass',
 };
 
 /* ========================================================== */

cypress/support/commands/element_selectors.js

@@ -4,21 +4,23 @@
  * @param {Object} options - The options object.
  * @param {string} options.buttonText - The text content of the button (required).
  * @param {string} [options.buttonType='button'] - The HTML button type (e.g., 'button', 'submit', 'reset'). Defaults to 'button'.
+ * @param {string} [options.buttonWrapperClass='bx--btn-set'] - The CSS class of the wrapper element containing the buttons. Defaults to 'bx--btn-set'.
  * @returns {Element} The matched button element.
- * @throws {Error} If buttonName is not provided.
+ * @throws {Error} If buttonText is not provided.
  *
  * Example:
  *   cy.getFormFooterButtonByTypeWithText({ buttonText: 'Save Changes' });
  *   cy.getFormFooterButtonByTypeWithText({ buttonText: 'Submit', buttonType: 'submit' });
+ *   cy.getFormFooterButtonByTypeWithText({ buttonText: 'Cancel', buttonWrapperClass: 'custom-wrapper' });
  */
 Cypress.Commands.add(
   'getFormFooterButtonByTypeWithText',
-  ({ buttonType = 'button', buttonText } = {}) => {
+  ({ buttonType = 'button', buttonText, buttonWrapperClass = 'bx--btn-set' } = {}) => {
     if (!buttonText) {
       cy.logAndThrowError('buttonText is required');
     }
     return cy.contains(
-      `#main-content .bx--btn-set button[type="${buttonType}"]`,
+      `#main-content .${buttonWrapperClass} button[type="${buttonType}"]`,
       buttonText
     );
   }

cypress/support/commands/form_elements_validation_commands.js

@@ -208,19 +208,22 @@ Cypress.Commands.add('validateFormFields', (fieldConfigs) => {
  * @param {string} buttonConfigs[].buttonText - The text of the button
  * @param {string} [buttonConfigs[].buttonType='button'] - The type of button (e.g., 'submit', 'reset')
  * @param {boolean} [buttonConfigs[].shouldBeDisabled=false] - Whether the button should be disabled
+ * @param {string} [buttonConfigs[].buttonWrapperClass='bx--btn-set'] - The CSS class of the wrapper element containing the buttons
  *
  * Example:
  *   cy.validateFormFooterButtons([
  *     { [BUTTON_CONFIG_KEYS.BUTTON_TEXT]: 'Cancel' },
  *     { [BUTTON_CONFIG_KEYS.BUTTON_TEXT]: 'Reset', [BUTTON_CONFIG_KEYS.SHOULD_BE_DISABLED]: true },
- *     { [BUTTON_CONFIG_KEYS.BUTTON_TEXT]: 'Submit', [BUTTON_CONFIG_KEYS.BUTTON_TYPE]: 'submit' }
+ *     { [BUTTON_CONFIG_KEYS.BUTTON_TEXT]: 'Submit', [BUTTON_CONFIG_KEYS.BUTTON_TYPE]: 'submit' },
+ *     { [BUTTON_CONFIG_KEYS.BUTTON_TEXT]: 'Save', [BUTTON_CONFIG_KEYS.BUTTON_WRAPPER_CLASS]: 'custom-wrapper' }
  *   ]);
  *
  * Or using regular object keys:
  *   cy.validateFormFooterButtons([
  *     { buttonText: 'Cancel' },
  *     { buttonText: 'Reset', shouldBeDisabled: true },
- *     { buttonText: 'Submit', buttonType: 'submit' }
+ *     { buttonText: 'Submit', buttonType: 'submit' },
+ *     { buttonText: 'Save', buttonWrapperClass: 'custom-wrapper' }
  *   ]);
  *
  * Both approaches work but using config-keys object(BUTTON_CONFIG_KEYS) is recommended to avoid typos and unknown keys
@@ -241,6 +244,7 @@ Cypress.Commands.add('validateFormFooterButtons', (buttonConfigs) => {
     const buttonType = config[BUTTON_CONFIG_KEYS.BUTTON_TYPE] || 'button';
     const shouldBeDisabled =
       config[BUTTON_CONFIG_KEYS.SHOULD_BE_DISABLED] || false;
+    const buttonWrapperClass = config[BUTTON_CONFIG_KEYS.BUTTON_WRAPPER_CLASS];
 
     if (!buttonText) {
       cy.logAndThrowError(
@@ -252,6 +256,7 @@ Cypress.Commands.add('validateFormFooterButtons', (buttonConfigs) => {
       .getFormFooterButtonByTypeWithText({
         buttonText,
         buttonType,
+        buttonWrapperClass,
       })
       .should('be.visible');