itemengine-cypress-automation 1.0.63 → 1.0.65

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

@@ -0,0 +1,106 @@
+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');
+var itemReferenceID = "";
+
+describe('Create item page - Essay response: Grading view, Correct answer view contents', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Grading view contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Essay response question type');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            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().find('p'), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of content in the response field', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponsePage.responseField().parents('.essay-preview-wrapper'));
+        });
+    });
+
+    describe('Correct answer view contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Essay response question type');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            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/essayResponsePreviewContentsForAllViews.js

@@ -0,0 +1,76 @@
+import { essayResponsePage, itemPreviewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const views = ['Question preview', 'Item view', 'Item preview', 'Student view'];
+var itemReferenceID = "";
+
+describe('Create item page - Essay response: Preview contents', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        describe(`Preview tab contents - ${view}`, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        cy.log('Navigating to Essay response question type');
+                        essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+                        cy.barsPreLoaderWait();
+                        essayResponsePage.steps.addQuestionInstructions();
+                        essayResponsePage.steps.allotPoints(10);
+                        essayResponsePage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item view':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID[0])}`);
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID[0])}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID[0])}`);
+                        break;
+                };
+            });
+
+            if (view === 'Question preview') {
+                after(() => {
+                    essayResponsePage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it('When the user switches to Preview tab, then the following options should be displayed in the response field toolbar - \'Bold, Italic, Underline, Superscript, Bulleted list, Numbered list, Link, Insert Image, Special Characters, Table\' along with a separator after \'Underline\' option', () => {
+                essayResponsePage.steps.verifyDefaultToolbarOptions();
+            });
+
+            it('Word count should be displayed in the format \'0/10000\'', () => {
+                essayResponsePage.steps.verifyResponseFieldWordCount('0/10000');
+            });
+
+            it('When the user updates the formatting options and types something in the response field, then the word count should update accordingly', () => {
+                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');
+                essayResponsePage.responseField()
+                    .verifyInnerHTML('<p><strong><em><u>​​​​​​​This is a test for grading view preview contents</u></em></strong><br></p>');
+                essayResponsePage.steps.verifyResponseFieldWordCount('9/10000');
+            });
+
+            it('CSS of formatting options in Preview tab', { tags: 'css' }, () => {
+                utilities.verifyCSS(essayResponsePage.previewTabToolbarOption('Bold (Ctrl+B)').find('.cke_button_icon'), {
+                    'color': css.color.activeButtons
+                });
+            });
+
+            it('Accessibility of formatting options in Preview tab', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(essayResponsePage.previewTabToolbarWrapper())
+            });
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsOverImageText/fillInTheGapsOverImageTextCheckAnswerForAllViews.js

@@ -0,0 +1,125 @@
+import { fillInTheGapsOverImageTextPage } from "../../../pages/fillInTheGapsOverImageTextPage";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+import { itemPreviewPage } from "../../../pages";
+const views = ['Question preview', 'Item preview', 'Student view'];
+const correctTabAnswerArray = ['Flower', 'Leaf'];
+const incorrectAnswerArray = ['Stem', 'Root'];
+var itemReferenceID = "";
+
+describe('Create item page - Fill in the gaps over image - text: Check answer', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        // Remove after https://redmine.zeuslearning.com/issues/549542 is fixed
+        const checkAnswer = (view) => {
+            switch (view) {
+                case views[0]:
+                case views[1]:
+                    fillInTheGapsOverImageTextPage.steps.checkAnswer();
+                    break;
+                case views[2]:
+                    cy.get('.check-answer-button')
+                        .click();
+                    break;
+                // Add more cases for additional pages if needed
+                default:
+                    throw new Error(`Unsupported page identifier: ${view}`);
+            }
+        };
+        describe(`Fill in the gaps over image - text: Check answer - ${view}`, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        cy.log('Navigating to Fill in the gaps over image - text question type');
+                        fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+                        cy.barsPreLoaderWait();
+                        fillInTheGapsOverImageTextPage.steps.addQuestionInstructions();
+                        fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+                        fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+                        fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+                        fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+                        fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, correctTabAnswerArray[0]);
+                        fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(1, correctTabAnswerArray[1]);
+                        fillInTheGapsOverImageTextPage.steps.allotPoints(10);
+                        fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+                        fillInTheGapsOverImageTextPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+                        fillInTheGapsOverImageTextPage.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;
+                }
+            });
+
+            afterEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        fillInTheGapsOverImageTextPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+                        fillInTheGapsOverImageTextPage.steps.resetQuestionPreview();
+                        break;
+                    case 'Item preview':
+                        fillInTheGapsOverImageTextPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+                        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(() => {
+                    fillInTheGapsOverImageTextPage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it('When the user selects \'Check answer\' button without attempting the question, then red cross-mark icon or green check-mark icons, correct/incorrect answer label and border and correct answer container should not be displayed', () => {
+                checkAnswer(view);
+                fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectIconsDoesNotExist();
+                fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabelNotExists();
+                fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectBorderNotExists();
+                fillInTheGapsOverImageTextPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+            });
+
+            it('When the user attempts the question incorrectly and clicks on the \'Check answer\' button, then red cross-mark icons should be displayed beside all incorrect the options, a label \'Incorrect answer\' and incorrect answer border should be displayed below the question preview and the correct answer container should not be displayed', () => {
+                fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, incorrectAnswerArray[0]);
+                fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, incorrectAnswerArray[1]);
+                checkAnswer(view);
+                fillInTheGapsOverImageTextPage.steps.verifyIncorrectOptionCrossmarkIcon(0);
+                fillInTheGapsOverImageTextPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+                fillInTheGapsOverImageTextPage.steps.verifyIncorrectAttemptBorder();
+                fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            });
+
+            it('When the user attempts the question partially correct, then on clicking on the \'Check answer\' button, green check-mark icon should be displayed besides the correct response, red cross-mark should be displayed besides incorrect response and \'Incorrect answer\' label should be displayed below the question preview', () => {
+                fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, correctTabAnswerArray[0]);
+                fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, incorrectAnswerArray[0]);
+                checkAnswer(view);
+                fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+                fillInTheGapsOverImageTextPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+                fillInTheGapsOverImageTextPage.steps.verifyIncorrectAttemptBorder();
+                fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+            });
+
+            it('When the user attempts the question correctly, then on clicking on the \'Check answer\' button, green check-mark icon should be displayed besides the correct response and \'Correct answer\' label should be displayed below the question preview', () => {
+                fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, correctTabAnswerArray[0]);
+                fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, correctTabAnswerArray[1]);
+                checkAnswer(view);
+                fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+                fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+                fillInTheGapsOverImageTextPage.steps.verifyCorrectAttemptBorder();
+                fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+            });
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsOverImageText/fillInTheGapsOverImageTextPreviewContentsForAllViews.js

@@ -0,0 +1,144 @@
+import { fillInTheGapsOverImageTextPage, itemPreviewPage, studentViewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const views = ['Question preview', 'Item view', 'Item preview', 'Student view', 'Grading view', 'Correct answer view'];
+var itemReferenceID = "";
+const correctTabAnswerArray = ['Flower', 'Leaf', 'Stem'];
+
+//Note: Only one question per item should be present as we will need to use eqs and within to verify contents if multiple same elements are present for different question types
+//Preview tab contents file should be created for all previous and new question types and this different views verification should be implemented for all q types
+//Need to discuss how will be handling answer numeration
+describe('Create item page - Fill in the gaps over image - text: Preview contents', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        describe(`Preview tab contents - ${view}`, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        cy.log('Navigating to Fill in the gaps over image - text question type');
+                        fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+                        cy.barsPreLoaderWait();
+                        fillInTheGapsOverImageTextPage.steps.addQuestionInstructions();
+                        fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+                        fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+                        fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+                        fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+                        fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, correctTabAnswerArray[0]);
+                        fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(1, correctTabAnswerArray[1]);
+                        fillInTheGapsOverImageTextPage.steps.allotPoints(10);
+                        fillInTheGapsOverImageTextPage.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)}`);
+                        fillInTheGapsOverImageTextPage.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') {
+                    fillInTheGapsOverImageTextPage.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(fillInTheGapsOverImageTextPage.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(fillInTheGapsOverImageTextPage.questionInstructionsText(), 'visible');
+            });
+
+            it('When user has uploaded an image in the \'Image\' section then the uploaded image should be displayed in the preview tab', () => {
+                utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.imagePreviewTab(), 'visible');
+            });
+
+            if (view !== 'Grading view' && view !== 'Correct answer view') {
+                it('The added response fields should be displayed in the preview tab and they should be empty', () => {
+                    utilities.verifyElementCount(fillInTheGapsOverImageTextPage.responseFieldPreviewTab(), 2);
+                    fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldPreviewTab(0, '');
+                    fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldPreviewTab(1, '');
+                });
+
+                it('User should be able to enter text in the response fields', () => {
+                    fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, correctTabAnswerArray[0]);
+                    fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, correctTabAnswerArray[1]);
+                    fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldPreviewTab(0, correctTabAnswerArray[0]);
+                    fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldPreviewTab(1, correctTabAnswerArray[1]);
+                });
+            } else {
+                it('The response fields should be displayed filled with answers', () => {
+                    utilities.verifyElementCount(fillInTheGapsOverImageTextPage.responseFieldPreviewTab(), 2);
+                    fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldPreviewTab(0, correctTabAnswerArray[0]);
+                    fillInTheGapsOverImageTextPage.steps.verifyTextInResponseFieldPreviewTab(1, correctTabAnswerArray[1]);
+                });
+            }
+
+            it('CSS of preview contents', { tags: 'css' }, () => {
+                utilities.verifyCSS(fillInTheGapsOverImageTextPage.responseContainerPointer().find('circle').eq(0), {
+                    'fill': css.color.responseContainerPointer,
+                    'r': '12px'
+                });
+                switch (view) {
+                    case 'Question preview':
+                    case 'Item preview':
+                    case 'Item view':
+                    case 'Item preview':
+                    case 'Student view':
+                        fillInTheGapsOverImageTextPage.steps.focusInResponseFieldPreviewTab(0);
+                        utilities.verifyCSS(fillInTheGapsOverImageTextPage.responseFieldPreviewTab().parents('.cloze-with-text-response-preview-wrapper').find('fieldset').eq(0), {
+                            'border': `1px solid ${css.color.activeButtons}`
+                        });
+                        utilities.verifyCSS(fillInTheGapsOverImageTextPage.responseFieldPreviewTab().parents('.cloze-with-text-response-preview-wrapper').find('fieldset').eq(1), {
+                            'color': css.color.text,
+                            'font-size': css.fontSize.default,
+                            'font-weight': css.fontWeight.regular,
+                            'border': `1px solid ${css.color.figDefaultComponentBorder}`
+                        });
+                        break;
+                    case 'Grading view':
+                        utilities.verifyCSS(fillInTheGapsOverImageTextPage.responseFieldPreviewTab().parents('.cloze-with-text-response-preview-wrapper').find('fieldset'), {
+                            'border': `1px solid ${css.color.figDefaultComponentBorder}`
+                        });
+                        break;
+                    case 'Correct answer view':
+                        utilities.verifyCSS(fillInTheGapsOverImageTextPage.responseFieldPreviewTab().parents('.cloze-with-text-response-preview-wrapper').find('fieldset'), {
+                            'color': css.color.text,
+                            'font-size': css.fontSize.default,
+                            'font-weight': css.fontWeight.regular,
+                            'border': `1px solid ${css.color.figDefaultComponentBorder}`
+                        });
+                        break;
+                    default:
+                        throw new Error('Invalid view');
+                }
+            });
+
+            it('Accessibility of preview tab', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(fillInTheGapsOverImageTextPage.questionInstructionsText().parents('[class*="ContentWrapper"]'));
+            });
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsOverImageText/fillInTheGapsOverImageTextShowCorrectAnswerForAllView.js

