itemengine-cypress-automation 1.0.253-TEMSmokeTestUpdates-82559a5.0 → 1.0.254-UpdatedRepo4thNov-c5b0050.0

package/cypress/pages/components/essayResponseCommonComponents.js

@@ -31,13 +31,32 @@ const selectors = {
             return cy.get('.essay-preview-wrapper a[role="button"]')
         }
     },
-
+    popupLabel: () => cy.get('[class*="ColorOptionsDialogstyles__PopupHeading"]'),
+    colorOption: () => cy.get('.color-block'),
+    responseFieldText: () => cy.get('.cke_contents p'),
+    colorPicker: () => cy.get('[class*="ColorPickerstyles__ColorPickerIconWrapper"]'),
+    colorOptionEditTab: () => cy.get('[class*="ColorSelectionComponentstyles__ColorPickerWrapper"] .color-picker-block'),
+    defaultColorLabel: () => cy.get('[class*="ColorSelectionComponentstyles__LabelWrapper"]'),
+    enableColorPickerLabel: () => cy.get('[data-ngie-testid="enable-color-picker-checkbox"] .MuiFormControlLabel-label'),
+    enableColorPickerCheckbox: () => cy.get('[data-ngie-testid="enable-color-picker-checkbox"] .MuiCheckbox-root'),
+    fontSizeOption: (fontSizeOption = null) => {
+        if (fontSizeOption) {
+            return cy.get(`[class*="cke_panel_list"][title*="(${fontSizeOption})"]`)
+        } else {
+            return cy.get('li[class*="cke_panel_list"]')
+        }
+    },
+    clearTextMessage: () => cy.get('[class*="indexstyle__ClearPopupContent"]'),
+    cancelButton: () => cy.get('.reject-button'),
+    clearAllButton: () => cy.get('.accept-button'),
+    clearAllLabel: () => cy.get('.dialog-title-clear-all-popup'),
+    selectColorLabel: () => cy.get('[class*="ColorOptionsDialogstyles__LabelWrapper"]'),
     //Customize Formatting options section
     customizeFormattingOptionsAccordionLabel: () => cy.get('.customize-formatting-options-label'),
     customizeFormattingOptionsSectionExpandIcon: () => cy.get('.customize-formatting-option-wrapper [class*="expandIconWrapper"]'),
     customizeFormattingOptionsTiles: (formattingOption = null) => {
         if (formattingOption) {
-            return cy.get(`.toolbar-options-wrapper .icon-button-custom-format[aria-label*="${formattingOption}"]`)
+            return cy.get(`.icon-button-custom-format[aria-label*="${formattingOption}"]`)
         } else {
             return cy.get('.toolbar-options-wrapper .icon-button-custom-format')
         }
@@ -56,6 +75,7 @@ const selectors = {
     responseField: () => cy.get('[title="Enter your response to the question here."]'),
     responseFieldWordCount: () => cy.get('[class*="InputLimitLabelWrapper"]'),
     responseFieldEquation: () => cy.get('.cke_widget_element'),
+    responseFieldText: () => cy.get('[class*="EssayResponseGradingViewstyle__GradingViewWrapper"] .question-text-wrapper'),
 
     //Additional settings, These are old selectors. Need to update them along with additional settings file revamp
     studentResponseAndLayoutLabel: () => cy.get('.layout-text'),
@@ -293,8 +313,10 @@ const steps = {
     },
 
     verifyGradingViewResponseFieldIsNonEditable: () => {
-        essayResponseCommonComponents.responseField()
-            .should('have.attr', 'contenteditable', 'false');
+        essayResponseCommonComponents.responseFieldText()
+            .then(($el) => {
+                expect($el[0].isContentEditable).to.be.false;
+            });
     },
 
     /**
@@ -320,7 +342,7 @@ const steps = {
      * @description Select the toolbar option in preview tab.
      */
     selectPreviewTabToolbarOption: (toolbarOption) => {
-        if (toolbarOption == 'Insert Horizontal Line' || toolbarOption == 'Code Editor' || toolbarOption == 'Increase Indent' || toolbarOption == 'Decrease Indent' || toolbarOption == 'Remove Format') {
+        if (toolbarOption == 'Insert Horizontal Line' || toolbarOption == 'Code Editor' || toolbarOption == 'Increase Indent' || toolbarOption == 'Decrease Indent' || toolbarOption == 'Remove Format' || toolbarOption == 'Clear all') {
             essayResponseCommonComponents.previewTabToolbarOption(toolbarOption)
                 .click()
                 .should('have.attr', 'aria-pressed', 'false');
@@ -328,7 +350,12 @@ const steps = {
             essayResponseCommonComponents.previewTabToolbarOption(toolbarOption)
                 .click()
                 .should('have.attr', 'aria-pressed', 'true');
-        } else {
+        }
+        else if (toolbarOption == 'Text Color' || toolbarOption == 'Highlight Text' || toolbarOption == 'Font Size') {
+            essayResponseCommonComponents.previewTabToolbarOption(toolbarOption)
+                .click()
+        }
+        else {
             essayResponseCommonComponents.previewTabToolbarOption(toolbarOption)
                 .click();
         }
@@ -565,7 +592,118 @@ const steps = {
         }
         essayResponseCommonComponents.responseField()
             .verifyInnerHTML(formattedText);
-    }
+    },
+
+    /**
+    * select color option in preview tab.
+    * @param {number} index - The color option number.
+    */
+    selectColorOptionInPreviewTab: (index) => {
+        essayResponseCommonComponents.colorOption()
+            .eq(index)
+            .click()
+    },
+
+    /**
+    * verify response field text in preview tab.
+    * @param {string} color - The color option number.
+    */
+    verifyResponseFieldTextColor: (color) => {
+        utilities.verifyCSS(essayResponseCommonComponents.responseFieldText().find('span'), {
+            'color': color
+        });
+    },
+
+    /**
+    * verify response field text font size in preview tab.
+    * @param {number} size - The font size.
+    */
+    verifyResponseFieldTextFontSize: (size) => {
+        utilities.verifyCSS(essayResponseCommonComponents.responseFieldText().find('span'), {
+            'font-size': `${size}px`
+        });
+    },
+
+    /**
+    * verify response field text font size in preview tab.
+    * @param {number} size - The font size.
+    */
+    verifyResponseFieldTextFontSizeNew: (size) => {
+        utilities.verifyCSS(essayResponseCommonComponents.responseFieldText(), {
+            'font-size': `${size}px`
+        });
+    },
+
+    /**
+    * verify response field text is highted preview tab.
+    * @param {string} color - The color option number.
+    * @param {string} text -response field text
+    */
+    verifyResponseFieldTextIsHighlighted: (color, text) => {
+        utilities.verifyCSS(essayResponseCommonComponents.responseFieldText().find('span').contains(text), {
+            'background-color': color
+        });
+    },
+
+    clickOnColorPicker: () => {
+        essayResponseCommonComponents.colorPicker()
+            .click()
+    },
+
+    /**
+    * verify font size list content.
+    * @param {string} option - The font size option.
+    */
+    verifyFontSizeListContent: (option) => {
+        cy.getIframeBody()
+            .within(() => {
+                essayResponseCommonComponents.fontSizeOption()
+                    .contains(option, { matchCase: false })
+                    .should('exist');
+            });
+    },
+
+    /**
+    * verify font size list content.
+    * @param {string} option - The font size option.
+    */
+    selectFontSizeOption: (option) => {
+        cy.getIframeBody()
+            .within(() => {
+                essayResponseCommonComponents.fontSizeOption()
+                    .contains(option, { matchCase: false })
+                    .click();
+            });
+    },
+
+    /**
+    * verify font size list content.
+    * @param {string} option - The font size option.
+    */
+    verifySelectedFontSize: (option) => {
+        essayResponseCommonComponents.fontSizeOption(option)
+            .should('have.attr', 'aria-selected', 'true')
+    },
+
+    clickOnClearAllButton: () => {
+        essayResponseCommonComponents.clearAllButton()
+            .click()
+    },
+
+    clickOnEnableColorPickerCheckbox: () => {
+        essayResponseCommonComponents.enableColorPickerCheckbox()
+            .click()
+    },
+
+    /**
+    * verify response field text in preview tab.
+    * @param {string} color - The color option number.
+    */
+    verifyResponseFieldTextNewColor: (color) => {
+        utilities.verifyCSS(essayResponseCommonComponents.responseFieldText(), {
+            'color': color
+        });
+    },
 }
 
 const tests = {

package/cypress/pages/components/imageCanvasComponent.js

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

package/cypress/pages/components/index.js

@@ -66,4 +66,5 @@ export * from './figCommonStyleAndLayoutComponent'
 export * from './showAvailableOptionsToStudents';
 export * from './showStudentMaximumNumberOfPossibleSelections';
 export * from './draggableOptionsStyleAndLayoutComponent';
-export * from './connectorStyleStyleAndLayoutCustomizationComponent'
+export * from './connectorStyleStyleAndLayoutCustomizationComponent';
+export * from './ckEditorAudioPlayerComponent';

package/cypress/pages/components/layoutSectionComponent.js

@@ -41,7 +41,9 @@ const selectors = {
     showLabelsLabel: () => cy.get('[data-ngie-testid="display-values-checkbox"] .MuiFormControlLabel-label'),
     showLabelsCheckbox: () => cy.get('[data-ngie-testid="display-values-checkbox"] input'),
     showTicksLabel: () => cy.get('[data-ngie-testid="display-nodes-checkbox"] .MuiFormControlLabel-label'),
+    displayMinorNodeLabel: () => cy.get('[data-ngie-testid="display-minor-nodes-checkbox"] .MuiFormControlLabel-label'),
     showTicksCheckbox: () => cy.get('[data-ngie-testid="display-nodes-checkbox"] input'),
+    displayMinorNodeCheckbox: () => cy.get('[data-ngie-testid="display-minor-nodes-checkbox"] input'),
     showMinLabel: () => cy.get('[data-ngie-testid="show-min-checkbox"] .MuiFormControlLabel-label'),
     showMinCheckbox: () => cy.get('[data-ngie-testid="show-min-checkbox"] input'),
     showMaxLabel: () => cy.get('[data-ngie-testid="show-max-checkbox"] .MuiFormControlLabel-label'),
@@ -221,7 +223,7 @@ const steps = {
 
     /**
      * @description Verify that the specified checkbox is checked.
-     * @param {('Stagger response'|'Display values'|'Display nodes'|'Show min'|'Show max'|'Limit number of responses'|'Display minimum arrow'|'Display maximum arrow'|'Stack segment/ray')} checkboxName - The name of the checkbox to verify.
+     * @param {('Stagger response'|'Display values'|'Display nodes'|'Show min'|'Show max'|'Limit number of responses'|'Display minimum arrow'|'Display maximum arrow'|'Stack segment/ray'|'Display minor nodes')} checkboxName - The name of the checkbox to verify.
      */
     verifyCheckboxChecked: (checkboxName) => {
         switch (checkboxName) {
@@ -261,6 +263,10 @@ const steps = {
                 layoutSectionComponent.limitNumbersOfResponsesCheckbox()
                     .should('be.checked');
                 break;
+            case 'Display minor nodes':
+                layoutSectionComponent.displayMinorNodeCheckbox()
+                    .should('be.checked');
+                break;
             default:
                 throw new Error('invalid state string');
         }
@@ -268,7 +274,7 @@ const steps = {
 
     /**
      * @description Verify that the specified checkbox is unchecked.
-     * @param {('Stagger response'|'Display values'|'Display nodes'|'Show min'|'Show max'|'Limit number of responses'|'Display minimum arrow'|'Display maximum arrow'|'Stack segment/ray')} checkboxName - The name of the checkbox to verify.
+     * @param {('Stagger response'|'Display values'|'Display nodes'|'Show min'|'Show max'|'Limit number of responses'|'Display minimum arrow'|'Display maximum arrow'|'Stack segment/ray'|'Display minor nodes')} checkboxName - The name of the checkbox to verify.
      */
     verifyCheckboxUnchecked: (checkboxName) => {
         switch (checkboxName) {
@@ -308,6 +314,10 @@ const steps = {
                 layoutSectionComponent.limitNumbersOfResponsesCheckbox()
                     .should('not.be.checked');
                 break;
+            case 'Display minor nodes':
+                layoutSectionComponent.displayMinorNodeCheckbox()
+                    .should('not.be.checked');
+                break;
             default:
                 throw new Error('invalid state string');
         }
@@ -315,7 +325,7 @@ const steps = {
 
     /**
     *@description Checks the specified checkbox
-    * @param {('Stagger response'|'Display values'|'Display nodes'|'Show min'|'Show max'|'Limit number of responses'|'Display minimum arrow'|'Display maximum arrow'|'Stack segment/ray')} checkboxName - The name of the checkbox.
+    * @param {('Stagger response'|'Display values'|'Display nodes'|'Show min'|'Show max'|'Limit number of responses'|'Display minimum arrow'|'Display maximum arrow'|'Stack segment/ray'|'Display minor nodes')} checkboxName - The name of the checkbox.
     */
     checkCheckbox: (checkboxName) => {
         switch (checkboxName) {
@@ -364,6 +374,11 @@ const steps = {
                     .click()
                     .should('be.checked');
                 break;
+            case 'Display minor nodes':
+                layoutSectionComponent.displayMinorNodeCheckbox()
+                    .click()
+                    .should('be.checked');
+                break;
             default:
                 throw new Error('invalid state string');
         }
@@ -371,7 +386,7 @@ const steps = {
 
     /**
      *@description Unchecks the specified checkbox
-     * @param {('Stagger response'|'Display values'|'Display nodes'|'Show min'|'Show max'|'Limit number of responses'|'Display minimum arrow'|'Display maximum arrow'|'Stack segment/ray')} checkboxName - The name of the checkbox.
+     * @param {('Stagger response'|'Display values'|'Display nodes'|'Show min'|'Show max'|'Limit number of responses'|'Display minimum arrow'|'Display maximum arrow'|'Stack segment/ray'|'Display minor nodes')} checkboxName - The name of the checkbox.
      */
     uncheckCheckbox: (checkboxName) => {
         switch (checkboxName) {
@@ -420,6 +435,11 @@ const steps = {
                     .click()
                     .should('not.be.checked');
                 break;
+            case 'Display minor nodes':
+                layoutSectionComponent.displayMinorNodeCheckbox()
+                    .click()
+                    .should('not.be.checked');
+                break;
             default:
                 throw new Error('invalid state string');
         }
@@ -815,6 +835,7 @@ const tests = {
             { getLabelElement: layoutSectionComponent.showMinLabel, label: 'Show min', defaultChecked: true },
             { getLabelElement: layoutSectionComponent.showMaxLabel, label: 'Show max', defaultChecked: true },
             { getLabelElement: layoutSectionComponent.limitNumbersOfResponsesLabel, label: 'Limit number of responses', defaultChecked: true },
+            { getLabelElement: layoutSectionComponent.displayMinorNodeLabel, label: 'Display minor nodes', defaultChecked: true },
         ];
 
         it('Layout label should be displayed', () => {

package/cypress/pages/components/numberLineCommonComponent.js

@@ -20,6 +20,9 @@ const selectors = {
     correctIncorrectAnswerTextWrapper: () => cy.get('[class*="CorrectIncorrectWrapper"]'),
     warningMessage: () => cy.get('.disabled-wrapper-cls [class*="DisabledTextWrapper"]'),
     warningMessageContainer: () => cy.get('.disabled-wrapper-cls'),
+    nodesOnNumberLineOfNumberLineSection: () => cy.get('[class*="LineGridSettingstyles__LineSettingWrapper"] .ngie-jxgbox [stroke-linecap="round"]'),
+    nodesOnNumberLineOfSpecifyCorrectAnswerSection: () => cy.get('[class*="AnswerAccordionstyles__AnswerPanel"] .ngie-jxgbox [stroke-linecap="round"]'),
+    nodesOnNumberLineInPreviewTab: () => cy.get('[class*="TabsComponentstyles__PreviewWrapper"] .ngie-jxgbox [stroke-linecap="round"]'),
 }
 
 const steps = {
@@ -422,6 +425,24 @@ const tests = {
         it('When user checks Display nodes checkbox, then ticks on number line should be displayed in number line section and specify correct answer section', () => {
 
         });
+
+        it('When user set annotation to 2, small node will appear between 2 major nodes in number line section and specify correct answer section', () => {
+            numberLineCommonComponent.steps.enterTextInAnnotateEveryInputField(2);
+            numberLineCommonComponent.steps.verifyTextInAnnotateEveryInputField(2);
+            numberLineCommonComponent.steps.verifyAnnotatedLabelsOnNumberLineNumberLineSection(-10, 2);
+            utilities.verifyElementCount(numberLineCommonComponent.nodesOnNumberLineOfNumberLineSection(), 21);
+            numberLineCommonComponent.steps.verifyAnnotatedLabelsOnNumberLineSpecifyCorrectAnswerSection(-10, 2);
+            utilities.verifyElementCount(numberLineCommonComponent.nodesOnNumberLineOfSpecifyCorrectAnswerSection(), 21);
+        });
+
+        it('When the user unchecks the \'Display minor nodes\' then the only major nodes should display on the number line of number line section and specify correct answer section', () => {
+            numberLineCommonComponent.steps.uncheckCheckbox('Display minor nodes');
+            utilities.verifyElementCount(numberLineCommonComponent.nodesOnNumberLineOfNumberLineSection(), 11);
+            utilities.verifyElementCount(numberLineCommonComponent.nodesOnNumberLineOfSpecifyCorrectAnswerSection(), 11);
+            numberLineCommonComponent.steps.checkCheckbox('Display minor nodes');
+            numberLineCommonComponent.steps.enterTextInAnnotateEveryInputField(1);
+        });
+        
     },
 
     /**
@@ -517,6 +538,24 @@ const tests = {
         it('When user checks Display nodes checkbox, then ticks on number line should be displayed in preview tab', () => {
 
         });
+
+        it('When user set annotation to 2, small node will appear between 2 major nodes in number line section and specify correct answer section', () => {
+            numberLineCommonComponent.steps.switchToEditTab();
+            numberLineCommonComponent.steps.enterTextInAnnotateEveryInputField(2);
+            numberLineCommonComponent.steps.verifyTextInAnnotateEveryInputField(2);
+            numberLineCommonComponent.steps.switchToPreviewTab();
+            utilities.verifyElementCount(numberLineCommonComponent.nodesOnNumberLineInPreviewTab(), 21);
+        });
+
+        it('When the user unchecks the \'Display minor nodes\' then the only major nodes should display on the number line of number line section and specify correct answer section', () => {
+            numberLineCommonComponent.steps.switchToEditTab();
+            numberLineCommonComponent.steps.uncheckCheckbox('Display minor nodes');
+            numberLineCommonComponent.steps.switchToPreviewTab();
+            utilities.verifyElementCount(numberLineCommonComponent.nodesOnNumberLineInPreviewTab(), 11);
+            numberLineCommonComponent.steps.switchToEditTab();
+            numberLineCommonComponent.steps.checkCheckbox('Display minor nodes');
+            numberLineCommonComponent.steps.enterTextInAnnotateEveryInputField(1);
+        });
     },
 
     /**

package/cypress/pages/components/optionsWrapperComponent.js

@@ -183,7 +183,7 @@ const steps = {
             .eq(index)
             .find('[data-widget="ngie_equation"]')
             .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
-        //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
+            //  .contains(constants.CKEditorInputFieldEnteredEquationText); ;
     },
 
     /**

package/cypress/pages/components/scoringSectionBaseEditTab.js

@@ -157,6 +157,7 @@ const steps = {
     expandMinimumScoringDropdown: () => {
         scoringSectionBaseEditTab.minimumScoringDropdown()
             .click();
+        cy.wait(1500);
     },
 
     /**

package/cypress/pages/dragAndDropIntoCategoriesPage.js

@@ -154,6 +154,8 @@ const selectors = {
     optionsWrapper: () => cy.get('[class*="StandardDropZonestyles__DraggableItemsGrid"]'),
     optionsWrapperPreviewTab: () => cy.get('.edit-question-preview-wrapper [class*="StandardDropZonestyles__DraggableItemsGrid"]'),
     optionsPreviewTab: () => cy.get('[class*="CellDropZonestyles__DraggableItemWrapper"]'),
+    iconWrapperInPreviewTab: () => cy.get('[class*="DragAndDropMatrixstyles__TickIconWrapper"]'),
+    gridBoxInPreviewTab: () => cy.get('[class*="CellDropZonestyles__DraggableWrapper"]'),
     optionPanelWrapper: () => cy.get('.option-drag-and-drop')
 }
 
@@ -482,6 +484,19 @@ const steps = {
             });
     },
 
+    /**
+     * Verifies the presence of an incorrect icon for a specified empty container in the Preview Tab.
+     * @param {number} optionIndex - The index of the container to verify.
+     */
+    verifyIncorrectIconForEmptyContainer: (optionIndex) => {
+        dragAndDropIntoCategoriesPage.gridBoxInPreviewTab()
+            .eq(optionIndex)
+            .within(() => {
+                dragAndDropIntoCategoriesPage.iconWrapperInPreviewTab()
+                    .should('have.class', 'incorrect-circle-icon');
+            });
+    },
+
     /**
      * Verifies the presence of a correct option icon for a specified option in the Preview Tab.
      * @param {number} optionIndex - The index of the option to verify.
@@ -495,6 +510,19 @@ const steps = {
             });
     },
 
+    /**
+     * Verifies the presence of a correct icon for a specified empty container in the Preview Tab.
+     * @param {number} optionIndex - The index of the container to verify.
+     */
+    verifyCorrectIconForEmptyContainer: (optionIndex) => {
+        dragAndDropIntoCategoriesPage.gridBoxInPreviewTab()
+            .eq(optionIndex)
+            .within(() => {
+                dragAndDropIntoCategoriesPage.iconWrapperInPreviewTab()
+                    .should('have.class', 'correct-circle-icon');
+            });
+    },
+
     setRowsAndColumnsForQuestion: () => {
         dragAndDropIntoCategoriesPage.steps.modifyTableCellProperty(0, 'None');
         dragAndDropIntoCategoriesPage.steps.modifyTableCellProperty(3, 'Heading');

package/cypress/pages/fillInTheGapsDragAndDropPage.js

@@ -381,7 +381,7 @@ const steps = {
             .click();
     },
 
-    CancelDropzoneAlternateAnswersPopup: () => {
+    cancelDropzoneAlternateAnswersPopup: () => {
         fillInTheGapsDragAndDropPage.alternateAnswerPopupCancelButton()
             .click();
     },

package/cypress/pages/graphingPage.js

@@ -38,9 +38,9 @@ const selectors = {
     snapToGridCheckbox: () => cy.get('[data-ngie-testid="snap-to-grid-checkbox"] input'),
     snapToGridLabel: () => cy.get('[data-ngie-testid="snap-to-grid-checkbox"] .MuiFormControlLabel-label'),
     graphLine: () => cy.get('line[tabindex="null"]'),
-    graphCircle: () => cy.get('ellipse[stroke-linecap="butt"]'),
+    graphCircle: () => cy.get('ellipse[fill-opacity="0"]'),
     graphPolygon: () => cy.get('polygon'),
-    graphSine: () => cy.get('path[stroke-linecap="butt"][stroke-opacity="1"]'),
+    graphSine: () => cy.get('[pointer-events="visiblePainted"][tabindex="0"][fill-rule="evenodd"]'),
     textOnGraphEditTab: (graphText) => {
         if (graphText) {
             return cy.get('[class*="GraphingWrapper"] .ngie-jxgbox .JXGtext').contains(graphText)
@@ -116,7 +116,7 @@ const selectors = {
     yAxisGraphPreviewTab: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox svg line[stroke-linecap="butt"]').eq(1),
     graphLinePreviewTab: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox svg').eq(0).find('line[tabindex="null"]'),
     graphLineSegmentsPreviewTab: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox svg').eq(0).find('line[tabindex="0"]'),
-    graphCirclePreviewTab: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox svg').eq(0).find('ellipse[stroke-linecap="butt"]'),
+    graphCirclePreviewTab: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox svg').eq(0).find('ellipse[fill-opacity="0"]'),
     graphPolygonPreviewTab: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox svg').eq(0).find('polygon'),
     textOnGraphPreviewTab: (graphText) => {
         if (graphText) {
@@ -125,7 +125,7 @@ const selectors = {
             return cy.get('[class*="GraphingQuestion"] .ngie-jxgbox .JXGtext')
         }
     },
-    graphSineAndParabolaPreviewTab: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox svg').eq(0).find('path[stroke-linecap="butt"][stroke-opacity="1"]'),
+    graphSineAndParabolaPreviewTab: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox svg').eq(0).find('[pointer-events="visiblePainted"][tabindex="0"][fill-rule="evenodd"]'),
     repeatedPointsSwitch: () => cy.get('.repeated-points-wrapper .MuiSwitch-input'),
     graphLabelInputField: () => cy.get('.label-tool:visible'),
 
@@ -224,17 +224,17 @@ const selectors = {
     makeResponsiveHelpText: () => cy.get('[class*="WhatIsThisDescriptionWrapper"]'),
 
     //Grading view
-    gradingViewQuestionSineWave: () => cy.get('.ngie-jxgbox').eq(0).find('path[stroke-linecap="butt"][stroke-opacity="1"]'),
-    gradingViewQuestionCircle: () => cy.get('.ngie-jxgbox').eq(0).find('ellipse[stroke-linecap="butt"]'),
+    gradingViewQuestionSineWave: () => cy.get('.ngie-jxgbox').eq(0).find('[pointer-events="visiblePainted"][tabindex="0"][fill-rule="evenodd"]'),
+    gradingViewQuestionCircle: () => cy.get('.ngie-jxgbox').eq(0).find('ellipse[fill-opacity="0"]'),
     gradingViewQuestionLine: () => cy.get('.ngie-jxgbox').eq(0).find('line[tabindex="null"]'),
 
     //Correct answer section
     correctAnswerLabel: () => cy.get('[class*="AnswerLabel"]'),
     graphCorrectAnswerSection: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox svg'),
-    graphCircleCorrectAnswerSection: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox').eq(1).find('ellipse[stroke-linecap="butt"]'),
+    graphCircleCorrectAnswerSection: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox').eq(1).find('ellipse[fill-opacity="0"]'),
     graphLineCorrectAnswerSection: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox').eq(1).find('line[tabindex="null"]'),
     graphPolygonCorrectAnswerSection: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox').eq(1).find('polygon'),
-    graphSineWaveCorrectAnswerSection: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox').eq(1).find('path[stroke-linecap="butt"][stroke-opacity="1"]'),
+    graphSineWaveCorrectAnswerSection: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox').eq(1).find('[pointer-events="visiblePainted"][tabindex="0"][fill-rule="evenodd"]'),
     correctIncorrectStatusMessageText: () => cy.get('[class*="Graphingstyles__CorrectIncorrectWrapper"]'),
     incorrectIcon: () => cy.get('[data-icon="Incorrect"]'),
     correctIcon: () => cy.get('[data-icon="CorrectAnswer"]'),

package/cypress/pages/gridFillPage.js

@@ -2943,6 +2943,17 @@ const tests = {
         it('When user selects a cell by clicking on it, then error message should not be displayed', () => {
             gridFillPage.steps.selectCellSpecifyCorrectAnswerSection(0, 0);
             commonComponents.steps.verifyErrorMessageIsNotDisplayed();
+            if (accordionName == 'Correct') {
+                autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'notExist');
+                    });
+            } else {
+                autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'notExist');
+                    });
+            };
         });
 
         it(`\'Match exact position of cells\' label and checkbox should be displayed in the ${accordionName} accordion and the checkbox should be checked`, () => {
@@ -2973,17 +2984,6 @@ const tests = {
             gridFillPage.steps.clearCellShadeCountInputField();
             utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible')
             utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Please set a correct answer.');
-            if (accordionName == 'Correct') {
-                autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
-                    .within(() => {
-                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
-                    });
-            } else {
-                autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
-                    .within(() => {
-                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
-                    });
-            };
         });
 
         it('CSS of \'Cell shade count\' input field error message', { tags: 'css' }, () => {

package/cypress/pages/multipleSelectionPage.js

@@ -1,6 +1,9 @@
 import constants from "../fixtures/constants";
 import utilities from "../support/helpers/utilities"
 import { autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, commonComponents, createQuestionBasePage, optionsWrapperComponent, questionInstructionsComponent, scoringSectionBaseEditTab, autoScoredScoringPreviewTab, autoScoredStudentViewSettings, additionalSettingsPanel, ckEditorToolbar, equationEditorFlyout, mcqAdditionalSettingsBase, randomizeOptionsComponent, lockUnlockOptionComponent, additionalSettingsAccessibilitySectionComponent } from "./components"
+import { ckEditorAudioPlayerComponent } from "../pages/components/ckEditorAudioPlayerComponent"
+import { ckEditorEquationEditorComponent } from "../pages/components/ckEditorEquationEditorComponent"
+import { ckEditorInsertTableComponent } from "../pages/components/ckEditorInsertTableComponent"
 const css = Cypress.env('css');
 const options = ['Pollution caused by treating chemical waste', 'Pollution caused by cement production', 'Pollution caused by methane production', 'Pollution caused by cement and methane production'];
 
@@ -20,6 +23,9 @@ const selectors = {
     ...equationEditorFlyout,
     ...randomizeOptionsComponent,
     ...lockUnlockOptionComponent,
+    ...ckEditorAudioPlayerComponent,
+    ...ckEditorEquationEditorComponent,
+    ...ckEditorInsertTableComponent,
     //Specify correct answer section
     optionWrapperSpecifyCorrectAnswerSection: () => cy.get('.mcq-option-wrapper'),
     optionsText: () => cy.get('.mcq-label'),
@@ -83,6 +89,9 @@ const steps = {
     ...commonComponents.steps,
     ...randomizeOptionsComponent.steps,
     ...lockUnlockOptionComponent.steps,
+    ...ckEditorAudioPlayerComponent.steps,
+    ...ckEditorEquationEditorComponent.steps,
+    ...ckEditorInsertTableComponent.steps,
     /**
      * Verifies the contents of an option wrapper in the 'Specify correct answer' section for multiple selection questions.
      * @param {number} optionIndex - The index of the option wrapper to be verified.
@@ -843,6 +852,9 @@ const tests = {
     ...autoScoredStudentViewSettings.tests,
     ...additionalSettingsAccessibilitySectionComponent.tests,
     ...mcqAdditionalSettingsBase.tests,
+    ...ckEditorAudioPlayerComponent.tests,
+    ...ckEditorEquationEditorComponent.tests,
+    ...ckEditorInsertTableComponent.tests,
     /**
      * Verifies the contents and functionality of the 'Specify correct answer' accordion for multiple selection questions.
      * @param {{'Correct' | 'Alternative'}} accordionName - The name of the accordion to be used in the validation.

package/cypress/pages/singleSelectionPage.js

@@ -708,7 +708,7 @@ const tests = {
 
         it('On deleting correct answer option(s), \'Error: Please set a correct answer.\' validation error message should be thrown along with an error icon on the \'Correct\' tab', () => {
             singleSelectionPage.steps.deleteOption(1);
-            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'exist');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
             autoScoredSpecifyCorrectAnswerSection.steps.verifySpecifyCorrectAnswerErrorIconNotExists();
         });
 

package/cypress/pages/textEntryMathPage.js

@@ -878,6 +878,13 @@ const steps = {
             .should('not.be.checked');
     },
 
+    switchToGradingView: () => {
+        autoScoredScoringPreviewTab.gradingViewRadioButton()
+            .click()
+            .should('be.checked');
+        cy.wait(1500);
+    },
+
     //Additional settings
     selectEquationEditorSectionCategories: (categoriesArray) => {
         categoriesArray.forEach((categoryName) => {
@@ -906,6 +913,17 @@ const steps = {
     addResponseContainer: () => {
         textEntryMathPage.addResponseContainerButton()
             .click();
+    },
+
+    /**
+     * @description type in the equation editor input field preview tab
+     * @param {string} text - text to be entered in the input field
+     * @param {number} index - index of input field in preview tab
+     */
+    enterTextInPreviewInputFieldNew: (index, text) => {
+        textEntryMathPage.responseFieldPreviewTab()
+            .eq(index)
+            .type(text);
     }
 }