itemengine-cypress-automation 1.0.142 → 1.0.143

package/cypress/pages/dragAndDropIntoCategoriesPage.js

@@ -1,4 +1,4 @@
-import { optionsWrapperComponent, createQuestionBasePage, autoScoredSpecifyCorrectAnswerSection, scoringSectionBaseEditTab, autoScoredScoringSectionMultiResponseType, questionInstructionsComponent, autoScoredStudentViewSettings, autoScoredScoringPreviewTab, commonComponents, ckEditorToolbar, equationEditorFlyout, randomizeOptionsComponent, allowMultipleInstancesOfSameDraggableOptionComponent, studentViewSettingsLabelComponent, additionalSettingsPanel, draggableOptionContainer, draggableOptionsSectionComponent, maximumCapacityPerDropzoneComponent, enableOuterBorderComponent } from "./components";
+import { optionsWrapperComponent, createQuestionBasePage, autoScoredSpecifyCorrectAnswerSection, scoringSectionBaseEditTab, autoScoredScoringSectionMultiResponseType, questionInstructionsComponent, autoScoredStudentViewSettings, autoScoredScoringPreviewTab, commonComponents, ckEditorToolbar, equationEditorFlyout, randomizeOptionsComponent, allowMultipleInstancesOfSameDraggableOptionComponent, studentViewSettingsLabelComponent, additionalSettingsPanel, draggableOptionContainer, draggableOptionsSectionComponent, maximumCapacityPerDropzoneComponent, enableOuterBorderComponent, additionalSettingsAccessibilitySectionComponent } from "./components";
 import utilities from "../support/helpers/utilities";
 import constants from "../fixtures/constants";
 const css = Cypress.env('css');
@@ -19,6 +19,7 @@ const selectors = {
     ...optionsWrapperComponent,
     ...draggableOptionsSectionComponent,
     ...enableOuterBorderComponent,
+    ...additionalSettingsPanel,
     editCellPropertyButton: () => cy.get('button[aria-label="More Action"]'),
     editCellPropertyList: () => cy.get('.ngie-action-cell-container [role="menu"]'),
     editCellPropertyListOption: () => cy.get('[class*="MuiMenuItem"][role="menuitem"]'),
@@ -696,22 +697,6 @@ const steps = {
             });
     },
 
