itemengine-cypress-automation 1.0.573-IEI-7080-f70315e.0 → 1.0.573

package/cypress/pages/components/additionalSettingsPanel.js

@@ -39,6 +39,15 @@ const steps = {
             .should('have.attr', 'aria-expanded', 'true');
     },
 
+    collapsedAdditionalSettings: () => {
+        additionalSettingsPanel.additionalSettingsPanel()
+            .click();
+        cy.log('Need this wait in order for the font size dropdown to render properly');
+        cy.wait(2000);
+        additionalSettingsPanel.additionalSettingsPanel()
+            .should('have.attr', 'aria-expanded', 'false');
+    },
+
     //V3 - Need to be updated in all files
     selectFontSizeOptionFromFontSizeDropdown: (dropdownOption) => {
         additionalSettingsPanel.steps.expandFontSizeDropdown();

package/cypress/pages/components/backgroundImageUploadComponent.js

@@ -147,7 +147,7 @@ const tests = {
                 .trigger('mouseover');
             utilities.verifyCSS(commonComponents.tooltipText(), {
                 'color': css.color.whiteText,
-                'font-size': css.fontSize.normal,
+                'font-size': css.fontSize.small,
                 'font-weight': css.fontWeight.regular,
                 'background-color': css.color.tooltipBg
             });

package/cypress/pages/components/colorPopupComponent.js

@@ -23,7 +23,7 @@ const selectors = {
     opacityLabel: () => cy.get('[class*="ColorPickerstyles__SliderWrapper"]'),
     //Need to update when feedback scale is available
     opacitySlider: () => cy.get('[class*="ColorPickerstyles__SliderWrapper"] .color-slider'),
-    opacityInputField: () => cy.get('.opacity-wrapper [aria-label="Opacity"]'),
+    opacityInputField: () => cy.get('.opacity-wrapper [aria-label="Opacity"],.opacity-wrapper input[type*="Text"]'),
     recommendedColorsLabel: () => cy.get('.color-picker-footer-wrapper'),
     recommendedColorBlock: () => cy.get('[class*="ColorPickerstyles__ColorBlockWrapper"] .color-picker-block'),
     recommendedColorBlockSelectedIcon: () => cy.get('.selected-button-icon'),

package/cypress/pages/components/figCommonStyleAndLayoutComponent.js

@@ -260,15 +260,9 @@ const tests = {
                 'font-weight': css.fontWeight.regular,
                 'border': `1px solid ${css.color.figDefaultComponentBorder}`
             });
-            let selectedToggleButton;
-            if (selectedStyle == 'Solid') {
-                selectedToggleButton = figCommonStyleAndLayoutComponent.solidBorderStyleToggleButton();
-            } else {
-                selectedToggleButton = figCommonStyleAndLayoutComponent.dashedBorderStyleToggleButton();
-            }
-            utilities.verifyCSS(selectedToggleButton, {
-                'color': css.color.defaultBackground,
-                'background-color': css.color.secondaryBtnBg,
+            utilities.verifyCSS(figCommonStyleAndLayoutComponent.solidBorderStyleToggleButton(), {
+                'color': css.color.primaryBtn,
+                'background-color': css.color.primaryBtn,
                 'font-size': css.fontSize.default,
                 'font-weight': css.fontWeight.regular,
                 'border': `2px solid ${css.color.secondaryBtnActive}`
@@ -304,7 +298,7 @@ const tests = {
                 'background-color': css.color.secondaryBtnBg,
                 'font-size': css.fontSize.default,
                 'font-weight': css.fontWeight.regular,
-                'border': `2px solid ${css.color.secondaryBtnBorder}`
+                'border': `2px solid ${css.color.figDefaultComponentBorder}`
             });
             utilities.hoverAwayFromElement();
         });

package/cypress/pages/components/fillInTheGapsTextCommonComponent.js

@@ -191,7 +191,7 @@ const steps = {
      *
      * @param {Object[]} correctAnswerArray - An array of objects representing the expected correct answers and their corresponding points.
      * @param {string[][]} correctAnswerArray[].correctAnswers - A nested array of correct answer text values. 
-     * Each inner array represents a group of alternate correct answers for a particular text cpntainer.
+     * Each inner array represents a group of alternate correct answers for a particular text container.
      * @param {string[]} correctAnswerArray[].points - An array of point label strings associated with each correct answer group.
      *
      */
@@ -335,7 +335,7 @@ const steps = {
      */
     verifyMaximumCharacterLimitInPreviewTab: (responseIndex, maxlen) => {
         utilities.getNthElement(fillInTheGapsTextCommonComponent.answerInputFieldPreviewTab(), responseIndex)
-            .should('have.attr', 'maxlength', maxlen);
+            .should('have.attr', 'maxLength', maxlen);
     },
 
     /**
@@ -933,6 +933,19 @@ const steps = {
         });
     },
 
+    /**
+     * Verifies the height and width of the answer input field at the specified index.
+     * @param {number} responseAreaIndex - The index of the response area to verify.
+     * @param {string} Height - The expected height value in CSS format.
+     * @param {string} Width - The expected width value in CSS format.
+     */
+    verifyAnswerInputFieldHeightAndWidthInAllViews: (responseAreaIndex, Height, Width) => {
+        utilities.verifyCSS(utilities.getNthElement(fillInTheGapsTextCommonComponent.answerInputFieldPreviewTab().parent('.response-input-field'), responseAreaIndex), {
+            'height': Height,
+            'width': Width,
+        });
+    },
+
     /**
      * Verifies the border color of the answer input field at the specified index.
      * @param {number} responseAreaIndex - The index of the response area to verify.

package/cypress/pages/components/gradingViewEnumerationComponent.js

@@ -20,6 +20,11 @@ const selectors = {
 }
 
 const steps = {
+    verifyWithoutEnumerationRadioButtonCheckedState: () => {
+        gradingViewEnumerationComponent.withoutEnumerationRadioButton()
+            .should('be.checked');
+    },
+
     verifyWithEnumerationRadioButtonCheckedState: () => {
         gradingViewEnumerationComponent.withEnumerationRadioButton()
             .should('be.checked');

package/cypress/pages/components/imageCanvasComponent.js

@@ -653,8 +653,6 @@ const steps = {
     },
 
     verifyResponseAreaConnectorEndPointShapePreviewTab: (endPointShape) => {
-        commonComponents.previewTabQuestionWrapper()
-            .within(() => {
                 imageCanvasComponent.responseAreaPointer()
                     .each($element => {
                         switch (endPointShape) {
@@ -680,7 +678,6 @@ const steps = {
                                 throw new Error('Invalid end point shape')
                         }
                     });
-            });
     },
 
     /**

package/cypress/pages/components/placeholderTextSectionComponent.js

@@ -53,6 +53,11 @@ const steps = {
             .should('be.checked');
     },
 
+    verifyCustomizePlaceholderTextCheckboxChecked: () => {
+        placeholderTextSectionComponent.customizePlaceholderTextCheckbox()
+            .should('be.checked');
+    },
+
     
     verifyIndividualPlaceholderTextInputFields: (inputFieldIndex) => {
         placeholderTextSectionComponent.individualPlaceholderTextInputField()
@@ -78,6 +83,11 @@ const tests = {
             placeholderTextSectionComponent.steps.verifyCustomizePlaceholderTextCheckboxUnchecked();
         });
 
+        it('Placeholder text input field should accept text,special characters and numeric values', () => {
+            placeholderTextSectionComponent.steps.addInputToPlaceholderTextInputField('Test 123 !@#');
+            placeholderTextSectionComponent.steps.verifyPlaceholderTextInputFieldValue('Test 123 !@#');
+        });
+
         it('CSS of placeholder text section', { tags: 'css' }, () => {
             utilities.verifyCSS(placeholderTextSectionComponent.placeholderTextSectionLabel(), {
                 'color': css.color.labels,

package/cypress/pages/components/showAlternativeAnswersComponent.js

@@ -10,22 +10,21 @@ const showAlternativeAnswersComponent = {
     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")'),
+    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.showAlternativeAnswersToggleWrapper().should('be.visible');
             showAlternativeAnswersComponent.showAlternativeAnswersToggleLabel()
-                .should('contain.text', 'Show alternative answers');
+                .should('have.text', 'Show alternative answers');
         },
 
         /**
@@ -76,10 +75,10 @@ const showAlternativeAnswersComponent = {
         enableShowAlternativeAnswersToggle: () => {
             showAlternativeAnswersComponent.showAlternativeAnswersToggleInput()
                 .then(($input) => {
-                    if (!$input.prop('checked')) {
-                        showAlternativeAnswersComponent.steps.clickShowAlternativeAnswersToggle();
-                    }
-                });
+                if (!$input.prop('checked')) {
+                    showAlternativeAnswersComponent.steps.clickShowAlternativeAnswersToggle();
+                }
+            });
         },
 
         /**
@@ -88,81 +87,58 @@ const showAlternativeAnswersComponent = {
         disableShowAlternativeAnswersToggle: () => {
             showAlternativeAnswersComponent.showAlternativeAnswersToggleInput()
                 .then(($input) => {
-                    if ($input.prop('checked')) {
-                        showAlternativeAnswersComponent.steps.clickShowAlternativeAnswersToggle();
-                    }
-                });
+                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
+         * @param {string} points - The expected points for the alternative answer
          */
-        verifyAlternativeAnswersSectionVisible: (index, points) => {
-            cy.get('[class*="CorrectAnswerLabelWrapper"]')
-                .contains(`Alternative answer ${index}`)
-                .should('be.visible');
-            
+
+        verifyAlternativeAnswersLabelAndPointVisible: (index, points) => {
+            showAlternativeAnswersComponent.alternativeAnswersSection().should('be.visible');
+
             if (points) {
-                cy.get('[class*="CorrectAnswerLabelWrapper"]')
-                    .contains(`Alternative answer ${index}`)
+                showAlternativeAnswersComponent.alternativeAnswersSection()
                     .parent()
                     .find('p')
-                    .should('contain.text', `(${points} points)`);
+                    .invoke('text')
+                    .then((text) => {
+                        expect(text.trim()).to.equal(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")
+         * Verifies that the correct answers section is visible
          * @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()
+
+        verifyCorrectAnswersLabelAndPointVisible: (points) => {
+            showAlternativeAnswersComponent.correctAnswerLabelWrapper()
                 .should('be.visible');
+
+            if (points) {
+                showAlternativeAnswersComponent.correctAnswerLabelWrapper()
+                    .parent()
+                    .find('p')
+                    .invoke('text')
+                    .then((text) => {
+                        expect(text.trim()).to.equal(points);
+                    });
+            }
         },
 
         /**
-         * 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
+         * Verifies that the alternative answers section does not exist
          */
-        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();
-        }
+        verifyAlternativeAnswersSectionNotExist: () => {
+            showAlternativeAnswersComponent.alternativeAnswersSection().should('not.exist');
+        },
     },
 };
 

package/cypress/pages/fillInTheGapsOverImageTextPage.js

@@ -1,5 +1,5 @@
 import utilities from "../support/helpers/utilities";
-import { questionInstructionsComponent, scoringSectionBaseEditTab, createQuestionBasePage, commonComponents, autoScoredScoringPreviewTab, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, backgroundImageUploadComponent, optionsWrapperComponent, imageCanvasComponent, correctIncorrectAnswerLabelComponent, autoScoredStudentViewSettings, acceptedStudentInputComponent, customizeSpecialCharacterComponent, fillInTheGapsTextCommonComponent, additionalSettingsPanel, gradingViewEnumerationComponent, additionalSettingsAccessibilitySectionComponent, ariaLabelSectionComponent, placeholderTextSectionComponent, styleAndLayoutCustomizationAccordionComponent, figCommonStyleAndLayoutComponent, connectorStyleStyleAndLayoutCustomizationComponent } from "./components";
+import { questionInstructionsComponent, scoringSectionBaseEditTab, createQuestionBasePage, commonComponents, autoScoredScoringPreviewTab, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, backgroundImageUploadComponent, optionsWrapperComponent, imageCanvasComponent, correctIncorrectAnswerLabelComponent, autoScoredStudentViewSettings, acceptedStudentInputComponent, customizeSpecialCharacterComponent, fillInTheGapsTextCommonComponent, additionalSettingsPanel, gradingViewEnumerationComponent, additionalSettingsAccessibilitySectionComponent, ariaLabelSectionComponent, placeholderTextSectionComponent, styleAndLayoutCustomizationAccordionComponent, figCommonStyleAndLayoutComponent, connectorStyleStyleAndLayoutCustomizationComponent, printPreviewComponent } from "./components";
 import { createItemPage } from "./createItemPage";
 import { dialogBoxBase } from "./dialogBoxBase";
 const css = Cypress.env('css');
@@ -25,6 +25,7 @@ const selectors = {
     ...figCommonStyleAndLayoutComponent,
     ...connectorStyleStyleAndLayoutCustomizationComponent,
     ...dialogBoxBase,
+    ...printPreviewComponent,
     //TODO: Update below selectors after https://redmine.zeuslearning.com/issues/557945 is resolved
 
     responseContainerInPreviewTab: () => cy.get('[class*="AddTextResponseOnImagestyles__DraggableInput"]'),
@@ -72,6 +73,7 @@ const steps = {
     ...figCommonStyleAndLayoutComponent.steps,
     ...connectorStyleStyleAndLayoutCustomizationComponent.steps,
     ...createItemPage.steps,
+    ...printPreviewComponent.steps,
     /**
      * Verify that the incorrect option icon is displayed for a specific answer input field.
      * @param {number} inputFieldIndex - The index of the answer input field to verify.
@@ -272,6 +274,8 @@ const steps = {
     * @param {string} height - The height to set for the text container.
     */
     setTextContainerHeight: (height) => {
+        fillInTheGapsOverImageTextPage.textContainerHeightInputField()
+            .clear()
         fillInTheGapsOverImageTextPage.textContainerHeightInputField()
             .type(height)
         cy.wait(1000)
@@ -285,6 +289,8 @@ const steps = {
      * @param {string} width - The width to set for the text container.
      */
     setTextContainerWidth: (width) => {
+        fillInTheGapsOverImageTextPage.textContainerWidthInputField()
+            .clear()
         fillInTheGapsOverImageTextPage.textContainerWidthInputField()
             .type(width)
         cy.wait(1000)
@@ -293,6 +299,19 @@ const steps = {
             .blur();
     },
 
+    /**
+     * Verifies the values in the text container width and height input fields.
+     * @param {string} width - The width of the text container.
+     * @param {string} height - The height of the text container.
+     */
+    verifyValueInTextContainerWidthAndHeightInputField: (height, width) => {
+        fillInTheGapsOverImageTextPage.textContainerWidthInputField()
+            .should('have.value', width);
+        fillInTheGapsOverImageTextPage.textContainerHeightInputField()
+            .should('have.value', height);
+    },
+
+
     verifySetHeightAndWidthForAllTextContainersCheckboxUncheckedState: () => {
         fillInTheGapsOverImageTextPage.setHeightAndWidthForAllTextContainersCheckbox()
             .should('not.be.checked');
@@ -371,6 +390,7 @@ const tests = {
     ...placeholderTextSectionComponent.tests,
     ...styleAndLayoutCustomizationAccordionComponent.tests,
     ...figCommonStyleAndLayoutComponent.tests,
+    ...printPreviewComponent.tests,
 }
 
 export const fillInTheGapsOverImageTextPage = {

package/cypress/pages/imageHighlightPage.js

@@ -1,6 +1,7 @@
 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;
@@ -18,6 +19,7 @@ const selectors = {
     ...imageActionsComponent,
     ...additionalSettingsPanel,
     ...gradingViewEnumerationComponent,
+    ...itemPreviewPage,
 
     //Image  selection style section.
     imageSelectionStyleLabel: () => cy.get('.options-label'),
@@ -110,6 +112,12 @@ 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 = {
@@ -312,7 +320,7 @@ const steps = {
      * @description this function verifies height of canvas
      */
     verifyCanvasHeight: (height) => {
-        const tolerance = 2
+        const tolerance = 10
         imageHighlightPage.specifyPossibleOptionsImageCanvas()
             .should('have.css', 'height')
             .then(($cssHeight) => {
@@ -659,20 +667,20 @@ const steps = {
 
     verifyCanvasImageTopLeftAlignedInPreviewTab: () => {
         imageHighlightPage.imagePreviewTab()
-            .should('have.css', 'top', '0px')
-            .and('have.css', 'left', '0px');
+            .should('have.attr', 'x', '0')
+            .and('have.attr', 'y', '0');
     },
 
     verifyCanvasImageCenterAlignedInPreviewTab: () => {
         imageHighlightPage.imagePreviewTab()
-            .should('not.have.css', 'top', '0px')
-            .and('not.have.css', 'left', '0px');
+            .should('have.attr', 'x', '100')
+            .and('have.attr', 'y', '100');
     },
 
     verifyCanvasImageTopRightAlignedInPreviewTab: () => {
         imageHighlightPage.imagePreviewTab()
-            .should('have.css', 'top', '0px')
-            .and('not.have.css', 'left', '0px');
+            .should('have.attr', 'x', '100')
+            .and('not.have.attr', 'y', '200');
     },
 
     /**
@@ -1144,6 +1152,20 @@ 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.
@@ -1705,6 +1727,161 @@ 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,6 +2,7 @@ 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 = {