itemengine-cypress-automation 1.0.105 → 1.0.106

package/cypress/pages/fillInTheGapsOverImageDropdownPage.js

@@ -1,299 +1,256 @@
 import utilities from "../support/helpers/utilities";
-import { createQuestionBasePage, figOverImageCommonComponent, fillInTheGapsDropdownCommonComponent, commonComponents, uploadImageSectionComponent, optionsWrapperComponent, ckEditorToolbar, equationEditorFlyout, autoScoredSetCorrectAnswerSection, scoringSectionBase, autoScoredScoringSectionMultipleResponsesType, autoScoredScoringSection, previewScoringAndShowCorrectAnswerComponent, additionalSettingsPanel, autoScoredAdditionalSettings, autoScoredPreviewBase, questionInstructionsComponent, answerNumerationComponent } from "./components"
+import { figOverImageCanvasComponent, autoScoredScoringPreviewTab, optionsWrapperComponent, commonComponents, createQuestionBasePage, backgroundImageUploadComponent, scoringSectionBaseEditTab, questionInstructionsComponent, correctIncorrectAnswerLabelComponent, autoScoredStudentViewSettings, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType } from "./components";
+const css = Cypress.env('css');
 
 const selectors = {
-    ...figOverImageCommonComponent,
-    ...fillInTheGapsDropdownCommonComponent,
     ...questionInstructionsComponent,
-    ...answerNumerationComponent,
-    ...additionalSettingsPanel,
-    responseDropdownPreviewTab: () => cy.get('[class*="ImageWithDropdownPreviewstyles__DraggableInput"] [class*="icon-chevron"]'),
-    responseDropdownWrapperPreviewTab: () => cy.get('.response-dropdown-wrapper'),
-    responseDropdownContainerWrapperPreviewTab: () => cy.get('[class*="ImageWithDropdownPreviewstyles__IconDiv"]'),
-    //Correct answer container
-    previewTabCorrectAnswerContainer: () => cy.get('.cloze-with-text-correct-answer-wrapper'),
-    previewTabCorrectAnswerLabel: () => cy.get('.cloze-with-text-correct-answer-label'),
-    previewTabCorrectAnswerResponseWrapper: () => cy.get('[class*="ImageWithDropdownPreviewstyles__ItemWrapperDiv"]'),
-    correctAnswerContainerResponseNumeration: () => cy.get('[class*="ImageWithDropdownPreviewstyles__NumerationWrapper"]'),
+    ...figOverImageCanvasComponent,
+    ...autoScoredScoringPreviewTab,
+    ...correctIncorrectAnswerLabelComponent,
+    //Dropdown options section
+    dropdownOptionsTab: () => cy.get('.ngie-tablist-tab-button[data-ngie-testid*="dropdown"]'),
+    dropdownOptionsInputField: () => cy.get('.input-editable  input[type*="text"]'),
+
+    //Specify correct answer dropdown
+    dropdownSpecifyCorrectAnswerSection: () => cy.get('.response-dropdown [role="combobox"]'),
+
+    //Dropdown list
+    dropdownListOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[role="listbox"] .dropdown-menu-item[aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('[role="listbox"] .dropdown-menu-item')
+        }
+    },
+
+    //Preview tab
+    dropdownPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [aria-haspopup="listbox"]'),
+    dropdownWrapperPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="Canvasstyle__DropzoneWrapper"]'),
+    dropdownNumerationPreviewTab: () => cy.get('.answer-numeration-number-box'),
+    correctAnswerSectionWrapper: () => cy.get('.dnd-correct-answer-wrapper'),
+    correctAnswersLabel: () => cy.get('.correct-answers-label'),
+    correctAnswerResponseNumeration: () => cy.get('.answer-numeration-number-box'),
+    correctAnswerResponseWrapper: () => cy.get('[class*="LabelImageWithDropdownPreviewstyles__AnswerCell"]'),
+    correctAnswerResponse: () => cy.get('[class*="LabelImageWithDropdownPreviewstyles__AnswerWrapper"]'),
+    tickIconWrapper: () => cy.get('.tick-icon-wrapper [data-name*="Rectangle"]'),
 }
 
 const steps = {
+    ...figOverImageCanvasComponent.steps,
+    ...autoScoredScoringPreviewTab.steps,
+    ...correctIncorrectAnswerLabelComponent.steps,
     ...createQuestionBasePage.steps,
-    ...fillInTheGapsDropdownCommonComponent.steps,
-    ...figOverImageCommonComponent.steps,
-    ...commonComponents.steps,
-    ...uploadImageSectionComponent.steps,
-    ...autoScoredScoringSectionMultipleResponsesType.steps,
-    ...optionsWrapperComponent.steps,
-    ...ckEditorToolbar.steps,
-    ...equationEditorFlyout.steps,
-    ...previewScoringAndShowCorrectAnswerComponent.steps,
-    ...autoScoredSetCorrectAnswerSection.steps,
-    ...additionalSettingsPanel.steps,
-    ...autoScoredAdditionalSettings.steps,
-    ...autoScoredPreviewBase.steps,
-    ...autoScoredScoringSection.steps,
+    ...backgroundImageUploadComponent.steps,
+    ...scoringSectionBaseEditTab.steps,
     ...questionInstructionsComponent.steps,
-    ...answerNumerationComponent.steps,
+    ...autoScoredStudentViewSettings.steps,
+    ...autoScoredSpecifyCorrectAnswerSection.steps,
+    ...autoScoredScoringSectionMultiResponseType.steps,
     /**
-     * @param {number} responseContainerIndex Index of response container
-     * @param {number[]} responseContainerPositionCoordinates Position coordinates of the response container
-     * @description Verify position coordinates of response dropdown in preview tab
-     */
-    verifyResponseDropdownPositionCoordinatesInPreviewTab: (responseContainerIndex, responseContainerPositionCoordinates) => {
-        fillInTheGapsOverImageDropdownPage.responseDropdownPreviewTab()
-            .eq(responseContainerIndex)
-            .parents('.react-draggable')
-            .invoke('attr', 'style')
-            .then(($styleAttribute) => {
-                let transformValue = $styleAttribute;
-                let position = transformValue.split('(')[1]
-                    .split(')')[0]
-                    .split(',');
-                let horizontalCoordinate = position[0].trim();
-                let verticalCoordinate = position[1].trim();
-                expect(horizontalCoordinate).to.be.eq(responseContainerPositionCoordinates[0]);
-                expect(verticalCoordinate).to.be.eq(responseContainerPositionCoordinates[1]);
+    * @param {number} dropdownOptionsTabIndex Index of the dropdown options tab
+    * @param {string[]} responseTextArray Array of text to be given as input in options input field
+    * @description Add input to dropdown options input fields
+    */
+    addInputToDropdownOptionFields: (dropdownOptionsTabIndex, responseTextArray) => {
+        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownOptionsTab(), dropdownOptionsTabIndex)
+            .click();
+        fillInTheGapsOverImageDropdownPage.steps.verifyDropdownOptionsTabIsSelected(dropdownOptionsTabIndex);
+        optionsWrapperComponent.optionsSectionWrapper()
+            .within(() => {
+                responseTextArray.forEach((responseFieldText, optionIndex) => {
+                    fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionInputField(optionIndex, responseFieldText);
+                });
             });
     },
 
     /**
-     * @param {number} responseDropdownIndex Index of dropdown in preview tab
-     * @description Verify dropdown is displayed in preview tab
+     * @param {number} optionIndex index of the option input field 
+     * @param {string} responseText text to be given as input in option input field
+     * @description Add input to options input fields
      */
-    verifyResponseDropdownIsDisplayedInPreviewTab: (responseDropdownIndex) => {
-        utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseDropdownPreviewTab().eq(responseDropdownIndex), 'visible');
-    },
-
-    verifyDisabledResponseDropdownInPreviewTab: () => {
-        fillInTheGapsOverImageDropdownPage.responseDropdownPreviewTab()
-            .should('have.class', 'Mui-disabled');
-        fillInTheGapsOverImageDropdownPage.responseDropdownPreviewTab()
-            .click();
-        fillInTheGapsOverImageDropdownPage.dropdownList()
-            .should('not.exist');
+    addInputToDropdownOptionInputField: (optionIndex, responseFieldText) => {
+        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownOptionsInputField(), optionIndex)
+            .clear()
+            .type(responseFieldText, { delay: 0 })
+            .should('have.value', responseFieldText);
     },
 
     /**
-     * @param {number} responseDropdownIndex Index of response dropdown in preview tab
-     * @description Expand response dropdown in preview tab
-     */
-    expandResponseDropdownInPreviewTab: (responseDropdownIndex) => {
-        fillInTheGapsOverImageDropdownPage.responseDropdownPreviewTab()
-            .eq(responseDropdownIndex)
-            .click();
-        fillInTheGapsOverImageDropdownPage.responseDropdownPreviewTab()
-            .eq(responseDropdownIndex)
-            .should('have.attr', 'aria-expanded', 'true');
+    * @param {number} dropdownOptionsTabIndex Index of the dropdown options tab
+    * @description Verify dropdown options tab is selected
+    */
+    verifyDropdownOptionsTabIsSelected: (dropdownOptionsTabIndex) => {
+        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownOptionsTab(), dropdownOptionsTabIndex)
+            .should('have.class', 'Mui-selected');
     },
 
     /**
     * @param {number} dropdownIndex Index of the dropdown
     * @param {string} dropdownOption Option to be selected in the dropdown
-    * @description Select option from dropdown in preview tab
+    * @description Select option from dropdown in set correct answer section
     */
-    selectResponseFromDropdownInPreviewTab: (dropdownIndex, dropdownOption) => {
-        fillInTheGapsOverImageDropdownPage.steps.expandResponseDropdownInPreviewTab(dropdownIndex);
-        fillInTheGapsDropdownCommonComponent.steps.selectOptionFromResponseDropdown(dropdownOption);
-        fillInTheGapsOverImageDropdownPage.steps.verifyTextDisplayedInDropdownInPreviewTab(dropdownIndex, dropdownOption);
+    selectResponseFromDropdownSpecifyCorrectAnswerSection: (dropdownIndex, dropdownOption) => {
+        fillInTheGapsOverImageDropdownPage.steps.expandResponseDropdownInSpecifyCorrectAnswerSection(dropdownIndex)
+        fillInTheGapsOverImageDropdownPage.steps.selectOptionFromDropdownList(dropdownOption);
+        utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), dropdownIndex), dropdownOption);
     },
 
