itemengine-cypress-automation 1.0.247-06SeptUpdates-b1623d7.0 → 1.0.248-23rdSeptUpdates-8103a8f.0

package/cypress/pages/matchingPage.js

@@ -1,6 +1,6 @@
 import constants from "../fixtures/constants";
 import utilities from "../support/helpers/utilities";
-import { createQuestionBasePage, questionInstructionsComponent, autoScoredScoringPreviewTab, scoringSectionBaseEditTab, draggableOptionContainer, draggableOptionsSectionComponent, correctIncorrectAnswerLabelComponent, maximumCapacityPerDropzoneComponent, optionsWrapperComponent, ckEditorToolbar, equationEditorFlyout, autoScoredStudentViewSettings, autoScoredSpecifyCorrectAnswerSection, commonComponents, randomizeOptionsComponent, autoScoredScoringSectionMultiResponseType, allowMultipleInstancesOfSameDraggableOptionComponent, studentViewSettingsLabelComponent, ariaLabelSectionComponent, additionalSettingsAccessibilitySectionComponent, gradingViewEnumerationComponent, additionalSettingsPanel, toolSettingsComponent, styleAndLayoutCustomizationAccordionComponent } from "./components";
+import { createQuestionBasePage, questionInstructionsComponent, autoScoredScoringPreviewTab, scoringSectionBaseEditTab, draggableOptionContainer, draggableOptionsSectionComponent, correctIncorrectAnswerLabelComponent, maximumCapacityPerDropzoneComponent, optionsWrapperComponent, ckEditorToolbar, equationEditorFlyout, autoScoredStudentViewSettings, autoScoredSpecifyCorrectAnswerSection, commonComponents, randomizeOptionsComponent, autoScoredScoringSectionMultiResponseType, allowMultipleInstancesOfSameDraggableOptionComponent, studentViewSettingsLabelComponent, ariaLabelSectionComponent, additionalSettingsAccessibilitySectionComponent, gradingViewEnumerationComponent, additionalSettingsPanel, toolSettingsComponent, styleAndLayoutCustomizationAccordionComponent, connectorStyleStyleAndLayoutCustomizationComponent } from "./components";
 import { dialogBoxBase } from "./dialogBoxBase";
 const css = Cypress.env('css');
 const options = ['option 1', 'option 2', 'option 3'];
