itemengine-cypress-automation 1.0.120 → 1.0.122-updateILCRepo28Feb-2c3e0e3.0

package/cypress/e2e/ILC/FillInTheGapsTextNew/allOrNothingForAllViews.smoke.js

@@ -0,0 +1,219 @@
+import { dialogBoxBase, fillInTheGapsTextPage, gradingViewPage, itemPreviewPage, studentViewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const grepTags = Cypress.env('grepTags');
+let correctAnswerViews = ['Question preview', 'Item preview', 'Grading view'];
+const views = utilities.getViews(correctAnswerViews);
+var itemReferenceID = "";
+
+describe('Create item page - Fill in the gaps with text: All or nothing ', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Question preview modes: Student view and Grading view', () => {
+            abortEarlySetup();
+            before(() => {
+                fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+                cy.barsPreLoaderWait();
+                fillInTheGapsTextPage.steps.addResponseArea();
+                fillInTheGapsTextPage.steps.switchToPreviewTab();
+            });
+
+            fillInTheGapsTextPage.tests.verifyPreviewModesAndScoreWhenPointsAndCorrectAnswersIsNotSet();
+
+            it('When the user sets correct answer responses and allots points, then the alloted points should be displayed in the preview tab', () => {
+                fillInTheGapsTextPage.steps.switchToEditTab();
+                fillInTheGapsTextPage.steps.allotPoints(20);
+                fillInTheGapsTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: 'Leaf' }, { responseIndex: 2, responseText: 'Stem' }]);
+                fillInTheGapsTextPage.steps.switchToPreviewTab();
+                fillInTheGapsTextPage.steps.verifyPreviewScore(0, 20);
+            });
+
+            it('When the user attempts question in preview tab and switches to edit tab, then on re-switching to the preview tab, users response should not persist', () => {
+                fillInTheGapsTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: 'Leaf' }, { responseIndex: 2, responseText: 'Stem' }]);
+                fillInTheGapsTextPage.steps.resetQuestionPreview();
+                fillInTheGapsTextPage.steps.verifyTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: '' }, { responseIndex: 1, responseText: '' }, { responseIndex: 2, responseText: '' }]);
+            });
+        });
+    };
+
+    views.forEach((view) => {
+        describe(`${view}: Auto scored - All or nothing scoring`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+                        cy.barsPreLoaderWait();
+                        fillInTheGapsTextPage.steps.addTextInQuestionInstructionsInputField('Fill in the gaps');
+                        fillInTheGapsTextPage.steps.allotPoints(20);
+                        fillInTheGapsTextPage.steps.addResponseArea();
+                        fillInTheGapsTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: 'Leaf' }, { responseIndex: 2, responseText: 'Stem' }]);
+                        fillInTheGapsTextPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                };
+            });
+
+            beforeEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        fillInTheGapsTextPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+                        fillInTheGapsTextPage.steps.resetQuestionPreview();
+                        break;
+                    case 'Item preview':
+                        fillInTheGapsTextPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+                        itemPreviewPage.steps.resetQuestionPreview();
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                }
+            });
+
+            if (view === 'Question preview') {
+                after(() => {
+                    fillInTheGapsTextPage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it('When the user selects \'Grading\' view without attempting the question, dropzone numeration should be displayed, correct answers section with a label \'Correct answers\' should be displayed with correct answers and respective option numeration', () => {
+                if (view === 'Grading view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+                    studentViewPage.steps.clickOnGoToGradingViewButton();
+                    gradingViewPage.steps.verifyGradingViewScore(0, 20);
+                };
+                if (view === 'Question preview' || view === 'Item preview') {
+                    fillInTheGapsTextPage.steps.verifyPreviewScore(0, 20);
+                    fillInTheGapsTextPage.steps.switchToGradingView();
+                    fillInTheGapsTextPage.steps.verifyPreviewTabPointsBackgroundForIncorrectOrPartiallyCorrectAnswer();
+                };
+                fillInTheGapsTextPage.steps.verifyResponseAreaNumeration();
+                utilities.verifyInnerText(fillInTheGapsTextPage.correctAnswersLabel(), 'Correct answers:');
+                fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower', 'Leaf', 'Stem']);
+            });
+
+            it('When the user attempts the question incorrectly, then the user should be awarded 0 points and on switching to \'Grading\' view, incorrect icons should be displayed besides all incorrect responses, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers along with numeration should be displayed', () => {
+                fillInTheGapsTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Marigold' }, { responseIndex: 1, responseText: 'Rose' }, { responseIndex: 2, responseText: 'Sunflower' }]);
+                if (view === 'Grading view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+                    studentViewPage.steps.clickOnGoToGradingViewButton();
+                    gradingViewPage.steps.verifyGradingViewScore(0, 20);
+                };
+                if (view === 'Question preview' || view === 'Item preview') {
+                    fillInTheGapsTextPage.steps.verifyPreviewScore(0, 20);
+                    fillInTheGapsTextPage.steps.switchToGradingView();
+                };
+                fillInTheGapsTextPage.steps.verifyIncorrectOptionIcon(0);
+                fillInTheGapsTextPage.steps.verifyIncorrectOptionIcon(1);
+                fillInTheGapsTextPage.steps.verifyIncorrectOptionIcon(2);
+                fillInTheGapsTextPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+                fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower', 'Leaf', 'Stem']);
+            });
+
+            it('When the user attempts the question partially correct, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the correct answer responses, incorrect icon should be displayed besides incorrect answer response, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers along with numeration should be displayed', () => {
+                if (view === 'Grading view') {
+                    studentViewPage.steps.clearResponses();
+                };
+                fillInTheGapsTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: 'Leaf' }, { responseIndex: 2, responseText: 'Sunflower' }]);
+                if (view === 'Grading view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+                    studentViewPage.steps.clickOnGoToGradingViewButton();
+                    gradingViewPage.steps.verifyGradingViewScore(0, 20);
+                };
+                if (view === 'Question preview' || view === 'Item preview') {
+                    fillInTheGapsTextPage.steps.verifyPreviewScore(0, 20);
+                    fillInTheGapsTextPage.steps.switchToGradingView();
+                };
+                fillInTheGapsTextPage.steps.verifyCorrectOptionIcon(0);
+                fillInTheGapsTextPage.steps.verifyCorrectOptionIcon(1);
+                fillInTheGapsTextPage.steps.verifyIncorrectOptionIcon(2);
+                fillInTheGapsTextPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+                fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower', 'Leaf', 'Stem']);
+            });
+
+            it('When user attempts the question correctly, the user should be awarded full points and on switching to \'Grading\' view, then correct icons should be displayed beside all the correct responses, correct icon should be displayed besides the correct answer responses, a status message with text \'Your answer is correct\' and correct answer section should not be displayed', () => {
+                if (view === 'Grading view') {
+                    studentViewPage.steps.clearResponses();
+                };
+                fillInTheGapsTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: 'Leaf' }, { responseIndex: 2, responseText: 'Stem' }]);
+                if (view === 'Grading view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+                    studentViewPage.steps.clickOnGoToGradingViewButton();
+                    gradingViewPage.steps.verifyGradingViewScore(20, 20);
+                };
+                if (view === 'Question preview' || view === 'Item preview') {
+                    fillInTheGapsTextPage.steps.verifyPreviewScore(20, 20);
+                    fillInTheGapsTextPage.steps.switchToGradingView();
+                    fillInTheGapsTextPage.steps.verifyPreviewTabPointsBackgroundForCorrectAnswer();
+                };
+                fillInTheGapsTextPage.steps.verifyCorrectOptionIcon(0);
+                fillInTheGapsTextPage.steps.verifyCorrectOptionIcon(1);
+                fillInTheGapsTextPage.steps.verifyCorrectOptionIcon(2);
+                fillInTheGapsTextPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+                fillInTheGapsTextPage.steps.verifyCorrectAnswerSectionNotExists();
+            });
+        });
+    });
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Question preview: Auto scored - All or nothing: Minimum scoring', () => {
+            abortEarlySetup();
+            before(() => {
+                fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+                cy.barsPreLoaderWait();
+                fillInTheGapsTextPage.steps.allotPoints(20);
+                fillInTheGapsTextPage.steps.addResponseArea();
+                fillInTheGapsTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: 'Leaf' }, { responseIndex: 2, responseText: 'Stem' }]);
+            });
+
+            it('When the user selects \'Award minimum score\' from the minimum scoring dropdown, does not attempt the question and switches to grading view, then the user should be awarded with minimum points', () => {
+                fillInTheGapsTextPage.steps.expandMinimumScoringDropdown();
+                fillInTheGapsTextPage.steps.selectOptionFromMinimumScoringDropdown('Award minimum score');
+                fillInTheGapsTextPage.steps.allotMinimumPoints(2);
+                fillInTheGapsTextPage.steps.switchToPreviewTab();
+                fillInTheGapsTextPage.steps.switchToGradingView();
+                fillInTheGapsTextPage.steps.verifyPreviewScore(2, 20);
+                fillInTheGapsTextPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            });
+
+            it('When the user has selected \'Award minimum score\' from the minimum scoring dropdown, attempts the question incorrectly and switches to grading view, the user should be awarded with minimum points', () => {
+                fillInTheGapsTextPage.steps.resetQuestionPreview();
+                fillInTheGapsTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Marigold' }, { responseIndex: 1, responseText: 'Rose' }, { responseIndex: 2, responseText: 'Sunflower' }]);
+                fillInTheGapsTextPage.steps.verifyPreviewScore(2, 20);
+                fillInTheGapsTextPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            });
+
+            it('When the user selects \'Award minimum score only if attempted\' from the minimum scoring dropdown, does not attempt the question and switches to grading view, then the user should be awarded with 0 points', () => {
+                fillInTheGapsTextPage.steps.switchToEditTab();
+                fillInTheGapsTextPage.steps.expandMinimumScoringDropdown();
+                fillInTheGapsTextPage.steps.selectOptionFromMinimumScoringDropdown('Award minimum score only if attempted');
+                fillInTheGapsTextPage.steps.allotMinimumPoints(2);
+                fillInTheGapsTextPage.steps.switchToPreviewTab();
+                fillInTheGapsTextPage.steps.switchToGradingView();
+                fillInTheGapsTextPage.steps.verifyPreviewScore(0, 20);
+                fillInTheGapsTextPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            });
+
+            it('When the user has selected \'Award minimum score\' from the minimum scoring dropdown, attempts the question incorrectly and switches to grading view, the user should be awarded with minimum points', () => {
+                fillInTheGapsTextPage.steps.resetQuestionPreview();
+                fillInTheGapsTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Marigold' }, { responseIndex: 1, responseText: 'Rose' }, { responseIndex: 2, responseText: 'Sunflower' }]);
+                fillInTheGapsTextPage.steps.verifyPreviewScore(2, 20);
+            });
+        });
+    };
+});

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

