itemengine-cypress-automation 1.0.573-IEI-7080-f70315e.0 → 1.0.573-IEI-7065-Improve-test-coverage-for-essay-response-c25d1ee.0

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/equationEditorSectionCommonComponent.js

@@ -1,6 +1,7 @@
 import utilities from "../../support/helpers/utilities";
 import { equationEditorCategoriesAndSymbols } from "../../fixtures/equationEditorCategoriesAndSymbols ";
 import { equationEditorFlyout, commonComponents, essayResponseCommonComponents, createQuestionBasePage, autoScoredScoringPreviewTab } from "../components";
+//import { essayResponsePage } from "../essayResponsePage";
 const css = Cypress.env('css');
 const allCategories = Object.values(equationEditorCategoriesAndSymbols)
 const defaultSelectedCategories = ['Numpad', 'Keypad', 'Intermediate', 'Primary', 'General', 'Common', 'Algebra', 'Geo', 'Compare', 'Matrices'];
@@ -333,6 +334,26 @@ const tests = {
                 equationEditorSectionCommonComponent.steps.verifyResponseFieldEquationTextNew(0, 'x+5×0​');
             }
         });
+
+        it('When user edits the added equation and clicks on Ok button, the edited equation should be displayed in the preview input field in item preview', () => {
+            if (questionType === 'essay response') {
+                essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+                essayResponsePage.steps.switchToPreviewTab();
+                equationEditorSectionCommonComponent.steps.openResponseFieldEquationContainerEquationEditor(0);
+            }
+            else {
+                equationEditorSectionCommonComponent.steps.focusInResponseAnswerInputFieldPreviewTab(0);
+            }
+            equationEditorFlyout.steps.enterTextInPreviewInputField('{backspace}{backspace}');
+            equationEditorFlyout.steps.enterEquation([{ categoryName: 'numPad', symbolName: ['multiply', 'zero'] }]);
+            equationEditorFlyout.steps.clickOnOkButton();
+            if (questionType === 'essay response') {
+                equationEditorSectionCommonComponent.steps.verifyResponseFieldEquationText(0, 'x+5×0');
+            }
+            else {
+                equationEditorSectionCommonComponent.steps.verifyResponseFieldEquationTextNew(0, 'x+5×0​');
+            }
+        });
     },
 
     /**

package/cypress/pages/components/essayResponseCommonComponents.js

@@ -96,7 +96,8 @@ const selectors = {
     customSpecialCharacterLabel: () => cy.get('[class*="InlineTextFieldWithDebouncestyles__PropertyLabel"]').eq(1),
     customSpecialCharacterInputField: () => cy.get('input[aria-label="Custom Special Characters"]'),
     limitReachedWarningMessageContainer: () => cy.get('.disabled-wrapper-cls'),
-    limitReachedWarningMessage: () => cy.get('.disabled-wrapper-cls [class*="DisabledTextWrapper"]')
+    limitReachedWarningMessage: () => cy.get('.disabled-wrapper-cls [class*="DisabledTextWrapper"]'),
+    wordCharacterLimitWrapper: () => cy.get('.essay-character-view-wrapper')
 }
 
 const steps = {
@@ -202,6 +203,24 @@ const steps = {
             .should('be.checked');
     },
 
+    unCheckAlwaysShowMinimumLimitCheckbox: () => {
+        essayResponseCommonComponents.alwaysShowMinLimitCheckBox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    checkAlwaysShowMaximumLimitCheckbox: () => {
+        essayResponseCommonComponents.alwaysShowMaxLimitCheckbox()
+            .click()
+            .should('be.checked');
+    },
+    
+    uncheckAlwaysShowMaximumLimitCheckbox: () => {
+        essayResponseCommonComponents.alwaysShowMaxLimitCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
     verifyListItemLengthInResponseField: (length) => {
         essayResponseCommonComponents.responseField()
             .find('li')

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

@@ -21,7 +21,6 @@ const selectors = {
     responseStatusWrapper: () => cy.get('.cloze-with-text-answer-status-response-preview-wrapper:visible'),
     correctAnswerResponseNumeration: () => cy.get('.answer-numeration-number-box'),
     correctAnswerResponseWrapper: () => cy.get('[class*="ClozeWithTextResponsestyles__AnswerCell"]'),
-    correctAnswerPointsLabel: () => cy.get('[class*="CorrectAnswerSectionstyle__CorrectAnswerLabelWrapper"] p'),
     correctAnswerResponse: () => cy.get('[class*="AnswerWrapperForLabel"]'),
     correctAnswerResponseWrapperWithoutEnumeration: () => cy.get('.cloze-with-text-answer-status-response-preview-wrapper [class*="ResponseInputWrapper"] input'),
 
@@ -186,41 +185,6 @@ const steps = {
         });
     },
 
-    /**
-     * Verify correct answer section with alternate answers.
-     *
-     * @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.
-     * @param {string[]} correctAnswerArray[].points - An array of point label strings associated with each correct answer group.
-     *
-     */
-
-    verifyCorrectAnswerSectionWithAlternateAnswer: (correctAnswerArray) => {
-        let responseIndex = 0;
-        let pointsLabelIndex = 0;
-        correctAnswerArray.forEach(({correctAnswers, points}) => {
-            correctAnswers.forEach((textContainers, index) => {
-                textContainers.forEach((correctAnswer) => {
-                    fillInTheGapsTextCommonComponent.correctAnswerResponseWrapper()
-                        .eq(responseIndex)
-                        .within(() => {
-                            utilities.verifyInnerText(fillInTheGapsTextCommonComponent.correctAnswerResponseNumeration(), `${index + 1}`);
-                            fillInTheGapsTextCommonComponent.correctAnswerResponse()
-                                .should('have.text', correctAnswer);
-                        });
-                    responseIndex += 1;
-                });
-            });
-            points.forEach((pointsText) => {
-                fillInTheGapsTextCommonComponent.correctAnswerPointsLabel()
-                    .eq(pointsLabelIndex)
-                    .should('have.text', pointsText);
-                pointsLabelIndex += 1;
-            });
-        });
-    },
-
     verifyCorrectAnswerSectionNotExists: () => {
         utilities.verifyElementVisibilityState(fillInTheGapsTextCommonComponent.correctAnswerSectionWrapper(), 'notExist');
     },
@@ -335,7 +299,7 @@ const steps = {
      */
     verifyMaximumCharacterLimitInPreviewTab: (responseIndex, maxlen) => {
         utilities.getNthElement(fillInTheGapsTextCommonComponent.answerInputFieldPreviewTab(), responseIndex)
-            .should('have.attr', 'maxlength', maxlen);
+            .should('have.attr', 'maxLength', maxlen);
     },
 
     /**
@@ -933,6 +897,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/essayResponsePage.js

@@ -19,6 +19,7 @@ const selectors = {
     ...customizeSpecialCharacterComponent,
     ...dialogBoxBase,
     ...equationEditorSectionCommonComponent,
+    ...autoScoredScoringPreviewTab,
     //Basic section
     displayWordLimitLabel: () => cy.get('#Display-word-limit-dropdown-label'),
     displayWordLimitDropdown: () => cy.get('#Display-word-limit-select'),
@@ -142,6 +143,7 @@ const steps = {
     ...dialogBoxBase.steps,
     ...equationEditorSectionCommonComponent.steps,
     ...createItemPage.steps,
+    ...autoScoredScoringPreviewTab.steps,
 
     clickOnSpecialCharactersPopupCloseButton: () => {
         essayResponsePage.specialCharactersPopupCloseButton()

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 = {