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

package/cypress/pages/chartsLinePage.js

@@ -0,0 +1,42 @@
+const selectors = {
+    selectChartTypePoint: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] .ngie-chart-point'),
+}
+
+const steps = {
+    /**
+     * @description set the point height/value in the select chart type section chart
+     * @param {Object} pointProperties - The properties and changes to be done on the bar
+     * @param {number} pointProperties.pointIndex index of the bar
+     * @param {number} pointProperties.value value to which the point is to be set as per Y axis
+     * @param {number} pointProperties.range Maximum value of the axis on which bar value is determined
+     */
+    setPointValueInSelectChartTypeSection: ({ barIndex, value, range }) => {
+        utilities.getNthElement(chartsBarPage.selectChartTypePoint(), barIndex)
+            .invoke('attr', 'height')
+            .then((pointValue) => {
+                let updatedPointValue = parseFloat(value /= range)
+                let originalPointValue = parseFloat(pointValue)
+                let unitChange = parseFloat(1 / range)
+                if (originalPointValue < updatedPointValue) {
+                    for (let i = originalPointValue; i < updatedPointValue; i = parseFloat((i + unitChange).toFixed(2))) {
+                        utilities.getNthElement(chartsBarPage.selectChartTypePoint(), barIndex)
+                            .focus()
+                            .type('{upArrow}');
+                    }
+                } else if (originalPointValue > updatedPointValue) {
+                    for (let i = originalPointValue; i > updatedPointValue; i = parseFloat((i - unitChange).toFixed(2))) {
+                        utilities.getNthElement(chartsBarPage.selectChartTypePoint(), barIndex)
+                            .focus()
+                            .type('{downArrow}');
+                    }
+                }
+                utilities.getNthElement(chartsBarPage.selectChartTypePoint(), barIndex)
+                    .should('have.attr', 'height', updatedPointValue);
+            });
+    },
+}
+
+export const chartsLinePage = {
+    ...selectors,
+    steps
+}

package/cypress/pages/components/allowTeachersToDownloadStudentResponseComponent.js