-    verifyTextDisplayedInDropdownInPreviewTab: (dropdownIndex, dropdownText) => {
-        utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.responseDropdownPreviewTab().eq(dropdownIndex), dropdownText);
+    /**
+     * @param {string} dropdownOption Option to be selected from dropdown
+     * @description Select option from dropdown
+     */
+    selectOptionFromDropdownList: (dropdownOption) => {
+        fillInTheGapsOverImageDropdownPage.dropdownListOptions(dropdownOption)
+            .click();
+        utilities.verifyElementVisibilityState(commonComponents.dropdownList(), 'notExist');
     },
 
     /**
-    * @param {string[]} correctAnswerArray array of correct answer response
-    * @param {string[]} optionNumerationArray numeration of the correct answer response
-    * @description verify the correct answer responses in the correct answer container
+    * @param {number} responseDropdownIndex Index of response dropdown in set correct answer section
+    * @description Expand response dropdown in set correct answer section
     */
-    verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount: (correctAnswerArray, optionNumerationArray) => {
-        fillInTheGapsOverImageDropdownPage.previewTabCorrectAnswerContainer()
-            .should('be.visible')
-            .within(() => {
-                correctAnswerArray.forEach((responseFieldText, count) => {
-                    utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.previewTabCorrectAnswerResponseWrapper().eq(count), responseFieldText);
-                });
-                optionNumerationArray.forEach((optionNumeration, count) => {
-                    utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.correctAnswerContainerResponseNumeration().eq(count), optionNumeration);
-                });
-            });
-        fillInTheGapsOverImageDropdownPage.previewTabCorrectAnswerResponseWrapper()
-            .should('have.length', optionNumerationArray.length);
+    expandResponseDropdownInSpecifyCorrectAnswerSection: (responseDropdownIndex) => {
+        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), responseDropdownIndex)
+            .click({ position: "right" });
+        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), responseDropdownIndex)
+            .should('have.attr', 'aria-expanded', 'true');
     },
 