@@ -0,0 +1,115 @@
+import { fillInTheGapsTextPage, 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 views = utilities.getViews(checkAnswerViews);
+
+describe('Create item page - Fill in the gaps with text - 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':
+                    fillInTheGapsTextPage.steps.checkAnswer();
+                    break;
+                case 'Student view':
+                    studentViewPage.steps.checkAnswer();
+                    break;
+                default:
+                    throw new Error(`Unsupported page identifier: ${view}`);
+            }
+        };
+        describe(`${view} - Check answer functionality`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+                        cy.barsPreLoaderWait();
+                        fillInTheGapsTextPage.steps.addTextInQuestionInstructionsInputField('Fill in the gaps');
+                        fillInTheGapsTextPage.steps.allotPoints(20);
+                        fillInTheGapsTextPage.steps.addResponseArea();
+                        fillInTheGapsTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: 'Leaf' }, { responseIndex: 2, responseText: 'Stem' }]);
+                        fillInTheGapsTextPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+                        fillInTheGapsTextPage.steps.allotPoints(20);
+                        fillInTheGapsTextPage.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':
+                        fillInTheGapsTextPage.steps.verifyCorrectAnswerSectionNotExists();
+                        fillInTheGapsTextPage.steps.resetQuestionPreview();
+                        break;
+                    case 'Item preview':
+                        fillInTheGapsTextPage.steps.verifyCorrectAnswerSectionNotExists();
+                        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(() => {
+                    fillInTheGapsTextPage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it('When the user selects \'Check answer\' button without attempting the question, then correct/incorrect icons, correct/incorrect answer status message and  correct answer section should not be displayed', () => {
+                checkAnswer(view);
+                fillInTheGapsTextPage.steps.verifyCorrectIncorrectIconsNotExist();
+                fillInTheGapsTextPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+                fillInTheGapsTextPage.steps.verifyCorrectAnswerSectionNotExists();
+            });
+
+            it('When the user attempts the question incorrectly and clicks on \'Check answer\' button, then incorrect icons should be displayed besides all incorrect responses, a status message with text \'Your answer is incorrect\' should be displayed. Correct answer section should not be displayed', () => {
+                fillInTheGapsTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Marigold' }, { responseIndex: 1, responseText: 'Rose' }, { responseIndex: 2, responseText: 'Sunflower' }]);
+                checkAnswer(view);
+                fillInTheGapsTextPage.steps.verifyIncorrectOptionIcon(0);
+                fillInTheGapsTextPage.steps.verifyIncorrectOptionIcon(1);
+                fillInTheGapsTextPage.steps.verifyIncorrectOptionIcon(2);
+                fillInTheGapsTextPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+                fillInTheGapsTextPage.steps.verifyCorrectAnswerSectionNotExists();
+            });
+
+            it('When the user attempts the question partially correct and clicks on \'Check answer\' button, then incorrect icons should be displayed besides all incorrect responses, correct icons should be displayed besides correct responses, a status message with text \'Your answer is incorrect\' should be displayed. Correct answer section should not be displayed', () => {
+                fillInTheGapsTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: 'Leaf' }, { responseIndex: 2, responseText: 'Sunflower' }]);
+                checkAnswer(view);
+                fillInTheGapsTextPage.steps.verifyCorrectOptionIcon(0);
+                fillInTheGapsTextPage.steps.verifyCorrectOptionIcon(1);
+                fillInTheGapsTextPage.steps.verifyIncorrectOptionIcon(2);
+                fillInTheGapsTextPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+                fillInTheGapsTextPage.steps.verifyCorrectAnswerSectionNotExists();
+            });
+
+            it('When user attempts the question correctly, and clicks on \'Check answer\' button, then correct icons should be displayed besides correct responses, a status message with text \'Your answer is correct\' should be displayed. Correct answer section should not be displayed', () => {
+                fillInTheGapsTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: 'Leaf' }, { responseIndex: 2, responseText: 'Stem' }]);
+                checkAnswer(view);
+                fillInTheGapsTextPage.steps.verifyCorrectOptionIcon(0);
+                fillInTheGapsTextPage.steps.verifyCorrectOptionIcon(1);
+                fillInTheGapsTextPage.steps.verifyCorrectOptionIcon(2);
+                fillInTheGapsTextPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+                fillInTheGapsTextPage.steps.verifyCorrectAnswerSectionNotExists();
+            });
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsTextNew/editTabBasicSection.js

