itemengine-cypress-automation 1.0.275-cssUpdates12Dec-bbaeace.0 → 1.0.275

package/cypress/fixtures/equationEditorCategoriesAndSymbols .js

@@ -1478,6 +1478,12 @@ export const equationEditorCategoriesAndSymbols = {
                 ariaLabel: 'TangentT',
                 displayText: 'tan'
             },
+            cot: {
+                title: 'cot',
+                textElement: null,
+                ariaLabel: 'Cot',
+                displayText: 'cot'
+            },
             sec: {
                 title: 'sec',
                 textElement: null,
@@ -1490,12 +1496,6 @@ export const equationEditorCategoriesAndSymbols = {
                 ariaLabel: 'Cosec',
                 displayText: 'cosec'
             },
-            cot: {
-                title: 'cot',
-                textElement: null,
-                ariaLabel: 'Cot',
-                displayText: 'cot'
-            },
             sinInverse: {
                 title: 'sin inverse',
                 textElement: null,
@@ -1514,6 +1514,12 @@ export const equationEditorCategoriesAndSymbols = {
                 ariaLabel: 'TanInverse',
                 displayText: 'tan−1'
             },
+            cotInverse: {
+                title: 'cot inverse',
+                textElement: null,
+                ariaLabel: 'CotInverse',
+                displayText: 'cot−1'
+            },
             secInverse: {
                 title: 'sec inverse',
                 textElement: null,
@@ -1525,12 +1531,6 @@ export const equationEditorCategoriesAndSymbols = {
                 textElement: null,
                 ariaLabel: 'CosecInverse',
                 displayText: 'csc−1'
-            },
-            cotInverse: {
-                title: 'cot inverse',
-                textElement: null,
-                ariaLabel: 'CotInverse',
-                displayText: 'cot−1'
             }
         }
     },
@@ -1754,17 +1754,11 @@ export const equationEditorCategoriesAndSymbols = {
     measurement: {
         displayName: 'Measurement',
         symbols: {
-            gram: {
-                title: 'Gram',
-                textElement: null,
-                ariaLabel: 'Gram',
-                displayText: 'g'
-            },
-            meter: {
-                title: 'Meter',
+            millilitre: {
+                title: 'Millilitre',
                 textElement: null,
-                ariaLabel: 'Meter',
-                displayText: 'm'
+                ariaLabel: 'Millilitre',
+                displayText: 'mL'
             },
             litre: {
                 title: 'Litre',
@@ -1772,41 +1766,23 @@ export const equationEditorCategoriesAndSymbols = {
                 ariaLabel: 'Litre',
                 displayText: 'L'
             },
-            second: {
-                title: 'Second',
-                textElement: null,
-                ariaLabel: 'Second',
-                displayText: 's'
-            },
-            kilogram: {
-                title: 'Kilogram',
-                textElement: null,
-                ariaLabel: 'Kilogram',
-                displayText: 'kg'
-            },
-            milligram: {
-                title: 'Milligram',
-                textElement: null,
-                ariaLabel: 'Milligram',
-                displayText: 'mg'
-            },
-            microgram: {
-                title: 'Microgram',
+            fluidOunce: {
+                title: 'Fluid Ounce',
                 textElement: null,
-                ariaLabel: 'Microgram',
-                displayText: 'µg'
+                ariaLabel: 'FluidOunce',
+                displayText: 'fl oz'
             },
-            kilometer: {
-                title: 'Kilometer',
+            pint: {
+                title: 'Pint',
                 textElement: null,
-                ariaLabel: 'Kilometer',
-                displayText: 'km'
+                ariaLabel: 'Pint',
+                displayText: 'pt'
             },
-            centimeter: {
-                title: 'Centimeter',
+            gallon: {
+                title: 'Gallon',
                 textElement: null,
-                ariaLabel: 'Centimeter',
-                displayText: 'cm'
+                ariaLabel: 'Gallon',
+                displayText: 'gal'
             },
             millimeter: {
                 title: 'Millimeter',
@@ -1814,29 +1790,23 @@ export const equationEditorCategoriesAndSymbols = {
                 ariaLabel: 'Millimeter',
                 displayText: 'mm'
             },
-            millilitre: {
-                title: 'Millilitre',
-                textElement: null,
-                ariaLabel: 'Millilitre',
-                displayText: 'mL'
-            },
-            millisecond: {
-                title: 'Millisecond',
+            centimeter: {
+                title: 'Centimeter',
                 textElement: null,
-                ariaLabel: 'Millisecond',
-                displayText: 'ms'
+                ariaLabel: 'Centimeter',
+                displayText: 'cm'
             },
-            ounce: {
-                title: 'Ounce',
+            meter: {
+                title: 'Meter',
                 textElement: null,
-                ariaLabel: 'Ounce',
-                displayText: 'oz'
+                ariaLabel: 'Meter',
+                displayText: 'm'
             },
-            Pound: {
-                title: 'Pound',
+            kilometer: {
+                title: 'Kilometer',
                 textElement: null,
-                ariaLabel: 'Pound',
-                displayText: 'lb'
+                ariaLabel: 'Kilometer',
+                displayText: 'km'
             },
             inch: {
                 title: 'Inch',
@@ -1856,24 +1826,54 @@ export const equationEditorCategoriesAndSymbols = {
                 ariaLabel: 'Mile',
                 displayText: 'mi'
             },
-            fluidOunce: {
-                title: 'Fluid Ounce',
+            microgram: {
+                title: 'Microgram',
                 textElement: null,
-                ariaLabel: 'FluidOunce',
-                displayText: 'fl oz'
+                ariaLabel: 'Microgram',
+                displayText: 'µg'
             },
-            pint: {
-                title: 'Pint',
+            milligram: {
+                title: 'Milligram',
                 textElement: null,
-                ariaLabel: 'Pint',
-                displayText: 'pt'
+                ariaLabel: 'Milligram',
+                displayText: 'mg'
             },
-            gallon: {
-                title: 'Gallon',
+            gram: {
+                title: 'Gram',
                 textElement: null,
-                ariaLabel: 'Gallon',
-                displayText: 'gal'
-            }
+                ariaLabel: 'Gram',
+                displayText: 'g'
+            },
+            kilogram: {
+                title: 'Kilogram',
+                textElement: null,
+                ariaLabel: 'Kilogram',
+                displayText: 'kg'
+            },
+            ounce: {
+                title: 'Ounce',
+                textElement: null,
+                ariaLabel: 'Ounce',
+                displayText: 'oz'
+            },
+            Pound: {
+                title: 'Pound',
+                textElement: null,
+                ariaLabel: 'Pound',
+                displayText: 'lb'
+            },
+            millisecond: {
+                title: 'Millisecond',
+                textElement: null,
+                ariaLabel: 'Millisecond',
+                displayText: 'ms'
+            },
+            second: {
+                title: 'Second',
+                textElement: null,
+                ariaLabel: 'Second',
+                displayText: 's'
+            }  
         }
     },
 
@@ -2157,7 +2157,7 @@ export const equationEditorCategoriesAndSymbols = {
                 displayText: '∝'
             },
             bullet: {
-                title: 'Dot Multiplier New',
+                title: 'Dot Multiplier',
                 textElement: null,
                 ariaLabel: 'DotMultiplier',
                 displayText: '•'

package/cypress/pages/audioPlayerPage.js

@@ -71,9 +71,9 @@ const selectors = {
     deleteTranscriptButton: () => cy.get('[aria-label*="Delete"]'),
 
     //Preview tab
-    volumeControlButton: () => cy.get('.audio-resource-preview-wrapper-without-print .audio-player-icon'),
+    volumeControlButton: () => cy.get('.audio-player-volume-wrapper .audio-player-icon'),
     playbackPlayButton: () => cy.get('.audio-resource-preview-wrapper-without-print button[aria-label="Play"]'),
-    playbackPauseButton: () => cy.get('.audio-resource-preview-wrapper-without-print button[aria-label="Pause"]'),
+    playbackPauseButton: () => cy.get('.audio-player-play-pause-btn button[aria-label="Pause"]'),
     backwardButton: () => cy.get('.forward-backward-buttons-wrapper [aria-label*="Backward"]'),
     forwardButton: () => cy.get('.forward-backward-buttons-wrapper [aria-label*="Forward"]'),
     playbackTime: () => cy.get('.audio-player-current-time'),

package/cypress/pages/components/ariaLabelSectionComponent.js

@@ -3,8 +3,8 @@ const css = Cypress.env('css');
 
 const selectors = {
     ariaLabelInputField: () => cy.get('[aria-label*="Enter ARIA label"]'),
-    inputFieldNumeration: () => cy.get('.MuiInputAdornment-root'),
-    ariaLabelSectionLabel: () => cy.get('[class*="AriaLabel"][class*="__LabelWrapper"]'),
+    inputFieldNumeration: () => cy.get('.MuiInputAdornment-root,[class*="ClozeMathstyle__Numeration"]'),
+    ariaLabelSectionLabel: () => cy.get('[class*="AriaLabel"][class*="__LabelWrapper"],[class*="ClozeMathstyle__AriaLabelText"]'),
 }
 
 const steps = {

package/cypress/pages/components/connectorStyleStyleAndLayoutCustomizationComponent.js

@@ -5,7 +5,7 @@ const selectors = {
     diamondEndPointShapeButton: () => cy.get('button[aria-label="diamond connector end point shape"]'),
     noneEndPointShapeButton: () => cy.get('button[aria-label="none connector end point shape"]'),
     connectorEndPointShapeLabel: () => cy.get('[class*="__SubSectionLabel"]').eq(2),
-    connectorEndPointShapeOptions: (shapeOption) => cy.get(`.dropzone-connector-option button[aria-label*="${shapeOption}"]`),
+    connectorEndPointShapeOptions: (shapeOption) => cy.get(`button[aria-label*="${shapeOption}"]`),
     connectorLineTypeOptionsWrapper: () => cy.get('.dropzone-connector-option button'),
 }
 

package/cypress/pages/components/customSettingsSeparatorsComponent.ts

@@ -3,7 +3,7 @@ const selectors = {
     thousandSeparatorLabel: () => cy.get('.single-select-toggle-group-title').eq(1),
     decimalSeparatorToggleOptions: (ariaLabel: string | null = null) => {
         if (ariaLabel) {
-            return cy.get(`.single-select-toggle-group button[aria-label*="${ariaLabel}"]`);
+            return cy.get(`.single-select-toggle-group button[aria-label*="Decimal separator ${ariaLabel}"]`);
         } else {
             return cy.get('.single-select-toggle-group button');
         }
@@ -88,6 +88,24 @@ const steps = {
             .should('have.text', 'Tolerance');
         customSettingsSeparatorComponent.toleranceInputField()
             .should('be.visible');
+    },
+
+    /**
+    * Verifies the selected state of decimal separator toggle options.
+    * @param {string} option - The aria-label of the option to be verified.
+    */
+    verifySelectedStateOfDecimalSeparator: (option: string) => {
+        customSettingsSeparatorComponent.decimalSeparatorToggleOptions(option)
+            .should('have.class', 'single-select-toggle-button-selected');
+    },
+
+    /**
+    * Verifies the selected state of thousands separator toggle options.
+    * @param {string} option - The aria-label of the option to be verified.
+    */
+    verifySelectedStateOfThousandsSeparator: (option: string) => {
+        customSettingsSeparatorComponent.thousandSeparatorToggleOptions(option)
+            .should('have.class', 'single-select-toggle-button-selected');
     }
 }
 

package/cypress/pages/components/equationEditorSectionCommonComponent.js

@@ -345,7 +345,7 @@ const tests = {
                 equationEditorSectionCommonComponent.steps.verifyResponseFieldEquationText(0, 'x+5×0');
             }
             else {
-                equationEditorSectionCommonComponent.steps.verifyResponseFieldEquationTextNew(0, 'x+5×0​');
+                equationEditorSectionCommonComponent.steps.verifyResponseFieldEquationTextNew(0, 'x+5×0');
             }
         });
     },

package/cypress/pages/components/essayResponseCommonComponents.js

@@ -76,6 +76,7 @@ const selectors = {
     responseFieldWordCount: () => cy.get('[class*="InputLimitLabelWrapper"]'),
     responseFieldEquation: () => cy.get('.cke_widget_element'),
     responseFieldText: () => cy.get('[class*="EssayResponseGradingViewstyle__GradingViewWrapper"] .question-text-wrapper'),
+    responseFieldTextNew: () => cy.get('[title*="Enter your response to the question here."]'),
     gradingViewResponseField: () => cy.get('[class*="EssayResponseGradingViewstyle__GradingViewWrapper"] [data-testid*="question-instruction-element"]'),
 
     //Additional settings, These are old selectors. Need to update them along with additional settings file revamp
@@ -610,7 +611,7 @@ const steps = {
     * @param {string} color - The color option number.
     */
     verifyResponseFieldTextColor: (color) => {
-        utilities.verifyCSS(essayResponseCommonComponents.responseFieldText().find('span'), {
+        utilities.verifyCSS(essayResponseCommonComponents.responseFieldTextNew().find('span'), {
             'color': color
         });
     },
@@ -620,7 +621,7 @@ const steps = {
     * @param {number} size - The font size.
     */
     verifyResponseFieldTextFontSize: (size) => {
-        utilities.verifyCSS(essayResponseCommonComponents.responseFieldText().find('span'), {
+        utilities.verifyCSS(essayResponseCommonComponents.responseFieldTextNew().find('span'), {
             'font-size': `${size}px`
         });
     },
@@ -630,7 +631,7 @@ const steps = {
     * @param {number} size - The font size.
     */
     verifyResponseFieldTextFontSizeNew: (size) => {
-        utilities.verifyCSS(essayResponseCommonComponents.responseFieldText(), {
+        utilities.verifyCSS(essayResponseCommonComponents.responseFieldTextNew(), {
             'font-size': `${size}px`
         });
     },
@@ -641,7 +642,7 @@ const steps = {
     * @param {string} text -response field text
     */
     verifyResponseFieldTextIsHighlighted: (color, text) => {
-        utilities.verifyCSS(essayResponseCommonComponents.responseFieldText().find('span').contains(text), {
+        utilities.verifyCSS(essayResponseCommonComponents.responseFieldTextNew().find('span').contains(text), {
             'background-color': color
         });
     },
@@ -701,7 +702,7 @@ const steps = {
     * @param {string} color - The color option number.
     */
     verifyResponseFieldTextNewColor: (color) => {
-        utilities.verifyCSS(essayResponseCommonComponents.responseFieldText(), {
+        utilities.verifyCSS(essayResponseCommonComponents.responseFieldTextNew().find('p'), {
             'color': color
         });
     },

package/cypress/pages/components/imageCanvasComponent.js

@@ -144,13 +144,13 @@ const steps = {
     verifyCanvasImageTopLeftAligned: () => {
         imageCanvasComponent.canvasImage()
             .should('have.css', 'top', '0px')
-            .and('have.css', 'left', '1px');
+            .and('have.css', 'left', '0px');
     },
 
     verifyCanvasImageTopLeftAlignedInPreviewTab: () => {
         imageCanvasComponent.canvasImageInPreviewTab()
             .should('have.css', 'top', '0px')
-            .and('have.css', 'left', '1px');
+            .and('have.css', 'left', '0px');
     },
 
     verifyCanvasImageTopRightAligned: () => {

package/cypress/pages/components/layoutSectionComponent.js

@@ -501,7 +501,9 @@ const steps = {
         }
         else if (visibility === 'hidden') {
             layoutSectionComponent.numberLineAxisNumberLineSection()
-                .should('not.have.attr', 'marker-start');
+                .should('exist')
+                .invoke('attr', 'marker-start')
+                .should('eq', 'null');
         }
         else {
             throw new Error('invalid state string');
@@ -520,7 +522,9 @@ const steps = {
         }
         else if (visibility === 'hidden') {
             layoutSectionComponent.numberLineAxisNumberLineSection()
-                .should('not.have.attr', 'marker-end');
+                .should('exist')
+                .invoke('attr', 'marker-end')
+                .should('eq', 'null');
         }
         else {
             throw new Error('invalid state string');

package/cypress/pages/components/numberLineCommonComponent.js

@@ -95,7 +95,9 @@ const steps = {
         }
         else if (visibility === 'hidden') {
             numberLineCommonComponent.numberLineAxisSpecifyCorrectAnswer()
-                .should('not.have.attr', 'marker-start');
+                .should('exist')
+                .invoke('attr', 'marker-start')
+                .should('eq', 'null');
         }
         else {
             throw new Error('invalid state string');
@@ -114,7 +116,9 @@ const steps = {
         }
         else if (visibility === 'hidden') {
             numberLineCommonComponent.numberLineAxisSpecifyCorrectAnswer()
-                .should('not.have.attr', 'marker-end');
+                .should('exist')
+                .invoke('attr', 'marker-end')
+                .should('eq', 'null');
         }
         else {
             throw new Error('invalid state string');
@@ -201,7 +205,9 @@ const steps = {
         }
         else if (visibility === 'hidden') {
             numberLineCommonComponent.numberLineAxisPreviewTab()
-                .should('not.have.attr', 'marker-start');
+                .should('exist')
+                .invoke('attr', 'marker-end')
+                .should('eq', 'null');
         }
         else {
             throw new Error('invalid state string');
@@ -220,7 +226,9 @@ const steps = {
         }
         else if (visibility === 'hidden') {
             numberLineCommonComponent.numberLineAxisPreviewTab()
-                .should('not.have.attr', 'marker-end');
+                .should('exist')
+                .invoke('attr', 'marker-end')
+                .should('eq', 'null');
         }
         else {
             throw new Error('invalid state string');
@@ -442,7 +450,6 @@ const tests = {
             numberLineCommonComponent.steps.checkCheckbox('Display minor nodes');
             numberLineCommonComponent.steps.enterTextInAnnotateEveryInputField(1);
         });
-        
     },
 
     /**

package/cypress/pages/components/playbackControlsBaseComponent.js

@@ -38,6 +38,11 @@ const steps = {
             .realHover({ position: 'top' });
     },
 
+    hoverOnMuteUnmuteButton: () => {
+        playbackControlsBaseComponent.volumeControlButton()
+            .trigger('mouseover')
+    },
+
     hoverOnVolumeControlSlider: () => {
         playbackControlsBaseComponent.volumeControlSlider()
             .trigger('mouseover')

package/cypress/pages/components/scoringSectionBaseEditTab.js

@@ -65,9 +65,10 @@ const steps = {
     },
 
     expandScoringTypeDropdown: () => {
+        utilities.scrollIntoView(scoringSectionBaseEditTab.scoringTypeDropdown());
         scoringSectionBaseEditTab.scoringTypeDropdown()
             .click();
-        utilities.verifyElementVisibilityState(commonComponents.dropdownList(), 'visible');
+        utilities.verifyElementVisibilityState(commonComponents.dropdownList(), 'exist');
     },
 
     /**
@@ -194,8 +195,7 @@ const tests = {
         it(`Clicking on Scoring Type dropdown should open a list of scoring types - ${scoringTypeArray}`, () => {
             scoringSectionBaseEditTab.scoringTypeDropdown()
                 .click();
-            cy.wait(1000);
-            utilities.verifyElementVisibilityState(commonComponents.dropdownList(), 'visible');
+            utilities.verifyElementVisibilityState(commonComponents.dropdownList(), 'exist');
             scoringTypeArray.forEach((option, count) => {
                 utilities.verifyInnerText(utilities.getNthElement(scoringSectionBaseEditTab.scoringTypeDropdownListOptions(), count), option);
             });

package/cypress/pages/dragAndDropIntoCategoriesPage.js

@@ -1970,7 +1970,7 @@ const steps = {
                 break;
             case 'none':
                 dragAndDropIntoCategoriesPage.dragHandle()
-                    .should('not.exist');
+                    .should('not.be.visible');
                 break;
         }
     },

package/cypress/pages/drawingResponsePage.js

@@ -214,8 +214,9 @@ const selectors = {
         }
     },
     studentViewUpperCanvas: () => cy.get('.upper-canvas').eq(0),
+    gradingViewPlayFeatureButton: () => cy.get('[class*="DrawingResponsePreviewstyles__PlayBtnWrapper"] button'),
+    strokeFontColorButton: () => cy.get('button[aria-label=" StrokeFontColor"]'),
     studentViewLowerCanvas: () => cy.get('.lower-canvas'),
-    gradingViewPlayFeatureButton: () => cy.get('[class*="DrawingResponsePreviewstyles__PlayBtnWrapper"] button')
 }
 
 const steps = {
@@ -272,6 +273,17 @@ const steps = {
         });
     },
 
+    /**
+     * @description deSelect toolbar options in edit tab
+     * @param {string[]} arrayOfToolbarOptions Array of option tiles to be selected
+     */
+    deselectOptionsTiles: (arrayOfToolbarOptions) => {
+        arrayOfToolbarOptions.forEach((arialabel) => {
+            drawingResponsePage.additionalOptionsTiles(arialabel)
+                .click()
+        });
+    },
+
     /**
       * @param {string} title title of secondary popup
       * @description this function verifies title of the secondary option popup
@@ -783,6 +795,11 @@ const steps = {
         utilities.hoverAwayFromElement(drawingResponsePage.colorPickerBlock().last());
     },
 
+    hoverOutFromStrokeColorButton: () => {
+        utilities.hoverOverElement(drawingResponsePage.strokeFontColorButton());
+        utilities.hoverAwayFromElement(drawingResponsePage.strokeFontColorButton());
+    },
+
     /**
      * @param {number} opacityValue value of opacity on the opacity slider
      * @description this function is used to verify the opacity value on the opacity slider

package/cypress/pages/fillInTheGapsDragAndDropPage.js

@@ -46,6 +46,7 @@ const selectors = {
     partialEqualWeightsPointsPerResponseScore: () => cy.get('.alternate-points-points-per-value-span'),
     pointsLabel: () => cy.get('.cloze-with-dropdown-partial-points-per-response-label'),
     dragHandle: () => cy.get('[class*="drag"]'),
+    optionDragHandleNew: () => cy.get('.options-flex-wrapper [class*="drag"] svg'),
     //Preview tab
     questionBorderPreviewTab: () => cy.get('[class*="ClozeWithDragAndDropstyles__WrapperDiv"]'),
     optionPreviewTab: () => cy.get('.draggable-selected-item'),
@@ -928,7 +929,7 @@ const steps = {
                                     .should('have.class', 'drag-arrows-icon');
                                 break;
                             case 'None':
-                                utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.dragHandle(), 'notExist');
+                                utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.optionDragHandleNew(), 'notExist');
                                 break;
                             default:
                                 throw new Error('Incorrect drag icon');
@@ -1009,7 +1010,7 @@ const tests = {
      * @param {{'Correct' | 'Alternative'}} accordionName - The name of the accordion to be used in the validation.
      * @example - verifySpecifyCorrectAnswerAccordionContentsAndFunctionality('Correct');
      */
-    zverifySpecifyCorrectAnswerAccordionContentsAndFunctionality: (accordionName) => {
+    verifySpecifyCorrectAnswerAccordionContentsAndFunctionality: (accordionName) => {
         it(`The user should be able to drop option in the dropzone in the ${accordionName} accordion`, () => {
             fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Petals': 0 });
         });

package/cypress/pages/fillInTheGapsOverImageDragAndDropPage.js

@@ -94,6 +94,7 @@ const selectors = {
     correctAnswerSectionWithoutEnumerationWrapper: () => cy.get('[class*="Canvasstyle__DragAndDropCanvas"] .drag-and-drop-canvas'),
     dropzoneNumerationBox: () => cy.get('.answer-numeration-number-box'),
     correctAnswerResponseWrapperWithoutEnumeration: () => cy.get('.dnd-correct-answer-wrapper [class*="ResponseDropZonestyles__ResponseWrapper"]'),
+    responseAreaPreviewTab: () => cy.get('[class*="ResponseDropZonestyles__ResponseWrapper"] .cell'),
 }
 
 const steps = {
@@ -335,7 +336,7 @@ const steps = {
         fillInTheGapsOverImageDragAndDropPage.optionContainerOptionsPreviewTab()
             .find('[role="math"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
+        //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
         utilities.verifyElementVisibilityState(utilities.getNthElement(draggableOptionContainer.draggableOptionDragIcon(), optionIndex), 'exist');
     },
 
@@ -360,7 +361,7 @@ const steps = {
             .eq(optionIndex)
             .find('[role="math"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
+        //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
     },
 
     /**
@@ -703,13 +704,13 @@ const steps = {
     verifyOptionInDropzoneNotWrapped: () => {
         fillInTheGapsOverImageDragAndDropPage.dropzoneOptionSpecifyCorrectAnswerSection()
             .eq(0)
-            .should('have.css', 'height', '24px');
+            .should('have.css', 'height', '22px');
     },
 
     verifyOptionInDropzoneWrapped: () => {
         fillInTheGapsOverImageDragAndDropPage.dropzoneOptionSpecifyCorrectAnswerSection()
             .eq(0)
-            .should('have.css', 'height', '72px');
+            .should('have.css', 'height', '66px');
     },
 
     expandOptionInDropzone: () => {
@@ -993,13 +994,13 @@ const steps = {
                         break;
                     case 'Left':
                         fillInTheGapsOverImageDragAndDropPage.optionPanelWrapper()
-                            .should('have.css', 'width', '142.84375px')
+                            .should('have.css', 'width', '143.84375px')
                             .and('have.css', 'padding-right', '24px')
                             .and('have.css', 'padding-left', '8px')
                         break;
                     case 'Right':
                         fillInTheGapsOverImageDragAndDropPage.optionPanelWrapper()
-                            .should('have.css', 'width', '142.84375px')
+                            .should('have.css', 'width', '143.84375px')
                             .and('have.css', 'padding-right', '8px')
                             .and('have.css', 'padding-left', '24px')
                         break;
@@ -1180,6 +1181,18 @@ const steps = {
                 });
             });
     },
+
+    /**
+     * Verifies the border style of a response area element.
+     * @param {number} responseAreaIndex - The index of the response area to verify.
+     * @param {string} borderStyle - The expected border style value.
+     */
+    verifyResponseAreaOverImageBorderStyle: (responseAreaIndex, borderStyle) => {
+        const styleName = borderStyle.toLowerCase();
+        utilities.verifyCSS(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.responseAreaPreviewTab(), responseAreaIndex), {
+            'border-style': styleName
+        });
+    },
 }
 
 const tests = {