itemengine-cypress-automation 1.0.564-IEI-6998-Add-coverage-for-image-hightlight-question-type-f372002.0 → 1.0.564-IEI-7011-195aab1.0

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'];
 
@@ -35,6 +36,20 @@ describe('Create item page - Single selection: All or nothing with alternative a
             singleSelectionPage.steps.verifyCorrectIncorrectBorderNotExists();
             //correct answer section
             singleSelectionPage.steps.verifyCorrectOptionIconCorrectAnswerSection(1);
+            //show alternative answers
+            if (alternativeAnswerCheck === 'true') {
+                singleSelectionPage.steps.verifyCorrectAnswersLabelAndPointVisible('(20 points)');
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleExists();
+                singleSelectionPage.steps.disableShowAlternativeAnswersToggle();
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleUnchecked();
+                singleSelectionPage.steps.verifyAlternativeAnswersSectionNotExist();
+                singleSelectionPage.steps.clickShowAlternativeAnswersToggle();
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleChecked();
+                singleSelectionPage.steps.verifyAlternativeAnswersLabelAndPointVisible(1, '(10 points)');
+                singleSelectionPage.steps.verifyAlternateAnswerOptionIconCorrectAnswerSection(2);
+                singleSelectionPage.steps.clickShowAlternativeAnswersToggle();
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleUnchecked();
+            }
             singleSelectionPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
         });
 
@@ -49,6 +64,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();
@@ -74,6 +92,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 alternative accordion and clicks on \'Check answer\' button, then correct icons should only be displayed besides correct responses from the alternative accordion, correct answer border and a label should not be displayed below the question preview')
             singleSelectionPage.steps.checkAnswer();
