itemengine-cypress-automation 1.0.78 → 1.0.79

package/cypress/pages/essayResponsePage.js

@@ -139,18 +139,6 @@ const steps = {
         });
     },
 
-    selectPreviewTabToolbarOption: (toolbarOption) => {
-        if (toolbarOption == 'Insert Horizontal Line' || toolbarOption == 'Code Editor' || toolbarOption == 'Increase Indent' || toolbarOption == 'Decrease Indent' || toolbarOption == 'Remove Format') {
-            essayResponsePage.previewTabToolbarOption(toolbarOption)
-                .click()
-                .should('have.attr', 'aria-pressed', 'false');
-        } else {
-            essayResponsePage.previewTabToolbarOption(toolbarOption)
-                .click()
-                .should('have.attr', 'aria-pressed', 'true');
-        }
-    },
-
     deselectPreviewTabToolbarOption: (toolbarOption) => {
         essayResponsePage.previewTabToolbarOption(toolbarOption)
             .click()
@@ -373,6 +361,30 @@ const tests = {
         it(`Accessibility of the added ${specialOrMathCharacters[popupType].popupTitle} symbols`, { tags: 'a11y' }, () => {
             cy.checkAccessibility(essayResponsePage.responseField());
         });
+    },
+
+    verifyEquationEditorFlyoutSymbolCategoriesFunctionality: (categoryName, wordCount) => {
+        let symbols = Object.values(equationEditorCategoriesAndSymbols[categoryName].symbols)
+        let mappedArr = symbols.map(x => x.displayText)
+        it('If the user clicks on the symbol then that symbol should be displayed in the Equation Editor flyout input field', () => {
+            equationEditorFlyout.categoryCharacters()
+                .then($elements => {
+                    const selectorLength = $elements.length;
+                    for (let index = 0; index < selectorLength; index++) {
+                        equationEditorFlyout.categoryCharacters()
+                            .eq(index)
+                            .click();
+                    }
+                });
+            //The equation editor input Field equation is not checked.
+        });
+
+        equationEditorFlyout.tests.verifyCSSAnda11yOfEquationEditorInputField(categoryName)
+        if (categoryName === 'keypad') {
+            essayResponsePage.tests.insertEquationAndVerifyInputFieldContentsAndWordCount(`1234567890·,+−×÷`, wordCount);
+        } else {
+            essayResponsePage.tests.insertEquationAndVerifyInputFieldContentsAndWordCount(mappedArr.toString().replaceAll(',', ''), wordCount)
+        }
     }
 }
 

package/cypress/pages/fillInTheGapsDragAndDropPage.js

@@ -1,5 +1,4 @@
-import { additionalSettingsPanel, autoScoredAdditionalSettings, autoScoredPreviewBase, autoScoredScoringSection, autoScoredScoringSectionMultipleResponsesType, autoScoredSetCorrectAnswerSection, commonComponents, createQuestionBasePage, dragAndDropSetCorrectAnswerCheckboxComponents, draggableOptionsContainer, fillInTheGapsCommonComponents, optionsWrapperComponent, previewScoringAndShowCorrectAnswerComponent, questionInstructionsComponent, scoringSectionBase } from "./components"
-import { dragAndDropResponseOptions } from "./components/dragAndDropResponseOptions";
+import { additionalSettingsPanel, autoScoredAdditionalSettings, autoScoredPreviewBase, autoScoredScoringSection, autoScoredScoringSectionMultipleResponsesType, autoScoredSetCorrectAnswerSection, commonComponents, createQuestionBasePage, draggableOptionsContainer, fillInTheGapsCommonComponents, optionsWrapperComponent, previewScoringAndShowCorrectAnswerComponent, questionInstructionsComponent, scoringSectionBase, draggableOptionContainer, draggableOptionsSectionComponent, questionInputFieldComponent } from "./components"
 const css = Cypress.env('css');
 let optionsForResponses = ['Response 1', 'Response 2'];
 
