itemengine-cypress-automation 1.0.189-e2e-execution-crash-83cdbd4.0 → 1.0.190-7thMayFixes-fcaf7b8.0

package/cypress/pages/audioResponsePage.js

@@ -1,5 +1,5 @@
 import utilities from "../support/helpers/utilities";
-import { createQuestionBasePage, questionInstructionsComponent, scoringSectionBaseEditTab, maximumRecorderLengthComponent, commonComponents, playbackControlsBaseComponent, autoScoredScoringPreviewTab, studentViewSettingsLabelComponent, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent } from "./components"
+import { createQuestionBasePage, questionInstructionsComponent, scoringSectionBaseEditTab, maximumRecorderLengthComponent, commonComponents, playbackControlsBaseComponent, autoScoredScoringPreviewTab, studentViewSettingsLabelComponent, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent, limitNumberOfRetakeComponent, allowTeachersToDownloadStudentResponseComponent } from "./components"
 import { dialogBoxBase } from "./dialogBoxBase";
 const css = Cypress.env('css');
 
@@ -12,6 +12,8 @@ const selectors = {
     ...playbackControlsBaseComponent,
     ...studentViewSettingsLabelComponent,
     ...additionalSettingsPanel,
+    ...limitNumberOfRetakeComponent,
+    ...allowTeachersToDownloadStudentResponseComponent,
     recordedResponseHelpText: () => cy.get('[class*="preview-help-text"]'),
     playbackWaveform: () => cy.get('.audio-wave-form'),
     playbackWaveformTotalWidth: () => cy.get('.audio-wave-form wave wave canvas'),
@@ -104,15 +106,7 @@ const selectors = {
     barPreviewPauseRecordingButton: () => cy.get('.standard-recorder-pause-btn'),
     barPreviewResumeRecordingButton: () => cy.get('.standard-recorder-resume-btn'),
     barPreviewRetakeButton: () => cy.get('.standard-recorder-retake-btn'),
-    showStudentsTheRetakeLimitsOnTooltipCheckbox: () => cy.get('[data-ngie-testid="show-students-the-retake-limits-on-tooltip-checkbox"] input'),
-    showStudentsTheRetakeLimitsOnTooltipCheckboxLabel: () => cy.get('[data-ngie-testid="show-students-the-retake-limits-on-tooltip-checkbox"] .MuiFormControlLabel-label'),
-    retakeLimitLabel: () => cy.get('.retake-limit-label'),
-    retakeLimitInputField: () => cy.get('.retake-limit-wrapper input'),
-    barPreviewPlaybackWrapper: () => cy.get('.audio-response-wrapper'),
-
-    //Additional settings
-    allowTeachersToDownloadStudentResponseLabel: () => cy.get('[data-ngie-testid="allow-teachers-to-download-student-response-checkbox"] [class*="label"]'),
-    allowTeachersToDownloadStudentResponseCheckbox: () => cy.get('[data-ngie-testid="allow-teachers-to-download-student-response-checkbox"] input')
+    barPreviewPlaybackWrapper: () => cy.get('.audio-response-wrapper')
 }
 
 const steps = {
@@ -123,6 +117,9 @@ const steps = {
     ...maximumRecorderLengthComponent.steps,
     ...playbackControlsBaseComponent.steps,
     ...additionalSettingsPanel.steps,
+    ...limitNumberOfRetakeComponent.steps,
+    ...allowTeachersToDownloadStudentResponseComponent.steps,
+    ...commonComponents.steps,
     startRecordingStandardPreview: () => {
         audioResponsePage.standardPreviewStartRecordingButton()
             .click();
@@ -652,11 +649,6 @@ const steps = {
             .blur();
     },
 
-    limitNumberOfRetakeCheckboxUncheckedState: () => {
-        audioResponsePage.limitNumberOfRetakeCheckbox()
-            .should('not.be.checked');
-    },
-
     deselectAudioIndicatorsTimerButton: () => {
         audioResponsePage.audioIndicatorsTimerButton()
             .click()
@@ -730,37 +722,6 @@ const steps = {
             .should('have.class', 'ngie-toggle-button-selected');
     },
 
-    verifyShowStudentsTheRetakeLimitsOnTooltipCheckboxUncheckedState: () => {
-        audioResponsePage.showStudentsTheRetakeLimitsOnTooltipCheckbox()
-            .should('not.be.checked');
-    },
-
-    checkLimitNumberOfRetakeCheckbox: () => {
-        audioResponsePage.limitNumberOfRetakeCheckbox()
-            .click()
-            .should('be.checked');
-    },
-
-    /**
-     * Verifies the value of the retake limit input field.
-     * @param {string} value - The expected value of the retake limit input field.
-     */
-    verifyRetakeLimitInputFieldValue: (value) => {
-        audioResponsePage.retakeLimitInputField()
-            .should('have.attr', 'value', value)
-    },
-
-    /**
-     * Sets the retake limit value.
-     * @param {string} value - The value to set as the retake limit.
-     */
-    setRetakeLimit: (value) => {
-        audioResponsePage.retakeLimitInputField()
-            .clear()
-            .type(value)
-            .should('have.attr', 'value', value)
-    },
-
     /**
      * Verifies the recorded time displayed in the bar preview player on the audio response page.
      * @param {string} recordingTime - The current recorded time in the format 'mm:ss'.
@@ -824,40 +785,6 @@ const steps = {
 
     verifyResponseIsRecordedHelpText: () => {
         utilities.verifyInnerText(audioResponsePage.recordedResponseHelpText(), 'Your response has been recorded.');
-    },
-
-    checkShowStudentsTheRetakeLimitsOnTooltipCheckbox: () => {
-        audioResponsePage.showStudentsTheRetakeLimitsOnTooltipCheckbox()
-            .click()
-            .should('be.checked');
-    },
-
-    uncheckShowStudentsTheRetakeLimitsOnTooltipCheckbox: () => {
-        audioResponsePage.showStudentsTheRetakeLimitsOnTooltipCheckbox()
-            .click()
-            .should('not.be.checked');
-    },
-
-    clearRetakeLimitInputField: () => {
-        audioResponsePage.retakeLimitInputField()
-            .clear();
-    },
-
-    verifyAllowTeachersToDownloadStudentResponseCheckboxChecked: () => {
-        audioResponsePage.allowTeachersToDownloadStudentResponseCheckbox()
-            .should('be.checked');
-    },
-
-    uncheckAllowTeachersToDownloadStudentResponseCheckbox: () => {
-        audioResponsePage.allowTeachersToDownloadStudentResponseCheckbox()
-            .click()
-            .should('not.be.checked');
-    },
-
-    checkAllowTeachersToDownloadStudentResponseCheckbox: () => {
-        audioResponsePage.allowTeachersToDownloadStudentResponseCheckbox()
-            .click()
-            .should('be.checked');
     }
 }
 
@@ -871,6 +798,9 @@ const tests = {
     ...studentViewSettingsLabelComponent.tests,
     ...additionalSettingsPanel.tests,
     ...additionalSettingsAccessibilitySectionComponent.tests,
+    ...limitNumberOfRetakeComponent.tests,
+    ...allowTeachersToDownloadStudentResponseComponent.tests,
+    ...commonComponents.tests,
     verifyRetakePopupCSSAndA11y: () => {
         it('CSS of \'Retake\' popup', { tags: 'css' }, () => {
             utilities.verifyCSS(dialogBoxBase.dialogBox(), {

package/cypress/pages/brainingCampManipulativePage.js

@@ -112,7 +112,7 @@ const tests = {
     ...scoringSectionBaseEditTab.tests,
     ...additionalSettingsPanel.tests,
     ...additionalSettingsAccessibilitySectionComponent.tests,
-    ...toolSettingsComponent.steps,
+    ...toolSettingsComponent.tests,
 }
 
 export const brainingCampManipulativePage = {

package/cypress/pages/chartsBarPage.js

@@ -0,0 +1,517 @@
+import utilities from "../support/helpers/utilities"
+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"]'),
+    selectChartTypeMaxXInputField: () => cy.get('[class*="ChartsPreviewstyles__CustomInputFieldWrapper"] input'),
+    selectChartTypeBarDragHandle: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] .bar-drag-handle'),
+    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'),
+
+    //TODO - Update selector after https://redmine.zeuslearning.com/issues/570603 is resolved
+    //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')
+}
+
+const steps = {
+    ...createQuestionBasePage.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
+     * @param {number} barProperties.barIndex index of the bar
+     * @param {number} barProperties.value value by which the bar height is to be increased as per Y axis
+     * @param {number} barProperties.range Maximum value of the axis on which bar value is determined
+     */
+    setBarValueInSelectChartTypeSection: ({ barIndex, value, range }) => {
+        utilities.getNthElement(chartsBarPage.selectChartTypeBar(), barIndex)
+            .invoke('attr', 'height')
+            .then((barValue) => {
+                let updatedBarValue = parseFloat(value /= range)
+                let originalBarValue = parseFloat(barValue)
+                let unitChange = parseFloat(1 / range)
+                if (originalBarValue < updatedBarValue) {
+                    for (let i = originalBarValue; i < updatedBarValue; i = parseFloat((i + unitChange).toFixed(2))) {
+                        utilities.getNthElement(chartsBarPage.selectChartTypeBarDragHandle(), barIndex)
+                            .focus()
+                            .type('{upArrow}');
+                    }
+                } else if (originalBarValue > updatedBarValue) {
+                    for (let i = originalBarValue; i > updatedBarValue; i = parseFloat((i - unitChange).toFixed(2))) {
+                        utilities.getNthElement(chartsBarPage.selectChartTypeBarDragHandle(), barIndex)
+                            .focus()
+                            .type('{downArrow}');
+                    }
+                }
+                utilities.getNthElement(chartsBarPage.selectChartTypeBar(), barIndex)
+                    .should('have.attr', 'height', updatedBarValue);
+            });
+    },
+
+    /**
+     * @description increase the bar height/value in the specify correct answer section chart
+     * @param {Object} barProperties - The properties and changes to be done on the bar
+     * @param {number} barProperties.barIndex index of the bar
+     * @param {number} barProperties.value value by which the bar height is to be increased as per Y axis
+     * @param {number} barProperties.range Maximum value of the axis on which bar value is determined
+     */
+    setBarValueInSpecifyCorrectAnswerSection: ({ barIndex, value, range }) => {
+        utilities.getNthElement(chartsBarPage.specifyCorrectAnswerBar(), barIndex)
+            .invoke('attr', 'height')
+            .then((barValue) => {
+                let updatedBarValue = parseFloat(value /= range)
+                let originalBarValue = parseFloat(barValue)
+                let unitChange = parseFloat(1 / range)
+                if (originalBarValue < updatedBarValue) {
+                    for (let i = originalBarValue; i < updatedBarValue; i = parseFloat((i + unitChange).toFixed(2))) {
+                        utilities.getNthElement(chartsBarPage.specifyCorrectAnswerBarDragHandle(), barIndex)
+                            .focus()
+                            .type('{upArrow}');
+                    }
+                } else if (originalBarValue > updatedBarValue) {
+                    for (let i = originalBarValue; i > updatedBarValue; i = parseFloat((i - unitChange).toFixed(2))) {
+                        utilities.getNthElement(chartsBarPage.specifyCorrectAnswerBarDragHandle(), barIndex)
+                            .focus()
+                            .type('{downArrow}');
+                    }
+                }
+                utilities.getNthElement(chartsBarPage.specifyCorrectAnswerBar(), barIndex)
+                    .should('have.attr', 'height', updatedBarValue);
+            });
+    },
+
+    /**
+     * @description Lock the bar in select chart type section chart
+     * @param {number} barIndex Index of the bar to be locked 
+     */
+    lockBar: (barIndex) => {
+        utilities.triggerMouseover(utilities.getNthElement(chartsBarPage.selectChartTypeBar(), barIndex))
+        chartsBarPage.barAndPointTooltipLockUnlockButton()
+            .click();
+        chartsBarPage.barAndPointTooltipLockUnlockButton()
+            .should('have.attr', 'aria-label', 'locked bar');
+        utilities.triggerMouseout(utilities.getNthElement(chartsBarPage.selectChartTypeBar(), barIndex));
+        utilities.getNthElement(chartsBarPage.selectChartTypeBar(), barIndex)
+            .within(() => {
+                utilities.verifyElementVisibilityState(chartsBarPage.barLockIcon(), 'visible');
+            });
+    },
+
+    /**
+    * @description Edit bar label in select chart type section chart
+    * @param {number} barIndex Index of the bar to be edited
+    * @param {string} barLabel Label to be given to the bar
+    */
+    editBarLabelInSelectChartTypeSection: (barIndex, barLabel) => {
+        utilities.triggerMouseover(utilities.getNthElement(chartsBarPage.selectChartTypeBar(), barIndex))
+        chartsBarPage.barAndPointTooltipLabelButton()
+            .click();
+        chartsBarPage.steps.addInputToChartLabelPopupInputField(barLabel);
+        chartsBarPage.steps.saveGraphLabelPopup();
+        utilities.triggerMouseout(utilities.getNthElement(chartsBarPage.selectChartTypeBar(), barIndex));
+        utilities.verifyInnerText(utilities.getNthElement(chartsBarPage.selectChartTypeBarLabel(), barIndex), barLabel);
+    },
+
+    /**
+     * @description Set the Max Y value in its input field
+     * @param {number} value Max Y value to be set 
+     */
+    setMaxYValue: (value) => {
+        chartsBarPage.selectChartTypeMaxYInputField()
+            .clear()
+            .type(value)
+            .should('have.value', value)
+            .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
+     * @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
+     */
+    verifyBarHeightInPreviewTab: ({ barIndex, barValue, range }) => {
+        let barHeight = parseFloat(barValue /= range)
+        utilities.getNthElement(chartsBarPage.previewTabBar(), barIndex)
+            .should('have.attr', 'height', barHeight);
+    },
+
+    /**
+     * Verify the bar is locked in preview tab
+     * @param {number} barIndex index of the bar
+     */
+    verifyBarIsLockedInPreviewTab: (barIndex) => {
+        utilities.getNthElement(chartsBarPage.previewTabBar(), barIndex)
+            .within(() => {
+                utilities.verifyElementVisibilityState(chartsBarPage.barLockIcon(), 'visible');
+                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
+     * @param {number} barProperties.barIndex index of the bar
+     * @param {number} barProperties.value value by which the bar height is to be increased as per Y axis
+     * @param {number} barProperties.range Maximum value of the axis on which bar value is determined
+     */
+    setBarValueInPreviewTab: ({ barIndex, value, range }) => {
+        utilities.getNthElement(chartsBarPage.previewTabBar(), barIndex)
+            .invoke('attr', 'height')
+            .then((barValue) => {
+                let updatedBarValue = parseFloat(value /= range)
+                let originalBarValue = parseFloat(barValue)
+                let unitChange = parseFloat(1 / range)
+                if (originalBarValue < updatedBarValue) {
+                    for (let i = originalBarValue; i < updatedBarValue; i = parseFloat((i + unitChange).toFixed(2))) {
+                        utilities.getNthElement(chartsBarPage.previewTabBarDragHandle(), barIndex)
+                            .focus()
+                            .type('{upArrow}');
+                    }
+                } else if (originalBarValue > updatedBarValue) {
+                    for (let i = originalBarValue; i > updatedBarValue; i = parseFloat((i - unitChange).toFixed(2))) {
+                        utilities.getNthElement(chartsBarPage.previewTabBarDragHandle(), barIndex)
+                            .focus()
+                            .type('{downArrow}');
+                    }
+                }
+                utilities.getNthElement(chartsBarPage.previewTabBar(), barIndex)
+                    .should('have.attr', 'height', updatedBarValue);
+            });
+    },
+
+    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
+    * @param {string} barLabel Label to be given to the bar
+    */
+    editBarLabelInPreviewTab: (barIndex, barLabel) => {
+        utilities.triggerMouseover(utilities.getNthElement(chartsBarPage.previewTabBar(), barIndex))
+        chartsBarPage.barAndPointTooltipLabelButton()
+            .click();
+        chartsBarPage.steps.addInputToChartLabelPopupInputField(barLabel);
+        chartsBarPage.steps.saveGraphLabelPopup();
+        utilities.triggerMouseout(utilities.getNthElement(chartsBarPage.previewTabBar(), barIndex));
+        utilities.verifyInnerText(utilities.getNthElement(chartsBarPage.previewTabBarLabel(), barIndex), barLabel);
+    },
+
+    /**
+     * @description Delete bar in preview tab
+    * @param {number} barIndex Index of the bar to be deleted
+     */
+    deleteBarInPreviewTab: (barIndex) => {
+        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,
+    tests
+}

package/cypress/pages/chartsDotPlotPage.js

@@ -0,0 +1,8 @@
+const selectors = {
+    minInputField: () => cy.get('input[aria-label="Min"]'),
+    maxInputField: () => cy.get('input[aria-label="Max"]')
+}
+
+export const chartsDotPlotPage = {
+    ...selectors
+}