itemengine-cypress-automation 1.0.193-packageUpdated-7f1e306.0 → 1.0.193-packageUpdated-0af2e49.0

package/cypress/pages/chartsLinePage.js

@@ -1,17 +1,96 @@
+import utilities from "../support/helpers/utilities";
+import { autoScoredScoringPreviewTab, autoScoredStudentViewSettings, barAndLineChartComponent, chartsCommonComponent, commonComponents, createQuestionBasePage, questionInstructionsComponent, resetPopupComponent } from "./components";
+import { dialogBoxBase } from "./dialogBoxBase";
+const css = Cypress.env('css');
+
 const selectors = {
+    ...questionInstructionsComponent,
+    ...barAndLineChartComponent,
+    ...chartsCommonComponent,
+    ...commonComponents,
+    ...dialogBoxBase,
+    point: () => cy.get('.ngie-chart-point'),
     selectChartTypePoint: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] .ngie-chart-point'),
+    pointLockIcon: () => cy.get('[class*="ChartGridstyle__LineLockIconWrapper"]'),
+    lineChartDragIcon: () => cy.get('.line-chart-drag-icon'),
+
+    //specify correct answer section
+    specifyCorrectAnswerPoint: () => cy.get('.ngie-accordion .ngie-chart-point'),
+
+    //Preview tab
+    previewTabPoint: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible .ngie-chart-point'),
+    previewTabConnectorLine: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible .line-chart-connector-line'),
+
+    //Preview tab
+    previewTabPointLabel: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartGridstyle__NameDiv-"]'),
 }
 
 const steps = {
+    ...barAndLineChartComponent.steps,
+    ...createQuestionBasePage.steps,
+    ...questionInstructionsComponent.steps,
+    ...resetPopupComponent.steps,
+    ...autoScoredScoringPreviewTab.steps,
+    ...autoScoredStudentViewSettings.steps,
+    ...chartsCommonComponent.steps,
     /**
      * @description set the point height/value in the select chart type section chart
-     * @param {Object} pointProperties - The properties and changes to be done on the bar
-     * @param {number} pointProperties.pointIndex index of the bar
+     * @param {Object} pointProperties - The properties and changes to be done on the point
+     * @param {number} pointProperties.pointIndex index of the point
+     * @param {number} pointProperties.value value to which the point is to be set as per Y axis
+     * @param {number} pointProperties.range Maximum value of the axis on which point value is determined
+     */
+    setPointValueInSelectChartTypeSection: ({ pointIndex, value, range }) => {
+        utilities.getNthElement(chartsLinePage.selectChartTypePoint(), pointIndex)
+            .invoke('attr', 'height')
+            .then((pointValue) => {
+                let updatedPointValue = parseFloat(value /= range)
+                let originalPointValue = parseFloat(pointValue)
+                let unitChange = parseFloat(1 / range)
+                if (originalPointValue < updatedPointValue) {
+                    for (let i = originalPointValue; i < updatedPointValue; i = parseFloat((i + unitChange).toFixed(2))) {
+                        utilities.getNthElement(chartsLinePage.selectChartTypePoint(), pointIndex)
+                            .focus()
+                            .type('{upArrow}');
+                    }
+                } else if (originalPointValue > updatedPointValue) {
+                    for (let i = originalPointValue; i > updatedPointValue; i = parseFloat((i - unitChange).toFixed(2))) {
+                        utilities.getNthElement(chartsLinePage.selectChartTypePoint(), pointIndex)
+                            .focus()
+                            .type('{downArrow}');
+                    }
+                }
+                utilities.getNthElement(chartsLinePage.selectChartTypePoint(), pointIndex)
+                    .should('have.attr', 'height', updatedPointValue);
+            });
+    },
+
+    /**
+     * @description Lock the point in select chart type section chart
+     * @param {number} pointIndex Index of the point to be locked 
+     */
+    lockPoint: (pointIndex) => {
+        utilities.hoverOverElement(utilities.getNthElement(chartsLinePage.selectChartTypePoint(), pointIndex))
+        barAndLineChartComponent.barAndPointTooltipLockUnlockButton()
+            .click();
+        barAndLineChartComponent.barAndPointTooltipLockUnlockButton()
+            .should('have.attr', 'aria-label', 'locked bar');
+        utilities.hoverAwayFromElement();
+        utilities.getNthElement(chartsLinePage.selectChartTypePoint(), pointIndex)
+            .within(() => {
+                utilities.verifyElementVisibilityState(chartsLinePage.pointLockIcon(), 'visible');
+            });
+    },
+
+    /**
+     * @description set the point height/value in the specify correct answer section
+     * @param {Object} pointProperties - The properties and changes to be done on the point
+     * @param {number} pointProperties.pointIndex index of the point
      * @param {number} pointProperties.value value to which the point is to be set as per Y axis
-     * @param {number} pointProperties.range Maximum value of the axis on which bar value is determined
+     * @param {number} pointProperties.range Maximum value of the axis on which point value is determined
      */
-    setPointValueInSelectChartTypeSection: ({ barIndex, value, range }) => {
-        utilities.getNthElement(chartsBarPage.selectChartTypePoint(), barIndex)
+    setPointValueInSpecifyCorrectAnswerSection: ({ pointIndex, value, range }) => {
+        utilities.getNthElement(chartsLinePage.specifyCorrectAnswerPoint(), pointIndex)
             .invoke('attr', 'height')
             .then((pointValue) => {
                 let updatedPointValue = parseFloat(value /= range)
@@ -19,24 +98,304 @@ const steps = {
                 let unitChange = parseFloat(1 / range)
                 if (originalPointValue < updatedPointValue) {
                     for (let i = originalPointValue; i < updatedPointValue; i = parseFloat((i + unitChange).toFixed(2))) {
-                        utilities.getNthElement(chartsBarPage.selectChartTypePoint(), barIndex)
+                        utilities.getNthElement(chartsLinePage.specifyCorrectAnswerPoint(), pointIndex)
                             .focus()
                             .type('{upArrow}');
                     }
                 } else if (originalPointValue > updatedPointValue) {
                     for (let i = originalPointValue; i > updatedPointValue; i = parseFloat((i - unitChange).toFixed(2))) {
-                        utilities.getNthElement(chartsBarPage.selectChartTypePoint(), barIndex)
+                        utilities.getNthElement(chartsLinePage.specifyCorrectAnswerPoint(), pointIndex)
                             .focus()
                             .type('{downArrow}');
                     }
                 }
-                utilities.getNthElement(chartsBarPage.selectChartTypePoint(), barIndex)
+                utilities.getNthElement(chartsLinePage.specifyCorrectAnswerPoint(), pointIndex)
                     .should('have.attr', 'height', updatedPointValue);
             });
     },
+
+    //Preview tab
+    /**
+    * Verify the point value in preview tab
+    * @param {Object} pointProperties - The properties of the point
+    * @param {number} pointProperties.pointIndex index of the point
+    * @param {number} pointProperties.value Height of the point as per the axis
+    * @param {number} pointProperties.range Maximum value of the axis on which point value is determined
+    */
+    verifyPointValueInPreviewTab: ({ pointIndex, value, range }) => {
+        let pointHeight = parseFloat(value /= range)
+        utilities.getNthElement(chartsLinePage.previewTabPoint(), pointIndex)
+            .should('have.attr', 'height', pointHeight);
+    },
+
+    /**
+     * Verify the point is locked in preview tab
+     * @param {number} pointIndex index of the line
+     */
+    verifyPointIsLockedInPreviewTab: (pointIndex) => {
+        utilities.getNthElement(chartsLinePage.previewTabPoint(), pointIndex)
+            .within(() => {
+                utilities.verifyElementVisibilityState(chartsLinePage.pointLockIcon(), 'visible');
+            });
+    },
+
+    /**
+    * Verify locked point is uneditable in preview tab
+    * @param {number} pointIndex index of the point
+    */
+    verifyLockedPointIsUneditableInPreviewTab: (pointIndex) => {
+        utilities.getNthElement(chartsLinePage.previewTabPoint(), pointIndex)
+            .invoke('attr', 'height')
+            .then((pointValue) => {
+                let originalPointValue = parseFloat(pointValue)
+                utilities.getNthElement(chartsLinePage.previewTabPoint(), pointIndex)
+                    .focus()
+                    .type('{upArrow}{upArrow}{upArrow}{downArrow}{downArrow}{downArrow}', { force: true });
+                utilities.getNthElement(chartsLinePage.previewTabPoint(), pointIndex)
+                    .should('have.attr', 'height', originalPointValue);
+            });
+    },
+
+    /**
+     * @description set the point height/value in the preview tab
+     * @param {Object} pointProperties - The properties and changes to be done on the point
+     * @param {number} pointProperties.pointIndex index of the point
+     * @param {number} pointProperties.value value to which the point is to be set as per Y axis
+     * @param {number} pointProperties.range Maximum value of the axis on which point value is determined
+     */
+    setPointValueInPreviewTab: ({ pointIndex, value, range }) => {
+        utilities.getNthElement(chartsLinePage.previewTabPoint(), pointIndex)
+            .invoke('attr', 'height')
+            .then((pointValue) => {
+                let updatedPointValue = parseFloat(value /= range)
+                let originalPointValue = parseFloat(pointValue)
+                let unitChange = parseFloat(1 / range)
+                if (originalPointValue < updatedPointValue) {
+                    for (let i = originalPointValue; i < updatedPointValue; i = parseFloat((i + unitChange).toFixed(2))) {
+                        utilities.getNthElement(chartsLinePage.previewTabPoint(), pointIndex)
+                            .focus()
+                            .type('{upArrow}');
+                    }
+                } else if (originalPointValue > updatedPointValue) {
+                    for (let i = originalPointValue; i > updatedPointValue; i = parseFloat((i - unitChange).toFixed(2))) {
+                        utilities.getNthElement(chartsLinePage.previewTabPoint(), pointIndex)
+                            .focus()
+                            .type('{downArrow}');
+                    }
+                }
+                utilities.getNthElement(chartsLinePage.previewTabPoint(), pointIndex)
+                    .should('have.attr', 'height', updatedPointValue);
+            });
+    },
+
+    keyBoardUpPointInPreviewTab: (pointIndex) => {
+        utilities.getNthElement(chartsLinePage.previewTabPoint(), pointIndex)
+            .focus()
+            .type('{upArrow}');
+    },
+
+    keyBoardDownPointInPreviewTab: (pointIndex) => {
+        utilities.getNthElement(chartsLinePage.previewTabPoint(), pointIndex)
+            .focus()
+            .type('{downArrow}');
+    },
+
+    /**
+   * @description Edit point label in preview tab chart
+   * @param {number} pointIndex Index of the point to be edited
+   * @param {string} pointLabel Label to be given to the point
+   */
+    editPointLabelInPreviewTab: (pointIndex, pointLabel) => {
+        utilities.hoverOverElement(utilities.getNthElement(chartsLinePage.previewTabPoint(), pointIndex))
+        chartsLinePage.barAndPointTooltipLabelButton()
+            .click();
+        chartsLinePage.steps.addInputToChartLabelPopupInputField(pointLabel);
+        chartsLinePage.steps.saveGraphLabelPopup();
+        utilities.hoverAwayFromElement();
+        utilities.verifyInnerText(utilities.getNthElement(chartsLinePage.previewTabPointLabel(), pointIndex), pointLabel);
+    },
+
+    /**
+     * @description Delete point in preview tab
+    * @param {number} pointIndex Index of the point to be deleted
+     */
+    deletePointInPreviewTab: (pointIndex) => {
+        utilities.hoverOverElement(utilities.getNthElement(chartsLinePage.previewTabPoint(), pointIndex))
+        chartsLinePage.barAndPointTooltipDeleteButton()
+            .click();
+    },
+
+    /**
+     * Verify the point value in correct answer section tab
+     * @param {Object} pointProperties - The properties of the point
+     * @param {number} pointProperties.pointIndex index of the point
+     * @param {number} pointProperties.value Height of the point as per the axis
+     * @param {number} pointProperties.range Maximum value of the axis on which point value is determined
+     */
+    verifyPointValueInCorrectAnswerSection: ({ pointIndex, value, range }) => {
+        let pointValue = parseFloat(value /= range)
+        chartsLinePage.previewTabChartWrapper()
+            .eq(1)
+            .within(() => {
+                utilities.getNthElement(chartsLinePage.point(), pointIndex)
+                    .should('have.attr', 'height', pointValue);
+            });
+    },
+
+    /**
+     * Verify the correct/incorrect icon of point in correct answer section
+     * @param {number} pointIndex index of the point 
+     * @example verifyPointCorrectIconInCorrectAnswerSection(0)
+     */
+    verifyPointCorrectIconInCorrectAnswerSection: (pointIndex) => {
+        chartsLinePage.previewTabChartWrapper()
+            .eq(1)
+            .within(() => {
+                utilities.getNthElement(chartsLinePage.point(), pointIndex)
+                    .within(() => {
+                        chartsLinePage.tickIconWrapper()
+                            .and('have.class', 'correct-option-icon')
+                            .parent()
+                            .should('be.visible');
+                    });
+            });
+    },
+
+    /**
+    * Verify the correct/incorrect icon not exists for point in correct answer section
+    * @param {number} pointIndex index of the point 
+    */
+    verifyPointCorrectIncorrectIconNotExistsInCorrectAnswerSection: (pointIndex) => {
+        chartsLinePage.previewTabChartWrapper()
+            .eq(1)
+            .within(() => {
+                utilities.getNthElement(chartsLinePage.point(), pointIndex)
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(chartsLinePage.tickIconWrapper(), 'notExist');
+                    });
+            });
+    },
+
+    /**
+     * Verify the correct/incorrect icon of point in preview tab
+     * @param {number} pointIndex index of the point 
+     * @param {string} icon correct or incorrect icon
+     * @example verifyPointCorrectIncorrectIconInPreviewTab(0, 'correct')
+     */
+    verifyPointCorrectIncorrectIconInPreviewTab: (pointIndex, icon) => {
+        utilities.getNthElement(chartsLinePage.previewTabPoint(), pointIndex)
+            .within(() => {
+                chartsLinePage.tickIconWrapper()
+                    .and('have.class', `${icon}-option-icon`)
+                    .parent()
+                    .should('be.visible');
+            });
+    },
+
+    /**
+    * Verify the correct/incorrect icon not exists for point in preview tab
+    * @param {number} pointIndex index of the point 
+    */
+    verifyPointCorrectIncorrectIconNotExistsInPreviewTab: (pointIndex) => {
+        utilities.getNthElement(chartsLinePage.previewTabPoint(), pointIndex)
+            .within(() => {
+                utilities.verifyElementVisibilityState(chartsLinePage.tickIconWrapper(), 'notExist');
+            });
+    },
+
+    /**
+     * @description verify point in correct answer section
+     * @param {Object} pointProperties - The properties and changes to be done on the point
+     * @param {number} pointProperties.pointIndex index of the point
+     * @param {number} pointProperties.value value of th point as per Y axis
+     * @param {number} pointProperties.range Maximum value of the axis on which point value is determined
+     */
+    verifyPointInCorrectAnswerSection: ({ pointIndex, value, range }) => {
+        chartsLinePage.steps.verifyPointValueInCorrectAnswerSection({ pointIndex: pointIndex, value: value, range: range });
+        chartsLinePage.steps.verifyPointCorrectIconInCorrectAnswerSection(pointIndex);
+    },
+
+    /**
+     * @description verify locked point in correct answer section
+     * @param {Object} pointProperties - The properties and changes to be done on the point
+     * @param {number} pointProperties.pointIndex index of the point
+     * @param {number} pointProperties.value value of th point as per Y axis
+     * @param {number} pointProperties.range Maximum value of the axis on which point value is determined
+     */
+    verifyLockedPointInCorrectAnswerSection: ({ pointIndex, value, range }) => {
+        chartsLinePage.steps.verifyPointValueInCorrectAnswerSection({ pointIndex: pointIndex, value: value, range: range });
+        chartsLinePage.steps.verifyPointIsLockedInCorrectAnswerSection(pointIndex);
+        chartsLinePage.steps.verifyPointCorrectIncorrectIconNotExistsInCorrectAnswerSection(pointIndex);
+    },
+
+    /**
+     * Verify the point is locked in correct answer section
+     * @param {number} pointIndex index of the point
+     */
+    verifyPointIsLockedInCorrectAnswerSection: (pointIndex) => {
+        chartsLinePage.previewTabChartWrapper()
+            .eq(1)
+            .within(() => {
+                utilities.getNthElement(chartsLinePage.point(), pointIndex)
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(chartsLinePage.pointLockIcon(), 'visible');
+                    });
+            });
+    },
+}
+
+const tests = {
+    ...resetPopupComponent.tests,
+    ...autoScoredScoringPreviewTab.tests,
+    /**
+     * Verify point tooltip contents with css and a11y in preview tab
+     * @param {number} pointIndex index of the point
+     * @param {string} pointLabel label of the point
+     */
+    verifyPointTooltipContentsCSSAndA11yInPreviewTab: (pointIndex, pointLabel) => {
+        it('When user hovers over the point, then point tooltip should be displayed', () => {
+            utilities.getNthElement(chartsLinePage.previewTabPoint(), pointIndex)
+                .realHover({ position: 'left' });
+            utilities.verifyElementVisibilityState(chartsLinePage.barAndPointTooltipWrapper(), 'visible');
+        });
+
+        it('The point tooltip should contain and point label button, and delete button', () => {
+            utilities.verifyInnerText(barAndLineChartComponent.barAndPointTooltipLabelButton(), pointLabel);
+            utilities.verifyElementVisibilityState(barAndLineChartComponent.barAndPointTooltipDeleteButton(), 'visible');
+        });
+
+        it('When user hovers on the delete button, then \'Delete point\' tooltip should be displayed', () => {
+            chartsLinePage.barAndPointTooltipDeleteButton()
+                .verifyTooltip('Delete point');
+        });
+
+        it('When user hovers away from the point, then point tooltip should be not be displayed', () => {
+            utilities.hoverAwayFromElement();
+            utilities.verifyElementVisibilityState(chartsLinePage.barAndPointTooltipWrapper(), 'hidden');
+        });
+
+        it('CSS of point tooltip', { tags: 'css' }, () => {
+            utilities.hoverOverElement(utilities.getNthElement(chartsLinePage.previewTabPoint(), pointIndex));
+            utilities.verifyCSS(barAndLineChartComponent.barAndPointTooltipLabelButton(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            barAndLineChartComponent.barAndPointTooltipDeleteButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+            utilities.hoverAwayFromElement();
+        });
+
+        it('Accessibility of point tooltip', { tags: 'a11y' }, () => {
+            utilities.hoverOverElement(utilities.getNthElement(chartsLinePage.previewTabPoint(), pointIndex));
+            cy.checkAccessibility(chartsLinePage.barAndPointTooltipWrapper());
+            utilities.hoverAwayFromElement();
+        });
+    }
 }
 
 export const chartsLinePage = {
     ...selectors,
-    steps
+    steps,
+    tests
 }

package/cypress/pages/components/autoScoredScoringSectionMultiResponseType.js

@@ -275,7 +275,6 @@ const steps = {
         utilities.verifyElementVisibilityState(autoScoredScoringSectionMultiResponseType.pointsPerResponseLabel(), 'visible');
     },
 
-
     verifyAutomaticallySetPenaltyPointsCheckboxUncheckedState: () => {
         autoScoredScoringSectionMultiResponseType.automaticallySetPenaltyPointsCheckbox()
             .should('not.be.checked');

package/cypress/pages/components/autoScoredSpecifyCorrectAnswerSection.js

@@ -213,6 +213,9 @@ const tests = {
                 case 'number line - label':
                     helpText = 'You can set the correct answer by dragging the correct answer(s) in the response area(s).';
                     break;
+                case 'image highlight':
+                    helpText = 'You can set the correct answer by selecting the correct answer option.'
+                    break;
                 default:
                     throw new Error('Invalid question type');
             }

package/cypress/pages/components/backgroundImageUploadComponent.js

@@ -114,7 +114,7 @@ const tests = {
             backgroundImageUploadComponent.steps.uploadFile('highlightImage.jpg');
             utilities.verifyElementVisibilityState(backgroundImageUploadComponent.uploadImageProgressBar(), 'visible');
             backgroundImageUploadComponent.steps.verifyFileNameLabel('highlightImage.jpg');
-            if (questionType !== 'graphing' && questionType !== 'grid fill') {
+            if (questionType !== 'graphing' && questionType !== 'grid fill' && questionType !== 'image highlight') {
                 imageCanvasComponent.steps.verifyImageIsUploaded();
             }
         });

package/cypress/pages/components/barAndLineChartComponent.js

@@ -1,9 +1,12 @@
+import utilities from "../../support/helpers/utilities";
 import { chartsCommonComponent } from "./chartsCommonComponent";
 
 const selectors = {
     toolsLabel: () => cy.get('[class*="SelectChartTypestyles__OptionTitle"]'),
     addBarOrPointOptionButton: () => cy.get('#add .icon-button-custom-format'),
     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"]'),
     yAxisLabel: () => cy.get('[class*="ChartsPreviewstyles__LeftWrapper"] .title-container'),
     selectChartTypeChartToolsAddBarOrPointButton: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(0),
@@ -34,6 +37,17 @@ const selectors = {
 }
 
 const steps = {
+    /**
+     * @description Set the Max Y value in its input field
+     * @param {number} value Max Y value to be set 
+     */
+    setMaxYValue: (value) => {
+        barAndLineChartComponent.selectChartTypeMaxYInputField()
+            .type(`{backspace}{backspace}${value}`, { force: true })
+            .should('have.value', value)
+            .blur();
+    },
+
     selectAddBarOrPointToolbarOption: () => {
         barAndLineChartComponent.addBarOrPointOptionButton()
             .click()
@@ -114,7 +128,19 @@ const steps = {
         barAndLineChartComponent.steps.clickOnYAxisLabelButtonInPreviewTab();
         chartsCommonComponent.steps.addInputToChartLabelPopupInputField(text);
         chartsCommonComponent.steps.saveGraphLabelPopup();
-    }
+    },
+
+    /**
+     * @description Verify Y axis label in correct answer section
+     * @param {string} yAxisLabel
+     */
+    verifyYAxisLabelInCorrectAnswerSection: (yAxisLabel) => {
+        chartsCommonComponent.previewTabChartWrapper()
+            .eq(1)
+            .within(() => {
+                utilities.verifyTextContent(utilities.getNthElement(barAndLineChartComponent.yAxisLabel(), 0), yAxisLabel);
+            });
+    },
 }
 
 export const barAndLineChartComponent = {

package/cypress/pages/components/chartsCommonComponent.js

@@ -26,11 +26,16 @@ const selectors = {
     previewTabChartWrapper: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible'),
     previewTabGraphTitle: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartsPreviewstyles__TopWrapper"] .title-container'),
     previewTabXAxisLabelButton: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartsPreviewstyles__BottomWrapper"] .title-container'),
-    tickIconWrapper: () => cy.get('.tick-icon-wrapper svg'),
+    tickIconWrapper: () => cy.get('[class*="tick-icon-wrapper"] svg'),
     correctAnswersLabel: () => cy.get('[class*="Chartsstyle__CorrectAnswerHeader"]')
 }
 
 const steps = {
+    selectLineButton: () => {
+        chartsCommonComponent.lineToggleButton()
+            .click();
+    },
+
     /**
      * @description Set graph title
      * @param {string} text text to be set as graph title
@@ -129,7 +134,31 @@ const steps = {
         chartsCommonComponent.previewTabChartWrapper()
             .eq(1)
             .should('not.exist');
-    }
+    },
+
+    /**
+     * @description Verify graph title in correct answer section
+     * @param {string} graphTitle Title of graph
+     */
+    verifyGraphTitleInCorrectAnswerSection: (graphTitle) => {
+        chartsCommonComponent.previewTabChartWrapper()
+            .eq(1)
+            .within(() => {
+                utilities.verifyTextContent(utilities.getNthElement(chartsCommonComponent.graphTitle(), 0), graphTitle);
+            });
+    },
+
+    /**
+    * @description Verify X axis label in correct answer section
+    * @param {string} yAxisLabel
+    */
+    verifyXAxisLabelInCorrectAnswerSection: (XAxisLabel) => {
+        chartsCommonComponent.previewTabChartWrapper()
+            .eq(1)
+            .within(() => {
+                utilities.verifyTextContent(utilities.getNthElement(chartsCommonComponent.xAxisLabel(), 0), XAxisLabel);
+            });
+    },
 }
 
 export const chartsCommonComponent = {

package/cypress/pages/components/createQuestionBasePage.js

@@ -3,6 +3,7 @@ import { createItemPage } from "../createItemPage";
 import { dialogBoxBase } from "../dialogBoxBase";
 import { selectQuestionResourceToolPage } from "../selectQuestionResourceToolPage";
 import { commonComponents } from "./commonComponents";
+import { playbackControlsBaseComponent } from "./playbackControlsBaseComponent";
 import { questionInstructionsComponent } from "./questionInstructionsComponent";
 import { scoringSectionBase } from "./scoringSectionBase";
 const css = Cypress.env('css');

package/cypress/pages/components/layoutSectionComponent.js

@@ -63,9 +63,9 @@ const selectors = {
     maxLabel: () => cy.get('[class*="LineGraphComponentsstyles__GraphRightLeft"] [class*="LineGraphComponentsstyles__CustomInputFieldLabel"]').eq(1),
     maxInputField: () => cy.get('[class*="LineGraphComponentsstyles__GraphRightLeft"] input').eq(1),
     intervalLabel: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [aria-labelledby="Interval"]'),
-    intervalInputField: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] input[id="Interval"]'),
+    intervalInputField: () => cy.get('input[id="Interval"]'),
     annotateEveryLabel: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [aria-labelledby="Annotate every"]'),
-    annotateEveryInputField: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] input[id="Annotate every"]'),
+    annotateEveryInputField: () => cy.get('input[id="Annotate every"]'),
     lineSettingsToggleButtonWrapper: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [class*="SingleSelectToggleGroupstyles__ToggleButtonWrapper"]').eq(0),
     lineSettingsLabel: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] .single-select-toggle-group-title').eq(0),
     lineSettingsToggleButton: (ariaLabel = null) => {

package/cypress/pages/components/singleMultipleSelectionModeComponent.js

@@ -7,6 +7,11 @@ const steps = {
     selectMultipleSelectionToggle: () => {
         singleMultipleSelectionModeComponent.multipleSelectionToggleButton()
             .click();
+    },
+
+    selectSingleSelectionToggle: () => {
+        singleMultipleSelectionModeComponent.singleSelectionToggleButton()
+            .click();
     }
 }
 

package/cypress/pages/components/toolSettingsComponent.js

@@ -1,7 +1,7 @@
 import utilities from "../../support/helpers/utilities";
 const css = Cypress.env('css');
 
-const tools = ['Ruler', 'Protractor', 'Reading ruler', 'Simple Calculator', 'Scientific Calculator'];
+const tools = ['Ruler', 'Protractor', 'Reading ruler', 'Simple Calculator', 'Scientific Calculator', 'Compass'];
 const selectors = {
     toolSettingsPanel: () => cy.get('.tool-settings-customization-wrapper .ngie-accordion-summary'),
     toolSettingsRegion: () => cy.get('.tool-settings-customization-wrapper [role="region"]'),
@@ -149,7 +149,7 @@ const tests = {
         it(`When \'Tool settings\' accordion is expanded, then \'Add tools\' and \'Select the tools that will be displayed to the students.\' labels should be displayed. Five tools ${tools} should be displayed with their labels, icons, drag handle button and edit icon. By default tools should not be selected`, () => {
             utilities.verifyInnerText(toolSettingsComponent.addToolsLabel(), 'Add tools');
             utilities.verifyInnerText(toolSettingsComponent.toolSettingsHelpText(), 'Select the tools that will be displayed to the students.');
-            utilities.verifyElementCount(toolSettingsComponent.toolButton(), 5);
+            utilities.verifyElementCount(toolSettingsComponent.toolButton(), 6);
             tools.forEach((toolName, toolIndex) => {
                 toolSettingsComponent.steps.verifyToolButton(toolIndex, toolName);
             });

package/cypress/pages/feedbackScalePage.js

@@ -38,7 +38,7 @@ const selectors = {
     deleteOptionAccordionButton: () => cy.get('[aria-label*="Delete"][aria-label*="ption"]'),
     optionTextInputField: () => cy.get('input[aria-label="Option text"]'),
     legendTextLabel: () => cy.get('.legend-wrapper [class*="LabelWrapper"]'),
-    legendTextInputField: () => cy.get('.legend-wrapper input'),
+    legendTextInputField: () => cy.get('.legend-wrapper [role="textbox"]'),
     optionTextLabel: () => cy.get('[class*="FeedbackScaleOptionWrapper"] [class*="LabelWrapper"]'),
     addOptionButton: () => cy.get('.feedback-scale-add-option button'),
     colorSectionLabel: () => cy.get('[class*="FeedbackScalestyles__ColorLabelWrapper"]'),

package/cypress/pages/gridFillPage.js

@@ -1,5 +1,5 @@
 import { commonComponents, autoScoredScoringSectionMultiResponseType, questionInputFieldComponent, correctIncorrectAnswerLabelComponent, questionInstructionsComponent, scoringSectionBaseEditTab, createQuestionBasePage, additionalSettingsPanel, autoScoredScoringPreviewTab, additionalSettingsAccessibilitySectionComponent, autoScoredStudentViewSettings, autoScoredSpecifyCorrectAnswerSection, studentViewSettingsLabelComponent, colorPopupComponent, backgroundImageUploadComponent, imageCanvasComponent, imageActionsComponent } from "./components";
-import { dialogBoxBase } from ".";
+import { dialogBoxBase, studentViewPage } from ".";
 import utilities from "../support/helpers/utilities";
 const css = Cypress.env('css');
 
@@ -2867,11 +2867,18 @@ const steps = {
         utilities.verifyElementVisibilityState(gridFillPage.gridWrapperPreviewTab().eq(1), 'notExist');
     },
 
-     /**
-     * @param {number} points - The points to be allotted.
-     * @description - Allots points in the scoring section.
-     */
-     allotPoints: (points) => {
+    clickOnGoToGradingViewButton: () => {
+        studentViewPage.buttonGoToGradingView()
+            .click({ force: true });
+        cy.url()
+            .should('contain', 'grading-view');
+    },
+
+    /**
+    * @param {number} points - The points to be allotted.
+    * @description - Allots points in the scoring section.
+    */
+    allotPoints: (points) => {
         scoringSectionBaseEditTab.pointsInputField()
             .eq(0)
             .clear()