itemengine-cypress-automation 1.0.223-minorFix-f2741aa.0 → 1.0.223

package/cypress/pages/components/editCategoryFlyout.js

@@ -68,6 +68,8 @@ const steps = {
         editCategoryFlyout.categoryCharacters()
             .eq(index)
             .click()
+        editCategoryFlyout.categoryCharacters()
+            .eq(index)
             .should('have.class', 'Mui-selected');
     },
 
@@ -171,8 +173,8 @@ const steps = {
 
 
     /**
-    * @description this function verifies the aria label of category characters along with its selected state
-    * @param {string[]} symbolsArray array of aria label of category characters
+    * @description This function verifies the aria label of category characters along with its selected state.
+    * @param {string[]} arrayOfSymbolsAriaLabel Array of aria labels of category characters.
     */
     verifyCategoryCharactersAndSelectedStateForEditedCategory: (arrayOfSymbolsAriaLabel) => {
         editCategoryFlyout.categoryCharacters()
@@ -183,8 +185,8 @@ const steps = {
                         .should('have.class', 'Mui-selected')
                         .invoke('attr', 'aria-label')
                         .then((ariaLabel) => {
-                            const expectedValue = `${arrayOfSymbolsAriaLabel[index + 1].ariaLabel} selected`;
-                            expect(ariaLabel.toLowerCase()).to.equal(expectedValue.toLowerCase())
+                            const expectedValue = `${arrayOfSymbolsAriaLabel[index]} selected`;
+                            expect(ariaLabel.toLowerCase()).to.equal(expectedValue.toLowerCase());
                         });
                 }
             });

package/cypress/pages/components/essayResponseCommonComponents.js

@@ -219,7 +219,7 @@ const steps = {
 
     enterInputInResponseField: (textContent) => {
         essayResponseCommonComponents.responseField()
-            .type(textContent);
+            .type(textContent, { delay: 500 });
     },
 
     clearResponseField: () => {

package/cypress/pages/components/fillInTheGapsDropdownCommonComponent.js

@@ -82,7 +82,10 @@ const steps = {
         utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownOptionsInputField(), optionIndex)
             .clear()
             .type(responseFieldText, { delay: 0 })
+        cy.wait(1000);
+        utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownOptionsInputField(), optionIndex)
             .should('have.value', responseFieldText)
+        utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownOptionsInputField(), optionIndex)
             .blur();
     },
 

package/cypress/pages/components/gridQuestionCommonComponent.js

