itemengine-cypress-automation 1.0.577 → 1.0.578-IEI-7105-c0daa6d.0

package/cypress/config-files/ilprod.json

@@ -13,6 +13,7 @@
         "organisation_id": "eb7d4a20-c96c-4852-9b34-7e3231016315",
         "migration_usernme": "ilc-prod-content-user",
         "migration_password": "Oj2kTWQM7ZRmegmS",
-        "ENABLE_ALTERNATIVE_ANSWER_ENHANCEMENT": "false"
+        "ENABLE_ALTERNATIVE_ANSWER_ENHANCEMENT": "false",
+        "ENABLE_EXPAND_IMAGE_ENHANCEMENT": "false"
     }
 }

package/cypress/config-files/ilqa.json

@@ -13,6 +13,7 @@
         "organisation_id": "eb7d4a20-c96c-4852-9b34-7e3231016315",
         "migration_usernme": "demo-technical-tester",
         "migration_password": "SXYeokWOoTuwEg2w",
-        "ENABLE_ALTERNATIVE_ANSWER_ENHANCEMENT": "true"
+        "ENABLE_ALTERNATIVE_ANSWER_ENHANCEMENT": "true",
+        "ENABLE_EXPAND_IMAGE_ENHANCEMENT": "true"
     }
 }

package/cypress/config-files/ilstage.json

@@ -11,6 +11,7 @@
         "admin_username": "demouser-ilc",
         "admin_password": "T6b9FK0pC6Tg8wDz",
         "organisation_id": "eb7d4a20-c96c-4852-9b34-7e3231016315",
-        "ENABLE_ALTERNATIVE_ANSWER_ENHANCEMENT": "false"
+        "ENABLE_ALTERNATIVE_ANSWER_ENHANCEMENT": "false",
+        "ENABLE_EXPAND_IMAGE_ENHANCEMENT": "false"
     }
 }

package/cypress/e2e/ILC/Matching/draggableOptions.js

@@ -110,7 +110,7 @@ describe('Create Item page - Matching: Draggable options section', () => {
         });
     });
 
