itemengine-cypress-automation 1.0.128 → 1.0.130

package/cypress/e2e/ILC/Graphing/checkAnswerFunctionalityForAllViews.smoke.js

@@ -0,0 +1,168 @@
+import { graphingPage, itemPreviewPage, studentViewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+var itemReferenceID = "";
+const checkAnswerViews = ['Question preview', 'Item preview', 'Student view'];
+const unselectedToolOption = ['Circle', 'Parabola', 'Sine', 'Polygon'];
+const views = utilities.getViews(checkAnswerViews);
+
+describe('Create item page - Graphing - Check answer functionality', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        //Note: Remove after https://redmine.zeuslearning.com/issues/549542 is fixed
+        const checkAnswer = (view) => {
+            switch (view) {
+                case 'Question preview':
+                case 'Item preview':
+                    graphingPage.steps.checkAnswer();
+                    break;
+                case 'Student view':
+                    studentViewPage.steps.checkAnswer();
+                    break;
+                default:
+                    throw new Error(`Unsupported page identifier: ${view}`);
+            }
+        };
+
+        //Failing due to https://redmine.zeuslearning.com/issues/563789
+        describe(`${view} - Check answer functionality`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        graphingPage.steps.navigateToCreateQuestion('Graphing');
+                        cy.barsPreLoaderWait();
+                        graphingPage.steps.addTextInQuestionInstructionsInputField('Plot the graph');
+                        graphingPage.steps.selectToolOptions(unselectedToolOption);
+                        graphingPage.steps.checkSnapToGridCheckbox();
+                        graphingPage.steps.checkPatternBackground();
+                        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.allotPoints(20);
+                        graphingPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+                        graphingPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                }
+            });
+
+            beforeEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        graphingPage.steps.verifyCorrectAnswerSectionNotExist();
+                        graphingPage.steps.resetQuestionPreview();
+                        break;
+                    case 'Item preview':
+                        graphingPage.steps.verifyCorrectAnswerSectionNotExist();
+                        itemPreviewPage.steps.resetQuestionPreview();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                }
+            });
+
+            if (view === 'Question preview') {
+                after(() => {
+                    graphingPage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it('When the user selects \'Grading\' view without attempting the question, the correct answer should be displayed in the correct answer section graph', () => {
+                checkAnswer(view);
+                //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.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', () => {
+                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 }]);
+                checkAnswer(view);
+
+                //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', () => {
+                graphingPage.steps.selectGraphToolOptionPreviewTab('Vector');
+                graphingPage.steps.plotPointsOnGraphPreviewTab([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
+                checkAnswer(view);
+
+                //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', () => {
+                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 }]);
+                checkAnswer(view);
+
+                //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', () => {
+                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 }]);
+                checkAnswer(view);
+
+                //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/gradingViewAndCorrectAnswerView.smoke.js