-    verifyPreviewTabCorrectAnswerContainerNotExist: () => {
-        utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.previewTabCorrectAnswerContainer(), 'notExist');
+    /**
+    * @param {Object[]} CorrectAnswerArray - An array of objects containing the dropdownIndex and dropdownOption to be selected.
+    * @param {number} CorrectAnswerArray[].dropdownIndex - The index of dropdown in preview tab
+    * @param {string} CorrectAnswerArray[].dropdownOption - The dropdown option to be selected from dropdown list
+    * @description Select option from dropdown in preview tab
+    */
+    selectResponseFromDropdownInPreviewTab: (CorrectAnswerArray) => {
+        CorrectAnswerArray.forEach(({ dropdownIndex, dropdownOption }) => {
+            fillInTheGapsOverImageDropdownPage.steps.expandDropdownInPreviewTab(dropdownIndex);
+            fillInTheGapsOverImageDropdownPage.steps.selectOptionFromDropdownList(dropdownOption);
+            fillInTheGapsOverImageDropdownPage.steps.verifyTextDisplayedInDropdownPreviewTab(dropdownIndex, dropdownOption);
+        });
     },
 
     /**
-     * @param {number} index - The index of the incorrect option to verify.
-     * @description Verify that the incorrect option at the specified index has a cross-mark icon and is visible.
+     * @param {number} dropdownIndex Index of dropdown in preview tab
+     * @description Expand dropdown in preview tab
      */
