itemengine-cypress-automation 1.0.105 → 1.0.107

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

@@ -0,0 +1,107 @@
+import { fillInTheGapsOverImageDropdownPage, 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 optionsForDropdown1 = ['Flower', 'Petal', 'Stem', 'Branch'];
+const optionsForDropdown2 = ['Leaf', 'Leaves', 'Stem', 'Seed'];
+const correctAnswerArray = ['Flower', 'Leaf'];
+
+describe('Create item page - Fill in the gaps over image - dropdown - 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':
+                        cy.log('Navigate to fill in the gaps over image - dropdown question type');
+                        fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+                        cy.barsPreLoaderWait();
+                        fillInTheGapsOverImageDropdownPage.steps.addTextInQuestionInstructionsInputField('Fill in the gaps');
+                        fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+                        fillInTheGapsOverImageDropdownPage.steps.verifyImageIsUploaded();
+                        fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(10);
+                        fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(40);
+                        fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown1);
+                        fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionFields(1, optionsForDropdown2);
+                        fillInTheGapsOverImageDropdownPage.steps.allotPoints(20);
+                        fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, correctAnswerArray[0]);
+                        fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(1, correctAnswerArray[1]);
+                        fillInTheGapsOverImageDropdownPage.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)}`);
+                        fillInTheGapsOverImageDropdownPage.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') {
+                    fillInTheGapsOverImageDropdownPage.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(fillInTheGapsOverImageDropdownPage.questionInstructionsText(), 'Fill in the gaps');
+                utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.questionInstructionsText(), 'visible');
+            });
+
+            it('The image uploaded in the \'Background image\' section should be displayed', () => {
+                utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.canvasImageInPreviewTab(), 'visible');
+            });
+
+            if (view !== 'Grading view' && view !== 'Correct answer view') {
+                it('The added dropdowns should be displayed in the preview tab and they should be empty', () => {
+                    utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.dropdownPreviewTab(), 2);
+                    fillInTheGapsOverImageDropdownPage.steps.verifyTextInDropdownsInPreviewTab([{ dropdownIndex: 0, dropdownText: '​' }, { dropdownIndex: 1, dropdownText: '​' }]);
+                });
+
+                it('User should be select an option from the dropdown', () => {
+                    fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab([{ dropdownIndex: 0, dropdownOption: correctAnswerArray[0] }, { dropdownIndex: 1, dropdownOption: correctAnswerArray[1] }]);
+                });
+            } else if (view === 'Grading view') {
+                it('The dropdowns should be displayed filled with answers', () => {
+                    utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.dropdownPreviewTab(), 2);
+                    fillInTheGapsOverImageDropdownPage.steps.verifyTextInDropdownsInPreviewTab([{ dropdownIndex: 0, dropdownText: correctAnswerArray[0] }, { dropdownIndex: 1, dropdownText: correctAnswerArray[1] }]);
+                });
+
+                it('The dropdowns should not be editable', () => {
+                    fillInTheGapsOverImageDropdownPage.steps.verifyDropdownIsDisabled(0);
+                    fillInTheGapsOverImageDropdownPage.steps.verifyDropdownIsDisabled(1);
+                });
+            } else {
+                it('The dropdowns should be displayed filled with correct answers', () => {
+                    utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.dropdownPreviewTab(), 2);
+                    fillInTheGapsOverImageDropdownPage.steps.verifyTextInDropdownsInPreviewTab([{ dropdownIndex: 0, dropdownText: correctAnswerArray[0] }, { dropdownIndex: 1, dropdownText: correctAnswerArray[1] }]);
+                });
+            }
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/Scoring/manuallyAndNonScored.js

@@ -25,7 +25,7 @@ describe('Create Item page - Fill in the gaps over image with text: Manually and
 
         it('In Preview tab, question instructions, uploaded image and response areas should be displayed in the preview tab', () => {
             fillInTheGapsOverImageTextPage.steps.verifyQuestionInstructionsTextPreviewTab('fill in the gaps');
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.canvasImagePreviewTab(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.canvasImageInPreviewTab(), 'visible');
             utilities.verifyElementCount(fillInTheGapsOverImageTextPage.answerInputFieldPreviewTab(), 3);
             fillInTheGapsOverImageTextPage.steps.verifyTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: '' }, { responseIndex: 1, responseText: '' }, { responseIndex: 2, responseText: '' }]);
         });

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/Scoring/partialEqualWeightsBasic.js

@@ -17,7 +17,6 @@ describe('Create item page - Fill in the gaps over image with text: Partial equa
             fillInTheGapsOverImageTextPage.steps.insertResponseArea(40);
             fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
             fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: 'Leaf' }, { responseIndex: 2, responseText: 'Stem' }]);
-            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
             fillInTheGapsOverImageTextPage.steps.selectAutoScoredScoringSubtype('Partial equal weights');
             fillInTheGapsOverImageTextPage.steps.allotPoints(15);
             fillInTheGapsOverImageTextPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
@@ -104,7 +103,6 @@ describe('Create item page - Fill in the gaps over image with text: Partial equa
             fillInTheGapsOverImageTextPage.steps.insertResponseArea(40);
             fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
             fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: 'Leaf' }, { responseIndex: 2, responseText: 'Stem' }]);
-            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
             fillInTheGapsOverImageTextPage.steps.selectAutoScoredScoringSubtype('Partial equal weights');
             fillInTheGapsOverImageTextPage.steps.allotPoints(15);
             fillInTheGapsOverImageTextPage.steps.checkAllowStudentsToCheckAnswerCheckbox();

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/backgroundImageAndCanvasProperties.js

@@ -0,0 +1,408 @@
+import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import utilities from "../../../support/helpers/utilities";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+const textContainerPointerStyles = ['None', 'Bottom', 'Bottom right', 'Right', 'Top right', 'Top', 'Top left', 'Left', 'Bottom left'];
+
+describe('Create item page - Fill in the gaps: Question instructions, Options section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question instructions input field - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyQuestionInstructionsInputFieldEditTab();
+    });
+
+    describe('Question instructions input field - Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
+    });
+
+    describe('Background image section - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyBackgroundImageSectionContentWithCSSAndA11y();
+
+        fillInTheGapsOverImageTextPage.tests.verifyDeleteImagePopupContentAndFunctionality();
+    });
+
+    describe('Canvas section - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyCanvasLabelAndCanvas();
+
+        it('Select text container, Insert text container and Insert text buttons should be displayed.', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.selectResponseAreaButton(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.insertResponseAreaButton(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.insertTextAreaButton(), 'visible');
+        });
+
+        it('When \'Insert text container\' button is selected, then \'Insert text container\' label should be displayed inside canvas', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyCanvasMenuButtonSelected('Insert text container');
+            fillInTheGapsOverImageTextPage.steps.verifyCanvasSelectedMenuText('Insert text container');
+        });
+
+        it('When user hovers over select text container button, then \'Select text container\' tooltip should be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyTooltipInnerText(fillInTheGapsOverImageTextPage.selectResponseAreaButton, 'Select text container');
+        });
+
+        it('When user hovers over insert text container button, then \'Insert text container\' tooltip should be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyTooltipInnerText(fillInTheGapsOverImageTextPage.insertResponseAreaButton, 'Insert text container');
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyInsertTextTooltip();
+
+        fillInTheGapsOverImageTextPage.tests.verifyUndoRedoClearAllButtons();
+    });
+
+    describe('Canvas : Insert text container, Delete, Undo, Redo - Specify correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+        });
+
+        it('When user inserts 2 text container in canvas, then 2 response accordion should be added in specify correct answer section', () => {
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(60);
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(20);
+            utilities.verifyElementCount(fillInTheGapsOverImageTextPage.responseAccordion(), 3);
+        });
+
+        it('When user deletes a text container in canvas, then response accordion should be removed from specify correct answer section and remaining response accordion should be numbered appropriately', () => {
+            fillInTheGapsOverImageTextPage.steps.removeResponseArea(1);
+            utilities.verifyElementCount(fillInTheGapsOverImageTextPage.responseAccordion(), 2);
+            for (let i = 0; i < 2; i++) {
+                utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageTextPage.responseAccordionLabel(), i), `Response ${i + 1}`);
+            }
+        });
+
+        it('When user clicks on undo button in canvas section, then previous action should reversed and previously deleted response accordion should be added in specify correct answer section', () => {
+            fillInTheGapsOverImageTextPage.steps.undoAction();
+            utilities.verifyElementCount(fillInTheGapsOverImageTextPage.responseAccordion(), 3);
+        });
+
+        it('When the user clicks on the redo button after performing an undo action in canvas section, then the previously added response accordion should be deleted again in specify correct answer section', () => {
+            fillInTheGapsOverImageTextPage.steps.redoAction();
+            utilities.verifyElementCount(fillInTheGapsOverImageTextPage.responseAccordion(), 2);
+        });
+
+        it('When the user reaches the initial state by performing undo actions in canvas section, then specify correct answer section should not have response accordion', () => {
+            for (var i = 0; i < 4; i++) {
+                fillInTheGapsOverImageTextPage.steps.undoAction();
+            };
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseAccordion(), 'notExist');
+        });
+
+        it('When the user reaches the latest state by performing redo actions in canvas section, then 3 response accordions should be visible in specify correct answer section', () => {
+            for (var i = 0; i < 4; i++) {
+                fillInTheGapsOverImageTextPage.steps.redoAction();
+            };
+            utilities.verifyElementCount(fillInTheGapsOverImageTextPage.responseAccordion(), 2);
+        });
+
+        it('When user clicks on clear all in canvas, then response accordions in specified correct answer should disappear', () => {
+            fillInTheGapsOverImageTextPage.steps.clearAll();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseAccordion(), 'notExist');
+        });
+    });
+
+    describe('Canvas : Select text container -  Edit tab canvas section functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(20);
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(30);
+        });
+
+        it('When user clicks on \'Select text container\' button is selected, then \'Select\' label should be displayed inside canvas', () => {
+            fillInTheGapsOverImageTextPage.steps.selectCanvasMenuButton('Select text container');
+            fillInTheGapsOverImageTextPage.steps.verifyCanvasSelectedMenuText('Select');
+        });
+
+        it(`When user selects text container, then 9 options ${textContainerPointerStyles} should be displayed and by default ${textContainerPointerStyles[7]} should be selected`, () => {
+            fillInTheGapsOverImageTextPage.steps.selectResponseArea(1);
+            utilities.verifyElementCount(fillInTheGapsOverImageTextPage.responseAreaStyle(), 9);
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaPointerStyle(textContainerPointerStyles[7], 1);
+        });
+
+        it('CSS of text container', { tags: 'css' }, () => {
+            utilities.verifyCSS(utilities.getNthElement(fillInTheGapsOverImageTextPage.responseArea(), 1), {
+                'border': `1px solid ${css.color.activeComponentBorder}`
+            });
+            utilities.verifyCSS(utilities.getNthElement(fillInTheGapsOverImageTextPage.responseArea(), 0), {
+                'border': `1px dashed ${css.color.activeComponentBorder}`
+            });
+        });
+
+        it(`When user hovers over the pointer styles, then ${textContainerPointerStyles} tooltip should be displayed`, () => {
+            fillInTheGapsOverImageTextPage.steps.verifyPointerStyleTooltip();
+        });
+
+        it(`When the user has selected a text container and chooses  ${textContainerPointerStyles[0]}, then selected text container should have the specified effect applied, and the other text containers should remain unaffected.`, () => {
+            fillInTheGapsOverImageTextPage.steps.selectResponseAreaPointerStyle(textContainerPointerStyles[0]);
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaPointerStyle(textContainerPointerStyles[0], 1);
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaPointerStyle(textContainerPointerStyles[7], 0);
+        });
+
+        it(`When the user chooses  ${textContainerPointerStyles[5]}, then selected text containers should have the specified effect applied, and the other drop zones should remain unaffected.`, () => {
+            fillInTheGapsOverImageTextPage.steps.selectResponseAreaPointerStyle(textContainerPointerStyles[5]);
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaPointerStyle(textContainerPointerStyles[5], 1);
+            fillInTheGapsOverImageTextPage.steps.verifyResponseAreaPointerStyle(textContainerPointerStyles[7], 0);
+        });
+    });
+
+    describe('Canvas : Insert and delete text container -  Edit tab canvas section functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyCanvasResponseAreaContents();
+
+        fillInTheGapsOverImageTextPage.tests.verifyInsertAndDeleteResponseAreaFunctionality('text container');
+    });
+
+    describe('Canvas : Undo, Redo, Clear all -  Edit tab canvas section functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyUndoRedoClearAllButtonFunctionality('text container');
+    });
+
+    describe('Canvas : Insert text -  Edit tab canvas section functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyInsertTextAndTextColorButton();
+
+        fillInTheGapsOverImageTextPage.tests.verifyTextColorPopupFunctionality();
+
+        it('When the user clicks on the \'Edit color\' present in an \'Text color\' popup, then a select color popup should be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.clickOnEditColorButton();
+            fillInTheGapsOverImageTextPage.steps.verifyColorPopupIsDisplayed();
+        });
+
+        fillInTheGapsOverImageTextPage.tests. verifyColorPopupSelectColorTitle();
+        
+        fillInTheGapsOverImageTextPage.tests.verifySaturationAndOpacityGradientPalette('rgb(0, 0, 46)');
+
+        fillInTheGapsOverImageTextPage.tests.verifyColorHuePaletteAndHexInputField('rgb(0, 0, 255)', '#00002E');
+
+        fillInTheGapsOverImageTextPage.tests.verifyColorPopupFunctionality();
+
+        it('When the user has modified the selected color in the color popup and clicks on \'Ok\' button, then the popup should close, the color block should change to the new selected color and the modifications in the color popup should persist', () => {
+            fillInTheGapsOverImageTextPage.steps.clickOnOkButton();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.dialogBox(), 'notExist');
+            fillInTheGapsOverImageTextPage.steps.verifyTextColorOfTextBox('rgba(255, 0, 0, 0.5)');
+        });
+
+        it('When the user modifies the selected color in the color popup and clicks on \'Cancel\' button, then the popup should close, the color block should not change and the modifications in the color popup should not persist', () => {
+            fillInTheGapsOverImageTextPage.steps.clickOnTextColorButton();
+            fillInTheGapsOverImageTextPage.steps.clickOnEditColorButton()
+            fillInTheGapsOverImageTextPage.steps.addInputToHexInputField('#00002E');
+            fillInTheGapsOverImageTextPage.steps.clickOnCancelButton();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.dialogBox(), 'notExist');
+            fillInTheGapsOverImageTextPage.steps.verifyTextColorOfTextBox('rgba(255, 0, 0, 0.5)');
+        });
+    });
+
+    describe('Canvas : Select text container, Insert text container, Insert text, Undo, Redo and Clear all - Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+        });
+
+        it('When user insert text container in edit tab, then text container should be visible in preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(20);
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(90);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.answerInputFieldPreviewTab(), 'visible');
+        });
+
+        it('When user selects a text container and changes text container pointer style in edit tab, then changes in text container pointer should be reflected in preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.selectResponseArea(0);
+            fillInTheGapsOverImageTextPage.steps.selectResponseAreaPointerStyle(textContainerPointerStyles[1]);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyTextContainerPointerStyleInPreviewTab(textContainerPointerStyles[1], 0);
+            fillInTheGapsOverImageTextPage.steps.verifyTextContainerPointerStyleInPreviewTab(textContainerPointerStyles[8], 1);
+        });
+
+        it('When user insert text and changes color for text in edit tab, then inserted text should be displayed in canvas in preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.insertTextArea(60, 'Inserted text');
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyTextBoxExistInPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyTextColorOfTextBoxInPreviewTab('rgb(0, 0, 46)');
+            fillInTheGapsOverImageTextPage.steps.verifyTextOfTextBoxInPreviewTab('Inserted text');
+        });
+
+        it('When the user clicks on the undo button in edit tab, then previous action should be reversed and same should reflect in preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.undoAction();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyTextOfTextBoxInPreviewTab('');
+        });
+
+        it('When the user clicks on the redo button in edit tab, then previous action should be reinstated and same should reflect in preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.redoAction();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyTextBoxExistInPreviewTab();
+        });
+
+        it('When user clicks on \'Clear all\' button, then all text containers should be deleted in preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.clearAll();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyTextBoxNotExistInPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyTextContainerNotExistInPreviewTab();
+        });
+    });
+
+    describe('Image properties section - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyFileNameLabel('highlightImage.jpg');
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyImagePropertiesSectionContent();
+    });
+
+    describe('Image properties section -  Edit tab canvas section functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyFileNameLabel('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyImageAlignmentEditTabFunctionality();
+
+        fillInTheGapsOverImageTextPage.tests.verifyImageOpacityEditTabFunctionality();
+
+        //failed dur to https://redmine.zeuslearning.com/issues/560585
+        fillInTheGapsOverImageTextPage.tests.verifyFillImageToCanvasEditTabFunctionality();
+    });
+
+    describe('Canvas width, Canvas height, Image alternative text -  Edit tab canvas section functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyFileNameLabel('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyAspectRatioAndResetDimensionsButtonFunctionality();
+
+        fillInTheGapsOverImageTextPage.tests.verifyImageAlternativeTextEditTabFunctionality();
+    });
+
+    describe('Image properties, Image alignment, Opacity section - Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyFileNameLabel('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyImageAlignmentPreviewTabFunctionality();
+
+        fillInTheGapsOverImageTextPage.tests.verifyImageOpacityPreviewTabFunctionality();
+
+        //failed due to https://redmine.zeuslearning.com/issues/560585
+        fillInTheGapsOverImageTextPage.tests.verifyFillImageToCanvasPreviewTabFunctionality();
+    });
+
+    describe('Canvas width, Canvas height, Image alternative text - Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyFileNameLabel('highlightImage.jpg');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.uploadImageProgressBar(), 'visible');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+        });
+
+        it('When the user has uploaded canvas image, then switching to the preview tab should display canvas image with same dimensions', () => {
+             fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+             fillInTheGapsOverImageTextPage.steps.verifyImageIsUploadedInPreviewTab();
+             utilities.verifyElementVisibilityState( fillInTheGapsOverImageTextPage.canvasImageInPreviewTab(), 'visible');
+             fillInTheGapsOverImageTextPage.steps.verifyCanvasWidthInPreviewTab(768);
+             fillInTheGapsOverImageTextPage.steps.verifyCanvasHeightInPreviewTab(432);
+        });
+
+        it('When user updates width and height in edit tab, then updated changes should be reflected in preview tab', () => {
+             fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+             fillInTheGapsOverImageTextPage.steps.unlockAspectRatio();
+             fillInTheGapsOverImageTextPage.steps.updateCanvasWidth(800);
+             fillInTheGapsOverImageTextPage.steps.updateCanvasHeight(450);
+             fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+             fillInTheGapsOverImageTextPage.steps.verifyCanvasWidthInPreviewTab(800);
+             fillInTheGapsOverImageTextPage.steps.verifyCanvasHeightInPreviewTab(450);
+        });
+
+        it('When user resets image dimensions in edit tab, then updated changes should be reflected in preview tab', () => {
+             fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+             fillInTheGapsOverImageTextPage.steps.resetDimensions();
+             fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+             fillInTheGapsOverImageTextPage.steps.verifyCanvasWidthInPreviewTab(768);
+             fillInTheGapsOverImageTextPage.steps.verifyCanvasHeightInPreviewTab(432);
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyImageAlternativeTextPreviewTabFunctionality();
+
+        fillInTheGapsOverImageTextPage.tests.verifyImageNotExistPreviewTab();
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/editTabScoringSection.js

@@ -88,7 +88,7 @@ describe('Create item page - Fill in the gaps over image: Scoring section', () =
         fillInTheGapsOverImageTextPage.tests.verifyContentsOfSpecifyCorrectAnswerSection();
 
         it('When no points are entered in the points input field, then points per response should not be displayed on the response accordion', () => {
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseAccordionPointsWrapper(), 'notExist');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseAccordionPointsWrapper(), 'hidden');
         });
 
         it('When the user gives a score input to \'Points\' input field, then the score should be equally divided and displayed on each response tab with a \'Points:\' label', () => {
@@ -105,7 +105,7 @@ describe('Create item page - Fill in the gaps over image: Scoring section', () =
         });
 
         it('When the user deletes a response token, then points per response should get updated accordingly', () => {
-            fillInTheGapsOverImageTextPage.steps.removeDropzone(0);
+            fillInTheGapsOverImageTextPage.steps.removeResponseArea(0);
             fillInTheGapsOverImageTextPage.steps.verifyPointsDisplayedOnResponseAccordion(0, 2);
             fillInTheGapsOverImageTextPage.steps.verifyPointsDisplayedOnResponseAccordion(1, 2);
         });

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

@@ -68,7 +68,7 @@ describe('Create item page - Fill in the gaps over image - text - Preview conten
             });
 
             it('The image uploaded in the \'Background image\' section should be displayed', () => {
-                utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.canvasImagePreviewTab(), 'visible');
+                utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.canvasImageInPreviewTab(), 'visible');
             });
 
             if (view !== 'Grading view' && view !== 'Correct answer view') {

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/responseAnswersAndAcceptedStudentInput.js

@@ -50,7 +50,7 @@ describe('Create Item page - Fill in the gaps over image - text: ', () => {
 
         it('When the user clicks on the \'Add Alternate\' button, then one alternate answer input field should be displayed', () => {
             fillInTheGapsOverImageTextPage.steps.addAlternateAnswerInResponseAccordion(0);
-            utilities.verifyElementCount(fillInTheGapsOverImageTextPage.responseAccordionAnswerInputField(), 2);
+            utilities.verifyElementCount(fillInTheGapsOverImageTextPage.answerInputFieldSpecifyCorrectAnswerSection(), 2);
             utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseAccordionAddAlternateButton(), 'visible');
         });
 
@@ -77,7 +77,7 @@ describe('Create Item page - Fill in the gaps over image - text: ', () => {
             fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 1, responseText: 'Leaf' }]);
             fillInTheGapsOverImageTextPage.steps.verifyErrorMessageIsNotDisplayed();
             fillInTheGapsOverImageTextPage.steps.addAlternateAnswerInResponseAccordion(0);
-            utilities.verifyElementCount(fillInTheGapsOverImageTextPage.responseAccordionAnswerInputField(), 3);
+            utilities.verifyElementCount(fillInTheGapsOverImageTextPage.answerInputFieldSpecifyCorrectAnswerSection(), 3);
         });
 
         it('CSS of answer input field', { tags: 'css' }, () => {

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

@@ -56,6 +56,7 @@ describe('Create item page - Multiple selection: Header section and Saving quest
                 multipleSelectionPage.steps.addTextInQuestionInstructionsInputField('Which of the following is the major contributor to increased carbon dioxide levels because of urbanization? Select your answer from the options below.');
                 multipleSelectionPage.steps.addInputToOptionsInputField(options)
                 multipleSelectionPage.steps.allotPoints(10);
+                multipleSelectionPage.steps.checkOptionsCheckboxInSpecifyCorrectAnswerSection(0);
                 multipleSelectionPage.steps.verifyErrorMessageIsNotDisplayed();
                 multipleSelectionPage.steps.verifySpecifyCorrectAnswerErrorIconNotExists();
             });

package/cypress/e2e/ILC/MultipleSelection/studentViewSettings.js

@@ -14,7 +14,6 @@ describe('Create Item page - Multiple selection: Student view settings', () => {
     describe('Randomize options and lock option position : Edit tab', () => {
         abortEarlySetup();
         before(() => {
-            cy.log('Navigating to List sorting question type');
             multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
             cy.log('Adding question instructions, setting correct answer order and adding points');
             cy.barsPreLoaderWait();
@@ -150,7 +149,6 @@ describe('Create Item page - Multiple selection: Student view settings', () => {
     describe('Allow students to check answer: Edit tab', () => {
         abortEarlySetup();
         before(() => {
-            cy.log('Navigating to List sorting question type');
             multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
             cy.log('Adding question instructions, setting correct answer order and adding points');
             cy.barsPreLoaderWait();
@@ -231,7 +229,6 @@ describe('Create Item page - Multiple selection: Student view settings', () => {
     describe('Allow students to check answer: Preview tab', () => {
         abortEarlySetup();
         before(() => {
-            cy.log('Navigating to List sorting question type');
             multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
             cy.log('Adding question instructions, setting correct answer order and adding points');
             cy.barsPreLoaderWait();
@@ -306,7 +303,6 @@ describe('Create Item page - Multiple selection: Student view settings', () => {
     describe('Set minimum/maximum number of answers: Edit tab', () => {
         abortEarlySetup();
         before(() => {
-            cy.log('Navigating to List sorting question type');
             multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
             cy.log('Adding question instructions, setting correct answer order and adding points');
             cy.barsPreLoaderWait();
@@ -395,7 +391,6 @@ describe('Create Item page - Multiple selection: Student view settings', () => {
     describe('Set minimum/maximum number of answers: Edit tab functionality', () => {
         abortEarlySetup();
         before(() => {
-            cy.log('Navigating to List sorting question type');
             multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
             cy.log('Adding question instructions, setting correct answer order and adding points');
             cy.barsPreLoaderWait();
@@ -470,7 +465,6 @@ describe('Create Item page - Multiple selection: Student view settings', () => {
     describe('Set minimum/maximum number of answers: Preview tab', () => {
         abortEarlySetup();
         before(() => {
-            cy.log('Navigating to List sorting question type');
             multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
             cy.log('Adding question instructions, setting correct answer order and adding points');
             cy.barsPreLoaderWait();