itemengine-cypress-automation 1.0.211 → 1.0.212

package/cypress/e2e/ILC/FillInTheGapsOverImageDragAndDrop/styleAndLayoutCustomization.js

@@ -0,0 +1,700 @@
+import { dialogBoxBase, fillInTheGapsOverImageDragAndDropPage } from "../../../pages";
+import { colorPopupComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const borderStyles = ["Dashed", "Dotted", "Dashed", "None"];
+const connectorStyles = ["Circle", "Square", "Diamond", "None"];
+const optionAlignment = ['Left', 'Center', 'Right'];
+const modifiedColor = 'rgb(121, 60, 60)'
+
+describe('Create Item page - Fill in the gaps over image with text: Style and layout customization', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Style and layout customization accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyStyleAndLayoutCustomizationAccordionProperties();
+    });
+
+    describe('Style and layout customization accordion: Text container section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('"Text container" label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.componentContainerLabel(), 'Dropzone');
+        });
+
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyFillColorSectionContents();
+
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyBorderColorSectionContents();
+
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyBorderStyleSectionContents('Dashed');
+
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyFillColorTooltips();
+
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyBorderColorTooltips();
+
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyStyleAndLayoutCustomizationAccordionContentsCSSAndA11y('Dashed');
+    });
+
+    describe('Fill color - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the default color block is in selected state in the "Fill color" section, then the background color of the text containers in the canvas image should be the default selected color', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyResponseAreaOverImageFillColor(0, css.color.optionsBg);
+        });
+
+        it('When the user selects the "None" color block, it should get in selected state and the no background color should be present for the text containers in the canvas image', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.selectColorBlock(1);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyResponseAreaOverImageFillColor(0, css.color.transparent);
+        });
+
+        it('When the user clicks on the "Edit color" button, modifies color for the selected color block, then the background color of the text containers in the canvas image should be the modified selected color', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.editColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyResponseAreaOverImageFillColor(0, modifiedColor);
+        });
+
+        it('When the adds a new text container, then the background color of the newly added text container should be the modified selected color', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(60);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyResponseAreaOverImageFillColor(0, modifiedColor);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyResponseAreaOverImageFillColor(1, modifiedColor);
+        });
+    });
+
+    describe('Border color - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the default color block is in selected state in the "Fill color" section, then the background color of the text containers in the canvas image should be the default selected color', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyResponseAreaOverImageBorderColor(0, `2px dashed ${css.color.activeComponentBorder}`);
+        });
+
+        it('When the user selects the "None" color block, it should get in selected state and the no background color should be present for the text containers in the canvas image', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.selectColorBlock(3);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyResponseAreaOverImageBorderColor(0, `2px dashed ${css.color.transparent}`);
+        });
+
+        it('When the user clicks on the "Edit color" button, modifies color for the selected color block, then the background color of the text containers in the canvas image should be the modified selected color', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.editColor(1);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyResponseAreaOverImageBorderColor(0, `2px dashed ${modifiedColor}`);
+        });
+
+        it('When the adds a new text container, then the background color of the newly added text container should be the modified selected color', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(60);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyResponseAreaOverImageBorderColor(0, `2px dashed ${modifiedColor}`);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyResponseAreaOverImageBorderColor(1, `2px dashed ${modifiedColor}`);
+        });
+    });
+
+    describe('Border color - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('When the default color block is in selected state in the "Fill color" section, then the background color of the text containers in the preview tab should be the default selected color', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzoneBorderColor(0, `2px dashed ${css.color.activeComponentBorder}`);
+        });
+
+        it('When the user selects the "None" color block, it should get in selected state and the no background color should be present for the text containers in the preview tab', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectColorBlock(3);
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzoneBorderColor(0, `2px dashed ${css.color.defaultBackground}`);
+        });
+
+        it('When the user clicks on the "Edit color" button, modifies color for the selected color block, then the color block should get updated accordingly', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.editColor(1);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzoneBorderColor(0, `2px dashed ${modifiedColor}`);
+        });
+
+        it('The background color of the text containers in the preview tab should be the modified selected color', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(60);
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzoneBorderColor(0, `2px dashed ${modifiedColor}`);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzoneBorderColor(1, `2px dashed ${modifiedColor}`);
+        });
+    });
+
+    describe('Color popup functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the user clicks on the \'Edit color\' present in an \'Text color\' popup, then a select color popup should be displayed', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.editColor(0);
+            colorPopupComponent.steps.verifyColorPopupIsDisplayed();
+        });
+
+        colorPopupComponent.tests.verifyColorPopupSelectColorTitle();
+
+        colorPopupComponent.tests.verifySaturationAndOpacityGradientPalette('rgb(255, 255, 255)');
+
+        colorPopupComponent.tests.verifyColorHuePaletteAndHexInputField('rgb(255, 0, 0)', '#ffffff');
+
+        colorPopupComponent.tests.verifyColorPopupFunctionality();
+    });
+
+    describe('Color popup - Updating the selected color', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the user moves the color picker in the color saturation palette, color in the selected color block and the hex code should change, color in the hue color palette and the opacity value should not change', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.editColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(121, 60, 60)');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(119, 60, 60)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHexValue('#793c3c');
+            colorPopupComponent.steps.verifyOpacityGradientPaletteColor('rgb(119, 60, 60)');
+        });
+
+        it('When the user moves the color picker in the color hue palette, color in the selected color block, the hex code and the saturation color palette should change and the opacity value should not change', () => {
+            colorPopupComponent.steps.clickInColorHuePalette();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(60, 121, 121)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(0, 255, 255)');
+            colorPopupComponent.steps.verifyHexValue('#3c7979');
+            colorPopupComponent.steps.verifyOpacityGradientPaletteColor('rgb(60, 119, 119)');
+        });
+
+        it('When the user changes the color using hex code, the color in color saturation palette and color hue palette should change and the opacity value should not change', () => {
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.verifyHexValue('#ff0000');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyOpacityGradientPaletteColor('rgb(255, 0, 0)');
+        });
+    });
+
+    describe('Color popup - \'Cancel\' and \'Ok\' buttons', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        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', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.editColor(0);
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.clickOnOpacityGradientHuePalette();
+            colorPopupComponent.steps.clickOnCancelButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            colorPopupComponent.steps.verifyColorBlockInOptionAccordion(0, 'rgb(245, 248, 255)');
+        });
+
+        it('When the user modifies 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', () => {
+            cy.log('Pre-step: clicking on the edit color button')
+            fillInTheGapsOverImageDragAndDropPage.steps.editColor(0);
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.clickOnOpacityGradientHuePalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            colorPopupComponent.steps.verifyColorBlockInOptionAccordion(0, 'rgba(255, 0, 0, 0.5)');
+        });
+    });
+
+    describe('Border style - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the "Dashed" border style is in selected state, then the border style of the text containers in the canvas image should be "Dashed"', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyResponseAreaOverImageBorderStyle(0, 'dashed');
+        });
+
+        borderStyles.forEach((style) => {
+            it(`When the user selects ${style}, then the border style of the text containers in the canvas image should update to ${style}`, () => {
+                fillInTheGapsOverImageDragAndDropPage.steps.selectBorderStyleToggleButton(style);
+                fillInTheGapsOverImageDragAndDropPage.steps.verifyResponseAreaOverImageBorderStyle(0, style);
+            });
+        })
+    });
+
+    describe('Border style - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('When the "Dashed" border style is in selected state, then the border style of the text containers in the preview tab should be "Dashed"', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyResponseAreaOverImageBorderStyle(0, 'dashed');
+        });
+
+        borderStyles.forEach((style) => {
+            it(`When the user selects ${style}, then the border style of the text containers in the preview tab should update to ${style}`, () => {
+                fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+                fillInTheGapsOverImageDragAndDropPage.steps.selectBorderStyleToggleButton(style);
+                fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+                fillInTheGapsOverImageDragAndDropPage.steps.verifyResponseAreaOverImageBorderStyle(0, style);
+            });
+        })
+    });
+
+    describe('Word wrap - Edit tab contents and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(['orci a scelerisque purus semper eget duis at tellus at urna', 'condimentum mattis pellentesque id nibh tortor id aliquet lectus']);
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'orci a scelerisque purus semper eget duis at tellus at urna': 0 });
+        });
+
+        it('Word wrap label and checkbox should be displayed and by default it should be unchecked', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.wordWrapLabel(), 'Word wrap');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.wordWrapLabel(), 'visible');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyWordWrapCheckboxIsUnchecked();
+        });
+
+        it('When word wrap is unchecked then the options in the dropzone should have ellipses', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOptionInDropzoneNotWrapped();
+        });
+
+        it('When the user checks the word wrap checkbox then the options should be without ellipses and an expand button should be displayed in the dropzone', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.checkWordWrapCheckbox();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOptionInDropzoneWrapped();
+        });
+
+        it('When the user clicks on the expand button then the entire option text should be displayed and a close button should be displayed', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.expandOptionInDropzone();
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.expandPopupDraggableOption(), 'orci a scelerisque purus semper eget duis at tellus at urna', 'condimentum mattis pellentesque id nibh tortor id aliquet lectus');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.expandPopupCloseButton(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.expandPopupCloseButton(), 'Close');
+        });
+
+        it('When the user clicks on the close button the expanded option should be minimized and the expand icon should be displayed again on the dropzone', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.closeExpandOptionPopup();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.expandIconButton(), 'visible');
+        });
+    });
+
+    describe('Word wrap - Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(['orci a scelerisque purus semper eget duis at tellus at urna', 'condimentum mattis pellentesque id nibh tortor id aliquet lectus']);
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'orci a scelerisque purus semper eget duis at tellus at urna': 0 });
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('When word wrap is unchecked then the options in the dropzone should have ellipses', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'orci a scelerisque purus semper eget duis at tellus at urna': 0 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOptionInDropzoneNotWrapped();
+        });
+
+        it('When the user checks the word wrap checkbox then the options should be without ellipses and an expand button should be displayed in the dropzone', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.checkWordWrapCheckbox();
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'orci a scelerisque purus semper eget duis at tellus at urna': 0 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOptionInDropzoneWrapped();
+        });
+
+        it('When the user clicks on the expand button then the entire option text should be displayed and a close button should be displayed', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.expandOptionInDropzone();
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.expandPopupDraggableOption(), 'orci a scelerisque purus semper eget duis at tellus at urna', 'condimentum mattis pellentesque id nibh tortor id aliquet lectus');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.expandPopupCloseButton(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.expandPopupCloseButton(), 'Close');
+        });
+
+        it('When the user clicks on the close button the expanded option should be minimized and the expand icon should be displayed again on the dropzone', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.closeExpandOptionPopup();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.expandIconButton(), 'visible');
+        });
+    });
+
+    describe('Option placement in dropzone - Edit tab contents and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.selectResponseArea(0);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(['Leaves', 'Flower']);
+            fillInTheGapsOverImageDragAndDropPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('2');
+        });
+
+        it('Option placement in dropzone label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.optionPlacementInDropzoneLabel(), 'Option placement in dropzone');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.optionPlacementInDropzoneLabel(), 'visible');
+        });
+
+        it('Inline and Block labels and radio buttons should be displayed and by default, inline should be selected', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.inlineLabel(), 'Inline');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.inlineRadioButton(), 'exist');
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.blockLabel(), 'Block');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.blockRadioButton(), 'exist');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInlineRadioButtonChecked();
+        });
+
+        it('When user drops options in the dropzone when \'Inline\' radio button is checked, the options should be displayed inline to each other', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Leaves': 0, 'Flower': 0 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInlineOptionPlacementSpecifyCorrectAnswer();
+        });
+
+        it('When the user selects \'Block\' radio button, then the options should be displayed under each other with an expand icon', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.checkBlockRadioButton();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyBlockOptionPlacementSpecifyCorrectAnswer();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.expandIconButton(), 'visible');
+        });
+
+        it('When the user clicks on the expand button then the entire option text should be displayed and a close button should be displayed', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.expandOptionInDropzone();
+            utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.expandPopupDraggableOption(), 0), 'Leaves');
+            utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.expandPopupDraggableOption(), 1), 'Flower');
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.expandPopupCloseButton(), 'Close');
+        });
+
+        it('When the user clicks on the close button the expanded option should be minimized and the expand icon should be displayed again on the dropzone', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.closeExpandOptionPopup();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.expandIconButton(), 'visible');
+        });
+    });
+
+    describe('Option placement in dropzone - Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.selectResponseArea(0);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(['Leaves', 'Flower']);
+            fillInTheGapsOverImageDragAndDropPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('2');
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('When user drops options in the dropzone when \'Inline\' radio button is checked, the options should be displayed inline to each other', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Leaves': 0, 'Flower': 0 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInlineOptionPlacementPreviewTab();
+        });
+
+        it('When the user selects \'Block\' radio button, then the options should be displayed under each other with an expand icon', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.checkBlockRadioButton();
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyBlockOptionPlacementPreviewTab();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.expandIconButton(), 'visible');
+        });
+
+        it('When the user clicks on the expand button then the entire option text should be displayed and a close button should be displayed', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.expandOptionInDropzone();
+            utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.expandPopupDraggableOption(), 0), 'Leaves');
+            utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.expandPopupDraggableOption(), 1), 'Flower');
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.expandPopupCloseButton(), 'Close');
+        });
+
+        it('When the user clicks on the close button the expanded option should be minimized and the expand icon should be displayed again on the dropzone', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.closeExpandOptionPopup();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.expandPopupCloseButton(), 'visible');
+        });
+    });
+
+    describe('Option alignment in dropzone - Edit tab contents and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.selectResponseArea(0);
+        });
+
+        it('Option alignment in dropzone label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.optionAlignmentInDropzoneLabel(), 'Option alignment in dropzone');
+        });
+
+        it('\'Left, Right, Center\' buttons should be displayed and by default \'Left\' alignment option should be selected', () => {
+            optionAlignment.forEach((option) => {
+                utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.optionAlignmentInDropzoneOptions(option.toLowerCase()), 'exist');
+            });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOptionAlignmentInDropzoneOptionSelected('left');
+        });
+
+        it('By default, the options in the dropzone should be left aligned', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOptionAlignmentInDropzoneInSpecifyCorrectAnswer('left');
+        });
+
+        optionAlignment.forEach((option) => {
+            it(`When user selects ${option} then the options should be ${option} aligned in the specify correct answer section`, () => {
+                fillInTheGapsOverImageDragAndDropPage.steps.selectOptionAlignmentInDropzoneOption(option)
+                fillInTheGapsOverImageDragAndDropPage.steps.verifyOptionAlignmentInDropzoneInSpecifyCorrectAnswer(option);
+            });
+        });
+    });
+
+    describe('Option alignment in dropzone - Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.selectResponseArea(0);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(['Leaves', 'Flower']);
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('By default, the options in the dropzone should be left aligned', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOptionAlignmentInDropzoneInPreviewTab('Left');
+        });
+
+        optionAlignment.forEach((option) => {
+            it(`When user selects ${option} then the options should be ${option} aligned in the preview tab`, () => {
+                fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+                fillInTheGapsOverImageDragAndDropPage.steps.selectOptionAlignmentInDropzoneOption(option);
+                fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+                fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Leaves': 0 })
+                fillInTheGapsOverImageDragAndDropPage.steps.verifyOptionAlignmentInDropzoneInPreviewTab(option);
+            });
+        });
+    });
+
+    describe('Set height and width for all dropzones contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('"Set height and width for all dropzones" label and checkbox should be displayed, By default the checkbox should be in unchecked state', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.setHeightAndWidthForAllDropzoneCheckboxLabel(), 'Set height and width for all dropzones');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifySetHeightAndWidthForAllDropzoneCheckboxUncheckedState();
+        });
+
+        it('When the user checks "Set height and width for all dropzones" checkbox, \'Height (px)\' and \'Width (px)\' labels and empty input fields should be displayed', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.checkSetHeightAndWidthForAllDropzoneCheckbox();
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.dropzoneHeightInputFieldLabel(), 'Height (px)')
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzoneHeightInputFieldValue('');
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.dropzoneWidthInputFieldLabel(), 'Width (px)')
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzoneWidthInputFieldValue('');
+        });
+
+        it('CSS of "Set height and width for all dropzones" section contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.setHeightAndWidthForAllDropzoneCheckboxLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of "Set height and width for all dropzones" section contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.setHeightAndWidthForAllDropzoneCheckboxLabel().parents('[data-ngie-testid="set-height-and-width-for-all-dropzones-checkbox"]'));
+        });
+    });
+
+    describe('Set height and width for all dropzones - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageDragAndDropPage.steps.checkSetHeightAndWidthForAllDropzoneCheckbox();
+        });
+
+        it('When the user has not set any height or width values in the "Set height and width for all dropzones" section, the dimensions of the text containers should be default', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzoneDimensionsSpecifyCorrectAnswer(80, 200);
+        });
+
+        it('When the user specifies the height and width, the dimensions of the text containers should update accordingly', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.setDropzoneHeight(100);
+            fillInTheGapsOverImageDragAndDropPage.steps.setDropzoneWidth(200);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzoneDimensionsSpecifyCorrectAnswer(100, 200);
+        });
+    });
+
+    describe('Set height and width for all dropzones - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageDragAndDropPage.steps.checkSetHeightAndWidthForAllDropzoneCheckbox();
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not set any height or width values in the "Set height and width for all dropzones" section, the dimensions of the text containers should be default', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzoneDimensionsPreviewTab(80, 200);
+        });
+
+        it('When the user specifies the height and width, the dimensions of the text containers should update accordingly', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.setDropzoneHeight(100);
+            fillInTheGapsOverImageDragAndDropPage.steps.setDropzoneWidth(210);
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzoneDimensionsPreviewTab(100, 210);
+        });
+    });
+
+    describe('Dropzone connector style contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('"Dropzone connector style" label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.dropzoneConnectorStyleLabel(), 'Dropzone connector style');
+        });
+
+        it('"Connector end point shape" label along with four icon buttons - "Circle", "Square", "Diamond" and "None" should be displayed. By default, "Circle" option should be in selected state', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.connectorEndPointShapeLabel(), 'Connector end point shape');
+            connectorStyles.forEach((option) => {
+                utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.connectorEndPointShapeOptions(option.toLowerCase()), 'exist');
+            });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyConnectorStyleOptionSelected('circle')
+        });
+    });
+
+    describe('Dropzone connector style - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.selectResponseArea(0);
+            fillInTheGapsOverImageDragAndDropPage.steps.selectResponseAreaPointerStyle('left');
+        });
+
+        it('When the "Circle" connector style is in selected state, then the connector style of the text containers in the canvas image should be "Dashed"', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyResponseAreaConnectorEndPointShape('Circle');
+        });
+
+        connectorStyles.forEach((button) => {
+            it(`When the user selects ${button}, then the connector style of the text containers in the canvas image should update to ${button}`, () => {
+                fillInTheGapsOverImageDragAndDropPage.steps.selectEndPointShapeButton(button);
+                fillInTheGapsOverImageDragAndDropPage.steps.verifyResponseAreaConnectorEndPointShape(button);
+            });
+        })
+    });
+
+    describe('Dropzone connector style - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.selectResponseArea(0);
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('When the "Circle" connector style is in selected state, then the connector style of the text containers in the canvas image should be "Dashed"', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyResponseAreaConnectorEndPointShapePreviewTab('Circle');
+        });
+
+        connectorStyles.forEach((button) => {
+            it(`When the user selects ${button}, then the connector style of the text containers in the canvas image should update to ${button}`, () => {
+                fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+                fillInTheGapsOverImageDragAndDropPage.steps.selectEndPointShapeButton(button);
+                fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+                fillInTheGapsOverImageDragAndDropPage.steps.verifyResponseAreaConnectorEndPointShapePreviewTab(button);
+            });
+        })
+    });
+});