itemengine-cypress-automation 1.0.204 → 1.0.205

package/cypress/pages/chartsBarPage.js

@@ -1,6 +1,7 @@
 import utilities from "../support/helpers/utilities"
-import { barAndLineChartComponent, chartsCommonComponent, createQuestionBasePage, questionInstructionsComponent, resetPopupComponent, scoringSectionBaseEditTab, commonComponents, autoScoredStudentViewSettings, autoScoredScoringPreviewTab, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, correctIncorrectAnswerLabelComponent, studentViewSettingsLabelComponent } from "./components";
+import { barAndLineChartComponent, chartsCommonComponent, createQuestionBasePage, questionInstructionsComponent, resetPopupComponent, scoringSectionBaseEditTab, commonComponents, autoScoredStudentViewSettings, autoScoredScoringPreviewTab, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, correctIncorrectAnswerLabelComponent, studentViewSettingsLabelComponent, layoutSectionComponent } from "./components";
 import { dialogBoxBase } from "./dialogBoxBase";
+import { selectQuestionResourceToolPage } from "./selectQuestionResourceToolPage";
 const css = Cypress.env('css');
 
 const selectors = {
@@ -13,6 +14,10 @@ const selectors = {
     ...autoScoredScoringPreviewTab,
     ...correctIncorrectAnswerLabelComponent,
     ...chartsCommonComponent,
+    ...selectQuestionResourceToolPage,
+    ...autoScoredSpecifyCorrectAnswerSection,
+    ...layoutSectionComponent,
+
     barDragHandle: () => cy.get('.bar-drag-handle'),
     bar: () => cy.get('.ngie-chart-point'),
     selectChartTypeMaxXLabel: () => cy.get('[class*="ChartsPreviewstyles__CustomInputFieldLabel"]'),
@@ -22,15 +27,47 @@ const selectors = {
     barLockIcon: () => cy.get('[class*="ChartGridstyle__BarLockIconWrapper"]'),
     selectChartTypeBarLabel: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartGridstyle__NameDiv-"]'),
     selectChartTypeMaxBarCountInputField: () => cy.get('[id="max bar count"]'),
+    barOptionsLabel: () => cy.get('.bar-options-wrapper .chart-option-label'),
+    directionLabel: () => cy.get('.bar-options .additional-settings-label').eq(0),
+    verticalDirectionRadioButton: () => cy.get('.bar-options input[id*="vertical"]'),
+    verticalDirectionLabel: () => cy.get('.bar-options [data-value="vertical"] .title-casing'),
+    horizontalDirectionRadioButton: () => cy.get('.bar-options input[id*="horizontal"]'),
+    horizontalDirectionLabel: () => cy.get('.bar-options [data-value="horizontal"] .title-casing'),
+    barSpacingLabel: () => cy.get('.bar-options .additional-settings-label').eq(1),
+    addGapBetweenBarsCheckbox: () => cy.get('[data-ngie-testid="add-gap-between-bars-checkbox"] input'),
+    addGapBetweenBarsLabel: () => cy.get('[data-ngie-testid="add-gap-between-bars-checkbox"] .MuiFormControlLabel-label'),
+    maxBarCountLabel: () => cy.get('.bar-options-wrapper [class*="NumberFieldWrapper"] .input-label-fields'),
+    barLabelsLabel: () => cy.get('[data-ngie-testid="bar-labels-checkbox"] .MuiFormControlLabel-label'),
+    barLabelsCheckbox: () => cy.get('[data-ngie-testid="bar-labels-checkbox"] input'),
+    newBarLabelLabel: () => cy.get('.label-options-wrapper [class*="PropertyLabel"]'),
+    newBarLabelInputField: () => cy.get('.label-options-wrapper .text-field'),
+    tickIntervalPositionLabel: () => cy.get('.tick-position-options-wrapper .chart-option-label'),
+    labelLocationLabel: () => cy.get('.tick-position-options-wrapper .additional-settings-label'),
+    centeredRadioButton: () => cy.get('[data-value="centered"] input'),
+    centeredLabel: () => cy.get('[data-value="centered"] .ngie-radio-label'),
+    atIntervalRadioButton: () => cy.get('[data-value="atInterval"] input'),
+    atIntervalLabel: () => cy.get('[data-value="atInterval"] .ngie-radio-label'),
+    xAxisCoordinateSelectChartType: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartGridstyle__HorizontalNameDiv"]'),
+    barLabelHorizontalSelectChartType: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartGridstyle__ValueDiv"]'),
+    selectChartTypeMaxXAndYLabel: () => cy.get('[class*="ChartsPreviewstyles__CustomInputFieldLabel"]'),
+    selectChartTypeMaxXAndYInputField: () => cy.get('[class*="ChartsPreviewstyles__CustomInputFieldWrapper"] input'),
+
     //specify correct answer section
     specifyCorrectAnswerBarDragHandle: () => cy.get('.ngie-accordion .bar-drag-handle'),
     specifyCorrectAnswerBar: () => cy.get('.ngie-accordion .ngie-chart-point'),
+    specifyCorrectAnswerBarLabel: () => cy.get('.ngie-accordion [class*="ChartGridstyle__NameDiv-"]'),
+    colorBlockBarTooltipSpecifyCorrectAnswer: () => cy.get('.ngie-accordion [class*="ChartTooltipstyles__ColorBox"]'),
+    barLabelBarToolTipSpecifyCorrectAnswer: () => cy.get('.ngie-accordion [class*="ChartTooltipstyles__Label"]'),
+    xAxisCoordinateSpecifyCorrectAnswer: () => cy.get('.ngie-accordion [class*="ChartGridstyle__HorizontalNameDiv"]'),
+    barLabelHorizontalSpecifyCorrectAnswer: () => cy.get('.ngie-accordion [class*="ChartGridstyle__ValueDiv"]'),
 
     //Preview tab
     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"]')
+    previewTabBarTooltipColorBlock: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartTooltipstyles__ColorBox"]'),
+    xAxisCoordinatePreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartGridstyle__HorizontalNameDiv"]'),
+    barLabelHorizontalPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartGridstyle__ValueDiv"]'),
 }
 
 const steps = {
@@ -44,7 +81,9 @@ const steps = {
     ...autoScoredScoringSectionMultiResponseType.steps,
     ...autoScoredSpecifyCorrectAnswerSection.steps,
     ...correctIncorrectAnswerLabelComponent.steps,
+    ...layoutSectionComponent.steps,
     ...chartsCommonComponent.steps,
+    ...dialogBoxBase.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
@@ -77,8 +116,32 @@ const steps = {
             });
     },
 
+    /**
+     * @description updates height of bar once
+     * @param {number} barIndex index of bar
+     */
+    keyBoardUpBarInSelectChartType: (barIndex) => {
+        utilities.getNthElement(chartsBarPage.selectChartTypeBarDragHandle(), barIndex)
+            .focus()
+            .type('{upArrow}');
+    },
+
+    /**
+    * Verify the bar height 
+    * @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
+    */
+    verifyBarHeightInSelectChartType: ({ barIndex, barValue, range }) => {
+        let barHeight = barValue / range
+        utilities.getNthElement(chartsBarPage.selectChartTypeBar(), barIndex)
+            .should('have.attr', 'height', barHeight);
+    },
+
     /**
      * @description increase the bar height/value in the specify correct answer section chart
+     * @description set 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
@@ -109,6 +172,29 @@ const steps = {
             });
     },
 
+    /**
+     * @description updates height of bar once
+     * @param {number} barIndex index of bar
+     */
+    keyBoardUpBarInSpecifyCorrectAnswer: (barIndex) => {
+        utilities.getNthElement(chartsBarPage.specifyCorrectAnswerBarDragHandle(), barIndex)
+            .focus()
+            .type('{upArrow}');
+    },
+
+    /**
+    * Verify the bar height 
+    * @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
+    */
+    verifyBarHeightInSpecifyCorrectAnswer: ({ barIndex, barValue, range }) => {
+        let barHeight = barValue / range
+        utilities.getNthElement(chartsBarPage.specifyCorrectAnswerBar(), barIndex)
+            .should('have.attr', 'height', barHeight);
+    },
+
     /**
      * @description Lock the bar in select chart type section chart
      * @param {number} barIndex Index of the bar to be locked 
@@ -153,6 +239,103 @@ const steps = {
             .blur();
     },
 
+    /**
+     * @description verifies Max bar count value 
+     * @param {number} value Max bar value to be verified 
+     */
+    verifyMaxBarCountValue: (value) => {
+        chartsBarPage.selectChartTypeMaxBarCountInputField()
+            .should('have.value', value);
+    },
+
+    /**
+     * Verify the bar height
+     * @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
+     */
+    verifyBarHeightInSpecifyCorrectAnswer: ({ barIndex, barValue, range }) => {
+        const barHeight = barValue / range;
+        chartsBarPage.chartContainerSpecifyCorrectAnswer()
+            .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
+     */
+    verifyBarIsLockedInSpecifyCorrectAnswer: (barIndex) => {
+        chartsBarPage.chartContainerSpecifyCorrectAnswer()
+            .within(() => {
+                utilities.getNthElement(chartsBarPage.bar(), barIndex)
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(chartsBarPage.barLockIcon(), 'visible');
+                        utilities.verifyElementVisibilityState(chartsBarPage.barDragHandle().find('svg'), 'notExist');
+                    });
+            });
+    },
+
+    /**
+   * Verify the correct/incorrect icon not exists for bar
+   * @param {number} barIndex index of the bar 
+   */
+    verifyBarCorrectIncorrectIconNotExistsInSpecifyCorrectAnswer: (barIndex) => {
+        chartsBarPage.chartContainerSpecifyCorrectAnswer()
+            .within(() => {
+                utilities.getNthElement(chartsBarPage.bar(), barIndex)
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(chartsBarPage.tickIconWrapper(), 'notExist');
+                    });
+            });
+    },
+
+    /**
+     * @description verify locked bar
+     * @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
+     */
+    verifyLockedBarInSpecifyCorrectAnswer: ({ barIndex, barValue, range }) => {
+        chartsBarPage.steps.verifyBarHeightInSpecifyCorrectAnswer({ barIndex, barValue, range });
+        chartsBarPage.steps.verifyBarIsLockedInSpecifyCorrectAnswer(barIndex);
+        chartsBarPage.steps.verifyBarCorrectIncorrectIconNotExistsInSpecifyCorrectAnswer(barIndex);
+    },
+
+    /**
+     * Verify locked bar is uneditable in preview tab
+     * @param {number} barIndex index of the bar
+     */
+    verifyLockedBarIsUneditableInSpecifyCorrectAnswer: (barIndex) => {
+        utilities.getNthElement(chartsBarPage.specifyCorrectAnswerBar(), barIndex)
+            .invoke('attr', 'height')
+            .then((barValue) => {
+                let originalBarValue = barValue;
+                utilities.verifyElementVisibilityState(chartsBarPage.dragHandleButton(), 'notExist');
+                utilities.getNthElement(chartsBarPage.specifyCorrectAnswerBar(), barIndex)
+                    .should('have.attr', 'height', originalBarValue);
+            });
+    },
+
+    /**
+    * @description Edit bar label 
+    * @param {number} barIndex Index of the bar to be edited
+    * @param {string} barLabel Label to be given to the bar
+    */
+    editBarLabelInSpecifyCorrectAnswer: (barIndex, barLabel) => {
+        utilities.triggerMouseover(utilities.getNthElement(chartsBarPage.specifyCorrectAnswerBar(), barIndex))
+        chartsBarPage.barAndPointTooltipLabelButton()
+            .click();
+        chartsBarPage.steps.addInputToChartLabelPopupInputField(barLabel);
+        chartsBarPage.steps.saveGraphLabelPopup();
+        utilities.triggerMouseout(utilities.getNthElement(chartsBarPage.specifyCorrectAnswerBar(), barIndex));
+        utilities.verifyInnerText(utilities.getNthElement(chartsBarPage.specifyCorrectAnswerBarLabel(), barIndex), barLabel);
+    },
+
     //Preview tab
     /**
      * Verify the bar height in preview tab
@@ -261,7 +444,7 @@ const steps = {
 
     /**
      * @description Delete bar in preview tab
-    * @param {number} barIndex Index of the bar to be deleted
+     *@param {number} barIndex Index of the bar to be deleted
      */
     deleteBarInPreviewTab: (barIndex) => {
         utilities.triggerMouseover(utilities.getNthElement(chartsBarPage.previewTabBar(), barIndex))
@@ -269,6 +452,16 @@ const steps = {
             .click();
     },
 
+    /**
+    * @description Delete bar in specify correct answer section
+    * @param {number} barIndex Index of the bar to be deleted
+     */
+    deleteBarInSpecifyCorrectAnswerSection: (barIndex) => {
+        utilities.triggerMouseover(utilities.getNthElement(chartsBarPage.specifyCorrectAnswerBar(), barIndex))
+        chartsBarPage.barAndPointTooltipDeleteButton()
+            .click();
+    },
+
     /**
      * Verify the bar height in correct answer section tab
      * @param {Object} barProperties - The properties of the bar
@@ -399,6 +592,25 @@ const steps = {
     },
 
     /**
+     * @description Delete bar
+     *@param {number} barIndex Index of the bar to be deleted
+     */
+    deleteBarInSpecifyCorrectAnswer: (barIndex) => {
+        utilities.triggerMouseover(utilities.getNthElement(chartsBarPage.specifyCorrectAnswerBar(), barIndex))
+        chartsBarPage.barAndPointTooltipDeleteButton()
+            .click();
+    },
+
+    /**
+     * Verifies if the label of a bar at the specified index matches the specified correct answer.
+     * @param {number} index - The index of the bar whose label is to be verified.
+     * @param {string} label - The expected label of the bar.
+     */
+    verifyBarLabelSpecifyCorrectAnswer: (index, label) => {
+        utilities.verifyInnerText(utilities.getNthElement(chartsBarPage.specifyCorrectAnswerBarLabel(), index), label);
+    },
+
+    /** 
     * @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;
@@ -412,14 +624,473 @@ const steps = {
         } else {
             utilities.verifyElementVisibilityState(autoScoredScoringPreviewTab.incorrectIcon(), 'visible');
         }
-    }
+    },
+
+    /**
+     * Verifies labels in the y-axis of the select chart type chart.
+     * @param {number} max - The maximum value.
+     * @param {number} interval - The interval between values.
+     */
+    verifyLabelsInSelectChartType: (max, interval) => {
+        cy.wait(2000);
+        barAndLineChartComponent.yAxisCoordinate()
+            .its('length').then((len) => {
+                for (let index = 0; index < len; index++) {
+                    barAndLineChartComponent.yAxisCoordinate()
+                        .eq(index)
+                        .should('have.text', max);
+                    max -= interval;
+                }
+            });
+    },
+
+    /**
+     * Verifies annotated labels in the y-axis of the select chart type chart.
+     * @param {number} max - The maximum value.
+     * @param {number} annotateEvery - The interval for annotations
+     */
+    verifyAnnotatedLabelsSelectChartType: (max, annotateEvery) => {
+        cy.wait(2000);
+        barAndLineChartComponent.yAxisCoordinate()
+            .each(($element, index) => {
+                if (index % annotateEvery === 0) {
+                    cy.wrap($element).should('have.text', max);
+                    max -= annotateEvery;
+                }
+            });
+    },
+
+    /**
+     * Verifies the maximum value label on the y-axis of the select chart type chart.
+     * @param {number} max - The expected maximum value.
+     */
+    verifyMaxValueOnYAxis: (max) => {
+        chartsBarPage.selectChartTypeBarLabel()
+            .eq(0)
+            .should('have.text', max);
+    },
+
+    verifyCenteredRadioButtonSelected: () => {
+        chartsBarPage.centeredRadioButton()
+            .should('be.checked');
+    },
+
+    verifyAtIntervalRadioButtonSelected: () => {
+        chartsBarPage.atIntervalRadioButton()
+            .should('be.checked');
+    },
+
+    selectCenteredRadioButton: () => {
+        chartsBarPage.centeredRadioButton()
+            .click()
+            .should('be.checked');
+    },
+
+    selectAtIntervalRadioButton: () => {
+        chartsBarPage.atIntervalRadioButton()
+            .click()
+            .should('be.checked');
+    },
+
+    verifyBarLabelsCheckboxChecked: () => {
+        chartsBarPage.barLabelsCheckbox()
+            .should('be.checked');
+    },
+
+    uncheckBarLabelsCheckbox: () => {
+        chartsBarPage.barLabelsCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    /**
+     * Updates the value of the input field for new bar labels.
+     * @param {string} text - The text to be entered into the input field.
+     */
+    updateNewBarLabelInputFieldValue: (text) => {
+        chartsBarPage.newBarLabelInputField()
+            .clear()
+            .type(text)
+            .should('have.value', text);
+    },
+
+    /**
+     * Verifies the value of the input field for new bar labels.
+     * @param {string} text - The expected value of the input field.
+     */
+    verifyNewBarLabelInputFieldValue: (text) => {
+        chartsBarPage.newBarLabelInputField()
+            .should('have.value', text);
+    },
+
+
+    verifyAddGapBetweenBarsCheckboxChecked: () => {
+        chartsBarPage.addGapBetweenBarsCheckbox()
+            .should('be.checked');
+    },
+
+    uncheckAddGapBetweenBarsCheckbox: () => {
+        chartsBarPage.addGapBetweenBarsCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    verifyVerticalDirectionRadioButtonSelected: () => {
+        chartsBarPage.verticalDirectionRadioButton()
+            .should('be.checked');
+    },
+
+    selectVerticalDirectionRadioButton: () => {
+        chartsBarPage.verticalDirectionRadioButton()
+            .click()
+            .should('be.checked');
+    },
+
+    verifyHorizontalDirectionRadioButtonSelected: () => {
+        chartsBarPage.horizontalDirectionRadioButton()
+            .should('be.checked');
+    },
+
+    selectHorizontalDirectionRadioButton: () => {
+        chartsBarPage.horizontalDirectionRadioButton()
+            .click()
+            .should('be.checked');
+    },
+
+    /**
+  * Verify labels in the specify correct answer chart's y-axis.
+  * @param {number} max - The maximum value.
+  * @param {number} interval - The interval between values.
+  */
+    verifyLabelsInSpecifyCorrectAnswer: (max, interval) => {
+        barAndLineChartComponent.yAxisCoordinateSpecifyCorrectAnswer()
+            .its('length').then((len) => {
+                for (let index = 0; index < len; index++) {
+                    barAndLineChartComponent.yAxisCoordinateSpecifyCorrectAnswer()
+                        .eq(index)
+                        .should('have.text', max);
+                    max -= interval;
+                }
+            });
+    },
+
+    /**
+     * Verify annotated labels in the specify correct answer chart's y-axis.
+     * @param {number} max - The maximum value.
+     * @param {number} annotateEvery - The interval for annotations.
+     */
+    verifyAnnotatedLabelsSpecifyCorrectAnswer: (max, annotateEvery) => {
+        barAndLineChartComponent.yAxisCoordinateSpecifyCorrectAnswer()
+            .each(($element, index) => {
+                if (index % annotateEvery === 0) {
+                    cy.wrap($element).should('have.text', max);
+                    max -= annotateEvery;
+                }
+            });
+    },
+
+    /**
+     * Verify labels in the preview tab's y-axis.
+     * @param {number} max - The maximum value.
+     * @param {number} interval - The interval between values.
+     */
+    verifyLabelsInPreviewTab: (max, interval) => {
+        barAndLineChartComponent.previewTabYAxisCoordinate()
+            .its('length').then((len) => {
+                for (let index = 0; index < len; index++) {
+                    barAndLineChartComponent.previewTabYAxisCoordinate()
+                        .eq(index)
+                        .should('have.text', max);
+                    max -= interval;
+                }
+            });
+    },
+
+    /**
+     * Verify annotated labels in the preview tab's y-axis.
+     * @param {number} max - The maximum value.
+     * @param {number} annotateEvery - The interval for annotations.
+     */
+    verifyAnnotatedLabelsPreviewTab: (max, annotateEvery) => {
+        barAndLineChartComponent.previewTabYAxisCoordinate()
+            .each(($element, index) => {
+                if (index % annotateEvery === 0) {
+                    cy.wrap($element).should('have.text', max);
+                    max -= annotateEvery;
+                }
+            });
+    },
+
+    /**
+     * @description verifies chart orientation
+     * @param {('Horizontal'|'Vertical')} chart orientation
+     */
+    verifyChartOrientationSelectChartType: (orientation) => {
+        if (orientation === 'Horizontal') {
+            barAndLineChartComponent.chartContainerSelectChartType()
+                .should('have.css', 'height', '605px');
+        }
+        else if (orientation === 'Vertical') {
+            barAndLineChartComponent.chartContainerSelectChartType()
+                .should('have.css', 'height', '616px');
+        } else {
+            cy.log('Invalid orientation');
+        }
+    },
+
+    /**
+     * @description verifies chart orientation
+     * @param {('Horizontal'|'Vertical')} chart orientation
+     */
+    verifyChartOrientationSpecifyCorrectAnswer: (orientation) => {
+        if (orientation === 'Horizontal') {
+            barAndLineChartComponent.chartContainerSpecifyCorrectAnswer()
+                .should('have.css', 'height', '605px');
+        }
+        else if (orientation === 'Vertical') {
+            barAndLineChartComponent.chartContainerSpecifyCorrectAnswer()
+                .should('have.css', 'height', '616px');
+        } else {
+            cy.log('Invalid orientation');
+        }
+    },
+
+    /**
+    * @description verifies chart orientation
+    * @param {('Horizontal'|'Vertical')} chart orientation
+    */
+    verifyChartOrientationPreviewTab: (orientation) => {
+        if (orientation === 'Horizontal') {
+            chartsBarPage.chartsContainerPreviewTab()
+                .should('have.css', 'height', '605px');
+        }
+        else if (orientation === 'Vertical') {
+            chartsBarPage.chartsContainerPreviewTab()
+                .should('have.css', 'height', '616px');
+        } else {
+            cy.log('Invalid orientation');
+        }
+    },
+
+    verifySpaceBetweenBarsSelectChartType: () => {
+        chartsBarPage.selectChartTypeBar()
+            .eq(0)
+            .invoke('width')
+            .then(width => {
+                const roundedWidth = Math.round(parseFloat(width));
+                expect(roundedWidth).to.be.closeTo(154, 1);
+            });
+    },
+
+    verifyNoSpaceBetweenBarsSelectChartType: () => {
+        chartsBarPage.selectChartTypeBar()
+            .eq(0)
+            .invoke('width')
+            .then(width => {
+                const roundedWidth = Math.round(parseFloat(width));
+                expect(roundedWidth).to.be.closeTo(253, 1);
+            });
+    },
+
+    verifySpaceBetweenBarsSpecifyCorrectAnswer: () => {
+        chartsBarPage.specifyCorrectAnswerBar()
+            .eq(0)
+            .invoke('width')
+            .then(width => {
+                const roundedWidth = Math.round(parseFloat(width));
+                expect(roundedWidth).to.be.closeTo(157, 1);
+            });
+    },
+
+    verifyNoSpaceBetweenBarsSpecifyCorrectAnswer: () => {
+        chartsBarPage.specifyCorrectAnswerBar()
+            .eq(0)
+            .invoke('width')
+            .then(width => {
+                const roundedWidth = Math.round(parseFloat(width));
+                expect(roundedWidth).to.be.closeTo(258, 1);
+            });
+    },
+
+    verifySpaceBetweenBarsPreviewTab: () => {
+        chartsBarPage.previewTabBar()
+            .eq(0)
+            .invoke('width')
+            .then(width => {
+                const roundedWidth = Math.round(parseFloat(width));
+                expect(roundedWidth).to.be.closeTo(159, 1);
+            });
+    },
+
+    verifyNoSpaceBetweenBarsPreviewTab: () => {
+        chartsBarPage.previewTabBar()
+            .eq(0)
+            .invoke('width')
+            .then(width => {
+                const roundedWidth = Math.round(parseFloat(width));
+                expect(roundedWidth).to.be.closeTo(261, 1);
+            });
+    },
+
+    /**
+     * Verifies if the label of a bar
+     * @param {number} index - The index of the bar whose label is to be verified.
+     * @param {string} label - The expected label of the bar.
+     */
+    verifyBarLabelSelectChartType: (index, label) => {
+        utilities.verifyInnerText(utilities.getNthElement(chartsBarPage.selectChartTypeBarLabel(), index), label);
+    },
+
+    verifyBarLabelAtIntervalSelectChartType: () => {
+        chartsBarPage.selectChartTypeBarLabel()
+            .eq(0)
+            .should('have.css', 'margin-left');
+    },
+
+    verifyBarLabelCenteredSelectChartType: () => {
+        chartsBarPage.selectChartTypeBarLabel()
+            .eq(0)
+            .should('not.have.css', 'margin-left')
+    },
+
+    verifyBarLabelAtIntervalSpecifyCorrectAnswer: () => {
+        chartsBarPage.specifyCorrectAnswerBarLabel()
+            .eq(0)
+            .should('have.css', 'margin-left');
+    },
+
+    verifyBarLabelCenteredSpecifyCorrectAnswer: () => {
+        chartsBarPage.specifyCorrectAnswerBarLabel()
+            .eq(0)
+            .should('not.have.css', 'margin-left')
+    },
+
+    verifyBarLabelAtIntervalPreviewTab: () => {
+        chartsBarPage.previewTabBarLabel()
+            .eq(0)
+            .should('have.css', 'margin-left');
+    },
+
+    verifyBarLabelCenteredPreviewTab: () => {
+        chartsBarPage.previewTabBarLabel()
+            .eq(0)
+            .should('not.have.css', 'margin-left')
+    },
+
+    /**
+     * Verify bar labels in the horizontal specify correct answer chart.
+     * @param {string[]} values - Array of expected label values.
+     */
+    verifyBarLabelHorizontalSpecifyCorrectAnswer: (values) => {
+        values.forEach((value, index) => {
+            utilities.getNthElement(chartsBarPage.barLabelHorizontalSpecifyCorrectAnswer(), index)
+                .should('have.text', value);
+        });
+    },
+
+    /**
+     * Verify bar labels in the horizontal select chart type chart.
+     * @param {string[]} values - Array of expected label values.
+     */
+    verifyBarLabelHorizontalSelectChartType: (values) => {
+        values.forEach((value, index) => {
+            utilities.getNthElement(chartsBarPage.barLabelHorizontalSelectChartType(), index)
+                .should('have.text', value);
+        });
+    },
+
+    /**
+     * Verify bar labels in the horizontal preview tab chart.
+     * @param {string[]} values - Array of expected label values.
+     */
+    verifyBarLabelHorizontalPreviewTab: (values) => {
+        values.forEach((value, index) => {
+            utilities.getNthElement(chartsBarPage.barLabelHorizontalPreviewTab(), index)
+                .should('have.text', value);
+        });
+    },
+
+    /**
+     * Verify labels in the horizontal select chart type chart.
+     * @param {number} min - The minimum value.
+     * @param {number} interval - The interval between values.
+     */
+    verifyLabelsInHorizontalSelectChartType: (min, interval) => {
+        chartsBarPage.xAxisCoordinateSelectChartType()
+            .its('length').then((len) => {
+                for (let index = 0; index < len; index++) {
+                    chartsBarPage.xAxisCoordinateSelectChartType()
+                        .eq(index)
+                        .should('have.text', value);
+                    min += interval;
+                }
+            });
+    },
+
+    /**
+     * Verify labels in the horizontal specify correct answer chart.
+     * @param {number} min - The minimum value.
+     * @param {number} interval - The interval between values.
+     */
+    verifyLabelsInHorizontalSpecifyCorrectAnswer: (min, interval) => {
+        chartsBarPage.xAxisCoordinateSpecifyCorrectAnswer()
+            .its('length').then((len) => {
+                for (let index = 0; index < len; index++) {
+                    chartsBarPage.xAxisCoordinateSpecifyCorrectAnswer()
+                        .eq(index)
+                        .should('have.text', value);
+                    min += interval;
+                }
+            });
+    },
+
+    /**
+     * Verify labels in the horizontal preview tab.
+     * @param {number} min - The minimum value.
+     * @param {number} interval - The interval between values.
+     */
+    verifyLabelsInHorizontalPreviewTab: (min, interval) => {
+        chartsBarPage.xAxisCoordinatePreviewTab()
+            .its('length').then((len) => {
+                for (let index = 0; index < len; index++) {
+                    chartsBarPage.xAxisCoordinatePreviewTab()
+                        .eq(index)
+                        .should('have.text', value);
+                    min += interval;
+                }
+            });
+    },
+
+    /**
+     * @description Set the Max Y value in its input field
+     * @param {number} value Max Y value to be set 
+     */
+    setMaxXAndYValue: (value) => {
+        chartsBarPage.selectChartTypeMaxXAndYInputField()
+            .type(`{backspace}{backspace}${value}`, { force: true })
+            .should('have.value', value)
+            .blur();
+    },
+
+    /**
+     * @description Verifies Max Y value in its input field
+     * @param {number} value Max Y value
+     */
+    verifyMaxXAndYValue: (value) => {
+        chartsBarPage.selectChartTypeMaxXAndYInputField()
+            .should('have.value', value);
+    },
 }
 
 const tests = {
     ...autoScoredScoringPreviewTab.tests,
     ...resetPopupComponent.tests,
+    ...autoScoredSpecifyCorrectAnswerSection.tests,
     ...autoScoredStudentViewSettings.tests,
     ...studentViewSettingsLabelComponent.tests,
+    ...createQuestionBasePage.tests,
+    ...commonComponents.tests,
+    ...layoutSectionComponent.tests,
 
     /**
      * Verify bar tooltip contents with css and a11y in preview tab
@@ -464,7 +1135,116 @@ const tests = {
             utilities.triggerMouseout(utilities.getNthElement(chartsBarPage.previewTabBar(), barIndex));
             utilities.verifyElementVisibilityState(chartsBarPage.barAndPointTooltipWrapper(), 'notExist');
         });
-    }
+    },
+
+    /**
+     * Verifies the contents and functionality of the 'Specify correct answer' accordion for multiple selection questions.
+     * @param {{'Correct' | 'Alternative'}} accordionName - The name of the accordion to be used in the validation.
+     * @example - verifySpecifyCorrectAnswerAccordionContentsAndFunctionality('Correct');
+     */
+    verifySpecifyCorrectAnswerAccordionContentsAndFunctionality: (accordionName) => {
+        it('Bar chart should be present with y axis label from 1 to 10 and 3 bars', () => {
+            utilities.verifyElementVisibilityState(chartsBarPage.chartContainerSpecifyCorrectAnswer(), 'visible');
+            utilities.verifyElementCount(chartsBarPage.specifyCorrectAnswerBar(), 3);
+        });
+
+        it(`The user should be able to set bars on chart in the specify correct answer section ${accordionName} accordion`, () => {
+            steps.setBarValueInSpecifyCorrectAnswerSection({ barIndex: 2, value: 4, range: 10 });
+            steps.setBarValueInSpecifyCorrectAnswerSection({ barIndex: 1, value: 2, range: 10 });
+        });
+
+        it(`User should be able to delete bar in ${accordionName} accordion and labels for other bars should not change`, () => {
+            steps.deleteBarInSpecifyCorrectAnswer(1);
+            steps.verifyBarLabelSpecifyCorrectAnswer(0, 'Bar 1');
+            steps.verifyBarLabelSpecifyCorrectAnswer(1, 'Bar 3');
+        });
+
+        it(`When the user resets the charts in the ${accordionName} accordion, error message should not be thrown on the \'${accordionName}\' accordion`, () => {
+            chartsBarPage.steps.selectControlOptionSpecifyCorrectAnswer('Reset');
+            chartsBarPage.steps.confirmReset();
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
+            if (accordionName == 'Correct') {
+                autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'notExist');
+                    });
+            } else {
+                autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'notExist');
+                    });
+            };
+        });
+
+        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`, () => {
+            scoringSectionBaseEditTab.pointsInputField()
+                .eq(0)
+                .focus();
+            scoringSectionBaseEditTab.pointsInputField()
+                .eq(0)
+                .blur();
+            utilities.verifyElementVisibilityState(scoringSectionBaseEditTab.pleaseEnterPointsErrorMessage(), 'notExist')
+            if (accordionName == 'Correct') {
+                autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
+                    .within(() => {
+                        autoScoredSpecifyCorrectAnswerSection.steps.verifySpecifyCorrectAnswerErrorIconNotExists();
+                    });
+            } else {
+                autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
+                    .within(() => {
+                        autoScoredSpecifyCorrectAnswerSection.steps.verifySpecifyCorrectAnswerErrorIconNotExists();
+                    });
+            };
+        });
+
+        it('Accessibility of \'Correct\' accordion contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(chartsDotPlotPage.numberLineAxisSpecifyCorrectAnswer().parents('.ngie-accordion-detail'));
+        });
+    },
+
+    /**
+     * Verify bar tooltip contents with css and a11y
+     * @param {number} barIndex index of the bar
+     * @param {string} barBackground rgb value of the bar background
+     * @param {string} barLabel label of the bar
+     */
+    verifyBarTooltipContentsCSSAndA11yInSpecifyCorrectAnswer: (barIndex, barBackground, barLabel) => {
+        it('When user hovers over the bar, then bar tooltip should be displayed', () => {
+            utilities.triggerMouseover(utilities.getNthElement(chartsBarPage.specifyCorrectAnswerBar(), 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.colorBlockBarTooltipSpecifyCorrectAnswer(), {
+                '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 delete bar tooltip', { tags: 'css' }, () => {
+            utilities.triggerMouseover(utilities.getNthElement(chartsBarPage.specifyCorrectAnswerBar(), barIndex));
+            utilities.triggerMouseover(chartsBarPage.barAndPointTooltipDeleteButton());
+            barAndLineChartComponent.barAndPointTooltipDeleteButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+        });
+
+        it('Accessibility of delete bar tooltip', { tags: 'a11y' }, () => {
+            utilities.triggerMouseover(chartsBarPage.barAndPointTooltipDeleteButton());
+            cy.checkAccessibility(chartsBarPage.barAndPointTooltipWrapper());
+            utilities.triggerMouseout(chartsBarPage.barAndPointTooltipDeleteButton());
+        });
+
+        it('When user hovers away from the bar, then bar tooltip should be not be displayed', () => {
+            utilities.triggerMouseout(utilities.getNthElement(chartsBarPage.specifyCorrectAnswerBar(), barIndex));
+            utilities.verifyElementVisibilityState(chartsBarPage.barAndPointTooltipWrapper(), 'notExist');
+        });
+    },
 }
 
 export const chartsBarPage = {