itemengine-cypress-automation 1.0.205-8thJuneFixes-5ad148f.0 → 1.0.206-12thJuneFixesAndRepoUpdate-5fe2304.0

package/cypress/pages/components/autoScoredScoringSectionMultiResponseType.js

@@ -299,6 +299,7 @@ const steps = {
             case 'specify points for each incorrect option':
             case 'specify points for each incorrect answer':
             case 'specify points for each incorrect dropdown':
+            case 'specify points for each incorrect bar':
             case 'specify points for each incorrect dot plot':
             case 'specify points for each incorrect text container':
                 autoScoredScoringSectionMultiResponseType.specifyPointsForEachIncorrectOptionRadioButton()

package/cypress/pages/components/backgroundImageUploadComponent.js

@@ -11,7 +11,7 @@ const selectors = {
     fileNameLabel: () => cy.get('[class*="__LabelWrapper"][class*="Upload"]').eq(1),
     fileUploadSection: () => cy.get('.file-input-wrapper'),
     chooseFileButton: () => cy.get('.choose-file-button'),
-    noFileChosenLabel: () => cy.get('[class*="UploadImagestyles__SelectedFile"] [class*="UploadImagestyles__FileLabelWrapper"]'),
+    noFileChosenLabel: () => cy.get('[class*="styles__SelectedFile"] [aria-label="No file chosen"]'),
     uploadImageProgressBar: () => cy.get('[class*="ProgressBar"]'),
     uploadedFileNameLabel: () => cy.get('[class*="styles__SelectedFileWithIcon"][class*="Upload"]'),
     deleteImageIcon: () => cy.get('[aria-label*="Delete image"]'),

package/cypress/pages/components/barAndLineChartComponent.js

@@ -7,24 +7,52 @@ const selectors = {
     addBarOrPointOptionLabel: () => cy.get('.drag-item-label-wrapper'),
     selectChartTypeMaxYLabel: () => cy.get('[class*="ChartsPreviewstyles__CustomInputFieldLabel"]'),
     selectChartTypeMaxYInputField: () => cy.get('[class*="ChartsPreviewstyles__CustomInputFieldWrapper"] input'),
-    yAxisCoordinate: () => cy.get('[class*="ChartGridstyle__ValueDiv"]'),
+    yAxisCoordinate: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartGridstyle__ValueDiv"]'),
     yAxisLabel: () => cy.get('[class*="ChartsPreviewstyles__LeftWrapper"] .title-container'),
     selectChartTypeChartToolsAddBarOrPointButton: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(0),
-    selectChartTypeChartToolsUndoButton: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(1),
-    selectChartTypeChartToolsRedoButton: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(1),
-    selectChartTypeChartToolsResetButton: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(2),
     selectChartTypeYAxisLabelButton: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartsPreviewstyles__LeftWrapper"] .title-container'),
     selectChartTypePoint: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] .ngie-chart-point'),
     barAndPointTooltipLockUnlockButton: () => cy.get('[class*="ChartTooltipstyles__LockIconWrapper"] button'),
     barAndPointTooltipDeleteButton: () => cy.get('.charts-tooltip-delete-icon-wrapper:visible button'),
     barAndPointTooltipLabelButton: () => cy.get('.charts-tooltip-data-label:visible .title-container'),
     barAndPointTooltipWrapper: () => cy.get('.charts-tooltip-wrapper'),
+    controlOptionsSelectChartType: (toolOptionAriaLabel = null) => {
+        if (toolOptionAriaLabel) {
+            return cy.get(`('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button[aria-label*="${toolOptionAriaLabel}"]`)
+        } else {
+            return cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button')
+        }
+    },
+    chartContainerSelectChartType: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] .chart-container'),
+    gridLabel: () => cy.get('.grid-options-wrapper .chart-option-label'),
+    showGridLinesLabel: () => cy.get('.grid-options-wrapper [class*="ChartOptionsstyles__LabelText"]'),
+    verticalGridlinesCheckbox: () => cy.get('[data-ngie-testid="vertical-checkbox"] input'),
+    verticalGridlinesLabel: () => cy.get('[data-ngie-testid="vertical-checkbox"] .MuiFormControlLabel-label'),
+    horizontalGridlinesCheckbox: () => cy.get('[data-ngie-testid="horizontal-checkbox"] input'),
+    horizontalGridlinesLabel: () => cy.get('[data-ngie-testid="horizontal-checkbox"] .MuiFormControlLabel-label'),
+    labelOptionsLabel: () => cy.get('.label-options-wrapper .chart-option-label'),
+    allowStudentsToEditLabel: () => cy.get('.label-options-wrapper [class*="ChartOptionsstyles__LabelText"]'),
+    yAxisCheckbox: () => cy.get('[data-ngie-testid="y-axis-checkbox"] input'),
+    yAxisLabelSelectChartType: () => cy.get('[data-ngie-testid="y-axis-checkbox"] .MuiFormControlLabel-label'),
+    xAxisCheckbox: () => cy.get('[data-ngie-testid="x-axis-checkbox"] input'),
+    xAxisLabelSelectChartType: () => cy.get('[data-ngie-testid="x-axis-checkbox"] .MuiFormControlLabel-label'),
+    gridCellSelectChartType: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] .grid-cell'),
+    gridSnappingLabel: () => cy.get('[aria-labelledby="grid snapping"]'),
+    gridSnappingInputField: () => cy.get('input[id="grid snapping"]'),
 
     //Specify correct answer section
     specifyCorrectAnswerToolsAddBarOrPointButton: () => cy.get('.ngie-accordion [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(0),
-    specifyCorrectAnswerToolsUndoButton: () => cy.get('.ngie-accordion [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(1),
-    specifyCorrectAnswerToolsRedoButton: () => cy.get('.ngie-accordion [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(2),
-    specifyCorrectAnswerToolsResetButton: () => cy.get('.ngie-accordion [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(3),
+    chartContainerSpecifyCorrectAnswer: () => cy.get('.ngie-accordion .chart-container'),
+    controlOptionsSpecifyCorrectAnswer: (toolOptionAriaLabel = null) => {
+        if (toolOptionAriaLabel) {
+            return cy.get(`.ngie-accordion [class*="ChartToolsstyles__ChartToolsWrapper"] button[aria-label*="${toolOptionAriaLabel}"]`)
+        } else {
+            return cy.get('.ngie-accordion [class*="ChartToolsstyles__ChartToolsWrapper"] button')
+        }
+    },
+    barAndPointTooltipWrapperSpecifyCorrectAnswer: () => cy.get('.ngie-accordion [class*="ChartTooltipstyles__ChartTooltipWrapper"]'), gridCellSpecifyCorrectAnswer: () => cy.get('.ngie-accordion .grid-cell'),
+    yAxisCoordinateSpecifyCorrectAnswer: () => cy.get('.ngie-accordion [class*="ChartGridstyle__ValueDiv"]'),
+    yAxisLabelSpecifyCorrectAnswer: () => cy.get('.ngie-accordion-detail [class*="ChartsPreviewstyles__LeftWrapper"] .title-container'),
 
     //Preview tab
     previewTabToolsAddBarOrPointButton: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(0),
@@ -34,6 +62,7 @@ const selectors = {
     previewTabYAxisLabelButton: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartsPreviewstyles__LeftWrapper"] .title-container'),
     previewTabYAxisCoordinate: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartGridstyle__ValueDiv"]'),
     previewTabChartRowHeaderContainer: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartGridstyle__RowHeaderContainer"]'),
+    gridCellPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] .grid-cell'),
 }
 
 const steps = {
@@ -81,7 +110,26 @@ const steps = {
     },
 
     clickOnBarTooltipBarLabelButton: () => {
-        barAndLineChartComponent.barAndPointTooltipLabelButton
+        barAndLineChartComponent.barAndPointTooltipLabelButton()
+            .click();
+    },
+
+    /**
+     * Selects a control option
+     * @param {('Undo'| 'Redo'| 'Reset')} controlOption - The control option to select.
+     */
+    selectControlOptionSelectChartTypeSection: (controlOption) => {
+        barAndLineChartComponent.controlOptionsSelectChartType(controlOption)
+            .click();
+    },
+
+    /**
+     * Selects a control option 
+     * @param {('Undo'| 'Redo'| 'Reset')} controlOption - The control option to select.
+     */
+    selectControlOptionSpecifyCorrectAnswer: (controlOption) => {
+        barAndLineChartComponent.controlOptionsSpecifyCorrectAnswer(controlOption)
+            .click();
     },
 
     //Preview tab
@@ -91,7 +139,7 @@ const steps = {
      */
     editYAxisLabelInPreviewTab: (text) => {
         barAndLineChartComponent.steps.clickOnYAxisLabelButtonInPreviewTab();
-        chartsCommonComponent.steps.addInputToChartLabelPopupInputField(text);
+        barAndLineChartComponent.steps.addInputToChartLabelPopupInputField(text);
         chartsCommonComponent.steps.saveGraphLabelPopup();
     },
 
@@ -141,6 +189,129 @@ const steps = {
                 utilities.verifyTextContent(utilities.getNthElement(barAndLineChartComponent.yAxisLabel(), 0), yAxisLabel);
             });
     },
+
+    verifyVerticalCheckboxChecked: () => {
+        barAndLineChartComponent.verticalGridlinesCheckbox()
+            .should('be.checked');
+    },
+
+    verifyHorizontalCheckboxChecked: () => {
+        barAndLineChartComponent.horizontalGridlinesCheckbox()
+            .should('be.checked');
+    },
+
+    uncheckVerticalCheckbox: () => {
+        barAndLineChartComponent.verticalGridlinesCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    uncheckHorizontalCheckbox: () => {
+        barAndLineChartComponent.horizontalGridlinesCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    verifyYAxisCheckboxChecked: () => {
+        barAndLineChartComponent.yAxisCheckbox()
+            .should('be.checked');
+    },
+
+    uncheckYAxisCheckbox: () => {
+        barAndLineChartComponent.yAxisCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    verifyXAxisCheckboxChecked: () => {
+        barAndLineChartComponent.xAxisCheckbox()
+            .should('be.checked');
+    },
+
+    uncheckXAxisCheckbox: () => {
+        barAndLineChartComponent.xAxisCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    verifyVerticalGridlinesVisibleSelectChartType: () => {
+        barAndLineChartComponent.gridCellSelectChartType()
+            .should('have.css', 'border-right-width', '1px');
+    },
+
+    verifyVerticalGridlinesNotVisibleSelectChartType: () => {
+        barAndLineChartComponent.gridCellSelectChartType()
+            .should('have.css', 'border-right-width', '0px');
+    },
+
+    verifyHorizontalGridlinesVisibleSelectChartType: () => {
+        barAndLineChartComponent.gridCellSelectChartType()
+            .should('have.css', 'border-top-width', '1px');
+    },
+
+    verifyHorizontalGridlinesNotVisibleSelectChartType: () => {
+        barAndLineChartComponent.gridCellSelectChartType()
+            .should('have.css', 'border-top-width', '0px');
+    },
+
+    /**
+    * @description enters value in snap to grid input field
+    * @param {number} value value to be entered 
+    */
+    enterValueInGridSnappingInputField: (value) => {
+        barAndLineChartComponent.gridSnappingInputField()
+            .clear()
+            .type(value);
+    },
+
+    /**
+    * @description verifies value in snap to grid input field
+    * @param {number} value value to be verified
+    */
+    verifyValueInGridSnappingInputField: (value) => {
+        barAndLineChartComponent.gridSnappingInputField()
+            .should('have.value', value);
+    },
+
+    verifyVerticalGridlinesVisibleSpecifyCorrectAnswer: () => {
+        barAndLineChartComponent.gridCellSpecifyCorrectAnswer()
+            .should('have.css', 'border-right-width', '1px');
+    },
+
+    verifyVerticalGridlinesNotVisibleSpecifyCorrectAnswer: () => {
+        barAndLineChartComponent.gridCellSpecifyCorrectAnswer()
+            .should('have.css', 'border-right-width', '0px');
+    },
+
+    verifyHorizontalGridlinesVisibleSpecifyCorrectAnswer: () => {
+        barAndLineChartComponent.gridCellSpecifyCorrectAnswer()
+            .should('have.css', 'border-top-width', '1px');
+    },
+
+    verifyHorizontalGridlinesNotVisibleSpecifyCorrectAnswer: () => {
+        barAndLineChartComponent.gridCellSpecifyCorrectAnswer()
+            .should('have.css', 'border-top-width', '0px');
+    },
+
+    verifyVerticalGridlinesVisiblePreviewTab: () => {
+        barAndLineChartComponent.gridCellPreviewTab()
+            .should('have.css', 'border-right-width', '1px');
+    },
+
+    verifyVerticalGridlinesNotVisiblePreviewTab: () => {
+        barAndLineChartComponent.gridCellPreviewTab()
+            .should('have.css', 'border-right-width', '0px');
+    },
+
+    verifyHorizontalGridlinesVisiblePreviewTab: () => {
+        barAndLineChartComponent.gridCellPreviewTab()
+            .should('have.css', 'border-top-width', '1px');
+    },
+
+    verifyHorizontalGridlinesNotVisiblePreviewTab: () => {
+        barAndLineChartComponent.gridCellPreviewTab()
+            .should('have.css', 'border-top-width', '0px');
+    },
 }
 
 export const barAndLineChartComponent = {

package/cypress/pages/components/chartsCommonComponent.js

@@ -33,6 +33,7 @@ const selectors = {
     previewTabXAxisLabelButton: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartsPreviewstyles__BottomWrapper"] .title-container'),
     tickIconWrapper: () => cy.get('[class*="tick-icon-wrapper"] svg'),
     correctAnswersLabel: () => cy.get('[class*="Chartsstyle__CorrectAnswerHeader"]'),
+    chartsContainerPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .chart-container'),
 
     //scoring section
     toleranceThresholdLabel: () => cy.get('[class*="AllocatedPointsstyles__PointsWrapper"] .points-label'),

package/cypress/pages/components/connectorStyleStyleAndLayoutCustomizationComponent.js

@@ -0,0 +1,77 @@
+const selectors = {
+    connectorStyleLabel: () => cy.get('[class*="connector-style-label"]'),
+    connectorEndPointShapeLabel: () => cy.get('[class*="StyleAndLayoutCustomizationstyles__SubSectionLabel"]').eq(2),
+    circleEndPointShapeButton: () => cy.get('button[aria-label="circle connector end point shape"]'),
+    squareEndPointShapeButton: () => cy.get('button[aria-label="square connector end point shape"]'),
+    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}"]`),
+}
+
+const steps = {
+    selectEndPointShapeButton: (button) => {
+        switch (button) {
+            case 'Circle':
+                connectorStyleStyleAndLayoutCustomizationComponent.circleEndPointShapeButton()
+                    .click()
+                    .should('have.class', 'Mui-selected');
+                break;
+            case 'Square':
+                connectorStyleStyleAndLayoutCustomizationComponent.squareEndPointShapeButton()
+                    .click()
+                    .should('have.class', 'Mui-selected');
+                break;
+            case 'Diamond':
+                connectorStyleStyleAndLayoutCustomizationComponent.diamondEndPointShapeButton()
+                    .click()
+                    .should('have.class', 'Mui-selected');
+                break;
+            case 'None':
+                connectorStyleStyleAndLayoutCustomizationComponent.noneEndPointShapeButton()
+                    .click()
+                    .should('have.class', 'Mui-selected');
+                break;
+            default:
+                throw new Error('Invalid end point shape')
+        }
+    },
+
+    verifyEndPointShapeButtonSelectedState: (button) => {
+        switch (button) {
+            case 'Circle':
+                connectorStyleStyleAndLayoutCustomizationComponent.circleEndPointShapeButton()
+                    .should('have.class', 'Mui-selected');
+                break;
+            case 'Square':
+                connectorStyleStyleAndLayoutCustomizationComponent.squareEndPointShapeButton()
+                    .should('have.class', 'Mui-selected');
+                break;
+            case 'Diamond':
+                connectorStyleStyleAndLayoutCustomizationComponent.diamondEndPointShapeButton()
+                    .should('have.class', 'Mui-selected');
+                break;
+            case 'None':
+                connectorStyleStyleAndLayoutCustomizationComponent.noneEndPointShapeButton()
+                    .should('have.class', 'Mui-selected');
+                break;
+            default:
+                throw new Error('Invalid end point shape')
+        }
+    },
+
+    /**
+  * Verifies if the specified connector style option is selected.
+  * @param {string} optionLabel - The label of the connector style option to verify.
+  */
+    verifyConnectorStyleOptionSelected: (optionLabel) => {
+        connectorStyleStyleAndLayoutCustomizationComponent.connectorEndPointShapeOptions(optionLabel)
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+}
+
+
+export const connectorStyleStyleAndLayoutCustomizationComponent = {
+    ...selectors,
+    steps
+}

package/cypress/pages/components/essayResponseCommonComponents.js

@@ -1,5 +1,6 @@
 import utilities from "../../support/helpers/utilities";
 import { commonComponents } from "./commonComponents";
+import { createQuestionBasePage } from "./createQuestionBasePage";
 
 let originalText;
 let formattedText;
@@ -280,9 +281,7 @@ const steps = {
 
     resetPreviewTabResponseField: () => {
         cy.log('Clearing and resetting the response field');
-        essayResponseCommonComponents.responseField()
-            .clear()
-            .blur();
+        createQuestionBasePage.steps.resetQuestionPreview();
         essayResponseCommonComponents.responseField()
             .type('{backspace}');
     },

package/cypress/pages/components/figCommonStyleAndLayoutComponent.js

@@ -4,7 +4,7 @@ import { questionInputFieldComponent } from "./questionInputFieldComponent"
 const css = Cypress.env('css');
 
 const selectors = {
-    componentContainerLabel: () => cy.get('[class*="styles__SectionWrapper"][class*="label"]'),
+    componentContainerLabel: () => cy.get('[class*="styles__SectionWrapper"][class*="label"]').eq(0),
     fillColorLabel: () => cy.get('.sub-section-label').eq(0),
     borderColorLabel: () => cy.get('.sub-section-label').eq(1),
     colorBlock: () => cy.get('.color-picker-block'),

package/cypress/pages/components/fillInTheGapsDropdownCommonComponent.js

@@ -399,6 +399,7 @@ const steps = {
     compareDropdownMenuAndDropdownWidthForUserSpecifiedWidth: () => {
         let dropdownWidth;
         utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownSpecifyCorrectAnswerSection(), 0)
+            .parents('.response-dropdown-wrapper')
             .then(($originalDropdownWidth) => {
                 dropdownWidth = parseFloat($originalDropdownWidth.css('width')); //Storing original dropdown width as a numeric value
             });
@@ -413,12 +414,14 @@ const steps = {
     compareDropdownMenuAndDropdownWidthForAutoScaled: () => {
         let originalDropdownWidth
         utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownSpecifyCorrectAnswerSection(), 0)
+            .parents('.response-dropdown-wrapper')
             .then(($originalDropdownWidth) => {
                 originalDropdownWidth = $originalDropdownWidth.width(); //Storing original dropdown width
             });
         fillInTheGapsDropdownCommonComponent.steps.selectAutoScaleToggleButton();
         fillInTheGapsDropdownCommonComponent.steps.verifyAutoScaleToggleButtonIsSelected();
         utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownSpecifyCorrectAnswerSection(), 0)
+            .parents('.response-dropdown-wrapper')
             .then(($modifiedDropdownWidth) => {
                 let modifiedDropdownWidth = $modifiedDropdownWidth.width(); //Storing auto scaled dropdown width
                 expect(modifiedDropdownWidth).to.be.gt(originalDropdownWidth);
@@ -432,18 +435,19 @@ const steps = {
     },
 
     verifyDropdownDefaultWidthInSpecifyCorrectAnswer: () => {
-        utilities.verifyCSS(utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownSpecifyCorrectAnswerSection(), 0), {
+        utilities.verifyCSS(utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownSpecifyCorrectAnswerSection().parents('.response-dropdown-wrapper'), 0), {
             'width': '120px'
         });
         fillInTheGapsDropdownCommonComponent.steps.expandDropdownInSpecifyCorrectAnswerSection(0);
         utilities.verifyCSS(fillInTheGapsDropdownCommonComponent.dropdownList(), {
-            'max-width': '120px'
+            'width': '120px'
         });
     },
 
     compareDropdownMenuAndDropdownWidthForUserSpecifiedWidthInPreviewTab: () => {
         let dropdownWidth
         utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownPreviewTab(), 0)
+            .parents('.response-dropdown-wrapper')
             .then(($originalDropdownWidth) => {
                 dropdownWidth = $originalDropdownWidth.css('width'); //Storing original dropdown width
             });
@@ -459,6 +463,7 @@ const steps = {
     compareDropdownMenuAndDropdownWidthForAutoScaledInPreviewTab: () => {
         let originalDropdownWidth
         utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownPreviewTab(), 0)
+            .parents('.response-dropdown-wrapper')
             .then(($originalDropdownWidth) => {
                 originalDropdownWidth = $originalDropdownWidth.width(); //Storing original dropdown width
             });
@@ -467,6 +472,7 @@ const steps = {
         fillInTheGapsDropdownCommonComponent.steps.verifyAutoScaleToggleButtonIsSelected();
         createQuestionBasePage.steps.switchToPreviewTab();
         utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownPreviewTab(), 0)
+            .parents('.response-dropdown-wrapper')
             .then(($modifiedDropdownWidth) => {
                 let modifiedDropdownWidth = $modifiedDropdownWidth.width(); //Storing auto scaled dropdown width
                 expect(modifiedDropdownWidth).to.be.gt(originalDropdownWidth);
@@ -480,12 +486,12 @@ const steps = {
     },
 
     verifyDropdownDefaultWidthInPreviewTab: () => {
-        utilities.verifyCSS(utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownPreviewTab(), 0), {
+        utilities.verifyCSS(utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownPreviewTab().parents('.response-dropdown-wrapper'), 0), {
             'width': '120px'
         });
         fillInTheGapsDropdownCommonComponent.steps.expandDropdownInPreviewTab(0);
         utilities.verifyCSS(fillInTheGapsDropdownCommonComponent.dropdownList(), {
-            'max-width': '120px'
+            'width': '120px'
         });
     },
 
@@ -705,6 +711,17 @@ const steps = {
             'border-style': styleName
         });
     },
+
+    /**
+    * Verifies the border color of the answer input field at the specified index.
+    * @param {number} responseAreaIndex - The index of the response area to verify.
+    * @param {string} borderValue - The expected border color value in CSS format.
+    */
+    verifyDropdownBorderColor: (responseAreaIndex, borderValue) => {
+        utilities.verifyCSS(utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownPreviewTab(), responseAreaIndex), {
+            'border': borderValue
+        });
+    },
 }
 
 const tests = {
@@ -721,15 +738,15 @@ const tests = {
             utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownLabelSpecifyCorrectAnswerSection(), 1), 'Dropdown 2');
         });
 
-        //Note: Need to find a solution for this, not working
+        //Note: the expand and close dropdown does not work hence selecting one option here, the error message appears
         it('When user expands and collapses the dropdown without selecting any option, \'Error: Please set a correct answer.\' error message should be displayed', () => {
-            fillInTheGapsDropdownCommonComponent.steps.expandAndCollapseDropdownInSpecifyCorrectAnswerSection(0);
+            fillInTheGapsDropdownCommonComponent.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, 'Flower');
             utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
             utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Please set a correct answer.');
         });
 
         it('When the user selects any option from the dropdown, then error message should disappear and that option should be displayed on the dropdown', () => {
-            fillInTheGapsDropdownCommonComponent.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, 'Flower');
+            fillInTheGapsDropdownCommonComponent.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(1, 'Petal');
             commonComponents.steps.verifyErrorMessageIsNotDisplayed();
         });
 

package/cypress/pages/components/fillInTheGapsTextCommonComponent.js

@@ -103,8 +103,10 @@ const steps = {
     enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection: (responses) => {
         responses.forEach(({ responseIndex, responseText }) => {
             utilities.getNthElement(fillInTheGapsTextCommonComponent.answerInputFieldSpecifyCorrectAnswerSection(), responseIndex)
-                .clear()
-                .type(responseText, { delay: 500 })
+                .clear();
+            utilities.getNthElement(fillInTheGapsTextCommonComponent.answerInputFieldSpecifyCorrectAnswerSection(), responseIndex)
+                .type(responseText, { delay: 500 });
+            utilities.getNthElement(fillInTheGapsTextCommonComponent.answerInputFieldSpecifyCorrectAnswerSection(), responseIndex)
                 .blur();
         });
     },
@@ -131,8 +133,10 @@ const steps = {
     enterTextInAnswerInputFieldsPreviewTab: (responses) => {
         responses.forEach(({ responseIndex, responseText }) => {
             utilities.getNthElement(fillInTheGapsTextCommonComponent.answerInputFieldPreviewTab(), responseIndex)
-                .clear()
-                .type(responseText)
+                .clear();
+            utilities.getNthElement(fillInTheGapsTextCommonComponent.answerInputFieldPreviewTab(), responseIndex)
+                .type(responseText);
+            utilities.getNthElement(fillInTheGapsTextCommonComponent.answerInputFieldPreviewTab(), responseIndex)
                 .blur();
         });
     },

package/cypress/pages/components/gridQuestionCommonComponent.js

@@ -105,7 +105,7 @@ const selectors = {
     //Style and layout customization
     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}"]`)

package/cypress/pages/components/imageCanvasComponent.js

@@ -56,6 +56,7 @@ const selectors = {
     selectedColorBlockInTextColorPopup: () => cy.get('.color-library-selected'),
     textColorPopupWrapper: () => cy.get('[class*="Canvasstyle__TextColorPopupWrapper"]'),
     textColorLabelInTextColorPopup: () => cy.get('[class*="Canvasstyle__PopupText"]'),
+    canvasWrapperPreviewTab: () => cy.get('.image-container')
 }
 
 const steps = {
@@ -314,8 +315,6 @@ const steps = {
         imageCanvasComponent.canvasHeightInputField()
             .clear()
             .type(height);
-        imageCanvasComponent.canvasHeightInputField()
-            .blur();
     },
 
     /**
@@ -617,6 +616,117 @@ const steps = {
                 expect(hrefAttributeValue).to.include(fileFormat);
             });
     },
+
+    verifyResponseAreaConnectorEndPointShape: (endPointShape) => {
+        imageCanvasComponent.responseAreaWrapper()
+            .each($element => {
+                cy.wrap($element)
+                    .within(() => {
+                        switch (endPointShape) {
+                            case 'Circle':
+                                utilities.verifyElementVisibilityState(imageCanvasComponent.responseAreaPointer().find('circle'), 'visible');
+                                break;
+                            case 'Square':
+                                utilities.verifyElementVisibilityState(imageCanvasComponent.responseAreaPointer().find('rect[transform="translate(25 9)"]'), 'visible');
+                                break;
+                            case 'Diamond':
+                                utilities.verifyElementVisibilityState(imageCanvasComponent.responseAreaPointer().find('rect[transform="translate(39 4)rotate(45)"]'), 'visible');
+                                break;
+                            case 'None':
+                                imageCanvasComponent.responseAreaPointer()
+                                    .then(($element) => {
+                                        let element = $element[0].innerHTML;
+                                        expect(element).not.to.contain('rect[transform="translate(25 9)"]');
+                                        expect(element).not.to.contain('rect[transform="translate(39 4)rotate(45)"]');
+                                        expect(element).not.to.contain('circle');
+                                    });
+                                break;
+                            default:
+                                throw new Error('Invalid end point shape')
+                        }
+                    });
+            });
+    },
+
+    verifyResponseAreaConnectorEndPointShapePreviewTab: (endPointShape) => {
+        commonComponents.previewTabQuestionWrapper()
+            .within(() => {
+                imageCanvasComponent.responseAreaPointer()
+                    .each($element => {
+                        switch (endPointShape) {
+                            case 'Circle':
+                                utilities.verifyElementVisibilityState(cy.wrap($element).find('circle'), 'visible');
+                                break;
+                            case 'Square':
+                                utilities.verifyElementVisibilityState(cy.wrap($element).find('rect[transform="translate(25 9)"]'), 'visible');
+                                break;
+                            case 'Diamond':
+                                utilities.verifyElementVisibilityState(cy.wrap($element).find('rect[transform="translate(39 4)rotate(45)"]'), 'visible');
+                                break;
+                            case 'None':
+                                cy.wrap($element)
+                                    .then(($element) => {
+                                        let element = $element[0].innerHTML;
+                                        expect(element).not.to.contain('rect[transform="translate(25 9)"]');
+                                        expect(element).not.to.contain('rect[transform="translate(39 4)rotate(45)"]');
+                                        expect(element).not.to.contain('circle');
+                                    });
+                                break;
+                            default:
+                                throw new Error('Invalid end point shape')
+                        }
+                    });
+            });
+    },
+
+    /**
+     * Verify the dimensions of the response area.
+     * @param {number} width - The expected width of the response area.
+     * @param {number} height - The expected height of the response area.
+     */
+    verifyResponseAreaDimensions: (height, width) => {
+        imageCanvasComponent.responseArea()
+            .each(($element) => {
+                const tokenHeight = $element[0].clientHeight;
+                const tokenWidth = $element[0].clientWidth;
+                expect(tokenHeight).to.be.closeTo(height, 2)
+                expect(tokenWidth).to.be.closeTo(width, 2)
+            });
+    },
+
+    /**
+     * 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.
+     */
+    verifyResponseAreaOverImageFillColor: (responseAreaIndex, colorValue) => {
+        utilities.verifyCSS(utilities.getNthElement(imageCanvasComponent.responseArea(), responseAreaIndex), {
+            'background-color': colorValue
+        });
+    },
+
+    /**
+     * Verifies the border color of a response area element.
+     * @param {number} responseAreaIndex - The index of the response area to verify.
+     * @param {string} colorValue - The expected border color value.
+     */
+    verifyResponseAreaOverImageBorderColor: (responseAreaIndex, colorValue) => {
+        utilities.verifyCSS(utilities.getNthElement(imageCanvasComponent.responseArea(), responseAreaIndex), {
+            'border': colorValue
+        });
+    },
+
+    /**
+     * 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(imageCanvasComponent.responseArea(), responseAreaIndex), {
+            'border-style': styleName
+        });
+    },
 }
 
 const tests = {