itemengine-cypress-automation 1.0.119 → 1.0.121

package/cypress/pages/shortTextResponsePage.js

@@ -1,42 +1,84 @@
-import { createQuestionBasePage, autoScoredStudentViewSettings, autoScoredScoringPreviewTab, scoringSectionBaseEditTab, questionInstructionsComponent, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, commonComponents, additionalSettingsPanel } from "./components/";
+import { createQuestionBasePage, autoScoredStudentViewSettings, autoScoredScoringPreviewTab, scoringSectionBaseEditTab, questionInstructionsComponent, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, commonComponents, additionalSettingsPanel, acceptedStudentInputComponent, studentViewSettingsLabelComponent, customizeSpecialCharacterComponent } from "./components/";
 import { dialogBoxBase } from "./dialogBoxBase";
 import utilities from "../support/helpers/utilities";
 const css = Cypress.env('css');
 
 const selectors = {
     ...questionInstructionsComponent,
+    ...acceptedStudentInputComponent,
+    ...autoScoredStudentViewSettings,
+    ...autoScoredScoringPreviewTab,
+    ...scoringSectionBaseEditTab,
+    ...customizeSpecialCharacterComponent,
+    ...dialogBoxBase,
     ...autoScoredSpecifyCorrectAnswerSection,
-    
+    ...commonComponents,
+
+    answerLabelSpecifyCorrectAnswerSection: () => cy.get('.answer-label'),
+    displayCharacterCountLabel: () => cy.get('[data-ngie-testid="display-character-count-checkbox"] .MuiFormControlLabel-label'),
+    displayCharacterCountCheckbox: () => cy.get('[data-ngie-testid="display-character-count-checkbox"] input'),
+    displayWordCountLabel: () => cy.get('[data-ngie-testid="display-word-count-checkbox"] .MuiFormControlLabel-label'),
+    displayWordCountCheckbox: () => cy.get('[data-ngie-testid="display-word-count-checkbox"] input'),
+    autoScaleTheResponseFieldHeightLabel: () => cy.get('[data-ngie-testid*="auto-scale-the-response-field-height"] .MuiFormControlLabel-label'),
+    autoScaleTheResponseFieldHeightCheckbox: () => cy.get('[data-ngie-testid*="auto-scale-the-response-field-height"] input'),
+    spellCheckLabel: () => cy.get('[data-ngie-testid="spell-check-checkbox"] .MuiFormControlLabel-label'),
+    spellCheckCheckbox: () => cy.get('[data-ngie-testid="spell-check-checkbox"] input[type="checkbox"]'),
+    setLimitLabel: () => cy.get('[class*="SetLimitLabel"]'),
+    minimumLimitLabel: () => cy.get('.set-wrapper .additional-settings-label').eq(0),
+    maximumLimitLabel: () => cy.get('.set-wrapper .additional-settings-label').eq(1),
+    minMaxLabelAndInputFieldWrapper: () => cy.get('[class*="MinMaxInputWrapper'),
+    minimumLimitInputField: () => cy.get('.set-wrapper .text-input-field input').eq(0),
+    maximumLimitInputField: () => cy.get('.set-wrapper .text-input-field input').eq(1),
+    wordRadioButton: () => cy.get('input[aria-label="Word"]'),
+    wordLabel: () => cy.get('[aria-label="Word"].ngie-radio-label'),
+    characterRadioButton: () => cy.get('input[aria-label="Character"]'),
+    characterLabel: () => cy.get('[aria-label="Character"].ngie-radio-label'),
+    noneRadioButton: () => cy.get('input[aria-label="None"]'),
+    noneLabel: () => cy.get('[aria-label="None"].ngie-radio-label'),
+    alwaysShowMaxLimitLabel: () => cy.get('[data-ngie-testid="always-show-maximum-limit-checkbox"] .MuiFormControlLabel-label'),
+    alwaysShowMaxLimitCheckbox: () => cy.get('[data-ngie-testid="always-show-maximum-limit-checkbox"] input'),
+    alwaysShowMinLimitLabel: () => cy.get('[data-ngie-testid="always-show-minimum-limit-checkbox"] .MuiFormControlLabel-label'),
+    alwaysShowMinLimitCheckBox: () => cy.get('[data-ngie-testid="always-show-minimum-limit-checkbox"] input'),
     correctAnswerAccordionLabel: () => cy.get('[class*="AnswerAccordionstyles__Label"]'),
     answerInputFieldSpecifyCorrectAnswerSection: () => cy.get('.short-text-response-input-field input'),
-    answerInputFieldSpecifyCorrectAnswerSectionWrapper: () => cy.get('.short-text-response-input-field input').parents('.MuiTextField-root'),
+    answerInputFieldSpecifyCorrectAnswerSectionWrapper: () => cy.get('.input-wrapper'),
     exactRadioOptionLabel: () => cy.get('.ngie-radio-label').eq(0),
     containsTextRadioOptionLabel: () => cy.get('.ngie-radio-label').eq(1),
     caseSensitiveCheckboxLabel: () => cy.get('[data-ngie-testid="case-sensitive-checkbox"] .MuiFormControlLabel-label'),
     ignoreSpacesBeforeAndAfterCheckboxLabel: () => cy.get('[data-ngie-testid="ignore-spaces-before-and-after-checkbox"] .MuiFormControlLabel-label'),
-    exactRadioButton: () => cy.get('input[aria-label="Exact"]'),
-    containsTextRadioButton: () => cy.get('input[aria-label="Contains text"]'),
     caseSensitiveCheckbox: () => cy.get('[data-ngie-testid="case-sensitive-checkbox"] input'),
     ignoreSpacesBeforeAndAfterCheckbox: () => cy.get('[data-ngie-testid="ignore-spaces-before-and-after-checkbox"] input'),
-    previewTabResponseField: () => cy.get('.input-field input:visible'),
-    previewTabResponseFieldWrapper: () => cy.get('[class*="edit-question-preview-wrapper"] .short-text-preview-response-input-field input').parents('.MuiTextField-root'),
+    warningMessage: () => cy.get('.disabled-wrapper-cls [class*="DisabledTextWrapper"]'),
+    warningMessageContainer: () => cy.get('.disabled-wrapper-cls'),
+    caseSensitiveCheckboxLabel: () => cy.get('[data-ngie-testid="case-sensitive-checkbox"] [class*="label"]'),
+    caseSensitiveCheckbox: () => cy.get('[data-ngie-testid="case-sensitive-checkbox"] input'),
+    validateIfAnswerIsIncludedCheckboxLabel: () => cy.get('[data-ngie-testid="validate-if-answer-is-included-in-the-response-checkbox"] [class*="label"]'),
+    validateIfAnswerIsIncludedCheckbox: () => cy.get('[data-ngie-testid="validate-if-answer-is-included-in-the-response-checkbox"] input'),
+    ignoreExtraSpacesCheckboxLabel: () => cy.get('[data-ngie-testid="ignore-extra-spaces-checkbox"] [class*="label"]'),
+    ignoreExtraSpacesCheckbox: () => cy.get('[data-ngie-testid="ignore-extra-spaces-checkbox"] input'),
+    specialCharactersLabel: () => cy.get('.special-character-label'),
+    enableSpecialCharactersCheckbox: () => cy.get('.special-char-checkbox input'),
+    enableSpecialCharactersLabel: () => cy.get('.special-char-checkbox .MuiFormControlLabel-label'),
     //Preview tab
+    previewTabResponseField: () => cy.get('.input-field input:visible'),
+    previewTabResponseFieldWrapper: () => cy.get('.input-wrapper:visible'),
     previewTabCorrectAnswerWrapper: () => cy.get('[class*="ShortTextResponsestyles__CorrectAnswerWrapper"]'),
     previewTabCorrectAnswerLabel: () => cy.get('[class*="ShortTextResponsestyles__CorrectAnswerLabel"]'),
     previewTabCorrectAnswerResponse: () => cy.get('[class*="ShortTextResponsestyles__CorrectAnswerValueWrapper"]'),
-    previewTabResponseFieldSpecialCharactersButton: () => cy.get('.cloze-with-text-response-preview-wrapper .custon-special-character-button'),
-    //Additional settings
-    ariaLabelLabel: () => cy.get('[class*="ShortTextResponsestyle__AriaLabelWrapper"] .text-label'),
-    ariaLabelInputField: () => cy.get('.input-field [aria-label="ARIA label"]'),
-    placeholderTextLabel: () => cy.get('[class*="ShortTextResponsestyle__PlaceholderWrapper"] .text-label'),
-    placeholderTextInputField: () => cy.get('input[aria-label="Placeholder Text"]'),
-    typeOfAnswerInputLabel: () => cy.get('#Type-of-Answer-input-dropdown-label'),
-    typeOfAnswerInputDropdown: () => cy.get('#Type-of-Answer-input-select'),
-    typeOfAnswerInputDropdownListOptions: (optionNumber) => cy.get('[aria-labelledby*="Type-of-Answer-input"] .dropdown-menu-item').eq(optionNumber),
-    setCharacterLimitLabel: () => cy.get('label[aria-labelledby="Set character limit"]'),
-    setCharacterLimitInputField: () => cy.get('input[aria-label="Set character limit"]'),
-    spellCheckLabel: () => cy.get('[data-ngie-testid="spell-check-checkbox"] .MuiFormControlLabel-label'),
-    spellCheckCheckbox: () => cy.get('[data-ngie-testid="spell-check-checkbox"] input')
+    responseFieldCountPreviewTab: () => cy.get('[class*="InputLimitLabelWrapper"]'),
+    characterWordCountLabelPreviewTab: () => cy.get('[class*="ShortTextResponsestyles__WordCharCountWrapper"]'),
+    //TODO: Shift all preview tab special characters popup related selectors/steps to a common component file once https://redmine.zeuslearning.com/issues/559296 is resolved
+    //preview tab special characters
+    specialCharactersPopupTitlePreviewTab: () => cy.get('[class*="Popupstyles__TitleWrapper"]'),
+    specialCharactersPopupCategoryAccordionLabelPreviewTab: () => cy.get('[class*="ResponseInputComponentstyles__AccordionLabel"]'),
+    specialCharactersPopupCategoryAccordionWrapperPreviewTab: () => cy.get('.special-character-accordion'),
+    specialCharactersPopupCharacterSymbol: () => cy.get('.characters-button'),
+    specialCharactersPopupSymbolPreviewTab: () => cy.get('.ngie-accordion button'),
+    specialCharactersPopupCategoryAccordionChevronButtonPreviewTab: () => cy.get('[class*="MuiAccordionSummary-expandIconWrapper"]'),
+    specialCharactersPopupCategoryAccordionCloseButtonPreviewTab: () => cy.get('[data-at="close-button"]'),
+    specialCharactersCustomSymbolsPreviewTab: () => cy.get('[class*="SpecialMathCharacterstyles__CharacterWrapper"] button'),
+    specialCharactersButtonPreviewTab: () => cy.get('.edit-question-preview-wrapper .custon-special-character-button'),
+    previewTabResponseFieldSpecialCharactersButton: () => cy.get('.cloze-with-text-response-preview-wrapper .custon-special-character-button')
 }
 
 const steps = {
@@ -45,6 +87,9 @@ const steps = {
     ...autoScoredScoringPreviewTab.steps,
     ...scoringSectionBaseEditTab.steps,
     ...questionInstructionsComponent.steps,
+    ...acceptedStudentInputComponent.steps,
+    ...customizeSpecialCharacterComponent.steps,
+    ...commonComponents.steps,
     ...additionalSettingsPanel.steps,
     ...autoScoredSpecifyCorrectAnswerSection.steps,
 
@@ -93,6 +138,12 @@ const steps = {
         utilities.verifyElementVisibilityState(shortTextResponsePage.previewTabCorrectAnswerResponse(), 'visible');
     },
 
+    enterTextInShortTextResponseInputField: (correctAnswer) => {
+        shortTextResponsePage.setCorrectAnswerResponseField()
+            .type(correctAnswer)
+            .should('have.value', correctAnswer);
+    },
+
     createBasicShortTextResponseQuestion: (inputQuestion, points, inputAnswer) => {
         shortTextResponsePage.questionInstructionsInputField()
             .type(inputQuestion);
@@ -105,12 +156,12 @@ const steps = {
     },
 
     /**
-     * @param {string} text text to entered in set correct answer input field
+     * @param {string} text text to entered in specify correct answer input field
+     * @description enters text in answer inout field in specify correct answer section
      */
     enterTextInAnswerInputFieldSpecifyCorrectAnswerSection: (text) => {
         shortTextResponsePage.answerInputFieldSpecifyCorrectAnswerSection()
-            .type(text)
-            .should('have.value', text);
+            .type(text);
     },
 
     clearAndFocusOutOfSpecifyCorrectAnswerInputField: () => {
@@ -119,24 +170,512 @@ const steps = {
             .blur();
     },
 
+    clearSpecifyCorrectAnswerInputField: () => {
+        shortTextResponsePage.answerInputFieldSpecifyCorrectAnswerSection()
+            .clear();
+    },
+
+    /**
+    * @param {string} text text in answer input field in correct answer input field
+    * @description function verifies text in answer input field in correct answer input field
+    */
+    verifyTextInAnswerInputFieldSpecifyCorrectAnswerSection: (text) => {
+        shortTextResponsePage.answerInputFieldSpecifyCorrectAnswerSection()
+            .should('have.value', text);
+    },
+
     /**
-     * @param {string} text text to entered in set correct answer input field
+     * @param {string} text text to be entered in response field preview tab
+     * @description enters text in preview tab response field
+     * 
      */
     enterTextInAnswerInputFieldPreviewTab: (text) => {
         shortTextResponsePage.previewTabResponseField()
             .clear()
-            .type(text)
-            .should('have.value', text);
+            .type(text);
+    },
+
+    focusInAnswerInputFieldPreviewTab: () => {
+        shortTextResponsePage.previewTabResponseField()
+            .click();
     },
 
     /**
-     * @param {string} text text to entered in set correct answer input field
+     * @param {string} text text to be entered in response field preview tab
+     * @description verifies text entered in response field preview tab
      */
     verifyTextInAnswerInputFieldPreviewTab: (text) => {
         shortTextResponsePage.previewTabResponseField()
             .should('have.value', text);
     },
 
+    verifySpellCheckOfResponseFieldPreviewTabDisabled: () => {
+        shortTextResponsePage.previewTabResponseField()
+            .should('have.prop', 'spellcheck', false);
+    },
+
+    verifySpellCheckOfResponseFieldPreviewTabEnabled: () => {
+        shortTextResponsePage.previewTabResponseField()
+            .should('have.prop', 'spellcheck', true);
+    },
+
+    verifySpellCheckOfResponseFieldDisabledSpecifyCorrectAnswerSection: () => {
+        shortTextResponsePage.answerInputFieldSpecifyCorrectAnswerSection()
+            .should('have.prop', 'spellcheck', false);
+    },
+
+    verifySpellCheckOfResponseFieldEnabledSpecifyCorrectAnswerSection: () => {
+        shortTextResponsePage.answerInputFieldSpecifyCorrectAnswerSection()
+            .should('have.prop', 'spellcheck', true);
+    },
+
+    checkSpellCheckCheckbox: () => {
+        shortTextResponsePage.spellCheckCheckbox()
+            .click()
+        steps.verifySpellCheckCheckboxChecked();
+    },
+
+    uncheckSpellCheckCheckbox: () => {
+        shortTextResponsePage.spellCheckCheckbox()
+            .click();
+        steps.verifySpellCheckCheckboxUnchecked();
+    },
+
+    verifySpellCheckCheckboxUnchecked: () => {
+        shortTextResponsePage.spellCheckCheckbox()
+            .should('not.be.checked');
+    },
+
+    verifySpellCheckCheckboxChecked: () => {
+        shortTextResponsePage.spellCheckCheckbox()
+            .should('be.checked');
+    },
+
+    verifyDisplayCharacterCountCheckboxUnchecked: () => {
+        shortTextResponsePage.displayCharacterCountCheckbox()
+            .should('not.be.checked');
+    },
+
+    verifyDisplayWordCountCheckboxUnchecked: () => {
+        shortTextResponsePage.displayWordCountCheckbox()
+            .should('not.be.checked');
+    },
+
+    verifyDisplayCharacterCountCheckboxChecked: () => {
+        shortTextResponsePage.displayCharacterCountCheckbox()
+            .should('be.checked');
+    },
+
+    verifyDisplayWordCountCheckboxChecked: () => {
+        shortTextResponsePage.displayWordCountCheckbox()
+            .should('be.checked');
+    },
+
+    checkDisplayCharacterCountCheckbox: () => {
+        shortTextResponsePage.displayCharacterCountCheckbox()
+            .click();
+        steps.verifyDisplayCharacterCountCheckboxChecked();
+    },
+
+    checkDisplayWordCountCheckbox: () => {
+        shortTextResponsePage.displayWordCountCheckbox()
+            .click();
+        steps.verifyDisplayWordCountCheckboxChecked();
+    },
+
+    focusOutOfResponseField: () => {
+        shortTextResponsePage.previewTabResponseField()
+            .blur();
+    },
+
+    /**
+     * @param {number} maxLimit value to be entered in maximum limit input field
+     * @description this function enters and verifies the value in maximum limit input field
+     */
+    setMaximumLimit: (maxLimit) => {
+        shortTextResponsePage.maximumLimitInputField()
+            .clear()
+            .type(maxLimit)
+            .blur()
+            .should('have.value', maxLimit);
+
+    },
+
+    /**
+     * @param {number} minLimit value to be entered in minimum limit input field
+     * @description this function enters and verifies the value in minimum limit input field
+     */
+    setMinimumLimit: (minLimit) => {
+        shortTextResponsePage.minimumLimitInputField()
+            .clear()
+            .type(minLimit)
+            .blur()
+            .should('have.value', minLimit)
+    },
+
+    clearAndFocusOutOfMaximumLimitInputField: () => {
+        shortTextResponsePage.maximumLimitInputField()
+            .clear()
+            .blur();
+    },
+
+    clearAndFocusOutOfMinimumLimitInputField: () => {
+        shortTextResponsePage.minimumLimitInputField()
+            .clear()
+            .blur();
+    },
+
+    /**
+     * @param {number} maxLimit value of maximum input field
+     * @description this function verifies the value in maximum limit input field
+     */
+    verifyMaximumLimitInputField: (maxLimit) => {
+        shortTextResponsePage.maximumLimitInputField()
+            .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');
+    },
+
+    verifyMinimumLimitErrorMessage: () => {
+        utilities.verifyInnerText(commonComponents.errorMessage().eq(0), 'Error: Minimum limit must be less than or equal to Maximum limit.');
+        utilities.verifyElementVisibilityState(commonComponents.errorMessage().eq(0), 'visible');
+    },
+
+    /**
+     * @param {number} minLimit value of minimum input field
+     * @description this function verifies the value in minimum limit input field
+     */
+    verifyMinimumLimitInputField: (minLimit) => {
+        shortTextResponsePage.minimumLimitInputField()
+            .should('have.value', minLimit)
+    },
+
+    verifyWordRadioButtonSelected: () => {
+        shortTextResponsePage.wordRadioButton()
+            .should('be.checked');
+    },
+
+    verifyWordRadioButtonUnselected: () => {
+        shortTextResponsePage.wordRadioButton()
+            .should('not.be.checked');
+    },
+
+    verifyCharacterRadioButtonUnselected: () => {
+        shortTextResponsePage.characterRadioButton()
+            .should('not.be.checked');
+    },
+
+    verifyCharacterRadioButtonSelected: () => {
+        shortTextResponsePage.characterRadioButton()
+            .should('be.checked');
+    },
+
+    verifyNoneRadioButtonUnselected: () => {
+        shortTextResponsePage.noneRadioButton()
+            .should('not.be.checked');
+    },
+
+    selectWordRadioButton: () => {
+        shortTextResponsePage.wordRadioButton()
+            .click()
+            .should('be.checked');
+    },
+
+    verifyAutoScaleTheResponseFieldHeightCheckboxUnchecked: () => {
+        shortTextResponsePage.autoScaleTheResponseFieldHeightCheckbox()
+            .should('not.be.checked');
+    },
+
+    verifyAutoScaleTheResponseFieldHeightCheckboxChecked: () => {
+        shortTextResponsePage.autoScaleTheResponseFieldHeightCheckbox()
+            .should('be.checked');
+    },
+
+    verifyEnableSpecialCharactersCheckboxUnchecked: () => {
+        shortTextResponsePage.enableSpecialCharactersCheckbox()
+            .should('not.be.checked');
+    },
+
+    checkAutoScaleTheResponseFieldHeightCheckbox: () => {
+        shortTextResponsePage.autoScaleTheResponseFieldHeightCheckbox()
+            .click();
+        steps.verifyAutoScaleTheResponseFieldHeightCheckboxChecked();
+    },
+
+    uncheckAutoScaleTheResponseFieldHeightCheckbox: () => {
+        shortTextResponsePage.autoScaleTheResponseFieldHeightCheckbox()
+            .click();
+        steps.verifyAutoScaleTheResponseFieldHeightCheckboxUnchecked();
+    },
+
+    /**
+     * @param {"Disabled"|"Enabled"} mode state of auto scale height 
+     * @description function verifies response field based on state of auto scale height 
+     */
+    verifyAutoScaleHeightOfResponseFieldFunctionalityPreviewTab: (mode) => {
+        switch (mode) {
+            case 'Disabled':
+                shortTextResponsePage.previewTabResponseFieldWrapper()
+                    .find('input')
+                    .should('have.attr', 'type', 'text')
+                    .should('not.have.css', 'overflow', 'hidden');
+                break;
+            case 'Enabled':
+                shortTextResponsePage.previewTabResponseFieldWrapper()
+                    .find('textarea')
+                    .eq(0)
+                    .should('have.class', 'MuiOutlinedInput-inputMultiline')
+                    .should('have.css', 'overflow', 'hidden')
+                    .should('not.have.attr', 'type');
+                break;
+        }
+    },
+
+    /**
+     * @param {"Disabled"|"Enabled"} mode state of auto scale height 
+     * @description function verifies response field based on state of auto scale height 
+     */
+    verifyAutoScaleHeightOfResponseFieldFunctionalitySpecifyCorrectAnswerSection: (mode) => {
+        switch (mode) {
+            case 'Disabled':
+                shortTextResponsePage.answerInputFieldSpecifyCorrectAnswerSectionWrapper()
+                    .find('input')
+                    .should('have.attr', 'type', 'text')
+                    .should('not.have.css', 'overflow', 'hidden');
+                break;
+            case 'Enabled':
+                shortTextResponsePage.answerInputFieldSpecifyCorrectAnswerSectionWrapper()
+                    .find('textarea')
+                    .eq(0)
+                    .should('have.class', 'MuiOutlinedInput-inputMultiline')
+                    .should('have.css', 'overflow', 'hidden')
+                    .should('not.have.attr', 'type');
+                break;
+        }
+    },
+
+    checkEnableSpecialCharactersCheckbox: () => {
+        shortTextResponsePage.enableSpecialCharactersCheckbox()
+            .click();
+    },
+
+    selectCharacterRadioButton: () => {
+        shortTextResponsePage.characterRadioButton()
+            .click()
+            .should('be.checked');
+    },
+
+    uncheckEnableSpecialCharactersCheckbox: () => {
+        shortTextResponsePage.enableSpecialCharactersCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    /**
+    * @description Verify symbols displayed in for a category in special characters popup
+    * @param {number} categoryIndex Index of the category
+    * @param {string[]} categorySymbolsArray Array of the symbols of the category
+    */
+    verifySpecialCharactersPopupCategorySymbols: (categoryIndex, categorySymbolsArray) => {
+        shortTextResponsePage.specialCharactersPopupCategoryAccordionWrapperPreviewTab()
+            .eq(categoryIndex)
+            .within(() => {
+                categorySymbolsArray[index].forEach((symbolARIALabel, index) => {
+                    shortTextResponsePage.specialCharactersPopupCharacterSymbol()
+                        .eq(index)
+                        .find('svg')
+                        .should('have.attr', 'aria-label', `${symbolARIALabel}`);
+                });
+            });
+    },
+
+    openSpecialCharactersPopupPreviewTab: () => {
+        shortTextResponsePage.specialCharactersButtonPreviewTab()
+            .click();
+    },
+
+    closeSpecialCharactersPopupPreviewTab: () => {
+        shortTextResponsePage.specialCharactersPopupCategoryAccordionCloseButtonPreviewTab()
+            .click();
+    },
+
+    /**
+  * Verify custom special characters displayed in special characters popup in preview tab
+  * @param {string[]} customSpecialCharacters Array of custom special characters
+  */
+    verifyCustomSpecialCharactersInSpecialCharactersPopupPreviewTab: (customSpecialCharacters) => {
+        dialogBoxBase.dialogBox()
+            .within(() => {
+                customSpecialCharacters.forEach((customSpecialCharacter, index) => {
+                    utilities.verifyInnerText(shortTextResponsePage.specialCharactersCustomSymbolsPreviewTab().eq(index), `${customSpecialCharacter}`);
+                    utilities.verifyElementVisibilityState(shortTextResponsePage.specialCharactersCustomSymbolsPreviewTab().eq(index), 'visible');
+                });
+                utilities.verifyElementCount(shortTextResponsePage.specialCharactersCustomSymbolsPreviewTab(), `${customSpecialCharacters.length}`);
+            });
+    },
+
+    /**
+  * click on custom special character symbol in special characters popup in preview tab
+  * @param {string} customSpecialCharacterSymbol custom special character symbol
+  */
+    clickOnCustomSpecialCharacterSymbolInSpecialCharactersPopupPreviewTab: (customSpecialCharacterSymbol) => {
+        dialogBoxBase.dialogBox()
+            .within(() => {
+                shortTextResponsePage.specialCharactersCustomSymbolsPreviewTab()
+                    .contains(customSpecialCharacterSymbol)
+                    .click();
+            });
+    },
+
+    focusOutOfResponseInputFieldPreviewTab: () => {
+        shortTextResponsePage.previewTabResponseField()
+            .blur();
+    },
+
+    selectNoneRadioButton: () => {
+        shortTextResponsePage.noneRadioButton()
+            .click()
+            .should('be.checked');
+    },
+
+    verifyAlwaysShowMaximumLimitCheckboxIsChecked: () => {
+        shortTextResponsePage.alwaysShowMaxLimitCheckbox()
+            .should('be.checked');
+    },
+
+    checkAlwaysShowMinimumLimitCheckbox: () => {
+        shortTextResponsePage.alwaysShowMinLimitCheckBox()
+            .click()
+            .should('be.checked');
+    },
+
+    /**
+     * @description this function verifies word limit in the preview tab
+     * @param {string} wordLimit as set in the set limit section
+     */
+    verifyResponseFieldCount: (wordLimit) => {
+        utilities.verifyInnerText(shortTextResponsePage.responseFieldCountPreviewTab(), wordLimit);
+    },
+
+    /**
+     * @description this function verifies word maximum/minimum limit in the preview tab
+     * @param {string} maxLimit as set in the set limit section
+     * @param {string} minLimit as set in the set limit section
+     */
+    verifyCharacterLimitInPreviewTab: (maxLimit, minLimit = null) => {
+        if (minLimit !== null) {
+            utilities.verifyInnerText(shortTextResponsePage.responseFieldCountPreviewTab(), `${minLimit}-${maxLimit} characters required`);
+        }
+        else {
+            utilities.verifyInnerText(shortTextResponsePage.responseFieldCountPreviewTab(), `Maximum ${maxLimit} characters`);
+        };
+    },
+
+    /**
+     * @description this function verifies word maximum/minimum limit in the preview tab
+     * @param {string} maxLimit as set in the set limit section
+     * @param {string} minLimit as set in the set limit section
+     */
+    verifyWordLimitInPreviewTab: (maxLimit, minLimit = null) => {
+        if (minLimit !== null) {
+            utilities.verifyInnerText(shortTextResponsePage.responseFieldCountPreviewTab(), `${minLimit}-${maxLimit} words required`);
+        }
+        else {
+            utilities.verifyInnerText(shortTextResponsePage.responseFieldCountPreviewTab(), `Maximum ${maxLimit} words`);
+        };
+    },
+
+    /**
+     * @description this function verifies maximum/minimum limit in the preview tab
+     * @param {string} maxLimit as set in the set limit section
+     * @param {string} minLimit as set in the set limit section
+     */
+    verifyCharacterLimitPreviewTab: (maxLimit, minLimit = null) => {
+        if (minLimit !== null) {
+            utilities.verifyInnerText(shortTextResponsePage.responseFieldCountPreviewTab(), `${minLimit}-${maxLimit} characters required`);
+        }
+        else {
+            utilities.verifyInnerText(shortTextResponsePage.responseFieldCountPreviewTab(), `Maximum ${maxLimit} characters`);
+        };
+    },
+
+    /**
+     * @description this function verifies maximum limit in specify correct answer section
+     * @param {string} maxLimit as set in the set limit section
+     */
+    verifyLimitInSpecifyCorrectAnswer: (maxLimit) => {
+        shortTextResponsePage.answerInputFieldSpecifyCorrectAnswerSection()
+            .should('have.attr', 'maxlength', maxLimit)
+    },
+
+    /**
+     * @description this function verifies warning text for limit reached
+     * @param {string} warningText warning message displayed
+     */
+    verifyWarningMessage: (warningText) => {
+        utilities.verifyElementVisibilityState(shortTextResponsePage.warningMessage(), 'visible');
+        utilities.verifyInnerText(shortTextResponsePage.warningMessage(), warningText);
+    },
+
+    verifyWarningMessageNotExist: () => {
+        utilities.verifyElementVisibilityState(shortTextResponsePage.warningMessage(), 'notExist');
+    },
+
+    /**
+     * @description Check the conditional checkbox in edit tab
+     * @param {"Case sensitive"|"Validate if answer is included in the response"|"Ignore extra spaces"} conditionalCheckboxName Name of the conditional checkbox to be checked
+     */
+    checkConditionalCheckbox: (conditionalCheckboxName) => {
+        switch (conditionalCheckboxName) {
+            case 'Case sensitive':
+                shortTextResponsePage.caseSensitiveCheckbox()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Validate if answer is included in the response':
+                shortTextResponsePage.validateIfAnswerIsIncludedCheckbox()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Ignore extra spaces':
+                shortTextResponsePage.ignoreExtraSpacesCheckbox()
+                    .click()
+                    .should('be.checked');
+                break;
+            default:
+                throw new Error('invalid state string');
+        }
+    },
+
+    /**
+    * @description uncheck the conditional checkbox in edit tab
+    * @param {"Case sensitive"|"Validate if answer is included in the response"|"Ignore extra spaces"} conditionalCheckboxName Name of the conditional checkbox to be unchecked
+    */
+    uncheckConditionalCheckbox: (conditionalCheckboxName) => {
+        switch (conditionalCheckboxName) {
+            case 'Case sensitive':
+                shortTextResponsePage.caseSensitiveCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                break;
+            case 'Validate if answer is included in the response':
+                shortTextResponsePage.validateIfAnswerIsIncludedCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                break;
+            case 'Ignore extra spaces':
+                shortTextResponsePage.ignoreExtraSpacesCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                break;
+            default:
+                throw new Error('invalid state string');
+        }
+    },
     verifyCorrectAnswerErrorMessage: () => {
         utilities.verifyInnerText(commonComponents.errorMessage().last(), 'Error: Answer is required.');
     },
@@ -144,7 +683,7 @@ const steps = {
     verifyCorrectAnswerErrorMessageIsNotDisplayed: () => {
         commonComponents.steps.verifyErrorMessageIsNotDisplayed();
     },
-    
+
     verifyCorrectAnswerWrapperNotExist: () => {
         utilities.verifyElementVisibilityState(shortTextResponsePage.previewTabCorrectAnswerWrapper(), 'notExist');
     }
@@ -152,11 +691,14 @@ const steps = {
 
 const tests = {
     ...autoScoredScoringPreviewTab.tests,
+    ...studentViewSettingsLabelComponent.tests,
+    ...autoScoredStudentViewSettings.tests,
+    ...questionInstructionsComponent.tests,
+    ...commonComponents.tests,
     ...scoringSectionBaseEditTab.tests,
     ...autoScoredScoringSectionMultiResponseType.tests,
     ...createQuestionBasePage.tests,
     ...dialogBoxBase.tests,
-    ...commonComponents.tests,
     ...additionalSettingsPanel.tests,
     ...autoScoredSpecifyCorrectAnswerSection.tests,
 
@@ -178,10 +720,10 @@ const tests = {
     },
 
     /**
-   * Verifies the contents and functionality of the 'Specify correct answer' accordion for multiple selection questions.
-   * @param {{'Correct' | 'Alternative'}} accordionName - The name of the accordion to be used in the validation.
-   * @example - verifySpecifyCorrectAnswerAccordionContentsAndFunctionality('Correct');
-   */
+     * Verifies the contents and functionality of the 'Specify correct answer' accordion for multiple selection questions.
+     * @param {{'Correct' | 'Alternative'}} accordionName - The name of the accordion to be used in the validation.
+     * @example - verifySpecifyCorrectAnswerAccordionContentsAndFunctionality('Correct');
+     */
     verifySpecifyCorrectAnswerAccordionContentsAndFunctionality: (accordionName) => {
         it('User should be able to enter answer in Answer input field in specify correct answer section', () => {
             shortTextResponsePage.steps.enterTextInAnswerInputFieldSpecifyCorrectAnswerSection('Petals');