@@ -0,0 +1,203 @@
+import { graphingPage, correctAnswerViewPage, itemPreviewPage, studentViewPage } from "../../../pages";
+import { gradingViewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+let gradingAndCorrectAnsView = ['Grading view', 'Correct answer view']
+const views = utilities.getViews(gradingAndCorrectAnsView);
+var itemReferenceID = "";
+const css = Cypress.env('css');
+
+const unselectedToolOption = ['Circle', 'Parabola', 'Sine', 'Polygon'];
+
+describe('Create item page - Graphing: Grading view, Correct answer view contents', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    if (views.includes('Grading view')) {
+        describe('Grading view contents', { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                graphingPage.steps.navigateToCreateQuestion('Graphing');
+                cy.barsPreLoaderWait();
+                graphingPage.steps.addTextInQuestionInstructionsInputField('Plot the graph');
+                graphingPage.steps.allotPoints(10);
+                graphingPage.steps.selectToolOptions(unselectedToolOption);
+                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: -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.verifyPointsPlottedOnSpecifyCorrectAnswerSection([{ 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.clickOnSaveQuestionButton();
+                utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                //Global variable issue, not working inside before
+                itemPreviewPage.referenceID()
+                    .invoke('text')
+                    .then(($refID) => {
+                        itemReferenceID = $refID;
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        graphingPage.steps.selectGraphToolOptionPreviewTab('Sine');
+                        graphingPage.steps.plotPointsOnGraphPreviewTab([{ x: 0, xRange: 20, y: 7, yRange: 20 }, { x: 1, xRange: 20, y: 8, yRange: 20 }]);
+                        utilities.verifyElementCount(graphingPage.graphSineAndParabolaPreviewTab(), 1);
+                        studentViewPage.steps.submitResponse();
+                        studentViewPage.steps.clickOnGoToGradingViewButton();
+                    });
+            });
+
+            it('Question instructions should be visible', () => {
+                utilities.verifyInnerText(graphingPage.questionInstructionsText(), 'Plot the graph');
+                utilities.verifyElementVisibilityState(graphingPage.questionInstructionsText(), 'visible');
+            });
+
+            it('Tool and control options should not be displayed', () => {
+                utilities.verifyElementVisibilityState(graphingPage.graphToolOptionPreviewTab(), 'notExist');
+                utilities.verifyElementVisibilityState(graphingPage.graphControlOptionPreviewTab(), 'notExist');
+            });
+
+            it('The graph plotted by the author in the edit tab should be displayed in the grading view', () => {
+                utilities.verifyElementVisibilityState(graphingPage.gradingViewQuestionSineWave(), 'visible');
+                graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 0, xRange: 20, y: 7, yRange: 20 }, { x: 1, xRange: 20, y: 8, yRange: 20 }]);
+                utilities.verifyElementVisibilityState(graphingPage.gradingViewQuestionCircle(), 'visible');
+                graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
+                utilities.verifyElementVisibilityState(graphingPage.gradingViewQuestionLine(), 'visible');
+                graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
+            });
+
+            it('Correct answer label should be displayed', () => {
+                utilities.verifyInnerText(graphingPage.correctAnswerLabel(), 'Correct answer');
+                utilities.verifyElementVisibilityState(graphingPage.correctAnswerLabel(), 'visible');
+            });
+
+            it('Correct answer along with graph plotted by the author in the edit tab should be displayed in the correct answer section', () => {
+                utilities.verifyElementVisibilityState(graphingPage.graphPolygonCorrectAnswerSection(), 'visible');
+                graphingPage.steps.verifyPointsPlottedOnCorrectAnswerSection([{ 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 }]);
+                utilities.verifyElementVisibilityState(graphingPage.graphCircleCorrectAnswerSection(), 'visible');
+                graphingPage.steps.verifyPointsPlottedOnCorrectAnswerSection([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
+                utilities.verifyElementVisibilityState(graphingPage.graphLineCorrectAnswerSection(), 'visible');
+                graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
+                utilities.verifyElementVisibilityState(graphingPage.graphSineWaveCorrectAnswerSection(), 'notExist');
+            });
+
+            it('Points and the total score should be displayed', () => {
+                gradingViewPage.steps.verifyGradingViewScore(0, 10);
+            });
+
+            it('CSS of grading view', { tags: 'css' }, () => {
+                utilities.verifyCSS(graphingPage.gradingViewQuestionSineWave(), {
+                    'fill': css.color.incorrectAnswer,
+                    'fill-opacity': '0',
+                    'stroke-width': '1px'
+                });
+                utilities.verifyCSS(graphingPage.gradingViewQuestionCircle(), {
+                    'fill': css.color.secondaryBtnDisabled,
+                    'fill-opacity': '0',
+                    'stroke-width': '2px'
+                });
+                utilities.verifyCSS(graphingPage.gradingViewQuestionLine(), {
+                    'fill': css.color.secondaryBtnDisabled,
+                    'fill-opacity': '1',
+                    'stroke-width': '2px'
+                });
+                utilities.verifyCSS(graphingPage.graphPolygonCorrectAnswerSection(), {
+                    'fill': css.color.correctAnswer,
+                    'fill-opacity': '0.3',
+                    'stroke-width': '1px'
+                });
+                utilities.verifyCSS(graphingPage.graphCircleCorrectAnswerSection(), {
+                    'fill': css.color.secondaryBtnDisabled,
+                    'fill-opacity': '0',
+                    'stroke-width': '2px'
+                });
+                utilities.verifyCSS(graphingPage.graphLineCorrectAnswerSection(), {
+                    'fill': css.color.secondaryBtnDisabled,
+                    'fill-opacity': '1',
+                    'stroke-width': '2px'
+                });
+            });
+
+            it('Accessibility of grading view', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(graphingPage.graphPreviewTab());
+            });
+        });
+    }
+
+    if (views.includes('Correct answer view')) {
+        describe('Correct answer view contents', { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                graphingPage.steps.navigateToCreateQuestion('Graphing');
+                graphingPage.steps.addTextInQuestionInstructionsInputField('Plot the graph');
+                graphingPage.steps.allotPoints(10);
+                graphingPage.steps.selectToolOptions(unselectedToolOption);
+                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.selectGraphToolOptionEditTab('Circle');
+                graphingPage.steps.plotPointsOnGraphEditTab([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
+                graphingPage.steps.selectGraphToolOptionSpecifyCorrectAnswer('Polygon');
+                graphingPage.steps.plotPointsOnGraphSpecifyCorrectAnswerSection([{ 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.clickOnSaveQuestionButton();
+                utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                //Global variable issue, not working inside before
+                itemPreviewPage.referenceID()
+                    .invoke('text')
+                    .then(($refID) => {
+                        itemReferenceID = $refID
+                        cy.visit(`/item-engine/demo/render-item/correct-answer-view/${utilities.base64Encoding(itemReferenceID)}`);
+                    });
+            });
+
+            it('Question instructions should be visible', () => {
+                utilities.verifyInnerText(graphingPage.questionInstructionsText(), 'Plot the graph');
+                utilities.verifyElementVisibilityState(graphingPage.questionInstructionsText(), 'visible');
+            });
+
+            it('Tool and control options should not be displayed', () => {
+                utilities.verifyElementVisibilityState(graphingPage.graphToolOptionPreviewTab(), 'notExist');
+                utilities.verifyElementVisibilityState(graphingPage.graphControlOptionPreviewTab(), 'notExist');
+            });
+
+            it('The graph plotted by the author along with the correct answer should be displayed in the correct answer view', () => {
+                utilities.verifyElementVisibilityState(graphingPage.graphLine(), 'visible');
+                graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }])
+                utilities.verifyElementVisibilityState(graphingPage.graphPolygon(), 'visible');
+                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 }])
+                utilities.verifyElementVisibilityState(graphingPage.graphCircle(), 'visible');
+                graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }])
+            });
+
+            it('The points alloted to the question should be displayed', () => {
+                correctAnswerViewPage.steps.verifyAvailablePoints(10);
+            });
+
+            it('CSS of correct answer section', { tags: 'css' }, () => {
+                utilities.verifyCSS(graphingPage.graphPolygon(), {
+                    'fill': css.color.correctAnswer,
+                    'fill-opacity': '0.3',
+                    'stroke-width': '1px'
+                });
+                utilities.verifyCSS(graphingPage.graphCircle(), {
+                    'fill': css.color.secondaryBtnDisabled,
+                    'fill-opacity': '0',
+                    'stroke-width': '2px'
+                });
+                utilities.verifyCSS(graphingPage.graphLine(), {
+                    'fill': css.color.secondaryBtnDisabled,
+                    'fill-opacity': '1',
+                    'stroke-width': '2px'
+                });
+            });
+
+            it('Accessibility of correct answer section', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(graphingPage.graphPreviewTab());
+            });
+        });
+    }
+});

