itemengine-cypress-automation 1.0.563-IEI-6998-Add-coverage-for-image-hightlight-question-type-238d7b4.0 → 1.0.564-IEI-7011-cf323ce.0

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

@@ -3,6 +3,7 @@ import abortEarlySetup from "../../../support/helpers/abortEarly";
 import { dialogBoxBase, gradingViewPage, itemPreviewPage, studentViewPage } from "../../../pages";
 import utilities from "../../../support/helpers/utilities";
 const grepTags = Cypress.env('grepTags');
+const alternativeAnswerCheck = Cypress.env('ENABLE_ALTERNATIVE_ANSWER_ENHANCEMENT');
 let correctAnswerViews = ['Question preview', 'Item preview', 'Grading view'];
 const views = utilities.getViews(correctAnswerViews);
 var itemReferenceID = "";
@@ -168,6 +169,135 @@ describe('Create Item page - Single Selection: Scoring cases', () => {
         });
     });
 
+    views.forEach((view) => {
+        describe(`Single selection: all or nothing with alternative answer - ${view}`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        singleSelectionPage.steps.navigateToCreateQuestion('single selection');
+                        cy.barsPreLoaderWait();
+                        singleSelectionPage.steps.addTextInQuestionInstructionsInputField('Which of the following is the major contributor to increased carbon dioxide levels because of urbanization? Select your answer from the options below.');
+                        singleSelectionPage.steps.allotPoints(20);
+                        singleSelectionPage.steps.addInputToOptionsInputField(options);
+                        singleSelectionPage.steps.checkOptionInSpecifyCorrectAnswerSection(1);
+                        singleSelectionPage.steps.clickOnAddAlternativeAnswerButton();
+                        singleSelectionPage.steps.allotPoints(10);
+                        singleSelectionPage.steps.checkOptionInSpecifyCorrectAnswerSection(0);
+                        singleSelectionPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                }
+            });
+
+            beforeEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        singleSelectionPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+                        singleSelectionPage.steps.verifyCorrectIncorrectBorderNotExists();
+                        singleSelectionPage.steps.resetQuestionPreview();
+                        break;
+                    case 'Item preview':
+                        itemPreviewPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+                        singleSelectionPage.steps.verifyCorrectIncorrectBorderNotExists();
+                        itemPreviewPage.steps.resetQuestionPreview();
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                }
+            });
+
+            if (view === 'Question preview') {
+                after(() => {
+                    singleSelectionPage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it('When the user selects \'Grading\' view without attempting the question, no icons should be displayed besides responses, correct answer label and border should not be displayed and correct answer should be displayed in correct answer section', () => {
+                if (view === 'Grading view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+                    studentViewPage.steps.clickOnGoToGradingViewButton();
+                    gradingViewPage.steps.verifyGradingViewScore(0, 20);
+                }
+                if (view === 'Question preview' || view === 'Item preview') {
+                    singleSelectionPage.steps.switchToGradingView();
+                    singleSelectionPage.steps.verifyPreviewScore(0, 20);
+                }
+                singleSelectionPage.steps.verifyCorrectIncorrectIconNotVisibleStudentView(0);
+                singleSelectionPage.steps.verifyCorrectIncorrectIconNotVisibleStudentView(1);
+                singleSelectionPage.steps.verifyCorrectIncorrectIconNotVisibleStudentView(2);
+                singleSelectionPage.steps.verifyCorrectIncorrectIconNotVisibleStudentView(3);
+                singleSelectionPage.steps.verifyCorrectIncorrectAnswerLabelNotExist();
+                singleSelectionPage.steps.verifyCorrectIncorrectBorderNotExists();
+                //correct answer section
+                singleSelectionPage.steps.verifyCorrectOptionIconCorrectAnswerSection(1);
+                if (alternativeAnswerCheck === 'true') {
+                    singleSelectionPage.steps.verifyShowAlternativeAnswersToggleFunctionality(1, 10);
+                }
+            });
+
+            it('When the user attempts the question incorrectly, then the user should be awarded 0 points and on switching to \'Grading\' view, incorrect icons should be displayed besides incorrect responses, no icons should be displayed besides unattempted responses, incorrect answer border and label should not be displayed below the question preview and correct answer should be displayed in correct answer section', () => {
+                singleSelectionPage.steps.checkOptionInPreviewTab(2);
+                if (view === 'Grading view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+                    studentViewPage.steps.clickOnGoToGradingViewButton();
+                    gradingViewPage.steps.verifyGradingViewScore(0, 20);
+                }
+                if (view === 'Question preview' || view === 'Item preview') {
+                    singleSelectionPage.steps.switchToGradingView();
+                    singleSelectionPage.steps.verifyPreviewScore(0, 20);
+                }
+                singleSelectionPage.steps.verifyIncorrectOptionIconStudentView(2);
+                singleSelectionPage.steps.verifyCorrectIncorrectIconNotVisibleStudentView(0);
+                singleSelectionPage.steps.verifyCorrectIncorrectIconNotVisibleStudentView(1);
+                singleSelectionPage.steps.verifyCorrectIncorrectIconNotVisibleStudentView(3);
+                singleSelectionPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+                singleSelectionPage.steps.verifyCorrectIncorrectBorderNotExists();
+                //correct answer section
+                singleSelectionPage.steps.verifyCorrectOptionIconCorrectAnswerSection(1);
+                if (alternativeAnswerCheck === 'true') {
+                    singleSelectionPage.steps.verifyShowAlternativeAnswersToggleFunctionality(1, 10);
+                }
+            });
+
+            it(`Single selection ${view} - When user attempts the question correctly, the user should be awarded full points and on switching to 'Grading' view, then correct icons should be displayed beside all the correct responses, correct answer border and a label should not be displayed below the question preview and correct answer section should not be displayed`, () => {
+                singleSelectionPage.steps.checkOptionInPreviewTab(1);
+                if (view === 'Grading view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+                    studentViewPage.steps.clickOnGoToGradingViewButton();
+                    gradingViewPage.steps.verifyGradingViewScore(20, 20);
+                }
+                if (view === 'Question preview' || view === 'Item preview') {
+                    singleSelectionPage.steps.verifyPreviewScore(20, 20);
+                    singleSelectionPage.steps.switchToGradingView();
+                }
+                singleSelectionPage.steps.verifyCorrectOptionIconStudentView(1);
+                singleSelectionPage.steps.verifyCorrectIncorrectIconNotVisibleStudentView(0);
+                singleSelectionPage.steps.verifyCorrectIncorrectIconNotVisibleStudentView(2);
+                singleSelectionPage.steps.verifyCorrectIncorrectIconNotVisibleStudentView(3);
+                singleSelectionPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+                singleSelectionPage.steps.verifyCorrectIncorrectBorderNotExists();
+                singleSelectionPage.steps.verifyCorrectAnswerSectionNotExist();
+                if (alternativeAnswerCheck === 'true') {
+                    singleSelectionPage.steps.verifyShowAlternativeAnswersToggleNotExists();
+                }
+                cy.eyesCheckWindow(`Single selection ${view} - Correct attempt`);
+            });
+        });
+    });
+
     views.forEach((view) => {
         describe(`Single selection - Manually scored: ${view}`, { tags: 'smoke' }, () => {
             abortEarlySetup();

package/cypress/e2e/ILC/SingleSelection/allOrNothingWithAlternativeAnswer.js

@@ -1,6 +1,7 @@
 import { singleSelectionPage } from "../../../pages/singleSelectionPage";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 const css = Cypress.env('css');
+const alternativeAnswerCheck = Cypress.env('ENABLE_ALTERNATIVE_ANSWER_ENHANCEMENT');
 
 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'];
 
@@ -49,6 +50,9 @@ describe('Create item page - Single selection: All or nothing with alternative a
             singleSelectionPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
             singleSelectionPage.steps.verifyCorrectIncorrectBorderNotExists();
             singleSelectionPage.steps.verifyCorrectAnswerSectionNotExist();
+            if (alternativeAnswerCheck === 'true') {
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleNotExists();
+            }
             //singleSelectionPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
             /*cy.log('When the user has attempted the question with responses from the correct accordion and clicks on \'Check answer\' button, then correct icons should be displayed besides correct responses, correct answer border and a label should not be displayed below the question preview')
             singleSelectionPage.steps.checkAnswer();
@@ -96,6 +100,10 @@ describe('Create item page - Single selection: All or nothing with alternative a
             singleSelectionPage.steps.verifyIncorrectOptionIconStudentView(3);
             singleSelectionPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
             singleSelectionPage.steps.verifyCorrectIncorrectBorderNotExists();
+            //show alternative answers
+            if (alternativeAnswerCheck === 'true') {
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleFunctionality(1, 10);
+            }
             //correct answer section
             singleSelectionPage.steps.verifyCorrectOptionIconCorrectAnswerSection(1);
             //singleSelectionPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
@@ -215,6 +223,10 @@ describe('Create item page - Single selection: All or nothing with alternative a
             singleSelectionPage.steps.verifyCorrectIncorrectIconNotVisibleStudentView(3);
             singleSelectionPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
             singleSelectionPage.steps.verifyCorrectIncorrectBorderNotExists();
+            //show alternative answers
+            if (alternativeAnswerCheck === 'true') {
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleFunctionality(1, 10);
+            }
             //correct answer section
             singleSelectionPage.steps.verifyCorrectOptionIconCorrectAnswerSection(2);
             singleSelectionPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
@@ -314,6 +326,10 @@ describe('Create item page - Single selection: All or nothing with alternative a
             singleSelectionPage.steps.verifyCorrectIncorrectIconNotVisibleStudentView(3);
             singleSelectionPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
             singleSelectionPage.steps.verifyCorrectIncorrectBorderNotExists();
+            //show alternative answers
+            if (alternativeAnswerCheck === 'true') {
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleFunctionality(1, 20);
+            }
             //correct answer section
             singleSelectionPage.steps.verifyCorrectOptionIconCorrectAnswerSection(1);
             singleSelectionPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();

package/cypress/pages/components/index.js

@@ -3,6 +3,7 @@ export * from './commonComponents';
 export * from './additionalSettingsPanel';
 export * from './mcqAdditionalSettingsBase';
 export * from './questionInstructionsComponent';
+export * from './showAlternativeAnswersComponent';
 export * from './ckEditorToolbar';
 export * from './essayResponseCommonComponents';
 export * from './optionsWrapperComponent';

package/cypress/pages/components/showAlternativeAnswersComponent.js

@@ -0,0 +1,169 @@
+/**
+ * Show Alternative Answers Component
+ * Common functionality for managing and verifying alternative answers toggle and content
+ * across different question types (Single Selection, Multiple Selection, etc.)
+ */
+
+const showAlternativeAnswersComponent = {
+    // Selectors for the alternative answers toggle
+    showAlternativeAnswersToggleWrapper: () => cy.get('[class*="ShowAlternativeAnswerSwitch"][class*="SwitchWrapper"]'),
+    showAlternativeAnswersToggleInput: () => cy.get('[class*="ShowAlternativeAnswerSwitch"][class*="SwitchWrapper"] input[type="checkbox"]'),
+    showAlternativeAnswersToggleLabel: () => cy.get('[class*="ShowAlternativeAnswerSwitch"][class*="SwitchWrapper"] [class*="SwitchLabelWrapper"]'),
+    showAlternativeAnswersToggleButton: () => cy.get('[class*="ShowAlternativeAnswerSwitch"][class*="SwitchWrapper"] .MuiButtonBase-root'),
+    
+    // Selectors for the alternative answers content section
+    alternativeAnswersSection: () => cy.get('[class*="CorrectAnswerLabelWrapper"]').contains('Alternative answer'),
+    alternativeAnswerLabelWrapper: () => cy.get('[class*="CorrectAnswerLabelWrapper"]:contains("Alternative answer")'),
+    alternativeAnswerGridWrapper: () => cy.get('[class*="CorrectAnswerGridWrapper"]'),
+    alternativeAnswerSelectionGrid: () => cy.get('.correct-ans-selection-grid'),
+
+    steps: {
+        /**
+         * Verifies that the "Show alternative answers" toggle is present and visible
+         */
+        verifyShowAlternativeAnswersToggleExists: () => {
+            showAlternativeAnswersComponent.showAlternativeAnswersToggleWrapper()
+                .should('be.visible');
+            showAlternativeAnswersComponent.showAlternativeAnswersToggleLabel()
+                .should('contain.text', 'Show alternative answers');
+        },
+
+        /**
+         * Verifies that the "Show alternative answers" toggle does not exist
+         */
+        verifyShowAlternativeAnswersToggleNotExists: () => {
+            showAlternativeAnswersComponent.showAlternativeAnswersToggleWrapper()
+                .should('not.exist');
+        },
+
+        /**
+         * Verifies that the "Show alternative answers" toggle is in the checked (enabled) state
+         */
+        verifyShowAlternativeAnswersToggleChecked: () => {
+            showAlternativeAnswersComponent.showAlternativeAnswersToggleInput()
+                .should('be.checked')
+                .and('have.attr', 'aria-pressed', 'true');
+            // Verify the checked state visual indicator (tick icon)
+            showAlternativeAnswersComponent.showAlternativeAnswersToggleWrapper()
+                .find('.icon-ILC-tick-icon')
+                .should('be.visible');
+        },
+
+        /**
+         * Verifies that the "Show alternative answers" toggle is in the unchecked (disabled) state
+         */
+        verifyShowAlternativeAnswersToggleUnchecked: () => {
+            showAlternativeAnswersComponent.showAlternativeAnswersToggleInput()
+                .should('not.be.checked')
+                .and('have.attr', 'aria-pressed', 'false');
+            // Verify the unchecked state visual indicator (x-circle icon)
+            showAlternativeAnswersComponent.showAlternativeAnswersToggleWrapper()
+                .find('.icon-x-circle')
+                .should('be.visible');
+        },
+
+        /**
+         * Clicks the "Show alternative answers" toggle to change its state
+         */
+        clickShowAlternativeAnswersToggle: () => {
+            showAlternativeAnswersComponent.showAlternativeAnswersToggleButton()
+                .click();
+        },
+
+        /**
+         * Enables the "Show alternative answers" toggle (clicks it if it's currently unchecked)
+         */
+        enableShowAlternativeAnswersToggle: () => {
+            showAlternativeAnswersComponent.showAlternativeAnswersToggleInput()
+                .then(($input) => {
+                    if (!$input.prop('checked')) {
+                        showAlternativeAnswersComponent.steps.clickShowAlternativeAnswersToggle();
+                    }
+                });
+        },
+
+        /**
+         * Disables the "Show alternative answers" toggle (clicks it if it's currently checked)
+         */
+        disableShowAlternativeAnswersToggle: () => {
+            showAlternativeAnswersComponent.showAlternativeAnswersToggleInput()
+                .then(($input) => {
+                    if ($input.prop('checked')) {
+                        showAlternativeAnswersComponent.steps.clickShowAlternativeAnswersToggle();
+                    }
+                });
+        },
+
+        /**
+         * Verifies that the alternative answers section is visible
+         * @param {number} index - The index of the alternative answer (e.g., 1 for "Alternative answer 1")
+         * @param {number} points - The expected points for the alternative answer
+         */
+        verifyAlternativeAnswersSectionVisible: (index, points) => {
+            cy.get('[class*="CorrectAnswerLabelWrapper"]')
+                .contains(`Alternative answer ${index}`)
+                .should('be.visible');
+            
+            if (points) {
+                cy.get('[class*="CorrectAnswerLabelWrapper"]')
+                    .contains(`Alternative answer ${index}`)
+                    .parent()
+                    .find('p')
+                    .should('contain.text', `(${points} points)`);
+            }
+        },
+
+        /**
+         * Verifies that the alternative answers section does not exist
+         */
+        verifyAlternativeAnswersSectionNotExist: () => {
+            cy.get('[class*="CorrectAnswerLabelWrapper"]')
+                .contains('Alternative answer')
+                .should('not.exist');
+        },
+
+        /**
+         * Verifies the complete alternative answers section including content and grid
+         * @param {number} index - The index of the alternative answer (e.g., 1 for "Alternative answer 1")
+         * @param {number} points - The expected points for the alternative answer
+         */
+        verifyAlternativeAnswersSectionComplete: (index = 1, points) => {
+            // Verify the alternative answer label is visible
+            showAlternativeAnswersComponent.steps.verifyAlternativeAnswersSectionVisible(index, points);
+            
+            // Verify the selection grid is visible
+            showAlternativeAnswersComponent.alternativeAnswerSelectionGrid()
+                .should('be.visible');
+        },
+
+        /**
+         * Comprehensive test that verifies the complete toggle functionality
+         * @param {number} index - The index of the alternative answer to verify
+         * @param {number} points - The expected points for the alternative answer
+         */
+        verifyShowAlternativeAnswersToggleFunctionality: (index, points) => {
+            // Start with ensuring toggle exists
+            showAlternativeAnswersComponent.steps.verifyShowAlternativeAnswersToggleExists();
+            
+            // Test unchecked state
+            showAlternativeAnswersComponent.steps.disableShowAlternativeAnswersToggle();
+            showAlternativeAnswersComponent.steps.verifyShowAlternativeAnswersToggleUnchecked();
+
+            // Verify the alternative answers section does not exist
+            showAlternativeAnswersComponent.steps.verifyAlternativeAnswersSectionNotExist();
+            
+            // Test checked state
+            showAlternativeAnswersComponent.steps.clickShowAlternativeAnswersToggle();
+            showAlternativeAnswersComponent.steps.verifyShowAlternativeAnswersToggleChecked();
+
+            // Verify the alternative answers section is visible
+            showAlternativeAnswersComponent.steps.verifyAlternativeAnswersSectionVisible(index, points);
+            
+            // Test toggle back to unchecked
+            showAlternativeAnswersComponent.steps.clickShowAlternativeAnswersToggle();
+            showAlternativeAnswersComponent.steps.verifyShowAlternativeAnswersToggleUnchecked();
+        }
+    },
+};
+
+export { showAlternativeAnswersComponent };

package/cypress/pages/imageHighlightPage.js

@@ -1,7 +1,6 @@
 import utilities from "../support/helpers/utilities";
 import { additionalSettingsAccessibilitySectionComponent, additionalSettingsPanel, autoScoredScoringPreviewTab, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, autoScoredStudentViewSettings, backgroundImageUploadComponent, commonComponents, createQuestionBasePage, enableOuterBorderComponent, gradingViewEnumerationComponent, imageActionsComponent, imageCanvasComponent, questionInstructionsComponent, scoringSectionBaseEditTab, showAvailableOptionsToStudents, showStudentMaximumNumberOfPossibleSelections, singleMultipleSelectionModeComponent, colorPopupComponent } from "./components";
 import { createItemPage } from "./createItemPage";
-import { itemPreviewPage } from "./itemPreviewPage";    
 const css = Cypress.env('css');
 let imageWidth = 768;
 let imageHeight = 432;
@@ -19,7 +18,6 @@ const selectors = {
     ...imageActionsComponent,
     ...additionalSettingsPanel,
     ...gradingViewEnumerationComponent,
-    ...itemPreviewPage,
 
     //Image  selection style section.
     imageSelectionStyleLabel: () => cy.get('.options-label'),
@@ -112,12 +110,6 @@ const selectors = {
     saturationPointer: () => cy.get('.react-colorful__pointer.react-colorful__saturation-pointer'),
     huePointer: () => cy.get('.react-colorful__pointer.react-colorful__hue-pointer'),
     alphaPointer: () => cy.get('.react-colorful__pointer.react-colorful__alpha-pointer'),
-    enumerationPlacementLabel: () => cy.get('[class*="options-container-cls dropzone-identifiers-wrapper"] .options-label').eq(1),
-    enumerationToggleButtonContainer: () => cy.get('[aria-label="Enumeration placement"]'),
-    enumerationPlacementTopToggleButton: () => cy.get('[data-ngie-testid="top-toggle-button"]'),
-    enumerationPlacementCenterToggleButton: () => cy.get('[data-ngie-testid="center-toggle-button"]').eq(1),
-    enumerationPlacementBottomToggleButton: () => cy.get('[data-ngie-testid="bottom-toggle-button"]'),
-    enumerationForHighlightsPreviewTab: () => cy.get('[class*="highlight-svg-responseive"] circle'),
 }
 
 const steps = {
@@ -320,7 +312,7 @@ const steps = {
      * @description this function verifies height of canvas
      */
     verifyCanvasHeight: (height) => {
-        const tolerance = 10
+        const tolerance = 2
         imageHighlightPage.specifyPossibleOptionsImageCanvas()
             .should('have.css', 'height')
             .then(($cssHeight) => {
@@ -667,20 +659,20 @@ const steps = {
 
     verifyCanvasImageTopLeftAlignedInPreviewTab: () => {
         imageHighlightPage.imagePreviewTab()
-            .should('have.attr', 'x', '0')
-            .and('have.attr', 'y', '0');
+            .should('have.css', 'top', '0px')
+            .and('have.css', 'left', '0px');
     },
 
     verifyCanvasImageCenterAlignedInPreviewTab: () => {
         imageHighlightPage.imagePreviewTab()
-            .should('have.attr', 'x', '100')
-            .and('have.attr', 'y', '100');
+            .should('not.have.css', 'top', '0px')
+            .and('not.have.css', 'left', '0px');
     },
 
     verifyCanvasImageTopRightAlignedInPreviewTab: () => {
         imageHighlightPage.imagePreviewTab()
-            .should('have.attr', 'x', '100')
-            .and('not.have.attr', 'y', '200');
+            .should('have.css', 'top', '0px')
+            .and('not.have.css', 'left', '0px');
     },
 
     /**
@@ -1152,20 +1144,6 @@ const steps = {
             });
     },
 
-    /**
-     * @param {number} index of highlight region
-     * @description this function verifies the outLineHighlight of selected highlight in item preview tab.
-     */
-    verifyOutlineHighlightRegionItemPreviewTabSection: (index) => {
-        imageHighlightPage.itemPreviewPageWrapper()
-            .within(() => {
-                utilities.verifyCSS(imageHighlightPage.specifyCorrectAnswerSectionHighlightPolygon().eq(index), {
-                    'stroke-width': '2px',
-                    'stroke': css.color.activeHighlightBorder
-                });
-            });
-    },
-
     /**
      * @param {number} index of highlight region
      * @description this function verifies the patternHighlight of selected highlight in preview tab.
@@ -1727,161 +1705,6 @@ const steps = {
             Math.abs(ag - eg) <= tolerance &&
             Math.abs(ab - eb) <= tolerance
         );
-    },
-
-    /**
-    * @param {number} width index for the border style.
-    * @param {number} height index for the border style.
-    * @description Verifies the height and width of image in preview tab.
-    */
-    verifyImageDimensionsPreviewTab: (width, height) => {
-        imageHighlightPage.imagePreviewTab()
-            .should('have.css', 'width', `${width}px`)
-            .and('have.css', 'height', `${height}px`);
-    },
-
-    /**
-    * @description Clicks on the bottom enumeration placement button.
-    */
-    selectBottomEnumerationPlacementToggle: () => {
-        imageHighlightPage.enumerationPlacementBottomToggleButton()
-            .click();
-    },
-
-    /**
-    * @description Clicks on the center enumeration placement button.
-    */
-    selectCenterEnumerationPlacementToggle: () => {
-        imageHighlightPage.enumerationPlacementCenterToggleButton()
-            .click();
-    },
-
-    /**
-    * @param {string} enumerationPlacement placement of the enumeration.
-    * @param {number} index index of highlight region
-    * @description Verifies the enumeration placement for highlight regions in the preview tab.
-    */
-    verifyNumerationPlacementForHighlightRegionInPreviewTab: (enumerationPlacement, index) => {
-        const tolerance = 1
-        switch (enumerationPlacement) {
-            case 'Top':
-                switch (index) {
-                    case 0:
-                        imageHighlightPage.enumerationForHighlightsPreviewTab().eq(index)
-                            .invoke('attr', 'cx')
-                            .then(actualCx => {
-                                const roundedCx = Number(actualCx).toFixed(2); // keep two decimals
-                                expect(roundedCx).to.equal('307.80');
-                            });
-                        imageHighlightPage.enumerationForHighlightsPreviewTab().eq(index)
-                            .invoke('attr', 'cy')
-                            .then(actualCx => {
-                                const roundedCx = Number(actualCx).toFixed(2); // keep two decimals
-                                expect(roundedCx).to.equal('59.03');
-                            });
-                        imageHighlightPage.enumerationForHighlightsPreviewTab().eq(index)
-                            .should('have.attr', 'r', '12');
-                        break;
-                    case 1:
-                        imageHighlightPage.enumerationForHighlightsPreviewTab().eq(index)
-                            .invoke('attr', 'cx')
-                            .then(actualCx => {
-                                const roundedCx = Number(actualCx).toFixed(2); // keep two decimals
-                                expect(roundedCx).to.equal('200.52');
-                            });
-                        imageHighlightPage.enumerationForHighlightsPreviewTab().eq(index)
-                            .invoke('attr', 'cy')
-                            .then(actualCx => {
-                                const roundedCx = Number(actualCx).toFixed(2); // keep two decimals
-                                expect(roundedCx).to.equal('213.11');
-                            });
-                        imageHighlightPage.enumerationForHighlightsPreviewTab().eq(index)
-                            .should('have.attr', 'r', '12');
-                        break;
-                    default:
-                        throw new Error(`Unsupported index ${index} for placement 'Top'`);
-                }
-                break;
-            case 'Center':
-                switch (index) {
-                    case 0:
-                        // Match cx only up to 2 decimal places to allow minor rendering variance.
-                        imageHighlightPage.enumerationForHighlightsPreviewTab().eq(index)
-                            .invoke('attr', 'cx')
-                            .then(actualCx => {
-                                const roundedCx = Number(actualCx).toFixed(2); // keep two decimals
-                                expect(roundedCx).to.equal('365.45');
-                            });
-                        imageHighlightPage.enumerationForHighlightsPreviewTab().eq(index)
-                            .invoke('attr', 'cy')
-                            .then(actualCy => {
-                                const roundedCy = Number(actualCy).toFixed(2); // keep two decimals
-                                expect(roundedCy).to.equal('100.06');
-                            });
-                        imageHighlightPage.enumerationForHighlightsPreviewTab().eq(index)
-                            .should('have.attr', 'r', '12');
-                        break;
-                    case 1:
-                        imageHighlightPage.enumerationForHighlightsPreviewTab().eq(index)
-                            .invoke('attr', 'cx')
-                            .then(actualCx => {
-                                const roundedCx = Number(actualCx).toFixed(2); // keep two decimals
-                                expect(roundedCx).to.equal('284.74');
-                            });
-                        imageHighlightPage.enumerationForHighlightsPreviewTab().eq(index)
-                            .invoke('attr', 'cy')
-                            .then(actualCy => {
-                                const roundedCy = Number(actualCy).toFixed(2); // keep two decimals
-                                expect(roundedCy).to.equal('238.14');
-                            });
-                        imageHighlightPage.enumerationForHighlightsPreviewTab().eq(index)
-                            .should('have.attr', 'r', '12');
-                        break;
-                    default:
-                        throw new Error(`Unsupported index ${index} for placement 'Center'`);
-                }
-                break;
-            case 'Bottom':
-                switch (index) {
-                    case 0:
-                        imageHighlightPage.enumerationForHighlightsPreviewTab().eq(index)
-                            .invoke('attr', 'cx')
-                            .then(actualCx => {
-                                const roundedCx = Number(actualCx).toFixed(2); // keep two decimals
-                                expect(roundedCx).to.equal('307.80');
-                            });
-                        imageHighlightPage.enumerationForHighlightsPreviewTab().eq(index)
-                            .invoke('attr', 'cy')
-                            .then(actualCy => {
-                                const roundedCy = Number(actualCy).toFixed(2); // keep two decimals
-                                expect(roundedCy).to.equal('167.09');
-                            });
-                        imageHighlightPage.enumerationForHighlightsPreviewTab().eq(index)
-                            .should('have.attr', 'r', '12');
-                        break;
-                    case 1:
-                        imageHighlightPage.enumerationForHighlightsPreviewTab().eq(index)
-                            .invoke('attr', 'cx')
-                            .then(actualCx => {
-                                const roundedCx = Number(actualCx).toFixed(2); // keep two decimals
-                                expect(roundedCx).to.equal('200.52');
-                            });
-                        imageHighlightPage.enumerationForHighlightsPreviewTab().eq(index)
-                            .invoke('attr', 'cy')
-                            .then(actualCy => {
-                                const roundedCy = Number(actualCy).toFixed(2); // keep two decimals
-                                expect(roundedCy).to.equal('289.16');
-                            });
-                        imageHighlightPage.enumerationForHighlightsPreviewTab().eq(index)
-                            .should('have.attr', 'r', '12');
-                        break;
-                    default:
-                        throw new Error(`Unsupported index ${index} for placement 'Bottom'`);
-                }
-                break;
-            default:
-                throw new Error(`Invalid enumeration placement '${enumerationPlacement}'`);
-        }
     }
 }
 

package/cypress/pages/itemPreviewPage.js

@@ -2,7 +2,6 @@ import { createQuestionBasePage, autoScoredScoringPreviewTab } from "./component
 
 const selectors = {
     referenceID: () => cy.get('.edit-item-reference-id'),
-    itemPreviewPageWrapper: () => cy.get('.item-layout-columns-wrapper-without-scroll'),
 }
 
 const steps = {

package/cypress/pages/multipleSelectionPage.js

@@ -1,6 +1,6 @@
 import constants from "../fixtures/constants";
 import utilities from "../support/helpers/utilities"
-import { autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, commonComponents, createQuestionBasePage, optionsWrapperComponent, questionInstructionsComponent, scoringSectionBaseEditTab, autoScoredScoringPreviewTab, autoScoredStudentViewSettings, additionalSettingsPanel, ckEditorToolbar, equationEditorFlyout, mcqAdditionalSettingsBase, randomizeOptionsComponent, lockUnlockOptionComponent, additionalSettingsAccessibilitySectionComponent } from "./components"
+import { autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, commonComponents, createQuestionBasePage, optionsWrapperComponent, questionInstructionsComponent, scoringSectionBaseEditTab, autoScoredScoringPreviewTab, autoScoredStudentViewSettings, additionalSettingsPanel, ckEditorToolbar, equationEditorFlyout, mcqAdditionalSettingsBase, randomizeOptionsComponent, lockUnlockOptionComponent, additionalSettingsAccessibilitySectionComponent, showAlternativeAnswersComponent } from "./components"
 import { ckEditorAudioPlayerComponent } from "../pages/components/ckEditorAudioPlayerComponent"
 import { ckEditorEquationEditorComponent } from "../pages/components/ckEditorEquationEditorComponent"
 import { ckEditorInsertTableComponent } from "../pages/components/ckEditorInsertTableComponent"
@@ -35,6 +35,7 @@ const selectors = {
     ...ckEditorLinkComponent,
     ...createItemPage,
     ...audioPlayerPage,
+    ...showAlternativeAnswersComponent,
     //Specify correct answer section
     optionWrapperSpecifyCorrectAnswerSection: () => cy.get('.mcq-option-wrapper'),
     optionsText: () => cy.get('.mcq-label'),
@@ -111,6 +112,7 @@ const steps = {
     ...ckEditorAudioPlayerComponent.steps,
     ...ckEditorEquationEditorComponent.steps,
     ...ckEditorInsertTableComponent.steps,
+    ...showAlternativeAnswersComponent.steps,
     ...ckEditorInsertImageComponent.steps,
     ...ckEditorLinkComponent.steps,
     ...createItemPage.steps,