-    /**
-     * @description Verifies that the equation text in the Preview tab is correct.
-     * @param {number} optionIndex - The index of the option in the Preview tab.
-     */
-    verifyDraggableOptionWithEquationTextInPreviewTab: (optionIndex) => {
-        dragAndDropIntoCategoriesPage.optionsContainerPreviewTab()
-            .within(() => {
-                dragAndDropIntoCategoriesPage.draggableOption()
-                    .eq(optionIndex)
-                    .find('[role="math"]')
-                    .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-                    .contains(constants.CKEditorInputFieldEnteredEquationText);
-                utilities.verifyElementVisibilityState(utilities.getNthElement(draggableOptionContainer.draggableOptionDragIcon(), optionIndex), 'exist');
-            });
-    },
-
     verifyDraggableOptionPreviewTab: (optionIndex, optionText) => {
         dragAndDropIntoCategoriesPage.optionsContainerPreviewTab()
             .within(() => {
@@ -1420,6 +1405,8 @@ const tests = {
     ...autoScoredScoringSectionMultiResponseType.tests,
     ...enableOuterBorderComponent.tests,
     ...createQuestionBasePage.tests,
+    ...additionalSettingsPanel.tests,
+    ...additionalSettingsAccessibilitySectionComponent.tests,
     verifyContentsOfSpecifyCorrectAnswerSection: (scoringType) => {
         it(`When the user selects ${scoringType} from scoring type dropdown then the specify correct answer sections should be displayed`, () => {
             dragAndDropIntoCategoriesPage.steps.verifyTableCellPropertySpecifyCorrectAnswer(0, 'None');

package/cypress/pages/essayResponsePage.js

@@ -1,5 +1,5 @@
 import { equationEditorCategoriesAndSymbols } from "../fixtures/equationEditorCategoriesAndSymbols ";
-import { questionInstructionsComponent, scoringSectionBaseEditTab, createQuestionBasePage, additionalSettingsPanel, autoScoredScoringPreviewTab, commonComponents, createCustomCategoryFlyout, customizeSpecialCharacterComponent } from "./components";
+import { questionInstructionsComponent, scoringSectionBaseEditTab, createQuestionBasePage, additionalSettingsPanel, autoScoredScoringPreviewTab, commonComponents, createCustomCategoryFlyout, customizeSpecialCharacterComponent, additionalSettingsAccessibilitySectionComponent } from "./components";
 import { equationEditorFlyout } from "./components/equationEditorFlyout";
 import { dialogBoxBase } from "../pages/dialogBoxBase";
 import { essayResponseCommonComponents } from "./components/essayResponseCommonComponents";
@@ -50,7 +50,7 @@ const selectors = {
     equationEditorSectionHelperText: () => cy.get('.equation-editor-description-text'),
     equationEditorSectionCategoriesDragIcon: () => cy.get('.drag-icon-equation-editor-button'),
     equationEditorSectionCategoriesEditIcon: () => cy.get('.edit-icon-button button'),
-    equationEditorSectionTickIcon: () => cy.get('[class*="DraggableItemsGrid"] .tick-icon-wrapper'),
+    equationEditorSectionTickIcon: () => cy.get('.tick-icon-wrapper'),
     selectACategoryErrorMessage: () => cy.get('[class*="ErrorBlock"]'),
     equationEditorSectionCategoryIcon: () => cy.get('.equation-editor-icon'),
     equationEditorSectionDeleteCustomCategoryIcon: () => cy.get('.delete-button-icon button'),
@@ -229,8 +229,8 @@ const steps = {
     createCustomCategoryWithMultipleCategoryCharacters: () => {
         cy.log('Creating a custom category by selecting \'Keypad\' category, partially selecting \'Basic\' and \'Greek\' categories')
         createCustomCategoryFlyout.steps.openCreateCustomCategoryFlyout();
-        createCustomCategoryFlyout.steps.checkCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`);
-        createCustomCategoryFlyout.steps.verifyPartiallyCheckedStateOfCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['basic'].displayName}`);
+        createCustomCategoryFlyout.steps.checkCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['numPad'].displayName}`);
+        createCustomCategoryFlyout.steps.verifyPartiallyCheckedStateOfCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['matrices'].displayName}`);
         createCustomCategoryFlyout.steps.expandCategoryAccordion(`${equationEditorCategoriesAndSymbols['greek'].displayName}`);
         createCustomCategoryFlyout.steps.selectASymbolInCreateCustomCategoryFlyout(`${equationEditorCategoriesAndSymbols['greek'].displayName}`, `${equationEditorCategoriesAndSymbols.greek.symbols.gamma.ariaLabel}`);
         createCustomCategoryFlyout.steps.selectASymbolInCreateCustomCategoryFlyout(`${equationEditorCategoriesAndSymbols['greek'].displayName}`, `${equationEditorCategoriesAndSymbols.greek.symbols.delta.ariaLabel}`);
@@ -248,8 +248,8 @@ const steps = {
             .contains(`${customCategoryName}`)
             .parents('[id*="DraggableItem"]')
             .within(() => {
-                utilities.verifyElementVisibilityState(essayResponsePage.equationEditorSectionCategoriesEditIcon, ('visible'));
-                utilities.verifyElementVisibilityState(essayResponsePage.equationEditorSectionDeleteCustomCategoryIcon, ('visible'));
+                utilities.verifyElementVisibilityState(essayResponsePage.equationEditorSectionCategoriesEditIcon(), 'visible');
+                utilities.verifyElementVisibilityState(essayResponsePage.equationEditorSectionDeleteCustomCategoryIcon(), 'visible');
             });
     },
 
@@ -957,6 +957,7 @@ const tests = {
     ...commonComponents.tests,
     ...customizeSpecialCharacterComponent.tests,
     ...essayResponseCommonComponents.tests,
+    ...additionalSettingsAccessibilitySectionComponent.tests,
 
     /**
      * insert equation and verify input field content and word count
@@ -967,7 +968,7 @@ const tests = {
         it(`On clicking the Ok button the symbols/equation entered should be displayed in the preview tab input field and the Word count should increase to ${wordCount}`, () => {
             equationEditorFlyout.steps.clickOnOkButton()
             utilities.verifyTextContent(essayResponsePage.responseField().find('.ngie_latex'), `${expectedOutput}`);
-            essayResponsePage.steps.verifyResponseFieldWordCount(wordCount);
+            essayResponsePage.steps.verifyWordCount(wordCount);
         });
     },
 
@@ -984,12 +985,14 @@ const tests = {
                             .click();
                     }
                 });
-            //The equation editor input Field equation is not checked.
         });
         equationEditorFlyout.tests.verifyCSSAnda11yOfEquationEditorInputField(categoryName);
-        if (categoryName === 'keypad') {
-            essayResponsePage.tests.insertEquationAndVerifyInputFieldContentsAndWordCount(`1234567890·,+−×÷`, wordCount);
-        } else {
+        if (categoryName === 'setNotation') {
+            essayResponsePage.tests.insertEquationAndVerifyInputFieldContentsAndWordCount('∈∉∋∌⊂⊃⊆⊇⊄⊅∅∪∩!,:\\/≺≻≼≽({[(])})', wordCount);
+        } else if (categoryName === 'otherSymbols') {
+            essayResponsePage.tests.insertEquationAndVerifyInputFieldContentsAndWordCount(')ℝ|∝•ababc∀ι∞°/', wordCount);
+        }
+        else {
             essayResponsePage.tests.insertEquationAndVerifyInputFieldContentsAndWordCount(mappedArr.toString().replaceAll(',', ''), wordCount)
         }
     }

package/cypress/pages/fillInTheGapsDragAndDropPage.js

@@ -227,6 +227,21 @@ const steps = {
         utilities.verifyElementDisabled(fillInTheGapsDragAndDropPage.dropzonePreviewTab().eq(dropzoneIndex));
     },
 
+    verifyDropzoneIsNotEditableInGradingView: () => {
+        utilities.getNthElement(fillInTheGapsDragAndDropPage.dropzonePreviewTab(), 0)
+            .click();
+        utilities.getNthElement(fillInTheGapsDragAndDropPage.dropzonePreviewTab(), 1)
+            .click();
+        utilities.getNthElement(fillInTheGapsDragAndDropPage.dropzonePreviewTab(), 1)
+            .click();
+        utilities.getNthElement(fillInTheGapsDragAndDropPage.dropzonePreviewTab(), 2)
+            .click();
+        fillInTheGapsDragAndDropPage.steps.verifyDropzoneTextPreviewTab(2, '3\nPetals');
+        fillInTheGapsDragAndDropPage.steps.verifyDropzoneWithImageInPreviewTab(2);
+        fillInTheGapsDragAndDropPage.steps.verifyDropzoneTextPreviewTab(0, '1\nThis is a bold option');
+        fillInTheGapsDragAndDropPage.steps.verifyDropzoneWithEquationTextInPreviewTab(1);
+    },
+
     /**
    * @description Verifies the text content of a specific preview tab dropzone element.
    * @param {number} count - The index of the preview tab dropzone element to verify (zero-based).

package/cypress/pages/fillInTheGapsDropdownPage.js

@@ -1,5 +1,5 @@
 import utilities from "../support/helpers/utilities";
-import { autoScoredScoringPreviewTab, createQuestionBasePage, scoringSectionBaseEditTab, questionInstructionsComponent, correctIncorrectAnswerLabelComponent, autoScoredStudentViewSettings, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, fillInTheGapsDropdownCommonComponent, questionInputFieldComponent, commonComponents, additionalSettingsPanel, optionsWrapperComponent, randomizeOptionsComponent, studentViewSettingsLabelComponent } from "./components";
+import { autoScoredScoringPreviewTab, createQuestionBasePage, scoringSectionBaseEditTab, questionInstructionsComponent, correctIncorrectAnswerLabelComponent, autoScoredStudentViewSettings, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, fillInTheGapsDropdownCommonComponent, questionInputFieldComponent, commonComponents, additionalSettingsPanel, optionsWrapperComponent, randomizeOptionsComponent, studentViewSettingsLabelComponent, responseAreaSettingsPopupComponent, gradingViewEnumerationComponent, additionalSettingsAccessibilitySectionComponent, ariaLabelSectionComponent, placeholderTextSectionComponent } from "./components";
 const css = Cypress.env('css');
 
 const selectors = {
@@ -14,10 +14,20 @@ const selectors = {
     ...autoScoredSpecifyCorrectAnswerSection,
     ...randomizeOptionsComponent,
     ...studentViewSettingsLabelComponent,
+    ...responseAreaSettingsPopupComponent,
+    ...additionalSettingsPanel,
+    ...placeholderTextSectionComponent,
+    ...gradingViewEnumerationComponent,
+    ...ariaLabelSectionComponent,
+    ...additionalSettingsAccessibilitySectionComponent,
     dropdownWrapperPreviewTab: () => cy.get('.cloze-with-text-answer-status-response-preview-wrapper'),
     correctAnswerSectionWrapper: () => cy.get('.cloze-with-text-correct-answer-wrapper'),
     correctAnswerResponseWrapper: () => cy.get('.answer-block'),
     correctAnswerResponse: () => cy.get('.numeration-wrapper'),
+    setForAllDropdownsLabel: () => cy.get('[data-ngie-testid="set-for-all-dropdowns-checkbox"] .MuiFormControlLabel-label'),
+    setForAllDropdownsCheckbox: () => cy.get('[data-ngie-testid="set-for-all-dropdowns-checkbox"] input'),
+    correctAnswerSectionWithoutEnumerationWrapper: () => cy.get('.cloze-with-text-correct-answer-wrapper .preview-question-text-wrapper'),
+    correctAnswersLabel: () => cy.get('.cloze-with-text-correct-answer-label')
 }
 
 const steps = {
@@ -35,6 +45,12 @@ const steps = {
     ...additionalSettingsPanel.steps,
     ...optionsWrapperComponent.steps,
     ...randomizeOptionsComponent.steps,
+    ...responseAreaSettingsPopupComponent.steps,
+    ...additionalSettingsPanel.steps,
+    ...placeholderTextSectionComponent.steps,
+    ...gradingViewEnumerationComponent.steps,
+    ...ariaLabelSectionComponent.steps,
+    ...additionalSettingsAccessibilitySectionComponent.steps,
     /**
      * Verify that the correct option icon is is displayed for a specific dropdown.
      * @param {number} dropdownIndex - The index of the dropdown.
@@ -99,6 +115,104 @@ const steps = {
     verifyCorrectAnswerSectionNotExists: () => {
         utilities.verifyElementVisibilityState(fillInTheGapsDropdownPage.correctAnswerSectionWrapper(), 'notExist');
     },
+
+    verifySetForAllDropdownsCheckboxChecked: () => {
+        fillInTheGapsDropdownPage.setForAllDropdownsCheckbox()
+            .should('be.checked');
+    },
+
+    verifySetForAllDropdownsCheckboxUnchecked: () => {
+        fillInTheGapsDropdownPage.setForAllDropdownsCheckbox()
+            .should('not.be.checked');
+    },
+
+    checkSetForAllDropdownsCheckbox: () => {
+        fillInTheGapsDropdownPage.setForAllDropdownsCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    uncheckSetForAllDropdownsCheckbox: () => {
+        fillInTheGapsDropdownPage.setForAllDropdownsCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    verifyMinimumValueOfWidthInputField: () => {
+        responseAreaSettingsPopupComponent.responseAreaSettingsWidthInputField()
+            .parent()
+            .should('have.attr', 'minallowed', '120');
+    },
+
+    /**
+     * @description Verify width of dropdown in preview tab
+     * @param {number} dropdownIndex index of dropdown
+     * @param {string} width Width of dropdown in px
+     */
+    verifyDropdownWidthPreviewTab: (dropdownIndex, width) => {
+        utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownWrapperPreviewTab(), dropdownIndex)
+            .should('have.css', 'width', width);
+    },
+
+    /**
+     * @description Verify width of dropdown in specify correct answer section
+     * @param {number} dropdownIndex index of dropdown
+     * @param {string} width Width of dropdown in px
+     */
+    verifyDropdownWidthSpecifyCorrectAnswerSection: (dropdownIndex, width) => {
+        utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownWrapperSpecifyCorrectAnswerSection(), dropdownIndex)
+            .should('have.css', 'width', width);
+    },
+
+    /**
+     * Verifies the correct answer dropdown enumeration.
+     * @param {string[]} enumerationArray - An array of enumeration values to verify.
+     * @returns {void}
+     */
+    verifyCorrectAnswerDropdownEnumeration: (enumerationArray) => {
+        utilities.verifyElementCount(fillInTheGapsDropdownPage.correctAnswerResponseWrapper(), enumerationArray.length);
+        enumerationArray.forEach((option, index) => {
+            fillInTheGapsDropdownPage.correctAnswerResponseWrapper()
+                .eq(index)
+                .within(() => {
+                    utilities.verifyInnerText(fillInTheGapsDropdownPage.correctAnswerResponseNumeration(), `${option}`);
+                });
+        });
+    },
+
+    /**
+     * Verifies the correct answer responses without enumeration.
+     * @param {string[]} correctAnswerArray - An array of correct answer responses to verify.
+     * @returns {void}
+     */
+    verifyCorrectAnswerResponsesWithoutEnumeration: (correctAnswerArray) => {
+        fillInTheGapsDropdownPage.correctAnswerSectionWithoutEnumerationWrapper()
+            .within(() => {
+                utilities.verifyElementCount(fillInTheGapsDropdownCommonComponent.correctAnswerResponseWrapperWithoutEnumeration(), correctAnswerArray.length);
+                correctAnswerArray.forEach((correctAnswer, index) => {
+                    fillInTheGapsDropdownCommonComponent.correctAnswerResponseWrapperWithoutEnumeration()
+                        .eq(index)
+                        .should('have.attr', 'value', correctAnswer);
+                });
+            });
+    },
+
+    /**
+     * Verifies the dropdown enumeration in the preview tab.
+     * @param {string[]} enumerationArray - An array of enumeration values to verify.
+     * @returns {void}
+     */
+    verifyDropdownEnumeration: (enumerationArray) => {
+        utilities.verifyElementCount(fillInTheGapsDropdownCommonComponent.dropdownPreviewTab(), enumerationArray.length);
+        enumerationArray.forEach((option, index) => {
+            fillInTheGapsDropdownCommonComponent.dropdownWrapperPreviewTab()
+                .eq(index)
+                .parents('.cloze-with-dropdown-response-wrapper')
+                .within(() => {
+                    utilities.verifyTextContent(fillInTheGapsDropdownCommonComponent.dropdownNumerationPreviewTab(), `${option}`);
+                });
+        });
+    },
 }
 
 const tests = {
@@ -115,7 +229,12 @@ const tests = {
     ...autoScoredStudentViewSettings.tests,
     ...randomizeOptionsComponent.tests,
     ...studentViewSettingsLabelComponent.tests,
-    ...createQuestionBasePage.tests
+    ...createQuestionBasePage.tests,
+    ...additionalSettingsPanel.tests,
+    ...gradingViewEnumerationComponent.tests,
+    ...additionalSettingsAccessibilitySectionComponent.tests,
+    ...ariaLabelSectionComponent.tests,
+    ...placeholderTextSectionComponent.tests
 }
 
 export const fillInTheGapsDropdownPage = {

package/cypress/pages/fillInTheGapsOverImageDragAndDropPage.js

@@ -1,6 +1,6 @@
 import constants from "../fixtures/constants";
 import utilities from "../support/helpers/utilities";
-import { createQuestionBasePage, questionInstructionsComponent, uploadImageSectionComponent, scoringSectionBaseEditTab, optionsWrapperComponent, equationEditorFlyout, ckEditorToolbar, commonComponents, autoScoredScoringPreviewTab, autoScoredStudentViewSettings, maximumCapacityPerDropzoneComponent, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, imageCanvasComponent, backgroundImageUploadComponent, correctIncorrectAnswerLabelComponent, draggableOptionsSectionComponent, draggableOptionContainer, studentViewSettingsLabelComponent, randomizeOptionsComponent, enableOuterBorderComponent, allowMultipleInstancesOfSameDraggableOptionComponent, additionalSettingsPanel, opacityComponent, imageActionsComponent, colorPopupComponent, fillInTheGapsDragAndDropCommonComponents } from "./components";
+import { createQuestionBasePage, questionInstructionsComponent, uploadImageSectionComponent, scoringSectionBaseEditTab, optionsWrapperComponent, equationEditorFlyout, ckEditorToolbar, commonComponents, autoScoredScoringPreviewTab, autoScoredStudentViewSettings, maximumCapacityPerDropzoneComponent, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, imageCanvasComponent, backgroundImageUploadComponent, correctIncorrectAnswerLabelComponent, draggableOptionsSectionComponent, draggableOptionContainer, studentViewSettingsLabelComponent, randomizeOptionsComponent, enableOuterBorderComponent, allowMultipleInstancesOfSameDraggableOptionComponent, additionalSettingsPanel, opacityComponent, imageActionsComponent, colorPopupComponent, fillInTheGapsDragAndDropCommonComponents, additionalSettingsAccessibilitySectionComponent } from "./components";
 import { dialogBoxBase } from "./dialogBoxBase";
 const css = Cypress.env('css');
 
@@ -30,6 +30,7 @@ const selectors = {
     ...imageActionsComponent,
     ...colorPopupComponent,
     ...fillInTheGapsDragAndDropCommonComponents,
+    ...additionalSettingsPanel,
     dropzonePreviewTab: () => cy.get('.drag-and-drop-canvas [class*="__DraggableWrapper"]'),
     dropzoneContainerPreviewTab: () => cy.get('[class*="Canvasstyle__DropzoneWrapper"]'),
     optionContainerOptionsPreviewTab: () => cy.get('.item-list .draggable-options-item:visible'),
@@ -556,6 +557,7 @@ const tests = {
     ...opacityComponent.tests,
     ...backgroundImageUploadComponent.tests,
     ...imageCanvasComponent.tests,
+    ...additionalSettingsAccessibilitySectionComponent.tests,
 
     verifyContentsOfSpecifyCorrectAnswerSection: () => {
         it('When user selects a scoring type then in the \'Correct\' accordion, all the contents should be displayed', () => {

package/cypress/pages/fillInTheGapsOverImageDropdownPage.js

@@ -1,5 +1,5 @@
 import utilities from "../support/helpers/utilities";
-import { imageCanvasComponent, autoScoredScoringPreviewTab, createQuestionBasePage, backgroundImageUploadComponent, scoringSectionBaseEditTab, questionInstructionsComponent, correctIncorrectAnswerLabelComponent, autoScoredStudentViewSettings, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, fillInTheGapsDropdownCommonComponent, randomizeOptionsComponent, optionsWrapperComponent, studentViewSettingsLabelComponent, additionalSettingsPanel } from "./components";
+import { imageCanvasComponent, autoScoredScoringPreviewTab, createQuestionBasePage, backgroundImageUploadComponent, scoringSectionBaseEditTab, questionInstructionsComponent, correctIncorrectAnswerLabelComponent, autoScoredStudentViewSettings, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, fillInTheGapsDropdownCommonComponent, randomizeOptionsComponent, optionsWrapperComponent, studentViewSettingsLabelComponent, additionalSettingsPanel, placeholderTextSectionComponent, gradingViewEnumerationComponent, ariaLabelSectionComponent, commonComponents, additionalSettingsAccessibilitySectionComponent } from "./components";
 const css = Cypress.env('css');
 
 const optionsForDropdown = ['Flower', 'Petal', 'Stem', 'Branch'];
@@ -14,10 +14,16 @@ const selectors = {
     ...randomizeOptionsComponent,
     ...backgroundImageUploadComponent,
     ...autoScoredScoringSectionMultiResponseType,
-    dropdownWrapperPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="Canvasstyle__DropzoneWrapper"]'),
+    ...placeholderTextSectionComponent,
+    ...gradingViewEnumerationComponent,
+    ...ariaLabelSectionComponent,
+    ...commonComponents,
+    ...additionalSettingsPanel,
+    dropdownWrapperPreviewTab: () => cy.get('[class*="Canvasstyle__DropzoneWrapper"]'),
     correctAnswerResponseWrapper: () => cy.get('[class*="LabelImageWithDropdownPreviewstyles__AnswerCell"]'),
     correctAnswerResponse: () => cy.get('[class*="LabelImageWithDropdownPreviewstyles__AnswerWrapper"]'),
     correctAnswerSectionWrapper: () => cy.get('.dnd-correct-answer-wrapper'),
+    correctAnswersLabel: () => cy.get('[class*="question-preview-wrapper"] [class*="correct-answers-label"]'),
 }
 
 const steps = {
@@ -35,6 +41,10 @@ const steps = {
     ...additionalSettingsPanel.steps,
     ...optionsWrapperComponent.steps,
     ...randomizeOptionsComponent.steps,
+    ...gradingViewEnumerationComponent.steps,
+    ...placeholderTextSectionComponent.steps,
+    ...ariaLabelSectionComponent.steps,
+    ...commonComponents.steps,
     /**
      * Verify that the correct option icon is is displayed for a specific dropdown.
      * @param {number} dropdownIndex - The index of the dropdown.
@@ -178,6 +188,57 @@ const steps = {
     verifyCorrectAnswerSectionNotExists: () => {
         utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.correctAnswerSectionWrapper(), 'notExist');
     },
+
+    /**
+     * Verifies the correct answer responses without enumeration.
+     * @param {string[]} correctAnswerArray - An array of correct answer responses to verify.
+     * @returns {void}
+     */
+    verifyCorrectAnswerResponsesWithoutEnumeration: (correctAnswerArray) => {
+        fillInTheGapsOverImageDropdownPage.correctAnswerSectionWrapper()
+            .within(() => {
+                utilities.verifyElementCount(fillInTheGapsDropdownCommonComponent.correctAnswerResponseWrapperWithoutEnumeration(), correctAnswerArray.length);
+                correctAnswerArray.forEach((correctAnswer, index) => {
+                    fillInTheGapsDropdownCommonComponent.correctAnswerResponseWrapperWithoutEnumeration()
+                        .eq(index)
+                        .should('have.attr', 'value', correctAnswer);
+                    fillInTheGapsOverImageDropdownPage.steps.verifyCorrectOptionIcon(index)
+                });
+            });
+    },
+
+    /**
+     * Verifies the correct answer dropdown enumeration.
+     * @param {string[]} enumerationArray - An array of enumeration values to verify.
+     * @returns {void}
+     */
+    verifyCorrectAnswerDropdownEnumeration: (enumerationArray) => {
+        utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.correctAnswerResponseWrapper(), enumerationArray.length);
+        enumerationArray.forEach((option, index) => {
+            fillInTheGapsOverImageDropdownPage.correctAnswerResponseWrapper()
+                .eq(index)
+                .within(() => {
+                    utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.correctAnswerResponseNumeration(), `${option}`);
+                });
+        });
+    },
+    
+    /**
+     * Verifies the dropdown enumeration in the preview tab.
+     * @param {string[]} enumerationArray - An array of enumeration values to verify.
+     * @returns {void}
+     */
+    verifyDropdownEnumeration: (enumerationArray) => {
+        utilities.verifyElementCount(fillInTheGapsDropdownCommonComponent.dropdownPreviewTab(), enumerationArray.length);
+        enumerationArray.forEach((option, index) => {
+            fillInTheGapsDropdownCommonComponent.dropdownWrapperPreviewTab()
+                .eq(index)
+                .parents('[class*="DropzoneWrapper"]')
+                .within(() => {
+                    utilities.verifyTextContent(fillInTheGapsDropdownCommonComponent.dropdownNumerationPreviewTab(), `${option}`);
+                });
+        });
+    },
 }
 
 const tests = {
@@ -193,7 +254,13 @@ const tests = {
     ...imageCanvasComponent.tests,
     ...studentViewSettingsLabelComponent.tests,
     ...createQuestionBasePage.tests,
-    ...fillInTheGapsDropdownCommonComponent.tests
+    ...fillInTheGapsDropdownCommonComponent.tests,
+    ...placeholderTextSectionComponent.tests,
+    ...gradingViewEnumerationComponent.tests,
+    ...ariaLabelSectionComponent.tests,
+    ...commonComponents.tests,
+    ...additionalSettingsPanel.tests,
+    ...additionalSettingsAccessibilitySectionComponent.tests
 }
 
 export const fillInTheGapsOverImageDropdownPage = {

package/cypress/pages/fillInTheGapsOverImageTextPage.js

@@ -1,5 +1,5 @@
 import utilities from "../support/helpers/utilities";
-import { questionInstructionsComponent, scoringSectionBaseEditTab, createQuestionBasePage, commonComponents, autoScoredScoringPreviewTab, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, backgroundImageUploadComponent, optionsWrapperComponent, imageCanvasComponent, correctIncorrectAnswerLabelComponent, autoScoredStudentViewSettings, acceptedStudentInputComponent, customizeSpecialCharacterComponent, fillInTheGapsTextCommonComponent, additionalSettingsPanel } from "./components";
+import { questionInstructionsComponent, scoringSectionBaseEditTab, createQuestionBasePage, commonComponents, autoScoredScoringPreviewTab, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, backgroundImageUploadComponent, optionsWrapperComponent, imageCanvasComponent, correctIncorrectAnswerLabelComponent, autoScoredStudentViewSettings, acceptedStudentInputComponent, customizeSpecialCharacterComponent, fillInTheGapsTextCommonComponent, additionalSettingsPanel, gradingViewEnumerationComponent, additionalSettingsAccessibilitySectionComponent, ariaLabelSectionComponent, placeholderTextSectionComponent } from "./components";
 import { dialogBoxBase } from "./dialogBoxBase";
 const css = Cypress.env('css');
 
@@ -16,7 +16,10 @@ const selectors = {
     ...backgroundImageUploadComponent,
     ...fillInTheGapsTextCommonComponent,
     ...additionalSettingsPanel,
-
+    ...gradingViewEnumerationComponent,
+    ...additionalSettingsAccessibilitySectionComponent,
+    ...ariaLabelSectionComponent,
+    ...placeholderTextSectionComponent,
     //TODO: Update below selectors after https://redmine.zeuslearning.com/issues/557945 is resolved
 
     responseContainerInPreviewTab: () => cy.get('[class*="AddTextResponseOnImagestyles__DraggableInput"]'),
@@ -25,6 +28,7 @@ const selectors = {
     limitReachedWarningMessageContainer: () => cy.get('.disabled-wrapper-cls'),
     correctAnswerResponseWrapper: () => cy.get('.label-image-with-text-correct-response-wrapper [class*="ClozeWithTextResponsestyles__AnswerCell"]'),
     tickIconWrapper: () => cy.get('.tick-icon-wrapper [data-name*="Rectangle"]'),
+    correctAnswerSectionWithoutEnumerationWrapper: () => cy.get('.label-image-with-text-correct-answer-wrapper')
 }
 
 const steps = {
@@ -45,6 +49,10 @@ const steps = {
     ...autoScoredStudentViewSettings.steps,
     ...fillInTheGapsTextCommonComponent.steps,
     ...additionalSettingsPanel.steps,
+    ...gradingViewEnumerationComponent.steps,
+    ...additionalSettingsAccessibilitySectionComponent.steps,
+    ...ariaLabelSectionComponent.steps,
+    ...placeholderTextSectionComponent.steps,
     /**
      * Verify that the incorrect option icon is displayed for a specific answer input field.
      * @param {number} inputFieldIndex - The index of the answer input field to verify.
@@ -238,6 +246,24 @@ const steps = {
         fillInTheGapsOverImageTextPage.canvasInPreviewTab()
             .should('have.css', 'height', `${height}px`);
     },
+
+    /**
+     * Verifies the correct answer responses without enumeration.
+     * @param {string[]} correctAnswerArray - An array of correct answer responses to verify.
+     * @returns {void}
+     */
+    verifyCorrectAnswerResponsesWithoutEnumeration: (correctAnswerArray) => {
+        fillInTheGapsOverImageTextPage.correctAnswerSectionWithoutEnumerationWrapper()
+            .within(() => {
+                utilities.verifyElementCount(fillInTheGapsTextCommonComponent.correctAnswerResponseWrapperWithoutEnumeration(), correctAnswerArray.length);
+                correctAnswerArray.forEach((correctAnswer, index) => {
+                    fillInTheGapsTextCommonComponent.correctAnswerResponseWrapperWithoutEnumeration()
+                        .eq(index)
+                        .should('have.attr', 'value', correctAnswer);
+                    fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionIcon(index)
+                });
+            });
+    },
 }
 
 const tests = {
@@ -253,7 +279,11 @@ const tests = {
     ...questionInstructionsComponent.tests,
     ...fillInTheGapsTextCommonComponent.tests,
     ...customizeSpecialCharacterComponent.tests,
-    ...additionalSettingsPanel.tests
+    ...additionalSettingsPanel.tests,
+    ...gradingViewEnumerationComponent.tests,
+    ...additionalSettingsAccessibilitySectionComponent.tests,
+    ...ariaLabelSectionComponent.tests,
+    ...placeholderTextSectionComponent.tests
 }
 
 export const fillInTheGapsOverImageTextPage = {

package/cypress/pages/fillInTheGapsTextPage.js

@@ -1,6 +1,5 @@
 import utilities from "../support/helpers/utilities";
-import { questionInstructionsComponent, scoringSectionBaseEditTab, createQuestionBasePage, commonComponents, autoScoredScoringPreviewTab, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, correctIncorrectAnswerLabelComponent, autoScoredStudentViewSettings, acceptedStudentInputComponent, customizeSpecialCharacterComponent, fillInTheGapsTextCommonComponent, questionInputFieldComponent, additionalSettingsPanel } from "./components";
-const css = Cypress.env('css');
+import { questionInstructionsComponent, scoringSectionBaseEditTab, createQuestionBasePage, commonComponents, autoScoredScoringPreviewTab, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, correctIncorrectAnswerLabelComponent, autoScoredStudentViewSettings, acceptedStudentInputComponent, customizeSpecialCharacterComponent, fillInTheGapsTextCommonComponent, questionInputFieldComponent, additionalSettingsPanel, responseAreaSettingsPopupComponent, gradingViewEnumerationComponent, additionalSettingsAccessibilitySectionComponent, ariaLabelSectionComponent, placeholderTextSectionComponent } from "./components";
 
 const selectors = {
     ...questionInstructionsComponent,
@@ -13,6 +12,15 @@ const selectors = {
     ...autoScoredScoringPreviewTab,
     ...fillInTheGapsTextCommonComponent,
     ...questionInputFieldComponent,
+    ...responseAreaSettingsPopupComponent,
+    ...additionalSettingsPanel,
+    ...gradingViewEnumerationComponent,
+    ...additionalSettingsAccessibilitySectionComponent,
+    ...ariaLabelSectionComponent,
+    ...placeholderTextSectionComponent,
+    setForAllTextContainersLabel: () => cy.get('[data-ngie-testid="set-for-all-text-containers-checkbox"] .MuiFormControlLabel-label'),
+    setForAllTextContainersCheckbox: () => cy.get('[data-ngie-testid="set-for-all-text-containers-checkbox"] input'),
+    correctAnswerSectionWithoutEnumerationWrapper: () => cy.get('.no-numeration-correct-answers-wrapper .preview-question-text-wrapper')
 }
 
 const steps = {
@@ -30,8 +38,13 @@ const steps = {
     ...autoScoredStudentViewSettings.steps,
     ...fillInTheGapsTextCommonComponent.steps,
     ...questionInputFieldComponent.steps,
-    ...additionalSettingsPanel.steps,
     ...customizeSpecialCharacterComponent.steps,
+    ...responseAreaSettingsPopupComponent.steps,
+    ...additionalSettingsPanel.steps,
+    ...gradingViewEnumerationComponent.steps,
+    ...additionalSettingsAccessibilitySectionComponent.steps,
+    ...ariaLabelSectionComponent.steps,
+    ...placeholderTextSectionComponent.steps,
     /**
      * Verify that the incorrect option icon is displayed for a specific answer input field.
      * @param {number} inputFieldIndex - The index of the answer input field to verify.
@@ -64,6 +77,65 @@ const steps = {
                 utilities.verifyElementVisibilityState(autoScoredScoringPreviewTab.correctIcon(), 'notExist');
                 utilities.verifyElementVisibilityState(autoScoredScoringPreviewTab.incorrectIcon(), 'notExist');
             });
+    },
+
+    verifySetForAllTextContainersCheckboxChecked: () => {
+        fillInTheGapsTextPage.setForAllTextContainersCheckbox()
+            .should('be.checked');
+    },
+
+    verifySetForAllTextContainersCheckboxUnchecked: () => {
+        fillInTheGapsTextPage.setForAllTextContainersCheckbox()
+            .should('not.be.checked');
+    },
+
+    checkSetForAllTextContainersCheckbox: () => {
+        fillInTheGapsTextPage.setForAllTextContainersCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    uncheckSetForAllTextContainersCheckbox: () => {
+        fillInTheGapsTextPage.setForAllTextContainersCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    /**
+     * @description Verify width of answer input field in preview tab
+     * @param {number} answerInputFieldIndex index of answer input field
+     * @param {string} width Width of answer input field in px
+     */
+    verifyAnswerInputFieldWidthPreviewTab: (answerInputFieldIndex, width) => {
+        utilities.getNthElement(fillInTheGapsTextCommonComponent.answerInputFieldWrapperPreviewTab(), answerInputFieldIndex)
+            .should('have.css', 'width', width);
+    },
+
+    /**
+     * @description Verify height of answer input field in preview tab
+     * @param {number} answerInputFieldIndex index of answer input field
+     * @param {string} height Height of answer input field in px
+     */
+    verifyAnswerInputFieldHeightPreviewTab: (answerInputFieldIndex, height) => {
+        utilities.getNthElement(fillInTheGapsTextCommonComponent.answerInputFieldWrapperPreviewTab(), answerInputFieldIndex)
+            .should('have.css', 'height', height);
+    },
+
+    /**
+     * Verifies the correct answer responses without enumeration.
+     * @param {string[]} correctAnswerArray - An array of correct answer responses to verify.
+     * @returns {void}
+     */
+    verifyCorrectAnswerResponsesWithoutEnumeration: (correctAnswerArray) => {
+        fillInTheGapsTextPage.correctAnswerSectionWithoutEnumerationWrapper()
+            .within(() => {
+                utilities.verifyElementCount(fillInTheGapsTextCommonComponent.correctAnswerResponseWrapperWithoutEnumeration(), correctAnswerArray.length);
+                correctAnswerArray.forEach((correctAnswer, index) => {
+                    fillInTheGapsTextCommonComponent.correctAnswerResponseWrapperWithoutEnumeration()
+                        .eq(index)
+                        .should('have.attr', 'value', correctAnswer);
+                });
+            });
     }
 }
 
@@ -78,7 +150,12 @@ const tests = {
     ...scoringSectionBaseEditTab.tests,
     ...autoScoredScoringSectionMultiResponseType.tests,
     ...autoScoredStudentViewSettings.tests,
-    ...createQuestionBasePage.tests
+    ...createQuestionBasePage.tests,
+    ...additionalSettingsPanel.tests,
+    ...gradingViewEnumerationComponent.tests,
+    ...additionalSettingsAccessibilitySectionComponent.tests,
+    ...ariaLabelSectionComponent.tests,
+    ...placeholderTextSectionComponent.tests,
 }
 
 export const fillInTheGapsTextPage = {