itemengine-cypress-automation 1.0.119 → 1.0.121

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

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

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

@@ -0,0 +1,80 @@
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { dialogBoxBase, fillInTheGapsOverImageDropdownPage } from "../../../pages";
+import utilities from "../../../support/helpers/utilities";
+import { commonComponents } from "../../../pages/components";
+const optionsForDropdown = ['Flower', 'Petal', 'Stem', 'Branch'];
+
+describe('Create item page - Fill in the gaps over image - dropdown: Header section and Saving question', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Header section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyCreateQuestionPageQuestionTypeHeader('Fill in the gaps over image with dropdown');
+    });
+
+    describe('Tabs section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyTabsSection();
+    });
+
+    describe('Cancel button', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyCancelButton('fill in the gaps over image - dropdown')
+    });
+
+    describe('Save Question button', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        describe('Validation error messages', () => {
+            dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton();
+
+            it('Validation error messages should be displayed below required input fields', () => {
+                fillInTheGapsOverImageDropdownPage.steps.verifyQuestionInstructionsErrorMessage();
+                utilities.verifyInnerText(utilities.getNthElement(commonComponents.errorMessage(), 1), 'Error: Image is required.');
+                utilities.verifyInnerText(utilities.getNthElement(commonComponents.errorMessage(), 2), 'Error: Please insert a dropdown.');
+                fillInTheGapsOverImageDropdownPage.steps.verifyPointsFieldErrorMessage();
+                fillInTheGapsOverImageDropdownPage.steps.verifySpecifyCorrectAnswerErrorIconIsVisible();
+            });
+
+            it('Validation error messages should disappear when required input fields are filled', () => {
+                fillInTheGapsOverImageDropdownPage.steps.addTextInQuestionInstructionsInputField('Select correct option from dropdown');
+                fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+                fillInTheGapsOverImageDropdownPage.steps.verifyImageIsUploaded();
+                fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(10);
+                fillInTheGapsOverImageDropdownPage.steps.enterAndVerifyImageAlternativeTextInInputField('Image alternative text');
+                fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown);
+                fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, optionsForDropdown[0]);
+                fillInTheGapsOverImageDropdownPage.steps.allotPoints(10);
+                commonComponents.steps.verifyErrorMessageIsNotDisplayed();
+                fillInTheGapsOverImageDropdownPage.steps.verifySpecifyCorrectAnswerErrorIconNotExists();
+            });
+
+            commonComponents.tests.verifyCreateItemWrapperContentsA11y();
+        });
+
+        describe('Saving a question', () => {
+            it('Clicking on Save Question button the question should get saved and a snackbar with text \'Saved successfully!\' should be displayed', () => {
+                fillInTheGapsOverImageDropdownPage.steps.saveAQuestionAndVerifySnackbar();
+            });
+            fillInTheGapsOverImageDropdownPage.tests.verifySavedSuccessfullySnackbarCSSAndA11y();
+        });
+    });
+});