-    verifyIncorrectOptionCrossmarkIcon: (index) => {
-        fillInTheGapsOverImageDropdownPage.responseDropdownContainerWrapperPreviewTab()
-            .eq(index)
-            .find('.tick-icon-wrapper')
-            .should('have.class', 'icon-incorrect')
-            .and('be.visible');
+    expandDropdownInPreviewTab: (dropdownIndex) => {
+        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownPreviewTab(), dropdownIndex)
+            .click();
+        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownPreviewTab(), dropdownIndex)
+            .should('have.attr', 'aria-expanded', 'true');
     },
 
-    /**
-     * @param {number} index - The index of the correct option to verify.
-     * @description Verify that the correct option at the specified index has a check-mark icon and is visible.
-     */
-    verifyCorrectOptionCheckmarkIcon: (index) => {
-        fillInTheGapsOverImageDropdownPage.responseDropdownContainerWrapperPreviewTab()
-            .eq(index)
-            .find('.tick-icon-wrapper')
-            .should('have.class', 'icon-correct')
-            .and('be.visible');
+    verifyTextDisplayedInDropdownPreviewTab: (dropdownIndex, dropdownText) => {
+        utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownPreviewTab(), dropdownIndex), dropdownText);
+    },
+
+    verifyDropdownNumerationPreviewTab: () => {
+        fillInTheGapsOverImageDropdownPage.dropdownWrapperPreviewTab()
+            .each(($element, index) => {
+                cy.wrap($element)
+                    .within(() => {
+                        utilities.verifyTextContent(fillInTheGapsOverImageDropdownPage.dropdownNumerationPreviewTab(), `${index + 1}`);
+                    });
+            });
     },
 
     /**
-     * @param {number} index - The index of the option to verify.
-     * @description Verify that the option at the specified index does not have a check-mark or cross-mark.
+     * Verify correct answer responses in the correct answer section and count.
+     * @param {string[]} correctAnswerArray - An array containing the expected correct answer responses.
+     * @example verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower', 'Petals', 'Stem']);
      */
-    verifyCheckmarkOrCrossmarkNotVisible: (index) => {
-        utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseDropdownContainerWrapperPreviewTab().eq(index).find('.tick-icon-wrapper'), 'notExist');
+    verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount: (correctAnswerArray) => {
+        utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.correctAnswerResponseWrapper(), correctAnswerArray.length);
+        correctAnswerArray.forEach((correctAnswer, index) => {
+            fillInTheGapsOverImageDropdownPage.correctAnswerResponseWrapper()
+                .eq(index)
+                .within(() => {
+                    utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.correctAnswerResponseNumeration(), `${index + 1}`);
+                    fillInTheGapsOverImageDropdownPage.correctAnswerResponse()
+                        .should('have.text', correctAnswer);
+                });
+        });
     },
 
     /**
-    * @param {index} responseDropdownIndex Index of response dropdown
-    * @param {string} ariaLabel Aria-label of response dropdown
-    * @description Verify aria-label of response dropdown in preview tab
+    * Verify that the incorrect option icon is displayed for a specific dropdown.
+    * @param {number} dropdownIndex - The index of the dropdown.
     */
