itemengine-cypress-automation 1.0.83 → 1.0.85

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

@@ -0,0 +1,678 @@
+import { fillInTheGapsOverImageDragAndDropPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const groupedOptions = [['Petals', 'Flower', 'Stem', 'Seed'], ['Rose', 'Lily', 'Tulip', 'Orchid']];
+
+describe('Create Item Page: Fill in the gaps over image - drag and drop: Click and drop cases for \'Standard\' and \'Grouped\' response options layouts in \'Specify correct answer\' section and \'Preview tab\'', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Click and drop cases for \'Standard\' response options layout in \'Specify correct answer\' section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - drag and drop question type, add input to option input fields');
+            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.insertResponseArea(40);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageDragAndDropPage.steps.addMultipleOptionFields(2);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(groupedOptions[0]);
+            fillInTheGapsOverImageDragAndDropPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('2');
+        });
+
+        it('When the user has not selected any option, the options and dropzone should be in inactive state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDraggableOptionsInSpecifyCorrectAnswerSection();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
+        });
+
+        it('CSS of inactive state of options and dropzone', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption(), {
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                'background-color': css.color.defaultBackground,
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption().find('.question-text-wrapper'), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOptionDragIcon().find('g path').eq(1), {
+                'fill': css.color.secondaryBtn
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.dropzoneWrapperSpecifyCorrectAnswerSection().eq(0), {
+                'border-left': `2px dashed ${css.color.activeComponentBorder}`
+            });
+        });
+
+        it('Accessibility of inactive state of options and dropzone', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.pointsWrapper().parents('.label-image-dnd-align-bottom'));
+        });
+
+        it('When the user selects an option, it should get in selected state and all the other dropzone should be displayed in inactive state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnDraggableOptionInSpecifyCorrectAnswerSection('Petals');
+            cy.log('checking active state of selected option')
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyActiveStateOfDraggableOptionInSpecifyCorrectAnswerSection(0);
+            cy.log('checking default state of unselected option(s)')
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfUnselectedDraggableOptionsInSpecifyCorrectAnswerSection([1, 2, 3]);
+            cy.log('checking active state of all category cells');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
+        });
+
+        it('CSS of active state of options and inactive state of dropzone', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption().eq(0), {
+                'border': `1px solid ${css.color.activeComponentBorder}`,
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOptionDragIcon().find('g path').eq(1), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.dropzoneWrapperSpecifyCorrectAnswerSection(), 0), {
+                'border-left': `2px dashed ${css.color.activeComponentBorder}`
+            });
+        });
+
+        it('Accessibility of active state of options and dropzone', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.pointsWrapper().parents('.label-image-dnd-align-bottom'));
+        });
+
+        it('When the user deselects the option, it should get in deselected state and the dropzone should remain in the inactive state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnDraggableOptionInSpecifyCorrectAnswerSection('Petals');
+            cy.log('Checking default state of deselected option')
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDraggableOptionsInSpecifyCorrectAnswerSection();
+            cy.log('Checking default inactive state of category cells')
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
+        });
+
+        it('When the user drops an option in one of the dropzone, the option should get removed from the response container, the dropzone should get filled with that option and the other dropzone should remain in inactive state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Petals': 0 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInDropzoneSpecifyCorrectAnswerSection(0, ['Petals']);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(['Flower', 'Stem', 'Seed']);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
+        });
+
+        it('When the user has dropped an option inside a dropzone, drag handle should not be displayed in the dropzone', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDragHandleNotVisibleInFilledDropzoneOfSpecifyCorrectAnswerSection(0);
+        });
+
+        it('CSS of filled dropzone', { tags: 'css' }, () => {
+            fillInTheGapsOverImageDragAndDropPage.dropzoneSpecifyCorrectAnswerSection()
+                .eq(0)
+                .within(() => {
+                    utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption(), {
+                        'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                        'background-color': css.color.defaultBackground
+                    });
+                    utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption().find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular,
+                    });
+                });
+        });
+
+        it('Accessibility of filled dropzone', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.pointsWrapper().parents('.label-image-dnd-align-bottom'));
+        });
+
+        it('When the user drops an option on a filled dropzone, the existing option should persist in the dropzone', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Flower': 0 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInDropzoneSpecifyCorrectAnswerSection(0, ['Petals', 'Flower']);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(['Stem', 'Seed']);
+        });
+
+        it('When the user selects an option from the filled dropzone, dropzone should remain inactive', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnDraggableOptionInDropzoneOfSpecifyCorrectAnswerSection('Petals', 0);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
+        });
+
+        it('CSS of option from the filled dropzone in selected state', { tags: 'css' }, () => {
+            fillInTheGapsOverImageDragAndDropPage.dropzoneSpecifyCorrectAnswerSection()
+                .eq(0)
+                .within(() => {
+                    utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption().eq(0), {
+                        'border': `1px solid ${css.color.activeComponentBorder}`,
+                        'background-color': css.color.defaultBackground
+                    });
+                });
+        });
+
+        it('Accessibility of option from the filled dropzone in selected state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.pointsWrapper().parents('.label-image-dnd-align-bottom'));
+        });
+
+        it('When the user deselects an option from the filled dropzone, the option should return to the inactive state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnDraggableOptionInDropzoneOfSpecifyCorrectAnswerSection('Petals', 0);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDraggableOptionsInSpecifyCorrectAnswerSection();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
+        });
+
+        it('When the user selects a filled option and clicks in the response container, the selected option should get back in the response container and \'Error: Please set a correct answer\' error message should be displayed', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInOptionsContainerInSpecifyCorrectAnswerSection('Petals');
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInOptionsContainerInSpecifyCorrectAnswerSection('Flower');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(['Petals', 'Flower', 'Stem', 'Seed']);
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.errorMessage(), 'Error: Please set a correct answer.');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.errorMessage(), 'visible');
+        });
+
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When the user fills a dropzone, the dropzone should get filled with the option and the \'Error: Please set a correct answer\' error message should disappear', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Petals': 0 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('The user should be able to move an option from one dropzone to another dropzone', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnDraggableOptionInDropzoneOfSpecifyCorrectAnswerSection('Petals', 0);
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnDropzoneOfSpecifyCorrectAnswerSection(1);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzoneTextSpecifyCorrectAnswerSection(0, '');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInDropzoneSpecifyCorrectAnswerSection(1, ['Petals']);
+        });
+    });
+
+    describe('Click and drop cases for \'Standard\' response options layout in \'Preview tab\'', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - drag and drop question type, add input to option input fields');
+            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.insertResponseArea(40);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageDragAndDropPage.steps.addMultipleOptionFields(2);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(groupedOptions[0]);
+            fillInTheGapsOverImageDragAndDropPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('2');
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not selected any option, the options and dropzone should be in inactive state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab();
+        });
+
+        it('CSS of inactive state of options and dropzone', { tags: 'css' }, () => {
+            fillInTheGapsOverImageDragAndDropPage.optionsContainerPreviewTab()
+                .within(() => {
+                    utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption(), {
+                        'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                        'background-color': css.color.defaultBackground,
+                    });
+                    utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption().find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular,
+                    });
+                    utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOptionDragIcon().find('g path').eq(1), {
+                        'fill': css.color.secondaryBtn
+                    });
+                });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.dropzoneWrapperPreviewTab().eq(0), {
+                'border-left': `2px dashed ${css.color.activeComponentBorder}`
+            });
+        });
+
+        it('Accessibility of inactive state of options and dropzone', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.imageInPreviewTab());
+        });
+
+        it('When the user selects an option, it should get in selected state and all the dropzone should remain in inactive state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnDraggableOptionInPreviewTab('Petals');
+            cy.log('checking active state of selected option')
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyActiveStateOfDraggableOptionInPreviewTab(0);
+            cy.log('checking default state of unselected option(s)')
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfUnselectedDraggableOptionsInPreviewTab([1, 2, 3]);
+            cy.log('checking active state of all category cells');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab();
+        });
+
+        it('CSS of active state of options and dropzone', { tags: 'css' }, () => {
+            fillInTheGapsOverImageDragAndDropPage.optionsContainerPreviewTab()
+                .within(() => {
+                    utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption().eq(0), {
+                        'border': `1px solid ${css.color.activeComponentBorder}`,
+                        'background-color': css.color.defaultBackground
+                    });
+                    utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOptionDragIcon().find('g path').eq(1), {
+                        'fill': css.color.activeButtons
+                    });
+                });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.dropzoneWrapperPreviewTab().eq(0), {
+                'border-left': `2px dashed ${css.color.activeComponentBorder}`
+            });
+        });
+
+        it('Accessibility of active state of options and dropzone', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.imageInPreviewTab());
+        });
+
+        it('When the user deselects the option, it should get in deselected state and the dropzone should remain in the inactive state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnDraggableOptionInPreviewTab('Petals');
+            cy.log('Checking default state of deselected option')
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab();
+            cy.log('Checking default inactive state of category cells')
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab();
+        });
+
+        it('When the user drops an option in one of the dropzone, the option should get removed from the response container, the dropzone should get filled with that option and the other dropzone should return to inactive state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Petals': 0 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(0, ['Petals']);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(['Flower', 'Stem', 'Seed']);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab();
+        });
+
+        it('When the user has dropped an option inside a dropzone, drag handle should not be displayed in the dropzone', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDragHandleNotVisibleInFilledDropzoneOfPreviewTab(0);
+        });
+
+        it('CSS of filled dropzone', { tags: 'css' }, () => {
+            fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTab()
+                .eq(0)
+                .within(() => {
+                    utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption(), {
+                        'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                        'background-color': css.color.defaultBackground
+                    });
+                    utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption().find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular,
+                    });
+                });
+        });
+
+        it('Accessibility of filled dropzone', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.imageInPreviewTab());
+        });
+
+        it('When the user drops an option on a filled dropzone, the existing option should persist in the dropzone', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Flower': 0 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(0, ['Petals', 'Flower']);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(['Stem', 'Seed']);
+        });
+
+        it('When the user selects an option from the filled dropzone, the dropzone should remain inactive', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnDraggableOptionInDropzoneOfPreviewTab('Petals', 0);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab();
+        });
+
+        it('CSS of option from the filled dropzone in selected state', { tags: 'css' }, () => {
+            fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTab()
+                .eq(0)
+                .within(() => {
+                    utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption().eq(0), {
+                        'border': `1px solid ${css.color.activeComponentBorder}`,
+                        'background-color': css.color.defaultBackground
+                    });
+                });
+        });
+
+        it('Accessibility of option from the filled dropzone in selected state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.imageInPreviewTab());
+        });
+
+        it('When the user deselects an option from the filled dropzone, the option should return to the inactive state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnDraggableOptionInDropzoneOfPreviewTab('Petals', 0);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab();
+        });
+
+        it('The user should be able to move an option from one dropzone to another dropzone', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnDraggableOptionInDropzoneOfPreviewTab('Petals', 0);
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnDropzoneOfPreviewTab(1);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(0, ['Flower']);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(1, ['Petals']);
+        });
+    });
+
+    describe('Click and drop cases for \'Grouped\' response options layout in \'Specify correct answer\' section', () => {
+        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.insertResponseArea(40);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageDragAndDropPage.steps.expandDraggableOptionsLayoutDropdown();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectOptionFromDraggableOptionsLayoutDropdown('Grouped');
+            fillInTheGapsOverImageDragAndDropPage.steps.addGroupTitle('Group A');
+            fillInTheGapsOverImageDragAndDropPage.steps.addMultipleOptionFields(2);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(groupedOptions[0]);
+            fillInTheGapsOverImageDragAndDropPage.steps.addGroupWithTitleAndOptionsInDraggableOptionsSection('Group A', groupedOptions[1]);
+            fillInTheGapsOverImageDragAndDropPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('2');
+        });
+
+        it('When the user has not selected any option, the options and dropzone should be in inactive state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDraggableOptionsInSpecifyCorrectAnswerSection();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
+        });
+
+        it('CSS of inactive state of options and dropzone', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption(), {
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                'background-color': css.color.defaultBackground,
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption().find('.question-text-wrapper'), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOptionDragIcon().find('g path').eq(1), {
+                'fill': css.color.secondaryBtn
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.dropzoneWrapperSpecifyCorrectAnswerSection().eq(0), {
+                'border-left': `2px dashed ${css.color.activeComponentBorder}`
+            });
+        });
+
+        it('Accessibility of inactive state of options and dropzone', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.pointsWrapper().parents('.label-image-dnd-align-bottom'));
+        });
+
+        it('When the user selects an option, it should get in selected state and all the dropzone remain in inactive state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnDraggableOptionInSpecifyCorrectAnswerSection('Petals');
+            cy.log('checking active state of selected option')
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyActiveStateOfDraggableOptionInSpecifyCorrectAnswerSection(0);
+            cy.log('checking default state of unselected option(s)')
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfUnselectedDraggableOptionsInSpecifyCorrectAnswerSection([1, 2, 3]);
+            cy.log('checking inactive state of all category cells');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
+        });
+
+        it('CSS of active state of options and dropzone', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption().eq(0), {
+                'border': `1px solid ${css.color.activeComponentBorder}`,
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOptionDragIcon().find('g path').eq(1), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of active state of options and dropzone', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.pointsWrapper().parents('.label-image-dnd-align-bottom'));
+        });
+
+        it('When the user deselects the option, it should get in deselected state and the dropzone should return to the inactive state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnDraggableOptionInSpecifyCorrectAnswerSection('Petals');
+            cy.log('Checking default state of deselected option')
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDraggableOptionsInSpecifyCorrectAnswerSection();
+            cy.log('Checking default inactive state of category cells')
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
+        });
+
+        it('When the user drops an option in one of the dropzone, the option should get removed from the respective group of the response container, the dropzone should get filled with that option and the other dropzone should return to inactive state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Petals': 0 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInDropzoneSpecifyCorrectAnswerSection(0, ['Petals']);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(0, ['Flower', 'Stem', 'Seed']);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(1, groupedOptions[1]);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
+        });
+
+        it('When the user has dropped an option inside a dropzone, drag handle should not be displayed in the dropzone', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDragHandleNotVisibleInFilledDropzoneOfSpecifyCorrectAnswerSection(0);
+        });
+
+        it('CSS of filled dropzone', { tags: 'css' }, () => {
+            fillInTheGapsOverImageDragAndDropPage.dropzoneSpecifyCorrectAnswerSection()
+                .eq(0)
+                .within(() => {
+                    utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption(), {
+                        'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                        'background-color': css.color.defaultBackground
+                    });
+                    utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption().find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular,
+                    });
+                });
+        });
+
+        it('Accessibility of filled dropzone', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.pointsWrapper().parents('.label-image-dnd-align-bottom'));
+        });
+
+        it('When the user drops an option on a filled dropzone, the existing option should persist in the dropzone', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Flower': 0 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInDropzoneSpecifyCorrectAnswerSection(0, ['Petals', 'Flower']);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(0, ['Stem', 'Seed']);
+        });
+
+        it('When the user selects an option from the filled dropzone, the dropzone should be in inactive state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnDraggableOptionInDropzoneOfSpecifyCorrectAnswerSection('Petals', 0);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
+        });
+
+        it('CSS of option from the filled dropzone in selected state', { tags: 'css' }, () => {
+            fillInTheGapsOverImageDragAndDropPage.dropzoneSpecifyCorrectAnswerSection()
+                .eq(0)
+                .within(() => {
+                    utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption().eq(0), {
+                        'border': `1px solid ${css.color.activeComponentBorder}`,
+                        'background-color': css.color.defaultBackground
+                    });
+                });
+        });
+
+        it('Accessibility of option from the filled dropzone in selected state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.pointsWrapper().parents('.label-image-dnd-align-bottom'));
+        });
+
+        it('When the user deselects an option from the filled dropzone, the option should return to the inactive state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnDraggableOptionInDropzoneOfSpecifyCorrectAnswerSection('Petals', 0);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDraggableOptionsInSpecifyCorrectAnswerSection();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
+        });
+
+        it('When the user selects a filled option and clicks in the response container, the selected option should get back in the response container and \'Error: Please set a correct answer\' error message should be displayed', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInOptionsContainerInSpecifyCorrectAnswerSection('Petals');
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInOptionsContainerInSpecifyCorrectAnswerSection('Flower');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(0, groupedOptions[0]);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(1, groupedOptions[1]);
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.errorMessage(), 'Error: Please set a correct answer.');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.errorMessage(), 'visible');
+        });
+
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When the user fills a dropzone, the dropzone should get filled with the option and the \'Error: Please set a correct answer\' error message should disappear', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Petals': 0 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('The user should be able to move an option from one dropzone to another dropzone', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnDraggableOptionInDropzoneOfSpecifyCorrectAnswerSection('Petals', 0);
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnDropzoneOfSpecifyCorrectAnswerSection(1);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzoneTextSpecifyCorrectAnswerSection(0, '');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInDropzoneSpecifyCorrectAnswerSection(1, ['Petals']);
+        });
+
+        it('When user has dropped all the options from a group in the response areas, then empty group should be displayed in the options container', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Flower': 0, 'Stem': 0, 'Seed': 2 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyGroupedOptionsTitleSpecifyCorrectAnswerSection(0, 'Group A')
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyEmptyGroupInSpecifyCorrectAnswerSection(0);
+        });
+    });
+
+    describe('Click and drop cases for \'Grouped\' response options layout in \'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.insertResponseArea(40);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageDragAndDropPage.steps.expandDraggableOptionsLayoutDropdown();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectOptionFromDraggableOptionsLayoutDropdown('Grouped');
+            fillInTheGapsOverImageDragAndDropPage.steps.addGroupTitle('Group A');
+            fillInTheGapsOverImageDragAndDropPage.steps.addMultipleOptionFields(2);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(groupedOptions[0]);
+            fillInTheGapsOverImageDragAndDropPage.steps.addGroupWithTitleAndOptionsInDraggableOptionsSection('Group A', groupedOptions[1]);
+            fillInTheGapsOverImageDragAndDropPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('2');
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not selected any option, the options and dropzone should be in inactive state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab();
+        });
+
+        it('CSS of inactive state of options and dropzone', { tags: 'css' }, () => {
+            fillInTheGapsOverImageDragAndDropPage.optionsContainerPreviewTab()
+                .within(() => {
+                    utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption(), {
+                        'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                        'background-color': css.color.defaultBackground,
+                    });
+                    utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption().find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular,
+                    });
+                    utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOptionDragIcon().find('g path').eq(1), {
+                        'fill': css.color.secondaryBtn
+                    });
+                });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.dropzoneWrapperPreviewTab().eq(0), {
+                'border-left': `2px dashed ${css.color.activeComponentBorder}`
+            });
+        });
+
+        it('Accessibility of inactive state of options and dropzone', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.imageInPreviewTab());
+        });
+
+        it('When the user selects an option, it should get in selected state and all the dropzone should get in inactive state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnDraggableOptionInPreviewTab('Petals');
+            cy.log('checking active state of selected option')
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyActiveStateOfDraggableOptionInPreviewTab(0);
+            cy.log('checking default state of unselected option(s)')
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfUnselectedDraggableOptionsInPreviewTab([1, 2, 3]);
+            cy.log('checking inactive state of all category cells');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab();
+        });
+
+        it('CSS of active state of options and dropzone', { tags: 'css' }, () => {
+            fillInTheGapsOverImageDragAndDropPage.optionsContainerPreviewTab()
+                .within(() => {
+                    utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption().eq(0), {
+                        'border': `1px solid ${css.color.activeComponentBorder}`,
+                        'background-color': css.color.defaultBackground
+                    });
+                    utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOptionDragIcon().find('g path').eq(1), {
+                        'fill': css.color.activeButtons
+                    });
+                });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.dropzoneWrapperPreviewTab().eq(0), {
+                'border': `2px dashed ${css.color.activeComponentBorder}`
+            });
+        });
+
+        it('Accessibility of active state of options and dropzone', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.imageInPreviewTab());
+        });
+
+        it('When the user deselects the option, it should get in deselected state and the dropzone should return to the inactive state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnDraggableOptionInPreviewTab('Petals');
+            cy.log('Checking default state of deselected option')
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab();
+            cy.log('Checking default inactive state of category cells')
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab();
+        });
+
+        it('When the user drops an option in one of the dropzone, the option should get removed from the respective group of the response container, the dropzone should get filled with that option and the other dropzone should return to inactive state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Petals': 0 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(0, ['Petals']);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyGroupedContainerContentsInPreviewTab(0, ['Flower', 'Stem', 'Seed']);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyGroupedContainerContentsInPreviewTab(1, groupedOptions[1]);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab();
+        });
+
+        it('When the user has dropped an option inside a dropzone, drag handle should not be displayed in the dropzone', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDragHandleNotVisibleInFilledDropzoneOfPreviewTab(0);
+        });
+
+        it('CSS of filled dropzone', { tags: 'css' }, () => {
+            fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTab()
+                .eq(0)
+                .within(() => {
+                    utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption(), {
+                        'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                        'background-color': css.color.defaultBackground
+                    });
+                    utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption().find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular,
+                    });
+                });
+        });
+
+        it('Accessibility of filled dropzone', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.imageInPreviewTab());
+        });
+
+        it('When the user drops an option on a filled dropzone, the existing option should persist in the dropzone', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Flower': 0 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(0, ['Petals', 'Flower']);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyGroupedContainerContentsInPreviewTab(0, ['Stem', 'Seed']);
+        });
+
+        it('When the user selects an option from the filled dropzone, the dropzone should remain inactive', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnDraggableOptionInDropzoneOfPreviewTab('Petals', 0);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab(1);
+        });
+
+        it('CSS of option from the filled dropzone in selected state', { tags: 'css' }, () => {
+            fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTab()
+                .eq(0)
+                .within(() => {
+                    utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOption().eq(0), {
+                        'border': `1px solid ${css.color.activeComponentBorder}`,
+                        'background-color': css.color.defaultBackground
+                    });
+                });
+        });
+
+        it('Accessibility of option from the filled dropzone in selected state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.imageInPreviewTab());
+        });
+
+        it('When the user deselects an option from the filled dropzone, the option should return to the inactive state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnDraggableOptionInDropzoneOfPreviewTab('Petals', 0);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab();
+        });
+
+        it('The user should be able to move an option from one dropzone to another dropzone', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnDraggableOptionInDropzoneOfPreviewTab('Petals', 0);
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnDropzoneOfPreviewTab(1);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(0, ['Flower']);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(1, ['Petals']);
+        });
+
+        it('When user has dropped all the options from a group in the response areas, then empty group should be displayed in the options container', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Stem': 0, 'Seed': 0 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyGroupedOptionsTitlePreviewTab(0, 'Group A')
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyEmptyGroupInPreviewTab(0);
+        });
+    });
+});