itemengine-cypress-automation 1.0.133-7thMarchFixes-0e78080.0 → 1.0.133

package/cypress/pages/graphingPage.js

@@ -1,5 +1,6 @@
 import utilities from "../support/helpers/utilities";
-import { questionInstructionsComponent, createQuestionBasePage, scoringSectionBaseEditTab, autoScoredScoringPreviewTab, autoScoredStudentViewSettings, autoScoredSpecifyCorrectAnswerSection, commonComponents } from "./components";
+import { questionInstructionsComponent, createQuestionBasePage, scoringSectionBaseEditTab, autoScoredScoringPreviewTab, autoScoredStudentViewSettings, autoScoredSpecifyCorrectAnswerSection, commonComponents, backgroundImageUploadComponent, imageCanvasComponent, opacityComponent, autoScoredScoringSectionMultiResponseType, additionalSettingsPanel } from "./components";
+import { dialogBoxBase } from "./dialogBoxBase";
 const css = Cypress.env('css');
 
 const selectors = {
@@ -7,22 +8,68 @@ const selectors = {
     ...questionInstructionsComponent,
     ...autoScoredScoringPreviewTab,
     ...commonComponents,
+    ...imageCanvasComponent,
+    ...opacityComponent,
+    ...backgroundImageUploadComponent,
+    ...autoScoredScoringSectionMultiResponseType,
+    ...autoScoredSpecifyCorrectAnswerSection,
+    ...additionalSettingsPanel,
 
     //Edit tab
     graphEditTab: () => cy.get('[class*="GraphingWrapper"] .ngie-jxgbox svg'),
+    graphTitleGraphEditTab: () => cy.get('[class*="GraphHeaderFooter"] .title-container').eq(0),
+    xAxisGraphEditTab: () => cy.get('[class*="GraphingWrapper"] .ngie-jxgbox svg line[stroke-linecap="butt"]').eq(0),
+    yAxisGraphEditTab: () => cy.get('[class*="GraphingWrapper"] .ngie-jxgbox svg line[stroke-linecap="butt"]').eq(1),
+    xMinInputField: () => cy.get('[class*="GraphRightLeft"] [class*="CustomInputFieldWrapper"] input').eq(0),
+    xMinLabel: () => cy.get('[class*="GraphRightLeft"] [class*="CustomInputFieldLabel"]').eq(0),
+    xMaxInputField: () => cy.get('[class*="GraphRightLeft"] [class*="CustomInputFieldWrapper"] input').eq(1),
+    xMaxLabel: () => cy.get('[class*="GraphRightLeft"] [class*="CustomInputFieldLabel"]').eq(1),
+    yMaxLabel: () => cy.get('[class*="GraphHeaderFooter"] [class*="CustomInputFieldLabel"]').eq(0),
+    yMaxInputField: () => cy.get('[class*="GraphHeaderFooter"] input').eq(0),
+    yMinLabel: () => cy.get('[class*="GraphHeaderFooter"] [class*="CustomInputFieldLabel"]').eq(1),
+    yMinInputField: () => cy.get('[class*="GraphHeaderFooter"] input').eq(1),
+    titlePopupAddLabelLabel: () => cy.get('[aria-labelledby="alert-dialog-title"] .title-casing'),
+    titlePopupAddLabelInputField: () => cy.get('[aria-labelledby="alert-dialog-title"] [role="textbox"]'),
+    titlePopupCancelButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(0),
+    titlePopupSaveButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(1),
+    graphImageEditTab: () => cy.get('.ngie-jxgbox .JXGimage'),
     snapToGridCheckbox: () => cy.get('[data-ngie-testid="snap-to-grid-checkbox"] input'),
+    snapToGridLabel: () => cy.get('[data-ngie-testid="snap-to-grid-checkbox"] .MuiFormControlLabel-label'),
     graphLine: () => cy.get('line[tabindex="null"]'),
     graphCircle: () => cy.get('ellipse[stroke-linecap="butt"]'),
     graphPolygon: () => cy.get('polygon'),
     graphSine: () => cy.get('path[stroke-linecap="butt"][stroke-opacity="1"]'),
-    graphPoint: (cx, cy) => cy.get(`[class*="GraphingWrapper"] .ngie-jxgbox svg ellipse[display="inline"][cx="${cx}"][cy="${cy}"]`),
+    textOnGraphEditTab: (graphText) => {
+        if (graphText) {
+            return cy.get('[class*="GraphingWrapper"] .ngie-jxgbox .JXGtext').contains(graphText)
+        } else {
+            return cy.get('[class*="GraphingWrapper"] .ngie-jxgbox .JXGtext')
+        }
+    },
+    toolsLabel: () => cy.get('[class*="CustomizedToolBarOptionsstyles__ToolbarLabel"]').eq(0),
+    xAxisLabelGraphEditTab: () => cy.get('.graph-left-wrapper .title-casing'),
+    yAxisLabelGraphEditTab: () => cy.get('.graph-footer .title-casing'),
+    controlsLabel: () => cy.get('[class*="CustomizedToolBarOptionsstyles__ToolbarLabel"]').eq(1),
     toolOptions: (toolOptionAriaLabel = null) => {
         if (toolOptionAriaLabel) {
-            return cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(0).find(`.icon-button-custom-format[aria-label*=${toolOptionAriaLabel}]`)
+            return cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(0).find(`.icon-button-custom-format[aria-label*="${toolOptionAriaLabel}"]`)
         } else {
             return cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(0).find(`.icon-button-custom-format`)
         }
     },
+    toolOptionsLabel: () => cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(0).find(`[class*="DragItemstyles__LabelWrapper"]`),
+    toolOptionsTickIcon: () => cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(0).find(`.tick-icon-wrapper`),
+    controlsOptionsLabel: () => cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(1).find(`[class*="DragItemstyles__LabelWrapper"]`),
+    controlsTickIcon: () => cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(1).find(`.tick-icon-wrapper`),
+    defaultToolDropdownLabel: () => cy.get('#Default-tool-dropdown-label'),
+    defaultToolDropdown: () => cy.get('#Default-tool-select'),
+    defaultToolDropdownOptions: (dropdownOption = null) => {
+        if (dropdownOption) {
+            return cy.get(`[aria-labelledby*="Default-tool-dropdown-label"] [role="option"][aria-label*="${dropdownOption}"]`)
+        } else {
+            return cy.get('[aria-labelledby*="Default-tool-dropdown-label"] [role="option"]')
+        }
+    },
     graphToolOptionEditTab: (toolOptionAriaLabel = null) => {
         if (toolOptionAriaLabel) {
             return cy.get('.graph-tools-wrapper').eq(0).find(`.single-select-toggle-group-double button[aria-label*=${toolOptionAriaLabel}]`)
@@ -32,60 +79,181 @@ const selectors = {
     },
     graphToolOptionSpecifyCorrectAnswer: (toolOptionAriaLabel = null) => {
         if (toolOptionAriaLabel) {
-            return cy.get('.graph-tools-wrapper').eq(1).find(`.single-select-toggle-group-double button[aria-label*=${toolOptionAriaLabel}]`)
+            return cy.get('.graph-tools-wrapper').eq(1).find(`.single-select-toggle-group-double button[aria-label*="${toolOptionAriaLabel}"]`)
         } else {
             return cy.get('.graph-tools-wrapper').eq(1).find('.single-select-toggle-group-double button')
         }
     },
     graphToolOptionPreviewTab: (toolOptionAriaLabel = null) => {
         if (toolOptionAriaLabel) {
-            return cy.get(`[class*="GraphingQuestion"] .single-select-toggle-group-double button[aria-label*=${toolOptionAriaLabel}]`)
+            return cy.get(`[class*="GraphingQuestion"] .single-select-toggle-group-double button[aria-label*="${toolOptionAriaLabel}"]`)
         } else {
             return cy.get('[class*="GraphingQuestion"] .single-select-toggle-group-double button')
         }
     },
     controlOptions: (toolOptionAriaLabel = null) => {
         if (toolOptionAriaLabel) {
-            return cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(1).find(`.icon-button-custom-format[aria-label*=${toolOptionAriaLabel}]`)
+            return cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(1).find(`.icon-button-custom-format[aria-label*="${toolOptionAriaLabel}"]`)
         } else {
             return cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(1).find('.icon-button-custom-format')
         }
     },
     graphControlOptionEditTab: (controlOptionAriaLabel = null) => {
         if (controlOptionAriaLabel) {
-            return cy.get('[class*="GraphingToolsstyles__ControlsWrapper"]').eq(0).find(`button[aria-label*=${controlOptionAriaLabel}]`)
+            return cy.get('[class*="GraphingToolsstyles__ControlsWrapper"]').eq(0).find(`button[aria-label*="${controlOptionAriaLabel}"]`)
         } else {
             return cy.get('[class*="GraphingToolsstyles__ControlsWrapper"]').eq(0).find('button')
         }
     },
     graphControlOptionSpecifyCorrectAnswer: (controlOptionAriaLabel = null) => {
         if (controlOptionAriaLabel) {
-            return cy.get('[class*="GraphingToolsstyles__ControlsWrapper"]').eq(1).find(`button[aria-label*=${controlOptionAriaLabel}]`)
+            return cy.get('[class*="GraphingToolsstyles__ControlsWrapper"]').eq(1).find(`button[aria-label*="${controlOptionAriaLabel}"]`)
         } else {
             return cy.get('[class*="GraphingToolsstyles__ControlsWrapper"]').eq(1).find('button')
         }
     },
     graphControlOptionPreviewTab: (controlOptionAriaLabel = null) => {
         if (controlOptionAriaLabel) {
-            return cy.get(`[class*="GraphingQuestion"] [class*="GraphingToolsstyles__ControlsWrapper"] button[aria-label*=${controlOptionAriaLabel}]`)
+            return cy.get(`[class*="GraphingQuestion"] [class*="GraphingToolsstyles__ControlsWrapper"] button[aria-label*="${controlOptionAriaLabel}"]`)
         } else {
             return cy.get('[class*="GraphingQuestion"] [class*="GraphingToolsstyles__ControlsWrapper"] button')
         }
     },
     graphSpecifyCorrectAnswerSection: () => cy.get('.MuiAccordion-region .ngie-jxgbox svg'),
+    xAxisGraphSpecifyCorrectAnswerSection: () => cy.get('.MuiAccordion-region .ngie-jxgbox svg line[stroke-linecap="butt"]').eq(0),
+    yAxisGraphSpecifyCorrectAnswerSection: () => cy.get('.MuiAccordion-region .ngie-jxgbox svg line[stroke-linecap="butt"]').eq(1),
+    graphTitleSpecifyCorrectAnswerSection: () => cy.get('.MuiAccordion-region [class*="__GraphHeader"] .title-container'),
+    xAxisLabelGraphSpecifyCorrectAnswerSection: () => cy.get('.MuiAccordion-region .graph-left-wrapper .title-container'),
+    yAxisLabelGraphSpecifyCorrectAnswerSection: () => cy.get('.MuiAccordion-region .graph-footer .title-container'),
+    graphImageSpecifyCorrectAnswerSection: () => cy.get('.ngie-jxgbox image').eq(1),
+    textOnGraphSpecifyCorrectAnswerSection: (graphText) => {
+        if (graphText) {
+            return cy.get('.MuiAccordion-region .ngie-jxgbox .JXGtext').contains(graphText)
+        } else {
+            return cy.get('.MuiAccordion-region .ngie-jxgbox .JXGtext')
+        }
+    },
+    addBackgroundShapesLabel: () => cy.get('[class*="Graphingstyles__BackgroundShapeLabelWrapper"]'),
+    //Preview tab graph
     graphPreviewTab: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox svg'),
+    graphTitlePreviewTab: () => cy.get('[class*="GraphingQuestion"] [class*="__GraphHeader"] .title-container'),
+    xAxisLabelGraphPreviewTab: () => cy.get('[class*="GraphingQuestion"] .graph-left-wrapper .title-container'),
+    yAxisLabelGraphPreviewTab: () => cy.get('[class*="GraphingQuestion"] .graph-footer .title-container'),
+    xAxisGraphPreviewTab: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox svg line[stroke-linecap="butt"]').eq(0),
+    yAxisGraphPreviewTab: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox svg line[stroke-linecap="butt"]').eq(1),
     graphLinePreviewTab: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox svg').eq(0).find('line[tabindex="null"]'),
     graphLineSegmentsPreviewTab: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox svg').eq(0).find('line[tabindex="0"]'),
     graphCirclePreviewTab: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox svg').eq(0).find('ellipse[stroke-linecap="butt"]'),
     graphPolygonPreviewTab: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox svg').eq(0).find('polygon'),
+    textOnGraphPreviewTab: (graphText) => {
+        if (graphText) {
+            return cy.get('[class*="GraphingQuestion"] .ngie-jxgbox .JXGtext').contains(graphText)
+        } else {
+            return cy.get('[class*="GraphingQuestion"] .ngie-jxgbox .JXGtext')
+        }
+    },
     graphSineAndParabolaPreviewTab: () => cy.get('[class*="GraphingQuestion"] .ngie-jxgbox svg').eq(0).find('path[stroke-linecap="butt"][stroke-opacity="1"]'),
+    repeatedPointsSwitch: () => cy.get('.repeated-points-wrapper .MuiSwitch-input'),
     graphLabelInputField: () => cy.get('.label-tool:visible'),
+    yAxisLabelGraphPreviewTab: () => cy.get('[class*="GraphingQuestion"] .graph-footer .title-container'),
 
     //Background 
+    imagePropertiesLabel: () => cy.get('[class*="ImageProperties"] .settings-label'),
+    imageAlignmentLabel: () => cy.get('[class*="AlignmentWrapper"] .additional-settings-label'),
     patternRadioButton: () => cy.get('[type="radio"][aria-label="Pattern"]'),
+    patternLabel: () => cy.get('.ngie-radio-label[aria-label="Pattern"]'),
+    imageRadioButton: () => cy.get('[type="radio"][aria-label="Image"]'),
+    imageLabel: () => cy.get('.ngie-radio-label[aria-label="Image"]'),
+    blankCanvasRadioButton: () => cy.get('[type="radio"][aria-label="Blank canvas"]'),
+    blankCanvasLabel: () => cy.get('.ngie-radio-label[aria-label="Blank canvas"]'),
+    selectPatternLabel: () => cy.get('[class*="PatternSelectionWrapper"] .additional-settings-label'),
+    selectPatternOptions: (optionAriaLabel = null) => {
+        if (optionAriaLabel) {
+            return cy.get(`[class*="__StyledButton"][aria-label*="${optionAriaLabel}"]`)
+        } else {
+            return cy.get('[class*="__StyledButton"]')
+        }
+    },
+    selectPatternOptionsLabel: (optionAriaLabel = null) => {
+        if (optionAriaLabel) {
+            return cy.get(`[class*="__ListItem"] [aria-label*="${optionAriaLabel}"]`)
+        } else {
+            return cy.get('[class*="__ListItem"]')
+        }
+    },
+    selectPatternOptionSelectedIcon: () => cy.get('[class*="SelectedIcon"]'),
+    selectPatternImageAltTextLabel: () => cy.get('[class*="BackgroundControlsstyles__AltTextWrapper"] .text-label'),
+    selectPatternImageAltTextInputField: () => cy.get('[class*="BackgroundControlsstyles__AltTextWrapper"] input'),
+
+    //Grid options
+    gridOptionsAccordionLabel: () => cy.get('.customized-options-label').eq(1),
+    gridOptionsAccordion: () => cy.get('.ngie-accordion-summary').eq(1),
+    gridOptionsAccordionExpandIcon: () => cy.get('.ngie-accordion-summary [class*="expandIconWrapper"]').eq(1),
+    xToleranceLabel: () => cy.get('.xy-tolerance-input-wrapper .input-wrapper').eq(0),
+    xToleranceInputField: () => cy.get('.xy-tolerance-input-wrapper input').eq(0),
+    yToleranceLabel: () => cy.get('.xy-tolerance-input-wrapper .input-wrapper').eq(1),
+    yToleranceInputField: () => cy.get('.xy-tolerance-input-wrapper input').eq(1),
+    originOptionLabel: () => cy.get('.single-select-toggle-group-title').eq(0),
+    originToggleOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[class*="single-select-toggle-button"][aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('[class*="single-select-toggle-button"]')
+        }
+    },
+    xAxisLabel: () => cy.get('[class*="AxisLabelWrapper"]').eq(0),
+    yAxisLabel: () => cy.get('[class*="AxisLabelWrapper"]').eq(1),
+    xGridSpacingLabel: () => cy.get('label[for="X grid spacing"]'),
+    xGridSpacingInputField: () => cy.get('input[id="X grid spacing"]'),
+    xTickIntervalLabel: () => cy.get('label[for="grid-options-x-tick-interval"]'),
+    xTickIntervalInputField: () => cy.get('input[id*="Tick interval"]').eq(0),
+    xDisplayAxisLabel: () => cy.get('[data-ngie-testid="display-axis-label-checkbox"] .MuiFormControlLabel-label').eq(0),
+    xRemoveTicksLabel: () => cy.get('[data-ngie-testid="remove-ticks-checkbox"] .MuiFormControlLabel-label').eq(0),
+    xShowTicksLabelsLabel: () => cy.get('[data-ngie-testid="show-tick-labels-checkbox"] .MuiFormControlLabel-label').eq(0),
+    xMinArrowLabel: () => cy.get('[data-ngie-testid="min-arrow-checkbox"] .MuiFormControlLabel-label').eq(0),
+    xMaxArrowLabel: () => cy.get('[data-ngie-testid="max-arrow-checkbox"] .MuiFormControlLabel-label').eq(0),
+    xDisplayCommaForThousandSeparatorLabel: () => cy.get('[data-ngie-testid="display-comma-for-thousand-separator-checkbox"] .MuiFormControlLabel-label').eq(0),
+    xDisplayAxisCheckbox: () => cy.get('[data-ngie-testid="display-axis-label-checkbox"] input').eq(0),
+    xRemoveTicksCheckbox: () => cy.get('[data-ngie-testid="remove-ticks-checkbox"] input').eq(0),
+    xShowTicksLabelsCheckbox: () => cy.get('[data-ngie-testid="show-tick-labels-checkbox"] input').eq(0),
+    xMinArrowCheckbox: () => cy.get('[data-ngie-testid="min-arrow-checkbox"] input').eq(0),
+    xMaxArrowCheckbox: () => cy.get('[data-ngie-testid="max-arrow-checkbox"] input').eq(0),
+    xDisplayCommaForThousandSeparatorCheckbox: () => cy.get('[data-ngie-testid="display-comma-for-thousand-separator-checkbox"] input').eq(0),
+    yGridSpacingLabel: () => cy.get('label[for="Y grid spacing"]'),
+    yGridSpacingInputField: () => cy.get('input[id*="Y grid spacing"]'),
+    yTickIntervalLabel: () => cy.get('label[for="grid-options-y-tick-interval"]'),
+    yTickIntervalInputField: () => cy.get('input[id*="Tick interval"]').eq(1),
+    yDisplayAxisLabel: () => cy.get('[data-ngie-testid="display-axis-label-checkbox"] .MuiFormControlLabel-label').eq(1),
+    yRemoveTicksLabel: () => cy.get('[data-ngie-testid="remove-ticks-checkbox"] .MuiFormControlLabel-label').eq(1),
+    yShowTicksLabelsLabel: () => cy.get('[data-ngie-testid="show-tick-labels-checkbox"] .MuiFormControlLabel-label').eq(1),
+    yMinArrowLabel: () => cy.get('[data-ngie-testid="min-arrow-checkbox"] .MuiFormControlLabel-label').eq(1),
+    yMaxArrowLabel: () => cy.get('[data-ngie-testid="max-arrow-checkbox"] .MuiFormControlLabel-label').eq(1),
+    yDisplayCommaForThousandSeparatorLabel: () => cy.get('[data-ngie-testid="display-comma-for-thousand-separator-checkbox"] .MuiFormControlLabel-label').eq(1),
+    yDisplayAxisCheckbox: () => cy.get('[data-ngie-testid="display-axis-label-checkbox"] input').eq(1),
+    yRemoveTicksCheckbox: () => cy.get('[data-ngie-testid="remove-ticks-checkbox"] input').eq(1),
+    yShowTicksLabelsCheckbox: () => cy.get('[data-ngie-testid="show-tick-labels-checkbox"] input').eq(1),
+    yMinArrowCheckbox: () => cy.get('[data-ngie-testid="min-arrow-checkbox"] input').eq(1),
+    yMaxArrowCheckbox: () => cy.get('[data-ngie-testid="max-arrow-checkbox"] input').eq(1),
+    yDisplayCommaForThousandSeparatorCheckbox: () => cy.get('[data-ngie-testid="display-comma-for-thousand-separator-checkbox"] input').eq(1),
+
+    //Layout
+    layoutAccordionLabel: () => cy.get('.customized-options-label').eq(0),
+    layoutAccordion: () => cy.get('.ngie-accordion-summary').eq(0),
+    layoutAccordionExpandIcon: () => cy.get('.ngie-accordion-summary [class*="expandIconWrapper"]').eq(0),
+    heightInputField: () => cy.get('.height-width-wrapper input').eq(0),
+    heightLabel: () => cy.get('label[for="Height (px)"]'),
+    widthInputField: () => cy.get('.height-width-wrapper input').eq(1),
+    widthLabel: () => cy.get('label[for="Width (px)"]'),
+    marginInputField: () => cy.get('.margin-input-wrapper input'),
+    marginLabel: () => cy.get('label[for="Margin (px)"]'),
+    makeResponsiveLabel: () => cy.get('.mobile-responsive-wrapper .MuiFormControlLabel-label'),
+    makeResponsiveSwitch: () => cy.get('.mobile-responsive-wrapper .MuiSwitch-switchBase'),
+    whatIsThisLabel: () => cy.get('.what-is-wrapper [class*="StyledLink"]'),
+    makeResponsiveHelpText: () => cy.get('[class*="WhatIsThisDescriptionWrapper"]'),
 
     //Reset popup
     resetPopupConfirmResetButton: () => cy.get('.accept-button'),
+    resetPopupCancelButton: () => cy.get('.reject-button'),
 
     //Grading view
     gradingViewQuestionSineWave: () => cy.get('.ngie-jxgbox').eq(0).find('path[stroke-linecap="butt"][stroke-opacity="1"]'),
@@ -105,93 +273,882 @@ const selectors = {
     correctIcon: () => cy.get('[data-icon="CorrectAnswer"]'),
 }
 
-const steps = {
-    ...createQuestionBasePage.steps,
-    ...questionInstructionsComponent.steps,
-    ...scoringSectionBaseEditTab.steps,
-    ...autoScoredScoringPreviewTab.steps,
-    ...autoScoredStudentViewSettings.steps,
-    ...autoScoredSpecifyCorrectAnswerSection.steps,
+const steps = {
+    ...createQuestionBasePage.steps,
+    ...questionInstructionsComponent.steps,
+    ...scoringSectionBaseEditTab.steps,
+    ...autoScoredScoringPreviewTab.steps,
+    ...autoScoredStudentViewSettings.steps,
+    ...autoScoredSpecifyCorrectAnswerSection.steps,
+    ...imageCanvasComponent.steps,
+    ...opacityComponent.steps,
+    ...backgroundImageUploadComponent.steps,
+    ...autoScoredScoringSectionMultiResponseType.steps,
+    ...commonComponents.steps,
+    ...additionalSettingsPanel.steps,
+
+    //Edit tab
+    /**
+     * This function selects tool options
+     * @param {string[]} toolOptionAriaLabelArray array aria-label of tool options
+     */
+    selectToolOptions: (toolOptionAriaLabelArray) => {
+        toolOptionAriaLabelArray.forEach((toolOptionAriaLabel) => {
+            graphingPage.toolOptions(toolOptionAriaLabel)
+                .click();
+        });
+    },
+
+    /**
+     * This function de-selects tool options
+     * @param {string[]} toolOptionAriaLabelArray array aria-label of tool options
+     */
+    deselectToolOptions: (toolOptionAriaLabelArray) => {
+        toolOptionAriaLabelArray.forEach((toolOptionAriaLabel) => {
+            graphingPage.toolOptions(toolOptionAriaLabel)
+                .click();
+        });
+    },
+
+    /**
+     * This function selects tool options
+     * @param {string[]} controlOptionAriaLabel array aria-label of tool options
+     */
+    selectControl: (controlOptionAriaLabel) => {
+        graphingPage.controlOptions(controlOptionAriaLabel)
+            .click();
+    },
+
+    /**
+     * This function de-selects tool options
+     * @param {string[]} controlOptionAriaLabel array aria-label of tool options
+     */
+    deselectControl: (controlOptionAriaLabel) => {
+        graphingPage.controlOptions(controlOptionAriaLabel)
+            .click();
+    },
+
+    checkPatternBackground: () => {
+        graphingPage.patternRadioButton()
+            .click();
+    },
+
+    expandDefaultToolDropdown: () => {
+        graphingPage.defaultToolDropdown()
+            .click();
+    },
+
+    /**
+     * This function verifies checked state of radio buttons
+     * @param {('Blank canvas'|'Image'|'Pattern')} radioButton 
+     */
+    verifyBackgroundRadioButtonChecked: (radioButton) => {
+        switch (radioButton) {
+            case 'Pattern':
+                graphingPage.patternRadioButton()
+                    .should('be.checked');
+                break;
+            case 'Image':
+                graphingPage.imageRadioButton()
+                    .should('be.checked');
+                break;
+            case 'Blank canvas':
+                graphingPage.blankCanvasRadioButton()
+                    .should('be.checked');
+                break;
+            default:
+                throw new Error('Invalid radio button');
+        }
+    },
+
+    /**
+     * This function checks radio buttons
+     * @param {('Blank canvas'|'Image'|'Pattern')} radioButton 
+     */
+    checkBackgroundRadioButton: (radioButton) => {
+        switch (radioButton) {
+            case 'Pattern':
+                graphingPage.patternRadioButton()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Image':
+                graphingPage.imageRadioButton()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Blank canvas':
+                graphingPage.blankCanvasRadioButton()
+                    .click()
+                    .should('be.checked');
+                break;
+            default:
+                throw new Error('Invalid radio button');
+        }
+    },
+
+    /**
+     * This function selects the select pattern option
+     * @param {string} optionLabel label of the option to be selected
+     */
+    selectSelectPatternOption: (optionLabel) => {
+        graphingPage.selectPatternOptions(optionLabel)
+            .click();
+    },
+
+    /**
+    * This function verifies the selected select pattern option
+    * @param {('Grid'|'Lines'|'Dots'|'Circular'|'Quadrant')} optionLabel label of the option to be selected
+    */
+    verifySelectPatternOptionSelected: (optionLabel) => {
+        graphingPage.selectPatternOptions(optionLabel)
+            .within(() => {
+                utilities.verifyElementVisibilityState(graphingPage.selectPatternOptionSelectedIcon(), 'exist');
+            })
+    },
+
+    /**
+     * This function selects dropdown option from default tool dropdown
+     * @param {string} dropdownOption aria-label of the dropdown option
+     */
+    selectOptionFromDefaultToolDropdown: (dropdownOption) => {
+        graphingPage.defaultToolDropdownOptions(dropdownOption)
+            .click();
+    },
+
+    /**
+     * @param {string} fileFormat format of the uploaded file in the graph
+     * @description this function verifies the attribute of the image has the expected file format
+     */
+    verifyUploadedImageInGraphEditTab: (fileFormat) => {
+        graphingPage.graphImageEditTab()
+            .invoke('attr', 'xlink:href')
+            .should('include', fileFormat);
+    },
+
+    /**
+     * This function verifies the input field of select pattern alt text
+     * @param {string} inputText value of input field text
+     */
+    verifySelectPatternImageAltTextInputField: (inputText) => {
+        graphingPage.selectPatternImageAltTextInputField()
+            .should('have.value', inputText)
+    },
+
+    verifyImagePropertiesLabel: () => {
+        graphingPage.imagePropertiesLabel()
+            .contains('Image properties');
+    },
+
+    verifyImageFitsToGraphEditTab: () => {
+        graphingPage.graphImageEditTab()
+            .invoke('attr', 'width')
+            .then((imageValue) => {
+                graphingPage.widthInputField()
+                    .invoke('attr', 'value')
+                    .then((widthInputFieldValue) => {
+                        expect(imageValue).to.eq(widthInputFieldValue);
+                    });
+            });
+    },
+
+    verifyImageDoesNotFitToGraphEditTab: () => {
+        graphingPage.graphImageEditTab()
+            .invoke('attr', 'width')
+            .then((imageValue) => {
+                graphingPage.widthInputField()
+                    .invoke('attr', 'value')
+                    .then((widthInputFieldValue) => {
+                        expect(imageValue).to.not.eq(widthInputFieldValue);
+                    });
+            });
+    },
+
+    verifyImageTopLeftAlignedGraphEditTab: () => {
+        graphingPage.graphImageEditTab()
+            .should('have.attr', 'x', '0')
+            .and('have.attr', 'y', '0');
+    },
+
+    verifyImageTopRightAlignedGraphEditTab: () => {
+        graphingPage.graphImageEditTab()
+            .should('not.have.attr', 'x', '0')
+            .and('have.attr', 'y', '0');
+    },
+
+    verifyImageCenterAlignedGraphEditTab: () => {
+        graphingPage.graphImageEditTab()
+            .should('not.have.attr', 'x', '0')
+            .and('not.have.attr', 'y', '0');
+    },
+
+    verifyImageOpacityGraphEditTab: (opacity) => {
+        const opacityValue = opacity / 100;
+        graphingPage.graphImageEditTab()
+            .should('have.attr', 'opacity', `${opacityValue}`);
+    },
+
+    /**
+    * This function plots points on the graph on Edit tab
+    * @param {Object[]} coordinates - An array containing x and y coordinates along with their ranges
+    * @param {number} coordinates[].x - x coordinate to be plotted on the graph
+    * @param {number} coordinates[].xRange - range of x coordinate
+    * @param {number} coordinates[].y - y coordinate to be plotted on the graph
+    * @param {number} coordinates[].yRange - range of y coordinate
+    */
+    plotPointsOnGraphEditTab: (coordinates) => {
+        coordinates.forEach(({ x, xRange, y, yRange }) => {
+            graphingPage.graphEditTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const xPixel = originX + x * (graphWidth / xRange);
+                    const yPixel = originY - y * (graphHeight / yRange);
+                    graphingPage.graphEditTab()
+                        .click(xPixel, yPixel, { force: true });
+                });
+        });
+    },
+
+    /**
+    * This function verifies the plotted points on the graph on Edit tab
+    * @param {Object[]} coordinates - An array containing x and y coordinates along with their ranges
+    * @param {number} coordinates[].x - x coordinate to be plotted on the graph
+    * @param {number} coordinates[].xRange - range of x coordinate
+    * @param {number} coordinates[].y - y coordinate to be plotted on the graph
+    * @param {number} coordinates[].yRange - range of y coordinate
+    */
+    verifyPointsPlottedOnEditTabGraph: (coordinates) => {
+        coordinates.forEach(({ x, xRange, y, yRange }) => {
+            graphingPage.graphEditTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const xPixel = originX + x * (graphWidth / xRange);
+                    const yPixel = originY - y * (graphHeight / yRange);
+                    cy.get(`[class*="GraphingWrapper"] .ngie-jxgbox svg ellipse[display="inline"][cx="${xPixel}"][cy="${yPixel}"]`)
+                        .should('be.visible');
+                });
+        });
+    },
+
+    /**
+    * This function verifies the points do not exist on the graph on Edit tab
+    * @param {Object[]} coordinates - An array containing x and y coordinates along with their ranges
+    * @param {number} coordinates[].x - x coordinate to be plotted on the graph
+    * @param {number} coordinates[].xRange - range of x coordinate
+    * @param {number} coordinates[].y - y coordinate to be plotted on the graph
+    * @param {number} coordinates[].yRange - range of y coordinate
+    */
+    verifyPointsPlottedNotExistOnEditTabGraph: (coordinates) => {
+        coordinates.forEach(({ x, xRange, y, yRange }) => {
+            graphingPage.graphEditTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const xPixel = originX + x * (graphWidth / xRange);
+                    const yPixel = originY - y * (graphHeight / yRange);
+                    cy.get(`[class*="GraphingWrapper"] .ngie-jxgbox svg ellipse[display="inline"][cx="${xPixel}"][cy="${yPixel}"]`)
+                        .should('not.exist');
+                });
+        });
+    },
+
+    /**
+    * @description This function selects the control option from graph
+    * @param {string} controlOption aria label of the control option to be selected
+    */
+    selectGraphControlOptionEditTab: (controlOption) => {
+        graphingPage.graphControlOptionEditTab(controlOption)
+            .click();
+    },
+
+    /**
+     * This function verifies the x min value
+     * @param {number} xMinValue input field value of x min
+     */
+    verifyXMinInputFieldValue: (xMinValue) => {
+        graphingPage.xMinInputField()
+            .should('have.value', xMinValue)
+    },
+
+    /**
+     * This function verifies the x max value
+     * @param {number} xMaxValue input field value of x max
+     */
+    verifyXMaxInputFieldValue: (xMaxValue) => {
+        graphingPage.xMaxInputField()
+            .should('have.value', xMaxValue)
+    },
+
+    /**
+     * This function verifies the y min value
+     * @param {number} yMinValue input field value of y min
+     */
+    verifyYMinInputFieldValue: (yMinValue) => {
+        graphingPage.yMinInputField()
+            .should('have.value', yMinValue)
+    },
+
+    /**
+     * This function verifies the y max value
+     * @param {number} yMaxValue input field value of y max
+     */
+    verifyYMaxInputFieldValue: (yMaxValue) => {
+        graphingPage.yMaxInputField()
+            .should('have.value', yMaxValue)
+    },
+
+    /**
+     * This function enters and verifies the text in X max input field
+     * @param {number} xMaxValue value to be added to x max input field
+     */
+    enterTextInXMaxInputField: (xMaxValue) => {
+        graphingPage.xMaxInputField()
+            .clear()
+            .type(xMaxValue)
+            .should('have.value', xMaxValue)
+    },
+
+    /**
+     * This function enters and verifies the text in X min input field
+     * @param {number} xMinValue value to be added to x min input field
+     */
+    enterTextInXMinInputField: (xMinValue) => {
+        graphingPage.xMinInputField()
+            .clear()
+            .type(xMinValue)
+            .should('have.value', xMinValue)
+    },
+
+    /**
+     * This function enters and verifies the text in Y max input field
+     * @param {number} yMaxValue value to be added to y max input field
+     */
+    enterTextInYMaxInputField: (yMaxValue) => {
+        graphingPage.yMaxInputField()
+            .clear()
+            .type(yMaxValue)
+            .should('have.value', yMaxValue)
+    },
+
+    /**
+     * This function enters and verifies the text in Y min input field
+     * @param {number} yMinValue value to be added to y min input field
+     */
+    enterTextInYMinInputField: (yMinValue) => {
+        graphingPage.yMaxInputField()
+            .clear()
+            .type(yMinValue)
+            .should('have.value', yMinValue)
+    },
+
+    clickOnGraphTitle: () => {
+        graphingPage.graphTitleGraphEditTab()
+            .click();
+    },
+
+    clickOnXAxisLabel: () => {
+        graphingPage.xAxisLabel()
+            .click();
+    },
+
+    clickOnYAxisLabel: () => {
+        graphingPage.yAxisLabel()
+            .click();
+    },
+
+    enterTextInTitlePopupAddLabelInputField: (text) => {
+        graphingPage.titlePopupAddLabelInputField()
+            .clear()
+            .type(text)
+            .should('have.text', text);
+    },
+
+    clickOnTitlePopupCancelButton: () => {
+        graphingPage.titlePopupCancelButton()
+            .click();
+    },
+
+    clickOnTitlePopupSaveButton: () => {
+        graphingPage.titlePopupSaveButton()
+            .click();
+    },
+
+    verifyXAxisMinArrowNotExistGraphEditTab: () => {
+        graphingPage.xAxisGraphEditTab()
+            .should('not.have.attr', 'marker-start');
+    },
+
+    verifyXAxisMinArrowExistGraphEditTab: () => {
+        graphingPage.xAxisGraphEditTab()
+            .should('have.attr', 'marker-start');
+    },
+
+    verifyXAxisMaxArrowExistGraphEditTab: () => {
+        graphingPage.xAxisGraphEditTab()
+            .should('have.attr', 'marker-end');
+    },
+
+    verifyXAxisMaxArrowNotExistGraphEditTab: () => {
+        graphingPage.xAxisGraphEditTab()
+            .should('not.have.attr', 'marker-end');
+    },
+
+    verifyYAxisMinArrowNotExistGraphEditTab: () => {
+        graphingPage.yAxisGraphEditTab()
+            .should('not.have.attr', 'marker-start');
+    },
+
+    verifyYAxisMinArrowExistGraphEditTab: () => {
+        graphingPage.yAxisGraphEditTab()
+            .should('have.attr', 'marker-start');
+    },
+
+    verifyYAxisMaxArrowExistGraphEditTab: () => {
+        graphingPage.yAxisGraphEditTab()
+            .should('have.attr', 'marker-end');
+    },
+
+    verifyYAxisMaxArrowNotExistGraphEditTab: () => {
+        graphingPage.yAxisGraphEditTab()
+            .should('not.have.attr', 'marker-end');
+    },
+
+    /**
+     * @description This function selects the tool option from graph
+     * @param {string} toolOption aria label of the tool option to be selected
+     */
+    selectGraphToolOptionEditTab: (toolOption) => {
+        graphingPage.graphToolOptionEditTab(toolOption)
+            .click();
+    },
+
+    /**
+    * @description This function verifies the tool option is in selected state
+    * @param {string} toolOption aria label of the tool option to be verified selected
+    */
+    verifyToolOptionSelectedEditTab: (toolOptionAriaLabel) => {
+        graphingPage.graphToolOptionEditTab(toolOptionAriaLabel)
+            .should('have.class', 'single-select-toggle-button-selected');
+    },
+
+    /**
+   * @description This function verifies the tool option is not in selected state
+   * @param {string} toolOption aria label of the tool option to be verified not selected
+   */
+    verifyToolOptionNotSelectedEditTab: (toolOptionAriaLabelArray) => {
+        toolOptionAriaLabelArray.forEach((toolOptionAriaLabel) => {
+            graphingPage.graphToolOptionEditTab(toolOptionAriaLabel)
+                .should('not.have.class', 'single-select-toggle-button-selected');
+        });
+    },
+
+    //Grid options
+    verifyGridOptionsAccordionExpanded: () => {
+        graphingPage.gridOptionsAccordion()
+            .should('have.attr', 'aria-expanded', 'true')
+    },
+
+    collapseGridOptionsAccordion: () => {
+        graphingPage.gridOptionsAccordion()
+            .click()
+            .should('have.attr', 'aria-expanded', 'false')
+    },
+
+    expandGridOptionsAccordion: () => {
+        graphingPage.gridOptionsAccordion()
+            .click();
+        steps.verifyGridOptionsAccordionExpanded();
+    },
+
+    checkSnapToGridCheckbox: () => {
+        graphingPage.snapToGridCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    verifySnapToCheckboxIsUnchecked: () => {
+        graphingPage.snapToGridCheckbox()
+            .should('not.be.checked');
+    },
+
+    /**
+     * This function selects toggle option
+     * @param {string} ariaLabel of the toggle option
+     */
+    selectOriginOption: (ariaLabel) => {
+        graphingPage.originToggleOptions(ariaLabel)
+            .click();
+    },
+
+    /**
+     * This function verifies the value of x tolerance input field
+     * @param {number} xTol value of x tolerance input field
+     */
+    verifyXToleranceInputFieldValue: (xTol) => {
+        graphingPage.xToleranceInputField()
+            .should('have.value', xTol)
+    },
+
+    /**
+     * This function enters and verifies the value of x tolerance input field
+     * @param {number} xTol value of x tolerance input field
+     */
+    enterInputToXToleranceInputFieldValue: (xTol) => {
+        graphingPage.xToleranceInputField()
+            .clear()
+            .type(xTol)
+            .should('have.value', xTol)
+    },
+
+    /**
+    * This function verifies the value of y tolerance input field
+    * @param {number} yTol value of y tolerance input field
+    */
+    verifyYToleranceInputFieldValue: (yTol) => {
+        graphingPage.xToleranceInputField()
+            .should('have.value', yTol)
+    },
+
+    /**
+     * This function enters and verifies the value of y tolerance input field
+     * @param {number} yTol value of y tolerance input field
+     */
+    enterInputToYToleranceInputFieldValue: (yTol) => {
+        graphingPage.yToleranceInputField()
+            .clear()
+            .type(yTol)
+            .should('have.value', yTol)
+    },
+
+    /**
+     * This verifies the value in x grid spacing
+     * @param {number} xGridSpacing x grid spacing
+     */
+    verifyXGridSpacingInputFieldValue: (xGridSpacing) => {
+        graphingPage.xGridSpacingInputField()
+            .should('have.value', xGridSpacing)
+    },
+
+    /**
+    * This enters and verifies the value in x grid spacing
+    * @param {number} xGridSpacing x grid spacing
+    */
+    enterTextInXGridSpacingInputFieldValue: (xGridSpacing) => {
+        graphingPage.xGridSpacingInputField()
+            .clear()
+            .type(xGridSpacing)
+            .blur()
+            .should('have.value', xGridSpacing)
+    },
+
+    /**
+    * This verifies the value in x tick interval
+    * @param {number} xTickInterval x tick interval
+    */
+    verifyXTickIntervalInputFieldValue: (xTickInterval) => {
+        graphingPage.xTickIntervalInputField()
+            .should('have.value', xTickInterval)
+    },
+
+    /**
+    * This enters and verifies the value in x tick interval
+    * @param {number} xTickInterval x tick interval
+    */
+    enterTextInXTickIntervalInputFieldValue: (xTickInterval) => {
+        graphingPage.xTickIntervalInputField()
+            .clear()
+            .type(xTickInterval)
+            .should('have.value', xTickInterval)
+    },
+
+    verifyXDisplayAxisCheckboxChecked: () => {
+        graphingPage.xDisplayAxisCheckbox()
+            .should('be.checked')
+    },
+
+    uncheckXDisplayAxisCheckbox: () => {
+        graphingPage.xDisplayAxisCheckbox()
+            .click()
+            .should('not.be.checked')
+    },
+
+    verifyXRemoveTicksCheckboxChecked: () => {
+        graphingPage.xRemoveTicksCheckbox()
+            .should('be.checked')
+    },
+
+    uncheckXRemoveTicksCheckbox: () => {
+        graphingPage.xRemoveTicksCheckbox()
+            .click()
+            .should('not.be.checked')
+    },
+
+    checkXRemoveTicksCheckbox: () => {
+        graphingPage.xRemoveTicksCheckbox()
+            .click()
+            .should('be.checked')
+    },
+
+    verifyXShowTicksLabelCheckboxChecked: () => {
+        graphingPage.xShowTicksLabelsCheckbox()
+            .should('be.checked')
+    },
+
+    uncheckXShowTicksLabelCheckbox: () => {
+        graphingPage.xShowTicksLabelsCheckbox()
+            .click()
+            .should('not.be.checked')
+    },
+
+    checkXShowTicksLabelCheckbox: () => {
+        graphingPage.xShowTicksLabelsCheckbox()
+            .click()
+            .should('be.checked')
+    },
+
+    verifyXMinArrowCheckboxChecked: () => {
+        graphingPage.xMinArrowCheckbox()
+            .should('be.checked')
+    },
+
+    uncheckXMinArrowCheckbox: () => {
+        graphingPage.xMinArrowCheckbox()
+            .click()
+            .should('not.be.checked')
+    },
+
+    verifyXMaxArrowCheckboxChecked: () => {
+        graphingPage.xMaxArrowCheckbox()
+            .should('be.checked')
+    },
+
+    uncheckXMaxArrowCheckbox: () => {
+        graphingPage.xMaxArrowCheckbox()
+            .click()
+            .should('not.be.checked')
+    },
+
+    verifyXDisplayCommaForThousandSeparatorCheckboxChecked: () => {
+        graphingPage.xDisplayCommaForThousandSeparatorCheckbox()
+            .should('be.checked')
+    },
+
+    uncheckXDisplayCommaForThousandSeparatorCheckbox: () => {
+        graphingPage.xDisplayCommaForThousandSeparatorCheckbox()
+            .click()
+            .should('not.be.checked')
+    },
+
+    /**
+     * This verifies the value in y grid spacing
+     * @param {number} yGridSpacing y grid spacing
+     */
+    verifyYGridSpacingInputFieldValue: (yGridSpacing) => {
+        graphingPage.yGridSpacingInputField()
+            .should('have.value', yGridSpacing)
+    },
+
+    /**
+    * This enters and verifies the value in y grid spacing
+    * @param {number} yGridSpacing y grid spacing
+    */
+    enterTextInYGridSpacingInputFieldValue: (yGridSpacing) => {
+        graphingPage.yGridSpacingInputField()
+            .clear()
+            .type(yGridSpacing)
+            .blur()
+            .should('have.value', yGridSpacing)
+    },
+
+    /**
+    * This verifies the value in y tick interval
+    * @param {number} yTickInterval y tick interval
+    */
+    verifyYTickIntervalInputFieldValue: (yTickInterval) => {
+        graphingPage.yTickIntervalInputField()
+            .should('have.value', yTickInterval)
+    },
+
+    /**
+    * This enters and verifies the value in y tick interval
+    * @param {number} yTickInterval y tick interval
+    */
+    enterTextInYTickIntervalInputFieldValue: (yTickInterval) => {
+        graphingPage.yTickIntervalInputField()
+            .clear()
+            .type(yTickInterval)
+            .should('have.value', yTickInterval)
+    },
+
+    verifyYDisplayAxisCheckboxChecked: () => {
+        graphingPage.yDisplayAxisCheckbox()
+            .should('be.checked')
+    },
+
+    uncheckYDisplayAxisCheckbox: () => {
+        graphingPage.yDisplayAxisCheckbox()
+            .click()
+            .should('not.be.checked')
+    },
+
+    verifyYRemoveTicksCheckboxChecked: () => {
+        graphingPage.yRemoveTicksCheckbox()
+            .should('be.checked')
+    },
+
+    uncheckYRemoveTicksCheckbox: () => {
+        graphingPage.yRemoveTicksCheckbox()
+            .click()
+            .should('not.be.checked')
+    },
+
+    verifyYShowTicksLabelCheckboxChecked: () => {
+        graphingPage.yShowTicksLabelsCheckbox()
+            .should('be.checked')
+    },
+
+    uncheckYShowTicksLabelCheckbox: () => {
+        graphingPage.yShowTicksLabelsCheckbox()
+            .click()
+            .should('not.be.checked')
+    },
+
+    checkYShowTicksLabelCheckbox: () => {
+        graphingPage.yShowTicksLabelsCheckbox()
+            .click()
+            .should('be.checked')
+    },
+
+    verifyYMinArrowCheckboxChecked: () => {
+        graphingPage.yMinArrowCheckbox()
+            .should('be.checked')
+    },
+
+    uncheckYMinArrowCheckbox: () => {
+        graphingPage.yMinArrowCheckbox()
+            .click()
+            .should('not.be.checked')
+    },
+
+    verifyYMaxArrowCheckboxChecked: () => {
+        graphingPage.yMaxArrowCheckbox()
+            .should('be.checked')
+    },
 
-    //Edit tab
-    /**
-     * This function selects tool options
-     * @param {string[]} toolOptionAriaLabelArray array aria-label of tool options
-     */
-    selectToolOptions: (toolOptionAriaLabelArray) => {
-        toolOptionAriaLabelArray.forEach((toolOptionAriaLabel) => {
-            graphingPage.toolOptions(toolOptionAriaLabel)
-                .click();
-        });
+    uncheckYMaxArrowCheckbox: () => {
+        graphingPage.yMaxArrowCheckbox()
+            .click()
+            .should('not.be.checked')
     },
 
-    checkSnapToGridCheckbox: () => {
-        graphingPage.snapToGridCheckbox()
-            .click();
+    verifyYDisplayCommaForThousandSeparatorCheckboxChecked: () => {
+        graphingPage.yDisplayCommaForThousandSeparatorCheckbox()
+            .should('be.checked')
     },
 
-    checkPatternBackground: () => {
-        graphingPage.patternRadioButton()
+    uncheckYDisplayCommaForThousandSeparatorCheckbox: () => {
+        graphingPage.yDisplayCommaForThousandSeparatorCheckbox()
+            .click()
+            .should('not.be.checked')
+    },
+
+    //Layout
+    verifyLayoutAccordionExpanded: () => {
+        graphingPage.layoutAccordion()
+            .should('have.attr', 'aria-expanded', 'true')
+    },
+
+    collapseLayoutAccordion: () => {
+        graphingPage.layoutAccordion()
+            .click()
+            .should('have.attr', 'aria-expanded', 'false')
+    },
+
+    expandLayoutAccordion: () => {
+        graphingPage.layoutAccordion()
             .click();
+        steps.verifyLayoutAccordionExpanded();
     },
 
     /**
-    * This function plots points on the graph on Edit tab
-    * @param {Object[]} coordinates - An array containing x and y coordinates along with their ranges
-    * @param {number} coordinates[].x - x coordinate to be plotted on the graph
-    * @param {number} coordinates[].xRange - range of x coordinate
-    * @param {number} coordinates[].y - y coordinate to be plotted on the graph
-    * @param {number} coordinates[].yRange - range of y coordinate
-    */
-    plotPointsOnGraphEditTab: (coordinates) => {
-        coordinates.forEach(({ x, xRange, y, yRange }) => {
-            graphingPage.graphEditTab()
-                .then(($graphElement) => {
-                    const graphWidth = $graphElement[0].clientWidth;
-                    const graphHeight = $graphElement[0].clientHeight;
-                    const originX = graphWidth / 2;
-                    const originY = graphHeight / 2;
-                    const xPixel = originX + x * (graphWidth / xRange);
-                    const yPixel = originY - y * (graphHeight / yRange);
-                    graphingPage.graphEditTab()
-                        .click(xPixel, yPixel, { force: true });
-                });
-        });
+     * This function verifies height and width of graph
+     * @param {number} width width of graph
+     * @param {number} height height of graph
+     */
+    verifyHeightWidthOfGraphEditTab: (width, height) => {
+        graphingPage.graphEditTab()
+            .should('have.attr', 'height', height)
+            .and('have.attr', 'width', width)
     },
 
     /**
-    * This function verifies the plotted points on the graph on Edit tab
-    * @param {Object[]} coordinates - An array containing x and y coordinates along with their ranges
-    * @param {number} coordinates[].x - x coordinate to be plotted on the graph
-    * @param {number} coordinates[].xRange - range of x coordinate
-    * @param {number} coordinates[].y - y coordinate to be plotted on the graph
-    * @param {number} coordinates[].yRange - range of y coordinate
+     * This function verifies the input field value
+     * @param {('Height'|'Width'|'Margin')} inputField 
+     * @param {number} value value of input field
+     */
+    verifyLayoutInputFieldValue: (inputField, value) => {
+        switch (inputField) {
+            case 'Height':
+                graphingPage.heightInputField()
+                    .should('have.value', value);
+                break;
+            case 'Width':
+                graphingPage.widthInputField()
+                    .should('have.value', value);
+                break;
+            case 'Margin':
+                graphingPage.marginInputField()
+                    .should('have.value', value);
+                break;
+            default:
+                throw new Error('Invalid field');
+        }
+    },
+
+    /**
+    * This function enters text in the input field
+    * @param {number} value value of input field
     */
-    verifyPointsPlottedOnEditTabGraph: (coordinates) => {
-        coordinates.forEach(({ x, xRange, y, yRange }) => {
-            graphingPage.graphEditTab()
-                .then(($graphElement) => {
-                    const graphWidth = $graphElement[0].clientWidth;
-                    const graphHeight = $graphElement[0].clientHeight;
-                    const originX = graphWidth / 2;
-                    const originY = graphHeight / 2;
-                    const xPixel = originX + x * (graphWidth / xRange);
-                    const yPixel = originY - y * (graphHeight / yRange);
-                    cy.get(`[class*="GraphingWrapper"] .ngie-jxgbox svg ellipse[display="inline"][cx="${xPixel}"][cy="${yPixel}"]`)
-                        .should('be.visible');
-                });
-        });
+    enterValueInHeightInputField: (value) => {
+        graphingPage.heightInputField()
+            .clear()
+            .type(value)
+            .should('have.value', value)
     },
 
     /**
-     * @description This function selects the tool option from graph
-     * @param {string} toolOption aria label of the tool option to be selected
-     */
-    selectGraphToolOptionEditTab: (toolOption) => {
-        graphingPage.graphToolOptionEditTab(toolOption)
+    * This function enters text in the input field
+    * @param {number} value value of input field
+    */
+    enterValueInWidthInputField: (value) => {
+        graphingPage.widthInputField()
+            .clear()
+            .type(value)
+            .should('have.value', value)
+    },
+
+    verifyMakeResponsiveIsChecked: () => {
+        graphingPage.makeResponsiveSwitch()
+            .should('have.class', 'Mui-checked');
+    },
+
+    clickMakeResponsive: () => {
+        graphingPage.makeResponsiveSwitch()
             .click();
     },
 
+    verifyMakeResponsiveIsUnchecked: () => {
+        graphingPage.makeResponsiveSwitch()
+            .should('not.have.class', 'Mui-checked');
+    },
 
     //Specify correct answer section
     /**
@@ -242,6 +1199,79 @@ const steps = {
         });
     },
 
+    /**
+    * This function verifies plotted points on the graph in set correct answer section
+    * @param {Object[]} coordinates - An array containing x and x coordinates along with their range
+    * @param {number} coordinates[].x - x coordinate to be plotted on the graph
+    * @param {number} coordinates[].xRange - range of x coordinate
+    * @param {number} coordinates[].y - y coordinate to be plotted on the graph
+    * @param {number} coordinates[].yRange - range of y coordinate
+    */
+    verifyPointsPlottedNotExistOnSpecifyCorrectAnswerSection: (coordinates) => {
+        coordinates.forEach(({ x, xRange, y, yRange }) => {
+            graphingPage.graphSpecifyCorrectAnswerSection()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const xPixel = originX + x * (graphWidth / xRange);
+                    const yPixel = originY - y * (graphHeight / yRange);
+                    cy.get(`.MuiAccordion-region .ngie-jxgbox svg ellipse[display="inline"][cx="${xPixel}"][cy="${yPixel}"]`)
+                        .should('not.exist');
+                });
+        });
+    },
+
+    /**
+   * @description This function selects the control option from graph
+   * @param {string} controlOption aria label of the control option to be selected
+   */
+    selectGraphControlOptionSpecifyCorrectAnswerSection: (controlOption) => {
+        graphingPage.graphControlOptionSpecifyCorrectAnswer(controlOption)
+            .click();
+    },
+
+    verifyXAxisMinArrowNotExistGraphSpecifyCorrectAnswerSection: () => {
+        graphingPage.xAxisGraphSpecifyCorrectAnswerSection()
+            .should('not.have.attr', 'marker-start');
+    },
+
+    verifyXAxisMinArrowExistGraphSpecifyCorrectAnswerSection: () => {
+        graphingPage.xAxisGraphSpecifyCorrectAnswerSection()
+            .should('have.attr', 'marker-start');
+    },
+
+    verifyXAxisMaxArrowExistGraphSpecifyCorrectAnswerSection: () => {
+        graphingPage.xAxisGraphSpecifyCorrectAnswerSection()
+            .should('have.attr', 'marker-end');
+    },
+
+    verifyXAxisMaxArrowNotExistGraphSpecifyCorrectAnswerSection: () => {
+        graphingPage.xAxisGraphSpecifyCorrectAnswerSection()
+            .should('not.have.attr', 'marker-end');
+    },
+
+    verifyYAxisMinArrowNotExistGraphSpecifyCorrectAnswerSection: () => {
+        graphingPage.yAxisGraphSpecifyCorrectAnswerSection()
+            .should('not.have.attr', 'marker-start');
+    },
+
+    verifyYAxisMinArrowExistGraphSpecifyCorrectAnswerSection: () => {
+        graphingPage.yAxisGraphSpecifyCorrectAnswerSection()
+            .should('have.attr', 'marker-start');
+    },
+
+    verifyYAxisMaxArrowExistGraphSpecifyCorrectAnswerSection: () => {
+        graphingPage.yAxisGraphSpecifyCorrectAnswerSection()
+            .should('have.attr', 'marker-end');
+    },
+
+    verifyYAxisMaxArrowNotExistGraphSpecifyCorrectAnswerSection: () => {
+        graphingPage.yAxisGraphSpecifyCorrectAnswerSection()
+            .should('not.have.attr', 'marker-end');
+    },
+
     /**
     * @description This function selects the tool option from graph
     * @param {string} toolOption aria label of the tool option to be selected
@@ -251,6 +1281,101 @@ const steps = {
             .click();
     },
 
+    /**
+    * @description This function verifies the tool option is in selected state
+    * @param {string} toolOption aria label of the tool option to be verified selected
+    */
+    verifyToolOptionSelectedSpecifyCorrectAnswerSection: (toolOptionAriaLabel) => {
+        graphingPage.graphToolOptionSpecifyCorrectAnswer(toolOptionAriaLabel)
+            .should('have.class', 'single-select-toggle-button-selected');
+    },
+
+    /**
+   * @description This function verifies the tool option is not in selected state
+   * @param {string} toolOption aria label of the tool option to be verified not selected
+   */
+    verifyToolOptionNotSelectedSpecifyCorrectAnswerSection: (toolOptionAriaLabelArray) => {
+        toolOptionAriaLabelArray.forEach((toolOptionAriaLabel) => {
+            graphingPage.graphToolOptionSpecifyCorrectAnswer(toolOptionAriaLabel)
+                .should('not.have.class', 'single-select-toggle-button-selected');
+        });
+    },
+
+    /**
+   * @param {string} fileFormat format of the uploaded file in the highlight region
+   * @description this function verifies the attribute of the image has the expected file format
+   */
+    verifyUploadedImageInGraphSpecifyCorrectAnswerSection: (fileFormat) => {
+        graphingPage.graphSpecifyCorrectAnswerSection()
+            .find('image')
+            .invoke('attr', 'xlink:href')
+            .should('include', fileFormat);
+    },
+
+    verifyImageFitsToGraphSpecifyCorrectAnswerSection: () => {
+        graphingPage.graphSpecifyCorrectAnswerSection()
+            .find('image')
+            .invoke('attr', 'width')
+            .then((imageValue) => {
+                graphingPage.widthInputField()
+                    .invoke('attr', 'value')
+                    .then((widthInputFieldValue) => {
+                        expect(imageValue).to.eq(widthInputFieldValue);
+                    });
+            });
+    },
+
+    verifyImageDoesNotFitToGraphSpecifyCorrectAnswerSection: () => {
+        graphingPage.graphSpecifyCorrectAnswerSection()
+            .find('image')
+            .invoke('attr', 'width')
+            .then((imageValue) => {
+                graphingPage.widthInputField()
+                    .invoke('attr', 'value')
+                    .then((widthInputFieldValue) => {
+                        expect(imageValue).to.not.eq(widthInputFieldValue);
+                    });
+            });
+    },
+
+    verifyImageTopLeftAlignedGraphSpecifyCorrectAnswerSection: () => {
+        graphingPage.graphSpecifyCorrectAnswerSection()
+            .find('image')
+            .should('have.attr', 'x', '0')
+            .and('have.attr', 'y', '0');
+    },
+
+    verifyImageTopRightAlignedGraphSpecifyCorrectAnswerSection: () => {
+        graphingPage.graphSpecifyCorrectAnswerSection()
+            .find('image')
+            .should('not.have.attr', 'x', '0')
+            .and('have.attr', 'y', '0');
+    },
+
+    verifyImageCenterAlignedGraphSpecifyCorrectAnswerSection: () => {
+        graphingPage.graphSpecifyCorrectAnswerSection()
+            .find('image')
+            .should('not.have.attr', 'x', '0')
+            .and('not.have.attr', 'y', '0');
+    },
+
+    verifyImageOpacityGraphSpecifyCorrectAnswerSection: (opacity) => {
+        const opacityValue = opacity / 100;
+        graphingPage.graphSpecifyCorrectAnswerSection()
+            .find('image')
+            .should('have.attr', 'opacity', `${opacityValue}`);
+    },
+
+    /**
+    * This function verifies height and width of graph
+    * @param {number} width width of graph
+    * @param {number} height height of graph
+    */
+    verifyHeightWidthOfGraphSpecifyCorrectAnswerSection: (width, height) => {
+        graphingPage.graphSpecifyCorrectAnswerSection()
+            .should('have.attr', 'height', height)
+            .and('have.attr', 'width', width)
+    },
 
     //Preview tab 
     /**
@@ -301,6 +1426,30 @@ const steps = {
         });
     },
 
+    /**
+  * This function verifies plotted points on the graph in preview tab
+  * @param {Object[]} coordinates - An array containing x and x coordinates along with their range
+  * @param {number} coordinates[].x - x coordinate to be plotted on the graph
+  * @param {number} coordinates[].xRange - range of x coordinate
+  * @param {number} coordinates[].y - y coordinate to be plotted on the graph
+  * @param {number} coordinates[].yRange - range of y coordinate
+  */
+    verifyPointsPlottedNotExistOnPreviewTab: (coordinates) => {
+        coordinates.forEach(({ x, xRange, y, yRange }) => {
+            graphingPage.graphPreviewTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = $graphElement[0].clientHeight;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const xPixel = originX + x * (graphWidth / xRange);
+                    const yPixel = originY - y * (graphHeight / yRange);
+                    cy.get(`[class*="GraphingQuestion"] .ngie-jxgbox svg ellipse[display="inline"][cx="${xPixel}"][cy="${yPixel}"]`)
+                        .should('not.exist');
+                });
+        });
+    },
+
     /**
      * This function verifies the plotted points are incorrect
      * @param {Object[]} coordinates - An array containing x and x coordinates along with their range
@@ -349,6 +1498,122 @@ const steps = {
         });
     },
 
+    verifyXAxisMinArrowNotExistGraphPreviewTab: () => {
+        graphingPage.xAxisGraphPreviewTab()
+            .should('not.have.attr', 'marker-start');
+    },
+
+    verifyXAxisMinArrowExistGraphPreviewTab: () => {
+        graphingPage.xAxisGraphPreviewTab()
+            .should('have.attr', 'marker-start');
+    },
+
+    verifyXAxisMaxArrowExistGraphPreviewTab: () => {
+        graphingPage.xAxisGraphPreviewTab()
+            .should('have.attr', 'marker-end');
+    },
+
+    verifyXAxisMaxArrowNotExistGraphPreviewTab: () => {
+        graphingPage.xAxisGraphPreviewTab()
+            .should('not.have.attr', 'marker-end');
+    },
+
+    verifyYAxisMinArrowNotExistGraphPreviewTab: () => {
+        graphingPage.yAxisGraphPreviewTab()
+            .should('not.have.attr', 'marker-start');
+    },
+
+    verifyYAxisMinArrowExistGraphPreviewTab: () => {
+        graphingPage.yAxisGraphPreviewTab()
+            .should('have.attr', 'marker-start');
+    },
+
+    verifyYAxisMaxArrowExistGraphPreviewTab: () => {
+        graphingPage.yAxisGraphPreviewTab()
+            .should('have.attr', 'marker-end');
+    },
+
+    verifyYAxisMaxArrowNotExistGraphPreviewTab: () => {
+        graphingPage.yAxisGraphPreviewTab()
+            .should('not.have.attr', 'marker-end');
+    },
+
+    /**
+     * @param {string} fileFormat format of the uploaded file in the graph
+     * @description this function verifies the attribute of the image has the expected file format
+     */
+    verifyUploadedImageInGraphPreviewTab: (fileFormat) => {
+        graphingPage.graphPreviewTab()
+            .find('image')
+            .invoke('attr', 'xlink:href')
+            .should('include', fileFormat);
+    },
+
+    /**
+   * This function verifies height and width of graph
+   * @param {number} width width of graph
+   * @param {number} height height of graph
+   */
+    verifyHeightWidthOfGraphPreviewTab: (width, height) => {
+        graphingPage.graphPreviewTab()
+            .should('have.attr', 'height', height)
+            .and('have.attr', 'width', width)
+    },
+
+    verifyImageFitsToGraphPreviewTab: () => {
+        graphingPage.graphPreviewTab()
+            .find('image')
+            .invoke('attr', 'width')
+            .then((imageValue) => {
+                graphingPage.widthInputField()
+                    .invoke('attr', 'value')
+                    .then((widthInputFieldValue) => {
+                        expect(imageValue).to.eq(widthInputFieldValue);
+                    });
+            });
+    },
+
+    verifyImageDoesNotFitToGraphPreviewTab: () => {
+        graphingPage.graphPreviewTab()
+            .find('image')
+            .invoke('attr', 'width')
+            .then((imageValue) => {
+                graphingPage.widthInputField()
+                    .invoke('attr', 'value')
+                    .then((widthInputFieldValue) => {
+                        expect(imageValue).to.not.eq(widthInputFieldValue);
+                    });
+            });
+    },
+
+    verifyImageTopLeftAlignedGraphPreviewTab: () => {
+        graphingPage.graphPreviewTab()
+            .find('image')
+            .should('have.attr', 'x', '0')
+            .and('have.attr', 'y', '0');
+    },
+
+    verifyImageTopRightAlignedGraphPreviewTab: () => {
+        graphingPage.graphPreviewTab()
+            .find('image')
+            .should('not.have.attr', 'x', '0')
+            .and('have.attr', 'y', '0');
+    },
+
+    verifyImageCenterAlignedGraphPreviewTab: () => {
+        graphingPage.graphPreviewTab()
+            .find('image')
+            .should('not.have.attr', 'x', '0')
+            .and('not.have.attr', 'y', '0');
+    },
+
+    verifyImageOpacityGraphPreviewTab: (opacity) => {
+        const opacityValue = opacity / 100;
+        graphingPage.graphPreviewTab()
+            .find('image')
+            .should('have.attr', 'opacity', `${opacityValue}`);
+    },
+
     /**
     * @description This function selects the tool option from graph
     * @param {string} toolOption aria label of the tool option to be selected
@@ -402,6 +1667,11 @@ const steps = {
             .click();
     },
 
+    cancelReset: () => {
+        graphingPage.resetPopupCancelButton()
+            .click();
+    },
+
     /**
      * This function plots points on the graph in correct answer section
      * @param {Object[]} coordinates - An array containing x and x coordinates along with their range
@@ -475,6 +1745,117 @@ const steps = {
 
 const tests = {
     ...autoScoredScoringPreviewTab.tests,
+    ...backgroundImageUploadComponent.tests,
+    ...opacityComponent.tests,
+    ...scoringSectionBaseEditTab.tests,
+    ...autoScoredScoringSectionMultiResponseType.tests,
+    ...autoScoredStudentViewSettings.tests,
+    ...createQuestionBasePage.tests,
+    ...commonComponents.tests,
+    ...additionalSettingsPanel.tests,
+    ...autoScoredSpecifyCorrectAnswerSection.tests,
+
+    verifyContentsOfSpecifyCorrectAnswerSection: () => {
+        it('When user selects a scoring type then in the \'Correct\' accordion, all the contents should be displayed', () => {
+            utilities.verifyElementVisibilityState(graphingPage.graphSpecifyCorrectAnswerSection(), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.graphToolOptionSpecifyCorrectAnswer(), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.graphControlOptionSpecifyCorrectAnswer(), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.repeatedPointsSwitch(), 'exist');
+        });
+    },
+
+    /**
+    * 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(`The user should be able to plot the graph in the specify correct answer section ${accordionName} accordion`, () => {
+            graphingPage.steps.selectGraphToolOptionSpecifyCorrectAnswer('Circle');
+            graphingPage.steps.plotPointsOnGraphSpecifyCorrectAnswerSection([{ x: 0, xRange: 20, y: 1, yRange: 20 }, { x: 0, xRange: 20, y: 2, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnSpecifyCorrectAnswerSection([{ x: 0, xRange: 20, y: 1, yRange: 20 }, { x: 0, xRange: 20, y: 2, yRange: 20 }]);
+        });
+
+        it(`When the user resets the graph in the ${accordionName} accordion, \'Error: Please set a correct answer.\' error message should be thrown along with an error icon on the \'${accordionName}\' accordion`, () => {
+            graphingPage.graphControlOptionSpecifyCorrectAnswer('Reset')
+                .click();
+            graphingPage.resetPopupConfirmResetButton()
+                .click();
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible')
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Please set a correct answer.');
+            if (accordionName == 'Correct') {
+                autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
+                    });
+            } else {
+                autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
+                    });
+            };
+        });
+
+        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredCorrectAnswerErrorMessageCSSAndA11y();
+
+        it('When the user plots on the graph then the error message should disappear', () => {
+            graphingPage.steps.selectGraphToolOptionSpecifyCorrectAnswer('Circle');
+            graphingPage.steps.plotPointsOnGraphSpecifyCorrectAnswerSection([{ x: 0, xRange: 20, y: 1, yRange: 20 }, { x: 0, xRange: 20, y: 2, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnSpecifyCorrectAnswerSection([{ x: 0, xRange: 20, y: 1, yRange: 20 }, { x: 0, xRange: 20, y: 2, yRange: 20 }]);
+        });
+
+        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty(accordionName);
+
+        it('Accessibility of \'Correct\' accordion contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(graphingPage.graphSpecifyCorrectAnswerSection());
+        });
+    },
+
+    verifyResetPopupContentWithCSSAndA11y: () => {
+        it('When the user clicks on the \'Reset\' button then a dialog box should appear with title \'Reset\'', () => {
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'exist');
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'Reset');
+        });
+
+        it('The dialog box should have content \'Are you sure you want to reset the graph? This will clear all objects and revert all settings to their default values.\' with \'Cancel\' and \'Confirm reset\' buttons should be displayed', () => {
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxContent(), 'Are you sure you want to reset the graph? This will clear all objects and revert all settings to their default values.');
+            utilities.verifyInnerText(graphingPage.resetPopupConfirmResetButton(), 'Confirm reset');
+            utilities.verifyInnerText(graphingPage.resetPopupCancelButton(), 'Cancel');
+        });
+
+        it('CSS of Reset dialog box', { tags: 'css' }, () => {
+            utilities.verifyCSS(dialogBoxBase.dialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(dialogBoxBase.dialogBoxContent(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(graphingPage.resetPopupCancelButton().find('p'), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(graphingPage.resetPopupCancelButton(), {
+                'background-color': css.color.transparent
+            });
+            utilities.verifyCSS(graphingPage.resetPopupConfirmResetButton().find('p'), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(graphingPage.resetPopupConfirmResetButton(), {
+                'background-color': css.color.editTableDeleteButton
+            });
+        });
+
+        it('Accessibility of Reset dialog box', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dialogBoxBase.dialogBox());
+        });
+    }
 }
 
 export const graphingPage = {