-    verifyDropdownAriaLabelAttributeInPreviewTab: (responseDropdownIndex, ariaLabel) => {
-        fillInTheGapsOverImageDropdownPage.responseDropdownPreviewTab()
-            .eq(responseDropdownIndex)
-            .should('have.attr', 'aria-label', ariaLabel);
+    verifyIncorrectOptionIcon: (dropdownIndex) => {
+        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownWrapperPreviewTab(), dropdownIndex)
+            .within(() => {
+                utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.tickIconWrapper(), {
+                    'fill': css.color.incorrectAnswer
+                });
+            });
     },
 
     /**
-     * @param {number} rowIndex Index of the row in which response container is placed
-     * @param {number} responseContainerIndex Index of the response container
-     * @description Verify the vertical position of the response container as per the row
+     * Verify that the correct option icon is is displayed for a specific dropdown.
+     * @param {number} dropdownIndex - The index of the dropdown.
      */
-    verifyResponseContainerVerticalPosition: (rowIndex, responseContainerIndex) => {
-        let verticalCoordinate = '';
-        switch (rowIndex) {
-            case 1:
-                verticalCoordinate = '10px';
-                break;
-            case 2:
-                verticalCoordinate = '59px';
-                break;
-            default:
-                throw new Error('Invalid row index');
-        }
-        figOverImageCommonComponent.responseContainer()
-            .eq(responseContainerIndex)
-            .invoke('attr', 'style')
-            .then(($styleAttribute) => {
-                let transformValue = $styleAttribute;
-                let coordinatesArray = transformValue.split('(')[1]
-                    .split(')')[0]
-                    .split(',');
-                let responseVerticalCoordinate = coordinatesArray[1].trim();
-                expect(responseVerticalCoordinate).to.be.eq(verticalCoordinate);
+    verifyCorrectOptionIcon: (dropdownIndex) => {
+        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownWrapperPreviewTab(), dropdownIndex)
+            .within(() => {
+                utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.tickIconWrapper(), {
+                    'fill': css.color.correctAnswer
+                });
             });
     },
 
     /**
-     * @param {number} responseDropdownIndex Index of response dropdown
-     * @description Verify placeholder for response dropdown in preview tab does not exist
+     * Verify that both correct and incorrect option icons do not exist for a specific dropdown.
+     * @param {number} dropdownIndex - The index of the dropdown.
      */
-    verifyPlaceholderAttributeInPreviewTabDropdownNotExists: (responseDropdownIndex) => {
-        fillInTheGapsOverImageDropdownPage.responseDropdownContainerWrapperPreviewTab()
-            .eq(responseDropdownIndex)
+    verifyCorrectIncorrectIconNotExist: (dropdownIndex) => {
+        utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownWrapperPreviewTab(), dropdownIndex)
             .within(() => {
-                utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.responseDropdownPlaceholderText(), 'notExist');
+                utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.tickIconWrapper(), 'notExist');
             });
     },
 
-    /**
-     * @param {number} responseDropdownIndex Index of response dropdown
-     * @param {*} placeholderText Placeholder for dropdown
-     * @description Verify placeholder text displayed for response dropdown in preview tab
-     */
-    verifyPlaceholderAttributeInPreviewTabDropdown: (responseDropdownIndex, placeholderText) => {
-        fillInTheGapsOverImageDropdownPage.responseDropdownContainerWrapperPreviewTab()
-            .eq(responseDropdownIndex)
-            .within(() => {
-                utilities.verifyTextContent(fillInTheGapsDropdownCommonComponent.responseDropdownPlaceholderText(), placeholderText);
+    verifyCorrectAnswerSectionNotExists: () => {
+        utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.correctAnswerSectionWrapper(), 'notExist');
+    },
+
+    verifyCorrectIncorrectIconsNotExist: () => {
+        fillInTheGapsOverImageDropdownPage.dropdownWrapperPreviewTab()
+            .each(($element) => {
+                cy.wrap($element)
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.tickIconWrapper(), 'notExist');
+                    });
             });
     },
 
     /**
-     * @param {number} responseDropdownIndex Index of response dropdown
-     * @param {number} height Height of response dropdown in preview tab
-     * @description Verify height of response dropdown in preview tab
+     * Verify text displayed in the dropdowns of the preview tab.
+     * @param {Object[]} dropdownTextArray - An array of objects containing the dropdownIndex and dropdownText.
+     * @param {number} dropdownTextArray[].dropdownIndex - The index of the dropdown.
+     * @param {string} dropdownTextArray[].dropdownText - The text to be verified in the respective dropdown.
      */