package/cypress/e2e/ILC/Graphing/previewContentsForAllViews.smoke.js

@@ -0,0 +1,222 @@
+import { graphingPage, itemPreviewPage, studentViewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const previewContentViews = ['Question preview', 'Item view', 'Item preview', 'Student view'];
+const views = utilities.getViews(previewContentViews);
+var itemReferenceID = "";
+const css = Cypress.env('css');
+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('Create item page - Graphing - Preview contents in all views', () => {
+    before(() => {
+        cy.loginAs('admin');
+        graphingPage.steps.navigateToCreateQuestion('Graphing');
+    });
+
+    views.forEach((view) => {
+        describe(`Preview tab contents - ${view}`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        graphingPage.steps.navigateToCreateQuestion('Graphing');
+                        cy.barsPreLoaderWait();
+                        graphingPage.steps.addTextInQuestionInstructionsInputField('Plot the graph');
+                        graphingPage.steps.allotPoints(10);
+                        graphingPage.steps.selectToolOptions(unselectedToolOption);
+                        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: -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.verifyPointsPlottedOnSpecifyCorrectAnswerSection([{ 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.switchToPreviewTab();
+                        break;
+                    case 'Item view':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        graphingPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    default:
+                        throw new Error('Invalid view');
+                }
+            });
+
+            after(() => {
+                if (view === 'Question preview') {
+                    graphingPage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                }
+            });
+
+            it('Question instructions should be visible', () => {
+                utilities.verifyInnerText(graphingPage.questionInstructionsText(), 'Plot the graph');
+                utilities.verifyElementVisibilityState(graphingPage.questionInstructionsText(), 'visible');
+            });
+
+            it('The toolbar options should be displayed in the preview tab and when the user hovers over the tool options then tooltips should be displayed', () => {
+                toolOptions.forEach((toolOption) => {
+                    utilities.verifyElementVisibilityState(graphingPage.graphToolOptionPreviewTab(toolOption), 'exist');
+                    graphingPage.graphToolOptionPreviewTab(toolOption)
+                        .verifyTooltip(toolOption);
+                });
+            });
+
+            it('The plotted graph in the edit tab should be displayed in the 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 }]);
+            });
+
+            it('By default, the point option should be in selected state and all other options should be de-selected', () => {
+                graphingPage.steps.verifyToolOptionSelectedPreviewTab('Point');
+                graphingPage.steps.verifyToolOptionNotSelectedPreviewTab(toolOptions.splice(1, toolOptions.length));
+            });
+
+            it('By default, the move control should be in enabled state and all other controls should be disabled', () => {
+                utilities.verifyElementNotDisabled(graphingPage.graphControlOptionPreviewTab('Move'));
+                controlOptions.splice(1, controlOptions.length).forEach((controlOption) => {
+                    utilities.verifyElementDisabled(graphingPage.graphControlOptionPreviewTab(controlOption));
+                });
+            });
+
+            it('User should be able to plot points using the \'Point\' tool options', () => {
+                graphingPage.steps.plotPointsOnGraphPreviewTab([{ x: -4, xRange: 20, y: -4, yRange: 20 }]);
+                graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: -4, xRange: 20, y: -4, yRange: 20 }]);
+            });
+
+            it('By default, the control options should be in displayed and when the user hovers over the tool options then tooltips should be displayed', () => {
+                controlOptions.forEach((controlOption) => {
+                    utilities.verifyElementVisibilityState(graphingPage.graphControlOptionPreviewTab(controlOption), 'exist');
+                    graphingPage.graphControlOptionPreviewTab(controlOption)
+                        .verifyTooltip(controlOption);
+                });
+            });
+
+            it('User should be able to draw a line using the \'Line\' tool option', () => {
+                graphingPage.steps.selectGraphToolOptionPreviewTab('Line');
+                graphingPage.steps.plotPointsOnGraphPreviewTab([{ x: -9, xRange: 20, y: -3, yRange: 20 }, { x: -9, xRange: 20, y: 3, yRange: 20 }]);
+                graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: -9, xRange: 20, y: -3, yRange: 20 }, { x: -9, xRange: 20, y: 3, yRange: 20 }]);
+                utilities.verifyElementCount(graphingPage.graphLinePreviewTab(), 1);
+            });
+
+            it('User should be able to add a label using the \'Label\' tool option', () => {
+                graphingPage.steps.selectGraphToolOptionPreviewTab('Label');
+                graphingPage.steps.plotPointsOnGraphPreviewTab([{ x: -9, xRange: 20, y: -3, yRange: 20 }]);
+                graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: -9, xRange: 20, y: -3, yRange: 20 }]);
+                graphingPage.steps.enterTextInGraphLabelInputField('This is a line');
+            });
+
+            it('User should be able to draw a ray using the \'Ray\' tool option', () => {
+                graphingPage.steps.selectGraphToolOptionPreviewTab('Ray');
+                graphingPage.steps.plotPointsOnGraphPreviewTab([{ x: -8, xRange: 20, y: 1, yRange: 20 }, { x: -7, xRange: 20, y: 2, yRange: 20 }]);
+                graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: -8, xRange: 20, y: 1, yRange: 20 }, { x: -7, xRange: 20, y: 2, yRange: 20 }]);
+                utilities.verifyElementCount(graphingPage.graphLineSegmentsPreviewTab(), 2);
+            });
+
+            it('User should be able to draw a segment using the \'Segment\' tool option', () => {
+                graphingPage.steps.selectGraphToolOptionPreviewTab('Segment');
+                graphingPage.steps.plotPointsOnGraphPreviewTab([{ x: 7, xRange: 20, y: -2, yRange: 20 }, { x: 9, xRange: 20, y: -4, yRange: 20 }]);
+                graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 7, xRange: 20, y: -2, yRange: 20 }, { x: 9, xRange: 20, y: -4, yRange: 20 }]);
+                utilities.verifyElementCount(graphingPage.graphLineSegmentsPreviewTab(), 3);
+            });
+
+            it('User should be able to draw a vector using the \'Vector\' tool option', () => {
+                graphingPage.steps.selectGraphToolOptionPreviewTab('Vector');
+                graphingPage.steps.plotPointsOnGraphPreviewTab([{ x: 9, xRange: 20, y: 0, yRange: 20 }, { x: 9, xRange: 20, y: 2, yRange: 20 }]);
+                graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 9, xRange: 20, y: 0, yRange: 20 }, { x: 9, xRange: 20, y: 2, yRange: 20 }]);
+                utilities.verifyElementCount(graphingPage.graphLineSegmentsPreviewTab(), 4);
+            });
+
+            it('User should be able to draw a circle using the \'Circle\' tool option', () => {
+                graphingPage.steps.selectGraphToolOptionPreviewTab('Circle');
+                graphingPage.steps.plotPointsOnGraphPreviewTab([{ x: 7, xRange: 20, y: 7, yRange: 20 }, { x: 7, xRange: 20, y: 8, yRange: 20 }]);
+                graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 7, xRange: 20, y: 7, yRange: 20 }, { x: 7, xRange: 20, y: 8, yRange: 20 }]);
+                utilities.verifyElementCount(graphingPage.graphCirclePreviewTab(), 2);
+            });
+
+            it('User should be able to draw a parabola using the \'Parabola\' tool option', () => {
+                graphingPage.steps.selectGraphToolOptionPreviewTab('Parabola');
+                graphingPage.steps.plotPointsOnGraphPreviewTab([{ x: 5, xRange: 20, y: -8, yRange: 20 }, { x: 4, xRange: 20, y: -9, yRange: 20 }]);
+                graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 5, xRange: 20, y: -8, yRange: 20 }, { x: 4, xRange: 20, y: -9, yRange: 20 }]);
+                utilities.verifyElementCount(graphingPage.graphSineAndParabolaPreviewTab(), 1);
+            });
+
+            it('User should be able to draw a sine wave using the \'Sine\' tool option', () => {
+                graphingPage.steps.selectGraphToolOptionPreviewTab('Sine');
+                graphingPage.steps.plotPointsOnGraphPreviewTab([{ x: 0, xRange: 20, y: 8, yRange: 20 }, { x: 1, xRange: 20, y: 9, yRange: 20 }]);
+                graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 0, xRange: 20, y: 8, yRange: 20 }, { x: 1, xRange: 20, y: 9, yRange: 20 }]);
+                utilities.verifyElementCount(graphingPage.graphSineAndParabolaPreviewTab(), 2);
+            });
+
+            it('User should be able to draw a polygon using the \'Polygon\' tool option', () => {
+                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.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 }]);
+                utilities.verifyElementCount(graphingPage.graphPolygonPreviewTab(), 1);
+            });
+
+            it('When the user clicks on the \'Undo\' control option then the latest action should be reversed', () => {
+                graphingPage.steps.selectGraphControlOptionPreviewTab('Undo');
+                utilities.verifyElementVisibilityState(graphingPage.graphPolygonPreviewTab(), 'notExist');
+            });
+
+            it('When the user clicks on the \'Redo\' control option then the latest action should be displayed again and the button should be disabled again', () => {
+                graphingPage.steps.selectGraphControlOptionPreviewTab('Redo');
+                utilities.verifyElementVisibilityState(graphingPage.graphPolygonPreviewTab(), 'visible');
+            });
+
+            it('When the user clicks on the \'Reset\' control option then all the actions on the preview tab should be reset', () => {
+                graphingPage.steps.selectGraphControlOptionPreviewTab('Reset');
+                graphingPage.steps.confirmReset();
+                utilities.verifyElementVisibilityState(graphingPage.graphPolygonPreviewTab(), 'notExist');
+                utilities.verifyElementVisibilityState(graphingPage.graphSineAndParabolaPreviewTab(), 'notExist');
+                utilities.verifyElementCount(graphingPage.graphCirclePreviewTab(), 1);
+                utilities.verifyElementCount(graphingPage.graphLinePreviewTab(), 1);
+                utilities.verifyElementDisabled(graphingPage.graphControlOptionPreviewTab('Undo'));
+                utilities.verifyElementDisabled(graphingPage.graphControlOptionPreviewTab('Redo'));
+                utilities.verifyElementDisabled(graphingPage.graphControlOptionPreviewTab('Reset'));
+            });
+
+            it('CSS of preview content', { tags: 'css' }, () => {
+                utilities.verifyCSS(graphingPage.graphLinePreviewTab(), {
+                    'fill': css.color.secondaryBtnDisabled,
+                    'fill-opacity': '1',
+                    'stroke-width': '2px'
+                });
+                utilities.verifyCSS(graphingPage.graphCirclePreviewTab(), {
+                    'fill': css.color.secondaryBtnDisabled,
+                    'fill-opacity': '0',
+                    'stroke-width': '2px'
+                });
+                utilities.verifyCSS(graphingPage.graphToolOptionPreviewTab('Point'), {
+                    'color': css.color.primaryBtn,
+                    'background-color': css.color.secondaryBtn,
+                });
+                utilities.verifyCSS(graphingPage.graphToolOptionPreviewTab('Line').find('path').last(), {
+                    'color': css.color.UnselectedToggleButton,
+                    'fill': css.color.activeButtons
+                });
+            });
+
+            it('Accessibility of preview content', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(graphingPage.graphPreviewTab());
+            });
+        });
+    });
+});