@@ -0,0 +1,142 @@
+import { fillInTheGapsTextPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create item page - Fill in the gaps with text: Question instructions, question input field', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question instructions input field - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsTextPage.tests.verifyQuestionInstructionsInputFieldEditTab();
+    });
+
+    describe('Question instructions input field - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsTextPage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
+    });
+
+    describe('Question input field - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Question\' label and input field should be displayed and by default in the question input field, sample \'Lorem Ipsum\' text along with two response areas should be present', () => {
+            utilities.verifyInnerText(fillInTheGapsTextPage.questionLabel(), 'Question');
+            utilities.verifyInnerText(fillInTheGapsTextPage.questionInputField(), 'Lorem ipsum dolor sit amet, \n1\nclose\nonsectetur adipiscing elit. Ut pellentesque tincidunt ornare. Integer porttitor est quis urna porttitor,eget \n2\nclose\ntempus tellus dapibus.');
+            utilities.verifyElementCount(fillInTheGapsTextPage.responseArea(), 2);
+        });
+
+        it('The response area should be displayed with a settings button, numeric count and a close button in the question input field', () => {
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsTextPage.steps.verifyResponseAreaContents(index)
+            };
+        });
+
+        it('CSS of Question input field contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsTextPage.questionInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsTextPage.responseArea().find('.add_response_element'), {
+                'background-color': css.color.figActiveComponentBg,
+                'border': `1px solid ${css.color.activeButtons}`
+            });
+            utilities.verifyCSS(fillInTheGapsTextPage.responseAreaNumeration(), {
+                'color': css.color.liText,
+                'font-size': '32px',
+                'font-weight': css.fontWeight.regular
+            });
+            fillInTheGapsTextPage.responseAreaCloseButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.activeButtons)
+        });
+
+        it('When the user has not focused inside the question input field, the \'add text container\' button should be in disabled state', () => {
+            fillInTheGapsTextPage.steps.verifyResponseAreaButtonDisabled();
+        });
+
+        it('When the user focuses in the question input field, the \'+add text container\' button should get enabled, and when the user clicks on the \'+add text container\' button, a response area in the question input field, a response accordion along with \'Response #\' label in the \'Specify correct answer\' section, a new \'aria label for text containers\' input field in the additional settings should get added', () => {
+            fillInTheGapsTextPage.steps.focusInQuestionInputField();
+            fillInTheGapsTextPage.steps.verifyResponseAreaButtonEnabled();
+            fillInTheGapsTextPage.steps.clickOnAddResponseAreaButton();
+            utilities.verifyElementCount(fillInTheGapsTextPage.responseArea(), 3);
+            fillInTheGapsTextPage.steps.verifyResponseAreaContents(2);
+            utilities.verifyElementCount(fillInTheGapsTextPage.answerInputFieldSpecifyCorrectAnswerSection(), 3);
+            utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsTextPage.responseAccordionLabel(), 2), 'Response 3');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+            utilities.verifyElementCount(fillInTheGapsTextPage.enterAriaLabelInputField(), 3);
+        });
+
+        it('When the user clicks on the \'close\' button present on a response area, the response area in the question input field should get removed and the count of the response areas present in the question input field should get updated accordingly, response field along with \'Response #\' label in the \'specify correct answer\' section, \'Response #\' accordion in the additional settings accordion and the respective response field in the \'Preview tab\' should also get removed', () => {
+            cy.log('Switching to edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.steps.deleteAResponseArea(1);
+            cy.log('Checking if 3rd response area gets removed from the question input field and the numeric counts get updated')
+            utilities.verifyElementCount(fillInTheGapsTextPage.responseArea(), 2);
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsTextPage.steps.verifyResponseAreaContents(index)
+            };
+            utilities.verifyElementCount(fillInTheGapsTextPage.responseAccordion(), 2);
+            for (let index = 0; index < 2; index++) {
+                utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsTextPage.responseAccordionLabel(), index), `Response ${index + 1}`);
+            };
+        });
+
+        it('When the user removes all response areas from the question input field, an error message \'Error: Minimum one response token is required.\' should be displayed', () => {
+            cy.log('Switching to edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.steps.deleteAResponseArea(0);
+            fillInTheGapsTextPage.steps.deleteAResponseArea(0);
+            utilities.verifyInnerText(fillInTheGapsTextPage.errorMessage(), 'Error: Minimum one response token is required.')
+        });
+
+        fillInTheGapsTextPage.tests.verifyErrorMessageCSSAndA11y();
+
+        fillInTheGapsTextPage.tests.addResponseAreaAndVerifyMinimumOneAreaRequiredErrorMessageNotExist();
+
+        fillInTheGapsTextPage.tests.verifyQuestionInputFieldPlaceholderText();
+    });
+
+    describe('Question input field - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When the user adds a new response area in the question input field, the added response area should be displayed in the preview tab', () => {
+            fillInTheGapsTextPage.steps.addResponseArea();
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            utilities.verifyElementCount(fillInTheGapsTextPage.answerInputFieldPreviewTab(), 3);
+        });
+
+        it('When the user edits the question input field text, the modified text should be visible in the preview tab', () => {
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.steps.addInputToQuestionInputField('Lorem ipsum');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(fillInTheGapsTextPage.questionContainerPreviewTab(), 'Lorem ipsum dolor sit amet, \n​\nonsectetur adipiscing elit. Ut pellentesque tincidunt ornare. Integer porttitor est quis urna porttitor,eget \n​\ntempus tellus dapibus.\n​\nLorem ipsum');
+        });
+
+        it('When the user deletes a response area, it should get deleted from the question preview', () => {
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.steps.deleteAResponseArea(2);
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(fillInTheGapsTextPage.questionContainerPreviewTab(), 'Lorem ipsum dolor sit amet, \n​\nonsectetur adipiscing elit. Ut pellentesque tincidunt ornare. Integer porttitor est quis urna porttitor,eget \n​\ntempus tellus dapibus.Lorem ipsum');
+        });
+    });
+});

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