@@ -16,8 +15,9 @@ const selectors = {
     ...autoScoredScoringSectionMultipleResponsesType,
     ...optionsWrapperComponent,
     ...previewScoringAndShowCorrectAnswerComponent,
-    ...dragAndDropResponseOptions,
-    ...draggableOptionsContainer,
+    ...draggableOptionContainer,
+    ...draggableOptionsSectionComponent,
+    ...questionInputFieldComponent,
     //TODO: Can be shifted to optionsWrapperComponent once https://redmine.zeuslearning.com/issues/518498 is resolved
     setCorrectAnswerResponseArea: () => cy.get('[class="droppable-area"] [role="button"]'),
     setCorrectAnswerDraggableOption: () => cy.get('.draggable-selected-item'),
@@ -56,12 +56,11 @@ const steps = {
     ...autoScoredScoringSection.steps,
     ...autoScoredAdditionalSettings.steps,
     ...optionsWrapperComponent.steps,
-    ...dragAndDropResponseOptions.steps,
     ...autoScoredScoringSectionMultipleResponsesType.steps,
-    ...dragAndDropResponseOptions.steps,
-    ...draggableOptionsContainer.steps,
-    ...dragAndDropSetCorrectAnswerCheckboxComponents.steps,
     ...previewScoringAndShowCorrectAnswerComponent.steps,
+    ...draggableOptionContainer.steps,
+    ...draggableOptionsSectionComponent.steps,
+    ...questionInputFieldComponent.steps,
     setCorrectAnswerSectionClickAndDropDraggableOptionInResponseArea: (optionName, responseAreaIndex) => {
         fillInTheGapsDragAndDropPage.setCorrectAnswerDraggableOption()
             .contains(optionName)
@@ -240,10 +239,10 @@ const tests = {
     ...autoScoredSetCorrectAnswerSection.tests,
     ...autoScoredAdditionalSettings.tests,
     ...previewScoringAndShowCorrectAnswerComponent.tests,
-    ...dragAndDropResponseOptions.tests,
     ...autoScoredScoringSectionMultipleResponsesType.tests,
-    ...dragAndDropSetCorrectAnswerCheckboxComponents.tests,
-    ...draggableOptionsContainer.tests,
+    ...draggableOptionContainer.tests,
+    ...draggableOptionsSectionComponent.tests,
+    ...questionInputFieldComponent.tests,
     verifyDefaultResponseLabelAndResponseAreasInSetCorrectAnswerSection: () => {
         it('Two empty response areas with labels \'Response 1\' and \'Response 2\' should be displayed', () => {
             for (let index = 0; index < 2; index++) {
@@ -281,9 +280,9 @@ const tests = {
     verifyScoreForPartialEqualWeightsWhenResponseTokenIsAdded: () => {
         it('When user adds a response token to the question, one more response area should be displayed in the response container of the set correct answer section and points per response score should be updated accordingly', () => {
             cy.log('Pre-step: Adding a response token to question field')
-            fillInTheGapsDragAndDropPage.questionInputField()
+            questionInputFieldComponent.questionInputField()
                 .click();
-            fillInTheGapsDragAndDropPage.ckEditorAddResponseButton()
+            questionInputFieldComponent.ckEditorAddResponseButton()
                 .click();
             fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
                 .should('have.length', '3');

package/cypress/pages/fillInTheGapsDropdownPage.js

@@ -1,4 +1,4 @@
-import { additionalSettingsPanel, autoScoredAdditionalSettings, autoScoredPreviewBase, autoScoredScoringSection, autoScoredScoringSectionMultipleResponsesType, autoScoredSetCorrectAnswerSection, commonComponents, createQuestionBasePage, fillInTheGapsCommonComponents, optionsWrapperComponent, previewScoringAndShowCorrectAnswerComponent, questionInstructionsComponent, scoringSectionBase, fillInTheGapsDropdownCommonComponent } from "./components"
+import { additionalSettingsPanel, autoScoredAdditionalSettings, autoScoredPreviewBase, autoScoredScoringSection, autoScoredScoringSectionMultipleResponsesType, autoScoredSetCorrectAnswerSection, commonComponents, createQuestionBasePage, fillInTheGapsCommonComponents, optionsWrapperComponent, previewScoringAndShowCorrectAnswerComponent, questionInstructionsComponent, scoringSectionBase, fillInTheGapsDropdownCommonComponent, questionInputFieldComponent } from "./components"
 import { answerNumerationComponent } from "./components/answerNumerationComponent";
 import { fillInTheGapsTextPage } from "./fillInTheGapsTextPage"
 const css = Cypress.env('css');
@@ -9,6 +9,7 @@ const selectors = {
     ...fillInTheGapsCommonComponents,
     ...optionsWrapperComponent,
     ...fillInTheGapsDropdownCommonComponent,
+    ...questionInputFieldComponent,
     previewTabResponseDropdown: () => cy.get('.cloze-with-text-response-preview-wrapper [class*="icon-chevron"]'),
     previewTabResponseDropdownWrapper: () => cy.get('.cloze-with-text-preview .response-dropdown-wrapper .dropdown-form-control '),
     responseDropdownAnswerNumeration: () => cy.get('.response-input-adornment')
@@ -26,6 +27,7 @@ const steps = {
     ...autoScoredScoringSectionMultipleResponsesType.steps,
     ...answerNumerationComponent.steps,
     ...fillInTheGapsDropdownCommonComponent.steps,
+    ...questionInputFieldComponent.steps,
     selectResponseFromPreviewTabResponseDropdown: (dropdownIndex, dropdownOption) => {
         fillInTheGapsDropdownPage.previewTabResponseDropdown()
             .eq(dropdownIndex)
@@ -62,6 +64,7 @@ const tests = {
     ...previewScoringAndShowCorrectAnswerComponent.tests,
     ...autoScoredScoringSectionMultipleResponsesType.tests,
     ...answerNumerationComponent.tests,
+    ...questionInputFieldComponent.tests,
     verifySetCorrectAnswerTabContentsAndFunctionality: (tabName) => {
         it(`CSS of ${tabName} contents`, { tags: 'css' }, () => {
             fillInTheGapsCommonComponents.setCorrectAnswerResponseFieldLabel()

package/cypress/pages/fillInTheGapsOverImageDragAndDropPage.js

@@ -0,0 +1,479 @@
+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, figOverImageCanvasComponent, backgroundImageUploadComponent, correctIncorrectAnswerLabelComponent, draggableOptionsSectionComponent, draggableOptionContainer, studentViewSettingsLabelComponent, randomizeOptionsComponent, enableOuterBorderComponent, allowMultipleInstancesOfSameDraggableOptionComponent, additionalSettingsPanel } from "./components"
+const css = Cypress.env('css');
+
+const selectors = {
+    ...questionInstructionsComponent,
+    ...maximumCapacityPerDropzoneComponent,
+    ...commonComponents,
+    ...autoScoredScoringPreviewTab,
+    ...scoringSectionBaseEditTab,
+    ...autoScoredSpecifyCorrectAnswerSection,
+    ...autoScoredScoringSectionMultiResponseType,
+    ...optionsWrapperComponent,
+    ...draggableOptionsSectionComponent,
+    ...draggableOptionContainer,
+    ...figOverImageCanvasComponent,
+    ...backgroundImageUploadComponent,
+    ...correctIncorrectAnswerLabelComponent,
+    ...optionsWrapperComponent,
+    ...draggableOptionsSectionComponent,
+    ...draggableOptionContainer,
+    ...randomizeOptionsComponent,
+    ...enableOuterBorderComponent,
+    ...autoScoredStudentViewSettings,
+    dropzonePreviewTab: () => cy.get('.drag-and-drop-canvas [class*="__DraggableWrapper"]'),
+    dropzonePreviewTabWrapper: () => cy.get('[class*="Canvasstyle__DropzoneWrapper"]'),
+    optionContainerOptionsPreviewTab: () => cy.get('.item-list .draggable-options-item:visible'),
+    optionContainerOptionsSpecifyCorrectAnswerSection: () => cy.get('.option-drag-and-drop .item-list .draggable-options-item:visible'),
+    dropzoneSpecifyCorrectAnswerSection: () => cy.get('.dropzone-and-label-wrapper [class*="__DraggableWrapper"]:visible'),
+    correctIncorrectAnswerBlock: () => cy.get('[class*="-answer-block"]'),
+    correctIncorrectStatusMessageText: () => cy.get('[class*="AnswerStatusText"]'),
+    dropzoneNumeration: () => cy.get('.drag-and-drop-canvas .answer-numeration-number-box'),
+    correctAnswersNumeration: () => cy.get('[class*="__AnswerCell"] .answer-numeration-number-box'),
+    correctAnswersOptions: () => cy.get('[class*="__AnswerWrapper"] .question-text-wrapper'),
+    correctAnswersLabel: () => cy.get('.correct-answers-label'),
+    tickIconWrapper: () => cy.get('.tick-icon-wrapper svg g g [id*=Rectangle]'),
+    correctAnswerContainer: () => cy.get('.dnd-correct-answer-wrapper'),
+    correctIncorrectAnswerLabel: () => cy.get('[class*="CorrectIncorrectLabel"]'),
+    imageInPreviewTab: () => cy.get('.drag-and-drop-layout-wrapper img'),
+    dropzoneLabelSpecifyCorrectAnswerSection: () => cy.get('.dropzone-and-label-wrapper .title-casing'),
+    questionBorderPreviewTab: () => cy.get('.label-image-with-dnd-canvas-wrapper [class*="DragDropContextLayoutWrapper"]'),
+    maxLimitInEachDropzoneHelpText: () => cy.get('[class*="Canvasstyle__LimitWrapper"]'),
+    penaltyPointsForEachIncorrectDropzoneInputField: () => cy.get('input[aria-label="Penalty points for each incorrect dropzone"]'),
+}
+
+const steps = {
+    ...createQuestionBasePage.steps,
+    ...questionInstructionsComponent.steps,
+    ...uploadImageSectionComponent.steps,
+    ...scoringSectionBaseEditTab.steps,
+    ...optionsWrapperComponent.steps,
+    ...equationEditorFlyout.steps,
+    ...ckEditorToolbar.steps,
+    ...autoScoredScoringPreviewTab.steps,
+    ...autoScoredStudentViewSettings.steps,
+    ...maximumCapacityPerDropzoneComponent.steps,
+    ...autoScoredSpecifyCorrectAnswerSection.steps,
+    ...autoScoredScoringSectionMultiResponseType.steps,
+    ...draggableOptionsSectionComponent.steps,
+    ...draggableOptionContainer.steps,
+    ...figOverImageCanvasComponent.steps,
+    ...backgroundImageUploadComponent.steps,
+    ...correctIncorrectAnswerLabelComponent.steps,
+    ...draggableOptionsSectionComponent.steps,
+    ...draggableOptionContainer.steps,
+    ...randomizeOptionsComponent.steps,
+    ...enableOuterBorderComponent.steps,
+    ...allowMultipleInstancesOfSameDraggableOptionComponent.steps,
+    ...commonComponents.steps,
+    ...additionalSettingsPanel.steps,
+
+    /**
+    * @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).
+    * @param {string} text - The expected text content to match against the inner text of the specified dropzone element.
+    */
+    verifyDropzoneTextPreviewTab: (count, text) => {
+        utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTab(), count), text);
+    },
+
+    /**
+    * @description Verifies the text content of a specific preview tab dropzone element.
+    * @param {number} dropzoneIndex - The index of the preview tab dropzone element to verify (zero-based).
+    * @param {string[]} responseArray - The expected text content to match against the inner text of the specified dropzone element.
+    */
+    verifyDraggableOptionInSpecifyCorrectAnswerSection: (dropzoneIndex, responseArray) => {
+        fillInTheGapsOverImageDragAndDropPage.dropzoneSpecifyCorrectAnswerSection()
+            .eq(dropzoneIndex)
+            .within(() => {
+                responseArray.forEach((response, count) => {
+                    utilities.verifyInnerText(utilities.getNthElement(draggableOptionContainer.draggableOption(), count), response);
+                });
+            });
+    },
+
+    verifyDraggableOptionInDropzoneOfPreviewTab: (dropzoneIndex, responseArray) => {
+        fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTab()
+            .eq(dropzoneIndex)
+            .within(() => {
+                responseArray.forEach((response, count) => {
+                    utilities.verifyInnerText(utilities.getNthElement(draggableOptionContainer.draggableOption(), count), response);
+                });
+            });
+    },
+
+    /**
+    * @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).
+    * @param {string} text - The expected text content to match against the inner text of the specified dropzone element.
+    */
+    verifyDropzoneTextSpecifyCorrectAnswerSection: (count, text) => {
+        utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.dropzoneSpecifyCorrectAnswerSection(), count), text);
+    },
+
+    /**
+    * @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).
+    * @param {string} text - The expected text content to match against the inner text of the specified dropzone element.
+    */
+    verifyDropzoneContainsTextPreviewTab: (count, text) => {
+        fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTab()
+            .eq(count)
+            .contains(text);
+    },
+
+    /**
+     * Sets options in dropzone in the Preview Tab based on the provided optionsObject.
+     * @param {Object} optionsObject - An object where keys are option texts and values are dropzone indices.
+     */
+    clickAndDropOptionInDropzonePreviewTab: (optionsObject) => {
+        Object.entries(optionsObject).forEach(([optionText, dropzoneIndex]) => {
+            fillInTheGapsOverImageDragAndDropPage.optionContainerOptionsPreviewTab()
+                .contains(optionText)
+                .click();
+            fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTab()
+                .eq(dropzoneIndex)
+                .click({ force: true });
+        });
+    },
+
+    /**
+     * Sets options in dropzone in the Preview Tab based on the provided optionsObject.
+     * @param {Object} optionsObject - An object where keys are option texts and values are dropzone indices.
+     */
+    clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection: (optionsObject) => {
+        Object.entries(optionsObject).forEach(([optionText, dropzoneIndex]) => {
+            fillInTheGapsOverImageDragAndDropPage.optionContainerOptionsSpecifyCorrectAnswerSection()
+                .contains(optionText)
+                .click();
+            fillInTheGapsOverImageDragAndDropPage.dropzoneSpecifyCorrectAnswerSection()
+                .eq(dropzoneIndex)
+                .click({ force: true });
+        });
+    },
+
+    clickAndDropOptionInOptionsContainerInSpecifyCorrectAnswerSection: (optionText) => {
+        fillInTheGapsOverImageDragAndDropPage.dropzoneSpecifyCorrectAnswerSection()
+            .contains(optionText)
+            .click();
+        draggableOptionContainer.optionsContainerSpecifyCorrectAnswerSection()
+            .click();
+    },
+
+    /**
+     * @description Verifies that the image in the Preview tab has the correct source and alt text.
+     * @param {number} optionIndex - The index of the option in the Preview tab.
+     */
+    verifyDraggableOptionWithImageInPreviewTab: (optionIndex) => {
+        fillInTheGapsOverImageDragAndDropPage.optionContainerOptionsPreviewTab()
+            .eq(optionIndex)
+            .find('img')
+            .should('have.attr', 'src', constants.foxImageLink)
+            .and('have.attr', 'alt', constants.foxImageAltText);
+        utilities.verifyElementVisibilityState(utilities.getNthElement(draggableOptionContainer.draggableOptionDragIcon(), optionIndex), 'exist');
+    },
+
+    /**
+     * @description Verifies that the bold text in the Preview tab is correct.
+     * @param {number} optionIndex - The index of the option in the Preview tab.
+     */
+    verifyDraggableOptionWithBoldTextInPreviewTab: (optionIndex) => {
+        fillInTheGapsOverImageDragAndDropPage.optionContainerOptionsPreviewTab()
+            .eq(optionIndex)
+            .find('strong')
+            .should('have.text', 'This is a bold option');
+        utilities.verifyElementVisibilityState(utilities.getNthElement(draggableOptionContainer.draggableOptionDragIcon(), optionIndex), 'exist');
+    },
+
+    /**
+     * @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) => {
+        fillInTheGapsOverImageDragAndDropPage.optionContainerOptionsPreviewTab()
+            .find('[role="math"]')
+            .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
+            .contains(constants.CKEditorInputFieldEnteredEquationText);
+        utilities.verifyElementVisibilityState(utilities.getNthElement(draggableOptionContainer.draggableOptionDragIcon(), optionIndex), 'exist');
+    },
+
+    /**
+     * @description Verifies that the image in the Preview tab has the correct source and alt text.
+     * @param {number} optionIndex - The index of the option in the Preview tab.
+     */
+    verifyDropzoneWithImageInPreviewTab: (optionIndex) => {
+        fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTab()
+            .eq(optionIndex)
+            .find('img')
+            .should('have.attr', 'src', constants.foxImageLink)
+            .and('have.attr', 'alt', constants.foxImageAltText);
+    },
+
+    /**
+     * @description Verifies that the equation text in the Preview tab is correct.
+     * @param {number} optionIndex - The index of the option in the Preview tab.
+     */
+    verifyDropzoneWithEquationTextInPreviewTab: (optionIndex) => {
+        fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTab()
+            .eq(optionIndex)
+            .find('[role="math"]')
+            .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
+            .contains(constants.CKEditorInputFieldEnteredEquationText);
+    },
+
+    /**
+    * @description Verifies that the preview dropzone option at a specified index is disabled.
+    * @param {number} dropzoneIndex - The index of the preview dropzone option to verify (zero-based).
+    */
+    verifyPreviewDropzoneOptionDisabled: (dropzoneIndex) => {
+        fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTab()
+            .eq(dropzoneIndex)
+            .parents('[data-rbd-droppable-id*="disabled"]')
+            .should('exist');
+    },
+
+    verifyCorrectAnswerSectionNotExists: () => {
+        utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.correctAnswerContainer(), 'notExist');
+    },
+
+    /**
+    * Verifies the correct option icon for a specified dropzone in the Preview Tab.
+    * @param {number} optionIndex - The index of the option to verify.
+    */
+    verifyCorrectOptionIcon: (optionIndex) => {
+        fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTabWrapper()
+            .eq(optionIndex)
+            .within(() => {
+                utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.tickIconWrapper(), {
+                    'fill': css.color.correctAnswer
+                });
+            });
+    },
+
+    /**
+    * @description Verifies the incorrect option icon for a specified dropzone in the Preview Tab.
+    * @param {number} optionIndex - The index of the option to verify.
+    */
+    verifyIncorrectOptionIcon: (optionIndex) => {
+        fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTabWrapper()
+            .eq(optionIndex)
+            .within(() => {
+                utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.tickIconWrapper(), {
+                    'fill': css.color.incorrectAnswer
+                });
+            });
+    },
+
+    /**
+    * @description Verifies the absence of a correct/incorrect option icon for a specified option in the Preview Tab.
+    * @param {number} optionIndex - The index of the option to verify.
+    */
+    verifyCorrectIncorrectIconNotExist: (optionIndex) => {
+        fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTabWrapper()
+            .eq(optionIndex)
+            .within(() => {
+                utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.tickIconWrapper(), 'notExist');
+            });
+    },
+
+    verifyDropzoneNumeration: () => {
+        for (let index = 0; index < fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTab().length; index++) {
+            utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.dropzoneNumeration(), index), index + 1);
+        }
+    },
+
+    /**
+    *@description Verifies the correctness of answer responses in the correct answer section, including the count.
+    * @param {string[][]} correctAnswerArray An array of arrays, each containing the expected answer options for a specific correct answer section.
+    */
+    verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount: (correctAnswerArray) => {
+        utilities.verifyElementCount(fillInTheGapsOverImageDragAndDropPage.correctAnswersOptions(), correctAnswerArray.length);
+        correctAnswerArray.forEach((correctAnswer, index) => {
+            utilities.verifyTextContent(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.correctAnswersNumeration(), index), index + 1);
+            correctAnswer.forEach((answerOption) => {
+                utilities.verifyTextContent(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.correctAnswersOptions(), index), answerOption);
+            });
+        });
+    },
+
+    verifyPointsPerResponseLabel: () => {
+        utilities.verifyInnerText(autoScoredScoringSectionMultiResponseType.pointsPerResponseLabel(), 'Points per response: -');
+        utilities.verifyElementVisibilityState(autoScoredScoringSectionMultiResponseType.pointsPerResponseLabel(), 'visible');
+    },
+
+    //Need to remove this once https://redmine.zeuslearning.com/issues/557787 is resolved
+    verifyPartialEqualWeightsScore: (pointsPerResponse) => {
+        autoScoredScoringSectionMultiResponseType.pointsPerResponseLabel()
+            .contains(pointsPerResponse);
+    },
+
+    verifyOptionContainerOptionSpecifyCorrectAnswerSection: (index, optionText) => {
+        utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.optionContainerOptionsSpecifyCorrectAnswerSection(), index), optionText);
+    },
+
+    verifyQuestionBorderNotExist: () => {
+        fillInTheGapsOverImageDragAndDropPage.questionBorderPreviewTab()
+            .should('have.css', 'border')
+            .and('match', /0px none/);
+    },
+
+    clickAndDropOptionInOptionsContainerInPreviewTab: (optionText) => {
+        fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTab()
+            .contains(optionText)
+            .click();
+        draggableOptionContainer.optionsContainerPreviewTab()
+            .click({ force: true });
+    },
+
+    setGroupedOptions: () => {
+        let flowers = [['Flower', 'Petals', 'Seed', 'Pollen'],
+        ['Leaflet', 'Leaves', 'Leaf', 'Green'],
+        ['Stem', 'Branch', 'Trunk', 'Tree'],
+        ['Rose', 'Lily', 'Orchid', 'Tulip']
+        ];
+        let groupTitles = ['Group A', 'Group B', 'Group C', 'Group D'];
+        draggableOptionsSectionComponent.steps.expandDraggableOptionsLayoutDropdown()
+        draggableOptionsSectionComponent.steps.selectOptionFromDraggableOptionsLayoutDropdown('Grouped')
+        draggableOptionsSectionComponent.steps.addGroupTitle(groupTitles[0]);
+        optionsWrapperComponent.steps.addMultipleOptionFields(2);
+        optionsWrapperComponent.steps.addInputToOptionsInputField(flowers[0]);
+        draggableOptionsSectionComponent.steps.addGroupWithTitleAndOptionsInDraggableOptionsSection(groupTitles[1], flowers[1]);
+        draggableOptionsSectionComponent.steps.addGroupWithTitleAndOptionsInDraggableOptionsSection(groupTitles[2], flowers[2]);
+        draggableOptionsSectionComponent.steps.addGroupWithTitleAndOptionsInDraggableOptionsSection(groupTitles[3], flowers[3]);
+    },
+
+    /**
+    * @description verify the displayed penalty points for each incorrect dropzone
+    * @param {number} penaltyPoints displayed penalty points 
+    */
+    verifyPenaltyPointsForEachIncorrectDropzone: (penaltyPoints) => {
+        utilities.verifyInnerText(autoScoredScoringSectionMultiResponseType.penaltyPointsDetailsSectionAllottedPointsLabel(), `Penalty points for each incorrect dropzone: ${penaltyPoints}`);
+    },
+
+    /**
+    * @description Verifies the penalty points value for each incorrect dropzone
+    * @param {number} points - The expected penalty points value for each incorrect dropzone.
+    */
+    verifyPenaltyPointsForEachIncorrectDropzoneValue: (points) => {
+        fillInTheGapsOverImageDragAndDropPage.penaltyPointsForEachIncorrectDropzoneInputField()
+            .should('have.value', points);
+    },
+
+    /**
+     * @description Allots penalty points for each incorrect dropzone
+     * @param {number} points - The penalty points to be allotted for each dropzone.
+     */
+    allotPenaltyPointsForEachIncorrectDropzone: (points) => {
+        fillInTheGapsOverImageDragAndDropPage.penaltyPointsForEachIncorrectDropzoneInputField()
+            .clear()
+            .type(`${points}`)
+            .should('have.value', points)
+            .blur();
+    }
+}
+
+const tests = {
+    ...autoScoredScoringPreviewTab.tests,
+    ...scoringSectionBaseEditTab.tests,
+    ...autoScoredScoringSectionMultiResponseType.tests,
+    ...autoScoredSpecifyCorrectAnswerSection.tests,
+    ...draggableOptionsSectionComponent.tests,
+    ...optionsWrapperComponent.tests,
+    ...draggableOptionContainer.tests,
+    ...studentViewSettingsLabelComponent.tests,
+    ...randomizeOptionsComponent.tests,
+    ...enableOuterBorderComponent.tests,
+    ...autoScoredStudentViewSettings.tests,
+    ...allowMultipleInstancesOfSameDraggableOptionComponent.tests,
+    ...createQuestionBasePage.tests,
+    ...commonComponents.tests,
+    ...additionalSettingsPanel.tests,
+    verifyContentsOfSpecifyCorrectAnswerSection: () => {
+        it('When user selects a scoring type then in the \'Correct\' accordion, all the contents should be displayed', () => {
+            utilities.verifyElementCount(fillInTheGapsOverImageDragAndDropPage.dropzoneSpecifyCorrectAnswerSection(), 3);
+            for (let index = 0; index < fillInTheGapsOverImageDragAndDropPage.dropzoneSpecifyCorrectAnswerSection(); index++) {
+                utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.dropzoneLabelSpecifyCorrectAnswerSection(), index), `Dropzone ${index}`);
+            }
+        });
+    },
+
+    /**
+     * 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(`The user should be able to drop option in the dropzone in the ${accordionName} accordion`, () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Petals': 0 });
+        });
+
+        it(`When the user has removed all the options from the dropzone in the ${accordionName} accordion, \'Error: Please set a correct answer.\' error message should be thrown along with an error icon on the \'${accordionName}\' accordion`, () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInOptionsContainerInSpecifyCorrectAnswerSection('Petals');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible')
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Please set a correct answer.');
+            if (accordionName == 'Correct') {
+                autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
+                    });
+            } else {
+                autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
+                    .eq(1)
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
+                    });
+            };
+        });
+
+        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredCorrectAnswerErrorMessageCSSAndA11y();
+
+        it('CSS of the dropzone border', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.dropzoneSpecifyCorrectAnswerSection().eq(0).parents('[data-rbd-droppable-id="response-1"]'), {
+                'border': `2px dashed ${css.color.errorFieldBorder}`,
+                'background-color': css.color.optionsBg
+            });
+        });
+
+        it('When the user drops an option in the dropzone, the error message should disappear', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Leaves': 0, 'Petals': 1, 'Roots': 2 });
+        });
+
+        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty(accordionName);
+
+        it('CSS of \'Correct\' accordion contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.dropzoneLabelSpecifyCorrectAnswerSection(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.dropzoneSpecifyCorrectAnswerSection().parents('[data-rbd-droppable-id="response-1"]'), {
+                'border': `2px dashed ${css.color.secondaryBtnActive}`,
+                'background-color': css.color.optionsBg
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.optionContainerOptionsSpecifyCorrectAnswerSection(), {
+                'background-color': css.color.secondaryBtnBg,
+                'border': `1px solid ${css.color.draggableOptionBorder}`
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.optionContainerOptionsSpecifyCorrectAnswerSection().find('.question-text-wrapper'), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.optionContainerOptionsSpecifyCorrectAnswerSection().find('svg g [data-name*="Path"]').eq(1), {
+                'color': css.color.secondaryBtn
+            });
+        });
+
+        it('Accessibility of \'Correct\' accordion contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.dropzoneLabelSpecifyCorrectAnswerSection().parents('.preview-content-wrapper'))
+        });
+    },
+}
+
+export const fillInTheGapsOverImageDragAndDropPage = {
+    ...selectors,
+    steps,
+    tests
+}