itemengine-cypress-automation 1.0.132 → 1.0.133

package/cypress/e2e/ILC/Graphing/Scoring/manuallyAndNonScoredScoring.js

@@ -0,0 +1,253 @@
+import { graphingPage } from "../../../../pages";
+import abortEarlySetup from "../../../../support/helpers/abortEarly";
+import utilities from "../../../../support/helpers/utilities";
+
+describe('Create Item page - Graphing: Manually and non scored', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question Preview: Manually Scored', () => {
+        abortEarlySetup();
+        before(() => {
+            graphingPage.steps.navigateToCreateQuestion('Graphing');
+            cy.barsPreLoaderWait();
+            graphingPage.steps.addTextInQuestionInstructionsInputField('Plot the graph');
+            graphingPage.steps.selectToolOptions(['Circle', 'Polygon']);
+            graphingPage.steps.checkPatternBackground();
+            graphingPage.steps.checkSnapToGridCheckbox();
+            graphingPage.steps.selectGraphToolOptionEditTab('Line');
+            graphingPage.steps.plotPointsOnGraphEditTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnEditTabGraph([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
+            graphingPage.steps.selectGraphToolOptionEditTab('Circle');
+            graphingPage.steps.plotPointsOnGraphEditTab([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnEditTabGraph([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.selectGraphToolOptionSpecifyCorrectAnswer('Polygon');
+            graphingPage.steps.plotPointsOnGraphSpecifyCorrectAnswerSection([{ x: -6, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 9, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnSpecifyCorrectAnswerSection([{ x: -6, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 9, yRange: 20 }]);
+            graphingPage.steps.selectGraphToolOptionSpecifyCorrectAnswer('Vector');
+            graphingPage.steps.plotPointsOnGraphSpecifyCorrectAnswerSection([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnSpecifyCorrectAnswerSection([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.expandScoringTypeDropdown();
+            graphingPage.steps.selectOptionFromScoringTypeDropdown('Manually scored');
+            graphingPage.steps.switchToPreviewTab();
+        });
+
+        it('Question instructions and graph along with the graph and the plotted graph in the edit tab should be displayed in the preview tab', () => {
+            graphingPage.steps.verifyQuestionInstructionsTextPreviewTab('Plot the graph');
+            utilities.verifyElementCount(graphingPage.graphLinePreviewTab(), 1);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
+            utilities.verifyElementCount(graphingPage.graphCirclePreviewTab(), 1);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
+        });
+
+        graphingPage.tests.verifyGradingStudentViewRadioButtonAndScoringTypeInPreviewTab('Manually scored');
+    });
+
+    describe('Question Preview: Non Scored', () => {
+        abortEarlySetup();
+        before(() => {
+            graphingPage.steps.navigateToCreateQuestion('Graphing');
+            cy.barsPreLoaderWait();
+            graphingPage.steps.addTextInQuestionInstructionsInputField('Plot the graph');
+            graphingPage.steps.selectToolOptions(['Circle', 'Polygon']);
+            graphingPage.steps.checkPatternBackground();
+            graphingPage.steps.checkSnapToGridCheckbox();
+            graphingPage.steps.selectGraphToolOptionEditTab('Line');
+            graphingPage.steps.plotPointsOnGraphEditTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnEditTabGraph([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
+            graphingPage.steps.selectGraphToolOptionEditTab('Circle');
+            graphingPage.steps.plotPointsOnGraphEditTab([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnEditTabGraph([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.selectGraphToolOptionSpecifyCorrectAnswer('Polygon');
+            graphingPage.steps.plotPointsOnGraphSpecifyCorrectAnswerSection([{ x: -6, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 9, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnSpecifyCorrectAnswerSection([{ x: -6, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 9, yRange: 20 }]);
+            graphingPage.steps.selectGraphToolOptionSpecifyCorrectAnswer('Vector');
+            graphingPage.steps.plotPointsOnGraphSpecifyCorrectAnswerSection([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnSpecifyCorrectAnswerSection([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.expandScoringTypeDropdown();
+            graphingPage.steps.selectOptionFromScoringTypeDropdown('Non scored');
+            graphingPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+            graphingPage.steps.switchToPreviewTab();
+        });
+
+        graphingPage.tests.verifyGradingStudentViewRadioButtonAndScoringTypeInPreviewTab('Non scored');
+
+        it('When the user selects \'Grading\' view without attempting the question, the correct answer should be displayed in the correct answer section graph', () => {
+            //Preview tab
+            utilities.verifyElementCount(graphingPage.graphCirclePreviewTab(), 1);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
+            utilities.verifyElementCount(graphingPage.graphLinePreviewTab(), 1);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
+            graphingPage.steps.switchToGradingView();
+
+            //Correct answer section
+            utilities.verifyElementCount(graphingPage.graphCircleCorrectAnswerSection(), 1);
+            graphingPage.steps.verifyPointsPlottedOnCorrectAnswerSection([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
+            utilities.verifyElementCount(graphingPage.graphLineCorrectAnswerSection(), 2);
+            graphingPage.steps.verifyPointsPlottedOnCorrectAnswerSection([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
+            utilities.verifyElementCount(graphingPage.graphPolygonCorrectAnswerSection(), 1);
+
+            //Correct/incorrect icon
+            utilities.verifyElementVisibilityState(graphingPage.correctIncorrectStatusMessageText(), 'notExist');
+            graphingPage.steps.verifyCorrectPointsPlottedOnGraphCorrectAnswerSection([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.verifyCorrectPointsPlottedOnGraphCorrectAnswerSection([{ x: -6, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 9, yRange: 20 }]);
+            graphingPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user selects \'Check answer\' view without attempting the question, the correct answer should be displayed in the correct answer section graph')
+            graphingPage.steps.checkAnswer();
+            utilities.verifyElementCount(graphingPage.graphCirclePreviewTab(), 1);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
+            utilities.verifyElementCount(graphingPage.graphLinePreviewTab(), 1);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
+            graphingPage.steps.verifyCorrectAnswerSectionNotExist();
+        });
+
+        it('When the user attempts the question incorrectly then the user should be awarded with 0 points and on switching to grading view \'Your answer is incorrect\' should be displayed and the attempted graph should be displayed incorrect and the the correct answers should be displayed in the correct answer section graph', () => {
+            graphingPage.steps.resetQuestionPreview();
+            graphingPage.steps.selectGraphToolOptionPreviewTab('Circle');
+            graphingPage.steps.plotPointsOnGraphPreviewTab([{ x: -2, xRange: 20, y: 1, yRange: 20 }, { x: -4, xRange: 20, y: 1, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: -2, xRange: 20, y: 1, yRange: 20 }, { x: -4, xRange: 20, y: 1, yRange: 20 }]);
+            graphingPage.steps.switchToGradingView();
+
+            //Preview tab
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: -2, xRange: 20, y: 1, yRange: 20 }, { x: -4, xRange: 20, y: 1, yRange: 20 }]);
+            utilities.verifyElementCount(graphingPage.graphLinePreviewTab(), 1);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
+            graphingPage.steps.verifyIncorrectPointsPlottedOnGraphPreviewTab([{ x: -2, xRange: 20, y: 1, yRange: 20 }, { x: -4, xRange: 20, y: 1, yRange: 20 }]);
+
+            //Correct answer section
+            utilities.verifyElementCount(graphingPage.graphCircleCorrectAnswerSection(), 1);
+            graphingPage.steps.verifyPointsPlottedOnCorrectAnswerSection([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
+            utilities.verifyElementCount(graphingPage.graphLineCorrectAnswerSection(), 2);
+            graphingPage.steps.verifyPointsPlottedOnCorrectAnswerSection([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnCorrectAnswerSection([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
+            utilities.verifyElementCount(graphingPage.graphPolygonCorrectAnswerSection(), 1);
+
+            //Correct/incorrect icon
+            graphingPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            graphingPage.steps.verifyCorrectPointsPlottedOnGraphCorrectAnswerSection([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.verifyCorrectPointsPlottedOnGraphCorrectAnswerSection([{ x: -6, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 9, yRange: 20 }]);
+            graphingPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user attempts the question incorrectly then the user should be awarded with 0 points and on switching to grading view \'Your answer is incorrect\' should be displayed and the attempted graph should be displayed incorrect')
+            graphingPage.steps.checkAnswer();
+            //Preview tab
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: -2, xRange: 20, y: 1, yRange: 20 }, { x: -4, xRange: 20, y: 1, yRange: 20 }]);
+            utilities.verifyElementCount(graphingPage.graphLinePreviewTab(), 1);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
+            graphingPage.steps.verifyIncorrectPointsPlottedOnGraphPreviewTab([{ x: -2, xRange: 20, y: 1, yRange: 20 }, { x: -4, xRange: 20, y: 1, yRange: 20 }]);
+            graphingPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect')
+            graphingPage.steps.verifyCorrectAnswerSectionNotExist();
+        });
+
+        it('When the user attempts the question partially correct then the user should be awarded with 0 points and on switching to grading view \'Your answer is incorrect\' should be displayed and the attempted graph should be displayed correct and the the correct answers should be displayed in the correct answer section graph', () => {
+            graphingPage.steps.resetQuestionPreview();
+            graphingPage.steps.selectGraphToolOptionPreviewTab('Vector');
+            graphingPage.steps.plotPointsOnGraphPreviewTab([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.switchToGradingView();
+
+            //Preview tab
+            utilities.verifyElementCount(graphingPage.graphCirclePreviewTab(), 1);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.verifyCorrectPointsPlottedOnGraphPreviewTab([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
+
+            //Correct answer section
+            utilities.verifyElementCount(graphingPage.graphCircleCorrectAnswerSection(), 1);
+            graphingPage.steps.verifyPointsPlottedOnCorrectAnswerSection([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
+            utilities.verifyElementCount(graphingPage.graphLineCorrectAnswerSection(), 2);
+            graphingPage.steps.verifyPointsPlottedOnCorrectAnswerSection([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnCorrectAnswerSection([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
+            utilities.verifyElementCount(graphingPage.graphPolygonCorrectAnswerSection(), 1);
+
+            //Correct/incorrect icon
+            graphingPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            graphingPage.steps.verifyCorrectPointsPlottedOnGraphCorrectAnswerSection([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.verifyCorrectPointsPlottedOnGraphCorrectAnswerSection([{ x: -6, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 9, yRange: 20 }]);
+            graphingPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user attempts the question partially correct then the user should be awarded with 0 points and on switching to grading view \'Your answer is incorrect\' should be displayed and the attempted graph should be displayed correct')
+            graphingPage.steps.checkAnswer();
+            //Preview tab
+            utilities.verifyElementCount(graphingPage.graphCirclePreviewTab(), 1);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.verifyCorrectPointsPlottedOnGraphPreviewTab([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect')
+            graphingPage.steps.verifyCorrectAnswerSectionNotExist();
+        });
+
+        it('When the user attempts the question partially correct with an incorrect response then the user should be awarded with 0 points and on switching to grading view \'Your answer is incorrect\' should be displayed and the attempted graph should be displayed correct for the correct response and incorrect for the incorrect response and the the correct answers should be displayed in the correct answer section graph', () => {
+            graphingPage.steps.resetQuestionPreview();
+            graphingPage.steps.selectGraphToolOptionPreviewTab('Polygon');
+            graphingPage.steps.plotPointsOnGraphPreviewTab([{ x: -3, xRange: 20, y: 4, yRange: 20 }, { x: 3, xRange: 20, y: 4, yRange: 20 }, { x: 3, xRange: 20, y: -4, yRange: 20 }, { x: -3, xRange: 20, y: 4, yRange: 20 }]);
+            graphingPage.steps.selectGraphToolOptionPreviewTab('Polygon');
+            graphingPage.steps.plotPointsOnGraphPreviewTab([{ x: -6, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 9, yRange: 20 }]);
+            graphingPage.steps.switchToGradingView();
+
+            //Preview tab
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: -3, xRange: 20, y: 4, yRange: 20 }, { x: 3, xRange: 20, y: 4, yRange: 20 }, { x: 3, xRange: 20, y: -4, yRange: 20 }, { x: -3, xRange: 20, y: 4, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: -6, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 9, yRange: 20 }]);
+            graphingPage.steps.verifyCorrectPointsPlottedOnGraphPreviewTab([{ x: -6, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 9, yRange: 20 }]);
+            graphingPage.steps.verifyIncorrectPointsPlottedOnGraphPreviewTab([{ x: -3, xRange: 20, y: 4, yRange: 20 }, { x: 3, xRange: 20, y: 4, yRange: 20 }, { x: 3, xRange: 20, y: -4, yRange: 20 }, { x: -3, xRange: 20, y: 4, yRange: 20 }]);
+
+            //Correct answer section
+            utilities.verifyElementCount(graphingPage.graphCircleCorrectAnswerSection(), 1);
+            graphingPage.steps.verifyPointsPlottedOnCorrectAnswerSection([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
+            utilities.verifyElementCount(graphingPage.graphLineCorrectAnswerSection(), 2);
+            graphingPage.steps.verifyPointsPlottedOnCorrectAnswerSection([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnCorrectAnswerSection([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
+            utilities.verifyElementCount(graphingPage.graphPolygonCorrectAnswerSection(), 1);
+
+            //Correct/incorrect icon
+            graphingPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            graphingPage.steps.verifyCorrectPointsPlottedOnGraphCorrectAnswerSection([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.verifyCorrectPointsPlottedOnGraphCorrectAnswerSection([{ x: -6, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 9, yRange: 20 }]);
+            graphingPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user attempts the question partially correct with an incorrect response then the user should be awarded with 0 points and on switching to grading view \'Your answer is incorrect\' should be displayed and the attempted graph should be displayed correct for the correct response',)
+            graphingPage.steps.checkAnswer();
+            //Preview tab
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: -3, xRange: 20, y: 4, yRange: 20 }, { x: 3, xRange: 20, y: 4, yRange: 20 }, { x: 3, xRange: 20, y: -4, yRange: 20 }, { x: -3, xRange: 20, y: 4, yRange: 20 }]);
+            graphingPage.steps.verifyCorrectPointsPlottedOnGraphPreviewTab([{ x: -6, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 9, yRange: 20 }]);
+            graphingPage.steps.verifyIncorrectPointsPlottedOnGraphPreviewTab([{ x: -3, xRange: 20, y: 4, yRange: 20 }, { x: 3, xRange: 20, y: 4, yRange: 20 }, { x: 3, xRange: 20, y: -4, yRange: 20 }, { x: -3, xRange: 20, y: 4, yRange: 20 }]);
+            graphingPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect')
+            graphingPage.steps.verifyCorrectAnswerSectionNotExist();
+        });
+
+        it('When the user attempts the question correctly then the user should be awarded with full points and on switching to grading view \'Your answer is correct\' should be displayed and the attempted graph should be displayed correct and the correct answer section graph should not be displayed', () => {
+            graphingPage.steps.resetQuestionPreview();
+            graphingPage.steps.selectGraphToolOptionPreviewTab('Polygon');
+            graphingPage.steps.plotPointsOnGraphPreviewTab([{ x: -6, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 9, yRange: 20 }]);
+            graphingPage.steps.selectGraphToolOptionPreviewTab('Vector');
+            graphingPage.steps.plotPointsOnGraphPreviewTab([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.switchToGradingView();
+
+            //Preview tab
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: -6, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 9, yRange: 20 }]);
+            graphingPage.steps.verifyCorrectPointsPlottedOnGraphPreviewTab([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.verifyCorrectPointsPlottedOnGraphPreviewTab([{ x: -6, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 9, yRange: 20 }]);
+            graphingPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+            graphingPage.steps.verifyCorrectAnswerSectionNotExist();
+            graphingPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user attempts the question correctly then the user should be awarded with full points and on switching to grading view \'Your answer is correct\' should be displayed and the attempted graph should be displayed correct')
+            graphingPage.steps.checkAnswer();
+            //Preview tab
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.verifyCorrectPointsPlottedOnGraphPreviewTab([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
+            graphingPage.steps.verifyCorrectPointsPlottedOnGraphPreviewTab([{ x: -6, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 9, yRange: 20 }]);
+            graphingPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+            graphingPage.steps.verifyCorrectAnswerSectionNotExist();
+        });
+    });
+});

package/cypress/e2e/ILC/Graphing/addBackgroundShapesSection.js

@@ -0,0 +1,307 @@
+import { dialogBoxBase, graphingPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const unselectedToolOption = ['Circle', 'Parabola', 'Sine', 'Polygon'];
+const selectedToolOption = ['Point', 'Line', 'Label', 'Ray', 'Segment', 'Vector'];
+const controlOptions = ['Move', 'Undo', 'Redo', 'Reset'];
+const toolOptions = [...selectedToolOption, ...unselectedToolOption];
+
+describe('Graphing: Add background shapes section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Add background shapes section content', () => {
+        abortEarlySetup();
+        before(() => {
+            graphingPage.steps.navigateToCreateQuestion('Graphing');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Add background shapes\' label should be displayed', () => {
+            utilities.verifyInnerText(graphingPage.addBackgroundShapesLabel(), 'Add background shapes');
+            utilities.verifyElementVisibilityState(graphingPage.addBackgroundShapesLabel(), 'visible');
+        });
+
+        it('The toolbar options should be displayed and when the user hovers over the tool options then tooltips should be displayed', () => {
+            toolOptions.forEach((toolOption) => {
+                utilities.verifyElementVisibilityState(graphingPage.graphToolOptionEditTab(toolOption), 'exist');
+                graphingPage.graphToolOptionEditTab(toolOption)
+                    .verifyTooltip(toolOption);
+            });
+        });
+
+        it('By default, the point option should be in selected state and all other options should be unselected', () => {
+            graphingPage.steps.verifyToolOptionSelectedEditTab('Point');
+            graphingPage.steps.verifyToolOptionNotSelectedEditTab(toolOptions.splice(1, toolOptions.length));
+        });
+
+        it('\'Graph title\' label should be displayed', () => {
+            utilities.verifyInnerText(graphingPage.graphTitleGraphEditTab(), 'Graph title');
+        });
+
+        it('\'X axis label\' and \'Y axis label\' should be displayed', () => {
+            utilities.verifyInnerText(graphingPage.xAxisGraphEditTab(), 'X axis label');
+            utilities.verifyInnerText(graphingPage.yAxisGraphEditTab(), 'Y axis label');
+        });
+
+        it('X max and X min labels with input fields should be displayed and by default the input fields should have value \'10\' and \'-10\' respectively', () => {
+            utilities.verifyInnerText(graphingPage.xMinLabel(), 'X min');
+            utilities.verifyInnerText(graphingPage.xMaxLabel(), 'X max');
+            graphingPage.steps.verifyXMinInputFieldValue('-10');
+            graphingPage.steps.verifyXMaxInputFieldValue('10');
+        });
+
+        it('Y max and Y min labels with input fields should be displayed and by default the input fields should have value \'10\' and \'-10\' respectively', () => {
+            utilities.verifyInnerText(graphingPage.yMinLabel(), 'Y min');
+            utilities.verifyInnerText(graphingPage.yMaxLabel(), 'Y max');
+            graphingPage.steps.verifyYMinInputFieldValue('-10');
+            graphingPage.steps.verifyYMaxInputFieldValue('10');
+        });
+    });
+
+    describe('Add background shapes section edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            graphingPage.steps.navigateToCreateQuestion('Graphing');
+            cy.barsPreLoaderWait();
+        });
+
+        //Graph title
+        it('When the user clicks on the \'Graph title\' a popup with title \'Graph title\' and \'Add label\' label with input field should be displayed along with \'Save\' and \'Cancel\' button', () => {
+            graphingPage.steps.clickOnGraphTitle();
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'Graph title');
+            utilities.verifyInnerText(graphingPage.titlePopupAddLabelLabel(), 'Add label');
+            utilities.verifyElementVisibilityState(graphingPage.titlePopupAddLabelInputField(), 'visible');
+            utilities.verifyInnerText(graphingPage.titlePopupSaveButton(), 'Save');
+            utilities.verifyInnerText(graphingPage.titlePopupCancelButton(), 'Cancel');
+        });
+
+        it('The input field should be prefilled with \'Graph title\' and the user should be able to edit it', () => {
+            utilities.verifyTextContent(graphingPage.titlePopupAddLabelInputField(), 'Graph title');
+        });
+
+        it('When the user edits the graph title and clicks on \'Cancel\' button then the changes should not be displayed in the background section graph and \'Specify correct answer\' section graph', () => {
+            graphingPage.steps.enterTextInTitlePopupAddLabelInputField('Edit graph title');
+            graphingPage.steps.clickOnTitlePopupCancelButton();
+            utilities.verifyInnerText(graphingPage.graphTitleGraphEditTab(), 'Graph title');
+            utilities.verifyInnerText(graphingPage.graphTitleSpecifyCorrectAnswerSection(), 'Graph title');
+        });
+
+        it('When the user clicks on the \'Graph title\' then the original text should be displayed in the popup', () => {
+            graphingPage.steps.clickOnGraphTitle();
+            utilities.verifyTextContent(graphingPage.titlePopupAddLabelInputField(), 'Graph title');
+        });
+
+        it('When the user clicks on \'Save\' after updating the input field the updated label should be displayed in the background section graph and \'Specify correct answer\' section graph', () => {
+            graphingPage.steps.enterTextInTitlePopupAddLabelInputField('Edit graph title');
+            graphingPage.steps.clickOnTitlePopupSaveButton();
+            utilities.verifyInnerText(graphingPage.graphTitleGraphEditTab(), 'Edit graph title');
+            utilities.verifyInnerText(graphingPage.graphTitleSpecifyCorrectAnswerSection(), 'Edit graph title');
+        });
+
+        //X axis
+        it('When the user clicks on the \'X axis label\' a popup with title \'X axis label\' and \'Add label\' label with input field should be displayed', () => {
+            graphingPage.steps.clickOnXAxisLabel();
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'X axis label');
+            utilities.verifyInnerText(graphingPage.titlePopupAddLabelLabel(), 'Add label');
+            utilities.verifyElementVisibilityState(graphingPage.titlePopupAddLabelInputField(), 'visible');
+            utilities.verifyInnerText(graphingPage.titlePopupSaveButton(), 'Save');
+            utilities.verifyInnerText(graphingPage.titlePopupCancelButton(), 'Cancel');
+        });
+
+        it('The input field should be prefilled with \'X axis label\' and the user should be able to edit it', () => {
+            utilities.verifyTextContent(graphingPage.titlePopupAddLabelInputField(), 'X axis label');
+        });
+
+        it('When the user edits the x axis label and clicks on \'Cancel\' button then the changes should not be displayed in the background section graph and \'Specify correct answer\' section graph', () => {
+            graphingPage.steps.enterTextInTitlePopupAddLabelInputField('Edit x axis title');
+            graphingPage.steps.clickOnTitlePopupCancelButton();
+            utilities.verifyInnerText(graphingPage.xAxisLabelGraphEditTab(), 'X axis label');
+            utilities.verifyInnerText(graphingPage.xAxisLabelGraphSpecifyCorrectAnswerSection(), 'X axis label');
+        });
+
+        it('When the user clicks on the \'X axis label\' then the original text should be displayed in the popup', () => {
+            graphingPage.steps.clickOnXAxisLabel();
+            utilities.verifyTextContent(graphingPage.titlePopupAddLabelInputField(), 'X axis label');
+        });
+
+        it('When the user clicks on \'Save\' after updating the input field the updated label should be displayed in the background section graph and \'Specify correct answer\' section graph', () => {
+            graphingPage.steps.enterTextInTitlePopupAddLabelInputField('Edit x axis label');
+            graphingPage.steps.clickOnTitlePopupSaveButton();
+            utilities.verifyInnerText(graphingPage.xAxisLabelGraphEditTab(), 'Edit x axis label');
+            utilities.verifyInnerText(graphingPage.xAxisLabelGraphSpecifyCorrectAnswerSection(), 'Edit x axis label');
+        });
+
+        //Y axis
+        it('When the user clicks on the \'Y axis label\' a popup with title \'Y axis label\' and \'Add label\' label with input field should be displayed', () => {
+            graphingPage.steps.clickOnYAxisLabel();
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'Y axis label');
+            utilities.verifyInnerText(graphingPage.titlePopupAddLabelLabel(), 'Add label');
+            utilities.verifyElementVisibilityState(graphingPage.titlePopupAddLabelInputField(), 'visible');
+            utilities.verifyInnerText(graphingPage.titlePopupSaveButton(), 'Save');
+            utilities.verifyInnerText(graphingPage.titlePopupCancelButton(), 'Cancel');
+        });
+
+        it('The input field should be prefilled with \'Y axis label\' and the user should be able to edit it', () => {
+            utilities.verifyTextContent(graphingPage.titlePopupAddLabelInputField(), 'Y axis label');
+        });
+
+        it('When the user edits the Y axis label and clicks on \'Cancel\' button then the changes should not be displayed in the background section graph and \'Specify correct answer\' section graph', () => {
+            graphingPage.steps.enterTextInTitlePopupAddLabelInputField('Edit y axis title');
+            graphingPage.steps.clickOnTitlePopupCancelButton();
+            utilities.verifyInnerText(graphingPage.yAxisLabelGraphEditTab(), 'Y axis label');
+            utilities.verifyInnerText(graphingPage.yAxisLabelGraphSpecifyCorrectAnswerSection(), 'Y axis label');
+        });
+
+        it('When the user clicks on the \'Y axis label\' then the original text should be displayed in the popup', () => {
+            graphingPage.steps.clickOnYAxisLabel();
+            utilities.verifyTextContent(graphingPage.titlePopupAddLabelInputField(), 'Y axis label');
+        });
+
+        it('When the user clicks on \'Save\' after updating the input field the updated label should be displayed in the background section graph and \'Specify correct answer\' section graph', () => {
+            graphingPage.steps.enterTextInTitlePopupAddLabelInputField('Edit y axis label');
+            graphingPage.steps.clickOnTitlePopupSaveButton();
+            utilities.verifyInnerText(graphingPage.yAxisLabelGraphEditTab(), 'Edit y axis label');
+            utilities.verifyInnerText(graphingPage.yAxisLabelGraphSpecifyCorrectAnswerSection(), 'Edit y axis label');
+        });
+
+        //X max and X min
+        it('When X max and X min values are 10 and -10 respectively then on the X axis should range from (-9, 9) in the background section graph and \'Specify correct answer\' section graph', () => {
+            graphingPage.steps.verifyXMaxInputFieldValue('10');
+            graphingPage.steps.verifyXMaxInputFieldValue('-10');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('9'), 'exist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('10'), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('9'), 'exist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('10'), 'notExist');
+        });
+
+        it('When the user updates the value of X max and X min then on the X axis should range change accordingly in the background section graph and \'Specify correct answer\' section graph', () => {
+            graphingPage.steps.enterTextInXMaxInputField('11');
+            graphingPage.steps.enterTextInXMinInputField('-11');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('10'), 'exist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('11'), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('10'), 'exist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('11'), 'notExist');
+            cy.log('Post step: Resetting X axis values')
+            graphingPage.steps.enterTextInXMaxInputField('10');
+            graphingPage.steps.enterTextInXMinInputField('-10');
+        });
+
+        //Y max and Y min
+        it('When Y max and Y min values are 10 and -10 respectively then on the Y axis should range from (-9, 9) in the background section graph and \'Specify correct answer\' section graph', () => {
+            graphingPage.steps.verifyYMaxInputFieldValue('10');
+            graphingPage.steps.verifyYMaxInputFieldValue('-10');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('9'), 'exist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('10'), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('9'), 'exist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('10'), 'notExist');
+        });
+
+        it('When the user updates the value of Y max and Y min then on the Y axis should range change accordingly in the background section graph and \'Specify correct answer\' section graph', () => {
+            graphingPage.steps.enterTextInYMaxInputField('11');
+            graphingPage.steps.enterTextInYMinInputField('-11');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('10'), 'exist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('11'), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('10'), 'exist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('11'), 'notExist');
+        });
+    });
+
+    describe('Add background shapes section preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            graphingPage.steps.navigateToCreateQuestion('Graphing');
+            cy.barsPreLoaderWait();
+        });
+
+        //Graph title
+        it('When the user edits the graph title and clicks on \'Cancel\' button then the changes should not be displayed in the preview tab graph', () => {
+            graphingPage.steps.enterTextInTitlePopupAddLabelInputField('Edit graph title');
+            graphingPage.steps.clickOnTitlePopupCancelButton();
+            graphingPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(graphingPage.graphTitlePreviewTab(), 'Graph title');
+        });
+
+        it('When the user clicks on \'Save\' after updating the input field the updated label should be displayed in the preview tab graph', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.enterTextInTitlePopupAddLabelInputField('Edit graph title');
+            graphingPage.steps.clickOnTitlePopupCancelButton();
+            graphingPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(graphingPage.graphTitlePreviewTab(), 'Graph title');
+        });
+
+        //X axis
+        it('When the user edits the x axis label and clicks on \'Cancel\' button then the changes should not be displayed in the preview tab graph', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.enterTextInTitlePopupAddLabelInputField('Edit x axis title');
+            graphingPage.steps.clickOnTitlePopupCancelButton();
+            graphingPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(graphingPage.xAxisLabelGraphPreviewTab(), 'X axis label');
+        });
+
+        it('When the user clicks on \'Save\' after updating the input field the updated label should be displayed in the preview tab graph', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.clickOnXAxisLabel();
+            graphingPage.steps.enterTextInTitlePopupAddLabelInputField('Edit x axis label');
+            graphingPage.steps.clickOnTitlePopupSaveButton();
+            graphingPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(graphingPage.xAxisLabelGraphPreviewTab(), 'Edit x axis label');
+        });
+
+        //Y axis
+        it('When the user edits the y axis label and clicks on \'Cancel\' button then the changes should not be displayed in the preview tab graph', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.enterTextInTitlePopupAddLabelInputField('Edit y axis title');
+            graphingPage.steps.clickOnTitlePopupCancelButton();
+            graphingPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(graphingPage.yAxisLabelGraphPreviewTab(), 'Y axis label');
+        });
+
+        it('When the user clicks on \'Save\' after updating the input field the updated label should be displayed in the preview tab graph', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.clickOnYAxisLabel();
+            graphingPage.steps.enterTextInTitlePopupAddLabelInputField('Edit y axis label');
+            graphingPage.steps.clickOnTitlePopupSaveButton();
+            graphingPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(graphingPage.yAxisLabelGraphPreviewTab(), 'Edit y axis label');
+        });
+
+        //X max and X min
+        it('When X max and X min values are 10 and -10 respectively then on the X axis should range from (-9, 9) in the preview tab graph', () => {
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('9'), 'exist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('10'), 'notExist');
+        });
+
+        it('When the user updates the value of X max and X min then on the X axis should range change accordingly in the preview tab graph', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.enterTextInXMaxInputField('11');
+            graphingPage.steps.enterTextInXMinInputField('-11');
+            graphingPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('10'), 'exist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('11'), 'notExist');
+            graphingPage.steps.switchToEditTab();
+            cy.log('Post step: Resetting X axis values')
+            graphingPage.steps.enterTextInXMaxInputField('10');
+            graphingPage.steps.enterTextInXMinInputField('-10');
+        });
+
+        //Y max and Y min
+        it('When Y max and Y min values are 10 and -10 respectively then on the Y axis should range from (-9, 9) in the preview tab graph', () => {
+            graphingPage.steps.verifyYMaxInputFieldValue('10');
+            graphingPage.steps.verifyYMaxInputFieldValue('-10');
+            graphingPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('9'), 'exist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('10'), 'notExist');
+        });
+
+        it('When the user updates the value of Y max and Y min then on the Y axis should range change accordingly in the preview tab graph', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.enterTextInYMaxInputField('11');
+            graphingPage.steps.enterTextInYMinInputField('-11');
+            graphingPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('10'), 'exist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('11'), 'notExist');
+        });
+    });
+});