itemengine-cypress-automation 1.0.133-7thMarchFixes-0e78080.0 → 1.0.134-14MarchUpdates-0b00629.0

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

@@ -0,0 +1,916 @@
+import { graphingPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Graphing: Layout section - Edit tab and preview tab tool options', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Layout section: Edit tab content and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            graphingPage.steps.navigateToCreateQuestion('Graphing');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Layout\' accordion with accordion icon should be displayed and by default it should be in expanded state', () => {
+            utilities.verifyInnerText(graphingPage.layoutAccordionLabel(), 'Layout');
+            graphingPage.steps.verifyLayoutAccordionExpanded();
+            utilities.verifyElementVisibilityState(graphingPage.layoutAccordionExpandIcon(), 'visible');
+        });
+
+        it('Height (px), Width (px), Margin (px) labels should be displayed with 880, 880 and 10 in their input fields by default', () => {
+            utilities.verifyInnerText(graphingPage.widthLabel(), 'Width (px)');
+            utilities.verifyInnerText(graphingPage.heightLabel(), 'Height (px)');
+            utilities.verifyInnerText(graphingPage.marginLabel(), 'Margin (px)');
+            graphingPage.steps.verifyLayoutInputFieldValue('Height', 880);
+            graphingPage.steps.verifyLayoutInputFieldValue('Width', 880);
+            graphingPage.steps.verifyLayoutInputFieldValue('Margin', 10);
+        });
+
+        it('\'Make responsive\' label with switch should be displayed with help text \'The column width was automatically adjusted to be at least 44 pixels.\'', () => {
+            utilities.verifyInnerText(graphingPage.makeResponsiveLabel(), 'Make responsive');
+            utilities.verifyElementVisibilityState(graphingPage.makeResponsiveSwitch(), 'visible');
+            graphingPage.steps.verifyMakeResponsiveIsChecked();
+            utilities.verifyInnerText(graphingPage.makeResponsiveHelpText(), 'The column width was automatically adjusted to be at least 44 pixels.');
+        });
+
+        it('\'What is this?\' label should be displayed and when user hovers over the label then \'Activating this toggle ensures each column width automatically adjusts to be at least 44 pixels.\' tooltip should be displayed', () => {
+            utilities.verifyInnerText(graphingPage.whatIsThisLabel(), 'What is this?');
+            graphingPage.whatIsThisLabel()
+                .verifyTooltip('Activating this toggle ensures each column width automatically adjusts to be at least 44 pixels.');
+        });
+
+        it('User should be able to collapse and expand the \'Layout\' accordion', () => {
+            graphingPage.steps.collapseLayoutAccordion();
+            graphingPage.steps.expandLayoutAccordion();
+        });
+
+        it('When user unchecks the switch the help text should not be displayed', () => {
+            graphingPage.steps.clickMakeResponsive();
+            graphingPage.steps.verifyMakeResponsiveIsUnchecked();
+            utilities.verifyElementVisibilityState(graphingPage.makeResponsiveHelpText(), 'notExist');
+        });
+
+        it('The \'Specify correct answer\' section and background section graph should have 880px height and width by default', () => {
+            graphingPage.steps.verifyHeightWidthOfGraphEditTab('880', '880');
+            graphingPage.steps.verifyHeightWidthOfGraphSpecifyCorrectAnswerSection('880', '880');
+        });
+
+        it('When the user has updated the Height (px), Width (px) in the input field should be updated in \'Specify correct answer\' section and background section graph', () => {
+            graphingPage.steps.enterValueInHeightInputField('600');
+            graphingPage.steps.enterValueInWidthInputField('600');
+            graphingPage.steps.verifyHeightWidthOfGraphEditTab('600', '600');
+            graphingPage.steps.verifyHeightWidthOfGraphSpecifyCorrectAnswerSection('600', '600');
+        });
+
+        it('CSS of grid options section', { tags: 'css' }, () => {
+            utilities.verifyCSS(graphingPage.layoutAccordionLabel(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(graphingPage.layoutAccordionExpandIcon(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(graphingPage.heightLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(graphingPage.widthLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(graphingPage.marginLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(graphingPage.makeResponsiveLabel().find('.title-casing'), {
+                'color': css.color.UnselectedToggleButton,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            graphingPage.steps.clickMakeResponsive();
+            utilities.verifyCSS(graphingPage.makeResponsiveHelpText(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(graphingPage.whatIsThisLabel(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(graphingPage.makeResponsiveSwitch().parents('.mobile-responsive-wrapper').find('.MuiSwitch-track'), {
+                'background-color': css.color.enabledSwitchBg,
+            });
+            graphingPage.steps.clickMakeResponsive();
+            utilities.verifyCSS(graphingPage.makeResponsiveSwitch().parents('.mobile-responsive-wrapper').find('.MuiSwitch-track'), {
+                'background-color': css.color.secondaryBtn,
+            });
+        });
+
+        it('Accessibility of grid options section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(graphingPage.layoutAccordion().parents('.graphing-response-accordion'));
+        });
+
+        //TODO: Need to add margin functionality once https://redmine.zeuslearning.com/issues/563280 is resolved
+    });
+
+    describe('Layout section: Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            graphingPage.steps.navigateToCreateQuestion('Graphing');
+            cy.barsPreLoaderWait();
+            graphingPage.steps.switchToPreviewTab();
+        });
+
+
+        it('The preview tab graph should have 880px height and width by default', () => {
+            graphingPage.steps.verifyHeightWidthOfGraphPreviewTab('880', '880');
+        });
+
+        it('When the user has updated the Height (px), Width (px) in the input field should be updated in preview tab', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.enterValueInHeightInputField('600');
+            graphingPage.steps.enterValueInWidthInputField('600');
+            graphingPage.steps.switchToPreviewTab();
+            graphingPage.steps.verifyHeightWidthOfGraphPreviewTab('600', '600');
+        });
+
+        //TODO: Need to add margin functionality once https://redmine.zeuslearning.com/issues/563280 is resolved
+    });
+
+    describe('Grid options: Edit tab content', () => {
+        abortEarlySetup();
+        before(() => {
+            graphingPage.steps.navigateToCreateQuestion('Graphing');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Grid options\' accordion should be displayed in expanded state', () => {
+            utilities.verifyInnerText(graphingPage.gridOptionsAccordionLabel(), 'Grid options');
+            graphingPage.steps.verifyGridOptionsAccordionExpanded();
+            utilities.verifyElementVisibilityState(graphingPage.gridOptionsAccordionExpandIcon(), 'visible');
+        });
+
+        it('User should be able to expand and collapse the accordion', () => {
+            graphingPage.steps.collapseGridOptionsAccordion();
+            graphingPage.steps.expandGridOptionsAccordion();
+        });
+
+        it('\'Snap to grid\' checkbox and label should be displayed and by default the checkbox should be unchecked', () => {
+            utilities.verifyInnerText(graphingPage.snapToGridLabel(), 'Snap to grid');
+            utilities.verifyElementVisibilityState(graphingPage.snapToGridCheckbox(), 'exist');
+            graphingPage.steps.verifySnapToCheckboxIsUnchecked();
+        });
+
+        it('\'X tolerance\' and \'Y tolerance\' label along with input field should be displayed and by default 0 should be displayed in the input field', () => {
+            utilities.verifyInnerText(graphingPage.xToleranceLabel(), 'X tolerance');
+            graphingPage.steps.verifyXToleranceInputFieldValue('0');
+            utilities.verifyInnerText(graphingPage.yToleranceLabel(), 'Y tolerance');
+            graphingPage.steps.verifyYToleranceInputFieldValue('0');
+        });
+
+        it('User should be able to update X and Y tolerance value in the input field', () => {
+            graphingPage.steps.enterInputToXToleranceInputFieldValue(2);
+            graphingPage.steps.enterInputToYToleranceInputFieldValue(3);
+        });
+
+        it('CSS of grid options section', { tags: 'css' }, () => {
+            utilities.verifyCSS(graphingPage.gridOptionsAccordionLabel(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(graphingPage.gridOptionsAccordionExpandIcon(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(graphingPage.snapToGridLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(graphingPage.xToleranceLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(graphingPage.yToleranceLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(graphingPage.xToleranceInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(graphingPage.yToleranceInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(graphingPage.originOptionLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(graphingPage.originToggleOptions('Blank'), {
+                'background-color': css.color.activeButtons,
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(graphingPage.originToggleOptions('0,0'), {
+                'background-color': css.color.transparent,
+                'color': css.color.UnselectedToggleButton,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+        });
+
+        it('Accessibility of grid options section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(graphingPage.snapToGridLabel().parents('[id*="panel-content"]'));
+        });
+
+        it('\'Origin option\' label should be displayed', () => {
+            utilities.verifyInnerText(graphingPage.originOptionLabel(), 'Origin option');
+        });
+
+        it('\'Blank\', \'0,0\' and \'Symbol(O)\' toggle options should be displayed and by default \'Blank\' should be selected', () => {
+            utilities.verifyInnerText(graphingPage.originOptionLabel(), 'Origin option');
+            utilities.verifyTextContent(graphingPage.originToggleOptions('Blank'), 'Blank');
+            utilities.verifyTextContent(graphingPage.originToggleOptions('0,0'), '0,0');
+            utilities.verifyTextContent(graphingPage.originToggleOptions('Symbol(O)'), 'Symbol(O)');
+        });
+
+        it('\'X axis and Y axis\' labels should be displayed', () => {
+            utilities.verifyElementVisibilityState(graphingPage.xAxisLabel(), 'visible');
+            utilities.verifyInnerText(graphingPage.xAxisLabel(), 'X axis');
+            utilities.verifyElementVisibilityState(graphingPage.yAxisLabel(), 'visible');
+            utilities.verifyInnerText(graphingPage.yAxisLabel(), 'Y axis');
+        });
+
+        it('\'X grid spacing\' and \'Tick interval\' for X axis labels should be displayed with input field and by default they should have the value 1', () => {
+            utilities.verifyInnerText(graphingPage.xGridSpacingLabel(), 'X grid spacing');
+            utilities.verifyInnerText(graphingPage.xTickIntervalLabel(), 'Tick interval');
+            graphingPage.steps.verifyXGridSpacingInputFieldValue('1');
+            graphingPage.steps.verifyXTickIntervalInputFieldValue('1');
+        });
+
+        it('\'X grid spacing\' and \'Tick interval\' for Y axis labels should be displayed with input field and by default they should have the value 1', () => {
+            utilities.verifyInnerText(graphingPage.yGridSpacingLabel(), 'Y grid spacing');
+            utilities.verifyInnerText(graphingPage.yTickIntervalLabel(), 'Tick interval');
+            graphingPage.steps.verifyYGridSpacingInputFieldValue('1');
+            graphingPage.steps.verifyYTickIntervalInputFieldValue('1');
+        });
+
+        it('\'Display axis label, Remove ticks, Show tick labels, Min arrow, Max arrow, Display comma for thousand separator\' checkbox with labels should be displayed for X axis and by default all should be checked', () => {
+            utilities.verifyElementVisibilityState(graphingPage.xDisplayAxisLabel(), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.xRemoveTicksLabel(), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.xShowTicksLabelsLabel(), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.xMinArrowLabel(), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.xMaxArrowLabel(), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.xDisplayCommaForThousandSeparatorLabel(), 'visible');
+            graphingPage.steps.verifyXDisplayAxisCheckboxChecked();
+            graphingPage.steps.verifyXRemoveTicksCheckboxChecked();
+            graphingPage.steps.verifyXShowTicksLabelCheckboxChecked();
+            graphingPage.steps.verifyXMinArrowCheckboxChecked();
+            graphingPage.steps.verifyXMaxArrowCheckboxChecked();
+            graphingPage.steps.verifyXDisplayCommaForThousandSeparatorCheckboxChecked();
+        });
+
+        it('\'Display axis label, Remove ticks, Show tick labels, Min arrow, Max arrow, Display comma for thousand separator\' checkbox with labels should be displayed for Y axis and by default all should be checked', () => {
+            utilities.verifyElementVisibilityState(graphingPage.yDisplayAxisLabel(), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.yRemoveTicksLabel(), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.yShowTicksLabelsLabel(), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.yMinArrowLabel(), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.yMaxArrowLabel(), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.yDisplayCommaForThousandSeparatorLabel(), 'visible');
+            graphingPage.steps.verifyYDisplayAxisCheckboxChecked();
+            graphingPage.steps.verifyYRemoveTicksCheckboxChecked();
+            graphingPage.steps.verifyYShowTicksLabelCheckboxChecked();
+            graphingPage.steps.verifyYMinArrowCheckboxChecked();
+            graphingPage.steps.verifyYMaxArrowCheckboxChecked();
+            graphingPage.steps.verifyYDisplayCommaForThousandSeparatorCheckboxChecked();
+        });
+
+        it('CSS of grid options section', { tags: 'css' }, () => {
+            utilities.verifyCSS(graphingPage.xAxisLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(graphingPage.yAxisLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(graphingPage.xGridSpacingLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(graphingPage.xTickIntervalLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(graphingPage.yGridSpacingLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(graphingPage.yTickIntervalLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(graphingPage.xDisplayAxisLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(graphingPage.yDisplayAxisLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+    });
+
+    describe('Grid options: Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            graphingPage.steps.navigateToCreateQuestion('Graphing');
+            cy.barsPreLoaderWait();
+        });
+
+        //Snap to grid
+        it('When snap to grid is unchecked user should be able to plot decimal points on the graph in \'Specify correct answer\' section and background section graph', () => {
+            graphingPage.steps.plotPointsOnGraphEditTab([{ x: 2.5, xRange: 20, y: 1, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnEditTabGraph([{ x: 2.5, xRange: 20, y: 1, yRange: 20 }]);
+            graphingPage.steps.plotPointsOnGraphSpecifyCorrectAnswerSection([{ x: 3.5, xRange: 20, y: 1, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnSpecifyCorrectAnswerSection([{ x: 3.5, xRange: 20, y: 1, yRange: 20 }]);
+        });
+
+        it('When the user checks snap to grid checkbox then the X and Y tolerance should become disabled and the user should not be able to plot decimal points', () => {
+            graphingPage.steps.checkSnapToGridCheckbox();
+            utilities.verifyElementDisabledClass(graphingPage.xToleranceInputField());
+            utilities.verifyElementDisabledClass(graphingPage.yToleranceInputField());
+            graphingPage.steps.plotPointsOnGraphEditTab([{ x: 2.25, xRange: 20, y: 1, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnEditTabGraph([{ x: 2, xRange: 20, y: 1, yRange: 20 }]);
+            graphingPage.steps.plotPointsOnGraphSpecifyCorrectAnswerSection([{ x: 3.15, xRange: 20, y: 1, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnSpecifyCorrectAnswerSection([{ x: 3, xRange: 20, y: 1, yRange: 20 }]);
+        });
+
+        //Origin option
+        it('When blank origin option is selected nothing should be displayed on the origin on the graph in \'Specify correct answer\' section and background section graph', () => {
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('0,0'), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('O'), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('0,0'), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('Symbol(O)'), 'notExist');
+        });
+
+        it('When the user selects 0,0 then 0,0 should be displayed on the origin on the graph in \'Specify correct answer\' section and background section graph', () => {
+            graphingPage.steps.selectOriginOption('0,0');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('0,0'), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('O'), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('0,0'), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('O'), 'notExist');
+        });
+
+        it('When the user selects Symbol(O) then O should be displayed on the origin on the graph in \'Specify correct answer\' section and background section graph', () => {
+            graphingPage.steps.selectOriginOption('Symbol(O)');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('0,0'), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('O'), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('0,0'), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('O'), 'visible');
+        });
+
+        it('When the user selects \'Blank\' then nothing should be displayed on the origin on the graph in \'Specify correct answer\' section and background section graph', () => {
+            graphingPage.steps.selectOriginOption('Blank');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('0,0'), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('O'), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('0,0'), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('O'), 'notExist');
+        });
+
+        //X axis
+        it('When X grid spacing is 1 then on the x axis user should be able to plot only on the grid lines', () => {
+            graphingPage.steps.plotPointsOnGraphEditTab([{ x: 1, xRange: 20, y: 1, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnEditTabGraph([{ x: 1, xRange: 20, y: 1, yRange: 20 }]);
+            graphingPage.steps.plotPointsOnGraphSpecifyCorrectAnswerSection([{ x: -1, xRange: 20, y: 1, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnSpecifyCorrectAnswerSection([{ x: -1, xRange: 20, y: 1, yRange: 20 }]);
+        });
+
+        it('When user updates X grid spacing then on the x axis user should be able to plot only on the grid lines after a those many intervals', () => {
+            graphingPage.steps.enterTextInXGridSpacingInputFieldValue(3)
+            graphingPage.steps.plotPointsOnGraphEditTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnEditTabGraph([{ x: 3, xRange: 20, y: 1, yRange: 20 }]);
+            graphingPage.steps.plotPointsOnGraphSpecifyCorrectAnswerSection([{ x: -2, xRange: 20, y: 1, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnSpecifyCorrectAnswerSection([{ x: -3, xRange: 20, y: 1, yRange: 20 }]);
+        });
+
+        //Note: Update once https://redmine.zeuslearning.com/issues/564975 is resolved
+        it('When \'Tick interval\' for the x axis is 1 then the ticks should be displayed after a single interval on the x axis', () => {
+
+        });
+
+        it('When the user updates the \'Tick interval\' value then the ticks should be displayed after a those many intervals', () => {
+
+        });
+
+        it('When the user has checked the \'Display axis label\' checkbox then the X axis label should be displayed', () => {
+            graphingPage.steps.verifyXDisplayAxisCheckboxChecked();
+            utilities.verifyElementVisibilityState(graphingPage.xAxisLabelGraphEditTab(), 'visible');
+            utilities.verifyInnerText(graphingPage.xAxisLabelGraphEditTab(), 'X axis label');
+            utilities.verifyElementVisibilityState(graphingPage.xAxisLabelGraphSpecifyCorrectAnswerSection(), 'visible');
+            utilities.verifyInnerText(graphingPage.xAxisLabelGraphSpecifyCorrectAnswerSection(), 'X axis label');
+        });
+
+        it('When the user unchecks the \'Display axis label\' checkbox then the X axis label should not be displayed', () => {
+            graphingPage.steps.uncheckXDisplayAxisCheckbox();
+            utilities.verifyElementVisibilityState(graphingPage.xAxisLabelGraphEditTab(), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.xAxisLabelGraphSpecifyCorrectAnswerSection(), 'hidden');
+        });
+
+        //Note: Update once https://redmine.zeuslearning.com/issues/564975 is resolved
+        it('When the user has checked the \'Remove ticks\' checkbox then the X axis ticks should not be displayed', () => {
+            graphingPage.steps.verifyXRemoveTicksCheckboxChecked();
+        });
+
+        it('When the user unchecks the \'Remove ticks\' checkbox then the X axis ticks should be displayed', () => {
+            graphingPage.steps.uncheckXRemoveTicksCheckbox();
+        });
+
+        it('When the user has checked the \'Show tick labels\' checkbox then the X axis ticks label should be displayed', () => {
+            graphingPage.steps.verifyXShowTicksLabelCheckboxChecked();
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('2'), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('4'), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('2'), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('4'), 'visible');
+        });
+
+        it('When the user unchecks the \'Show tick labels\' checkbox then the X axis ticks label should not be displayed', () => {
+            graphingPage.steps.uncheckXShowTicksLabelCheckbox();
+            utilities.verifyElementCount(graphingPage.textOnGraphEditTab('2'), 1);
+            utilities.verifyElementCount(graphingPage.textOnGraphEditTab('4'), 1);
+            utilities.verifyElementCount(graphingPage.textOnGraphSpecifyCorrectAnswerSection('2'), 1);
+            utilities.verifyElementCount(graphingPage.textOnGraphSpecifyCorrectAnswerSection('4'), 1);
+        });
+
+        it('When the user has checked the \'Min arrow\' checkbox then the negative X axis arrow should be displayed', () => {
+            graphingPage.steps.verifyXMinArrowCheckboxChecked();
+            graphingPage.steps.verifyXAxisMinArrowExistGraphEditTab();
+            graphingPage.steps.verifyXAxisMaxArrowExistGraphEditTab();
+            graphingPage.steps.verifyXAxisMinArrowExistGraphSpecifyCorrectAnswerSection();
+            graphingPage.steps.verifyXAxisMaxArrowExistGraphSpecifyCorrectAnswerSection();
+        });
+
+        it('When the user unchecks the \'Min arrow\' checkbox then the negative X axis arrow should not be displayed', () => {
+            graphingPage.steps.uncheckXMinArrowCheckbox();
+            graphingPage.steps.verifyXAxisMinArrowNotExistGraphEditTab();
+            graphingPage.steps.verifyXAxisMaxArrowExistGraphEditTab();
+            graphingPage.steps.verifyXAxisMinArrowNotExistGraphSpecifyCorrectAnswerSection();
+            graphingPage.steps.verifyXAxisMaxArrowExistGraphSpecifyCorrectAnswerSection();
+        });
+
+        it('When the user has checked the \'Max arrow\' checkbox then the positive X axis arrow should be displayed', () => {
+            graphingPage.steps.verifyXMaxArrowCheckboxChecked();
+            graphingPage.steps.verifyXAxisMinArrowNotExistGraphEditTab();
+            graphingPage.steps.verifyXAxisMaxArrowExistGraphEditTab();
+            graphingPage.steps.verifyXAxisMinArrowNotExistGraphSpecifyCorrectAnswerSection();
+            graphingPage.steps.verifyXAxisMaxArrowExistGraphSpecifyCorrectAnswerSection();
+        });
+
+        it('When the user unchecks the \'Max arrow\' checkbox then the positive X axis arrow should not be displayed', () => {
+            graphingPage.steps.uncheckXMaxArrowCheckbox();
+            graphingPage.steps.verifyXAxisMinArrowNotExistGraphEditTab();
+            graphingPage.steps.verifyXAxisMaxArrowNotExistGraphEditTab();
+            graphingPage.steps.verifyXAxisMinArrowNotExistGraphSpecifyCorrectAnswerSection();
+            graphingPage.steps.verifyXAxisMaxArrowNotExistGraphSpecifyCorrectAnswerSection();
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/563533
+        it('When the user has checked the \'Display comma for thousand separator\' checkbox comma separators should be displayed', () => {
+            graphingPage.steps.verifyXDisplayCommaForThousandSeparatorCheckboxChecked();
+            graphingPage.steps.enterTextInXMaxInputField(10000);
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('9,999'), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('9998'), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('9,999'), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('9998'), 'notExist');
+        });
+
+        it('When the user unchecks the \'Display comma for thousand separator\' checkbox comma separators should not be displayed', () => {
+            graphingPage.steps.uncheckXDisplayCommaForThousandSeparatorCheckbox();
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('9,999'), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('9998'), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('9,999'), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('9998'), 'visible');
+        });
+
+        //Y axis
+        it('When Y grid spacing is 1 then the user should be able to plot y axis grid lines after a single interval', () => {
+            graphingPage.steps.plotPointsOnGraphEditTab([{ x: 3, xRange: 20, y: 1, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnEditTabGraph([{ x: 3, xRange: 20, y: 1, yRange: 20 }]);
+            graphingPage.steps.plotPointsOnGraphSpecifyCorrectAnswerSection([{ x: 3, xRange: 20, y: -1, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnSpecifyCorrectAnswerSection([{ x: 3, xRange: 20, y: -1, yRange: 20 }]);
+        });
+
+        it('When the user updates the Y grid spacing value then the user should be able to plot on y axis grid lines after those many intervals', () => {
+            graphingPage.steps.enterTextInYGridSpacingInputFieldValue(4)
+            graphingPage.steps.plotPointsOnGraphEditTab([{ x: 3, xRange: 20, y: 7, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnEditTabGraph([{ x: 3, xRange: 20, y: 8, yRange: 20 }]);
+            graphingPage.steps.plotPointsOnGraphSpecifyCorrectAnswerSection([{ x: 3, xRange: 20, y: 3, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnSpecifyCorrectAnswerSection([{ x: 3, xRange: 20, y: 4, yRange: 20 }]);
+        });
+
+        //Note: Update once https://redmine.zeuslearning.com/issues/564975 is resolved
+        it('When \'Tick interval\' for the y axis is 1 then the ticks should be displayed after a single interval on the y axis', () => {
+
+        });
+
+        it('When the user updates the \'Tick interval\' value then the ticks should be displayed after a those many intervals', () => {
+
+        });
+
+        it('When the user has checked the \'Display axis label\' checkbox then the Y axis label should be displayed', () => {
+            graphingPage.steps.verifyYDisplayAxisCheckboxChecked();
+            utilities.verifyElementVisibilityState(graphingPage.yAxisLabelGraphEditTab(), 'visible');
+            utilities.verifyInnerText(graphingPage.yAxisLabelGraphEditTab(), 'Y axis label');
+            utilities.verifyElementVisibilityState(graphingPage.yAxisLabelGraphSpecifyCorrectAnswerSection(), 'visible');
+            utilities.verifyInnerText(graphingPage.yAxisLabelGraphSpecifyCorrectAnswerSection(), 'Y axis label');
+        });
+
+        it('When the user unchecks the \'Display axis label\' checkbox then the Y axis label should not be displayed', () => {
+            graphingPage.steps.uncheckYDisplayAxisCheckbox();
+            utilities.verifyElementVisibilityState(graphingPage.yAxisLabelGraphEditTab(), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.yAxisLabelGraphSpecifyCorrectAnswerSection(), 'hidden');
+        });
+
+        //Note: Update once https://redmine.zeuslearning.com/issues/564975 is resolved
+        it('When the user has checked the \'Remove ticks\' checkbox then the Y axis ticks should not be displayed', () => {
+            graphingPage.steps.verifyYRemoveTicksCheckboxChecked();
+        });
+
+        it('When the user unchecks the \'Remove ticks\' checkbox then the Y axis ticks should be displayed', () => {
+            graphingPage.steps.uncheckYRemoveTicksCheckbox();
+        });
+
+        it('When the user has checked the \'Show tick labels\' checkbox then the Y axis ticks label should be displayed', () => {
+            graphingPage.steps.verifyYShowTicksLabelCheckboxChecked();
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('2'), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('4'), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('2'), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('4'), 'visible');
+        });
+
+        it('When the user unchecks the \'Show tick labels\' checkbox then the Y axis ticks label should not be displayed', () => {
+            graphingPage.steps.uncheckYShowTicksLabelCheckbox();
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab(), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection(), 'hidden');
+            graphingPage.steps.checkXShowTicksLabelCheckbox();
+        });
+
+        it('When the user has checked the \'Min arrow\' checkbox then the negative Y axis arrow should be displayed', () => {
+            graphingPage.steps.verifyYMinArrowCheckboxChecked();
+            graphingPage.steps.verifyYAxisMinArrowExistGraphEditTab();
+            graphingPage.steps.verifyYAxisMaxArrowExistGraphEditTab();
+            graphingPage.steps.verifyYAxisMinArrowExistGraphSpecifyCorrectAnswerSection();
+            graphingPage.steps.verifyYAxisMaxArrowExistGraphSpecifyCorrectAnswerSection();
+        });
+
+        it('When the user unchecks the \'Min arrow\' checkbox then the negative Y axis arrow should not be displayed', () => {
+            graphingPage.steps.uncheckYMinArrowCheckbox();
+            graphingPage.steps.verifyYAxisMinArrowNotExistGraphEditTab();
+            graphingPage.steps.verifyYAxisMaxArrowExistGraphEditTab();
+            graphingPage.steps.verifyYAxisMinArrowNotExistGraphSpecifyCorrectAnswerSection();
+            graphingPage.steps.verifyYAxisMaxArrowExistGraphSpecifyCorrectAnswerSection();
+        });
+
+        it('When the user has checked the \'Max arrow\' checkbox then the positive Y axis arrow should be displayed', () => {
+            graphingPage.steps.verifyYMaxArrowCheckboxChecked();
+            graphingPage.steps.verifyYAxisMinArrowNotExistGraphEditTab();
+            graphingPage.steps.verifyYAxisMaxArrowExistGraphEditTab();
+            graphingPage.steps.verifyYAxisMinArrowNotExistGraphSpecifyCorrectAnswerSection();
+            graphingPage.steps.verifyYAxisMaxArrowExistGraphSpecifyCorrectAnswerSection();
+        });
+
+        it('When the user unchecks the \'Max arrow\' checkbox then the positive Y axis arrow should not be displayed', () => {
+            graphingPage.steps.uncheckYMaxArrowCheckbox();
+            graphingPage.steps.verifyYAxisMinArrowNotExistGraphEditTab();
+            graphingPage.steps.verifyYAxisMaxArrowNotExistGraphEditTab();
+            graphingPage.steps.verifyYAxisMinArrowNotExistGraphSpecifyCorrectAnswerSection();
+            graphingPage.steps.verifyYAxisMaxArrowNotExistGraphSpecifyCorrectAnswerSection();
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/563533
+        it('When the user has checked the \'Display comma for thousand separator\' checkbox comma separators should be displayed', () => {
+            graphingPage.steps.verifyYDisplayCommaForThousandSeparatorCheckboxChecked();
+            graphingPage.steps.enterTextInYMaxInputField(10000);
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('9,999'), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('9998'), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('9,999'), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('9998'), 'notExist');
+        });
+
+        it('When the user unchecks the \'Display comma for thousand separator\' checkbox comma separators should not be displayed', () => {
+            graphingPage.steps.uncheckYDisplayCommaForThousandSeparatorCheckbox();
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('9,999'), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphEditTab('9998'), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('9,999'), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphSpecifyCorrectAnswerSection('9998'), 'visible');
+        });
+    });
+
+    describe('Grid options: Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            graphingPage.steps.navigateToCreateQuestion('Graphing');
+            cy.barsPreLoaderWait();
+            graphingPage.steps.switchToPreviewTab();
+        });
+
+        //Snap to grid
+        it('When snap to grid is unchecked user should be able to plot decimal points on the graph in preview tab', () => {
+            graphingPage.steps.plotPointsOnGraphPreviewTab([{ x: 2.5, xRange: 20, y: 1, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 2.5, xRange: 20, y: 1, yRange: 20 }]);
+        });
+
+        it('When the user checks snap to grid checkbox then the X and Y tolerance should become disabled and the user should not be able to plot decimal points', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.checkSnapToGridCheckbox();
+            graphingPage.steps.switchToPreviewTab();
+            graphingPage.steps.plotPointsOnGraphPreviewTab([{ x: 2.25, xRange: 20, y: 1, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }]);
+        });
+
+        //Origin option
+        it('When blank origin option is selected nothing should be displayed on the origin on the graph in preview tab', () => {
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('0,0'), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('O'), 'notExist');
+        });
+
+        it('When the user selects 0,0 then 0,0 should be displayed on the origin on the graph in preview tab', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.selectOriginOption('0,0');
+            graphingPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('0,0'), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('O'), 'notExist');
+        });
+
+        it('When the user selects Symbol(O) then O should be displayed on the origin on the graph in preview tab', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.selectOriginOption('Symbol(O)');
+            graphingPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('0,0'), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('O'), 'visible');
+        });
+
+        it('When the user selects \'Blank\' then nothing should be displayed on the origin on the graph in preview tab', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.selectOriginOption('Blank');
+            graphingPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('0,0'), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('O'), 'notExist');
+        });
+
+        //X axis
+        it('When X grid spacing is 1 then on the x axis user should be able to plot only on the grid lines', () => {
+            graphingPage.steps.plotPointsOnGraphPreviewTab([{ x: 1, xRange: 20, y: 1, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 1, xRange: 20, y: 1, yRange: 20 }]);
+        });
+
+        it('When user updates X grid spacing then on the x axis user should be able to plot only on the grid lines after a those many intervals', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.enterTextInXGridSpacingInputFieldValue(3);
+            graphingPage.steps.switchToPreviewTab();
+            graphingPage.steps.plotPointsOnGraphPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 3, xRange: 20, y: 1, yRange: 20 }]);
+        });
+
+        //Note: Update once https://redmine.zeuslearning.com/issues/564975 is resolved
+        it('When \'Tick interval\' for the x axis is 1 then the ticks should be displayed after a single interval on the x axis', () => {
+
+        });
+
+        it('When the user updates the \'Tick interval\' value then the ticks should be displayed after a those many intervals', () => {
+
+        });
+
+        it('When the user has checked the \'Display axis label\' checkbox then the X axis label should be displayed', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.verifyXDisplayAxisCheckboxChecked();
+            graphingPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(graphingPage.xAxisLabelGraphPreviewTab(), 'visible');
+            utilities.verifyInnerText(graphingPage.xAxisLabelGraphPreviewTab(), 'X axis label');
+        });
+
+        it('When the user unchecks the \'Display axis label\' checkbox then the X axis label should not be displayed', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.uncheckXDisplayAxisCheckbox();
+            graphingPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(graphingPage.xAxisLabelGraphPreviewTab(), 'hidden');
+        });
+
+        //Note: Update once https://redmine.zeuslearning.com/issues/564975 is resolved
+        it('When the user has checked the \'Remove ticks\' checkbox then the X axis ticks should not be displayed', () => {
+
+        });
+
+        it('When the user unchecks the \'Remove ticks\' checkbox then the X axis ticks should be displayed', () => {
+
+        });
+
+        it('When the user has checked the \'Show tick labels\' checkbox then the X axis ticks label should be displayed', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.verifyXShowTicksLabelCheckboxChecked();
+            graphingPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('2'), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('4'), 'visible');
+        });
+
+        it('When the user unchecks the \'Show tick labels\' checkbox then the X axis ticks label should not be displayed', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.uncheckXShowTicksLabelCheckbox();
+            graphingPage.steps.switchToPreviewTab();
+            utilities.verifyElementCount(graphingPage.textOnGraphPreviewTab('2'), 1);
+            utilities.verifyElementCount(graphingPage.textOnGraphPreviewTab('4'), 1);
+        });
+
+        it('When the user has checked the \'Min arrow\' checkbox then the negative X axis arrow should be displayed', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.verifyXMinArrowCheckboxChecked();
+            graphingPage.steps.switchToPreviewTab();
+            graphingPage.steps.verifyXAxisMinArrowExistGraphPreviewTab();
+            graphingPage.steps.verifyXAxisMaxArrowExistGraphPreviewTab();
+        });
+
+        it('When the user unchecks the \'Min arrow\' checkbox then the negative X axis arrow should not be displayed', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.uncheckXMinArrowCheckbox();
+            graphingPage.steps.switchToPreviewTab();
+            graphingPage.steps.verifyXAxisMinArrowNotExistGraphPreviewTab();
+            graphingPage.steps.verifyXAxisMaxArrowExistGraphPreviewTab();
+        });
+
+        it('When the user has checked the \'Max arrow\' checkbox then the positive X axis arrow should be displayed', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.verifyXMaxArrowCheckboxChecked();
+            graphingPage.steps.switchToPreviewTab();
+            graphingPage.steps.verifyXAxisMinArrowNotExistGraphPreviewTab();
+            graphingPage.steps.verifyXAxisMaxArrowExistGraphPreviewTab();
+        });
+
+        it('When the user unchecks the \'Max arrow\' checkbox then the positive X axis arrow should not be displayed', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.uncheckXMaxArrowCheckbox();
+            graphingPage.steps.switchToPreviewTab();
+            graphingPage.steps.verifyXAxisMinArrowNotExistGraphPreviewTab();
+            graphingPage.steps.verifyXAxisMaxArrowNotExistGraphPreviewTab();
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/563533
+        it('When the user has checked the \'Display comma for thousand separator\' checkbox comma separators should be displayed', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.verifyXDisplayCommaForThousandSeparatorCheckboxChecked();
+            graphingPage.steps.enterTextInXMaxInputField(10000);
+            graphingPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('9,999'), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('9998'), 'notExist');
+        });
+
+        it('When the user unchecks the \'Display comma for thousand separator\' checkbox comma separators should not be displayed', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.uncheckXDisplayCommaForThousandSeparatorCheckbox();
+            graphingPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('9,999'), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('9998'), 'visible');
+        });
+
+        //Y axis
+        it('When Y grid spacing is 1 then the user should be able to plot y axis grid lines after a single interval', () => {
+            graphingPage.steps.plotPointsOnGraphPreviewTab([{ x: 3, xRange: 20, y: 1, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 3, xRange: 20, y: 1, yRange: 20 }]);
+        });
+
+        it('When the user updates the Y grid spacing value then the user should be able to plot on y axis grid lines after those many intervals', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.enterTextInYGridSpacingInputFieldValue(4);
+            graphingPage.steps.switchToPreviewTab();
+            graphingPage.steps.plotPointsOnGraphPreviewTab([{ x: 3, xRange: 20, y: 3, yRange: 20 }]);
+            graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 3, xRange: 20, y: 4, yRange: 20 }]);
+        });
+
+        //Note: Update once https://redmine.zeuslearning.com/issues/564975 is resolved
+        it('When \'Tick interval\' for the y axis is 1 then the ticks should be displayed after a single interval on the y axis', () => {
+
+        });
+
+        it('When the user updates the \'Tick interval\' value then the ticks should be displayed after a those many intervals', () => {
+
+        });
+
+        it('When the user has checked the \'Display axis label\' checkbox then the Y axis label should be displayed', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.verifyYDisplayAxisCheckboxChecked();
+            graphingPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(graphingPage.yAxisLabelGraphPreviewTab(), 'visible');
+            utilities.verifyInnerText(graphingPage.yAxisLabelGraphPreviewTab(), 'Y axis label');
+        });
+
+        it('When the user unchecks the \'Display axis label\' checkbox then the Y axis label should not be displayed', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.uncheckYDisplayAxisCheckbox();
+            graphingPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(graphingPage.yAxisLabelGraphPreviewTab(), 'hidden');
+        });
+
+        //Note: Update once https://redmine.zeuslearning.com/issues/564975 is resolved
+        it('When the user has checked the \'Remove ticks\' checkbox then the Y axis ticks should not be displayed', () => {
+
+        });
+
+        it('When the user unchecks the \'Remove ticks\' checkbox then the Y axis ticks should be displayed', () => {
+
+        });
+
+        it('When the user has checked the \'Show tick labels\' checkbox then the Y axis ticks label should be displayed', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.verifyYShowTicksLabelCheckboxChecked();
+            graphingPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('2'), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('4'), 'visible');
+        });
+
+        it('When the user unchecks the \'Show tick labels\' checkbox then the Y axis ticks label should not be displayed', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.uncheckYShowTicksLabelCheckbox();
+            graphingPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab(), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab(), 'notExist');
+        });
+
+        it('When the user has checked the \'Min arrow\' checkbox then the negative Y axis arrow should be displayed', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.checkYShowTicksLabelCheckbox();
+            graphingPage.steps.verifyYMinArrowCheckboxChecked();
+            graphingPage.steps.switchToPreviewTab();
+            graphingPage.steps.verifyYAxisMinArrowExistGraphPreviewTab();
+            graphingPage.steps.verifyYAxisMaxArrowExistGraphPreviewTab();
+        });
+
+        it('When the user unchecks the \'Min arrow\' checkbox then the negative Y axis arrow should not be displayed', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.uncheckYMinArrowCheckbox();
+            graphingPage.steps.switchToPreviewTab();
+            graphingPage.steps.verifyYAxisMinArrowNotExistGraphPreviewTab();
+            graphingPage.steps.verifyYAxisMaxArrowExistGraphPreviewTab();
+        });
+
+        it('When the user has checked the \'Max arrow\' checkbox then the positive Y axis arrow should be displayed', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.verifyYMaxArrowCheckboxChecked();
+            graphingPage.steps.switchToPreviewTab();
+            graphingPage.steps.verifyYAxisMinArrowNotExistGraphPreviewTab();
+            graphingPage.steps.verifyYAxisMaxArrowExistGraphPreviewTab();
+        });
+
+        it('When the user unchecks the \'Max arrow\' checkbox then the positive Y axis arrow should not be displayed', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.uncheckYMaxArrowCheckbox();
+            graphingPage.steps.switchToPreviewTab();
+            graphingPage.steps.verifyYAxisMinArrowNotExistGraphPreviewTab();
+            graphingPage.steps.verifyYAxisMaxArrowNotExistGraphPreviewTab();
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/563533
+        it('When the user has checked the \'Display comma for thousand separator\' checkbox comma separators should be displayed', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.verifyYDisplayCommaForThousandSeparatorCheckboxChecked();
+            graphingPage.steps.enterTextInYMaxInputField(10000);
+            graphingPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('9,999'), 'visible');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('9998'), 'notExist');
+        });
+
+        it('When the user unchecks the \'Display comma for thousand separator\' checkbox comma separators should not be displayed', () => {
+            graphingPage.steps.switchToEditTab();
+            graphingPage.steps.uncheckYDisplayCommaForThousandSeparatorCheckbox();
+            graphingPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('9,999'), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.textOnGraphPreviewTab('9998'), 'visible');
+        });
+    });
+});