@@ -0,0 +1,153 @@
+import { dialogBoxBase, fillInTheGapsOverImageTextPage, itemPreviewPage, studentViewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+import { gradingViewPage } from "../../../pages";
+const views = ['Question preview', 'Item preview', 'Grading view'];
+var itemReferenceID = "";
+const correctTabAnswerArray = ['Flower', 'Leaf', 'Stem'];
+const incorrectAnswerArray = ['Root', 'Branch', 'Seed'];
+
+describe('Create item page - Fill in the gaps over image - text: Show correct answer', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        describe(`Fill in the gaps over image - text: Show correct answer for all or nothing scoring - ${view}`, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        cy.log('Navigating to Fill in the gaps over image - text question type');
+                        fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+                        cy.barsPreLoaderWait();
+                        fillInTheGapsOverImageTextPage.steps.addQuestionInstructions();
+                        fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+                        fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+                        fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+                        fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+                        fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, correctTabAnswerArray[0]);
+                        fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(1, correctTabAnswerArray[1]);
+                        fillInTheGapsOverImageTextPage.steps.allotPoints(10);
+                        fillInTheGapsOverImageTextPage.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;
+                }
+            });
+
+            afterEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        fillInTheGapsOverImageTextPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+                        fillInTheGapsOverImageTextPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+                        fillInTheGapsOverImageTextPage.steps.resetQuestionPreview();
+                        break;
+                    case 'Item preview':
+                        itemPreviewPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+                        fillInTheGapsOverImageTextPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+                        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(() => {
+                    fillInTheGapsOverImageTextPage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it('When the user selects \'Show correct answer\' checkbox without attempting the question, correct/incorrect icons or label should not be displayed, correct answer container along with \'Correct answers:\' label and correct responses with numeric count should be displayed below the question preview', () => {
+                if (view === 'Grading view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+                    studentViewPage.steps.clickOnGoToGradingViewButton();
+                    gradingViewPage.steps.verifyGradingViewScore(0, 10);
+                }
+                if (view === 'Question preview' || view === 'Item preview') {
+                    fillInTheGapsOverImageTextPage.steps.verifyPreviewTabScoreText(0, 10);
+                    fillInTheGapsOverImageTextPage.steps.checkShowCorrectAnswerCheckbox();
+                    fillInTheGapsOverImageTextPage.steps.verifyPreviewTabPointsBackgroundForIncorrectOrPartiallyCorrectAnswer();
+                }
+                fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectIconsDoesNotExist();
+                fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabelNotExists();
+                fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectBorderNotExists();
+                utilities.verifyInnerText(fillInTheGapsOverImageTextPage.previewTabCorrectAnswerLabel(), 'Correct answers:');
+                fillInTheGapsOverImageTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([correctTabAnswerArray[0], correctTabAnswerArray[1]], ['1', '2']);
+            });
+
+            it('When the user attempts the question incorrectly then on selecting \'Show correct answer\' checkbox, the user should be awarded 0 points and red cross-mark icons should be displayed beside all incorrect response fields, a label \'Incorrect answer\' and incorrect answer border should be displayed below the question preview and the correct answer container with all correct answers along with numeration should be displayed', () => {
+                fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, incorrectAnswerArray[0]);
+                fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, incorrectAnswerArray[1]);
+                if (view === 'Grading view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+                    studentViewPage.steps.clickOnGoToGradingViewButton();
+                    gradingViewPage.steps.verifyGradingViewScore(0, 10);
+                }
+                if (view === 'Question preview' || view === 'Item preview') {
+                    fillInTheGapsOverImageTextPage.steps.verifyPreviewTabScoreText(0, 10);
+                    fillInTheGapsOverImageTextPage.steps.checkShowCorrectAnswerCheckbox();
+                    fillInTheGapsOverImageTextPage.steps.verifyPreviewTabPointsBackgroundForIncorrectOrPartiallyCorrectAnswer();
+                }
+                fillInTheGapsOverImageTextPage.steps.verifyIncorrectOptionCrossmarkIcon(0);
+                fillInTheGapsOverImageTextPage.steps.verifyIncorrectOptionCrossmarkIcon(1);
+                fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+                fillInTheGapsOverImageTextPage.steps.verifyIncorrectAttemptBorder();
+                fillInTheGapsOverImageTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([correctTabAnswerArray[0], correctTabAnswerArray[1]], ['1', '2']);
+            });
+
+            it('When the user attempts the question partially correct then on selecting \'Show correct answer\' checkbox, the user should be awarded 0 points, green check-mark should be displayed beside correct response fields, red cross-mark icons should be displayed incorrect response fields, a label \'Incorrect answer\' and incorrect answer border should be displayed below the question preview and the correct answer container with correct answers for incorrectly answered responses along with numeration should be displayed', () => {
+                fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, incorrectAnswerArray[0]);
+                fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, correctTabAnswerArray[1]);
+                if (view === 'Grading view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+                    studentViewPage.steps.clickOnGoToGradingViewButton();
+                    gradingViewPage.steps.verifyGradingViewScore(0, 10);
+                }
+                if (view === 'Question preview' || view === 'Item preview') {
+                    fillInTheGapsOverImageTextPage.steps.verifyPreviewTabScoreText(0, 10);
+                    fillInTheGapsOverImageTextPage.steps.checkShowCorrectAnswerCheckbox();
+                    fillInTheGapsOverImageTextPage.steps.verifyPreviewTabPointsBackgroundForIncorrectOrPartiallyCorrectAnswer();
+                }
+                fillInTheGapsOverImageTextPage.steps.verifyIncorrectOptionCrossmarkIcon(0);
+                fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+                fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
+                fillInTheGapsOverImageTextPage.steps.verifyIncorrectAttemptBorder();
+                fillInTheGapsOverImageTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount([correctTabAnswerArray[0]], ['1']);
+            });
+
+            it('When the user attempts the question correctly then on selecting \'Show correct answer\' checkbox, the user should be awarded full points, green check-mark should be displayed beside correct response fields, a label \'Correct answer\' and correct answer border should be displayed below the question preview and the correct answer container should not be displayed', () => {
+                fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, correctTabAnswerArray[0]);
+                fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, correctTabAnswerArray[1]);
+                if (view === 'Grading view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+                    studentViewPage.steps.clickOnGoToGradingViewButton();
+                    gradingViewPage.steps.verifyGradingViewScore(10, 10);
+                }
+                if (view === 'Question preview' || view === 'Item preview') {
+                    fillInTheGapsOverImageTextPage.steps.verifyPreviewTabScoreText(10, 10);
+                    fillInTheGapsOverImageTextPage.steps.checkShowCorrectAnswerCheckbox();
+                    fillInTheGapsOverImageTextPage.steps.verifyPreviewTabPointsBackgroundForCorrectAnswer();
+                }
+                fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+                fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+                fillInTheGapsOverImageTextPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+                fillInTheGapsOverImageTextPage.steps.verifyCorrectAttemptBorder();
+                fillInTheGapsOverImageTextPage.steps.verifyPreviewTabCorrectAnswerContainerNotExist();
+            });
+        });
+    });
+});