@@ -23,7 +23,7 @@ const selectors = {
     ...ariaLabelSectionComponent,
     ...scoringSectionBaseEditTab,
     ...additionalSettingsPanel,
-
+    ...connectorStyleStyleAndLayoutCustomizationComponent,
     //Edit tab
     promptInputField: () => cy.get('.edit-mcq-stems-wrapper [role="textbox"]'),
     promptInputFieldWrapper: () => cy.get('.edit-mcq-stems-wrapper .edit-mcq-option-wrapper'),
@@ -54,7 +54,7 @@ const selectors = {
     noConnectorButton: () => cy.get('button[aria-label*="Matching layout No connectors"]'),
     connectorLabel: () => cy.get('button[aria-label*="Matching layout Connectors"] .ngie-toggle-button-label'),
     noConnectorLabel: () => cy.get('button[aria-label*="Matching layout No connectors"] .ngie-toggle-button-label'),
-    optionInnerFieldInputFieldDropdown: () => cy.get(' .edit-mcq-options-wrapper [data-rbd-draggable-id*="option-draggable"] .MuiOutlinedInput-inputAdornedStart'),
+    optionInnnerFieldInputFieldDropdown: () => cy.get(' .edit-mcq-options-wrapper [data-rbd-draggable-id*="option-draggable"] .MuiOutlinedInput-inputAdornedStart'),
     //Specify correct answer section
     connectorIcon: () => cy.get('.correct-answer-accordion [class*="ClozeWithDragAndDropstyles__ShowIconWrapper"]'),
     dropzoneSpecifyCorrectAnswerSection: () => cy.get('.correct-answer-wrapper .authoring-droppable-hotspot-wrapper'),
@@ -166,8 +166,8 @@ const selectors = {
     draggableOptionsFillColorLabel: () => cy.get('.sub-section-label').eq(2),
     draggableOptionsBorderColorLabel: () => cy.get('.sub-section-label').eq(3),
     draggableOptionsLabel: () => cy.get('.draggable-options-label'),
-    dragHandleIconLabel: () => cy.get('[class*="__SubSectionLabel"]').eq(2),
-    dragHandle: () => cy.get('.draggable-item-wrapper [class*="drag"]'),
+    dragHandleIconLabel: () => cy.get('[class*="__SubSectionLabel"]').eq(3),
+    dragHandle: () => cy.get('[class*="DraggableItemstyle__ItemWrapper"] [class*="drag"]'),
     dragHandleOptions: () => cy.get('.drag-handle-icon-block'),
     draggableOptionPanelPlacementLabel: () => cy.get('.draggable-option-panel-label'),
     panelPlacementLabel: () => cy.get('.panel-placement-style .options-label'),
@@ -179,7 +179,20 @@ const selectors = {
     optionsPreviewTab: () => cy.get('[class*="CellDropZonestyles__DraggableItemWrapper"]'),
     optionPanelWrapper: () => cy.get('.option-drag-and-drop'),
     dropzoneCellSpecifyCorrectAnswerSection: () => cy.get('.correct-answer-accordion [class*="droppable-area"] .grading-style-with-enumeration'),
-    dropzoneCellPreviewTab: () => cy.get('.edit-question-preview-wrapper [class*="droppable-area"] .grading-style-with-enumeration')
+    dropzoneCellPreviewTab: () => cy.get('.edit-question-preview-wrapper [class*="droppable-area"] .grading-style-with-enumeration'),
+    draggableItemGrid: () => cy.get('[class*="ClozeWithDragAndDropstyles__DraggableItemsGrid"]'),
+    optionPlacementInDropzoneLabel: () => cy.get('.option-placement-label'),
+    inlineLabel: () => cy.get('.option-alignment [class*="OptionsContainerstyles__ToggleButtonWrapper"] [value="inline"] .ngie-toggle-button-label'),
+    blockLabel: () => cy.get('.option-alignment [class*="OptionsContainerstyles__ToggleButtonWrapper"] [value="block"] .ngie-toggle-button-label'),
+    inlineRadioButton: () => cy.get('.option-alignment [class*="OptionsContainerstyles__ToggleButtonWrapper"] [value="inline"]'),
+    blockRadioButton: () => cy.get('.option-alignment [class*="OptionsContainerstyles__ToggleButtonWrapper"] [value="block"]'),
+    expandIconButton: () => cy.get('.expand-dropzone-icon-button:visible'),
+    expandPopupDraggableOption: () => cy.get('.expand-dropzone-popup-overlay .draggable-item-wrapper'),
+    optionAlignmentInDropzoneLabel: () => cy.get('.option-alignment .options-label').eq(1),
+    optionAlignmentInDropzoneOptions: (alignmentOption) => cy.get(`.option-alignment button[aria-label*="option alignment in dropzone ${alignmentOption}"]`),
+    dropzoneConnectorStyleLabel: () => cy.get('.dropzone-connector-style-label'),
+    connectorLineTypeLabel: () => cy.get('[class*="__SubSectionLabel"]').eq(2),
+    connectorLine: () => cy.get('[class*="ClozeWithDragAndDropstyles__ShowIconWrapper"]:visible'),
 }
 
 const steps = {
@@ -205,7 +218,7 @@ const steps = {
     ...gradingViewEnumerationComponent.steps,
     ...ariaLabelSectionComponent.steps,
     ...styleAndLayoutCustomizationAccordionComponent.steps,
-
+    ...connectorStyleStyleAndLayoutCustomizationComponent.steps,
     //Edit tab
     addPrompt: () => {
         matchingPage.addPromptButton()
@@ -803,7 +816,7 @@ const steps = {
         matchingPage.dropzonePreviewTab()
             .find('[role="math"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            .contains(constants.CKEditorInputFieldEnteredEquationText);
+            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
         utilities.verifyElementVisibilityState(utilities.getNthElement(draggableOptionContainer.draggableOptionDragIcon(), optionIndex), 'exist');
     },
 
@@ -828,7 +841,7 @@ const steps = {
             .eq(optionIndex)
             .find('[role="math"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            .contains(constants.CKEditorInputFieldEnteredEquationText);
+            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
     },
 
     /**
@@ -865,7 +878,7 @@ const steps = {
             .eq(optionIndex)
             .find('[role="math"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            .contains(constants.CKEditorInputFieldEnteredEquationText);
+            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
         utilities.verifyElementVisibilityState(utilities.getNthElement(draggableOptionContainer.draggableOptionDragIcon(), optionIndex), 'exist');
     },
 
@@ -901,7 +914,7 @@ const steps = {
             .eq(optionIndex)
             .find('[role="math"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            .contains(constants.CKEditorInputFieldEnteredEquationText);
+            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
     },
 
     /**
@@ -2234,6 +2247,493 @@ const steps = {
                     .should('have.css', 'border-top-style', borderStyle);
             });
     },
+    /**
+    * Verifies if the specified panel placement option is selected.
+    * @param {string} placementOption - The panel placement option to verify.
+    */
+    verifyPanelPlacementOptionSelected: (placementOption) => {
+        matchingPage.panelPlacementOptions(placementOption)
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+    * Verifies the panel placement in the specify correct answer section.
+    * @param {string} placementOption - The panel placement option to verify.
+    */
+    verifyPanelPlacementSpecifyCorrectAnswerSection: (placementOption) => {
+        switch (placementOption) {
+            case 'Bottom':
+                matchingPage.optionPanelWrapper()
+                    .should('have.css', 'width', '844px')
+                    .and('have.css', 'padding-top', '32px')
+                    .and('have.css', 'padding-bottom', '16px')
+                break;
+            case 'Top':
+                matchingPage.optionPanelWrapper()
+                    .should('have.css', 'width', '844px')
+                    .and('have.css', 'padding-top', '16px')
+                    .and('have.css', 'padding-bottom', '32px')
+                break;
+            case 'Left':
+                matchingPage.optionPanelWrapper()
+                    .should('have.css', 'width', '200px')
+                    .and('have.css', 'padding-right', '24px')
+                    .and('have.css', 'padding-left', '8px')
+                break;
+            case 'Right':
+                matchingPage.optionPanelWrapper()
+                    .should('have.css', 'width', '200px')
+                    .and('have.css', 'padding-right', '8px')
+                    .and('have.css', 'padding-left', '24px')
+                break;
+        }
+    },
+
+    /**
+     * Selects the specified panel placement option.
+     * @param {string} placementOption - The panel placement option to select.
+     */
+    selectPanelPlacementOption: (placementOption) => {
+        matchingPage.panelPlacementOptions(placementOption)
+            .click();
+    },
+    /**
+ * Verifies the panel placement in the preview tab.
+ * @param {string} placementOption - The panel placement option to verify.
+ */
+    verifyPanelPlacementPreviewTab: (placementOption) => {
+        matchingPage.previewTabQuestionWrapper()
+            .within(() => {
+                switch (placementOption) {
+                    case 'Bottom':
+                        matchingPage.optionPanelWrapper()
+                            .should('have.css', 'width', '844px')
+                            .and('have.css', 'padding-top', '32px')
+                            .and('have.css', 'padding-bottom', '16px')
+                        break;
+                    case 'Top':
+                        matchingPage.optionPanelWrapper()
+                            .should('have.css', 'width', '844px')
+                            .and('have.css', 'padding-top', '16px')
+                            .and('have.css', 'padding-bottom', '32px')
+                        break;
+                    case 'Left':
+                        matchingPage.optionPanelWrapper()
+                            .should('have.css', 'width', '92px')
+                            .and('have.css', 'padding-right', '24px')
+                            .and('have.css', 'padding-left', '8px')
+                        break;
+                    case 'Right':
+                        matchingPage.optionPanelWrapper()
+                            .should('have.css', 'width', '92px')
+                            .and('have.css', 'padding-right', '8px')
+                            .and('have.css', 'padding-left', '24px')
+                        break;
+                }
+            });
+    },
+
+    /**
+     * Verifies if the specified option alignment in panel is selected.
+     * @param {string} alignmentOption - The alignment option to verify.
+     */
+    verifyOptionAlignmentInPanelOptionSelected: (alignmentOption) => {
+        matchingPage.optionAlignmentInPanelOptions(alignmentOption)
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+     * Verifies the option alignment in panel in the specify correct answer section.
+     * @param {string} optionAlignment - The option alignment to verify ('Left', 'Center', 'Right').
+     */
+    verifyOptionAlignmentInPanelInSpecifyCorrectAnswer: (optionAlignment) => {
+        switch (optionAlignment) {
+            case 'Left':
+                matchingPage.optionsWrapper()
+                    .should('have.css', 'justify-content', 'flex-start');
+                break;
+            case 'Center':
+                matchingPage.optionsWrapper()
+                    .should('have.css', 'justify-content', 'center');
+                break;
+            case 'Right':
+                matchingPage.optionsWrapper()
+                    .should('have.css', 'justify-content', 'flex-end');
+                break;
+        }
+    },
+
+    /**
+     * Selects the specified option alignment in panel.
+     * @param {string} alignmentOption - The alignment option to select.
+     */
+    selectOptionAlignmentInPanelOption: (alignmentOption) => {
+        matchingPage.optionAlignmentInPanelOptions(alignmentOption)
+            .click();
+    },
+
+    /**
+     * Verifies the option alignment in panel in the preview tab.
+     * @param {string} optionAlignment - The option alignment to verify ('Left', 'Center', 'Right').
+     */
+    verifyOptionAlignmentInPanelInPreviewTab: (optionAlignment) => {
+        switch (optionAlignment) {
+            case 'Left':
+                matchingPage.draggableItemGrid()
+                    .should('have.css', 'justify-content', 'flex-start');
+                break;
+            case 'Center':
+                matchingPage.draggableItemGrid()
+                    .should('have.css', 'justify-content', 'center');
+                break;
+            case 'Right':
+                matchingPage.draggableItemGrid()
+                    .should('have.css', 'justify-content', 'flex-end');
+                break;
+        }
+    },
+
+    /**
+     * Verifies that the specified drag handle option is selected.
+     * @param {number} index - The index of the drag handle option to verify.
+     */
+    verifyDragHandleOptionSelected: (index) => {
+        matchingPage.dragHandleOptions()
+            .eq(index)
+            .should('have.attr', 'aria-pressed', 'true')
+            .within(() => {
+                matchingPage.colorBlockSelectedIcon()
+                    .should('exist');
+            });
+    },
+
+    /**
+     * Verifies the drag handle icon in the "Specify Correct Answer" section.
+     * @param {string} dragHandleOption - The drag handle option to verify.
+     */
+    verifyDragHandleIconSpecifyCorrectAnswer: (dragHandleOption) => {
+        switch (dragHandleOption) {
+            case 'drag icon':
+                matchingPage.dragHandle()
+                    .should('have.class', 'drag-icon-button');
+                break;
+            case 'arrow icon':
+                matchingPage.dragHandle()
+                    .should('have.class', 'drag-arrows-icon');
+                break;
+            case 'none':
+                matchingPage.dragHandle()
+                    .should('not.exist');
+                break;
+        }
+    },
+
+    /**
+     * Selects a drag handle option.
+     * @param {number} index - The index of the drag handle option to select.
+     */
+    selectDragHandleOption: (index) => {
+        matchingPage.dragHandleOptions()
+            .eq(index)
+            .click();
+    },
+
+    /**
+     * Verifies the drag handle icon in the preview tab.
+     * @param {string} dragHandleOption - The drag handle option to verify.
+     */
+    verifyDragHandleIconPreviewTab: (dragHandleOption) => {
+        switch (dragHandleOption) {
+            case 'drag icon':
+                matchingPage.previewTabQuestionWrapper()
+                    .within(() => {
+                        matchingPage.dragHandle()
+                            .should('have.class', 'drag-icon-button');
+                    });
+                break;
+            case 'arrow icon':
+                matchingPage.previewTabQuestionWrapper()
+                    .within(() => {
+                        matchingPage.dragHandle()
+                            .should('have.class', 'drag-arrows-icon');
+                    });
+                break;
+            case 'none':
+                matchingPage.previewTabQuestionWrapper()
+                    .within(() => {
+                        matchingPage.dragHandle()
+                            .should('not.exist');
+                    });
+                break;
+        }
+    },
+
+    /**
+     * Verifies the background color of grid
+     * @param {string} colorValue - The expected background color value.
+     */
+    verifyDraggableOptionsFillColorSpecifyCorrectAnswerSection: (colorValue) => {
+        utilities.verifyCSS(matchingPage.draggableOption(), {
+            'background-color': colorValue
+        });
+    },
+
+    /**
+    * Verifies the background color of grid
+    * @param {string} colorValue - The expected background color value.
+    */
+    verifyDraggableOptionsFillColorPreviewTab: (colorValue) => {
+        matchingPage.previewTabQuestionWrapper()
+            .within(() => {
+                utilities.verifyCSS(matchingPage.draggableOption(), {
+                    'background-color': colorValue
+                });
+            });
+    },
+
+    /**
+     * Verifies the border color of grid
+     * @param {string} colorValue - The expected border color value.
+     */
+    verifyDraggableOptionsBorderColorSpecifyCorrectAnswer: (colorValue) => {
+        utilities.verifyCSS(matchingPage.draggableOption(), {
+            'border': `1px solid ${colorValue}`
+        });
+    },
+
+    /**
+    * Verifies the border color of grid
+    * @param {string} colorValue - The expected border color value.
+    */
+    verifyDraggableOptionsBorderColorPreviewTab: (colorValue) => {
+        matchingPage.previewTabQuestionWrapper()
+            .within(() => {
+                utilities.verifyCSS(matchingPage.draggableOption(), {
+                    'border': `1px solid ${colorValue}`
+                });
+            });
+    },
+
+    verifyInlineRadioButtonChecked: () => {
+        matchingPage.inlineRadioButton()
+            .should('have.class', 'ngie-toggle-button-selected');
+    },
+
+    verifyInlineOptionPlacementSpecifyCorrectAnswer: () => {
+        matchingPage.dropzoneSpecifyCorrectAnswerSection()
+            .should('have.css', 'flex-direction', 'row');
+    },
+
+    checkBlockRadioButton: () => {
+        matchingPage.blockRadioButton()
+            .click()
+            .should('have.class', 'ngie-toggle-button-selected');
+    },
+
+    verifyBlockOptionPlacementSpecifyCorrectAnswer: () => {
+        matchingPage.dropzoneSpecifyCorrectAnswerSection()
+            .should('have.css', 'flex-direction', 'column');
+    },
+
+    verifyInlineOptionPlacementPreviewTab: () => {
+        matchingPage.dropzonePreviewTab()
+            .should('have.css', 'flex-direction', 'row');
+    },
+
+    verifyBlockOptionPlacementPreviewTab: () => {
+        matchingPage.dropzonePreviewTab()
+            .should('have.css', 'flex-direction', 'column');
+    },
+
+    /**
+     * Verifies if the specified option alignment in panel is selected.
+     * @param {string} alignmentOption - The alignment option to verify.
+     */
+    verifyOptionAlignmentInDropzoneOptionSelected: (alignmentOption) => {
+        matchingPage.optionAlignmentInDropzoneOptions(alignmentOption)
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+ * Selects the specified option alignment in panel.
+ * @param {string} alignmentOption - The alignment option to select.
+ */
+    selectOptionAlignmentInDropzoneOption: (alignmentOption) => {
+        matchingPage.optionAlignmentInDropzoneOptions(alignmentOption.toLowerCase())
+            .click();
+    },
+
+    /**
+     * Verifies the option alignment in panel in the specify correct answer section.
+     * @param {string} optionAlignment - The option alignment to verify ('Left', 'Center', 'Right').
+     */
+    verifyOptionAlignmentInDropzoneInSpecifyCorrectAnswer: (optionAlignment) => {
+        switch (optionAlignment) {
+            case 'Left':
+                matchingPage.dropzoneSpecifyCorrectAnswerSection()
+                    .should('have.css', 'justify-content', 'left');
+                break;
+            case 'Center':
+                matchingPage.dropzoneSpecifyCorrectAnswerSection()
+                    .should('have.css', 'justify-content', 'center');
+                break;
+            case 'Right':
+                matchingPage.dropzoneSpecifyCorrectAnswerSection()
+                    .should('have.css', 'justify-content', 'end');
+                break;
+            default:
+                throw new Error('Invalid option alignment');
+        }
+    },
+
+    /**
+     * Verifies the option alignment in panel in the specify correct answer section.
+     * @param {string} optionAlignment - The option alignment to verify ('Left', 'Center', 'Right').
+     */
+    verifyOptionAlignmentInDropzoneInPreviewTab: (optionAlignment) => {
+        switch (optionAlignment) {
+            case 'Left':
+                matchingPage.dropzonePreviewTab()
+                    .should('have.css', 'justify-content', 'left');
+                break;
+            case 'Center':
+                matchingPage.dropzonePreviewTab()
+                    .should('have.css', 'justify-content', 'center');
+                break;
+            case 'Right':
+                matchingPage.dropzonePreviewTab()
+                    .should('have.css', 'justify-content', 'end');
+                break;
+            default:
+                throw new Error('Invalid option alignment');
+        }
+    },
+
+    verifyConnectorStyles: (connectorStyle) => {
+        matchingPage.connectorLine()
+            .each($element => {
+                cy.wrap($element)
+                    .within(() => {
+                        switch (connectorStyle) {
+                            case "simpleLink":
+                                utilities.verifyElementVisibilityState(cy.wrap($element).find('g[data-name="Icon link"]'), 'visible');
+                                cy.wrap($element).find('path[data-name="Path 3556"]')
+                                    .should('have.attr', 'fill', 'none')
+                                    .and('have.attr', 'stroke', 'rgba(107, 139, 255, 1)')
+                                    .and('have.attr', 'stroke-linecap', 'round')
+                                    .and('have.attr', 'stroke-linejoin', 'round')
+                                    .and('have.attr', 'stroke-width', '2');
+                                cy.wrap($element).find('path[data-name="Path 3557"]')
+                                    .should('have.attr', 'fill', 'none')
+                                    .and('have.attr', 'stroke', 'rgba(107, 139, 255, 1)')
+                                    .and('have.attr', 'stroke-linecap', 'round')
+                                    .and('have.attr', 'stroke-linejoin', 'round')
+                                    .and('have.attr', 'stroke-width', '2');
+                                cy.wrap($element).find('line[data-name="Line 1405"]')
+                                    .should('have.attr', 'fill', 'none')
+                                    .and('have.attr', 'stroke', 'rgba(107, 139, 255, 1)')
+                                    .and('have.attr', 'stroke-width', '2');
+                                cy.wrap($element).find('line[data-name="Line 1406"]')
+                                    .should('have.attr', 'fill', 'none')
+                                    .and('have.attr', 'stroke', 'rgba(107, 139, 255, 1)')
+                                    .and('have.attr', 'stroke-width', '2');
+                                break;
+                            case "mingleLink":
+                                utilities.verifyElementVisibilityState(cy.wrap($element).find('g[data-name="Icon link"]'), 'visible');
+                                cy.wrap($element).find('path[data-name="Path 3558"]')
+                                    .should('have.attr', 'fill', 'none')
+                                    .and('have.attr', 'stroke', '#6b8bff')
+                                    .and('have.attr', 'stroke-linecap', 'round')
+                                    .and('have.attr', 'stroke-linejoin', 'round')
+                                    .and('have.attr', 'stroke-width', '2');
+                                cy.wrap($element).find('path[data-name="Path 3559"]')
+                                    .should('have.attr', 'fill', 'none')
+                                    .and('have.attr', 'stroke', '#6b8bff')
+                                    .and('have.attr', 'stroke-linecap', 'round')
+                                    .and('have.attr', 'stroke-linejoin', 'round')
+                                    .and('have.attr', 'stroke-width', '2');
+                                cy.wrap($element).find('line[data-name="Line 1405"]')
+                                    .should('have.attr', 'fill', 'none')
+                                    .and('have.attr', 'stroke', '#6b8bff')
+                                    .and('have.attr', 'stroke-width', '2');
+                                cy.wrap($element).find('line[data-name="Line 1406"]')
+                                    .should('have.attr', 'fill', 'none')
+                                    .and('have.attr', 'stroke', '#6b8bff')
+                                    .and('have.attr', 'stroke-width', '2');
+                                break;
+                            case "leftArrow":
+                                utilities.verifyElementVisibilityState(cy.wrap($element).find('line[data-name="Line 678"]'), 'visible');
+                                cy.wrap($element).find('g[data-name="Ellipse 341"]')
+                                    .should('have.attr', 'fill', '#fff')
+                                    .and('have.attr', 'stroke', '#6b8bff')
+                                    .and('have.attr', 'stroke-width', '2');
+                                cy.wrap($element).find('path')
+                                    .should('have.attr', 'fill', 'none')
+                                    .and('have.attr', 'stroke', '#6b8bff')
+                                    .and('have.attr', 'stroke-linecap', 'round')
+                                    .and('have.attr', 'stroke-linejoin', 'round')
+                                    .and('have.attr', 'stroke-width', '2');
+                                cy.wrap($element).find('circle')
+                                    .should('exist');
+                                break;
+                            case "rightArrow":
+                                utilities.verifyElementVisibilityState(cy.wrap($element).find('line[data-name="Line 678"]'), 'visible');
+                                cy.wrap($element).find('g[data-name="Ellipse 341"]')
+                                    .should('have.attr', 'fill', '#fff')
+                                    .and('have.attr', 'stroke', '#6b8bff')
+                                    .and('have.attr', 'stroke-width', '2');
+                                cy.wrap($element).find('path')
+                                    .should('have.attr', 'fill', 'none')
+                                    .and('have.attr', 'stroke', '#6b8bff')
+                                    .and('have.attr', 'stroke-linecap', 'round')
+                                    .and('have.attr', 'stroke-linejoin', 'round')
+                                    .and('have.attr', 'stroke-width', '2');
+                                cy.wrap($element).find('circle')
+                                    .should('exist');
+                                break;
+                            case "doubleArrow":
+                                utilities.verifyElementVisibilityState(cy.wrap($element).find('line[data-name="Line 678"]'), 'visible');
+                                cy.wrap($element).find('path')
+                                    .first()
+                                    .should('have.attr', 'fill', 'none')
+                                    .and('have.attr', 'stroke', '#6b8bff')
+                                    .and('have.attr', 'stroke-linecap', 'round')
+                                    .and('have.attr', 'stroke-linejoin', 'round')
+                                    .and('have.attr', 'stroke-width', '2');
+                                cy.wrap($element).find('path')
+                                    .eq(1)
+                                    .should('have.attr', 'fill', 'none')
+                                    .and('have.attr', 'stroke', '#6b8bff')
+                                    .and('have.attr', 'stroke-linecap', 'round')
+                                    .and('have.attr', 'stroke-linejoin', 'round')
+                                    .and('have.attr', 'stroke-width', '2');
+                                break;
+                            case "line":
+                                utilities.verifyElementVisibilityState(cy.wrap($element).find('line[data-name="Line 1410"]'), 'visible');
+                                cy.wrap($element).find('line[data-name="Line 1410"]')
+                                    .should('have.attr', 'fill', 'none')
+                                    .and('have.attr', 'stroke', '#6b8bff')
+                                    .and('have.attr', 'stroke-linecap', 'round')
+                                    .and('have.attr', 'stroke-width', '2');
+                                break;
+                            case "dashed":
+                                utilities.verifyElementVisibilityState(cy.wrap($element).find('line[data-name="Line 1411"]'), 'visible');
+                                cy.wrap($element).find('line')
+                                    .should('have.attr', 'fill', 'none')
+                                    .and('have.attr', 'stroke', '#6b8bff')
+                                    .and('have.attr', 'stroke-linecap', 'round')
+                                    .and('have.attr', 'stroke-width', '2')
+                                    .and('have.attr', 'stroke-dasharray', '5 4');
+                                break;
+
+                            default:
+                                throw new Error(`Invalid connector style: ${connectorStyle}`);
+                        }
+                    });
+            });
+    }
+
+
 }
 
 const tests = {
@@ -2345,8 +2845,7 @@ const tests = {
                 .eq(inputFieldIndex)
                 .click()
                 .blur();
-            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'exist');
-            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Option is required.');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
         });
 
         it('User should be able to enter text in options input field', () => {

package/cypress/pages/multipleSelectionPage.js

@@ -366,7 +366,7 @@ const steps = {
             .eq(index)
             .find('[role="math"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            .contains(constants.CKEditorInputFieldEnteredEquationText);
+            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
     },
 
     /**
@@ -413,7 +413,7 @@ const steps = {
             .eq(index)
             .find('[role="math"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            .contains(constants.CKEditorInputFieldEnteredEquationText);
+            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
     },
 
     checkOptionsWrapperInSpecifyCorrectAnswerSection: (optionIndex) => {

package/cypress/pages/numberLineLabelPage.js

@@ -205,7 +205,7 @@ const steps = {
             .eq(index)
             .find('[role="math"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            .contains(constants.CKEditorInputFieldEnteredEquationText);
+            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
     },
 
     /**
@@ -362,7 +362,7 @@ const steps = {
             .eq(index)
             .find('[role="math"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            .contains(constants.CKEditorInputFieldEnteredEquationText);
+            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
     },
 
     /**
@@ -417,7 +417,7 @@ const steps = {
             .eq(index)
             .find('[role="math"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-            .contains(constants.CKEditorInputFieldEnteredEquationText);
+            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
     },