@@ -0,0 +1,58 @@
+import utilities from "../../support/helpers/utilities";
+
+const selectors = {
+    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')
+}
+
+const steps = {
+    verifyAllowTeachersToDownloadStudentResponseCheckboxChecked: () => {
+        allowTeachersToDownloadStudentResponseComponent.allowTeachersToDownloadStudentResponseCheckbox()
+            .should('be.checked');
+    },
+
+    uncheckAllowTeachersToDownloadStudentResponseCheckbox: () => {
+        allowTeachersToDownloadStudentResponseComponent.allowTeachersToDownloadStudentResponseCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    checkAllowTeachersToDownloadStudentResponseCheckbox: () => {
+        allowTeachersToDownloadStudentResponseComponent.allowTeachersToDownloadStudentResponseCheckbox()
+            .click()
+            .should('be.checked');
+    }
+}
+
+const tests = {
+    verifyAllowTeachersToDownloadStudentResponseSection: () => {
+        it('In details section, \'Allow teachers to download student response\' checkbox and label should be displayed and by default it should be checked', () => {
+            utilities.verifyInnerText(allowTeachersToDownloadStudentResponseComponent.allowTeachersToDownloadStudentResponseLabel(), 'Allow teachers to download student response');
+            utilities.verifyElementVisibilityState(allowTeachersToDownloadStudentResponseComponent.allowTeachersToDownloadStudentResponseLabel(), 'visible');
+            utilities.verifyElementVisibilityState(allowTeachersToDownloadStudentResponseComponent.allowTeachersToDownloadStudentResponseCheckbox(), 'exist');
+            allowTeachersToDownloadStudentResponseComponent.steps.verifyAllowTeachersToDownloadStudentResponseCheckboxChecked();
+        });
+
+        it('User should be able to uncheck and check \'Allow teachers to download student response\' checkbox', () => {
+            allowTeachersToDownloadStudentResponseComponent.steps.uncheckAllowTeachersToDownloadStudentResponseCheckbox();
+            allowTeachersToDownloadStudentResponseComponent.steps.checkAllowTeachersToDownloadStudentResponseCheckbox();
+        });
+
+        it('CSS of \'Allow teachers to download student response\' checkbox and label section', { tags: 'css' }, () => {
+            utilities.verifyCSS(allowTeachersToDownloadStudentResponseComponent.allowTeachersToDownloadStudentResponseLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(allowTeachersToDownloadStudentResponseComponent.allowTeachersToDownloadStudentResponseCheckbox().parents('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+        })
+    }
+}
+
+export const allowTeachersToDownloadStudentResponseComponent = {
+    ...selectors,
+    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 = {
@@ -183,8 +183,8 @@ const tests = {
                 case 'list sorting':
                     helpText = 'You can set the correct answer by sorting the correct answer(s) in the response area(s).';
                     break;
-                case 'highlight':
-                    helpText = 'You can set the correct answer by highlighting the correct answer(s) in the response area(s).';
+                case 'text selection':
+                    helpText = 'You can set the correct answer by selecting the correct answer selection(s).';
                     break;
                 case 'highlight image':
                     helpText = 'You can set the correct answer by selecting the correct answer(s) in the response area(s).';
@@ -205,11 +205,14 @@ const tests = {
                     helpText = 'You can set the correct answer by entering the correct answer(s) in the response area(s)';
                     break;
                 case 'grid fill':
-                    helpText = 'You can set the correct answer by selecting the correct cell(s) in the grid.';
+                    helpText = 'You can set the correct answer by selecting the correct answer cell(s).';
                     break;
                 case 'number line':
                     helpText = 'You can set the correct answer by entering the correct answer(s) in the response area(s)';
                     break;
+                case 'number line - label':
+                    helpText = 'You can set the correct answer by dragging the correct answer(s) in the response area(s).';
+                    break;
                 default:
                     throw new Error('Invalid question type');
             }
@@ -246,36 +249,24 @@ const tests = {
      * @example - verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty('Correct');
      */
     verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty: (accordionName) => {
-        it(`When the user focuses in and out of the empty points input field, \'Error: Please enter points.\' validation text should be displayed below the points input field and error icon should be displayed on the \'${accordionName}\' accordion`, () => {
-            scoringSectionBase.pointsInputField()
+        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()
                 .focus();
-            scoringSectionBase.pointsInputField()
+            scoringSectionBaseEditTab.pointsInputField()
                 .blur();
-            utilities.verifyElementVisibilityState(scoringSectionBase.pleaseEnterPointsErrorMessage(), 'visible')
-            utilities.verifyInnerText(scoringSectionBase.pleaseEnterPointsErrorMessage(), 'Error: Please enter points.');
+            utilities.verifyElementVisibilityState(scoringSectionBaseEditTab.pleaseEnterPointsErrorMessage(), 'notExist')
             if (accordionName == 'Correct') {
                 autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
                     .within(() => {
-                        autoScoredSpecifyCorrectAnswerSection.steps.verifySpecifyCorrectAnswerErrorIconIsVisible();
+                        autoScoredSpecifyCorrectAnswerSection.steps.verifySpecifyCorrectAnswerErrorIconNotExists();
                     });
             } else {
                 autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
                     .within(() => {
-                        autoScoredSpecifyCorrectAnswerSection.steps.verifySpecifyCorrectAnswerErrorIconIsVisible();
+                        autoScoredSpecifyCorrectAnswerSection.steps.verifySpecifyCorrectAnswerErrorIconNotExists();
                     });
             };
         });
-
-        it(`When the user allots points then the \'Error: Please enter points.\' validation text and error icon displayed on the \'${accordionName}\' accordion should disappear, the allotted points should be displayed on the \'${accordionName}\' accordion`, () => {
-            scoringSectionBase.steps.allotPoints(20);
-            utilities.verifyElementVisibilityState(scoringSectionBase.pleaseEnterPointsErrorMessage(), 'notExist');
-            autoScoredSpecifyCorrectAnswerSection.steps.verifySpecifyCorrectAnswerErrorIconNotExists();
-            if (accordionName === 'Correct') {
-                autoScoredSpecifyCorrectAnswerSection.steps.verifyPointsLabelAndPointsOnAnswerAccordion(0, '20');
-            } else {
-                autoScoredSpecifyCorrectAnswerSection.steps.verifyPointsLabelAndPointsOnAnswerAccordion(1, '20');
-            }
-        });
     },
 
     verifyAutoScoredCorrectAnswerErrorMessageCSSAndA11y: () => {
@@ -320,7 +311,7 @@ const tests = {
                 .verifyPseudoClassBeforeProperty('color', css.color.activeButtons);
         });
 
-        it('If user has not added points and/or selected correct answer in the correct accordion, the user should get a warning popup', () => {
+        it('If user has not selected correct answer in the correct accordion, the user should get a warning popup', () => {
             autoScoredSpecifyCorrectAnswerSection.steps.clickOnAddAlternativeAnswerButton();
             dialogBoxBase.steps.allFieldsRequiredWarningPopupContents();
         });
@@ -350,13 +341,15 @@ const tests = {
             utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
         });
 
-        it('\'Error: Please set a correct answer.\' and \'Error: Please enter points.\' validation error messages should be displayed in the correct accordion', () => {
+        it('\'Error: Please set a correct answer.\' validation error messages should be displayed in the correct accordion, points error message should not be displayed', () => {
             autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
                 .within(() => {
                     utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
                 });
-            utilities.verifyInnerText(utilities.getNthElement(scoringSectionBase.pleaseEnterPointsErrorMessage(), 0), 'Error: Please enter points.');
-            utilities.verifyElementVisibilityState(scoringSectionBase.pleaseEnterPointsErrorMessage(), 'visible');
+            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

@@ -4,14 +4,14 @@ const css = Cypress.env('css');
 
 //Note: We need to work on this file, as disablePreviousIncorrectOptionLabel is not present for all auto scored question types, need to create different component files allowStudentsToCheckAnswerComponent, disablePreviousOptionComponent
 const selectors = {
-    allowStudentToCheckAnswerLabel: () => cy.get('[data-ngie-testid="allow-students-to-check-answer-checkbox"] .MuiFormControlLabel-label'),
+    allowStudentToCheckAnswerLabel: () => cy.get('[data-ngie-testid="allow-student-to-check-answer-checkbox"] .MuiFormControlLabel-label'),
     //Note: update after https://redmine.zeuslearning.com/issues/565666 gets resolved
-    allowStudentToCheckAnswerCheckbox: () => cy.get('[data-ngie-testid="allow-students-to-check-answer-checkbox"] input'),
+    allowStudentToCheckAnswerCheckbox: () => cy.get('[data-ngie-testid="allow-student-to-check-answer-checkbox"] input'),
     maximumCheckAnswerAttemptsDropdownLabel: () => cy.get('#Maximum-check-answer-attempts-dropdown-label'),
     maximumCheckAnswerAttemptsDropdown: () => cy.get('#Maximum-check-answer-attempts-select'),
-    maximumCheckAnswerAttemptsDropdownListOptions: (ariaLabel = null) => {
-        if (ariaLabel) {
-            return cy.get(`[aria-labelledby*="Maximum-check-answer-attempts-dropdown-label"] [role="option"][aria-label*="${ariaLabel}"]`)
+    maximumCheckAnswerAttemptsDropdownListOptions: (dataValue = null) => {
+        if (dataValue) {
+            return cy.get(`[aria-labelledby*="Maximum-check-answer-attempts-dropdown-label"] [role="option"][data-value="${dataValue}"]`)
         } else {
             return cy.get('[aria-labelledby*="Maximum-check-answer-attempts-dropdown-label"] [role="option"]')
         }
@@ -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();
         });
 
@@ -115,7 +115,7 @@ const tests = {
                 'font-size': css.fontSize.normal,
                 'font-weight': css.fontWeight.regular
             });
-            utilities.verifyCSS(autoScoredStudentViewSettings.allowStudentToCheckAnswerCheckbox().parents('[data-ngie-testid="allow-students-to-check-answer-checkbox"]').find('g').eq(1), {
+            utilities.verifyCSS(autoScoredStudentViewSettings.allowStudentToCheckAnswerCheckbox().parents('[data-ngie-testid="allow-student-to-check-answer-checkbox"]').find('g').eq(1), {
                 'fill': css.color.activeButtons
             });
             utilities.verifyCSS(autoScoredStudentViewSettings.maximumCheckAnswerAttemptsDropdownLabel(), {

package/cypress/pages/components/barAndLineChartComponent.js

@@ -0,0 +1,123 @@
+import { chartsCommonComponent } from "./chartsCommonComponent";
+
+const selectors = {
+    toolsLabel: () => cy.get('[class*="SelectChartTypestyles__OptionTitle"]'),
+    addBarOrPointOptionButton: () => cy.get('#add .icon-button-custom-format'),
+    addBarOrPointOptionLabel: () => cy.get('.drag-item-label-wrapper'),
+    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),
+    selectChartTypeChartToolsResetButton: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(2),
+    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: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(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),
+    previewTabToolsUndoButton: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(1),
+    previewTabToolsRedoButton: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(2),
+    previewTabToolsResetButton: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartToolsstyles__ChartToolsWrapper"] button').eq(3),
+    previewTabYAxisLabelButton: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartsPreviewstyles__LeftWrapper"] .title-container'),
+    previewTabYAxisCoordinate: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartGridstyle__ValueDiv"]'),
+    previewTabChartRowHeaderContainer: () => cy.get('[class*="ChartsPreviewstyles__PreviewWrapper"]:visible [class*="ChartGridstyle__RowHeaderContainer"]'),
+}
+
+const steps = {
+    selectAddBarOrPointToolbarOption: () => {
+        barAndLineChartComponent.addBarOrPointOptionButton()
+            .click()
+        barAndLineChartComponent.addBarOrPointOptionButton()
+            .should('have.attr', 'data-aria-pressed', 'true');
+    },
+
+    addBarOrPointInChartInSelectChartTypeSection: () => {
+        barAndLineChartComponent.selectChartTypeChartToolsAddBarOrPointButton()
+            .click();
+    },
+
+    addBarOrPointInChartInSpecifyCorrectAnswerSection: () => {
+        barAndLineChartComponent.specifyCorrectAnswerToolsAddBarOrPointButton()
+            .click();
+    },
+
+    /**
+     * @description Set y axis label
+     * @param {string} text text to be set as Y axis label
+     */
+    setYAxisLabel: (text) => {
+        barAndLineChartComponent.steps.clickOnYAxisLabelButton();
+        chartsCommonComponent.steps.addInputToChartLabelPopupInputField(text);
+        chartsCommonComponent.steps.saveGraphLabelPopup();
+    },
+
+    clickOnYAxisLabelButton: () => {
+        barAndLineChartComponent.selectChartTypeYAxisLabelButton()
+            .click();
+    },
+
+    clickOnBarTooltipBarLabelButton: () => {
+        barAndLineChartComponent.barAndPointTooltipLabelButton
+    },
+
+    //Preview tab
+    /**
+     * @description edit y axis label
+     * @param {string} text text to be set as Y axis label
+     */
+    editYAxisLabelInPreviewTab: (text) => {
+        barAndLineChartComponent.steps.clickOnYAxisLabelButtonInPreviewTab();
+        chartsCommonComponent.steps.addInputToChartLabelPopupInputField(text);
+        chartsCommonComponent.steps.saveGraphLabelPopup();
+    },
+
+    clickOnYAxisLabelButtonInPreviewTab: () => {
+        barAndLineChartComponent.previewTabYAxisLabelButton()
+            .click();
+    },
+
+    addBarOrPointInChartInPreviewTab: () => {
+        barAndLineChartComponent.previewTabToolsAddBarOrPointButton()
+            .click();
+    },
+
+    clickOnUndoButtonPreviewTab: () => {
+        barAndLineChartComponent.previewTabToolsUndoButton()
+            .click();
+    },
+
+    clickOnRedoButtonPreviewTab: () => {
+        barAndLineChartComponent.previewTabToolsRedoButton()
+            .click();
+    },
+
+    clickOnResetButtonPreviewTab: () => {
+        barAndLineChartComponent.previewTabToolsResetButton()
+            .click();
+    },
+
+    /**
+     * @description edit y axis label
+     * @param {string} text text to be set as Y axis label
+     */
+    editYAxisLabelInPreviewTab: (text) => {
+        barAndLineChartComponent.steps.clickOnYAxisLabelButtonInPreviewTab();
+        chartsCommonComponent.steps.addInputToChartLabelPopupInputField(text);
+        chartsCommonComponent.steps.saveGraphLabelPopup();
+    }
+}
+
+export const barAndLineChartComponent = {
+    ...selectors,
+    steps,
+}

package/cypress/pages/components/chartsCommonComponent.js

@@ -0,0 +1,138 @@
+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"]'),
+    selectChartTypesTooltipWrapper: () => cy.get('[class*="Chartsstyles__ChartsQuestionWrapper"] [class*="ChartTooltipstyles__ChartTooltipWrapper"]'),
+
+    //graph label popup
+    graphLabelPopupAddTitleLabel: () => cy.get('[aria-labelledby="alert-dialog-title"] .inline-text-property-label'),
+    graphLabelPopupAddTitleInputField: () => cy.get('[aria-labelledby="alert-dialog-title"] input'),
+    graphLabelPopupCancelButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(0),
+    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 = {
+    /**
+     * @description Set graph title
+     * @param {string} text text to be set as graph title
+     */
+    setGraphTitle: (text) => {
+        chartsCommonComponent.steps.clickOnGraphTitleButton();
+        chartsCommonComponent.steps.addInputToChartLabelPopupInputField(text);
+        chartsCommonComponent.steps.saveGraphLabelPopup();
+    },
+
+    /**
+     * @description Set x axis label
+     * @param {string} text text to be set as X axis label
+     */
+    setXAxisLabel: (text) => {
+        chartsCommonComponent.steps.clickOnXAxisLabelButton();
+        chartsCommonComponent.steps.addInputToChartLabelPopupInputField(text);
+        chartsCommonComponent.steps.saveGraphLabelPopup();
+    },
+
+    /**
+     * @description add input to chart label popup input fields
+     * @param {string} text text to be set as label
+     */
+    addInputToChartLabelPopupInputField: (text) => {
+        chartsCommonComponent.graphLabelPopupAddTitleInputField()
+            .clear()
+            .type(text);
+    },
+
+    saveGraphLabelPopup: () => {
+        chartsCommonComponent.graphLabelPopupSaveButton()
+            .click();
+    },
+
+    cancelGraphLabelPopup: () => {
+        chartsCommonComponent.graphLabelPopupCancelButton()
+            .click();
+    },
+
+    clickOnGraphTitleButton: () => {
+        chartsCommonComponent.selectChartTypeGraphTitleButton()
+            .click();
+    },
+
+    clickOnXAxisLabelButton: () => {
+        chartsCommonComponent.selectChartTypeXAxisLabelButton()
+            .click();
+    },
+
+    clickOnXAxisLabelButtonInPreviewTab: () => {
+        chartsCommonComponent.previewTabXAxisLabelButton()
+            .click();
+    },
+
+    /**
+     * @param {number} points - The points to be allotted.
+     * @description - Allots points in the scoring section.
+     */
+    allotPoints: (points) => {
+        chartsCommonComponent.pointsInputField()
+            .clear()
+            .type(`${points}`)
+            .should('have.value', points)
+            .blur();
+    },
+
+    //Preview tab
+    /**
+     * @description edit x axis label in preview tab
+     * @param {string} text text to be set as X axis label
+     */
+    editXAxisLabelInPreviewTab: (text) => {
+        chartsCommonComponent.steps.clickOnXAxisLabelButtonInPreviewTab();
+        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 = {
+    ...selectors,
+    steps
+}

package/cypress/pages/components/commonComponents.js

@@ -11,6 +11,7 @@ const selectors = {
     errorMessage: () => cy.get('.error-text-message:visible'),
     nextGenCreateItemWrapper: () => cy.get('#nextgen-assess-create-item'),
     dropdownList: () => cy.get('.dropdown-list'),
+    dropdownListOption: () => cy.get('.dropdown-menu-item'),
     dragHandleButton: () => cy.get('.dragicon-button'),
     deleteButton: () => cy.get('button[aria-label*="Delete option"]'),
     tickIconForOptionButtons: () => cy.get('.ngie-toggle-button-tick-icon'),

package/cypress/pages/components/draggableOptionContainer.js

@@ -9,7 +9,7 @@ const threeOptions = ['option 1', 'option 2', 'option 3'];
 
 //TODO update option container selectors when https://redmine.zeuslearning.com/issues/563159 is resolved
 const selectors = {
-    draggableOption: () => cy.get('[class*="DraggableItems"][class*="style__ItemWrapper"]'),
+    draggableOption: () => cy.get('[class*="DraggableItems"][class*="__ItemWrapper"]'),
     optionsContainerSpecifyCorrectAnswerSection: () => cy.get('.option-drag-and-drop'),
     optionsContainerPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .option-drag-and-drop'),
     groupedOptionsTitleSpecifyCorrectAnswerSection: () => cy.get('[class*="GroupTitleWrapper"]'),
@@ -470,6 +470,7 @@ const tests = {
 
         it('When the user enters text in options input fields then the entered text should be displayed in the respective draggable options in a group in the options container of the specify correct answer section', () => {
             optionsWrapperComponent.steps.addInputToOptionsInputField(options);
+            cy.wait(200) //Added wait as this is failing due to page updating
             draggableOptionContainer.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(0, options);
         });
 

package/cypress/pages/components/equationEditorFlyout.js

@@ -244,7 +244,7 @@ const steps = {
         equationEditorFlyout.categoryCharacters('Comma')
             .click();
         equationEditorFlyout.previewInputField()
-            .type('What is the value of x?');
+            .type('What is the value of x');
         equationEditorFlyout.categoryCharacters('QuestionMark')
             .click();
         equationEditorFlyout.previewInputField()
@@ -383,9 +383,10 @@ const tests = {
 
     verifyEquationEditorFlyoutSymbolCategoriesTabs: (categoryName) => {
         it(`On clicking the ${equationEditorCategoriesAndSymbols[categoryName].displayName} category in the Equation Editor flyout, then the ${equationEditorCategoriesAndSymbols[categoryName].displayName} category tab should get selected`, () => {
-            equationEditorFlyout.categoryTab()
+            equationEditorFlyout.categoryTabTitle()
                 .contains(`${equationEditorCategoriesAndSymbols[categoryName].displayName}`, { matchCase: false })
                 .click()
+                .parents('.tool-wrapper')
                 .within(() => {
                     equationEditorFlyout.categoryTabTitle()
                         .verifyInnerText(`${equationEditorCategoriesAndSymbols[categoryName].displayName}`)

package/cypress/pages/components/essayResponseCommonComponents.js

@@ -369,8 +369,14 @@ const steps = {
         essayResponseCommonComponents.customizeFormattingOptionsTiles()
             .each(($button, count) => {
                 cy.wrap($button)
-                    .should('have.attr', 'title', customizeOptions[count])
-                    .and('have.attr', 'data-aria-pressed', stateOfFormattingOption[count])
+                    .invoke('attr', 'aria-label')
+                    .then((ariaLabel) => {
+                        const normalizedAriaLabel = ariaLabel.trim();
+                        const isOptionIncluded = customizeOptions.some(option => normalizedAriaLabel.includes(option));
+                        expect(isOptionIncluded).to.be.true;
+                        cy.wrap($button)
+                            .and('have.attr', 'data-aria-pressed', stateOfFormattingOption[count])
+                    });
             });
     },
 

package/cypress/pages/components/fillInTheGapsDropdownCommonComponent.js

@@ -683,6 +683,7 @@ const tests = {
             utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownLabelSpecifyCorrectAnswerSection(), 1), 'Dropdown 2');
         });
 
+        //Note: Need to find a solution for this, not working
         it('When user expands and collapses the dropdown without selecting any option, \'Error: Please set a correct answer.\' error message should be displayed', () => {
             fillInTheGapsDropdownCommonComponent.steps.expandAndCollapseDropdownInSpecifyCorrectAnswerSection(0);
             utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');

package/cypress/pages/components/imageCanvasComponent.js

@@ -568,7 +568,8 @@ const steps = {
             imageCanvasComponent.responseAreaStyle()
                 .eq(index)
                 .trigger('mouseover', { force: true });
-            utilities.verifyInnerText(commonComponents.tooltipText(), dropzonePointer);
+            commonComponents.tooltipText()
+                .should('have.text', dropzonePointer, { matchCase: true });
             imageCanvasComponent.responseAreaStyle()
                 .eq(index)
                 .trigger('mouseout', { force: true });
@@ -645,11 +646,11 @@ const tests = {
     },
 
     verifyCanvasResponseAreaContents: () => {
-        it('When user clicks inside canvas, then one response container should be added with pointer, close button and numeration.', () => {
+        it('When user clicks inside canvas, then one response container should be added with close button, numeration and without pointer.', () => {
             imageCanvasComponent.steps.insertResponseArea(80);
             utilities.verifyElementCount(imageCanvasComponent.responseAreaWrapper(), 1);
             utilities.verifyElementVisibilityState(imageCanvasComponent.responseArea(), 'visible');
-            utilities.verifyElementVisibilityState(imageCanvasComponent.responseAreaPointer(), 'visible');
+            utilities.verifyElementVisibilityState(imageCanvasComponent.responseAreaPointer(), 'notExist');
             utilities.verifyElementVisibilityState(imageCanvasComponent.removeResponseAreaButton(), 'visible');
             utilities.verifyInnerText(imageCanvasComponent.responseAreaNumerationText(), '1');
             utilities.verifyElementVisibilityState(imageCanvasComponent.responseAreaNumerationText(), 'visible');
@@ -822,7 +823,7 @@ const tests = {
         it('\'Cancel\' and \'Ok\' buttons should be displayed', () => {
             utilities.verifyInnerText(colorPopupComponent.cancelButton(), 'Cancel');
             utilities.verifyElementVisibilityState(colorPopupComponent.cancelButton(), 'visible');
-            utilities.verifyInnerText(colorPopupComponent.okButton(), 'OK');
+            utilities.verifyInnerText(colorPopupComponent.okButton(), 'Ok');
             utilities.verifyElementVisibilityState(colorPopupComponent.okButton(), 'visible');
         });
 

package/cypress/pages/components/index.js

@@ -63,4 +63,12 @@ export * from './specifyRowsAndColumnsComponent'
 export * from './toolsAndControlsComponent';
 export * from './resetPopupComponent';
 export * from './setPointsPopupBase';
+export * from './styleAndLayoutCustomizationAccordionComponent';
 export * from './defaultToolDropdown';
+export * from './layoutSectionComponent';
+export * from './barAndLineChartComponent';
+export * from './chartsCommonComponent';
+export * from './numberLineCommonComponent';
+export * from './limitNumberOfRetakeComponent';
+export * from './allowTeachersToDownloadStudentResponseComponent';
+export * from './singleMultipleSelectionModeComponent';