-    verifyDropdownHeightPreviewTab: (responseDropdownIndex, height) => {
-        fillInTheGapsOverImageDropdownPage.responseDropdownWrapperPreviewTab()
-            .eq(responseDropdownIndex)
-            .should('have.attr', 'height', `${height}px`);
+    verifyTextInDropdownsInPreviewTab: (dropdownTextArray) => {
+        dropdownTextArray.forEach(({ dropdownIndex, dropdownText }) => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyTextDisplayedInDropdownPreviewTab(dropdownIndex, dropdownText);
+        });
     },
 
     /**
-     * @param {number} responseDropdownIndex Index of response dropdown
-     * @param {number} width Width of response dropdown in preview tab
-     * @description Verify width of response dropdown in preview tab
+     * Verify that a specific dropdown is disabled in the preview tab.
+     * @param {number} dropdownIndex - The index of the disabled dropdown.
      */
-    verifyDropdownWidthPreviewTab: (responseDropdownIndex, width) => {
-        fillInTheGapsOverImageDropdownPage.responseDropdownWrapperPreviewTab()
-            .eq(responseDropdownIndex)
-            .should('have.attr', 'width', `${width}px`);
+    verifyDropdownIsDisabled: (dropdownIndex) => {
+        utilities.verifyElementDisabledClass(utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownPreviewTab(), dropdownIndex));
     },
-
-    /**
-      * Verify the numeration of response fields in the Preview Tab.
-      * @param {string[]} optionNumerationArray - An array of expected numeration strings to verify.
-      */
-    verifyResponseDropdownNumeration: (optionNumerationArray) => {
-        fillInTheGapsOverImageDropdownPage.responseDropdownContainerWrapperPreviewTab()
-        optionNumerationArray.forEach((optionNumeration, count) => {
-            fillInTheGapsOverImageDropdownPage.responseNumeration()
-                .eq(count)
-                .should('have.text', `${optionNumeration}`);
-        });
-    }
-
 }
 
 const tests = {
-    ...figOverImageCommonComponent.tests,
-    ...autoScoredSetCorrectAnswerSection.tests,
-    ...fillInTheGapsDropdownCommonComponent.tests,
-    ...scoringSectionBase.tests,
-    ...autoScoredScoringSectionMultipleResponsesType.tests,
-    ...autoScoredScoringSection.tests,
-    ...commonComponents.tests,
-    ...previewScoringAndShowCorrectAnswerComponent.tests,
-    ...answerNumerationComponent.tests,
-    ...additionalSettingsPanel.tests,
-    ...autoScoredAdditionalSettings.tests,
-    ...questionInstructionsComponent.tests,
-    ...createQuestionBasePage.tests,
-    /**
-     * @param {number} minimumScoreIfAttemptedPoints - The minimum score awarded if attempted.
-     * @param {number} allocatedPoints - The expected allocated points for the question.
-     * @description  Verify minimum score awarded if attempted functionality when an incorrect answer is attempted.
-     */
-    verifyMinimumScoreAwardedIfAttemptedFunctionalityForIncorrectAnswer: (minimumScoreIfAttemptedPoints, allocatedPoints) => {
-        it('When user has provided minimum score awarded (if attempted) points, then in preview tab on selecting incorrect answer, minimum score should be provided for the question', () => {
-            cy.log('Switch to edit tab and set minimum score if attempted points')
-            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
-            fillInTheGapsOverImageDropdownPage.steps.allotMinimumScoreAwardedIfAttempted(minimumScoreIfAttemptedPoints);
-            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
-            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, 'Branch');
-            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(minimumScoreIfAttemptedPoints, allocatedPoints);
-        });
-    }
+    ...autoScoredScoringPreviewTab.tests,
 }
 
 export const fillInTheGapsOverImageDropdownPage = {
     ...selectors,
     steps,
-    tests,
+    tests
 }

package/cypress/pages/fillInTheGapsOverImageTextPage.js

