itemengine-cypress-automation 1.0.2

package/cypress/pages/components/index.js

@@ -0,0 +1,38 @@
+export * from './createQuestionBasePage';
+export * from './commonComponents';
+export * from './additionalSettingsPanel';
+export * from './mcqAdditionalSettingsBase';
+export * from './mcqOptionsComponent';
+export * from './mcqPreviewComponents';
+export * from './questionInstructionsComponent';
+export * from './mcqSetCorrectAnswerSection';
+export * from './ckEditorToolbar';
+export * from './autoScoredPreviewBase';
+export * from './scoringSectionBase';
+export * from './mcqQuestionCommonComponents';
+export * from './essayResponseCommonComponents';
+export * from './autoScoredAdditionalSettings';
+export * from './autoScoredSetCorrectAnswerSection';
+export * from './autoScoredScoringSectionMultipleResponsesType';
+export * from './autoScoredScoringSection';
+export * from './mcqScoringComponent';
+export * from './createQuestionBasePage';
+export * from './fillInTheGapsCommonComponents';
+export * from './optionsWrapperComponent';
+export * from './specialCharactersFlyoutComponent';
+export * from './specialAndCustomSpecialCharactersComponent';
+export * from './previewScoringAndShowCorrectAnswerComponent';
+export * from './dragAndDropResponseOptions';
+export * from './dragAndDropSetCorrectAnswerCheckboxComponents';
+export * from './draggableOptionsContainer';
+export * from './equationEditorFlyout';
+export * from './answerNumerationComponent';
+export * from './studentResponseAreaAndLayoutComponent';
+export * from './maximumRecorderLengthComponent';
+export * from './playbackControlsBaseComponent';
+export * from './fillInTheGapsTextCommonComponent'
+export * from './fillInTheGapsDropdownCommonComponent';
+export * from './figOverImageCommonComponent';
+export * from './uploadImageSectionComponent';
+export * from './colorPopupComponent';
+export * from './customizeHighlightPropertiesComponent';

package/cypress/pages/components/listSortingAndOrderingBase.js