@@ -98,6 +119,20 @@ describe('Create item page - Single selection: All or nothing with alternative a
             singleSelectionPage.steps.verifyCorrectIncorrectBorderNotExists();
             //correct answer section
             singleSelectionPage.steps.verifyCorrectOptionIconCorrectAnswerSection(1);
+            //show alternative answers
+            if (alternativeAnswerCheck === 'true') {
+                singleSelectionPage.steps.verifyCorrectAnswersLabelAndPointVisible('(20 points)');
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleExists();
+                singleSelectionPage.steps.disableShowAlternativeAnswersToggle();
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleUnchecked();
+                singleSelectionPage.steps.verifyAlternativeAnswersSectionNotExist();
+                singleSelectionPage.steps.clickShowAlternativeAnswersToggle();
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleChecked();
+                singleSelectionPage.steps.verifyAlternativeAnswersLabelAndPointVisible(1, '(10 points)');
+                singleSelectionPage.steps.verifyAlternateAnswerOptionIconCorrectAnswerSection(2);
+                singleSelectionPage.steps.clickShowAlternativeAnswersToggle();
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleUnchecked();
+            }
             //singleSelectionPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
             /*cy.log('When the user has attempted the question incorrectly and clicks on \'Check answer\' button, then incorrect icons should only be displayed besides incorrect responses, correct icons should not be displayed besides unattempted correct options, incorrect answer border and a label should not be displayed below the question preview')
             singleSelectionPage.steps.checkAnswer();
@@ -156,6 +191,20 @@ describe('Create item page - Single selection: All or nothing with alternative a
             singleSelectionPage.steps.verifyCorrectIncorrectBorderNotExists();
             //correct answer section
             singleSelectionPage.steps.verifyCorrectOptionIconCorrectAnswerSection(2);
+            // alternative answer section
+            if (alternativeAnswerCheck === 'true') {
+                singleSelectionPage.steps.verifyCorrectAnswersLabelAndPointVisible('(20 points)');
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleExists();
+                singleSelectionPage.steps.disableShowAlternativeAnswersToggle();
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleUnchecked();
+                singleSelectionPage.steps.verifyAlternativeAnswersSectionNotExist();
+                singleSelectionPage.steps.clickShowAlternativeAnswersToggle();
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleChecked();
+                singleSelectionPage.steps.verifyAlternativeAnswersLabelAndPointVisible(1, '(10 points)');
+                singleSelectionPage.steps.verifyAlternateAnswerOptionIconCorrectAnswerSection(1);
+                singleSelectionPage.steps.clickShowAlternativeAnswersToggle();
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleUnchecked();
+            }
             singleSelectionPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
         });
 
@@ -170,6 +219,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();
@@ -193,6 +245,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 alternative accordion and clicks on \'Check answer\' button, then correct icons should only be displayed besides correct responses from the alternative accordion, correct answer border and a label should not be displayed below the question preview')
             singleSelectionPage.steps.checkAnswer();
@@ -217,6 +272,20 @@ describe('Create item page - Single selection: All or nothing with alternative a
             singleSelectionPage.steps.verifyCorrectIncorrectBorderNotExists();
             //correct answer section
             singleSelectionPage.steps.verifyCorrectOptionIconCorrectAnswerSection(2);
+            // alternative answer section
+            if (alternativeAnswerCheck === 'true') {
+                singleSelectionPage.steps.verifyCorrectAnswersLabelAndPointVisible('(20 points)');
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleExists();
+                singleSelectionPage.steps.disableShowAlternativeAnswersToggle();
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleUnchecked();
+                singleSelectionPage.steps.verifyAlternativeAnswersSectionNotExist();
+                singleSelectionPage.steps.clickShowAlternativeAnswersToggle();
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleChecked();
+                singleSelectionPage.steps.verifyAlternativeAnswersLabelAndPointVisible(1, '(10 points)');
+                singleSelectionPage.steps.verifyAlternateAnswerOptionIconCorrectAnswerSection(1);
+                singleSelectionPage.steps.clickShowAlternativeAnswersToggle();
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleUnchecked();
+            }
             singleSelectionPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
             /*cy.log('When the user has attempted the question incorrectly and clicks on \'Check answer\' button, then incorrect icons should be displayed besides incorrect responses, correct icons should not be displayed besides unattempted correct options, incorrect answer border and a label should not be displayed below the question preview')
             singleSelectionPage.steps.checkAnswer();
@@ -255,6 +324,20 @@ describe('Create item page - Single selection: All or nothing with alternative a
             singleSelectionPage.steps.verifyCorrectIncorrectBorderNotExists();
             //correct answer section
             singleSelectionPage.steps.verifyCorrectOptionIconCorrectAnswerSection(1);
+            // alternative answer section
+            if (alternativeAnswerCheck === 'true') {
+                singleSelectionPage.steps.verifyCorrectAnswersLabelAndPointVisible('(20 points)');
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleExists();
+                singleSelectionPage.steps.disableShowAlternativeAnswersToggle();
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleUnchecked();
+                singleSelectionPage.steps.verifyAlternativeAnswersSectionNotExist();
+                singleSelectionPage.steps.clickShowAlternativeAnswersToggle();
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleChecked();
+                singleSelectionPage.steps.verifyAlternativeAnswersLabelAndPointVisible(1, '(20 points)');
+                singleSelectionPage.steps.verifyAlternateAnswerOptionIconCorrectAnswerSection(2);
+                singleSelectionPage.steps.clickShowAlternativeAnswersToggle();
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleUnchecked();
+            }
             singleSelectionPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
         });
 
@@ -269,6 +352,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();
@@ -292,6 +378,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 alternative accordion and clicks on \'Check answer\' button, then correct icons should only be displayed besides correct responses from the alternative accordion, correct answer border and a label should not be displayed below the question preview')
             singleSelectionPage.steps.checkAnswer();
@@ -316,6 +405,20 @@ describe('Create item page - Single selection: All or nothing with alternative a
             singleSelectionPage.steps.verifyCorrectIncorrectBorderNotExists();
             //correct answer section
             singleSelectionPage.steps.verifyCorrectOptionIconCorrectAnswerSection(1);
+            //show alternative answers
+            if (alternativeAnswerCheck === 'true') {
+                singleSelectionPage.steps.verifyCorrectAnswersLabelAndPointVisible('(20 points)');
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleExists();
+                singleSelectionPage.steps.disableShowAlternativeAnswersToggle();
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleUnchecked();
+                singleSelectionPage.steps.verifyAlternativeAnswersSectionNotExist();
+                singleSelectionPage.steps.clickShowAlternativeAnswersToggle();
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleChecked();
+                singleSelectionPage.steps.verifyAlternativeAnswersLabelAndPointVisible(1, '(20 points)');
+                singleSelectionPage.steps.verifyAlternateAnswerOptionIconCorrectAnswerSection(2);
+                singleSelectionPage.steps.clickShowAlternativeAnswersToggle();
+                singleSelectionPage.steps.verifyShowAlternativeAnswersToggleUnchecked();
+            }
             singleSelectionPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
             /*cy.log('When the user has attempted the question incorrectly and clicks on \'Check answer\' button, then incorrect icons should only be displayed besides incorrect responses, correct icons should not be displayed besides unattempted correct options, incorrect answer border and a label should not be displayed below the question preview')
             singleSelectionPage.steps.checkAnswer();

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,145 @@
+/**
+ * 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"]').eq(1), // Alternative answer is typically the second wrapper
+    alternativeAnswerGridWrapper: () => cy.get('[class*="CorrectAnswerGridWrapper"]'),
+    alternativeAnswerSelectionGrid: () => cy.get('.correct-ans-selection-grid'),
+    correctAnswerLabelWrapper: () => cy.get('[class*="CorrectAnswerLabelWrapper"]').eq(0), // Correct answer is typically the first wrapper
+
+    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 {string} points - The expected points for the alternative answer
+         */
+
+        verifyAlternativeAnswersLabelAndPointVisible: (index, points) => {
+            showAlternativeAnswersComponent.alternativeAnswersSection().should('be.visible');
+
+            if (points) {
+                showAlternativeAnswersComponent.alternativeAnswersSection()
+                    .parent()
+                    .find('p')
+                    .invoke('text')
+                    .then((text) => {
+                        expect(text.trim()).to.equal(points);
+                    });
+            }
+        },
+
+        /**
+         * Verifies that the correct answers section is visible
+         * @param {number} points - The expected points for the alternative answer
+         */
+
+        verifyCorrectAnswersLabelAndPointVisible: (points) => {
+            showAlternativeAnswersComponent.correctAnswerLabelWrapper()
+                .should('be.visible');
+
+            if (points) {
+                showAlternativeAnswersComponent.correctAnswerLabelWrapper()
+                    .parent()
+                    .find('p')
+                    .invoke('text')
+                    .then((text) => {
+                        expect(text.trim()).to.equal(points);
+                    });
+            }
+        },
+
+        /**
+         * Verifies that the alternative answers section does not exist
+         */
+        verifyAlternativeAnswersSectionNotExist: () => {
+            showAlternativeAnswersComponent.alternativeAnswersSection().should('not.exist');
+        },
+    },
+};
+
+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 = {