itemengine-cypress-automation 1.0.113 → 1.0.114

package/cypress/pages/components/autoScoredScoringPreviewTab.js

@@ -46,6 +46,8 @@ const steps = {
                 return true;
             case 'single selection':
                 return false;
+            case 'short text response':
+                return false;
             default:
                 throw new Error('Invalid question type');
         }

package/cypress/pages/components/autoScoredSpecifyCorrectAnswerSection.js

@@ -127,9 +127,7 @@ const steps = {
     },
 
     verifySpecifyCorrectAnswerErrorMessage: () => {
-        commonComponents.errorMessage()
-            .last()
-            .verifyInnerText('Error: Please set a correct answer.');
+        utilities.verifyInnerText(commonComponents.errorMessage().last(), 'Error: Please set a correct answer.');
     }
 }
 
@@ -155,7 +153,7 @@ const tests = {
                     helpText = 'You can set the correct answer by entering the correct answer(s) in the response area(s).';
                     break;
                 case 'short text response':
-                    helpText = 'You can set the correct answer by entering the correct answer in the input field.';
+                    helpText = 'You can set the correct answer by entering the correct answer(s) in the response area(s).';
                     break;
                 case 'fill in the gaps - dropdown':
                     helpText = 'You can set the correct answer by selecting the correct answer(s) in the response area(s).';
@@ -347,9 +345,12 @@ const tests = {
                 });
             utilities.verifyInnerText(utilities.getNthElement(scoringSectionBase.pleaseEnterPointsErrorMessage(), 0), 'Error: Please enter points.');
             utilities.verifyElementVisibilityState(scoringSectionBase.pleaseEnterPointsErrorMessage(), 'visible');