@@ -0,0 +1,401 @@
+import utilities from "../../support/helpers/utilities";
+import { additionalSettingsPanel } from "./additionalSettingsPanel";
+import { answerNumerationComponent } from "./answerNumerationComponent";
+import { autoScoredAdditionalSettings } from "./autoScoredAdditionalSettings";
+import { autoScoredScoringSectionMultipleResponsesType } from "./autoScoredScoringSectionMultipleResponsesType";
+import { autoScoredSetCorrectAnswerSection } from "./autoScoredSetCorrectAnswerSection";
+import { ckEditorToolbar } from "./ckEditorToolbar";
+import { commonComponents } from "./commonComponents";
+import { equationEditorFlyout } from "./equationEditorFlyout";
+import { optionsWrapperComponent } from "./optionsWrapperComponent";
+import { scoringSectionBase } from "./scoringSectionBase";
+const css = Cypress.env('css');
+
+let options = ['seed', 'sprout', 'plant', 'flower'];
+
+const selectors = {
+    optionLabelLabel: () => cy.get('.order-list-option-label'),
+    includeLabelsLabel: () => cy.get('[data-ngie-testid*="include"] .MuiFormControlLabel-label'),
+    includeLabelsCheckbox: () => cy.get('[data-ngie-testid*="include"] input'),
+    topLabelLabel: () => cy.get('[class*="__TopLabelWrapper"] [class*="InlineTextFieldWithDebouncestyles__PropertyLabel"]'),
+    bottomLabelLabel: () => cy.get('[class*="__BottomLabelWrapper"] [class*="InlineTextFieldWithDebouncestyles__PropertyLabel"]'),
+    topLabelInputField: () => cy.get('.additional-option-placeholder-input .text-field').eq(0),
+    bottomLabelInputField: () => cy.get('.additional-option-placeholder-input .text-field').eq(1),
+    randomizeOptionsCheckboxLabel: () => cy.get('[data-ngie-testid="randomize-options-checkbox"] .MuiFormControlLabel-label'),
+    randomizeOptionsCheckbox: () => cy.get('[data-ngie-testid="randomize-options-checkbox"] input'),
+    hideDragHandleCheckboxLabel: () => cy.get('[data-ngie-testid="hide-drag-handle-checkbox"] .MuiFormControlLabel-label'),
+    hideDragHandleCheckbox: () => cy.get('[data-ngie-testid="hide-drag-handle-checkbox"] input'),
+    optionStyleLabel: () => cy.get('#Option-Style-dropdown-label'),
+    optionStyleDropdown: () => cy.get('#Option-Style-select'),
+    optionStyleDropdownOptions: () => cy.get('[aria-labelledby*="Option-Style-dropdown-label"] .dropdown-menu-item'),
+    //Scoring
+    optionNumeration: () => cy.get('[class*="__Index"]'),
+    correctAnswerContainerCorrectAnswersLabel: () => cy.get('[class*="Responsestyles__CorrectAnswerLabel"]'),
+    correctAnswerContainerAnswerWrapper: () => cy.get('[class*="CorrectAnswers"] [class*="__OptionsWrapper"]'),
+    correctAnswerContainerAnswerText: () => cy.get('.question-text-wrapper'),
+}
+
+const steps = {
+    //Conditional checkboxes
+    verifyRandomizeOptionsCheckboxUnchecked: () => {
+        listSortingAndOrderingBase.randomizeOptionsCheckbox()
+            .should('exist')
+            .should('not.be.checked');
+    },
+
+    checkRandomizeOptionsCheckbox: () => {
+        listSortingAndOrderingBase.randomizeOptionsCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    uncheckRandomizeOptionsCheckbox: () => {
+        listSortingAndOrderingBase.randomizeOptionsCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    verifyHideDragHandleCheckboxUnchecked: () => {
+        listSortingAndOrderingBase.hideDragHandleCheckbox()
+            .should('exist')
+            .should('not.be.checked');
+    },
+
+    checkHideDragHandleCheckbox: () => {
+        listSortingAndOrderingBase.hideDragHandleCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    uncheckHideDragHandleCheckbox: () => {
+        listSortingAndOrderingBase.hideDragHandleCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    //Scoring
+    /**
+     * @param {string[]} numerationArray array of numeration numbers, lowercase, uppercase
+     * @description this function verifies the numeration of Correct Answer Container
+     */
+    verifyCorrectAnswerContainerNumeration: (numerationArray) => {
+        numerationArray.forEach((optionNumeration, index) => {
+            listSortingAndOrderingBase.correctAnswerContainerAnswerWrapper()
+                .eq(index)
+                .within(() => {
+                    listSortingAndOrderingBase.optionNumeration()
+                        .should('have.text', optionNumeration);
+                });
+        });
+    },
+
+    /**
+     * @param {string[]} optionsTextArray array of options in the correct answer container
+     * @param {string[]} numerationArray array of numeration numbers, lowercase, uppercase
+     * @description this function verifies the contents of Correct Answer Container
+     */
+    verifyCorrectAnswerContainerContents: (optionsTextArray, numerationArray) => {
+        optionsTextArray.forEach((optionsText, index) => {
+            listSortingAndOrderingBase.correctAnswerContainerAnswerWrapper()
+                .eq(index)
+                .within(() => {
+                    listSortingAndOrderingBase.correctAnswerContainerAnswerText()
+                        .should('have.text', optionsText);
+                });
+        });
+        steps.verifyCorrectAnswerContainerNumeration(numerationArray);
+    },
+
+    verifyCorrectAnswerContainerDoesNotExist: () => {
+        listSortingAndOrderingBase.correctAnswerContainerCorrectAnswersLabel()
+            .should('not.exist');
+        listSortingAndOrderingBase.correctAnswerContainerAnswerWrapper()
+            .should('not.exist');
+    },
+
+    //Additional settings
+    verifyIncludeLablesCheckboxIsUnchecked: () => {
+        listSortingAndOrderingBase.includeLabelsCheckbox()
+            .should('not.be.checked');
+    },
+
+    checkIncludeLablesCheckbox: () => {
+        listSortingAndOrderingBase.includeLabelsCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    uncheckIncludeLablesCheckbox: () => {
+        listSortingAndOrderingBase.includeLabelsCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    verifyTopLabelInputFieldDisabled: () => {
+        listSortingAndOrderingBase.topLabelInputField()
+            .should('be.disabled');
+    },
+
+    verifyBottomLabelInputFieldDisabled: () => {
+        listSortingAndOrderingBase.bottomLabelInputField()
+            .should('be.disabled');
+    },
+
+    verifyTopLabelInputFieldEnabled: () => {
+        listSortingAndOrderingBase.topLabelInputField()
+            .should('be.enabled');
+    },
+
+    verifyBottomLabelInputFieldEnabled: () => {
+        listSortingAndOrderingBase.bottomLabelInputField()
+            .should('be.enabled');
+    },
+
+    /**
+     * @param {string} topLabel label for options field
+     */
+    addInputToTopLabelInputField: (topLabel) => {
+        listSortingAndOrderingBase.topLabelInputField()
+            .type(topLabel)
+            .should('have.value', topLabel)
+    },
+
+    clearTopLabelInputField: () => {
+        listSortingAndOrderingBase.topLabelInputField()
+            .clear();
+    },
+
+    /**
+     * @param {string} bottomLabel label for options field
+     */
+    addInputToBottomLabelInputField: (bottomLabel) => {
+        listSortingAndOrderingBase.bottomLabelInputField()
+            .type(bottomLabel)
+            .should('have.value', bottomLabel)
+    },
+
+    expandOptionStyleDropdown: () => {
+        listSortingAndOrderingBase.optionStyleDropdown()
+            .click();
+        utilities.verifyElementVisibilityState(listSortingAndOrderingBase.optionStyleDropdownOptions(), 'visible')
+    },
+
+    /**
+     * @param {array} dropdownOptionsArray array of option style dropdown options 
+     * @description This function is used to verify the option style dropdown options 
+     */
+    verifyOptionStyleDropdownOptions: (dropdownOptionsArray) => {
+        listSortingAndOrderingBase.optionStyleDropdownOptions()
+            .each(($el, index) => {
+                cy.wrap($el)
+                    .should('have.text', dropdownOptionsArray[index])
+            });
+    },
+
+    /**
+     * @param {string} dropdownOption string of the dropdown option to be selected
+     */
+    selectOptionStyleDropdownOption: (dropdownOption) => {
+        steps.expandOptionStyleDropdown()
+        listSortingAndOrderingBase.optionStyleDropdownOptions()
+            .contains(dropdownOption)
+            .click({ force: true });
+    },
+}
+
+const tests = {
+    verifyOptionSectionEditTabFunctionality: () => {
+        it('\'Options\' label should be displayed', () => {
+            optionsWrapperComponent.steps.verifyOptionsLabel()
+        });
+
+        it('By default, 4 \'Options\' input fields should be displayed with placeholder text and numeration, Drag handle and Delete option icon buttons should be displayed besides each input field', () => {
+            for (let index = 0; index < 4; index++) {
+                optionsWrapperComponent.steps.verifyOptionsContents(index)
+            }
+            utilities.verifyElementCount(optionsWrapperComponent.optionsInputField(), 4);
+        });
+
+        it('CSS of Options section', { tags: 'css' }, () => {
+            utilities.verifyCSS(optionsWrapperComponent.optionsLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(commonComponents.dragHandleButton().eq(0), {
+                'color': css.color.secondaryBtnActive,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(commonComponents.deleteButton().eq(0), {
+                'opacity': '1'
+            });
+            commonComponents.deleteButton()
+                .eq(0)
+                .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+            utilities.verifyCSS(optionsWrapperComponent.optionsInputField().eq(0), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(optionsWrapperComponent.optionNumeration().eq(0), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(optionsWrapperComponent.addOptionButton(), {
+                'color': css.color.secondaryBtnActive,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('On hovering over the drag handle of the option, \'Drag to reorder\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the drag handle', () => {
+            commonComponents.steps.verifyDragHandleButtonTooltip();
+        });
+
+        it('When the user hovers over the enabled \'Delete\' icon buttons then, \'Delete option\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the \'Delete\' icon button', () => {
+            commonComponents.steps.verifyDeleteButtonTooltip()
+        });
+
+        it('When user clicks on the \'Delete\' option button then the respective options input field should get deleted, option numeration should change accordingly', () => {
+            optionsWrapperComponent.steps.deleteOption(2);
+            commonComponents.steps.verifyDeleteButtonEnabled();
+            for (let index = 0; index < 3; index++) {
+                optionsWrapperComponent.steps.verifyOptionsContents(index)
+            }
+            utilities.verifyElementCount(optionsWrapperComponent.optionsInputField(), 3)
+        });
+
+        it('When number of options are less than 3, the Delete option icon buttons should be displayed in disabled state', () => {
+            optionsWrapperComponent.steps.deleteOption(0);
+            commonComponents.steps.verifyDeleteButtonDisabled()
+        });
+
+        it('When the user hovers over the disabled \'Delete\' icon buttons then, \'Minimum two options are required\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the \'Delete\' icon button', () => {
+            commonComponents.steps.verifyDisabledDeleteButtonTooltip();
+        });
+
+        it('CSS of disabled delete button', { tags: 'css' }, () => {
+            commonComponents.deleteButton()
+                .eq(0)
+                .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon)
+            utilities.verifyCSS(commonComponents.deleteButton().eq(0), {
+                'opacity': '0.5'
+            });
+        });
+
+        it('Accessbility of disabled delete button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.deleteButton())
+        });
+
+        it('\'Add option\' button should be present', () => {
+            optionsWrapperComponent.steps.verifyAddOptionButton();
+        });
+
+        it('When user adds a option using the \'Add option\' button then added option should be displayed with drag handle, placeholder text, option numeration and delete button', () => {
+            optionsWrapperComponent.steps.addOption();
+            commonComponents.steps.verifyDeleteButtonEnabled();
+            for (let index = 0; index < 3; index++) {
+                optionsWrapperComponent.steps.verifyOptionsContents(index)
+            }
+            utilities.verifyElementCount(optionsWrapperComponent.optionsInputField(), 3)
+        });
+
+        it('When user focus in and out of any of the \'Option\' input field without typing anything, an error message should be thrown', () => {
+            optionsWrapperComponent.steps.focusInAndFocusOutOfOptionsInputField(0)
+            optionsWrapperComponent.steps.verifyOptionsInputFieldErrorMessage(0)
+        });
+
+        commonComponents.tests.verifyCSSAnda11yOfErrorMessage();
+
+        it('When user enters text in Option input field the \'Error: Option is required.\' error message should disappear.', () => {
+            optionsWrapperComponent.steps.addInputToOptionsInputField([options[0]]);
+            optionsWrapperComponent.steps.verifyOptionsInputFieldErrorMessageDoesNotExist(0);
+        });
+
+        it('When user adds an image to the options input field then it should be displayed in the options input field', () => {
+            optionsWrapperComponent.steps.focusInOptionsInputField(1);
+            ckEditorToolbar.steps.selectImageOptionFromCKEditorToolbar()
+            ckEditorToolbar.steps.addImageToInputField();
+            optionsWrapperComponent.steps.verifyImageAndAltTextInOptionsInputField(1);
+        });
+
+        it('When user adds an equation to the options input field then it should be displayed in the options input field', () => {
+            optionsWrapperComponent.steps.focusInOptionsInputField(2);
+            ckEditorToolbar.steps.selectEquationEditorOptionFromCKEditorToolbar();
+            equationEditorFlyout.steps.addGenericEquationUsingEquationEditorToCKEditorInputField();
+            optionsWrapperComponent.steps.verifyEquationInOptionsInputField(2);
+        });
+
+        it('When user adds a link to the options input field then it should be displayed in the options input field', () => {
+            optionsWrapperComponent.steps.addOption()
+            optionsWrapperComponent.steps.focusInOptionsInputField(3);
+            ckEditorToolbar.steps.selectLinkOptionFromCKEditorToolbar();
+            ckEditorToolbar.steps.addLinkToInputField()
+            optionsWrapperComponent.steps.verifyLinkInOptionsInputField(3);
+        });
+
+        it('When user adds Bold text to the options input field then it should be displayed in the options input field', () => {
+            optionsWrapperComponent.steps.addOption()
+            optionsWrapperComponent.steps.focusInOptionsInputField(4);
+            ckEditorToolbar.steps.selectBoldOptionFromCKEditorToolbar();
+            optionsWrapperComponent.steps.addBoldTextInputToOptionsInputField(4);
+            optionsWrapperComponent.steps.verifyBoldOption(4);
+        });
+    },
+
+    verifyManualScoringEditTabFunctionality: () => {
+        it('User should be able to select \'Manually scored\' scoring type from scoring type dropdown', () => {
+            scoringSectionBase.steps.selectAScoringTypeFromScoringTypeDropdown('Manually scored')
+        });
+
+        it('When the user has selected \'Manually Scored\' option from the Scoring Type dropdown then the \'Set Correct Answer\' section should not be displayed; \'All or Nothing\', \'Partial - equal weights\' and \'Partial - different weights\' radio buttons should not be displayed; \'Points\' and \'Minimum score awarded (if attempted)\' labels and input fields should be displayed; and inside Additional Settings accordion Check Answer section i.e. \'Allow students to check answer\' checkbox should not be displayed', () => {
+            utilities.verifyElementVisibilityState(autoScoredSetCorrectAnswerSection.setCorrectAnswerLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(autoScoredScoringSectionMultipleResponsesType.allOrNothingCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(autoScoredScoringSectionMultipleResponsesType.partialEqualWeightsCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(autoScoredScoringSectionMultipleResponsesType.partialDifferentWeightsCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(autoScoredScoringSectionMultipleResponsesType.penaltyPointsInputField(), 'notExist');
+            utilities.verifyElementVisibilityState(autoScoredScoringSectionMultipleResponsesType.penaltyPointsLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(autoScoredScoringSectionMultipleResponsesType.rounddownScoreCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(autoScoredScoringSectionMultipleResponsesType.rounddownScoreCheckboxLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(listSortingAndOrderingBase.randomizeOptionsCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(listSortingAndOrderingBase.hideDragHandleCheckbox(), 'notExist');
+            scoringSectionBase.steps.verifyDefaultMinimumScoreIfAttemptedLabelAndPointsField()
+            additionalSettingsPanel.steps.expandAdditonalSettings()
+            utilities.verifyElementVisibilityState(autoScoredAdditionalSettings.checkAnswerLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(autoScoredAdditionalSettings.allowStudentsToCheckAnswerLabel(), 'notExist');
+        });
+
+        scoringSectionBase.tests.verifyPointsFieldErrorState(10);
+
+        scoringSectionBase.tests.verifyMinimumScoreIfAttemptedFieldErrorState(10, 20, 10);
+    },
+
+    /**
+     * @param {string[]} answerNumerationDropdownOptions array of answer numeration dropdown options
+     * @description this function verifies the functionality of Answer numeration in the Set correct answer section
+     */
+    verifyAnswerNumerationFunctionalityInSetCorrectAnswerSection: (answerNumerationDropdownOptions) => {
+        it(`When the user selects ${answerNumerationDropdownOptions[0]} option from the Answer Numeration dropdown, then numeration should not be displayed in the Set correct answer section`, () => {
+            utilities.verifyInnerText(answerNumerationComponent.answerNumerationDropdown(), `${answerNumerationDropdownOptions[0]}`)
+            utilities.verifyElementVisibilityState(listSortingAndOrderingBase.optionNumeration(), 'notExist');
+        });
+
+        it(`When the user selects ${answerNumerationDropdownOptions[1]} option from the Answer Numeration dropdown, then numeration should not be displayed in the Set correct answer section`, () => {
+            answerNumerationComponent.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[1]}`);
+            utilities.verifyElementVisibilityState(listSortingAndOrderingBase.optionNumeration(), 'notExist');
+        });
+
+        it(`When the user selects ${answerNumerationDropdownOptions[2]} option from the Answer Numeration dropdown, then numeration should not be displayed in the Set correct answer section`, () => {
+            answerNumerationComponent.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[2]}`);
+            utilities.verifyElementVisibilityState(listSortingAndOrderingBase.optionNumeration(), 'notExist');
+        });
+    }
+}
+
+export const listSortingAndOrderingBase = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/components/maximumRecorderLengthComponent.js

@@ -0,0 +1,116 @@
+import utilities from "../../support/helpers/utilities";
+import { commonComponents } from "./commonComponents";
+const css = Cypress.env('css');
+
+const selectors = {
+    maximumRecorderLengthInputField: () => cy.get('input[aria-label="Maximum recorder length"]'),
+    maximumRecorderLengthLabel: () => cy.get('.max-recording-length-input-label'),
+    maximumRecorderLengthInputFieldSecsSuffix: () => cy.get('[class*="max-recording"][class*="suffix"]'),
+}
+
+const steps = {
+    /**
+     * @description Sets the maximum recording length in the input field.
+     * @param {string} recordingLength - The maximum recording length to set in seconds.
+     * @example
+     * setMaximumRecorderLength(600); // Sets the maximum recording length to '10:00'
+     */
+    setMaximumRecorderLength: (recordingLength) => {
+        maximumRecorderLengthComponent.maximumRecorderLengthInputField()
+            .clear()
+            .type(recordingLength)
+    },
+
+    /**
+     * @description Verifies that the maximum recording length input field has the expected value.
+     * @param {string} value - The expected value to be compared with the input field's value attribute.
+     */
+    verifyMaximumRecorderLength: (value) => {
+        maximumRecorderLengthComponent.maximumRecorderLengthInputField()
+            .should('have.attr', 'value', value);
+    },
+
+    clearMaximumRecorderLengthInputField: () => {
+        maximumRecorderLengthComponent.maximumRecorderLengthInputField()
+            .clear()
+            .blur();
+    },
+}
+
+const tests = {
+    verifyMaximumRecorderLengthSectionCSS: () => {
+        it('CSS of \'Maximum recorder length\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(maximumRecorderLengthComponent.maximumRecorderLengthLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(maximumRecorderLengthComponent.maximumRecorderLengthInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(maximumRecorderLengthComponent.maximumRecorderLengthInputFieldSecsSuffix(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+    },
+
+    verifyMaximumRecorderLengthLabelAndInputField: () => {
+        it('\'Maximum recorder length\' label, input field and \'Secs\' text should be displayed. By default 900 seconds(15 minutes) should be displayed in \'Maximum recorder length\' field', () => {
+            utilities.verifyInnerText(maximumRecorderLengthComponent.maximumRecorderLengthLabel(), 'Maximum recorder length');
+            utilities.verifyElementVisibilityState(maximumRecorderLengthComponent.maximumRecorderLengthLabel(), 'visible');
+            utilities.verifyElementVisibilityState(maximumRecorderLengthComponent.maximumRecorderLengthInputField(), 'visible');
+            maximumRecorderLengthComponent.steps.verifyMaximumRecorderLength(900);
+            utilities.verifyElementVisibilityState(maximumRecorderLengthComponent.maximumRecorderLengthInputFieldSecsSuffix(), 'visible');
+            //https://redmine.zeuslearning.com/issues/540899
+            utilities.verifyInnerText(maximumRecorderLengthComponent.maximumRecorderLengthInputFieldSecsSuffix(), 'Secs');
+        });
+    },
+
+    verifyMaximumRecorderLengthInputFieldErrorMessages: () => {
+        it('When the user focuses in and out of the empty \'Maximum recorder length\' input field, \'Error: Maximum recorder length is required.\' validation error should be displayed below the \'Maximum recorder length\' input field', () => {
+            maximumRecorderLengthComponent.steps.clearMaximumRecorderLengthInputField();
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Maximum recorder length is required.');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
+        });
+
+        commonComponents.tests.verifyCSSAnda11yOfErrorMessage();
+
+        it('When the user updates the \'Maximum recorder length\' value, then the validation message \'Error: Maximum recorder length is required.\' should disappear.', () => {
+            maximumRecorderLengthComponent.steps.setMaximumRecorderLength('1000');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
+        });
+
+        it('When the user has set \'Maximum recorder length\' to \'0\' (zero), a validation message \'Error: Value must be greater than 0 secs.\' should be displayed', () => {
+            maximumRecorderLengthComponent.steps.setMaximumRecorderLength('0');
+            maximumRecorderLengthComponent.steps.verifyMaximumRecorderLength('0');
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Value must be greater than 0 secs.');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
+        });
+
+        commonComponents.tests.verifyCSSAnda11yOfErrorMessage();
+
+        it('When the user updates the \'Maximum recorder length\' value, then the validation message \'Error: Value must be greater than 0 secs.\' should disappear', () => {
+            maximumRecorderLengthComponent.steps.setMaximumRecorderLength('1000');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
+        });
+    },
+
+    verifyMaximumRecorderLengthCharacterAcceptanceCriteria: () => {
+        it('When user adds decimal values or alphanumeric values then only numeric values should be displayed in the maximum recording length input field', () => {
+            maximumRecorderLengthComponent.steps.setMaximumRecorderLength('.100.0');
+            maximumRecorderLengthComponent.steps.verifyMaximumRecorderLength('1000');
+            maximumRecorderLengthComponent.steps.setMaximumRecorderLength('!@#abcde584');
+            maximumRecorderLengthComponent.steps.verifyMaximumRecorderLength('584');
+        });
+    }
+}
+
+export const maximumRecorderLengthComponent = {
+    ...selectors,
+    steps,
+    tests
+}