@@ -13,6 +13,7 @@ const selectors = {
     ...autoScoredSpecifyCorrectAnswerSection,
     ...autoScoredStudentViewSettings,
     ...autoScoredScoringPreviewTab,
+    ...backgroundImageUploadComponent,
 
     //TODO: Update below selectors after https://redmine.zeuslearning.com/issues/557945 is resolved
     //response accordion
@@ -32,6 +33,8 @@ const selectors = {
 
     answerInputFieldSpecifyCorrectAnswerSection: () => cy.get('.label-image-text-inline-text-field input'),
     answerInputFieldPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .response-input-field input'),
+    responseContainerInPreviewTab: () => cy.get('[class*="AddTextResponseOnImagestyles__DraggableInput"]'),
+    canvasInPreviewTab: () => cy.get('[class*="PreviewTabstyles__ContentWrapper"] .image-container'),
     correctAnswerSectionWrapper: () => cy.get('.cloze-with-text-correct-answer-wrapper'),
     correctAnswersLabel: () => cy.get('.correct-answers-label'),
     responseStatusWrapper: () => cy.get('.cloze-with-text-answer-status-response-preview-wrapper:visible'),
@@ -683,6 +686,79 @@ const steps = {
             .click();
     },
 
+    /**
+     * 
+     * @param {string} style pointer style
+     * @param {number} responseContainerIndex text container index
+     */
+    verifyTextContainerPointerStyleInPreviewTab: (style,  responseContainerIndex) => {
+        const getPosition = (option) => {
+            switch (option) {
+                case 'bottom':
+                    return { bottom: '56px', left: '-60px' };
+                case 'bottom right':
+                    return { top: '-48px', right: '45px' };
+                case 'right':
+                    return { top: '-19px', left: '53px' };
+                case 'top right':
+                    return { top: '13px', right: '45px' };
+                case 'top':
+                    return { top: '28px', left: '-60px' };
+                case 'top left':
+                    return { top: '12px', left: '23px' };
+                case 'left':
+                    return { top: '-19px', left: '28px' };
+                case 'bottom left':
+                    return { top: '-44px', left: '18px' };
+            }
+        }
+        const expectedPosition = getPosition(style);
+        if (style == 'top right' || style == 'bottom right') {
+            fillInTheGapsOverImageTextPage.responseContainerInPreviewTab()
+                .eq( responseContainerIndex)
+                .should('have.css', 'top', expectedPosition.top)
+                .and('have.css', 'right', expectedPosition.right);
+        }
+        else if (style == 'none') {
+            fillInTheGapsOverImageTextPage.responseContainerInPreviewTab()
+                .should('not.exist')
+        }
+        else if(style == 'bottom'){
+            fillInTheGapsOverImageTextPage.responseContainerInPreviewTab()
+            .eq(responseContainerIndex)
+            .should('have.css', 'bottom', expectedPosition.bottom)
+            .and('have.css', 'left', expectedPosition.left);
+        }
+        else {
+            fillInTheGapsOverImageTextPage.responseContainerInPreviewTab()
+                .eq(responseContainerIndex)
+                .should('have.css', 'top', expectedPosition.top)
+                .and('have.css', 'left', expectedPosition.left);
+        }
+    },
+
+    verifyTextContainerNotExistInPreviewTab: () => {
+        utilities.verifyElementVisibilityState( fillInTheGapsOverImageTextPage.responseContainerInPreviewTab(), 'notExist');
+    },
+
+    /**
+     * @param {*} width width of canvas
+     * @description this function verifies width of canvas
+     */
+    verifyCanvasWidthInPreviewTab: (width) => {
+         fillInTheGapsOverImageTextPage.canvasInPreviewTab()
+            .should('have.attr', 'width', width);
+    },
+
+    /**
+     * @param {*} height height of canvas
+     * @description this function verifies height of canvas
+     */
+    verifyCanvasHeightInPreviewTab: (height) => {
+         fillInTheGapsOverImageTextPage.canvasInPreviewTab()
+            .should('have.css', 'height', `${height}px`);
+    },
+
     verifyDefaultUncheckedStateOfConditionalCheckboxes: () => {
         fillInTheGapsOverImageTextPage.caseSensitiveCheckbox()
             .should('not.be.checked');
@@ -790,6 +866,9 @@ const tests = {
     ...createQuestionBasePage.tests,
     ...commonComponents.tests,
     ...autoScoredStudentViewSettings.tests,
+    ...backgroundImageUploadComponent.tests,
+    ...figOverImageCanvasComponent.tests,
+    ...questionInstructionsComponent.tests,
 
     /**
     * Verifies the contents and functionality of the 'Specify correct answer' accordion for multiple selection questions.

package/cypress/pages/multipleSelectionPage.js

@@ -51,7 +51,7 @@ const selectors = {
             return cy.get('[aria-labelledby*="Maximum-number-of-answers-dropdown-label"] [role="option"]')
         }
     },
-    minMaxWarningMessage: () => cy.get('.min-max-answer-error-wrapper')
+    minMaxWarningMessage: () => cy.get('.disabled-wrapper-cls')
 }
 
 const steps = {