-            if (questionType != 'list ordering') {
+            if (questionType != 'list ordering' && questionType != 'short text response') {
                 steps.verifySpecifyCorrectAnswerErrorMessage();
             }
+            else if (questionType === 'short text response') {
+                utilities.verifyInnerText(utilities.getNthElement(commonComponents.errorMessage(), -1), 'Error: Answer is required.');
+            }
             if (questionType === 'fill in the gaps over image text' || questionType === 'text entry math') {
                 utilities.verifyInnerText(commonComponents.errorMessage().last(), 'Error: Please enter points.');
                 utilities.verifyElementVisibilityState(commonComponents.errorMessage().last(), 'visible');

package/cypress/pages/components/equationEditorFlyout.js

@@ -325,6 +325,17 @@ const steps = {
     focusInPreviewInputField: () => {
         equationEditorFlyout.previewInputField()
             .click();
+    },
+
+
+    enterQuadraticEquation: () => {
+        equationEditorFlyout.steps.enterEquation([{ categoryName: 'keypad', symbolName: ['two'] }, { categoryName: 'basic', symbolName: ['x', 'square', 'y', 'square', 'add'] }, { categoryName: 'keypad', symbolName: ['four'] }, { categoryName: 'basic', symbolName: ['x', 'y', 'add'] }, { categoryName: 'keypad', symbolName: ['four'] }]);
+        equationEditorFlyout.steps.clickOnOkButton();
+    },
+
+    enterEquationUsingPiSymbol: () => {
+        equationEditorFlyout.steps.enterEquation([{ categoryName: 'keypad', symbolName: ['six', 'multiply'] }, { categoryName: 'greek', symbolName: ['pi'] }]);
+        equationEditorFlyout.steps.clickOnOkButton();
     }
 }
 

package/cypress/pages/components/essayResponseCommonComponents.js

@@ -1,6 +1,9 @@
 import utilities from "../../support/helpers/utilities";
 import { commonComponents } from "./commonComponents";
 
+let originalText;
+let formattedText;
+
 const selectors = {
     //Basic section
     setLimitLabel: () => cy.get('[class*="SetLimitWrapper"] .essay-response-word-limit-label'),
@@ -27,7 +30,33 @@ const selectors = {
             return cy.get('.essay-preview-wrapper a[role="button"]')
         }
     },
-    //Additional settings
+
+    //Customize Formatting options section
+    customizeFormattingOptionsAccordionLabel: () => cy.get('.customize-formatting-options-label'),
+    customizeFormattingOptionsSectionExpandIcon: () => cy.get('.customize-formatting-option-wrapper [class*="expandIconWrapper"]'),
+    customizeFormattingOptionsTiles: (formattingOption = null) => {
+        if (formattingOption) {
+            return cy.get(`.toolbar-options-wrapper .icon-button-custom-format[title="${formattingOption}"]`)
+        } else {
+            return cy.get('.toolbar-options-wrapper .icon-button-custom-format')
+        }
+    },
+    tickIcon: () => cy.get('[class*="TickIconWrapper"] svg'),
+    customizeFormattingOptionsLabel: () => cy.get('.icon-button-custom-format .drag-item-flex-wrapper svg'),
+    customizeFormattingOptionsWrapper: () => cy.get('.customize-formatting-option-wrapper'),
+    customizeFormattingOptionsAccordion: () => cy.get('.customize-formatting-option-wrapper .ngie-accordion-summary'),
+    customizeFormattingOptionsDragHandleButton: () => cy.get('.toolbar-options-wrapper [data-testid="drag-icon-wrapper"]'),
+
+    //wordCount
+    displayWordCountCheckbox: () => cy.get('[data-ngie-testid="display-word-count-checkbox"] input'),
+    wordCountWrapper: () => cy.get('[class*="indexstyle__WordCharCountWrapper"]'),
+
+    //Preview tab
+    responseField: () => cy.get('[title="Enter your response to the question here."]'),
+    responseFieldWordCount: () => cy.get('[class*="InputLimitLabelWrapper"]'),
+    responseFieldEquation: () => cy.get('.cke_widget_element'),
+
+    //Additional settings, These are old selectors. Need to update them along with additional settings file revamp
     studentResponseAndLayoutLabel: () => cy.get('.layout-text'),
     predefinedTextLabel: () => cy.get('[class*="EssayResponsestyles__PropertyLabel"]'),
     predefinedTextInputField: () => cy.get('[title="Predefined Text"]'),
@@ -44,11 +73,7 @@ const selectors = {
     customSpecialCharacterLabel: () => cy.get('[class*="InlineTextFieldWithDebouncestyles__PropertyLabel"]').eq(1),
     customSpecialCharacterInputField: () => cy.get('input[aria-label="Custom Special Characters"]'),
     limitReachedWarningMessageContainer: () => cy.get('.disabled-wrapper-cls'),
-    limitReachedWarningMessage: () => cy.get('.disabled-wrapper-cls [class*="DisabledTextWrapper"]'),
-    //Preview tab
-    responseField: () => cy.get('[title="Enter your response to the question here."]'),
-    responseFieldWordCount: () => cy.get('[class*="InputLimitLabelWrapper"]'),
-    responseFieldEquation: () => cy.get('.cke_widget_element'),
+    limitReachedWarningMessage: () => cy.get('.disabled-wrapper-cls [class*="DisabledTextWrapper"]')
 }
 
 const steps = {
@@ -62,7 +87,6 @@ const steps = {
             .type(maxLimit)
             .blur()
             .should('have.value', maxLimit);
-
     },
 
     /**
@@ -98,7 +122,6 @@ const steps = {
             .should('have.value', maxLimit)
     },
 
-
     verifyMaximumLimitErrorMessage: () => {
         utilities.verifyInnerText(commonComponents.errorMessage().eq(1), 'Error: Maximum limit must be greater than or equal to Minimum limit.');
         utilities.verifyElementVisibilityState(commonComponents.errorMessage().eq(1), 'visible');
@@ -156,6 +179,12 @@ const steps = {
             .should('be.checked');
     },
 
+    verifyListItemLengthInResponseField: (length) => {
+        essayResponseCommonComponents.responseField()
+            .find('li')
+            .should('have.length', length);
+    },
+
     /**
      * verify response field equation text content
      * @param {number} equationIndex index of equation
@@ -181,15 +210,6 @@ const steps = {
             });
     },
 
-    //TODO: need to improve this, we are passing two parameters here, only one should suffice
-    openAndSelectOptionFromDisplayWordLimitDropdown: (optionIndex, optionName) => {
-        essayResponseCommonComponents.displayWordLimitDropdown()
-            .click();
-        essayResponseCommonComponents.displayWordLimitDropdownListOptions(optionIndex)
-            .click();
-        essayResponseCommonComponents.displayWordLimitDropdown()
-            .should('have.text', optionName);
-    },
 
     enterTextInResponseField: (textContent) => {
         essayResponseCommonComponents.steps.enterInputInResponseField(textContent);
@@ -206,6 +226,11 @@ const steps = {
             .clear();
     },
 
+    focusInResponseField: () => {
+        essayResponseCommonComponents.responseField()
+            .click();
+    },
+
     focusOutOfResponseField: () => {
         essayResponseCommonComponents.responseField()
             .blur();
@@ -254,7 +279,7 @@ const steps = {
     },
 
     resetPreviewTabResponseField: () => {
-        cy.log('clearing and resetting the response field');
+        cy.log('Clearing and resetting the response field');
         essayResponseCommonComponents.responseField()
             .clear()
             .blur();
@@ -315,10 +340,256 @@ const steps = {
     verifyLimitReachedWarningMessage: (warningText) => {
         utilities.verifyElementVisibilityState(essayResponseCommonComponents.limitReachedWarningMessage(), 'visible');
         utilities.verifyInnerText(essayResponseCommonComponents.limitReachedWarningMessage(), warningText);
+    },
+
+    expandCustomizeFormattingOptionsAccordion: () => {
+        essayResponseCommonComponents.customizeFormattingOptionsAccordion()
+            .click()
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    collapseCustomizeFormattingOptionsAccordion: () => {
+        essayResponseCommonComponents.customizeFormattingOptionsAccordion()
+            .click()
+            .should('have.attr', 'aria-expanded', 'false');
+    },
+
+    /**
+    * Verifies the customization options tiles and their selected state.
+    * @param {string[]} customizeOptions - An array of customization options to be verified.
+    * @param {string[]} stateOfFormattingOption - An array representing the expected state ('true' or 'false') for each customization option.
+    */
+    verifyCustomizeFormattingOptionsAndSelectedState: (customizeOptions, stateOfFormattingOption) => {
+        essayResponseCommonComponents.customizeFormattingOptionsTiles()
+            .each(($button, count) => {
+                cy.wrap($button)
+                    .should('have.attr', 'title', customizeOptions[count])
+                    .and('have.attr', 'data-aria-pressed', stateOfFormattingOption[count])
+            });
+    },
+
+    /**
+    * Verifies the visibility of preview tab toolbar options.
+    * @param {string[]} customizeOptions - An array of option names to be verified for visibility.
+    * @returns {void}
+    */
+    verifyPreviewTabToolbarOptions: (customizeOptions) => {
+        customizeOptions.forEach((optionName) => {
+            essayResponseCommonComponents.previewTabToolbarOption(optionName)
+                .and('be.visible');
+        });
+    },
+
+    /**
+    * Deselects a preview tab toolbar option and verifies its state.
+    * @param {string} toolbarOption - The name of the toolbar option to be deselected.
+    * @returns {void}
+    */
+    deselectPreviewTabToolbarOption: (toolbarOption) => {
+        essayResponseCommonComponents.previewTabToolbarOption(toolbarOption)
+            .click()
+            .should('have.attr', 'aria-pressed', 'false');
+    },
+
+    /**
+    * This function verifies the formatting option is in selected state
+    * @param {string} formattingOption name of the formatting option
+    */
+    verifyPreviewTabToolbarOptionDisabled: (formattingOption) => {
+        essayResponseCommonComponents.previewTabToolbarOption(formattingOption)
+            .should('have.attr', 'aria-disabled', 'true');
+    },
+
+    /**
+    * This function verifies the formatting option is in selected state
+    * @param {string} formattingOption name of the formatting option
+    */
+    verifyPreviewTabToolbarOptionNotDisabled: (formattingOption) => {
+        essayResponseCommonComponents.previewTabToolbarOption(formattingOption)
+            .should('have.attr', 'aria-disabled', 'false');
+    },
+
+    /**
+   * This function verifies the formatting option is in selected state
+   * @param {string} formattingOption name of the formatting option
+   */
+    verifyPreviewTabToolbarOptionNotSelected: (formattingOption) => {
+        essayResponseCommonComponents.previewTabToolbarOption(formattingOption)
+            .should('have.attr', 'aria-pressed', 'false');
+    },
+
+    /**
+    * This function verifies the formatting option is in selected state
+    * @param {string} formattingOption name of the formatting option
+    */
+    verifyPreviewTabToolbarOptionSelected: (formattingOption) => {
+        essayResponseCommonComponents.previewTabToolbarOption(formattingOption)
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+    * This function verifies the formatting option is in selected state
+    * @param {string} formattingOption name of the formatting option
+    */
+    verifyCustomizeFormattingOptionIsSelected: (formattingOption) => {
+        essayResponseCommonComponents.customizeFormattingOptionsTiles(formattingOption)
+            .should('have.attr', 'data-aria-pressed', 'true');
+    },
+
+    /**
+    * This function verifies the formatting option is not selected
+    * @param {string} formattingOption name of the formatting option
+    */
+    verifyCustomizeFormattingOptionNotSelected: (formattingOption) => {
+        essayResponseCommonComponents.customizeFormattingOptionsTiles(formattingOption)
+            .should('have.attr', 'data-aria-pressed', 'false');
+    },
+
+    /**
+    * Selects customized formatting options and verifies their selected state.
+    * @param {string[]} formattingOptionArray - An array of formatting options to be selected.
+    * @returns {void}
+    */
+    selectCustomizedFormattingOption: (formattingOptionArray) => {
+        formattingOptionArray.forEach((formattingOption) => {
+            essayResponseCommonComponents.customizeFormattingOptionsTiles(formattingOption)
+                .click();
+            essayResponseCommonComponents.customizeFormattingOptionsTiles(formattingOption)
+                .should('have.attr', 'data-aria-pressed', 'true');
+        });
+    },
+
+    /**
+    * Deselects customized formatting options and verifies their deselected state.
+    * @param {string[]} formattingOptionArray - An array of formatting options to be deselected.
+    * @returns {void}
+    */
+    deselectCustomizedFormattingOption: (formattingOptionArray) => {
+        formattingOptionArray.forEach((formattingOption) => {
+            essayResponseCommonComponents.customizeFormattingOptionsTiles(formattingOption)
+                .click();
+            essayResponseCommonComponents.customizeFormattingOptionsTiles(formattingOption)
+                .should('have.attr', 'data-aria-pressed', 'false');
+        });
+    },
+
+    checkDisplayWordCountCheckbox: () => {
+        essayResponseCommonComponents.displayWordCountCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    /**
+     * verify word count in preview tab
+     * @param {number} wordCount 
+     */
+    verifyWordCount: (wordCount) => {
+        utilities.verifyInnerText(essayResponseCommonComponents.wordCountWrapper(), `Words: ${wordCount}`)
+    },
+
+    verifyCustomizeToolbarOptions: (customizeFormattingOptions) => {
+        customizeFormattingOptions.forEach((optionName) => {
+            utilities.verifyElementVisibilityState(essayResponseCommonComponents.customizeFormattingOptionsTiles(optionName), 'visible');
+        });
+    },
+
+    /**
+    * Verifies the HTML content of the essay response field.
+    * @param {string} HTMLText - The expected HTML content to be verified.
+    */
+    verifyResponseFieldHTML: (HTMLText) => {
+        essayResponseCommonComponents.responseField()
+            .verifyInnerHTML(HTMLText);
+    },
+
+    /**
+    * Verifies the HTML content of code blocks within the essay response field.
+    * @param {string} HTMLText - The expected HTML content of code blocks to be verified.
+    */
+    verifyResponseFieldCodeblockHTML: (HTMLText) => {
+        essayResponseCommonComponents.responseField()
+            .find('.codeblock')
+            .verifyInnerHTML(HTMLText);
+    },
+
+    /**
+    * Verifies the number of code blocks in the essay response field.
+    * @param {number} length - The expected number of code blocks.
+    */
+    verifyCodeLength: (length) => {
+        essayResponseCommonComponents.responseField()
+            .find('pre')
+            .should('have.length', length);
+    },
+
+    /**
+    * Verifies the Undo and Redo functionality in the essay response field.
+    * @param {string} toolbarOption - The toolbar option that was manipulated.
+    * @param {string} originalText - The original HTML content before the manipulation.
+    * @param {string} formattedText - The expected HTML content after Undo and Redo operations.
+    */
+    verifyUndoAndRedoFunctionality: (toolbarOption, originalText, formattedText) => {
+        essayResponseCommonComponents.previewTabToolbarOption('Undo (Ctrl+Z)')
+            .click();
+        if (toolbarOption == 'Background Color' || toolbarOption == 'Text Color') {
+            essayResponseCommonComponents.previewTabToolbarOption(toolbarOption)
+                .should('have.attr', 'aria-expanded', 'false');
+        } else {
+            essayResponseCommonComponents.previewTabToolbarOption(toolbarOption)
+                .should('have.attr', 'aria-pressed', 'false');
+        };
+        essayResponseCommonComponents.responseField()
+            .verifyInnerHTML(originalText);
+        essayResponseCommonComponents.previewTabToolbarOption('Redo (Ctrl+Y)')
+            .click();
+        if (toolbarOption == 'Background Color' || toolbarOption == 'Text Color') {
+            essayResponseCommonComponents.previewTabToolbarOption(toolbarOption)
+                .should('have.attr', 'aria-expanded', 'true');
+        } else if (toolbarOption == 'Insert Horizontal Line' || toolbarOption == 'Code Editor' || toolbarOption == 'Increase Indent' || toolbarOption == 'Decrease Indent' || toolbarOption == 'Remove Format') {
+            essayResponseCommonComponents.previewTabToolbarOption(toolbarOption)
+                .should('have.attr', 'aria-pressed', 'false');
+        } else {
+            essayResponseCommonComponents.previewTabToolbarOption(toolbarOption)
+                .should('have.attr', 'aria-pressed', 'true');
+        };
+        essayResponseCommonComponents.responseField()
+            .verifyInnerHTML(formattedText);
     }
 }
 
+const tests = {
+    /**
+     * This function verifies undo and redo functionality
+     * @param {string} toolbarOption toolbar option 
+     */
+    verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption: (toolbarOption) => {
+        it(`When the user enters text in the response field, selects the text and selects the ${toolbarOption} toolbar option and clicks on the \'Undo\' toolbar option, then it should undo the latest action and when the user clicks on the \'Redo\' toolbar option, then it should redo the latest action`, () => {
+            essayResponseCommonComponents.steps.resetPreviewTabResponseField();
+            essayResponseCommonComponents.steps.enterInputInResponseField('Lorem Ipsum');
+            if (toolbarOption == 'Decrease Indent') {
+                essayResponseCommonComponents.previewTabToolbarOption('Increase Indent')
+                    .click();
+            } else if (toolbarOption == 'Remove Format') {
+                essayResponseCommonComponents.steps.enterInputInResponseField('{selectAll}');
+                essayResponseCommonComponents.steps.selectPreviewTabToolbarOption('Bold (Ctrl+B)');
+            };
+            essayResponseCommonComponents.responseField()
+                .then(($originalText) => {
+                    originalText = $originalText[0].innerHTML
+                    essayResponseCommonComponents.steps.enterInputInResponseField('{selectAll}');
+                    essayResponseCommonComponents.steps.selectPreviewTabToolbarOption(toolbarOption);
+                    essayResponseCommonComponents.responseField()
+                        .then(($formattedText) => {
+                            formattedText = $formattedText[0].innerHTML
+                            essayResponseCommonComponents.steps.verifyUndoAndRedoFunctionality(toolbarOption, originalText, formattedText);
+                        });
+                });
+        });
+    },
+}
+
 export const essayResponseCommonComponents = {
     ...selectors,
-    steps
+    steps,
+    tests
 }

package/cypress/pages/components/maximumRecorderLengthComponent.js

@@ -4,8 +4,10 @@ const css = Cypress.env('css');
 
 const selectors = {
     maximumRecorderLengthInputField: () => cy.get('input[aria-label="Maximum recorder length"]'),
-    maximumRecorderLengthLabel: () => cy.get('.max-recording-length-input-label'),
+    maximumRecorderLengthLabel: () => cy.get('.max-record-length-label'),
     maximumRecorderLengthInputFieldSecsSuffix: () => cy.get('[class*="max-recording"][class*="suffix"]'),
+    maximumRecorderLengthSecsToggleButton: () => cy.get('.max-recording-length-input [data-ngie-testid="secs-toggle-button"]'),
+    maximumRecorderLengthMinsToggleButton: () => cy.get('.max-recording-length-input [data-ngie-testid="mins-toggle-button"]'),
 }
 
 const steps = {
@@ -38,35 +40,50 @@ const steps = {
 }
 
 const tests = {
-    verifyMaximumRecorderLengthSectionCSS: () => {
+    verifyMaximumRecorderLengthLabelAndInputField: () => {
+        it('\'Maximum recorder length\' label, input field, "Secs" and "Mins" toggle buttons should be displayed. By default "Secs" toggle button should be in selected state. "900" 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.maximumRecorderLengthSecsToggleButton()
+                .should('have.class', 'ngie-toggle-button-selected');
+            maximumRecorderLengthComponent.steps.verifyMaximumRecorderLength(900);
+            utilities.verifyInnerText(maximumRecorderLengthComponent.maximumRecorderLengthSecsToggleButton(), 'Secs');
+            utilities.verifyInnerText(maximumRecorderLengthComponent.maximumRecorderLengthMinsToggleButton(), 'Mins');
+        });
+
         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,
+            utilities.verifyCSS(maximumRecorderLengthComponent.maximumRecorderLengthSecsToggleButton(), {
+                'color': css.color.defaultBackground,
+                'background-color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(maximumRecorderLengthComponent.maximumRecorderLengthMinsToggleButton(), {
+                'color': css.color.secondaryBtn,
+                'background-color': css.color.secondaryBtnBg,
                 'font-size': css.fontSize.default,
                 'font-weight': css.fontWeight.regular
             });
-            utilities.verifyCSS(maximumRecorderLengthComponent.maximumRecorderLengthInputFieldSecsSuffix(), {
+            utilities.verifyCSS(maximumRecorderLengthComponent.maximumRecorderLengthInputField(), {
                 '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');
+        //Note: a11y is covered for Maximum recorder length section in HeaderSection file using verifyCreateItemWrapperContentsA11y
+
+        it('When the user toggles to "Mins", "15" should be displayed in \'Maximum recorder length\' field', () => {
+            maximumRecorderLengthComponent.maximumRecorderLengthMinsToggleButton()
+                .click()
+                .should('have.class', 'ngie-toggle-button-selected');
+            maximumRecorderLengthComponent.steps.verifyMaximumRecorderLength(15);
         });
     },
 

package/cypress/pages/components/playbackControlsBaseComponent.js

@@ -7,7 +7,7 @@ const selectors = {
     volumeControlSlider: () => cy.get('.audio-volume-control-slider'),
     muteVolumeIcon: () => cy.get('.audio-mute-icon-wr'),
     unmutedVolumeIcon: () => cy.get('.audio-volume-icon-wr'),
-    progressBar: () => cy.get('[class*="progress-bar-wrapper"]'),
+    progressBar: () => cy.get('[class*="ProgressBarstyle__SliderWrapper"]'),
     progressBarSlider: () => cy.get('input[aria-label="Slider bar"]'),
     playbackPlayButton: () => cy.get('button[aria-label="Play"]'),
     playbackPauseButton: () => cy.get('button[aria-label="Pause"]'),
@@ -195,6 +195,14 @@ const steps = {
         playbackControlsBaseComponent.playbackSpeedOption(playbackSpeed)
             .click();
     },
+
+    verifyVolumeButtonEnabledState: () => {
+        utilities.verifyElementNotDisabled(playbackControlsBaseComponent.volumeControlButton());
+    },
+
+    verifyPlaybackSpeedButtonEnabledState: () => {
+        utilities.verifyElementNotDisabled(playbackControlsBaseComponent.playbackSpeedButton());
+    }
 }
 
 const tests = {

package/cypress/pages/components/questionInputFieldComponent.js

@@ -12,13 +12,6 @@ const selectors = {
 }
 
 const steps = {
-    addResponseTokenInQuestionField: () => {
-        questionInputFieldComponent.questionInputField()
-            .click();
-        questionInputFieldComponent.ckEditorAddResponseButton()
-            .click();
-    },
-
     /**
      * @description Delete a response token by clicking on its close button
      * @param {number} responseTokenIndex response token index

package/cypress/pages/essayResponseBasicPage.js

@@ -7,15 +7,6 @@ const selectors = {
     ...additionalSettingsPanel,
     ...scoringSectionBase,
     ...essayResponseCommonComponents,
-    //Customize Formatting options section
-    customizeFormattingOptionsSectionLabel: () => cy.get('.customize-essay-formatting-options .ngie-toggle-button-title'),
-    cutCustomizeFormattingOption: () => cy.get(`[data-ngie-testid="cut-toggle-button"]`),
-    copyCustomizeFormattingOption: () => cy.get(`[data-ngie-testid="copy-toggle-button"]`),
-    pasteCustomizeFormattingOption: () => cy.get(`[data-ngie-testid="paste-toggle-button"]`),
-    specialCharacterCustomizeFormattingOption: () => cy.get(`[data-ngie-testid="special-characters-toggle-button"]`),
-    customizeFormattingOptionsLabel: () => cy.get('.ngie-toggle-button-label'),
-    customizeFormattingOptionsIcon: () => cy.get('.ngie-toggle-button-icon svg'),
-    customizeFormattingOptionsWrapper: () => cy.get('.customize-essay-formatting-options'),
 };
 
 const steps = {
@@ -23,23 +14,7 @@ const steps = {
     ...questionInstructionsComponent.steps,
     ...additionalSettingsPanel.steps,
     ...scoringSectionBase.steps,
-    ...essayResponseCommonComponents.steps,
-
-    cutTextFromResponseField: () => {
-        essayResponseBasicPage.responseField()
-            .type('{selectAll}');
-        essayResponseBasicPage.previewTabToolbarOption('Cut')
-            .click();
-    },
-
-    copyTextFromResponseField: () => {
-        essayResponseBasicPage.responseField()
-            .type('{selectAll}');
-        essayResponseBasicPage.previewTabToolbarOption('Copy')
-            .click();
-        essayResponseBasicPage.responseField()
-            .click();
-    },
+    ...essayResponseCommonComponents.steps
 };
 
 const tests = {