@@ -1529,10 +1529,9 @@ const steps = {
             .should('have.value', cellHeight);
         gridQuestionCommonComponent.cellMinimumHeightInputField()
             .click();
-            cy.wait(2000);
+        cy.wait(2000);
         gridQuestionCommonComponent.cellMinimumHeightInputField()
             .blur();
-            cy.wait(2000);
     },
 
     /**
@@ -1716,11 +1715,10 @@ const steps = {
         gridQuestionCommonComponent.columnWidthInputField()
             .eq(index)
             .click();
-            cy.wait(2000);
+        cy.wait(2000);
         gridQuestionCommonComponent.columnWidthInputField()
             .eq(index)
             .blur();
-            cy.wait(2000);
     },
 
     verifyTableColumnWidthPreviewTab: (index, width) => {

package/cypress/pages/components/imageCanvasComponent.js

@@ -283,7 +283,8 @@ const steps = {
             .invoke('attr', 'value')
             .then((value) => {
                 createQuestionBasePage.steps.switchToPreviewTab();
-                imageCanvasComponent.canvasImageInPreviewTab().should('have.css', 'width', `${value}px`);
+                imageCanvasComponent.canvasImageInPreviewTab()
+                    .should('have.css', 'width', `${value}px`);
             });
     },
 
@@ -293,7 +294,8 @@ const steps = {
             .then(($element) => {
                 const imgWidth = $element[0].naturalWidth;
                 createQuestionBasePage.steps.switchToPreviewTab();
-                imageCanvasComponent.canvasImageInPreviewTab().should('have.css', 'width', `${imgWidth}px`);
+                imageCanvasComponent.canvasImageInPreviewTab()
+                    .should('have.css', 'width', `${imgWidth}px`);
             });
     },
 
@@ -1144,16 +1146,16 @@ const tests = {
     verifyFillImageToCanvasPreviewTabFunctionality: () => {
         it('When user checks \'Fill image to canvas\' checkbox in edit tab, then image should be adjusted to fit inside the canvas in preview tab', () => {
             imageCanvasComponent.steps.switchToEditTab();
-            imageCanvasComponent.steps.checkFillImageToCanvasCheckbox(); imageCanvasComponent.steps.switchToPreviewTab();
+            imageCanvasComponent.steps.checkFillImageToCanvasCheckbox();
+            imageCanvasComponent.steps.switchToPreviewTab();
             imageCanvasComponent.steps.verifyImageFitsToCanvasInPreviewTab();
         });
 
-        // Failed due to https://redmine.zeuslearning.com/issues/556897
         it('When user unchecks \'Fill image to canvas\' checkbox, then image dimensions should set to default state in preview tab', () => {
             imageCanvasComponent.steps.switchToEditTab();
             imageCanvasComponent.steps.uncheckFillImageToCanvasCheckbox();
             imageCanvasComponent.steps.switchToPreviewTab();
-            imageCanvasComponent.steps.verifyImageDoesNotFitToCanvas();
+            imageCanvasComponent.steps.verifyImageDoesNotFitToCanvasInPreviewTab();
         });
     },
 

package/cypress/pages/components/layoutSectionComponent.js

@@ -513,13 +513,13 @@ const steps = {
      * @param {number} interval - The interval between consecutive labels.
      */
     verifyLabelsVisibleOnNumberLineNumberLineSection: (min, interval) => {
-        cy.wait(3000);
+        cy.wait(1000);
         layoutSectionComponent.numberLineNumberLineSection()
             .parents('.ngie-jxgbox')
             .find('.number-line-tick-font')
             .its('length').then((len) => {
                 const length = len - 3;
-                let value = min + 1;
+                let value = min + interval;
                 for (let index = 0; index < length; index++) {
                     layoutSectionComponent.numberLineNumberLineSection()
                         .parents('.ngie-jxgbox')
@@ -708,6 +708,7 @@ const steps = {
     * @param {Array} values - An array of objects containing the value and index of each label.
     */
     verifyLabelOnNumberLineNumberLineSection: (values) => {
+        cy.wait(1000);
         values.forEach(({ value, index }) => {
             layoutSectionComponent.numberLineNumberLineSection()
                 .parents('.ngie-jxgbox')
@@ -761,7 +762,7 @@ const steps = {
      * @param {number} annotateEvery - The frequency of annotation.
      */
     verifyAnnotatedLabelsOnNumberLineNumberLineSection: (value, annotateEvery) => {
-        cy.wait(3000);
+        cy.wait(1000);
         layoutSectionComponent.numberLineNumberLineSection()
             .parents('.ngie-jxgbox')
             .find('.number-line-tick-font')

package/cypress/pages/components/numberLineCommonComponent.js

@@ -2,7 +2,7 @@ import utilities from "../../support/helpers/utilities";
 import { createQuestionBasePage } from "./createQuestionBasePage";
 import { layoutSectionComponent } from "./layoutSectionComponent";
 const lineSettingsOptions = ['Whole numbers', 'Decimals', 'Fractions', 'Mixed fractions'];
-const numbers = ['-10', '-10.00', "−\n10\n1", "−\n10\n0\n1"]
+const numbers = ['-9.50', "-\n19\n2", "-9\n1\n2"]
 
 const selectors = {
     ...layoutSectionComponent,
@@ -75,8 +75,9 @@ const steps = {
     */
     verifyResponseSpacingSpecifyCorrectAnswerSection: (orientation, value) => {
         const attribute = orientation === 'Sideways' ? 'height' : 'width';
+        const number = orientation === 'Sideways' ? 4 : 5;
         numberLineCommonComponent.numberLineSpecifyCorrectAnswer()
-            .should('have.attr', attribute, value * 5);
+            .should('have.attr', attribute, value * number);
     },
 
     /**
@@ -132,13 +133,13 @@ const steps = {
     */
     verifyLabelsVisibleOnNumberLineSpecifyCorrectAnswerSection: (min, interval) => {
         cy.log('Wait added to make sure all the labels are visible after checking the checkbox')
-        cy.wait(3000)
+        cy.wait(500)
         numberLineCommonComponent.numberLineSpecifyCorrectAnswer()
             .parents('.ngie-jxgbox')
             .find('.number-line-tick-font')
             .its('length').then((len) => {
                 const length = len - 3;
-                let value = min + 1;
+                let value = min + interval;
                 for (let index = 0; index < length; index++) {
                     numberLineCommonComponent.numberLineSpecifyCorrectAnswer()
                         .parents('.ngie-jxgbox')
@@ -192,8 +193,9 @@ const steps = {
      */
     verifyResponseSpacingPreviewTab: (orientation, value) => {
         const attribute = orientation === 'Sideways' ? 'height' : 'width';
+        const number = orientation === 'Sideways' ? 4 : 5;
         numberLineCommonComponent.numberLinePreviewTab()
-            .should('have.attr', attribute, value * 5);
+            .should('have.attr', attribute, value * number);
     },
 
     /**
@@ -245,7 +247,7 @@ const steps = {
             .find('.number-line-tick-font')
             .its('length').then((len) => {
                 const length = len - 3;
-                let value = min + 1;
+                let value = min + interval;
                 for (let index = 0; index < length; index++) {
                     numberLineCommonComponent.numberLinePreviewTab()
                         .parents('.ngie-jxgbox')
@@ -297,7 +299,7 @@ const steps = {
      * @param {number} annotateEvery - The frequency of annotation.
      */
     verifyAnnotatedLabelsOnNumberLineSpecifyCorrectAnswerSection: (value, annotateEvery) => {
-        cy.wait(3000);
+        cy.wait(500);
         numberLineCommonComponent.numberLineSpecifyCorrectAnswer()
             .parents('.ngie-jxgbox')
             .find('.number-line-tick-font')
@@ -570,8 +572,8 @@ const tests = {
         it('When user updates value in Min input field then it should be updated in Specify correct answer section', () => {
             numberLineCommonComponent.steps.enterTextInMinInputField(-12);
             numberLineCommonComponent.steps.verifyTextInMinInputField(-12);
-            numberLineCommonComponent.steps.verifyLabelOnNumberLineNumberLineSection([{ value: -12, index: 0 }]);
-            numberLineCommonComponent.steps.verifyLabelOnNumberLineSpecifyCorrectAnswerSection([{ value: -12, index: 0 }]);
+            numberLineCommonComponent.steps.verifyLabelOnNumberLineNumberLineSection([{ value: -11, index: 0 }]);
+            numberLineCommonComponent.steps.verifyLabelOnNumberLineSpecifyCorrectAnswerSection([{ value: -11, index: 0 }]);
         });
 
         it('When user updates value in Max input field then it should be updated in Specify correct answer section', () => {
@@ -629,7 +631,7 @@ const tests = {
             numberLineCommonComponent.steps.enterTextInMinInputField(-12);
             numberLineCommonComponent.steps.verifyTextInMinInputField(-12);
             numberLineCommonComponent.steps.switchToPreviewTab();
-            numberLineCommonComponent.steps.verifyLabelOnNumberLinePreviewTab([{ value: -12, index: 0 }]);
+            numberLineCommonComponent.steps.verifyLabelOnNumberLinePreviewTab([{ value: -11, index: 0 }]);
         });
 
         it('When user updates value in Max input field then it should be updated in preview  tab', () => {
@@ -662,7 +664,8 @@ const tests = {
     },
 
     verifyDisplaySpecificAnnotationAndLineSettingsEditTabFunctionality: () => {
-        lineSettingsOptions.forEach((option, index) => {
+        const lineSettingsOption = ['Decimals', 'Fractions', 'Mixed fractions'];
+        lineSettingsOption.forEach((option, index) => {
             it(`When user selects ${option} in line settings section, then number displayed on number line should be ${option} in number line section and specify correct answer section`, () => {
                 numberLineCommonComponent.steps.selectLineSettingsToggleButton(option);
                 numberLineCommonComponent.steps.verifyLineSettingsToggleButtonSelected(option);
@@ -672,16 +675,26 @@ const tests = {
         });
 
         it('When user enters value in Display specific annotation (use semicolons to separate) input field then it should be displayed on number line in Number line section and Specify correct answer section', () => {
-            numberLineCommonComponent.steps.selectLineSettingsToggleButton(lineSettingsOptions[0]);
-            numberLineCommonComponent.steps.enterTextInDisplaySpecificAnnotationInputField('-9;');
-            numberLineCommonComponent.steps.verifyTextInDisplaySpecificAnnotationInputField('-9;');
-            numberLineCommonComponent.steps.verifyLabelOnNumberLineSpecifyCorrectAnswerSection([{ value: -9, index: 1 }]);
-            numberLineCommonComponent.steps.verifyLabelOnNumberLineNumberLineSection([{ value: -9, index: 1 }]);
+            numberLineCommonComponent.steps.selectLineSettingsToggleButton(lineSettingsOptions[1]);
+            numberLineCommonComponent.steps.enterTextInDisplaySpecificAnnotationInputField('-9.25;');
+            numberLineCommonComponent.steps.verifyTextInDisplaySpecificAnnotationInputField('-9.25;');
+            cy.wait(200);
+            numberLineCommonComponent.numberLineSpecifyCorrectAnswer()
+                .parents('.ngie-jxgbox')
+                .find('.number-line-tick-font')
+                .contains('-9.25')
+                .should('exist');
+            numberLineCommonComponent.numberLineNumberLineSection()
+                .parents('.ngie-jxgbox')
+                .find('.number-line-tick-font')
+                .contains('-9.25')
+                .should('exist');
         });
     },
 
     verifyDisplaySpecificAnnotationAndLineSettingsPreviewTabFunctionality: () => {
-        lineSettingsOptions.forEach((option, index) => {
+        const lineSettingsOption = ['Decimals', 'Fractions', 'Mixed fractions'];
+        lineSettingsOption.forEach((option, index) => {
             it(`When user selects ${option} in line settings section, then number displayed on number line should be ${option} in preview tab`, () => {
                 numberLineCommonComponent.steps.switchToEditTab();
                 numberLineCommonComponent.steps.selectLineSettingsToggleButton(option);
@@ -693,11 +706,15 @@ const tests = {
 
         it('When user enters value in Display specific annotation (use semicolons to separate) input field then it should be displayed on number line in preview tab', () => {
             numberLineCommonComponent.steps.switchToEditTab();
-            numberLineCommonComponent.steps.selectLineSettingsToggleButton(lineSettingsOptions[0]);
-            numberLineCommonComponent.steps.enterTextInDisplaySpecificAnnotationInputField('-9;');
-            numberLineCommonComponent.steps.verifyTextInDisplaySpecificAnnotationInputField('-9;');
+            numberLineCommonComponent.steps.selectLineSettingsToggleButton(lineSettingsOptions[1]);
+            numberLineCommonComponent.steps.enterTextInDisplaySpecificAnnotationInputField('-9.25;');
+            numberLineCommonComponent.steps.verifyTextInDisplaySpecificAnnotationInputField('-9.25;');
             numberLineCommonComponent.steps.switchToPreviewTab();
-            numberLineCommonComponent.steps.verifyLabelOnNumberLinePreviewTab([{ value: -9, index: 1 }]);
+            numberLineCommonComponent.numberLinePreviewTab()
+                .parents('.ngie-jxgbox')
+                .find('.number-line-tick-font')
+                .contains('-9.25')
+                .should('exist');
         });
     },
 }

package/cypress/pages/components/opacityComponent.js

@@ -60,6 +60,7 @@ const steps = {
     clickActionOnOpacitySlider: () => {
         opacityComponent.opacitySlider()
             .click();
+        cy.wait(1000);
     }
 }
 

package/cypress/pages/components/optionsWrapperComponent.js

@@ -240,6 +240,7 @@ const steps = {
                 optionsWrapperComponent.optionsInputField()
                     .eq(index)
                     .type(textContent)
+                cy.wait(2000);
                 optionsWrapperComponent.optionsInputField()
                     .eq(index)
                     .click()

package/cypress/pages/components/questionInstructionsComponent.js

@@ -49,7 +49,7 @@ const steps = {
         questionInstructionsComponent.questionInstructionsInputField()
             .type(text)
             .blur();
-        cy.wait(1000);
+        cy.wait(2000);
         questionInstructionsComponent.questionInstructionsInputField()
             .should('have.text', text);
     },

package/cypress/pages/components/responseAreaSettingsPopupComponent.js

@@ -53,6 +53,11 @@ const steps = {
         responseAreaSettingsPopupComponent.responseAreaSettingsWidthInputField()
             .clear()
             .type(width)
+        cy.wait(1000);
+        responseAreaSettingsPopupComponent.responseAreaSettingsWidthInputField()
+            .click();
+        cy.wait(1000);
+        responseAreaSettingsPopupComponent.responseAreaSettingsWidthInputField()
             .blur();
     },
 
@@ -64,6 +69,9 @@ const steps = {
         responseAreaSettingsPopupComponent.responseAreaSettingsHeightInputField()
             .clear()
             .type(height)
+        cy.wait(1000)
+        responseAreaSettingsPopupComponent.responseAreaSettingsHeightInputField()
+            .click()
             .blur();
     },
 }

package/cypress/pages/components/scoringSectionBaseEditTab.js

@@ -47,6 +47,7 @@ const steps = {
             .should('have.value', points);
         scoringSectionBaseEditTab.pointsInputField()
             .click()
+        scoringSectionBaseEditTab.pointsInputField()
             .blur();
     },
 
@@ -76,6 +77,8 @@ const steps = {
         const convertedString = scoringType.replace(/\b\w/g, (match) => match.toUpperCase());
         scoringSectionBaseEditTab.scoringTypeDropdownListOptions(convertedString)
             .click();
+        cy.wait(2000);
+
     },
 
     /**
@@ -87,7 +90,7 @@ const steps = {
             .clear()
         scoringSectionBaseEditTab.minimumPointsInputField()
             .type(`${points}`)
-        cy.wait(2000)
+        cy.wait(2000);
         scoringSectionBaseEditTab.minimumPointsInputField()
             .should('have.value', points);
         scoringSectionBaseEditTab.minimumPointsInputField()
@@ -371,7 +374,7 @@ const tests = {
             scoringSectionBaseEditTab.steps.clearMinimumPointsField();
             scoringSectionBaseEditTab.minimumPointsInputField()
                 .click();
-            cy.wait(1000)
+            cy.wait(2000);
             scoringSectionBaseEditTab.minimumPointsInputField()
                 .blur();
             utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');

package/cypress/pages/components/toolSettingsComponent.js

@@ -92,6 +92,7 @@ const steps = {
     },
 
     clickOnOkButton: () => {
+        cy.wait(2000);
         toolSettingsComponent.okButton()
             .click();
     },

package/cypress/pages/contentBlocksPage.js

@@ -575,6 +575,7 @@ const steps = {
             .type(inputHeadingText);
         contentBlocksPage.textBlockInputField()
             .type(inputBodyText);
+        cy.wait(2000);
         contentBlocksPage.saveQuestionButton()
             .click();
     },

package/cypress/pages/dragAndDropIntoCategoriesPage.js

@@ -87,7 +87,7 @@ const selectors = {
     deleteColumnButton: () => cy.get('[aria-label="Columns"] [aria-label*="Decrease count"]'),
     deleteRowButton: () => cy.get('[aria-label="Rows"] [aria-label*="Decrease count"]'),
     penaltyPointsForIncorrectDropzoneInputField: () => cy.get('input[aria-label="Penalty points for each incorrect dropzone"]'),
-    penaltyPointsForIncorrectOptionInputField: () => cy.get('input[aria-label="penalty points for each incorrect option"]'),
+    penaltyPointsForIncorrectOptionInputField: () => cy.get('input[aria-label="Penalty points for each incorrect option"]'),
     penaltyPointsForEachIncorrectOptionOrDropzoneLabel: () => cy.get('[class*="PenaltyScoreForEachIncorrectstyles__PointsLabel"]'),
     tableOuterBorder: () => cy.get('.table-border'),
     maxLimitInEachDropzoneHelpText: () => cy.get('[class*="Matrixstyles__MaxLimitWrapper"]'),
@@ -97,7 +97,7 @@ const selectors = {
     //Style and layout
     layoutLabel: () => cy.get('[class*="Layoutstyles__SectionWrapper"]'),
     rowSpacingDropdownLabel: () => cy.get('#Row-spacing-dropdown-label'),
-    rowSpacingDropdown: () => cy.get('[aria-labelledby*="Row-spacing-dropdown-label"]'),
+    rowSpacingDropdown: () => cy.get('[aria-labelledby*="Row-spacing-dropdown-label"]').eq(0),
     rowSpacingDropdownOptions: (ariaLabel = null) => {
         if (ariaLabel) {
             return cy.get(`[aria-labelledby*="Row-spacing-dropdown-label"] .dropdown-menu-item[aria-label*="${ariaLabel}"]`)
@@ -1527,6 +1527,9 @@ const steps = {
             .clear()
             .type(cellHeight)
             .should('have.value', cellHeight);
+        dragAndDropIntoCategoriesPage.dropzoneMinimumHeightInputField()
+            .click();
+        cy.wait(2000);
         dragAndDropIntoCategoriesPage.dropzoneMinimumHeightInputField()
             .blur();
     },
@@ -1744,6 +1747,10 @@ const steps = {
             .eq(index)
             .clear()
             .type(width);
+        dragAndDropIntoCategoriesPage.dropzoneWidthInputField()
+            .eq(index)
+            .click();
+        cy.wait(2000);
         dragAndDropIntoCategoriesPage.dropzoneWidthInputField()
             .eq(index)
             .blur();

package/cypress/pages/fillInTheGapsDropdownPage.js

@@ -29,7 +29,8 @@ const selectors = {
     setForAllDropdownsLabel: () => cy.get('[data-ngie-testid="set-for-all-dropdowns-checkbox"] .MuiFormControlLabel-label'),
     setForAllDropdownsCheckbox: () => cy.get('[data-ngie-testid="set-for-all-dropdowns-checkbox"] input'),
     correctAnswerSectionWithoutEnumerationWrapper: () => cy.get('.cloze-with-text-correct-answer-wrapper .preview-question-text-wrapper'),
-    correctAnswersLabel: () => cy.get('.cloze-with-text-correct-answer-label')
+    correctAnswersLabel: () => cy.get('.cloze-with-text-correct-answer-label'),
+    tooltipText: () => cy.get('[class*="MuiTooltip-tooltip"]'),
 }
 
 const steps = {
@@ -217,6 +218,20 @@ const steps = {
                 });
         });
     },
+    /**
+    * @param {string} element denotes element
+    * @param {string} text denotes tooltip text
+    * @description function is used to hover over element and verify innertext of its tooltip
+    */
+    verifyTooltipInnerText: (element, text, index = null) => {
+        element
+            .eq(index)
+            .realHover()
+        utilities.verifyInnerText(fillInTheGapsDropdownPage.tooltipText(), text);
+        element
+            .eq(index)
+            .trigger('mouseout');
+    },
 }
 
 const tests = {

package/cypress/pages/fillInTheGapsOverImageDropdownPage.js

@@ -32,7 +32,8 @@ const selectors = {
     dropdownConnectorStyleLabel: () => cy.get('.dropzone-connector-style-label'),
     connectorEndPointShapeLabel: () => cy.get('[class*="__SubSectionLabel"]').eq(2),
     connectorEndPointShapeOptions: (shapeOption) => cy.get(`.dropzone-connector-option button[aria-label*="${shapeOption}"]`),
-    previewTabCanvas: () => cy.get('.drag-and-drop-canvas')
+    previewTabCanvas: () => cy.get('.drag-and-drop-canvas'),
+    tooltipText: () => cy.get('[class*="MuiTooltip-tooltip"]'),
 }
 
 const steps = {
@@ -275,6 +276,20 @@ const steps = {
         imageCanvasComponent.canvasImageInPreviewTab()
             .should('have.attr', 'alt', 'highlightImage.jpg');
     },
+    /**
+ * @param {string} element denotes element
+ * @param {string} text denotes tooltip text
+ * @description function is used to hover over element and verify innertext of its tooltip
+ */
+    verifyTooltipInnerText: (element, text, index = null) => {
+        element
+            .eq(index)
+            .realHover()
+        utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.tooltipText(), text);
+        element
+            .eq(index)
+            .trigger('mouseout', { force: true });
+    },
 }
 
 const tests = {

package/cypress/pages/fillInTheGapsOverImageTextPage.js

@@ -39,7 +39,8 @@ const selectors = {
     textContainerHeightInputField: () => cy.get('.dropzone-text-container-dimension [id="Height (px)"]'),
     textContainerWidthInputFieldLabel: () => cy.get('.dropzone-text-container-dimension [aria-labelledby="Width (px)"]'),
     textContainerWidthInputField: () => cy.get('.dropzone-text-container-dimension [id="Width (px)"]'),
-    textContainerConnectorStyleLabel: () => cy.get('.dropzone-connector-style-label')
+    textContainerConnectorStyleLabel: () => cy.get('.dropzone-connector-style-label'),
+    responseArea: () => cy.get('.canvas-dropzone'),
 }
 
 const steps = {
@@ -80,6 +81,18 @@ const steps = {
             });
     },
 
+
+    /**
+     * Verifies the background color of a response area element.
+     * @param {number} responseAreaIndex - The index of the response area to verify.
+     * @param {string} colorValue - The expected background color value.
+     */
+    verifyResponseAreaFillColor: (responseAreaIndex, colorValue) => {
+        utilities.verifyCSS(utilities.getNthElement(fillInTheGapsOverImageTextPage.responseArea(), responseAreaIndex), {
+            'background-color': colorValue
+        });
+    },
+
     /**
      * Verify that the correct option icon is displayed for a specific answer input field.
      * @param {number} inputFieldIndex - The index of the answer input field to verify.
@@ -257,6 +270,9 @@ const steps = {
     setTextContainerHeight: (height) => {
         fillInTheGapsOverImageTextPage.textContainerHeightInputField()
             .type(height)
+        cy.wait(1000)
+        fillInTheGapsOverImageTextPage.textContainerHeightInputField()
+            .click()
             .blur();
     },
 
@@ -267,6 +283,9 @@ const steps = {
     setTextContainerWidth: (width) => {
         fillInTheGapsOverImageTextPage.textContainerWidthInputField()
             .type(width)
+        cy.wait(1000)
+        fillInTheGapsOverImageTextPage.textContainerWidthInputField()
+            .click()
             .blur();
     },