-    describe('Standard options layout - Preview tab contents', () => {
+    describe.only('Standard options layout - Preview tab contents', () => {
         abortEarlySetup();
         before(() => {
             matchingPage.steps.navigateToCreateQuestion('matching');

package/cypress/e2e/ILC/Matching/questionInstructionsAndPromptSection.js

@@ -3,6 +3,7 @@ import abortEarlySetup from "../../../support/helpers/abortEarly";
 import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
 const promptArray = ['Land pollution', 'Water pollution', 'Air pollution'];
+const imageExpandEnhancement = Cypress.env('ENABLE_EXPAND_IMAGE_ENHANCEMENT');
 
 describe('Create Item page - Matching : Question Instructions and prompt section', () => {
     before(() => {
@@ -207,7 +208,7 @@ describe('Create Item page - Matching : Question Instructions and prompt section
         });
     });
 
-    describe('Prompt - Preview tab section', () => {
+    describe.only('Prompt - Preview tab section', () => {
         abortEarlySetup();
         before(() => {
             cy.log('Navigating to Matching question type');
@@ -265,13 +266,29 @@ describe('Create Item page - Matching : Question Instructions and prompt section
             matchingPage.steps.verifyPromptHeaderTextPreviewTab('Header');
         });
 
-        it('When user clears text in prompt header input field then prompt header should be removed in preview tab', () => {
+        it.only('When user clears text in prompt header input field then prompt header should be removed in preview tab', () => {
             matchingPage.steps.switchToEditTab();
             matchingPage.steps.clearAndFocusOutOfPromptHeaderInputField();
             matchingPage.steps.switchToPreviewTab();
             utilities.verifyElementVisibilityState(matchingPage.dropzoneColumnAndPromptHeaderWrapperPreviewTab(), 'notExist');
         });
 
+         if (imageExpandEnhancement  === 'true') {
+            it.only('When user add large image in question instruction, user should be able to expand the image in preview tab', () => {
+                matchingPage.steps.switchToEditTab();
+                matchingPage.steps.clearPromptInputField(0);
+                matchingPage.steps.focusInPromptInputField(0);
+                matchingPage.steps.selectImageOptionFromCKEditorToolbar();
+                matchingPage.steps.addImageToInputField();
+                matchingPage.steps.switchToPreviewTab();
+                matchingPage.steps.verifyExpandIconInImage();
+                matchingPage.steps.clickExpandIconInImage();
+                utilities.verifyInnerText(matchingPage.closeImagePopup(), 'Close');
+                matchingPage.steps.closeImagePopup();
+                matchingPage.steps.verifyExpandIconInImage();
+            });
+        }
+
         it('CSS of added prompt in \'Preview\' tab table', { tags: 'css' }, () => {
             utilities.verifyCSS(matchingPage.promptContainerPreviewTab().find('.question-text-wrapper'), {
                 'color': css.color.text,

package/cypress/e2e/ILC/MultipleSelection/previewContentsForAllViews.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 - Multiple selection: Preview contents', () => {
     before(() => {
@@ -91,6 +92,23 @@ describe('Create item page - Multiple selection: Preview contents', () => {
                 multipleSelectionPage.steps.verifyEquationTextInPreviewTab(2);
                 cy.eyesCheckWindow(`Multiple selection - ${view} - Image, Bold Text, and Equation Display`);
             });
+            if (imageExpandEnhancement  === 'true') {
+                it('Image expand icon should be visible on the image in option', () => {
+                    multipleSelectionPage.steps.verifyImageInPreviewTab(0);
+                    multipleSelectionPage.steps.verifyExpandIconInImage();
+                });
+
+                it('When the user clicks on the expand button then the image should be expanded and a close button should be displayed', () => {
+                    multipleSelectionPage.steps.verifyImageInPreviewTab(0);
+                    multipleSelectionPage.steps.clickExpandIconInImage();
+                    utilities.verifyInnerText(multipleSelectionPage.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', () => {
+                    multipleSelectionPage.steps.closeImagePopup();
+                    multipleSelectionPage.steps.verifyExpandIconInImage();
+                });
+            }
 
             if (view !== 'Grading view' && view !== 'Correct answer view') {
                 it(`All the options should be in unchecked state`, () => {

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

@@ -6,6 +6,7 @@ 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);
 var itemReferenceID = "";
+const imageExpandEnhancement = Cypress.env('ENABLE_EXPAND_IMAGE_ENHANCEMENT');
 
 describe('Create item page - Multiple selection grid: Preview contents', () => {
     before(() => {
@@ -94,6 +95,24 @@ describe('Create item page - Multiple selection grid: Preview contents', () => {
                     utilities.verifyInnerText(multipleSelectionGridPage.questionInstructionsText(), 'Please select where the following animals are found');
                     utilities.verifyElementVisibilityState(multipleSelectionGridPage.questionInstructionsText(), 'visible');
                 });
+                
+                if (imageExpandEnhancement  === 'true') {
+                    it('Image expand icon should be visible on the image in option', () => {
+                        multipleSelectionGridPage.steps.verifyTableCellWithImageInPreviewTab({ row: 1, column: 1 });
+                        multipleSelectionGridPage.steps.verifyExpandIconInImage();
+                    });
+
+                    it('When the user clicks on the expand button then the image should be expanded and a close button should be displayed', () => {
+                        multipleSelectionGridPage.steps.verifyTableCellWithImageInPreviewTab({ row: 1, column: 1 });
+                        multipleSelectionGridPage.steps.clickExpandIconInImage();
+                        utilities.verifyInnerText(multipleSelectionGridPage.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', () => {
+                        multipleSelectionGridPage.steps.closeImagePopup();
+                        multipleSelectionGridPage.steps.verifyExpandIconInImage();
+                    });
+                }
     
                 it(`Multiple selection grid - The question grid as set by the user should be displayed in the ${view}`, () => {
                     multipleSelectionGridPage.steps.verifyTableCellPropertyPreviewTab({ row: 0, column: 0 }, 'None');

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

@@ -3,6 +3,7 @@ import { ckEditorToolbar, equationEditorFlyout } 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');
 const labels = ['Label 1', 'Label 2', 'Label 3']
 describe('Create Item page - Number line label : Question instructions and label section', () => {
     before(() => {
@@ -20,7 +21,7 @@ describe('Create Item page - Number line label : Question instructions and label
         numberLineLabelPage.tests.verifyQuestionInstructionsInputFieldEditTab();
     });
 
-    describe('Question instructions input field - Preview tab', () => {
+    describe.only('Question instructions input field - Preview tab', () => {
         abortEarlySetup();
         before(() => {
             numberLineLabelPage.steps.navigateToCreateQuestion('Number line');
@@ -41,6 +42,23 @@ describe('Create Item page - Number line label : Question instructions and label
             utilities.verifyTextContent(numberLineLabelPage.questionInstructionsText(), 'Which of the following is the major contributor to increased carbon dioxide levels because of urbanization? Select your answer from the options below.');
         });
 
+        if (imageExpandEnhancement  === 'true') {
+            it('When user add large image in question instruction, user should be able to expand the image in preview tab', () => {
+                numberLineLabelPage.steps.switchToEditTab();
+                numberLineLabelPage.steps.clearQuestionInstructionsInputField();
+                numberLineLabelPage.steps.focusInQuestionInstructionsInputField();
+                numberLineLabelPage.steps.selectImageOptionFromCKEditorToolbar();
+                numberLineLabelPage.steps.addImageToInputField();
+                numberLineLabelPage.steps.focusOutQuestionInstructionsInputField();
+                numberLineLabelPage.steps.switchToPreviewTab();
+                numberLineLabelPage.steps.verifyExpandIconInImage();
+                numberLineLabelPage.steps.clickExpandIconInImage();
+                utilities.verifyInnerText(numberLineLabelPage.closeImagePopup(), 'Close');
+                numberLineLabelPage.steps.closeImagePopup();
+                numberLineLabelPage.steps.verifyExpandIconInImage();
+            });
+        }
+
         //Need to remove this comment once https://redmine.zeuslearning.com/issues/578531 is resolved
         // numberLineLabelPage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
     });

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,27 @@ const tests = {
             createQuestionBasePage.steps.switchToPreviewTab();
             draggableOptionContainer.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(optionsAfterDeleting);
         });
+        it.only('When user add large image in option, the option container should have expand icon', () => {
+            // const imagePath = 'images/largeImage.png';
+            // cy.log('Pre-step : Switching to \'Edit\' tab')
+            // createQuestionBasePage.steps.switchToEditTab();
+            // optionsWrapperComponent.steps.addOption();
+            // optionsWrapperComponent.steps.uploadImageInOption(2, imagePath);
+            // createQuestionBasePage.steps.switchToPreviewTab();
+            // utilities.verifyElementVisibilityState(utilities.getNthElement(draggableOptionContainer.optionContainerItemListPreviewTab().find('svg'), 2), 'visible');
+            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();
+            cy.wait(1000); //Added wait as this is failing due to page updating
+            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/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.577",
+  "version": "1.0.578-IEI-7105-c0daa6d.0",
   "description": "",
   "main": "index.js",
   "scripts": {