itemengine-cypress-automation 1.0.85 → 1.0.87

package/cypress/e2e/ILC/EssayResponse/editTabBasicSections.js

@@ -0,0 +1,389 @@
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { essayResponsePage } from "../../../pages";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create question page - Essay Response: Question Instructions, Set limit', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question Instructions input field - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Essay response question type');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+        });
+
+        essayResponsePage.tests.verifyQuestionInstructionsInputFieldEditTab();
+    });
+
+    describe('Question Instructions input field - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Essay response question type');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+        });
+
+        essayResponsePage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
+    });
+
+    describe('Essay response: Set limit section - Edit tab contents', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Set limit\' label should be displayed', () => {
+            utilities.verifyInnerText(essayResponsePage.setLimitLabel(), 'Set limit');
+            utilities.verifyElementVisibilityState(essayResponsePage.setLimitLabel(), 'visible');
+        });
+
+        it('\'Word\', \'Character\' and \'None\' labels and radio buttons should be displayed and by default \'Word\' should be selected', () => {
+            utilities.verifyInnerText(essayResponsePage.wordLabel(), 'Word');
+            utilities.verifyElementVisibilityState(essayResponsePage.wordLabel(), 'visible');
+            essayResponsePage.steps.verifyWordRadioButtonChecked();
+            utilities.verifyInnerText(essayResponsePage.characterLabel(), 'Character');
+            utilities.verifyElementVisibilityState(essayResponsePage.characterLabel(), 'visible');
+            essayResponsePage.steps.verifyCharacterRadioButtonUnchecked();
+            utilities.verifyInnerText(essayResponsePage.noneLabel(), 'None');
+            utilities.verifyElementVisibilityState(essayResponsePage.noneLabel(), 'visible');
+            essayResponsePage.steps.verifyNoneRadioButtonUnchecked();
+        });
+
+        it('\'Minimum word limit\' and \'Maximum word limit\' labels should be displayed', () => {
+            utilities.verifyInnerText(essayResponsePage.minimumLimitLabel(), 'Minimum word limit');
+            utilities.verifyElementVisibilityState(essayResponsePage.minimumLimitLabel(), 'visible');
+            utilities.verifyInnerText(essayResponsePage.maximumLimitLabel(), 'Maximum word limit');
+            utilities.verifyElementVisibilityState(essayResponsePage.maximumLimitLabel(), 'visible');
+        });
+
+        it('\'Minimum word limit\' and \'Maximum word limit\' input fields should be displayed and have 0 and 1000 value by default', () => {
+            utilities.verifyElementVisibilityState(essayResponsePage.minimumLimitInputField(), 'visible');
+            essayResponsePage.steps.verifyMinimumLimitInputField(0)
+            utilities.verifyElementVisibilityState(essayResponsePage.maximumLimitInputField(), 'visible');
+            essayResponsePage.steps.verifyMaximumLimitInputField(1000)
+        });
+
+        it('User should be able to update values in both the input fields', () => {
+            essayResponsePage.steps.setMinimumLimit(100);
+            essayResponsePage.steps.setMaximumLimit(500);
+        });
+
+        it('When the user clears the minimum word limit input field and focuses out of it, then error message \'Error: Minimum word limit is required\' should be displayed below the input field', () => {
+            essayResponsePage.steps.clearAndFocusOutOfMinimumLimitInputField();
+            utilities.verifyInnerText(essayResponsePage.errorMessage(), 'Error: Minimum word limit is required.');
+            utilities.verifyElementVisibilityState(essayResponsePage.errorMessage(), 'visible');
+        });
+
+        essayResponsePage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When the user enters value in minimum word limit input field then the error message should disappear', () => {
+            essayResponsePage.steps.setMinimumLimit(0);
+            utilities.verifyElementVisibilityState(essayResponsePage.errorMessage(), 'notExist');
+        });
+
+        it('When the user clears the maximum word limit input field and focuses out of it, then error message \'Error: Maximum word limit is required.\' should be displayed below the input field', () => {
+            essayResponsePage.steps.clearAndFocusOutOfMaximumLimitInputField();
+            utilities.verifyInnerText(essayResponsePage.errorMessage(), 'Error: Maximum word limit is required.');
+            utilities.verifyElementVisibilityState(essayResponsePage.errorMessage(), 'visible');
+        });
+
+        it('When the user enters value in maximum word limit input field then the error message should disappear', () => {
+            essayResponsePage.steps.setMaximumLimit(500);
+            utilities.verifyElementVisibilityState(essayResponsePage.errorMessage(), 'notExist');
+        });
+
+        it('When the user sets minimum limit input field value greater than maximum limit input field value then error message \'Error: Minimum limit must be less than or equal to maximum limit.\' and \'Error: Maximum limit must be greater than or equal to minimum limit.\'should be displayed below the minimum and maximum input field respectively', () => {
+            essayResponsePage.steps.setMinimumLimit(700);
+            essayResponsePage.steps.verifyMaximumLimitErrorMessage();
+            essayResponsePage.steps.verifyMinimumLimitErrorMessage();
+        });
+
+        essayResponsePage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When the user sets minimum limit input field value less than or equal to maximum limit input field value then error message should disappear', () => {
+            essayResponsePage.steps.setMinimumLimit(500);
+            utilities.verifyElementVisibilityState(essayResponsePage.errorMessage(), 'notExist');
+        });
+
+        it('When the user sets maximum limit input field value less than minimum limit input field value then error message \'Error: Minimum limit must be less than or equal to maximum limit.\' and \'Error: Maximum limit must be greater than or equal to minimum limit.\'should be displayed below the minimum and maximum input field respectively', () => {
+            essayResponsePage.steps.setMaximumLimit(400);
+            essayResponsePage.steps.verifyMaximumLimitErrorMessage();
+            essayResponsePage.steps.verifyMinimumLimitErrorMessage();
+        });
+
+        it('When the user sets maximum limit input field value greater than or equal to minimum limit input field value then error message should disappear', () => {
+            essayResponsePage.steps.setMaximumLimit(800);
+            utilities.verifyElementVisibilityState(essayResponsePage.errorMessage(), 'notExist');
+        });
+
+        it('\'Always show maximum limit\' and \'Always show minimum limit\' labels and checkbox should be displayed and by default \'Always show maximum limit\' should be checked', () => {
+            utilities.verifyInnerText(essayResponsePage.alwaysShowMaxLimitLabel(), 'Always show maximum limit');
+            utilities.verifyElementVisibilityState(essayResponsePage.alwaysShowMaxLimitLabel(), 'visible');
+            utilities.verifyInnerText(essayResponsePage.alwaysShowMinLimitLabel(), 'Always show minimum limit');
+            utilities.verifyElementVisibilityState(essayResponsePage.alwaysShowMinLimitLabel(), 'visible');
+            essayResponsePage.steps.verifyAlwaysShowMaximumLimitCheckboxIsChecked();
+        });
+
+        it('When the user selects \'Character\' radio button then labels should change to \'Minimum character limit\' and \'Maximum character limit\'', () => {
+            essayResponsePage.steps.checkCharacterRadioButton();
+            utilities.verifyInnerText(essayResponsePage.minimumLimitLabel(), 'Minimum character limit');
+            utilities.verifyInnerText(essayResponsePage.maximumLimitLabel(), 'Maximum character limit');
+        });
+
+        it('\'Minimum character limit\' and \'Maximum character limit\' input fields should be updated to 0 and 20000 by default', () => {
+            essayResponsePage.steps.verifyMinimumLimitInputField(0)
+            essayResponsePage.steps.verifyMaximumLimitInputField(20000)
+        });
+
+        it('User should be able to update values in both the input fields', () => {
+            essayResponsePage.steps.setMinimumLimit(750);
+            essayResponsePage.steps.setMaximumLimit(12000);
+        });
+
+        it('When the user clears the minimum character limit input field and focuses out of it, then error message \'Error: Minimum character limit is required\' should be displayed below the input field', () => {
+            essayResponsePage.steps.clearAndFocusOutOfMinimumLimitInputField();
+            utilities.verifyInnerText(essayResponsePage.errorMessage(), 'Error: Minimum character limit is required.');
+            utilities.verifyElementVisibilityState(essayResponsePage.errorMessage(), 'visible');
+        });
+
+        essayResponsePage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When the user enters value in minimum character limit input field then the error message should disappear', () => {
+            essayResponsePage.steps.setMinimumLimit(0);
+            utilities.verifyElementVisibilityState(essayResponsePage.errorMessage(), 'notExist');
+        });
+
+        it('When the user clears the maximum character limit input field and focuses out of it, then error message \'Error: Maximum character limit is required.\' should be displayed below the input field', () => {
+            essayResponsePage.steps.clearAndFocusOutOfMaximumLimitInputField();
+            utilities.verifyInnerText(essayResponsePage.errorMessage(), 'Error: Maximum character limit is required.');
+            utilities.verifyElementVisibilityState(essayResponsePage.errorMessage(), 'visible');
+        });
+
+        it('When the user enters value in maximum character limit input field then the error message should disappear', () => {
+            essayResponsePage.steps.setMaximumLimit(500);
+            utilities.verifyElementVisibilityState(essayResponsePage.errorMessage(), 'notExist');
+        });
+
+        it('CSS of \'Set word limit\' sections', { tags: 'css' }, () => {
+            utilities.verifyCSS(essayResponsePage.setLimitLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(essayResponsePage.wordLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(essayResponsePage.characterLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(essayResponsePage.noneLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(essayResponsePage.minimumLimitLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(essayResponsePage.minimumLimitLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(essayResponsePage.minimumLimitInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(essayResponsePage.maximumLimitInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(essayResponsePage.alwaysShowMaxLimitLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(essayResponsePage.alwaysShowMinLimitLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(essayResponsePage.characterRadioButton().parent().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Set limit\' section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponsePage.setLimitLabel().parents('.essay-response-set-limit-wrapper'));
+        });
+
+        it('When the user selects \'None\' radio button then the maximum and minimum limit labels and input field and always show maximum/minimum limits labels and checkbox should not be displayed', () => {
+            essayResponsePage.steps.checkNoneRadioButton();
+            utilities.verifyElementVisibilityState(essayResponsePage.minMaxLabelAndInputFieldWrapper(), 'notExist');
+            utilities.verifyElementVisibilityState(essayResponsePage.alwaysShowMaxLimitLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(essayResponsePage.alwaysShowMaxLimitLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(essayResponsePage.alwaysShowMaxLimitCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(essayResponsePage.alwaysShowMaxLimitCheckbox(), 'notExist');
+        });
+    });
+
+    describe('Essay response: Set limit section : Word - Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('When user switched to the preview tab then \'Maximum 1000 words\' should be displayed in the preview tab', () => {
+            utilities.verifyElementVisibilityState(essayResponsePage.responseFieldWordCount(), 'visible');
+            essayResponsePage.steps.verifyWordLimitInPreviewTab(1000);
+        });
+
+        it('When the user updates the maximum word limit input field value then updated maximum word limit value should be displayed in the preview tab', () => {
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.setMaximumLimit(5);
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.verifyWordLimitInPreviewTab(5);
+        });
+
+        it('When the user updates the minimum word limit input field value and checks the \'Always show minimum limit\' checkbox then \'Minimum value - Maximum value words required\' should be displayed in the preview tab', () => {
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.setMinimumLimit(3);
+            essayResponsePage.steps.checkAlwaysShowMinimumLimitCheckbox()
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.verifyWordLimitInPreviewTab(5, 3);
+        });
+
+        it('User should able to enter text in the response field', () => {
+            essayResponsePage.steps.enterTextInResponseField('Lorem Ipsum');
+        });
+
+        it('When the user reaches the word limit, then the warning message \'Maximum 5 words have been entered\' should be displayed', () => {
+            essayResponsePage.steps.enterInputInResponseField(' dolor sit amet');
+            essayResponsePage.steps.verifyResponseFieldInput('Lorem Ipsum dolor sit amet')
+            essayResponsePage.steps.verifyLimitReachedWarningMessage('Maximum 5 words have been entered.')
+        });
+
+        it('CSS of \'word limit reached\' warning message and container', { tags: 'css' }, () => {
+            utilities.verifyCSS(essayResponsePage.limitReachedWarningMessage(), {
+                'color': css.color.warningMessage,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(essayResponsePage.limitReachedWarningMessageContainer().find('svg'), {
+                'color': css.color.warningMessage,
+            });
+            utilities.verifyCSS(essayResponsePage.limitReachedWarningMessageContainer(), {
+                'border': `1px solid ${css.color.warningContainerBorder}`
+            });
+            utilities.verifyCSS(essayResponsePage.limitReachedWarningMessageContainer().find('.error-icon-wrapper'), {
+                'background-color': css.color.warningContainerBackground
+            });
+        });
+
+        it('Accessibility of \'word limit reached\' warning container', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponsePage.limitReachedWarningMessageContainer());
+        });
+
+        it('When the user removes/deletes some words, the warning message should disappear', () => {
+            essayResponsePage.steps.enterInputInResponseField('{backspace}{backspace}{backspace}{backspace}{backspace}');
+            essayResponsePage.steps.verifyResponseFieldInput('Lorem Ipsum dolor sit');
+            essayResponsePage.steps.verifyLimitReachedWarningMessageNotExist();
+        });
+
+        it('When the user enters the word less than the minimum word limit value set by the user and focus out of response field, then the warning message \'Minimum 3 words are required\' should be displayed', () => {
+            cy.log('Pre-step: clearing the response field');
+            essayResponsePage.steps.clearResponseField();
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.focusOutOfResponseField();
+            essayResponsePage.steps.verifyLimitReachedWarningMessage('Minimum 3 words are required.');
+        });
+
+        it('When the user enters the word greater than the minimum word limit value set by the user, then the warning message should disappear', () => {
+            essayResponsePage.steps.enterInputInResponseField(' dolor sit');
+            essayResponsePage.steps.verifyResponseFieldInput('Lorem Ipsum dolor sit');
+            essayResponsePage.steps.verifyLimitReachedWarningMessageNotExist();
+        });
+    });
+
+    describe('Essay response: Set limit section: Character, None: Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When the user selects \'Character\' radio button then \'Maximum 20000 characters\' should be displayed in the preview tab', () => {
+            essayResponsePage.steps.checkCharacterRadioButton();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.verifyCharacterLimitInPreviewTab(20000);
+        });
+
+        it('When the user updates the maximum character limit input field value then updated maximum character limit value should be displayed in the preview tab', () => {
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.setMaximumLimit(10);
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.verifyCharacterLimitInPreviewTab(10);
+        });
+
+        it('When the user updates the minimum character limit input field value and checks the \'Always show minimum limit\' checkbox then \'Minimum value - Maximum value characters required\' should be displayed in the preview tab', () => {
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.setMinimumLimit(6);
+            essayResponsePage.steps.checkAlwaysShowMinimumLimitCheckbox()
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.verifyCharacterLimitInPreviewTab(10, 6);
+        });
+
+        it('User should able to enter characters in the response field', () => {
+            essayResponsePage.steps.enterTextInResponseField('Lorem');
+        });
+
+        it('When the user reaches the character limit, then the warning message \'Maximum 10 characters have been entered\' should be displayed', () => {
+            essayResponsePage.steps.enterInputInResponseField('dolar');
+            essayResponsePage.steps.verifyResponseFieldInput('Loremdolar')
+            essayResponsePage.steps.verifyLimitReachedWarningMessage('Maximum 10 characters have been entered.')
+        });
+
+        it('When the user removes/deletes some characters, the warning message should disappear', () => {
+            essayResponsePage.steps.enterInputInResponseField('{backspace}');
+            essayResponsePage.steps.verifyResponseFieldInput('Loremdola');
+            essayResponsePage.steps.verifyLimitReachedWarningMessageNotExist();
+        });
+
+        it('When the user enters the character less than the minimum character limit value set by the user and focus out of response field, then the warning message \'Minimum 6 characters are required\' should be displayed', () => {
+            cy.log('Pre-step: Clearing the response field');
+            essayResponsePage.steps.clearResponseField();
+            essayResponsePage.steps.enterInputInResponseField('Lore');
+            essayResponsePage.steps.focusOutOfResponseField();
+            essayResponsePage.steps.verifyLimitReachedWarningMessage('Minimum 6 characters are required.');
+        });
+
+        it('When the user enters the character greater than the minimum character limt value set by the user, then the warning message should disappear', () => {
+            essayResponsePage.steps.enterInputInResponseField('mdola');
+            essayResponsePage.steps.verifyResponseFieldInput('Loremdola');
+            essayResponsePage.steps.verifyLimitReachedWarningMessageNotExist();
+        });
+
+        it('When the user selects \'None\' radio button then maximum and minimum limits should not be displayed in the preview tab and when user types anything in the response field then error message should not be displayed', () => {
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.checkNoneRadioButton();
+            essayResponsePage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(essayResponsePage.responseFieldWordCount(), 'notExist');
+            essayResponsePage.steps.enterInputInResponseField('Loremdola');
+            essayResponsePage.steps.verifyLimitReachedWarningMessageNotExist();
+        });
+    });
+});

package/cypress/e2e/ILC/EssayResponse/gradingViewAndCorrectAnswerViewContents.smoke.js

@@ -0,0 +1,112 @@
+import { correctAnswerViewPage, essayResponsePage, itemPreviewPage, studentViewPage } from "../../../pages";
+import { gradingViewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+let gradingAndCorrectAnsView = ['Grading view', 'Correct answer view']
+const views = utilities.getViews(gradingAndCorrectAnsView);
+var itemReferenceID = "";
+
+describe('Create item page - Essay response: Grading view, Correct answer view contents', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    if (views.includes('Grading view')) {
+        describe('Grading view contents', { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                cy.log('Navigating to Essay response question type');
+                essayResponsePage.steps.navigateToCreateQuestion('essay response');
+                cy.barsPreLoaderWait();
+                essayResponsePage.steps.addQuestionInstructions();
+                essayResponsePage.steps.allotPoints(10);
+                essayResponsePage.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)}`);
+                        utilities.verifyElementVisibilityState(essayResponsePage.previewTabToolbarOption(), 'visible');
+                        essayResponsePage.steps.selectPreviewTabToolbarOption('Bold (Ctrl+B)');
+                        essayResponsePage.steps.selectPreviewTabToolbarOption('Italic (Ctrl+I)');
+                        essayResponsePage.steps.selectPreviewTabToolbarOption('Underline (Ctrl+U)');
+                        essayResponsePage.steps.enterInputInResponseField('This is a test for grading view preview contents');
+                        studentViewPage.steps.submitResponse();
+                        studentViewPage.steps.clickOnGoToGradingViewButton();
+                    });
+            });
+
+            it('Question instructions should be visible', () => {
+                utilities.verifyInnerText(essayResponsePage.questionInstructionsText(), 'Which of the following is the major contributor to increased carbon dioxide levels because of urbanization? Select your answer from the options below.');
+                utilities.verifyElementVisibilityState(essayResponsePage.questionInstructionsText(), 'visible');
+            });
+
+            it('The response submitted by the student should be visible in the response field of the grading view. The formatting toolbar options should not be visible in grading view', () => {
+                essayResponsePage.responseField()
+                    .verifyInnerHTML('<p><strong><em><u>This is a test for grading view preview contents</u></em></strong></p>');
+                utilities.verifyElementVisibilityState(essayResponsePage.previewTabToolbarWrapper(), 'hidden');
+            });
+
+            it('The content in the response field should not be editable', () => {
+                essayResponsePage.steps.verifyGradingViewResponseFieldIsNonEditable();
+            });
+
+            it('Empty score input field and total score should be displayed', () => {
+                gradingViewPage.steps.verifyGradingViewScore('', 10);
+            });
+
+            it('CSS of content in the response field', { tags: 'css' }, () => {
+                utilities.verifyCSS(essayResponsePage.responseField(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.normal
+                });
+            });
+
+            it('Accessibility of content in the response field', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(essayResponsePage.responseField());
+            });
+        });
+    }
+
+    if (views.includes('Correct answer view')) {
+        describe('Correct answer view contents', { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                cy.log('Navigating to Essay response question type');
+                essayResponsePage.steps.navigateToCreateQuestion('essay response');
+                cy.barsPreLoaderWait();
+                essayResponsePage.steps.addQuestionInstructions();
+                essayResponsePage.steps.allotPoints(10);
+                essayResponsePage.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.verifyTextContent(correctAnswerViewPage.correctAnswerViewQuestionInstructions(), 'Which of the following is the major contributor to increased carbon dioxide levels because of urbanization? Select your answer from the options below.');
+                utilities.verifyElementVisibilityState(correctAnswerViewPage.correctAnswerViewQuestionInstructions(), 'visible');
+            });
+
+            it('\'This is a manual scored question\' help text should be displayed in the correct answer view', () => {
+                utilities.verifyTextContent(correctAnswerViewPage.manualScoredQuestionHelpText(), 'This is a manual scored question.');
+                utilities.verifyElementVisibilityState(correctAnswerViewPage.manualScoredQuestionHelpText(), 'visible');
+            });
+
+            it('The points alloted to the question should be displayed', () => {
+                correctAnswerViewPage.steps.verifyAvailablePoints(10);
+            });
+
+            //Need to add CSS and A11y here once updated designs are available for correct answer
+        });
+    }
+});

package/cypress/e2e/ILC/EssayResponse/headerSection.js

@@ -0,0 +1,68 @@
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { essayResponsePage, dialogBoxBase } from "../../../pages";
+import { commonComponents } from "../../../pages/components";
+
+describe('Create question page - Essay response: Header section and Saving question', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Header section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+        });
+
+        essayResponsePage.tests.verifyCreateQuestionPageQuestionTypeHeader('Essay response');
+    });
+
+    describe('Tabs section', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+        });
+
+        essayResponsePage.tests.verifyTabsSection();
+    });
+
+    describe('Cancel button', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+        });
+
+        essayResponsePage.tests.verifyCancelButton('essay response');
+    });
+
+    describe('Save Question button', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+        });
+
+        describe('Validation error messages', () => {
+            dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton();
+
+            it('Validation error messages should be displayed below required input fields', () => {
+                essayResponsePage.steps.verifyQuestionInstructionsErrorMessage();
+                essayResponsePage.steps.verifyPointsFieldErrorMessage();
+            });
+
+            it('Validation error messages should disappear when required input fields are filled', () => {
+                essayResponsePage.steps.addQuestionInstructions();
+                essayResponsePage.steps.verifyQuestionInstructionsErrorMessageIsNotDisplayed();
+                essayResponsePage.steps.allotPoints(20);
+                essayResponsePage.steps.verifyPointsFieldErrorMessageIsNotDisplayed();
+            });
+        });
+
+        describe('Saving a question', () => {
+            it('When user has filled all the mandatory fields then on clicking on Save Question button the question should get saved and a snackbar with text \'Saved successfully!\' should be displayed', () => {
+                essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            });
+
+            essayResponsePage.tests.verifySavedSuccessfullySnackbarCSSAndA11y();
+        });
+    });
+});