itemengine-cypress-automation 1.0.579-IEI-7046-a317a6b.0 → 1.0.580-IEI-7040-1e744fc.0

package/cypress/e2e/ILC/SingleSelection/previewContents.smoke.js

@@ -6,6 +6,7 @@ let previewContentViews = ['Question preview', 'Item view', 'Item preview', 'Stu
 const views = utilities.getViews(previewContentViews);
 var itemReferenceID = "";
 const options = ['Pollution caused by treating chemical waste', 'Pollution caused by cement production', 'Pollution caused by methane production', 'Pollution caused by cement and methane production'];
+const imageExpandEnhancement = Cypress.env('ENABLE_EXPAND_IMAGE_ENHANCEMENT');
 
 describe('Create item page - Single selection: Preview contents', () => {
     before(() => {
@@ -94,6 +95,23 @@ describe('Create item page - Single selection: Preview contents', () => {
                 singleSelectionPage.steps.verifyEquationTextInPreviewTab(3);
                 cy.eyesCheckWindow(`Single selection - ${view} - Options with image, equation, bold text, and link`);
             });
+            if (imageExpandEnhancement  === 'true') {
+                it('Image expand icon should be visible on the image in option', () => {
+                    singleSelectionPage.steps.verifyImageInPreviewTab(0);
+                    singleSelectionPage.steps.verifyExpandIconInImage();
+                });
+
+                it('When the user clicks on the expand button then the image should be expanded and a close button should be displayed', () => {
+                    singleSelectionPage.steps.verifyImageInPreviewTab(0);
+                    singleSelectionPage.steps.clickExpandIconInImage();
+                    utilities.verifyInnerText(singleSelectionPage.closeImagePopup(), 'Close');
+                });
+
+                it('When the user clicks on the close button the expanded option should be minimized and the expand icon should be displayed on image again in the option', () => {
+                    singleSelectionPage.steps.closeImagePopup();
+                    singleSelectionPage.steps.verifyExpandIconInImage();
+                });
+            }
 
             if (view !== 'Grading view' && view !== 'Correct answer view') {
                 it(`All the options should be in unchecked state`, () => {

package/cypress/e2e/ILC/SingleSelectionGridNew/previewContentsForAllViews.smoke.js

@@ -5,6 +5,7 @@ import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
 let previewContentViews = ['Question preview', 'Item view', 'Item preview', 'Student view', 'Grading view', 'Correct answer view', 'Print preview'];
 const views = utilities.getViews(previewContentViews);
+const imageExpandEnhancement = Cypress.env('ENABLE_EXPAND_IMAGE_ENHANCEMENT');
 var itemReferenceID = "";
 describe('Create item page - Single selection grid: Preview contents', () => {
     before(() => {
@@ -93,6 +94,24 @@ describe('Create item page - Single selection grid: Preview contents', () => {
                     utilities.verifyInnerText(singleSelectionGridPage.questionInstructionsText(), 'Please select where the following animals are found');
                     utilities.verifyElementVisibilityState(singleSelectionGridPage.questionInstructionsText(), 'visible');
                 });
+
+                if (imageExpandEnhancement  === 'true') {
+                    it('Image expand icon should be visible on the image in option', () => {
+                        singleSelectionGridPage.steps.verifyTableCellWithImageInPreviewTab({ row: 1, column: 1 });
+                        singleSelectionGridPage.steps.verifyExpandIconInImage();
+                    });
+
+                    it('When the user clicks on the expand button then the image should be expanded and a close button should be displayed', () => {
+                        singleSelectionGridPage.steps.verifyTableCellWithImageInPreviewTab({ row: 1, column: 1 });
+                        singleSelectionGridPage.steps.clickExpandIconInImage();
+                        utilities.verifyInnerText(singleSelectionGridPage.closeImagePopup(), 'Close');
+                    });
+
+                    it('When the user clicks on the close button the expanded option should be minimized and the expand icon should be displayed on image again in the option', () => {
+                        singleSelectionGridPage.steps.closeImagePopup();
+                        singleSelectionGridPage.steps.verifyExpandIconInImage();
+                    });
+                }
     
                 it(`Single selection - grid ${view} - The question grid as set by the user should be displayed in the ${view}`, () => {
                     singleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 0, column: 0 }, 'None');

package/cypress/e2e/ILC/TextEntryMath/editTabBasicSection.js

@@ -3,6 +3,7 @@ import { commonComponents } from "../../../pages/components";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
+const imageExpandEnhancement = Cypress.env('ENABLE_EXPAND_IMAGE_ENHANCEMENT');
 
 describe('Create item page - Text entry math: Question instructions, Add structure - Question input field', () => {
     before(() => {
@@ -197,6 +198,22 @@ describe('Create item page - Text entry math: Question instructions, Add structu
             textEntryMathPage.steps.switchToPreviewTab();
             utilities.verifyElementCount(textEntryMathPage.responseFieldPreviewTab(), 1);
         });
+        
+        if (imageExpandEnhancement  === 'true') {
+            it('When user add large image in question input field, user should be able to expand the image in preview tab', () => {
+                textEntryMathPage.steps.switchToEditTab();
+                textEntryMathPage.steps.focusInQuestionInputField();
+                textEntryMathPage.steps.selectImageOptionFromCKEditorToolbar();
+                textEntryMathPage.steps.addImageToInputField();
+                textEntryMathPage.steps.switchToPreviewTab();
+                textEntryMathPage.steps.verifyExpandIconInImage();
+                textEntryMathPage.steps.clickExpandIconInImage();
+                utilities.verifyInnerText(textEntryMathPage.closeImagePopup(), 'Close');
+                textEntryMathPage.steps.closeImagePopup();
+                textEntryMathPage.steps.verifyExpandIconInImage();
+            
+            });
+        }
     });
 
     describe('User should be able to edit incomplete authored question', () => {

package/cypress/e2e/ILC/TextSelection/questionInstructionsAndQuestion.js

@@ -3,6 +3,7 @@ import abortEarlySetup from "../../../support/helpers/abortEarly";
 import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
 const grepTags = Cypress.env('grepTags');
+const imageExpandEnhancement = Cypress.env('ENABLE_EXPAND_IMAGE_ENHANCEMENT');
 
 describe('Create Item page - Text selection: Question Instructions and Question section', () => {
     before(() => {
@@ -191,6 +192,21 @@ describe('Create Item page - Text selection: Question Instructions and Question
             textSelectionPage.steps.verifyBoldTextInPreviewTab();
             textSelectionPage.steps.verifyLinkInPreviewTab();
         });
+        if (imageExpandEnhancement  === 'true') {
+            it('Image expand icon should be visible on the image in option', () => {
+                textSelectionPage.steps.verifyExpandIconInImage();
+            });
+
+            it('When the user clicks on the expand button then the image should be expanded and a close button should be displayed', () => {
+                textSelectionPage.steps.clickExpandIconInImage();
+                utilities.verifyInnerText(textSelectionPage.closeImagePopup(), 'Close');
+            });
+
+            it('When the user clicks on the close button the expanded option should be minimized and the expand icon should be displayed on image again in the option', () => {
+                textSelectionPage.steps.closeImagePopup();
+                textSelectionPage.steps.verifyExpandIconInImage();
+            });
+        }
 
         //Failing due to https://redmine.zeuslearning.com/issues/537907
         it('CSS of \'Preview tab\' when image, equation, bold text and link are added', { tags: 'css' }, () => {

package/cypress/pages/components/ckEditorToolbar.js

@@ -1,4 +1,5 @@
 import constants from "../../fixtures/constants";
+import utilities from "../../support/helpers/utilities";
 
 const selectors = {
     imageIcon: () => cy.get('a[title="Insert Image"]:visible'),
@@ -26,9 +27,28 @@ const selectors = {
     linkDialogboxURLInputField: () => cy.get('input[class*="cke_dialog_ui_input_text"]:visible').eq(1),
     sourceIcon: () => cy.get('a[title="Source"]:visible'),
     sourceTextArea: () => cy.get('textarea.cke_source'),
+    expandIconButton: () => cy.get('.expand-image-btn'),
+    closeImagePopup: () => cy.get('.close-popup-btn'),
 }
 
 const steps = {
+    verifyExpandIconInImage: () => {
+            utilities.verifyElementVisibilityState(ckEditorToolbar.expandIconButton(), 'visible');
+        },
+
+    clickExpandIconInImage: () => {
+            ckEditorToolbar.expandIconButton()
+                .first()
+                .scrollIntoView()
+                .realClick();
+        },
+
+    closeImagePopup: () => {
+            ckEditorToolbar.closeImagePopup()
+                .click();
+        },
+
+
     selectBoldOptionFromCKEditorToolbar: () => {
         ckEditorToolbar.boldIcon()
             .click();

package/cypress/pages/components/draggableOptionContainer.js

@@ -3,6 +3,7 @@ import { commonComponents } from "./commonComponents";
 import { createQuestionBasePage } from "./createQuestionBasePage";
 import { draggableOptionsSectionComponent } from "./draggableOptionsSectionComponent";
 import { optionsWrapperComponent } from "./optionsWrapperComponent";
+import { ckEditorToolbar } from "./ckEditorToolbar";
 const css = Cypress.env('css');
 const options = ['option 1', 'option 2'];
 const threeOptions = ['option 1', 'option 2', 'option 3'];
@@ -453,6 +454,19 @@ const tests = {
             createQuestionBasePage.steps.switchToPreviewTab();
             draggableOptionContainer.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(optionsAfterDeleting);
         });
+        it('When user add large image in option, the option container should have expand icon', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            optionsWrapperComponent.steps.addOption();
+            optionsWrapperComponent.steps.focusInOptionsInputField(2)
+            ckEditorToolbar.steps.selectImageOptionFromCKEditorToolbar()
+            ckEditorToolbar.steps.addImageToInputField();
+            createQuestionBasePage.steps.switchToPreviewTab();
+            optionsWrapperComponent.steps.verifyExpandIconInImage();
+            optionsWrapperComponent.steps.clickExpandIconInImage();
+            utilities.verifyInnerText(optionsWrapperComponent.closeImagePopup(), 'Close');
+            optionsWrapperComponent.steps.closeImagePopup();
+            optionsWrapperComponent.steps.verifyExpandIconInImage();
+        });
     },
 
     verifyDraggableOptionsForGroupedLayoutInSpecifyCorrectAnswerSection: () => {

package/cypress/pages/components/gridQuestionCommonComponent.js

@@ -158,10 +158,26 @@ const selectors = {
     colorBlock: () => cy.get('.color-grid-wrapper .color-picker-block'),
     editColorButton: () => cy.get('button[aria-label="edit color"]'),
     colorBlockSelectedIcon: () => cy.get('[class*="BtnSelectionWrapper"] svg'),
-    optionsInputFieldInQuestionPreviewTab: () => cy.get('.cell-content-text')
+    optionsInputFieldInQuestionPreviewTab: () => cy.get('.cell-content-text'),
+    expandIconButton: () => cy.get('.expand-image-btn'),
+    closeImagePopup: () => cy.get('.close-popup-btn')
 }
 
 const steps = {
+        verifyExpandIconInImage: () => {
+                utilities.verifyElementVisibilityState(gridQuestionCommonComponent.expandIconButton(), 'visible');
+            },
+    
+        clickExpandIconInImage: () => {
+                gridQuestionCommonComponent.expandIconButton()
+                    .click();
+            },
+    
+        closeImagePopup: () => {
+                gridQuestionCommonComponent.closeImagePopup()
+                    .click();
+            },
+    
     /**
      * Modifies the property of a table cell at the specified row and column.
      * @param {Object} position - The position of the table cell to modify.

package/cypress/pages/components/optionsWrapperComponent.js

@@ -2,8 +2,10 @@ import constants from "../../fixtures/constants";
 import utilities from "../../support/helpers/utilities";
 import { ckEditorToolbar } from "./ckEditorToolbar";
 import { commonComponents } from "./commonComponents";
+import { createQuestionBasePage } from "./createQuestionBasePage";
 import { equationEditorFlyout } from "./equationEditorFlyout";
 const css = Cypress.env('css');
+const imageExpandEnhancement = Cypress.env('ENABLE_EXPAND_IMAGE_ENHANCEMENT');
 
 const selectors = {
     optionsLabel: () => cy.get('.options-label-wrapper .options-label'),
@@ -13,7 +15,9 @@ const selectors = {
     deleteOptionButton: () => cy.get('.ngie-button[aria-label*="Delete option"]'),
     optionsInputField: () => cy.get('.option-component [role="textbox"]'),
     //TODO: Need to update this in all TEI
-    optionNumeration: () => cy.get('[class*="SingleOptionstyle__AdornmentDiv"]')
+    optionNumeration: () => cy.get('[class*="SingleOptionstyle__AdornmentDiv"]'),   
+    expandIconButton: () => cy.get('.expand-image-container .expand-image-btn[aria-label="expand image button"]'),
+    closeImagePopup: () => cy.get('.close-popup-btn')
 }
 
 const steps = {
@@ -300,7 +304,23 @@ const steps = {
 
     verifyOptionCount: (count) => {
         utilities.verifyElementCount(optionsWrapperComponent.optionsInputField(), count);
-    }
+    },
+
+    verifyExpandIconInImage: () => {
+            utilities.verifyElementVisibilityState(optionsWrapperComponent.expandIconButton(), 'visible');
+        },
+
+    clickExpandIconInImage: () => {
+            optionsWrapperComponent.expandIconButton()
+                .first()
+                .scrollIntoView()
+                .realClick();
+        },
+
+    closeImagePopup: () => {
+            optionsWrapperComponent.closeImagePopup()
+                .click();
+        }
 }
 
 const tests = {
@@ -387,6 +407,17 @@ const tests = {
             ckEditorToolbar.steps.addImageToInputField();
             optionsWrapperComponent.steps.verifyImageAndAltTextInOptionsInputField(inputFieldIndex);
         });
+        if (imageExpandEnhancement  === 'true') {
+            it('When user add large image in options input field, user should be able to expand the image in preview tab', () => {
+                createQuestionBasePage.steps.switchToPreviewTab();
+                ckEditorToolbar.steps.verifyExpandIconInImage();
+                ckEditorToolbar.steps.clickExpandIconInImage();
+                utilities.verifyInnerText(ckEditorToolbar.closeImagePopup(), 'Close');
+                ckEditorToolbar.steps.closeImagePopup();
+                ckEditorToolbar.steps.verifyExpandIconInImage();
+                createQuestionBasePage.steps.switchToEditTab();
+            });
+        }
     },
 
     /**

package/cypress/pages/components/questionInputFieldComponent.js

@@ -10,7 +10,9 @@ const selectors = {
     responseAreaNumeration: () => cy.get('marker'),
     responseAreaResponseLabel: () => cy.get('content'),
     questionContainerPreviewTab: () => cy.get('.preview-question-text-wrapper'),
-    responseAreaSettingsButton: () => cy.get('.add_response_settings_btn')
+    responseAreaSettingsButton: () => cy.get('.add_response_settings_btn'),
+    expandIconButton: () => cy.get('.expand-image-btn'),
+    closeImagePopup: () => cy.get('.close-popup-btn'),
 }
 
 const steps = {
@@ -145,7 +147,21 @@ const steps = {
         utilities.getNthElement(questionInputFieldComponent.responseArea(), responseAreaIndex)
             .find('.add_response_element')
             .should('have.css', 'height', height);
-    }
+    },
+
+    verifyExpandIconInImage: () => {
+            utilities.verifyElementVisibilityState(questionInputFieldComponent.expandIconButton(), 'visible');
+        },
+
+    clickExpandIconInImage: () => {
+            questionInputFieldComponent.expandIconButton()
+                .click();
+        },
+
+    closeImagePopup: () => {
+            questionInputFieldComponent.closeImagePopup()
+                .click();
+        }
 }
 
 const tests = {

package/cypress/pages/dragAndDropIntoCategoriesPage.js

@@ -39,7 +39,6 @@ const selectors = {
     dropzoneCellPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="CellDropZonestyles__CellContainer"][class*="dropzone-cell"],[class*="question-preview-wrapper"] [class*="DropzoneCellstyles__StyledCell"]'),
     dropzoneCellNumeration: () => cy.get('.answer-numeration-number-box'),
     correctAnswerDropzoneCell: () => cy.get('[class*="Matrixstyles__AnswerCell"]'),
-    correctAnswerPointsLabel: () => cy.get('[class*="CorrectAnswerSectionstyle__CorrectAnswerLabelWrapper"] p'),
     correctAnswerDropzoneCellTickIcon: () => cy.get('[class*="Matrixstyles__GreenBlock"]'),
     correctAnswersLabel: () => cy.get('.correct-answers-label'),
     correctAnswerOption: () => cy.get('[class*="Matrixstyles__AnswerWrapper"]'),
@@ -515,43 +514,6 @@ const steps = {
         });
     },
 
-    /**
-     * Verifies the content of each correct-answer dropzone in the Alternate Answer section.
-     *
-     * For every entry in `correctAnswersArray`, this function:
-     *  - Iterates through each set of correct answers assigned to a dropzone.
-     *  - Confirms that the dropzone displays the expected cell numeration.
-     *  - Verifies each answer option inside the dropzone.
-     *  - Validates that the points label for the group matches the expected value.
-     *
-     * @param {Object[]} correctAnswersArray - An array where each object represents
-     *                                         a group of correct answers and its metadata.
-     * @param {string[][]} correctAnswersArray[].correctAnswers - A list of answer-option groups for each dropzone.
-     * @param {number[]} correctAnswersArray[].cellIndexArray - Expected numeration values for corresponding dropzones.
-     * @param {string} correctAnswersArray[].pointsText - Expected points label for this group of dropzones.
-     */
-    verifyCorrectAnswerResponsesInAlternateAnswerSection: (correctAnswersArray) => {
-        let dropzoneCellIndex = 0;
-        correctAnswersArray.forEach(({
-            correctAnswers,
-            pointsText,
-        }, index) => {
-            correctAnswers.forEach((correctAnswer) => {
-                dragAndDropIntoCategoriesPage.correctAnswerDropzoneCell()
-                    .eq(dropzoneCellIndex)
-                    .within(() => {
-                        correctAnswer.forEach((answerOption, optionIndex) => {
-                            utilities.verifyTextContent(utilities.getNthElement(dragAndDropIntoCategoriesPage.correctAnswerOption(), optionIndex), answerOption);
-                        });
-                    });
-                dropzoneCellIndex += 1;
-            });
-            dragAndDropIntoCategoriesPage.correctAnswerPointsLabel()
-                .eq(index)
-                .should('have.text', pointsText);
-        });
-    },
-
     /**
      * Verifies the presence of an incorrect option icon for a specified option in the Preview Tab.
      * @param {number} optionIndex - The index of the option to verify.

package/cypress/pages/fillInTheGapsDropdownPage.js

@@ -2,6 +2,7 @@ import utilities from "../support/helpers/utilities";
 import { autoScoredScoringPreviewTab, createQuestionBasePage, scoringSectionBaseEditTab, questionInstructionsComponent, correctIncorrectAnswerLabelComponent, autoScoredStudentViewSettings, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, fillInTheGapsDropdownCommonComponent, questionInputFieldComponent, commonComponents, additionalSettingsPanel, optionsWrapperComponent, randomizeOptionsComponent, studentViewSettingsLabelComponent, responseAreaSettingsPopupComponent, gradingViewEnumerationComponent, additionalSettingsAccessibilitySectionComponent, ariaLabelSectionComponent, placeholderTextSectionComponent, styleAndLayoutCustomizationAccordionComponent, figCommonStyleAndLayoutComponent } from "./components";
 import { createItemPage } from "./createItemPage";
 const css = Cypress.env('css');
+const alternativeAnswerCheck = Cypress.env('ENABLE_ALTERNATIVE_ANSWER_ENHANCEMENT') === 'true';
 
 const selectors = {
     ...questionInstructionsComponent,
@@ -25,8 +26,8 @@ const selectors = {
     ...figCommonStyleAndLayoutComponent,
     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'),
+    correctAnswerResponseWrapper: () => alternativeAnswerCheck ? cy.get('[class*="ClozeWithTextResponsestyles__AnswerCell"]') : cy.get('.answer-block'),
+    correctAnswerResponse: () => alternativeAnswerCheck ? cy.get('[class*="AnswerWrapperForLabel"]') : 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'),
@@ -41,6 +42,8 @@ const selectors = {
     alternateAnswerPopupSaveButton: () => cy.get('[class*="AlternateOptionstyle__ButtonWrapper"] button').eq(1),
     selectedAlternateAnswerCountSpecifyCorrectAnswer: () => cy.get('.selected-option-wrapper'),
     answerStatusBanner: () => cy.get('[class*="AnswerStatusWrapper"]'),
+    correctAnswerPointsLabel: () => cy.get('[class*="CorrectAnswerSectionstyle__CorrectAnswerLabelWrapper"] p'),
+    alternativeAnswersSection: () => cy.get('[class*="CorrectAnswerLabelWrapper"]').eq(4), // Alternative answer is typically the second wrapper
 }
 
 const steps = {
@@ -128,6 +131,41 @@ const steps = {
         });
     },
 
+    /**
+     * Verify correct answer section with alternate answers.
+     *
+     * @param {Object[]} correctAnswerArray - An array of objects representing the expected correct answers and their corresponding points.
+     * @param {string[][]} correctAnswerArray[].correctAnswers - A nested array of correct answer text values. 
+     * Each inner array represents a group of alternate correct answers for a particular text container.
+     * @param {string[]} correctAnswerArray[].points - An array of point label strings associated with each correct answer group.
+     *
+     */
+
+    verifyCorrectAnswerSectionWithAlternateAnswer: (correctAnswerArray) => {
+        let responseIndex = 0;
+        let pointsLabelIndex = 0;
+        correctAnswerArray.forEach(({correctAnswers, points}) => {
+            correctAnswers.forEach((textContainers, index) => {
+                textContainers.forEach((correctAnswer) => {
+                    fillInTheGapsDropdownPage.correctAnswerResponseWrapper()
+                        .eq(responseIndex)
+                        .within(() => {
+                            utilities.verifyInnerText(fillInTheGapsDropdownCommonComponent.correctAnswerResponseNumeration(), `${index + 1}`);
+                            fillInTheGapsDropdownPage.correctAnswerResponse()
+                                .should('have.text', correctAnswer);
+                        });
+                    responseIndex += 1;
+                });
+            });
+            points.forEach((pointsText) => {
+                fillInTheGapsDropdownPage.correctAnswerPointsLabel()
+                    .eq(pointsLabelIndex)
+                    .should('have.text', pointsText);
+                pointsLabelIndex += 1;
+            });
+        });
+    },
+
     verifyCorrectAnswerSectionNotExists: () => {
         utilities.verifyElementVisibilityState(fillInTheGapsDropdownPage.correctAnswerSectionWrapper(), 'notExist');
     },
@@ -334,6 +372,13 @@ const steps = {
         fillInTheGapsDropdownPage.answerStatusBanner()
             .should('be.visible');
     },
+
+    /**
+     * Verifies that the alternative answers section does not exist
+     */
+    verifyAlternativeAnswersSectionNotExist: () => {
+        fillInTheGapsDropdownPage.alternativeAnswersSection().should('not.exist');
+    },
 }
 
 const tests = {

package/cypress/pages/matchingPage.js

@@ -5,6 +5,7 @@ import { createItemPage } from "./createItemPage";
 const css = Cypress.env('css');
 const options = ['option 1', 'option 2', 'option 3'];
 const fourOptions = ['option 1', 'option 2', 'option 3', 'option 4'];
+const imageExpandEnhancement = Cypress.env('ENABLE_EXPAND_IMAGE_ENHANCEMENT');
 
 const selectors = {
     ...correctIncorrectAnswerLabelComponent,
@@ -24,6 +25,7 @@ const selectors = {
     ...scoringSectionBaseEditTab,
     ...additionalSettingsPanel,
     ...connectorStyleStyleAndLayoutCustomizationComponent,
+    ...ckEditorToolbar,
     //Edit tab
     promptInputField: () => cy.get('.edit-mcq-stems-wrapper [role="textbox"]'),
     promptInputFieldWrapper: () => cy.get('.edit-mcq-stems-wrapper .edit-mcq-option-wrapper'),
@@ -2864,6 +2866,22 @@ const tests = {
             createQuestionBasePage.steps.switchToPreviewTab();
             draggableOptionContainer.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(optionsAfterDeleting);
         });
+        if (imageExpandEnhancement  === 'true') {
+            it('When user add large image in question instruction, user should be able to expand the image in preview tab', () => {
+                createQuestionBasePage.steps.switchToEditTab();
+                optionsWrapperComponent.steps.addOption();
+                matchingPage.steps.focusInOptionsInputField(3);
+                matchingPage.steps.selectImageOptionFromCKEditorToolbar();
+                matchingPage.steps.addImageToInputField();
+                // matchingPage.steps.focusOutOptionsInputField(3);
+                createQuestionBasePage.steps.switchToPreviewTab();
+                matchingPage.steps.verifyExpandIconInImage();
+                matchingPage.steps.clickExpandIconInImage();
+                utilities.verifyInnerText(matchingPage.closeImagePopup(), 'Close');
+                matchingPage.steps.closeImagePopup();
+                matchingPage.steps.verifyExpandIconInImage();
+            });
+        }
     },
 
     //Need to remove when https://redmine.zeuslearning.com/issues/566720 is resolved

package/cypress/pages/numberLineLabelPage.js

@@ -15,6 +15,7 @@ const selectors = {
     ...autoScoredScoringPreviewTab,
     ...randomizeOptionsComponent,
     ...additionalSettingsPanel,
+    ...ckEditorToolbar,
     partialEqualWeightsPointsPerResponseScore: () => cy.get('.alternate-points-points-per-value-span'),
     snapToTicksCheckbox: () => cy.get('[data-ngie-testid="snap-to-grid-nodes-checkbox"] input'),
     snapToTicksLabel: () => cy.get('[data-ngie-testid="snap-to-grid-nodes-checkbox"] .MuiFormControlLabel-label'),

package/cypress/pages/textSelectionPage.js

@@ -102,6 +102,8 @@ const selectors = {
     optionsInputFieldInQuestionPreviewTab: () => cy.get('[class*="word-span highlight_option"]'),
     questionInstructionsPrintViewText: () => cy.get('.question-text-wrapper').eq(0),
     questionTextPrintViewParagraphs: () => cy.get('#nextgen-assess-print-view [data-testid="question-instruction-element"] p'),
+    expandIconButton: () => cy.get('.expand-image-btn'),
+    closeImagePopup: () => cy.get('.close-popup-btn'),
 }
 
 const steps = {
@@ -1379,7 +1381,21 @@ const steps = {
         textSelectionPage.questionTextPrintViewParagraphs().each(($el, index) => {
             utilities.verifyInnerText(utilities.getNthElement(textSelectionPage.questionTextPrintViewParagraphs(), index), `${paragraphTextArray[index]}`);
         });
-    }
+    },
+
+    verifyExpandIconInImage: () => {
+            utilities.verifyElementVisibilityState(textSelectionPage.expandIconButton(), 'visible');
+        },
+
+    clickExpandIconInImage: () => {
+            textSelectionPage.expandIconButton()
+                .click();
+        },
+
+    closeImagePopup: () => {
+            textSelectionPage.closeImagePopup()
+                .click();
+        },
 }
 
 const tests = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itemengine-cypress-automation",
-  "version": "1.0.579-IEI-7046-a317a6b.0",
+  "version": "1.0.580-IEI-7040-1e744fc.0",
   "description": "",
   "main": "index.js",
   "scripts": {