itemengine-cypress-automation 1.0.198 → 1.0.199

package/cypress/e2e/ILC/chartsDotsPlot/toolSettings.js

@@ -0,0 +1,76 @@
+import { toolSettingsComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+import { dialogBoxBase, chartsDotPlotPage, rulerPage } from "../../../pages";
+
+const css = Cypress.env('css');
+
+describe('Create Item page: Tool settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Tool settings: Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            chartsDotPlotPage.steps.navigateToCreateQuestion('charts');
+            chartsDotPlotPage.steps.selectDotPlot();
+        });
+
+        toolSettingsComponent.tests.verifyToolSettingsContent();
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/568938
+    describe('Tool settings: Edit tool settings', () => {
+        abortEarlySetup();
+        before(() => {
+            chartsDotPlotPage.steps.navigateToCreateQuestion('charts');
+            chartsDotPlotPage.steps.selectDotPlot();
+            toolSettingsComponent.steps.expandToolSettingsAccordion();
+        });
+
+        it('When user clicks on edit icon for ruler tool, then popup for ruler tool settings should be displayed', () => {
+            toolSettingsComponent.steps.clickOnToolEditIcon(0);
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+        });
+
+        it('When user modifies the settings for the ruler tool and clicks the \'Ok\' button, then ruler tool should enter selected state.', () => {
+            rulerPage.steps.expandUnitOfMeasurementDropdown();
+            rulerPage.steps.selectOptionFromUnitOfMeasurementDropdown('Inch');
+            rulerPage.steps.selectOptionFromLengthOfRulerOptions('12 in');
+            rulerPage.steps.selectColorBlock(1);
+            rulerPage.steps.expandRotationDropdown();
+            rulerPage.steps.selectOptionFromRotationDropdown('Allow rotation and display angle');
+            rulerPage.steps.enterInputToOpacityInputField(60);
+            rulerPage.steps.checkAddShowHideButtonCheckbox();
+            toolSettingsComponent.steps.clickOnOkButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            toolSettingsComponent.steps.verifyToolSelectedState(0);
+        });
+
+        it('When user has made changes for ruler tool in edit tab then changes should be reflected in the ruler tool in the preview tab', () => {
+            cy.log('Switching to Preview Tab');
+            rulerPage.steps.switchToPreviewTab();
+            rulerPage.steps.verifyPreviewTabRulerVisibilityButtonLabel('Show');
+            rulerPage.steps.clickOnRulerVisibilityButton();
+            utilities.verifyElementVisibilityState(rulerPage.rulerPreviewTab(), 'visible');
+            rulerPage.steps.verifyLengthOfRulerInPreview('12in');
+            rulerPage.steps.verifyColorOfRulerInPreview(1);
+            rulerPage.steps.verifyRulerOpacityInPreview('0.6');
+            rulerPage.steps.verifyRotationButtonWithDegreeVisible();
+        });
+
+        it('CSS of the \'Hide ruler\' button', { tags: 'css' }, () => {
+            utilities.verifyCSS(rulerPage.rulerVisibilityButtonPreviewTab(), {
+                'border': `1px solid ${css.color.activeButtons}`,
+                'background-color': css.color.defaultBackground,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('Accessibility of \'Hide ruler\' button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(rulerPage.rulerVisibilityButtonPreviewTab().parents('[class*="ItemEnginestyles__MainWrapper"]'));
+        });
+    });
+});

package/cypress/pages/chartsBarPage.js

@@ -1,14 +1,16 @@
 import utilities from "../support/helpers/utilities"
-import { barAndLineChartComponent, chartsCommonComponent, createQuestionBasePage, questionInstructionsComponent, resetPopupComponent, scoringSectionBaseEditTab, commonComponents, autoScoredStudentViewSettings, autoScoredScoringPreviewTab } from "./components";
+import { barAndLineChartComponent, chartsCommonComponent, createQuestionBasePage, questionInstructionsComponent, resetPopupComponent, scoringSectionBaseEditTab, commonComponents, autoScoredStudentViewSettings, autoScoredScoringPreviewTab, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, correctIncorrectAnswerLabelComponent } from "./components";
 import { dialogBoxBase } from "./dialogBoxBase";
 const css = Cypress.env('css');
 
 const selectors = {
     ...questionInstructionsComponent,
     ...barAndLineChartComponent,
-    ...chartsCommonComponent,
     ...commonComponents,
     ...dialogBoxBase,
+    ...autoScoredScoringPreviewTab,
+    ...correctIncorrectAnswerLabelComponent,
+    ...chartsCommonComponent,
     barDragHandle: () => cy.get('.bar-drag-handle'),
     bar: () => cy.get('.ngie-chart-point'),
     selectChartTypeMaxXLabel: () => cy.get('[class*="ChartsPreviewstyles__CustomInputFieldLabel"]'),
@@ -23,10 +25,10 @@ const selectors = {
     specifyCorrectAnswerBar: () => cy.get('.ngie-accordion .ngie-chart-point'),
 
     //Preview tab
-    previewTabBarDragHandle: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible .bar-drag-handle'),
-    previewTabBar: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible .ngie-chart-point'),
-    previewTabBarLabel: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartGridstyle__NameDiv-"]'),
-    previewTabBarTooltipColorBlock: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartTooltipstyles__ColorBox"]:visible')
+    previewTabBarDragHandle: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] .bar-drag-handle'),
+    previewTabBar: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] .ngie-chart-point'),
+    previewTabBarLabel: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartGridstyle__NameDiv-"]'),
+    previewTabBarTooltipColorBlock: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartTooltipstyles__ColorBox"]')
 }
 
 const steps = {
@@ -38,6 +40,9 @@ const steps = {
     ...chartsCommonComponent.steps,
     ...resetPopupComponent.steps,
     ...autoScoredStudentViewSettings.steps,
+    ...autoScoredScoringSectionMultiResponseType.steps,
+    ...autoScoredSpecifyCorrectAnswerSection.steps,
+    ...correctIncorrectAnswerLabelComponent.steps,
     /**
      * @description set the bar height/value in the select chart type section chart
      * @param {Object} barProperties - The properties and changes to be done on the bar
@@ -49,9 +54,12 @@ const steps = {
         utilities.getNthElement(chartsBarPage.selectChartTypeBar(), barIndex)
             .invoke('attr', 'height')
             .then((barValue) => {
-                let updatedBarValue = parseFloat(value /= range)
+                let updatedBarValue = value / range
                 let originalBarValue = parseFloat(barValue)
-                let unitChange = parseFloat(1 / range)
+                let unitChange = 1 / range
+                console.log(updatedBarValue)
+                console.log(originalBarValue)
+                console.log(unitChange)
                 if (originalBarValue < updatedBarValue) {
                     for (let i = originalBarValue; i < updatedBarValue; i = parseFloat((i + unitChange).toFixed(2))) {
                         utilities.getNthElement(chartsBarPage.selectChartTypeBarDragHandle(), barIndex)
@@ -81,9 +89,9 @@ const steps = {
         utilities.getNthElement(chartsBarPage.specifyCorrectAnswerBar(), barIndex)
             .invoke('attr', 'height')
             .then((barValue) => {
-                let updatedBarValue = parseFloat(value /= range)
+                let updatedBarValue = value / range
                 let originalBarValue = parseFloat(barValue)
-                let unitChange = parseFloat(1 / range)
+                let unitChange = 1 / range
                 if (originalBarValue < updatedBarValue) {
                     for (let i = originalBarValue; i < updatedBarValue; i = parseFloat((i + unitChange).toFixed(2))) {
                         utilities.getNthElement(chartsBarPage.specifyCorrectAnswerBarDragHandle(), barIndex)
@@ -155,7 +163,7 @@ const steps = {
      * @param {number} barProperties.range Maximum value of the axis on which bar value is determined
      */
     verifyBarHeightInPreviewTab: ({ barIndex, barValue, range }) => {
-        let barHeight = parseFloat(barValue /= range)
+        let barHeight = barValue / range
         utilities.getNthElement(chartsBarPage.previewTabBar(), barIndex)
             .should('have.attr', 'height', barHeight);
     },
@@ -180,7 +188,7 @@ const steps = {
         utilities.getNthElement(chartsBarPage.previewTabBar(), barIndex)
             .invoke('attr', 'height')
             .then((barValue) => {
-                let originalBarValue = parseFloat(barValue)
+                let originalBarValue = barValue
                 utilities.getNthElement(chartsBarPage.previewTabBarDragHandle(), barIndex)
                     .focus()
                     .type('{upArrow}{upArrow}{upArrow}{downArrow}{downArrow}{downArrow}', { force: true });
@@ -204,9 +212,9 @@ const steps = {
         utilities.getNthElement(chartsBarPage.previewTabBar(), barIndex)
             .invoke('attr', 'height')
             .then((barValue) => {
-                let updatedBarValue = parseFloat(value /= range)
+                let updatedBarValue = value / range
                 let originalBarValue = parseFloat(barValue)
-                let unitChange = parseFloat(1 / range)
+                let unitChange = 1 / range
                 if (originalBarValue < updatedBarValue) {
                     for (let i = originalBarValue; i < updatedBarValue; i = parseFloat((i + unitChange).toFixed(2))) {
                         utilities.getNthElement(chartsBarPage.previewTabBarDragHandle(), barIndex)
@@ -270,7 +278,7 @@ const steps = {
      * @param {number} barProperties.range Maximum value of the axis on which bar value is determined
      */
     verifyBarHeightInCorrectAnswerSection: ({ barIndex, barValue, range }) => {
-        let barHeight = parseFloat(barValue /= range)
+        let barHeight = barValue / range
         chartsBarPage.previewTabChartWrapper()
             .eq(1)
             .within(() => {

package/cypress/pages/chartsDotPlotPage.js

@@ -1,5 +1,7 @@
 import utilities from "../support/helpers/utilities"
-import { createQuestionBasePage, questionInstructionsComponent, resetPopupComponent, scoringSectionBaseEditTab, chartsCommonComponent, commonComponents, autoScoredStudentViewSettings, autoScoredScoringPreviewTab, layoutSectionComponent, autoScoredSpecifyCorrectAnswerSection, correctIncorrectAnswerLabelComponent } from "./components";
+import { createQuestionBasePage, questionInstructionsComponent, resetPopupComponent, scoringSectionBaseEditTab, chartsCommonComponent, commonComponents, autoScoredStudentViewSettings, autoScoredScoringPreviewTab, layoutSectionComponent, autoScoredSpecifyCorrectAnswerSection, correctIncorrectAnswerLabelComponent, autoScoredScoringSectionMultiResponseType, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent, studentViewSettingsLabelComponent } from "./components";
+import { selectQuestionResourceToolPage } from "./selectQuestionResourceToolPage";
+import { dialogBoxBase } from "./dialogBoxBase";
 const css = Cypress.env('css');
 
 const selectors = {
@@ -8,6 +10,12 @@ const selectors = {
     ...commonComponents,
     ...autoScoredStudentViewSettings,
     ...correctIncorrectAnswerLabelComponent,
+    ...autoScoredScoringSectionMultiResponseType,
+    ...additionalSettingsPanel,
+    ...studentViewSettingsLabelComponent,
+    ...autoScoredScoringPreviewTab,
+    ...selectQuestionResourceToolPage,
+    ...dialogBoxBase,
 
     dotPlotToggleButton: () => cy.get('[data-ngie-testid="dot-plot-toggle-button"]'),
     minInputFieldSelectChartType: () => cy.get('input[aria-label="Min"]'),
@@ -27,6 +35,8 @@ const selectors = {
             return cy.get('.ngie-dot-plot-chart .chart-controls button')
         }
     },
+    labelsNumberLineAxisSelectChartType: () => cy.get('.ngie-dot-plot-chart .label-wrapper [class*="DotPlotChartstyles__Label"]'),
+    numberLineAxisSelectChartType: () => cy.get('.ngie-dot-plot-chart .number-line-wrapper'),
     //Specify correct answer
     dotColumnSpecifyCorrectAnswer: () => cy.get('.ngie-accordion-detail .ngie-chart-point'),
     addButtonSpecifyCorrectAnswer: () => cy.get('.ngie-accordion-detail .charts-tooltip-wrapper [aria-label*="plus"]'),
@@ -39,8 +49,14 @@ const selectors = {
             return cy.get('.ngie-accordion-detail .chart-controls button')
         }
     },
-    dotIconSpecifyCorrectAnswer: () => cy.get('.ngie-accordion-detail .dot-icon'),
+    dotIconSpecifyCorrectAnswer: () => cy.get('.dot-icon'),
     tooltipWrapperSpecifyCorrectAnswer: () => cy.get('.ngie-accordion-detail .charts-tooltip-wrapper'),
+    labelsNumberLineAxisSpecifyCorrectAnswer: () => cy.get('.ngie-accordion-detail .label-wrapper [class*="DotPlotChartstyles__Label"]'),
+    numberLineAxisSpecifyCorrectAnswer: () => cy.get('.ngie-accordion-detail .number-line-wrapper'),
+    labelsNumberLineAxisSpecifyCorrectAnswer: () => cy.get('.ngie-accordion-detail .label-wrapper [class*="DotPlotChartstyles__Label"]'),
+    partialEqualWeightsPointsPerResponseScore: () => cy.get('[class*="Chartsstyles__EqualPoints"]'),
+    dotColumnNumerationPointsLabel: () => cy.get('[class*="Chartsstyles__PartialPointsWrapper"] .partial-points-input-label'),
+    pointsInputField: () => cy.get('.ngie-accordion-detail .points-input-field input[type="text"]'),
 
     //preview tab
     dotColumnPreviewTab: () => cy.get('.ngie-chart-point:visible'),
@@ -68,7 +84,8 @@ const selectors = {
     dotPlotChartCorrectAnswerSection: () => cy.get('[class*="question-preview-wrapper"] [class*="DotPlotChartstyles__ChartWrapper"]').eq(1),
     dotColumnCorrectAnswerSection: () => cy.get('.ngie-chart-point'),
     dotIconCorrectAnswerSection: () => cy.get('.dot-icon'),
-    graphTitleCorrectAnswerSection: () => cy.get('.title-container'),
+    graphTitleCorrectAnswerSection: () => cy.get('[class*="question-preview-wrapper"] .chart-top-wrapper .title-container').eq(1),
+    xAxisLabelCorrectAnswerSection: () => cy.get('[class*="question-preview-wrapper"] .chart-bottom-wrapper .title-container').eq(1),
     numberLineAxisCorrectAnswerSection: () => cy.get('[class*="question-preview-wrapper"] .number-line-wrapper').eq(0),
     labelsNumberLineAxisCorrectAnswerSection: () => cy.get('[class*="question-preview-wrapper"] [class*="DotPlotChartstyles__BottomWrapper"]').eq(0).find('.label-wrapper [class*="DotPlotChartstyles__Label"]'),
 }
@@ -83,6 +100,10 @@ const steps = {
     ...autoScoredScoringPreviewTab.steps,
     ...layoutSectionComponent.steps,
     ...autoScoredSpecifyCorrectAnswerSection.steps,
+    ...autoScoredScoringSectionMultiResponseType.steps,
+    ...additionalSettingsPanel.steps,
+    ...selectQuestionResourceToolPage.steps,
+    ...dialogBoxBase.steps,
 
     /**
      * @param {string} element denotes element
@@ -402,14 +423,50 @@ const steps = {
                 const magnitude = Math.abs(difference);
                 if (difference > 0) {
                     steps.increaseDotCountInDotColumnSpecifyCorrectAnswer(magnitude);
-                    steps.verifyDotCountSpecifyCorrectAnswer(expectedDots, { point, min, interval });
                 } else if (difference < 0) {
                     steps.decreaseDotCountInDotColumnSpecifyCorrectAnswer(magnitude);
-                    steps.verifyDotCountSpecifyCorrectAnswer(expectedDots, { point, min, interval });
                 }
             });
         }
         steps.unselectDotColumnInSpecifyCorrectAnswer({ point, min, interval });
+        steps.verifyDotCountSpecifyCorrectAnswer(expectedDots, { point, min, interval });
+    },
+
+    /**
+      * Verifies the labels on the number line axis in the Specify correct answer
+      * @param {number} min - The minimum value.
+      * @param {number} max - The maximum value.
+      * @param {number} annotateEvery - value of annotate every
+      */
+    verifyLabelsOnNumberLineAxisSpecifyCorrectAnswer: (min, max, annotateEvery) => {
+        let expectedLabelsIndex = [];
+        chartsDotPlotPage.labelsNumberLineAxisSpecifyCorrectAnswer()
+            .each((value, index) => {
+                if (index % annotateEvery === 0) {
+                    expectedLabelsIndex.push(index.toString());
+                }
+            })
+            .then(() => {
+                for (var i = min; i < max; i++) {
+                    console.log(expectedLabelsIndex[i])
+                    chartsDotPlotPage.labelsNumberLineAxisSpecifyCorrectAnswer()
+                        .eq(expectedLabelsIndex[i - 1])
+                        .should('have.text', i)
+                }
+            });
+    },
+
+    verifyPointsPerResponseLabel: () => {
+        utilities.verifyInnerText(autoScoredScoringSectionMultiResponseType.pointsPerResponseLabel(), 'Points per response:\n-');
+        utilities.verifyElementVisibilityState(autoScoredScoringSectionMultiResponseType.pointsPerResponseLabel(), 'visible');
+    },
+
+    /**
+     * @param {number} points - The expected points value to be verified.
+     * @description Verifies the partial equal weights points per response score for a specific option in the specify correct answer section for a multi-response type question.
+     */
+    verifyPartialEqualWeightsPointsPerResponseScore: (points) => {
+        utilities.verifyInnerText(chartsDotPlotPage.partialEqualWeightsPointsPerResponseScore(), points);
     },
 
     //preview tab
@@ -606,7 +663,8 @@ const steps = {
             .within(() => {
                 utilities.verifyElementVisibilityState(chartsDotPlotPage.dotColumnLockIconPreviewTab(), 'visible');
             });
-        utilities.getNthElement(chartsDotPlotPage.dotColumnPreviewTab(), index)
+        chartsDotPlotPage.dotColumnPreviewTab()
+            .eq(index)
             .should('have.css', 'background-color', css.color.lockedDotColumnBg);
     },
 
@@ -822,6 +880,10 @@ const steps = {
         utilities.verifyElementVisibilityState(chartsDotPlotPage.dotPlotChartCorrectAnswerSection(), 'notExist');
     },
 
+    verifyCorrectIncorrectStatusMessageNotExists: () => {
+        utilities.verifyElementVisibilityState(chartsDotPlotPage.correctIncorrectAnswerTextWrapper(), 'notExist');
+    },
+
     /**
      * Verifies that the correct dot  column 
      * @param {object} options - The options object containing point, min, and interval.
@@ -984,10 +1046,71 @@ const steps = {
         steps.verifyDotColumnIsLockedInCorrectAnswerSection({ point, min, interval });
         steps.verifyDefaultDotCorrectAnswerSection({ point, min, interval });
     },
+
+    /**
+    * @param {number} points - The points to be allotted.
+    * @description - Allots points in the scoring section.
+    */
+    allotPoints: (points) => {
+        scoringSectionBaseEditTab.pointsInputField()
+            .eq(0)
+            .clear()
+            .type(`${points}`)
+            .blur();
+        scoringSectionBaseEditTab.pointsInputField()
+            .eq(0)
+            .should('have.value', points)
+    },
+
+    /**
+     * Sets the tolerance threshold value for the charts dot plot.
+     * @param {number} value - The value for the tolerance threshold.
+     */
+    setToleranceThresholdValue: (value) => {
+        chartsDotPlotPage.toleranceThresholdInputField()
+            .clear()
+            .type(value)
+            .blur();
+        chartsDotPlotPage.toleranceThresholdInputField()
+            .should('have.value', value)
+    },
+
+    /**
+     * verify the displayed penalty points for each incorrect dot plot
+     * @param {number} penaltyPoints displayed penalty points 
+     */
+    verifyPenaltyPointsForEachIncorrectDotPlot: (penaltyPoints) => {
+        utilities.verifyInnerText(autoScoredScoringSectionMultiResponseType.penaltyPointsDetailsSectionAllottedPointsLabel(), `Penalty points for each incorrect dot plot: ${penaltyPoints}`);
+    },
+
+    focusInOutOfToleranceThresholdInputField: () => {
+        chartsDotPlotPage.toleranceThresholdInputField()
+            .focus()
+            .blur();
+    },
 }
 
 const tests = {
-    ...autoScoredScoringPreviewTab.tests
+    ...autoScoredScoringPreviewTab.tests,
+    ...autoScoredScoringSectionMultiResponseType.tests,
+    ...scoringSectionBaseEditTab.tests,
+    ...additionalSettingsPanel.tests,
+    ...additionalSettingsAccessibilitySectionComponent.tests,
+    ...questionInstructionsComponent.tests,
+    ...createQuestionBasePage.tests,
+    ...commonComponents.tests,
+    ...studentViewSettingsLabelComponent.tests,
+    ...autoScoredStudentViewSettings.tests,
+    ...chartsCommonComponent.tests,
+
+    verifyContentsOfSpecifyCorrectAnswerSection: () => {
+        it('When user selects a scoring type then in the \'Correct\' accordion, all the contents should be displayed', () => {
+            chartsCommonComponent.steps.verifyGraphTitleInSpecifyCorrectAnswer('Graph title');
+            chartsCommonComponent.steps.verifyXAxisLabelInSpecifyCorrectAnswer('Label');
+            utilities.verifyElementVisibilityState(chartsDotPlotPage.numberLineAxisSpecifyCorrectAnswer(), 'exist');
+            chartsDotPlotPage.steps.verifyLabelsOnNumberLineAxisSpecifyCorrectAnswer(1, 4, 1);
+        });
+    }
 }
 
 export const chartsDotPlotPage = {

package/cypress/pages/chartsLinePage.js

@@ -18,11 +18,11 @@ const selectors = {
     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'),
+    previewTabPoint: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] .ngie-chart-point'),
+    previewTabConnectorLine: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] .line-chart-connector-line'),
 
     //Preview tab
-    previewTabPointLabel: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartGridstyle__NameDiv-"]'),
+    previewTabPointLabel: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartGridstyle__NameDiv-"]'),
 }
 
 const steps = {
@@ -45,9 +45,9 @@ const steps = {
         utilities.getNthElement(chartsLinePage.selectChartTypePoint(), pointIndex)
             .invoke('attr', 'height')
             .then((pointValue) => {
-                let updatedPointValue = parseFloat(value /= range)
+                let updatedPointValue = value / range
                 let originalPointValue = parseFloat(pointValue)
-                let unitChange = parseFloat(1 / range)
+                let unitChange = 1 / range
                 if (originalPointValue < updatedPointValue) {
                     for (let i = originalPointValue; i < updatedPointValue; i = parseFloat((i + unitChange).toFixed(2))) {
                         utilities.getNthElement(chartsLinePage.selectChartTypePoint(), pointIndex)
@@ -94,9 +94,9 @@ const steps = {
         utilities.getNthElement(chartsLinePage.specifyCorrectAnswerPoint(), pointIndex)
             .invoke('attr', 'height')
             .then((pointValue) => {
-                let updatedPointValue = parseFloat(value /= range)
+                let updatedPointValue = value / range
                 let originalPointValue = parseFloat(pointValue)
-                let unitChange = parseFloat(1 / range)
+                let unitChange = 1 / range
                 if (originalPointValue < updatedPointValue) {
                     for (let i = originalPointValue; i < updatedPointValue; i = parseFloat((i + unitChange).toFixed(2))) {
                         utilities.getNthElement(chartsLinePage.specifyCorrectAnswerPoint(), pointIndex)
@@ -124,7 +124,7 @@ const steps = {
     * @param {number} pointProperties.range Maximum value of the axis on which point value is determined
     */
     verifyPointValueInPreviewTab: ({ pointIndex, value, range }) => {
-        let pointHeight = parseFloat(value /= range)
+        let pointHeight = value / range
         utilities.getNthElement(chartsLinePage.previewTabPoint(), pointIndex)
             .should('have.attr', 'height', pointHeight);
     },
@@ -168,9 +168,9 @@ const steps = {
         utilities.getNthElement(chartsLinePage.previewTabPoint(), pointIndex)
             .invoke('attr', 'height')
             .then((pointValue) => {
-                let updatedPointValue = parseFloat(value /= range)
+                let updatedPointValue = value / range
                 let originalPointValue = parseFloat(pointValue)
-                let unitChange = parseFloat(1 / range)
+                let unitChange = 1 / range
                 if (originalPointValue < updatedPointValue) {
                     for (let i = originalPointValue; i < updatedPointValue; i = parseFloat((i + unitChange).toFixed(2))) {
                         utilities.getNthElement(chartsLinePage.previewTabPoint(), pointIndex)
@@ -234,7 +234,7 @@ const steps = {
      * @param {number} pointProperties.range Maximum value of the axis on which point value is determined
      */
     verifyPointValueInCorrectAnswerSection: ({ pointIndex, value, range }) => {
-        let pointValue = parseFloat(value /= range)
+        let pointValue = value / range
         chartsLinePage.previewTabChartWrapper()
             .eq(1)
             .within(() => {

package/cypress/pages/compassPage.js

@@ -0,0 +1,57 @@
+import {createQuestionBasePage, toolVisibilityComponent } from "./components";
+import utilities from "../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const selectors = {
+    ...toolVisibilityComponent,
+    compassVisibilityLabel : ()=> cy.get('[class*="Compassstyles__LabelToolVisibility"]'),
+    previewTabCompassVisibilityButton : ()=> cy.get('.protractor-button'),
+    previewTabCompassTool : ()=> cy.get('[class*="CompassComponentstyles__Target"] img'),
+    compassToolRotateButton : ()=> cy.get('.icon-rotate'),
+}
+
+const steps = {
+    ...createQuestionBasePage.steps,
+    ...toolVisibilityComponent.steps,
+     
+     /**
+     * @param {string} label name of tool
+     * @description this function verifies the visibility of the tool label
+     */
+    verifyCompassVisibilityLabel: (label) => {
+        utilities.verifyInnerText(compassPage.compassVisibilityLabel(), label);
+        utilities.verifyElementVisibilityState(compassPage.compassVisibilityLabel(), 'visible');
+    },
+
+     /**
+     * @param {("Show"|"Hide")} visibility
+     * @description this function verifies the state of the tool visibility button.
+     */
+    verifyPreviewTabCompassVisibilityButtonLabel: (visibility) => {
+        utilities.verifyInnerText(compassPage.previewTabCompassVisibilityButton(), `${visibility} compass`)
+    },
+
+    verifyCompassToolIsVisible: () => {
+        utilities.verifyElementVisibilityState(compassPage.previewTabCompassTool(), 'visible');
+        utilities.verifyElementVisibilityState(compassPage.compassToolRotateButton(), 'visible');
+    },
+
+    verifyCompassToolNotVisible: () => {
+        utilities.verifyElementVisibilityState(compassPage.previewTabCompassTool(), 'notExist');
+        utilities.verifyElementVisibilityState(compassPage.compassToolRotateButton(), 'notExist');
+    },
+
+    clickOnCompassToolVisibilityButton: () => {
+        compassPage.previewTabCompassVisibilityButton().click();
+    }
+}
+
+const tests = {
+    ...createQuestionBasePage.tests,
+}
+
+export const compassPage = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/components/autoScoredScoringSectionMultiResponseType.js

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

package/cypress/pages/components/autoScoredSpecifyCorrectAnswerSection.js

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

package/cypress/pages/components/barAndLineChartComponent.js

@@ -27,13 +27,13 @@ const selectors = {
     specifyCorrectAnswerToolsResetButton: () => cy.get('.ngie-accordion [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(3),
 
     //Preview tab
-    previewTabToolsAddBarOrPointButton: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(0),
-    previewTabToolsUndoButton: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(1),
-    previewTabToolsRedoButton: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(2),
-    previewTabToolsResetButton: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(3),
-    previewTabYAxisLabelButton: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartsPreviewstyles__LeftWrapper"] .title-container'),
-    previewTabYAxisCoordinate: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartGridstyle__ValueDiv"]'),
-    previewTabChartRowHeaderContainer: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartGridstyle__RowHeaderContainer"]'),
+    previewTabToolsAddBarOrPointButton: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(0),
+    previewTabToolsUndoButton: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(1),
+    previewTabToolsRedoButton: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(2),
+    previewTabToolsResetButton: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(3),
+    previewTabYAxisLabelButton: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartsPreviewstyles__LeftWrapper"] .title-container'),
+    previewTabYAxisCoordinate: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartGridstyle__ValueDiv"]'),
+    previewTabChartRowHeaderContainer: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartGridstyle__RowHeaderContainer"]'),
 }
 
 const steps = {