@@ -0,0 +1,152 @@
+import { fillInTheGapsTextPage, 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', 'Grading view', 'Correct answer view'];
+const views = utilities.getViews(previewContentViews);
+var itemReferenceID = "";
+const css = Cypress.env('css');
+
+describe('Create item page - Fill in the gaps with text - Preview contents in all views', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        describe(`Preview tab contents - ${view}`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+                        cy.barsPreLoaderWait();
+                        fillInTheGapsTextPage.steps.addTextInQuestionInstructionsInputField('Fill in the gaps');
+                        fillInTheGapsTextPage.steps.allotPoints(10);
+                        fillInTheGapsTextPage.steps.addResponseArea();
+                        fillInTheGapsTextPage.steps.selectAcceptedStudentInputType(1, 'Number');
+                        fillInTheGapsTextPage.steps.selectAcceptedStudentInputType(2, 'Integer');
+                        fillInTheGapsTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: '20.00' }, { responseIndex: 2, responseText: '7' }]);
+                        fillInTheGapsTextPage.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)}`);
+                        fillInTheGapsTextPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/grading-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Correct answer view':
+                        cy.visit(`/item-engine/demo/render-item/correct-answer-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    default:
+                        throw new Error('Invalid view');
+                }
+            });
+
+            after(() => {
+                if (view === 'Question preview') {
+                    fillInTheGapsTextPage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                }
+                if (view === 'Student view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(studentViewPage.buttonGoToGradingView(), 'visible');
+                }
+            });
+
+            it('Question instructions should be visible', () => {
+                utilities.verifyInnerText(fillInTheGapsTextPage.questionInstructionsText(), 'Fill in the gaps');
+                utilities.verifyElementVisibilityState(fillInTheGapsTextPage.questionInstructionsText(), 'visible');
+            });
+
+            if (view !== 'Grading view' && view !== 'Correct answer view') {
+                it('The sample \'Lorem Ipsum\' text along with three answer input fields should be displayed in the question field and they should be empty.', () => {
+                    utilities.verifyInnerText(fillInTheGapsTextPage.questionContainerPreviewTab(), 'Lorem ipsum dolor sit amet, \n​\nonsectetur adipiscing elit. Ut pellentesque tincidunt ornare. Integer porttitor est quis urna porttitor,eget \n​\ntempus tellus dapibus.\n​');
+                    utilities.verifyElementCount(fillInTheGapsTextPage.answerInputFieldPreviewTab(), 3);
+                    fillInTheGapsTextPage.steps.verifyTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: '' }, { responseIndex: 1, responseText: '' }, { responseIndex: 2, responseText: '' }]);
+                });
+
+                it('User should be able to enter text in the answer input fields', () => {
+                    fillInTheGapsTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: '20.00' }, { responseIndex: 2, responseText: '7' }]);
+                    fillInTheGapsTextPage.steps.verifyTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: '20.00' }, { responseIndex: 2, responseText: '7' }]);
+                });
+            } else if (view === 'Grading view') {
+                it('The answer input fields should be displayed filled with answers', () => {
+                    utilities.verifyElementCount(fillInTheGapsTextPage.answerInputFieldPreviewTab(), 3);
+                    fillInTheGapsTextPage.steps.verifyTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: '20.00' }, { responseIndex: 2, responseText: '7' }]);
+                });
+
+                it('The input fields should not be editable', () => {
+                    fillInTheGapsTextPage.steps.verifyAnswerInputFieldDisabled(0);
+                    fillInTheGapsTextPage.steps.verifyAnswerInputFieldDisabled(1);
+                    fillInTheGapsTextPage.steps.verifyAnswerInputFieldDisabled(2);
+                });
+            } else {
+                it('The answer input fields should be displayed filled with correct answers', () => {
+                    utilities.verifyElementCount(fillInTheGapsTextPage.answerInputFieldPreviewTab(), 3);
+                    fillInTheGapsTextPage.steps.verifyTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: '20.00' }, { responseIndex: 2, responseText: '7' }]);
+                });
+            }
+
+            it('CSS of preview contents', { tags: 'css' }, () => {
+                utilities.verifyCSS(fillInTheGapsTextPage.questionContainerPreviewTab(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.regular
+                });
+                switch (view) {
+                    case 'Question preview':
+                    case 'Item preview':
+                    case 'Item view':
+                    case 'Item preview':
+                    case 'Student view':
+                        utilities.verifyCSS(fillInTheGapsTextPage.answerInputFieldPreviewTab().parent('.response-input-field'), {
+                            'background-color': css.color.optionsBg,
+                        });
+                        utilities.verifyCSS(fillInTheGapsTextPage.answerInputFieldPreviewTab().parent().find('fieldset'), {
+                            'border': `1px solid ${css.color.optionsSelectedText}`,
+                        });
+                        utilities.verifyCSS(fillInTheGapsTextPage.answerInputFieldPreviewTab(), {
+                           'color': css.color.text,
+                            'font-size': css.fontSize.default,
+                            'font-weight': css.fontWeight.regular
+                        });
+                        break;
+                    case 'Grading view':
+                        utilities.verifyCSS(fillInTheGapsTextPage.answerInputFieldPreviewTab().parent('.response-input-field'), {
+                            'background-color': css.color.optionsBg,
+                        });
+                        utilities.verifyCSS(fillInTheGapsTextPage.answerInputFieldPreviewTab().parent().find('fieldset'), {
+                            'border': `1px solid ${css.color.correctAnswer}`
+                        });
+                        break;
+                    case 'Correct answer view':
+                        utilities.verifyCSS(fillInTheGapsTextPage.answerInputFieldPreviewTab().parent('.response-input-field'), {
+                            'background-color': css.color.optionsBg,
+                        });
+                        utilities.verifyCSS(fillInTheGapsTextPage.answerInputFieldPreviewTab().parent().find('fieldset'), {
+                            'border': `1px solid ${css.color.optionsSelectedText}`,
+                        });
+                        utilities.verifyCSS(fillInTheGapsTextPage.answerInputFieldPreviewTab(), {
+                           'color': css.color.text,
+                            'font-size': css.fontSize.default,
+                            'font-weight': css.fontWeight.regular
+                        });
+                        break;
+                    default:
+                        throw new Error('Invalid view');
+                }
+            });
+
+            it('Accessibility of preview tab', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(fillInTheGapsTextPage.answerInputFieldPreviewTab().parents('[class*="question-preview-wrapper"]'));
+            });
+        });
+    });
+});