itemengine-cypress-automation 1.0.190-repoUpdate3May-f180558.0 → 1.0.190

package/cypress/e2e/ILC/VideoResponseNew/standardRecorderStyle.js

@@ -26,14 +26,14 @@ describe('Create item page - Video response: Preview tab - Standard recorder sty
             utilities.verifyElementVisibilityState(videoResponsePage.pauseButton(), 'visible');
             videoResponsePage.steps.verifyPauseButtonDisabledState();
             utilities.verifyElementVisibilityState(videoResponsePage.stopButton(), 'visible');
-            utilities.verifyInnerText(videoResponsePage.recordingTimer(), '05:00');
+            utilities.verifyInnerText(videoResponsePage.recordingTimer(), '5:00');
         });
 
         it('When the recording starts, the countdown should disappear, status message should change to \'Recording...\', the \'Pause\' button should get enabled, user should be able to view the duration of their recorded video in minutes, displayed as \'(min:secs/min:sec)\'. Pause recording and Stop recording should be displayed in record player. Resume recording button should not be displayed.', () => {
             utilities.verifyElementVisibilityState(videoResponsePage.startRecordingCountDown(), 'notExist');
             videoResponsePage.steps.verifyRecordingStatus('Recording...');
             videoResponsePage.steps.verifyPauseButtonEnabledState();
-            videoResponsePage.steps.verifyRecordingTime('00:04', '05:00');
+            videoResponsePage.steps.verifyRecordingTime('0:04', '5:00');
             utilities.verifyElementVisibilityState(videoResponsePage.pauseButton(), 'visible');
             utilities.verifyElementVisibilityState(videoResponsePage.stopButton(), 'visible');
             utilities.verifyElementVisibilityState(videoResponsePage.resumeButton(), 'notExist');
@@ -93,7 +93,7 @@ describe('Create item page - Video response: Preview tab - Standard recorder sty
             videoResponsePage.steps.waitForRecordingToStart();
             videoResponsePage.steps.addWaitToRecord(3000);
             videoResponsePage.steps.pauseRecording();
-            videoResponsePage.steps.verifyRecordingTime('00:04', '05:00');
+            videoResponsePage.steps.verifyRecordingTime('0:04', '5:00');
             videoResponsePage.steps.verifyRecordingStatus('Recording paused');
             utilities.verifyElementVisibilityState(videoResponsePage.pauseButton(), 'notExist');
             utilities.verifyElementVisibilityState(videoResponsePage.resumeButton(), 'visible');
@@ -134,7 +134,7 @@ describe('Create item page - Video response: Preview tab - Standard recorder sty
         it('When the recorder is in paused state and the user clicks on the \'Resume recording\' button, recording should get resumed. the status message should update to "Recording...". User should be able to view the duration of their recorded video in minutes, displayed as \'(min:secs/min:sec)\'. Pause recording and stop recording buttons should be displayed. Start recording button should not be displayed', () => {
             videoResponsePage.steps.resumeRecording();
             videoResponsePage.steps.verifyRecordingStatus('Recording...');
-            videoResponsePage.steps.verifyRecordingTime('00:05', '05:00');
+            videoResponsePage.steps.verifyRecordingTime('0:05', '5:00');
             utilities.verifyElementVisibilityState(videoResponsePage.pauseButton(), 'visible');
             utilities.verifyElementVisibilityState(videoResponsePage.stopButton(), 'visible');
         });
@@ -187,7 +187,7 @@ describe('Create item page - Video response: Preview tab - Standard recorder sty
             videoResponsePage.steps.waitForRecordingToStart();
             videoResponsePage.steps.addWaitToRecord(5000);
             utilities.verifyInnerText(videoResponsePage.savedResponseText(), 'Your response has been recorded.');
-            videoResponsePage.steps.verifyVideoPlaybackTimer('00:00', '00:05');
+            videoResponsePage.steps.verifyVideoPlaybackTimer('0:00', '0:05');
         });
 
         it('When a recording is saved, A video player with \'Retake recording\' button, \'Play\' button and progress bar should be displayed. User should be able to view the duration of their recorded video in minutes, displayed as \'(min:secs)\'. Volume control, Playback speed and full screen buttons should be displayed', () => {
@@ -225,7 +225,7 @@ describe('Create item page - Video response: Preview tab - Standard recorder sty
         it('When the user clicks on \'Play\' button, then user should be able to playback the recording. Timer should display the amount of video that has been played and the total recording length in (mm:ss)/(mm:ss) format. \'Your response has been recorded\' message should be displayed below video player', () => {
             videoResponsePage.steps.startPlayback();
             videoResponsePage.steps.waitForPlaybackToBegin();
-            videoResponsePage.steps.verifyVideoPlaybackTimer('00:03', '00:10');
+            videoResponsePage.steps.verifyVideoPlaybackTimer('0:03', '0:10');
             utilities.verifyInnerText(videoResponsePage.savedResponseText(), 'Your response has been recorded.');
         });
 
@@ -271,7 +271,7 @@ describe('Create item page - Video response: Preview tab - Standard recorder sty
             videoResponsePage.steps.startPlayback();
             videoResponsePage.steps.waitForPlaybackToBegin();
             videoResponsePage.steps.addWaitToPlayVideo(10000);
-            videoResponsePage.steps.verifyVideoPlaybackTimer('00:11', '00:20');
+            videoResponsePage.steps.verifyVideoPlaybackTimer('0:11', '0:20');
             videoResponsePage.steps.pauseAndVerifyProgressBarSliderPosition();
             utilities.verifyElementVisibilityState(videoResponsePage.playbackPlayButton(), 'visible');
             utilities.verifyElementVisibilityState(videoResponsePage.playbackPauseButton(), 'notExist');
@@ -310,7 +310,7 @@ describe('Create item page - Video response: Preview tab - Standard recorder sty
         });
 
         it('When the video playback is completed, the \'Pause\' button should get replaced with \'Play\' button', () => {
-            videoResponsePage.steps.verifyVideoPlaybackTimer('00:20', '00:20');
+            videoResponsePage.steps.verifyVideoPlaybackTimer('0:20', '0:20');
             utilities.verifyElementVisibilityState(videoResponsePage.playbackPlayButton(), 'visible');
             utilities.verifyElementVisibilityState(videoResponsePage.playbackPauseButton(), 'notExist');
             videoResponsePage.steps.verifyProgressBarSliderPosition(99);
@@ -553,7 +553,7 @@ describe('Create item page - Video response: Preview tab - Standard recorder sty
             utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
             utilities.verifyElementVisibilityState(videoResponsePage.retakeRecordingButton(), 'visible');
             utilities.verifyElementVisibilityState(videoResponsePage.playbackPlayButton(), 'visible');
-            videoResponsePage.steps.verifyVideoPlaybackTimer('00:00', '00:05');
+            videoResponsePage.steps.verifyVideoPlaybackTimer('0:00', '0:05');
         });
 
         it('When the user clicks on Confirm button of the Retake recording popup, the previous recording should get deleted and a new recording should begin', () => {

package/cypress/e2e/ILC/VideoResponseNew/studentViewSettings.js

@@ -91,7 +91,7 @@ describe('Create item page - Audio response: Student view settings for Standard
             utilities.verifyElementVisibilityState(videoResponsePage.recordingTimer(), 'visible');
             videoResponsePage.steps.addWaitToRecord(2000);
             videoResponsePage.steps.stopRecording();
-            videoResponsePage.steps.verifyVideoPlaybackTimer('00:00', '00:03');
+            videoResponsePage.steps.verifyVideoPlaybackTimer('0:00', '0:03');
             utilities.verifyElementVisibilityState(videoResponsePage.playerTimer(), 'visible');
         });
 
@@ -130,7 +130,7 @@ describe('Create item page - Audio response: Student view settings for Standard
             videoResponsePage.steps.startRecording();
             videoResponsePage.steps.waitForRecordingToStart();
             videoResponsePage.steps.stopRecording();
-            utilities.verifyElementVisibilityState(videoResponsePage.progressBar(), 'notExist');
+            utilities.verifyElementVisibilityState(videoResponsePage.progressBarSlider(), 'hidden');
         });
     });
 
@@ -175,14 +175,12 @@ describe('Create item page - Audio response: Student view settings for Standard
             videoResponsePage.steps.startRecording();
             videoResponsePage.steps.waitForRecordingToStart();
             videoResponsePage.steps.stopRecording();
-            videoResponsePage.steps.verifyResponseIsRecordedHelpText();
             videoResponsePage.steps.retakeRecording();
             videoResponsePage.steps.confirmRetake();
             utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
             utilities.verifyInnerText(videoResponsePage.recordingStatusText(), 'Recording...');
             videoResponsePage.steps.waitForRecordingToStart();
             videoResponsePage.steps.stopRecording();
-            videoResponsePage.steps.verifyResponseIsRecordedHelpText();
             utilities.verifyElementNotDisabled(videoResponsePage.retakeRecordingButton());
         });
 

package/cypress/pages/audioPlayerPage.js

@@ -12,7 +12,7 @@ const selectors = {
     addAudioURLRadioButton: () => cy.get('.ngie-radio-btn input').eq(1),
     uploadAudioFileUploadLabel: () => cy.get('[class*="AudioPlayerstyles__AudioLabel"]').eq(0),
     uploadAudioFileNameLabel: () => cy.get('[class*="AudioPlayerstyles__AudioLabel"]').eq(1),
-    deleteAudioFileButton: () => cy.get('[aria-label*="Delete audio file]'),
+    deleteAudioFileButton: () => cy.get('[aria-label="Delete"]'),
     sourceUrlLabel: () => cy.get('[class*="AudioPlayerstyles__AudioLabel"]').eq(0),
     sourceUrlInputField: () => cy.get('input[aria-label="Source URL"]'),
     uploadAudioChooseFileButton: () => cy.get('.choose-file-upload-button'),
@@ -118,6 +118,7 @@ const steps = {
         audioPlayerPage.inputTypeFile()
             .attachFile(filePath);
         utilities.verifyElementVisibilityState(audioPlayerPage.audioFileUploadProgressBar(), 'hidden');
+        audioPlayerPage.steps.addWaitToPlayAudio(1000);
     },
 
     /**
@@ -347,8 +348,9 @@ const steps = {
      */
     enterTextInSourceURLInputField: (text) => {
         audioPlayerPage.sourceUrlInputField()
-            .type(text, { delay: 0 })
+            .type(text)
             .blur();
+        audioPlayerPage.steps.addWaitToPlayAudio(1000);
     },
 
     clearTextInSourceURLInputField: () => {

package/cypress/pages/audioResponsePage.js

@@ -119,6 +119,7 @@ const steps = {
     ...additionalSettingsPanel.steps,
     ...limitNumberOfRetakeComponent.steps,
     ...allowTeachersToDownloadStudentResponseComponent.steps,
+    ...commonComponents.steps,
     startRecordingStandardPreview: () => {
         audioResponsePage.standardPreviewStartRecordingButton()
             .click();
@@ -799,6 +800,7 @@ const tests = {
     ...additionalSettingsAccessibilitySectionComponent.tests,
     ...limitNumberOfRetakeComponent.tests,
     ...allowTeachersToDownloadStudentResponseComponent.tests,
+    ...commonComponents.tests,
     verifyRetakePopupCSSAndA11y: () => {
         it('CSS of \'Retake\' popup', { tags: 'css' }, () => {
             utilities.verifyCSS(dialogBoxBase.dialogBox(), {

package/cypress/pages/chartsBarPage.js

@@ -1,12 +1,16 @@
 import utilities from "../support/helpers/utilities"
-import { barAndLineChartComponent, chartsCommonComponent, createQuestionBasePage, questionInstructionsComponent, resetPopupComponent, scoringSectionBaseEditTab, commonComponents } from "./components";
+import { barAndLineChartComponent, chartsCommonComponent, createQuestionBasePage, questionInstructionsComponent, resetPopupComponent, scoringSectionBaseEditTab, commonComponents, autoScoredStudentViewSettings, autoScoredScoringPreviewTab } from "./components";
+import { dialogBoxBase } from "./dialogBoxBase";
+const css = Cypress.env('css');
 
 const selectors = {
     ...questionInstructionsComponent,
     ...barAndLineChartComponent,
     ...chartsCommonComponent,
     ...commonComponents,
+    ...dialogBoxBase,
     barDragHandle: () => cy.get('.bar-drag-handle'),
+    bar: () => cy.get('.ngie-chart-point'),
     selectChartTypeMaxYLabel: () => cy.get('[class*="ChartsPreviewstyles__CustomInputFieldLabel"]'),
     selectChartTypeMaxYInputField: () => cy.get('[class*="ChartsPreviewstyles__CustomInputFieldWrapper"] input'),
     selectChartTypeMaxXLabel: () => cy.get('[class*="ChartsPreviewstyles__CustomInputFieldLabel"]'),
@@ -15,6 +19,7 @@ const selectors = {
     selectChartTypeBar: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] .ngie-chart-point'),
     barLockIcon: () => cy.get('[class*="ChartGridstyle__BarLockIconWrapper"]'),
     selectChartTypeBarLabel: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartGridstyle__NameDiv-"]'),
+    selectChartTypeMaxBarCountInputField: () => cy.get('[id="max bar count"]'),
     //specify correct answer section
     specifyCorrectAnswerBarDragHandle: () => cy.get('.ngie-accordion .bar-drag-handle'),
     specifyCorrectAnswerBar: () => cy.get('.ngie-accordion .ngie-chart-point'),
@@ -24,6 +29,7 @@ const selectors = {
     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')
 }
 
 const steps = {
@@ -31,8 +37,10 @@ const steps = {
     ...questionInstructionsComponent.steps,
     ...scoringSectionBaseEditTab.steps,
     ...barAndLineChartComponent.steps,
+    ...autoScoredScoringPreviewTab.steps,
     ...chartsCommonComponent.steps,
     ...resetPopupComponent.steps,
+    ...autoScoredStudentViewSettings.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
@@ -141,6 +149,18 @@ const steps = {
             .blur();
     },
 
+    /**
+     * @description Set the Max bar count value in its input field
+     * @param {number} value Max bar value to be set 
+     */
+    setMaxBarCountValue: (value) => {
+        chartsBarPage.selectChartTypeMaxBarCountInputField()
+            .clear()
+            .type(value)
+            .should('have.value', value)
+            .blur();
+    },
+
     //Preview tab
     /**
      * Verify the bar height in preview tab
@@ -163,10 +183,31 @@ const steps = {
         utilities.getNthElement(chartsBarPage.previewTabBar(), barIndex)
             .within(() => {
                 utilities.verifyElementVisibilityState(chartsBarPage.barLockIcon(), 'visible');
-                utilities.verifyElementVisibilityState(chartsBarPage.barDragHandle().find('svg'), 'notExist');
+                chartsBarPage.steps.verifyDragHandleNotVisible();
             });
     },
 
+    /**
+     * Verify locked bar is uneditable in preview tab
+     * @param {number} barIndex index of the bar
+     */
+    verifyLockedBarIsUneditableInPreviewTab: (barIndex) => {
+        utilities.getNthElement(chartsBarPage.previewTabBar(), barIndex)
+            .invoke('attr', 'height')
+            .then((barValue) => {
+                let originalBarValue = parseFloat(barValue)
+                utilities.getNthElement(chartsBarPage.selectChartTypeBarDragHandle(), barIndex)
+                    .focus()
+                    .type('{upArrow}{upArrow}{upArrow}{downArrow}{downArrow}{downArrow}', { force: true });
+                utilities.getNthElement(chartsBarPage.specifyCorrectAnswerBar(), barIndex)
+                    .should('have.attr', 'height', originalBarValue);
+            });
+    },
+
+    verifyDragHandleNotVisible: () => {
+        utilities.verifyElementVisibilityState(chartsBarPage.barDragHandle().find('svg'), 'notExist');
+    },
+
     /**
      * @description increase the bar height/value in the preview tab chart
      * @param {Object} barProperties - The properties and changes to be done on the bar
@@ -199,6 +240,18 @@ const steps = {
             });
     },
 
+    keyBoardUpBarInPreviewTab: (barIndex) => {
+        utilities.getNthElement(chartsBarPage.previewTabBarDragHandle(), barIndex)
+            .focus()
+            .type('{upArrow}');
+    },
+
+    keyBoardDownBarInPreviewTab: (barIndex) => {
+        utilities.getNthElement(chartsBarPage.previewTabBarDragHandle(), barIndex)
+            .focus()
+            .type('{downArrow}');
+    },
+
     /**
     * @description Edit bar label in preview tab chart
     * @param {number} barIndex Index of the bar to be edited
@@ -222,10 +275,243 @@ const steps = {
         utilities.triggerMouseover(utilities.getNthElement(chartsBarPage.previewTabBar(), barIndex))
         chartsBarPage.barAndPointTooltipDeleteButton()
             .click();
+    },
+
+    /**
+     * Verify the bar height in correct answer section tab
+     * @param {Object} barProperties - The properties of the bar
+     * @param {number} barProperties.barIndex index of the bar
+     * @param {number} barProperties.barValue Height of the bar as per the axis
+     * @param {number} barProperties.range Maximum value of the axis on which bar value is determined
+     */
+    verifyBarHeightInCorrectAnswerSection: ({ barIndex, barValue, range }) => {
+        let barHeight = parseFloat(barValue /= range)
+        chartsBarPage.previewTabChartWrapper()
+            .eq(1)
+            .within(() => {
+                utilities.getNthElement(chartsBarPage.bar(), barIndex)
+                    .should('have.attr', 'height', barHeight);
+            });
+    },
+
+    /**
+     * Verify the bar is locked in correct answer section
+     * @param {number} barIndex index of the bar
+     */
+    verifyBarIsLockedInCorrectAnswerSection: (barIndex) => {
+        chartsBarPage.previewTabChartWrapper()
+            .eq(1)
+            .within(() => {
+                utilities.getNthElement(chartsBarPage.bar(), barIndex)
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(chartsBarPage.barLockIcon(), 'visible');
+                        utilities.verifyElementVisibilityState(chartsBarPage.barDragHandle().find('svg'), 'notExist');
+                    });
+            });
+    },
+
+    /**
+     * Verify the correct/incorrect icon of bar in preview tab
+     * @param {number} barIndex index of the bar 
+     * @param {string} icon correct or incorrect icon
+     * @example verifyBarCorrectIncorrectIconInPreviewTab(0, 'correct')
+     */
+    verifyBarCorrectIncorrectIconInPreviewTab: (barIndex, icon) => {
+        utilities.getNthElement(chartsBarPage.previewTabBar(), barIndex)
+            .within(() => {
+                chartsBarPage.tickIconWrapper()
+                    .should('be.visible')
+                    .and('have.class', `${icon}-option-icon`);
+            });
+    },
+
+    /**
+    * Verify the correct/incorrect icon not exists for bar in preview tab
+    * @param {number} barIndex index of the bar 
+    */
+    verifyBarCorrectIncorrectIconNotExistsInPreviewTab: (barIndex) => {
+        utilities.getNthElement(chartsBarPage.previewTabBar(), barIndex)
+            .within(() => {
+                utilities.verifyElementVisibilityState(chartsBarPage.tickIconWrapper(), 'notExist');
+            });
+    },
+
+    /**
+     * Verify the correct/incorrect icon of bar in correct answer section
+     * @param {number} barIndex index of the bar 
+     * @example verifyBarCorrectIconInCorrectAnswerSection(0)
+     */
+    verifyBarCorrectIconInCorrectAnswerSection: (barIndex) => {
+        chartsBarPage.previewTabChartWrapper()
+            .eq(1)
+            .within(() => {
+                utilities.getNthElement(chartsBarPage.bar(), barIndex)
+                    .within(() => {
+                        chartsBarPage.tickIconWrapper()
+                            .should('be.visible')
+                            .and('have.class', 'correct-option-icon');
+                    });
+            });
+    },
+
+    /**
+    * Verify the correct/incorrect icon not exists for bar in correct answer section
+    * @param {number} barIndex index of the bar 
+    */
+    verifyBarCorrectIncorrectIconNotExistsInCorrectAnswerSection: (barIndex) => {
+        chartsBarPage.previewTabChartWrapper()
+            .eq(1)
+            .within(() => {
+                utilities.getNthElement(chartsBarPage.bar(), barIndex)
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(chartsBarPage.tickIconWrapper(), 'notExist');
+                    });
+            });
+    },
+
+    /**
+     * Verify the bar is locked in correct answer section
+     * @param {number} barIndex index of the bar
+     */
+    verifyBarIsLockedInCorrectAnswerSection: (barIndex) => {
+        chartsBarPage.previewTabChartWrapper()
+            .eq(1)
+            .within(() => {
+                utilities.getNthElement(chartsBarPage.bar(), barIndex)
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(chartsBarPage.barLockIcon(), 'visible');
+                        utilities.verifyElementVisibilityState(chartsBarPage.barDragHandle().find('svg'), 'notExist');
+                    });
+            });
+    },
+
+    /**
+     * @description Verify chart range in correct answer section
+     * @param {number} maximumValue maximum value of range
+     */
+    verifyChartRangeInCorrectAnswerSection: (maximumValue) => {
+        chartsBarPage.previewTabChartWrapper()
+            .eq(1)
+            .within(() => {
+                utilities.verifyTextContent(utilities.getNthElement(chartsBarPage.yAxisCoordinate(), 0), maximumValue);
+            });
+    },
+
+    /**
+     * @description Verify graph title in correct answer section
+     * @param {string} graphTitle Title of graph
+     */
+    verifyGraphTitleInCorrectAnswerSection: (graphTitle) => {
+        chartsBarPage.previewTabChartWrapper()
+            .eq(1)
+            .within(() => {
+                utilities.verifyTextContent(utilities.getNthElement(chartsBarPage.graphTitle(), 0), graphTitle);
+            });
+    },
+
+    /**
+     * @description Verify Y axis label in correct answer section
+     * @param {string} yAxisLabel
+     */
+    verifyYAxisLabelInCorrectAnswerSection: (yAxisLabel) => {
+        chartsBarPage.previewTabChartWrapper()
+            .eq(1)
+            .within(() => {
+                utilities.verifyTextContent(utilities.getNthElement(chartsBarPage.yAxisLabel(), 0), yAxisLabel);
+            });
+    },
+
+    /**
+     * @description Verify X axis label in correct answer section
+     * @param {string} yAxisLabel
+     */
+    verifyXAxisLabelInCorrectAnswerSection: (XAxisLabel) => {
+        chartsBarPage.previewTabChartWrapper()
+            .eq(1)
+            .within(() => {
+                utilities.verifyTextContent(utilities.getNthElement(chartsBarPage.xAxisLabel(), 0), XAxisLabel);
+            });
+    },
+
+
+    /**
+     * @description verify bar in correct answer section
+     * @param {Object} barProperties - The properties and changes to be done on the bar
+     * @param {number} barProperties.barIndex index of the bar
+     * @param {number} barProperties.barValue value of th bar as per Y axis
+     * @param {number} barProperties.range Maximum value of the axis on which bar value is determined
+     */
+    verifyBarInCorrectAnswerSection: ({ barIndex, barValue, range }) => {
+        chartsBarPage.steps.verifyBarHeightInCorrectAnswerSection({ barIndex: barIndex, barValue: barValue, range: range });
+        chartsBarPage.steps.verifyBarCorrectIconInCorrectAnswerSection(barIndex);
+    },
+
+    /**
+     * @description verify locked bar in correct answer section
+     * @param {Object} barProperties - The properties and changes to be done on the bar
+     * @param {number} barProperties.barIndex index of the bar
+     * @param {number} barProperties.barValue value of th bar as per Y axis
+     * @param {number} barProperties.range Maximum value of the axis on which bar value is determined
+     */
+    verifyLockedBarInCorrectAnswerSection: ({ barIndex, barValue, range }) => {
+        chartsBarPage.steps.verifyBarHeightInCorrectAnswerSection({ barIndex: barIndex, barValue: barValue, range: range });
+        chartsBarPage.steps.verifyBarIsLockedInCorrectAnswerSection(barIndex);
+        chartsBarPage.steps.verifyBarCorrectIncorrectIconNotExistsInCorrectAnswerSection(barIndex);
+    },
+}
+
+const tests = {
+    ...autoScoredScoringPreviewTab.tests,
+    ...resetPopupComponent.tests,
+
+    /**
+     * Verify bar tooltip contents with css and a11y in preview tab
+     * @param {number} barIndex index of the bar
+     * @param {string} barBackground rgb value of the bar background
+     * @param {string} barLabel label of the bar
+     */
+    verifyBarTooltipContentsCSSAndA11yInPreviewTab: (barIndex, barBackground, barLabel) => {
+        it('When user hovers over the bar, then bar tooltip should be displayed', () => {
+            utilities.triggerMouseover(utilities.getNthElement(chartsBarPage.previewTabBar(), barIndex));
+            utilities.verifyElementVisibilityState(chartsBarPage.barAndPointTooltipWrapper(), 'visible');
+        });
+
+        it('The bar tooltip should contain, bar background color block, bar label button, and delete button', () => {
+            utilities.verifyCSS(chartsBarPage.previewTabBarTooltipColorBlock(), {
+                'background-color': barBackground
+            });
+            utilities.verifyInnerText(barAndLineChartComponent.barAndPointTooltipLabelButton(), barLabel);
+            utilities.verifyElementVisibilityState(barAndLineChartComponent.barAndPointTooltipDeleteButton(), 'visible');
+        });
+
+        it('When user hovers on the delete button, then \'Delete bar\' tooltip should be displayed', () => {
+            chartsBarPage.barAndPointTooltipDeleteButton()
+                .verifyTooltip('Delete bar');
+        });
+
+        it('CSS of bar tooltip', { tags: 'css' }, () => {
+            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);
+        });
+
+        it('Accessibility of Reset dialog box', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(chartsBarPage.barAndPointTooltipWrapper());
+        });
+
+        it('When user hovers away from the bar, then bar tooltip should be not be displayed', () => {
+            utilities.triggerMouseout(utilities.getNthElement(chartsBarPage.previewTabBar(), barIndex));
+            utilities.verifyElementVisibilityState(chartsBarPage.barAndPointTooltipWrapper(), 'notExist');
+        });
     }
 }
 
 export const chartsBarPage = {
     ...selectors,
-    steps
+    steps,
+    tests
 }

package/cypress/pages/components/autoScoredSpecifyCorrectAnswerSection.js

@@ -1,7 +1,7 @@
 import utilities from "../../support/helpers/utilities";
 import { dialogBoxBase } from "../dialogBoxBase";
 import { commonComponents } from "./commonComponents";
-import { scoringSectionBase } from "./scoringSectionBase";
+import { scoringSectionBaseEditTab } from "./scoringSectionBaseEditTab";
 const css = Cypress.env('css');
 
 const selectors = {
@@ -250,11 +250,11 @@ const tests = {
      */
     verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty: (accordionName) => {
         it(`When the user focuses in and out of the empty points input field, no points error message should be displayed below the points input field and error icon should not be displayed on the \'${accordionName}\' accordion`, () => {
-            scoringSectionBase.pointsInputField()
+            scoringSectionBaseEditTab.pointsInputField()
                 .focus();
-            scoringSectionBase.pointsInputField()
+            scoringSectionBaseEditTab.pointsInputField()
                 .blur();
-            utilities.verifyElementVisibilityState(scoringSectionBase.pleaseEnterPointsErrorMessage(), 'notExist')
+            utilities.verifyElementVisibilityState(scoringSectionBaseEditTab.pleaseEnterPointsErrorMessage(), 'notExist')
             if (accordionName == 'Correct') {
                 autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
                     .within(() => {
@@ -346,7 +346,10 @@ const tests = {
                 .within(() => {
                     utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
                 });
-            utilities.verifyElementVisibilityState(scoringSectionBase.pleaseEnterPointsErrorMessage(), 'notExist');
+            scoringSectionBaseEditTab.pointsWrapper()
+                .within(() => {
+                    utilities.verifyElementVisibilityState(scoringSectionBaseEditTab.pleaseEnterPointsErrorMessage(), 'notExist');
+                });
             if (questionType != 'list ordering' && questionType != 'short text response' && questionType != 'text entry math') {
                 steps.verifySpecifyCorrectAnswerErrorMessage();
             }

package/cypress/pages/components/autoScoredStudentViewSettings.js

@@ -74,7 +74,7 @@ const steps = {
 const tests = {
     verifyAllowStudentsToCheckAnswerLabelAndCheckboxCSS: () => {
         it('\'Allow student to check answer\' label and checkbox should be displayed and it should be unchecked by default', () => {
-            utilities.verifyInnerText(autoScoredStudentViewSettings.allowStudentToCheckAnswerLabel(), 'Allow students to check answer');
+            utilities.verifyInnerText(autoScoredStudentViewSettings.allowStudentToCheckAnswerLabel(), 'Allow student to check answer');
             autoScoredStudentViewSettings.steps.verifyAllowStudentsToCheckAnswerCheckboxUnchecked();
         });
 

package/cypress/pages/components/barAndLineChartComponent.js

@@ -4,6 +4,8 @@ const selectors = {
     toolsLabel: () => cy.get('[class*="SelectChartTypestyles__OptionTitle"]'),
     addBarOrPointOptionButton: () => cy.get('#add .icon-button-custom-format'),
     addBarOrPointOptionLabel: () => cy.get('.drag-item-label-wrapper'),
+    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),
     selectChartTypeChartToolsUndoButton: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(1),
     selectChartTypeChartToolsRedoButton: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(1),
@@ -11,14 +13,15 @@ const selectors = {
     selectChartTypeYAxisLabelButton: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartsPreviewstyles__LeftWrapper"] .title-container'),
     selectChartTypePoint: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] .ngie-chart-point'),
     barAndPointTooltipLockUnlockButton: () => cy.get('[class*="ChartTooltipstyles__LockIconWrapper"] button'),
-    barAndPointTooltipDeleteButton: () => cy.get('.charts-tooltip-delete-icon-wrapper button'),
-    barAndPointTooltipLabelButton: () => cy.get('.charts-tooltip-data-label .title-container'),
+    barAndPointTooltipDeleteButton: () => cy.get('.charts-tooltip-delete-icon-wrapper:visible button'),
+    barAndPointTooltipLabelButton: () => cy.get('.charts-tooltip-data-label:visible .title-container'),
+    barAndPointTooltipWrapper: () => cy.get('.charts-tooltip-wrapper'),
 
     //Specify correct answer section
     specifyCorrectAnswerToolsAddBarOrPointButton: () => cy.get('.ngie-accordion [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(0),
     specifyCorrectAnswerToolsUndoButton: () => cy.get('.ngie-accordion [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(1),
-    specifyCorrectAnswerToolsRedoButton: () => cy.get('.ngie-accordion [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(1),
-    specifyCorrectAnswerToolsResetButton: () => cy.get('.ngie-accordion [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(2),
+    specifyCorrectAnswerToolsRedoButton: () => cy.get('.ngie-accordion [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(2),
+    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),

package/cypress/pages/components/chartsCommonComponent.js

@@ -1,8 +1,14 @@
+import utilities from "../../support/helpers/utilities";
+import { autoScoredScoringPreviewTab } from "./autoScoredScoringPreviewTab";
+import { correctIncorrectAnswerLabelComponent } from "./correctIncorrectAnswerLabelComponent";
+
 const selectors = {
     selectChartTypesTitle: () => cy.get('.options-label'),
     barToggleButton: () => cy.get('[data-ngie-testid="bar-toggle-button"]'),
     lineToggleButton: () => cy.get('[data-ngie-testid="line-toggle-button"]'),
     dotPlotToggleButton: () => cy.get('[data-ngie-testid="dot-plot-toggle-button"]'),
+    graphTitle: () => cy.get('[class*="ChartsPreviewstyles__TopWrapper"] .title-container'),
+    xAxisLabel: () => cy.get('[class*="ChartsPreviewstyles__BottomWrapper"] .title-container'),
     selectChartTypeGraphTitleButton: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartsPreviewstyles__TopWrapper"] .title-container'),
     selectChartTypeXAxisLabelButton: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartsPreviewstyles__BottomWrapper"] .title-container'),
     pointsInputField: () => cy.get('[class*="Chartsstyles__PointsFieldWrapper"] [class*="points-input-field"] input[type="text"]'),
@@ -15,8 +21,13 @@ const selectors = {
     graphLabelPopupSaveButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(1),
 
     //preview tab
+    previewTabTool: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartToolsstyles__ChartToolsWrapper"] button'),
+    previewTabToolBarWrapper: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartToolsstyles__ChartToolsWrapper"]'),
+    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'),
+    correctAnswersLabel: () => cy.get('[class*="Chartsstyle__CorrectAnswerHeader"]')
 }
 
 const steps = {
@@ -97,6 +108,28 @@ const steps = {
         chartsCommonComponent.steps.addInputToChartLabelPopupInputField(text);
         chartsCommonComponent.steps.saveGraphLabelPopup();
     },
+
+    /**
+    * @param {("correct" | "incorrect")} answerStatus - The status of the answer.
+    * @description Verifies the visibility and content of the correct/incorrect answer label block.
+    * If the answer is correct, it also verifies the visibility of the correct icon;
+    * otherwise, it verifies the visibility of the incorrect icon.
+    */
+    verifyCorrectIncorrectAnswerLabel: (answerStatus) => {
+        utilities.verifyElementVisibilityState(correctIncorrectAnswerLabelComponent.correctIncorrectAnswerBlock(), 'exist');
+        utilities.verifyInnerText(correctIncorrectAnswerLabelComponent.correctIncorrectStatusMessageText(), `Your answer is${answerStatus}`)
+        if (answerStatus === 'correct') {
+            utilities.verifyElementVisibilityState(autoScoredScoringPreviewTab.correctIcon(), 'visible');
+        } else {
+            utilities.verifyElementVisibilityState(autoScoredScoringPreviewTab.incorrectIcon(), 'visible');
+        }
+    },
+
+    verifyCorrectAnswerSectionNotExist: () => {
+        chartsCommonComponent.previewTabChartWrapper()
+            .eq(1)
+            .should('not.exist');
+    }
 }
 
 export const chartsCommonComponent = {