package/cypress/pages/components/essayResponseCommonComponents.js

@@ -1,3 +1,5 @@
+const defaultFormattingOptionsPreviewTab = ['Bold (Ctrl+B)', 'Italic (Ctrl+I)', 'Underline (Ctrl+U)', 'Superscript', 'Insert/Remove Bulleted List', 'Insert/Remove Numbered List', 'Insert Hyperlink', 'Insert Image', 'Special characters', 'Insert Table'];
+
 const selectors = {
     //Basic section
     setWordLimitLabel: () => cy.get('[class*="EssayResponseComponentstyles__PropertyLabel"]'),
@@ -10,7 +12,13 @@ const selectors = {
     showWordCountLabel: () => cy.get('.essay-response-question-word-limit-check-box-form-group').eq(1),
     showWordCountCheckbox: () => cy.get('.essay-response-question-word-limit-check-box-form-group [type="checkbox"]').eq(1),
     previewTabToolbarWrapper: () => cy.get('.toolbar-overlay'),
-    previewTabToolbarOption: (formattingOption) => cy.get(`.essay-preview-wrapper a[title = "${formattingOption}"]`),
+    previewTabToolbarOption: (formattingOption = null) => {
+        if (formattingOption) {
+            return cy.get(`.essay-preview-wrapper a[title = "${formattingOption}"]`).eq(0)
+        } else {
+            return cy.get('.essay-preview-wrapper a[title]').eq(0)
+        }
+    },
     //Additional settings
     studentResponseAndLayoutLabel: () => cy.get('.layout-text'),
     predefinedTextLabel: () => cy.get('[class*="EssayResponsestyles__PropertyLabel"]'),
@@ -29,8 +37,8 @@ const selectors = {
     customSpecialCharacterInputField: () => cy.get('input[aria-label="Custom Special Characters"]'),
     wordLimitReachedWarningMessage: () => cy.get('[data-at="limit-reached"]'),
     //Preview tab
-    responseField: () => cy.get('[title="Enter your response to the question here."]'),
-    responseFieldWordCount: () => cy.get('[data-at="character-count"]'),
+    responseField: () => cy.get('[title="Enter your response to the question here."]').eq(0),
+    responseFieldWordCount: () => cy.get('[data-at="character-count"]').eq(0),
 }
 
 const steps = {
@@ -53,8 +61,17 @@ const steps = {
     },
 
     enterTextInResponseField: (textContent) => {
+        essayResponseCommonComponents.steps.enterInputInResponseField(textContent);
+        essayResponseCommonComponents.steps.verifyResponseFieldInput(textContent);
+    },
+
+    enterInputInResponseField: (textContent) => {
+        essayResponseCommonComponents.responseField()
+            .type(textContent);
+    },
+
+    verifyResponseFieldInput: (textContent) => {
         essayResponseCommonComponents.responseField()
-            .type(textContent)
             .find('p')
             .should('have.text', textContent);
     },
@@ -78,6 +95,24 @@ const steps = {
         essayResponseCommonComponents.responseField()
             .type('{backspace}');
     },
+
+    verifyGradingViewResponseFieldIsNonEditable: () => {
+        essayResponseCommonComponents.responseField()
+            .should('have.attr', 'contenteditable', 'false');
+    },
+
+    verifyDefaultToolbarOptions: () => {
+        essayResponseCommonComponents.previewTabToolbarOption()
+            .each(($element, count) => {
+                cy.wrap($element)
+                    .should('have.attr', 'title', defaultFormattingOptionsPreviewTab[count])
+                    .and('be.visible');
+            });
+        essayResponseCommonComponents.previewTabToolbarOption('Underline (Ctrl+U)')
+            .next()
+            .should('have.attr', 'role', 'separator')
+            .should('be.visible');
+    }
 }
 
 export const essayResponseCommonComponents = {

package/cypress/pages/components/figOverImageCommonComponent.js

@@ -32,7 +32,7 @@ const selectors = {
     setCorrectAnswerResponseFieldLabel: () => cy.get('.cloze-with-text-form-control-wrapper .input-field-label'),
     imageSectionImageLabel: () => cy.get('[class*="LabelImageWithDropDownstyles__LabelWrapper"]'),
     imageSectionImage: () => cy.get('.image-container img'),
-    imagePreviewTab: () => cy.get('.edit-question-preview-wrapper .image-container img'),
+    imagePreviewTab: () => cy.get('[class*="ClozeWithTextResponsestyles__ContentWrapper"] .image-container img'),
     imagePropertiesContainer: () => cy.get('[class*="AddTextResponseOnImagestyles__DimensionsContainer"]'),
     responseNumeration: () => cy.get('.response-input-adornment'),
     uploadImageSectionWrapper: () => cy.get('[class*="ImagePopupWrapper"]'),

package/cypress/pages/components/fillInTheGapsTextCommonComponent.js

@@ -19,7 +19,7 @@ const selectors = {
     ignoreSpacesBeforeAndAfterCheckbox: () => cy.get('.ngie-checkbox input').eq(1),
     matchFromAllResponsesLabel: () => cy.get('.ngie-checkbox-control-label').eq(2),
     matchFromAllResponsesCheckbox: () => cy.get('.ngie-checkbox input').eq(2),
-    responseFieldPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .response-input-field input[type="text"]'),
+    responseFieldPreviewTab: () => cy.get('[class*="ClozeWithTextResponsestyles__ContentWrapper"] .response-input-field input[type="text"]'),
     responseFieldWrapperPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .response-input-field'),
     previewTabCorrectAnswerContainer: () => cy.get('[class*="ClozeWithTextResponsestyles__CorrectAnswerWrapper"]'),
     previewTabCorrectAnswerResponseWrapper: () => cy.get('[class*="ClozeWithTextResponsestyles__CorrectResponseWrapper"] [aria-label*="Add answer for response"]'),

package/cypress/pages/components/questionInstructionsComponent.js

@@ -5,7 +5,7 @@ const css = Cypress.env('css');
 const selectors = {
     questionInstructionsLabelEditTab: () => cy.get('.edit-question-instruction-label'),
     questionInstructionsInputField: () => cy.get('[title="Question Instructions"]'),
-    questionInstructionsText: () => cy.get('.edit-question-preview-wrapper .question-instruction'),
+    questionInstructionsText: () => cy.get('.question-instruction').eq(0),
 }
 
 const steps = {

package/cypress/pages/correctAnswerViewPage.js

@@ -0,0 +1,21 @@
+import utilities from "../support/helpers/utilities"
+
+const selectors = {
+    correctAnswerViewQuestionInstructions: () => cy.get('.question-text-wrapper'),
+    manualScoredQuestionHelpText: () => cy.get('[class*="NoGuidanceWrapper"]'),
+    availablePoints: () => cy.get('.correct-answer-view-points')
+}
+
+const steps = {
+    /**
+     * @description Verify displayed available points
+     * @param {number} availablePoints displayed available points
+     */
+    verifyAvailablePoints: (availablePoints) => {
+        utilities.verifyTextContent(correctAnswerViewPage.availablePoints(), `${availablePoints} Points`);
+    },
+}
+export const correctAnswerViewPage = {
+    ...selectors,
+    steps
+}

package/cypress/pages/gradingViewPage.js

@@ -0,0 +1,24 @@
+import utilities from "../support/helpers/utilities";
+
+const selectors = {
+    scoredPointsInputField: () => cy.get('[class*="GradingScoreWrapper"] input'),
+    TotalPoints: () => cy.get('[class*="GradingScoreWrapper"] [class*="TotalPoints"]')
+}
+
+const steps = {
+    /**
+     * @description Verify the displayed score in grading view
+     * @param {number} scoredPoints Points scored for the attempted answer
+     * @param {number} TotalPoints Total number of points
+     */
+    verifyGradingViewScore: (scoredPoints, TotalPoints) => {
+        gradingViewPage.scoredPointsInputField()
+            .should('have.value', scoredPoints);
+        utilities.verifyTextContent(gradingViewPage.TotalPoints(), `/ ${TotalPoints} points`)
+    }
+}
+
+export const gradingViewPage = {
+    ...selectors,
+    steps
+}

package/cypress/pages/index.js

@@ -28,3 +28,7 @@ export * from './audioPlayerPage';
 export * from './highlightImagePage';
 export * from './fillInTheGapsOverImageDropdownPage';
 export * from './fillInTheGapsOverImageTextPage';
+export * from './itemPreviewPage';
+export * from './studentViewPage';
+export * from './gradingViewPage';
+export * from './correctAnswerViewPage';

package/cypress/pages/itemPreviewPage.js

@@ -0,0 +1,25 @@
+import { createQuestionBasePage, autoScoredPreviewBase } from "./components";
+
+const selectors = {
+    referenceID: () => cy.get('.edit-item-reference-id'),
+}
+
+const steps = {
+    ...createQuestionBasePage.steps,
+    ...autoScoredPreviewBase.steps,
+    getItemReferenceID: () => {
+        const itemRefID = [];
+        itemPreviewPage.referenceID()
+            .invoke('text')
+            .then(($text) => {
+                let refID = $text
+                itemRefID.push(refID)
+            });
+        return itemRefID;
+    },
+}
+
+export const itemPreviewPage = {
+    ...selectors,
+    steps
+}

package/cypress/pages/studentViewPage.js

@@ -0,0 +1,23 @@
+const selectors = {
+    submitButton: () => cy.get('button[aria-label="Submit"]'),
+    buttonGoToGradingView: () => cy.get('.action-btn-wrapper button'),
+}
+
+const steps = {
+    submitResponse: () => {
+        studentViewPage.submitButton()
+            .click();
+    },
+
+    clickOnGoToGradingViewButton: () => {
+        studentViewPage.buttonGoToGradingView()
+            .click();
+        cy.url()
+            .should('contain', 'grading-view');
+    }
+}
+
+export const studentViewPage = {
+    ...selectors,
+    steps
+}

package/cypress/support/helpers/utilities.js

@@ -116,6 +116,16 @@ const utilities = {
      */
     triggerMouseout: (selector) => {
         selector.trigger('mouseout');
+    },
+
+    /**
+     * @description Perform base64 encoding on provided string 
+     * @param {string} str string to undergo base64 encoding
+     * @returns {string} base64 encoded version of the provided string
+     */
+    base64Encoding: (str) => {
+        const base64 = btoa(str);
+        return encodeURIComponent(base64).replace(/([!*'();:@&=+$,/?#[]~])/g, match => `%${match.charCodeAt(0).toString(16).toUpperCase()}`);
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itemengine-cypress-automation",
-  "version": "1.0.63",
+  "version": "1.0.65",
   "description": "",
   "main": "index.js",
   "scripts": {

package/scripts/sorry-cypress.mjs

@@ -66,7 +66,8 @@ function setCommandLineEnvArgs() {
  * @param {string} ciBuildId
  */
 function runSorryCypress(ciBuildId, envArgs) {
-    let command = `cypress-cloud run --parallel --browser chrome --record --key ImagineLearning/itemengine-cypress-automation --ci-build-id ${ciBuildId} ${envArgs}`;
+    // let command = `cypress-cloud run --parallel --browser chrome --record --key ImagineLearning/itemengine-cypress-automation --ci-build-id ${ciBuildId} ${envArgs}`;
+    let command = `cypress-cloud run --parallel --browser chrome --record --key ImagineLearning/itemengine-cypress-automation --ci-build-id ${ciBuildId} ${envArgs} --spec "cypress\e2e\ILC\ShortTextResponse\*.js"`;
     execSync(command, { stdio: "inherit" });
 }