itemengine-cypress-automation 1.0.119 → 1.0.121

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

@@ -0,0 +1,246 @@
+import { fillInTheGapsOverImageDropdownPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const optionsForDropdown = ['Image of a flower', 'Petals are displayed', 'Stem is the largest', 'Branches of a plane contain both leaves and flowers'];
+
+describe('Create item page - Fill in the gaps over image - dropdown: Dropdown and Dropdown menu section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Dropdown and Dropdown menu section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        it('Dropdown label, \'User specified width\' and \'Auto scale\' toggle buttons should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.dropdownLabel(), 'Dropdown');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.dropdownLabel(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.userSpecifiedWidthToggleButton(), 'User specified width');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.userSpecifiedWidthToggleButton(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.AutoScaleToggleButton(), 'Auto scale');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.AutoScaleToggleButton(), 'visible');
+        });
+
+        it('By default \'User specified width\' toggle button should be in selected state and \'Auto scale\' should not be in selected state', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyUserSpecifiedToggleButtonIsSelected();
+            fillInTheGapsOverImageDropdownPage.steps.verifyAutoScaleToggleButtonNotSelected();
+        });
+
+        it('\'Display multiline text in dropdown\' checkbox and label should be displayed and by default it should be unchecked', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.displayMultilineTextCheckbox(), 'exist');
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.displayMultilineTextCheckboxLabel(), 'Display multiline text in dropdown');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.displayMultilineTextCheckboxLabel(), 'visible');
+            fillInTheGapsOverImageDropdownPage.steps.verifyDisplayMultilineCheckboxIsNotChecked();
+        });
+
+        it('\'Dropdown menu\' label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.dropdownMenuLabel(), 'Dropdown menu');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.dropdownMenuLabel(), 'visible');
+        });
+
+        it('\'Word wrap for dropdown menu\' checkbox and label should be displayed and by default it should be checked', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.wordWrapCheckbox(), 'exist');
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.wordWrapCheckboxLabel(), 'Word wrap for dropdown menu');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.wordWrapCheckboxLabel(), 'visible');
+            fillInTheGapsOverImageDropdownPage.steps.verifyWordWrapForDropdownMenuCheckboxIsChecked();
+        });
+
+        it('CSS of Dropdown and Dropdown menu section', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.dropdownLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.userSpecifiedWidthToggleButton(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold,
+                'background-color': css.color.toggleButtonSelectedBg
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.AutoScaleToggleButton(), {
+                'color': css.color.UnselectedToggleButton,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.displayMultilineTextCheckboxLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.normal
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.dropdownMenuLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.wordWrapCheckboxLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.normal
+            });
+            //Checked checkbox
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.wordWrapCheckbox().find('rect').eq(1), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of Dropdown and Dropdown menu section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.dropdownLabel().parents('.student-view-settings-container'));
+        });
+    });
+
+    describe('Dropdown section - Specify correct answer section dropdown', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown);
+            fillInTheGapsOverImageDropdownPage.steps.uncheckWordWrapForDropdownMenuCheckbox();
+        });
+
+        it('When \'User specified width\' toggle button is selected, then dropdown menu width should be the same as collapsed dropdown in specify correct answer section', () => {
+            fillInTheGapsOverImageDropdownPage.steps.compareDropdownMenuAndDropdownWidthForUserSpecifiedWidth();
+            cy.log('Choosing an option from dropdown to collapse it')
+            fillInTheGapsOverImageDropdownPage.steps.selectOptionFromDropdownList(optionsForDropdown[0]);
+        });
+
+        it('When \'Auto scale\' toggle button is selected, then width of the collapsed dropdown and the dropdown menu should be auto scaled(increased) to accommodate the longest option in the dropdown menu in specify correct answer section', () => {
+            fillInTheGapsOverImageDropdownPage.steps.compareDropdownMenuAndDropdownWidthForAutoScaled();
+            cy.log('Choosing an option from dropdown to collapse it')
+            fillInTheGapsOverImageDropdownPage.steps.selectOptionFromDropdownList(optionsForDropdown[0]);
+        });
+
+        it('When user selects the \'User specified width\' toggle button, then the collapsed dropdown and the dropdown menu should return to its default width', () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectUserSpecifiedWidthToggleButton();
+            fillInTheGapsOverImageDropdownPage.steps.verifyUserSpecifiedToggleButtonIsSelected();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownDefaultWidthInSpecifyCorrectAnswer();
+            cy.log('Choosing an option from dropdown to collapse it')
+            fillInTheGapsOverImageDropdownPage.steps.selectOptionFromDropdownList(optionsForDropdown[3]);
+        });
+
+        it('When \'Display multiline text in dropdown\' checkbox is unchecked and user selects and long text option in dropdown, then the selected long text option should be incompletely displayed in the dropdown with an ellipses at the end and a tooltip which displays the entire option', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyMultilineTextNotDisplayedInDropdownSpecifyCorrectAnswerSection(0);
+            utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), 0)
+                .verifyTooltip(`${optionsForDropdown[3]}`);
+        });
+
+        it('User should be able to check the \'Display multiline text in dropdown\' checkbox', () => {
+            fillInTheGapsOverImageDropdownPage.steps.checkDisplayMultilineCheckbox();
+        });
+
+        it('When \'Display multiline text in dropdown\' checkbox is checked, then the added long text option should be word wrapped and displayed in a multi-line format', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyMultilineTextIsDisplayedInDropdownSpecifyCorrectAnswerSection(0);
+        });
+    });
+
+    describe('Dropdown menu section - Specify correct answer section dropdown', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown);
+        });
+
+        it('When \'Word wrap for dropdown menu\' checkbox is checked, then all the dropdown menu options should be word wrapped and displayed in a multi-line format', () => {
+            fillInTheGapsOverImageDropdownPage.steps.expandDropdownInSpecifyCorrectAnswerSection(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownMenuOptionsWordWrappedSpecifyCorrectAnswerSection();
+            cy.log('Selecting an option to collapse the dropdown');
+            fillInTheGapsOverImageDropdownPage.steps.selectOptionFromDropdownList(optionsForDropdown[0]);
+        });
+
+        it('User should be able to uncheck the \'Word wrap for dropdown menu\' checkbox', () => {
+            fillInTheGapsOverImageDropdownPage.steps.uncheckWordWrapForDropdownMenuCheckbox();
+        });
+
+        it('When \'Word wrap for dropdown menu\' checkbox is unchecked, then all the dropdown menu options should be displayed in a single line', () => {
+            fillInTheGapsOverImageDropdownPage.steps.expandDropdownInSpecifyCorrectAnswerSection(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownMenuOptionsNotWordWrappedSpecifyCorrectAnswerSection();
+        });
+    });
+
+    describe('Dropdown section - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'User specified width\' toggle button is selected, then dropdown menu width should be the same as collapsed dropdown in preview tab', () => {
+            fillInTheGapsOverImageDropdownPage.steps.compareDropdownMenuAndDropdownWidthForUserSpecifiedWidthInPreviewTab();
+            cy.log('Choosing an option from dropdown to collapse it')
+            fillInTheGapsOverImageDropdownPage.steps.selectOptionFromDropdownList(optionsForDropdown[0]);
+        });
+
+        it('When \'Auto scale\' toggle button is selected, then width of the collapsed dropdown and the dropdown menu should be auto scaled(increased) to accommodate the longest option in the dropdown menu in specify correct answer section', () => {
+            fillInTheGapsOverImageDropdownPage.steps.compareDropdownMenuAndDropdownWidthForAutoScaledInPreviewTab();
+            cy.log('Choosing an option from dropdown to collapse it')
+            fillInTheGapsOverImageDropdownPage.steps.selectOptionFromDropdownList(optionsForDropdown[3]);
+        });
+
+        it('When user selects the \'User specified width\' toggle button, then the collapsed dropdown and the dropdown menu should return to its default width', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.selectUserSpecifiedWidthToggleButton();
+            fillInTheGapsOverImageDropdownPage.steps.verifyUserSpecifiedToggleButtonIsSelected();
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownDefaultWidthInPreviewTab();
+            cy.log('Choosing an option from dropdown to collapse it')
+            fillInTheGapsOverImageDropdownPage.steps.selectOptionFromDropdownList(optionsForDropdown[3]);
+        });
+
+        it('When \'Display multiline text in dropdown\' checkbox is unchecked and user selects and long text option in dropdown, then the selected long text option should be incompletely displayed in the dropdown with an ellipses at the end and a tooltip which displays the entire option', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyMultilineTextNotDisplayedInDropdownPreviewTab(0);
+            utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownPreviewTab(), 0)
+                .verifyTooltip(`${optionsForDropdown[3]}`);
+        });
+
+        it('When \'Display multiline text in dropdown\' checkbox is checked, then the added long text option should be word wrapped and displayed in a multi-line format', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.checkDisplayMultilineCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyMultilineTextIsDisplayedInDropdownPreviewTab(0);
+        });
+    });
+
+    describe('Dropdown menu section- Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Word wrap for dropdown menu\' checkbox is checked, then all the dropdown menu options should be word wrapped and displayed in a multi-line format', () => {
+            fillInTheGapsOverImageDropdownPage.steps.expandDropdownInPreviewTab(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownMenuOptionsWordWrappedPreviewTab();
+            cy.log('Selecting an option to collapse the dropdown');
+            fillInTheGapsOverImageDropdownPage.steps.selectOptionFromDropdownList(optionsForDropdown[0]);
+        });
+
+        it('When \'Word wrap for dropdown menu\' checkbox is unchecked, then all the dropdown menu options should be displayed in a single line', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.uncheckWordWrapForDropdownMenuCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.expandDropdownInPreviewTab(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownMenuOptionsNotWordWrappedPreviewTab();
+        });
+    });
+});

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

@@ -0,0 +1,332 @@
+import { fillInTheGapsOverImageDropdownPage } from "../../../pages";
+import { commonComponents, optionsWrapperComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const optionsForDropdown = ['Flower', 'Petal', 'Stem', 'Branch'];
+
+describe('Create item page - Fill in the gaps over image - dropdown: Dropdown options section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Dropdown options section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.verifyImageIsUploaded();
+        });
+
+        it('When user has not added response area on the image, \'Dropdown\' options section should not be visible', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.dropdownOptionsTab(), 'notExist');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.dropdownOptionsLabel(), 'notExist');
+        });
+
+        it('When user adds a response area on the image, \'Dropdown options\' section should be displayed with \'Dropdown 1\' tab in selected state', () => {
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(10);
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.dropdownOptionsLabel(), 'Dropdown options');
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.dropdownOptionsTab(), 'Dropdown 1');
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownOptionsTabIsSelected(0);
+        });
+
+        it('By default 4 option input fields with placeholder text, drag handle and delete option icon buttons should be displayed', () => {
+            for (let index = 0; index < 4; index++) {
+                fillInTheGapsOverImageDropdownPage.steps.verifyOptionsContents(index);
+            };
+        });
+
+        it('\'Add Option\' button should be present', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.addOptionButton(), 'Add option');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.addOptionButton(), 'visible');
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyDragHandleTooltip();
+
+        it('When user clicks on the \'Delete\' option button then the respective options input field should get deleted and option numeration should change accordingly', () => {
+            cy.log('Pre step: Adding text in all option input fields')
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown);
+            const optionsAfterDeleting = optionsForDropdown.filter((el) => el !== options[1]);
+            fillInTheGapsOverImageDropdownPage.steps.deleteOption(1);
+            utilities.verifyElementCount(optionsWrapperComponent.optionWrapper(), 3);
+            cy.log('Verifying the input text given to input fields after deletion of 2nd option')
+            optionsAfterDeleting.forEach((inputFieldText, optionIndex) => {
+                utilities.verifyTextContent(utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownOptionsInputField(), optionIndex), inputFieldText);
+            });
+        });
+
+        it('When only two options are present, the delete buttons should be in disabled state', () => {
+            cy.log('Deleting one more option')
+            fillInTheGapsOverImageDropdownPage.steps.deleteOption(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDeleteOptionButtonDisabledState();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyDisabledDeleteButtonTooltip();
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyAddOptionFunctionality();
+
+        it('When user focus in and out of any of the \'Options\' input field without typing anything, an error message should be thrown', () => {
+            fillInTheGapsOverImageDropdownPage.steps.focusInAndFocusOutOfDropdownOptionInputField();
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Option is required.');
+        });
+
+        it('User should be able to enter text in options input field and \'Error: Option is required.\' error message should disappear', () => {
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionInputField(2, 'option 1');
+            commonComponents.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyEnabledDeleteButtonAndTooltip();
+
+        it('When user add another response area to the image, another dropdown options tab \'Dropdown 2\' should be added and it should not be in selected state', () => {
+            utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownOptionsTab(), 1), 'Dropdown 1');
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownOptionsTabIsSelected(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownOptionsTabIsNotSelected(1);
+        });
+
+        it('When user clicks on \'Dropdown 2\' tab, then user should be navigated to \'Dropdown 2\' options tab and it should have the default 4 empty option input fields', () => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToDropdownOptionsTab(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownOptionsTabIsSelected(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownOptionsTabIsNotSelected(0);
+            for (let index = 0; index < optionFieldsCount; index++) {
+                fillInTheGapsOverImageDropdownPage.steps.verifyOptionsContents(index);
+            };
+        });
+
+        it('User should be able to give input to the option input fields in \'Dropdown 2\' tab', () => {
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionInputField(0, 'Dropdown 2 option 1');
+        });
+
+        it('When all option input fields in \'Dropdown 2\' are not filled, then user should be able to navigate to a different \'Dropdown options\' tab', () => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToDropdownOptionsTab(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownOptionsTabIsSelected(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownOptionsTabIsNotSelected(1);
+        });
+
+        it('CSS of Options section', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.dropdownOptionsLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownOptionsTab(), 0), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownOptionsTab(), 0), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(commonComponents.dragHandleButton().find('svg'), {
+                'fill': css.color.secondaryBtnActive
+            });
+            commonComponents.deleteButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.dropdownOptionsInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.addOptionButton(), {
+                'color': css.color.secondaryBtnActive,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.medium
+            });
+        });
+
+        it('Accessibility of dropdown options section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.dropdownOptionsLabel().parents('[class*="LabelImageWithDropDownstyles__ResponseOptionWrapper"]'));
+        });
+    });
+
+    describe('Dropdown options in Specify correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(10);
+        });
+
+        it('When user has not entered text in the options input field then the dropdown should be disabled and the user should not be able to expand the dropdown in the \'Specify correct answer\'', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyDisabledDropdownInSpecifyCorrectAnswerSection(0);
+        });
+
+        it('When the user has not added any options, on hovering over the dropdown, a tooltip \'Please add options\' should be displayed and on focusing away from the dropdown, the tooltip should disappear', () => {
+            utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), 0)
+                .verifyTooltip('Please add options');
+        });
+
+        it('CSS of specify correct answer section disabled dropdown', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), {
+                'opacity': '1',
+                'background': css.color.defaultBackground
+            });
+        });
+
+        it('Accessibility of specify correct answer section disabled dropdown', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection());
+        });
+
+        it('When user enters a text in at least 1 option input field then the dropdown should be enabled', () => {
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionInputField(0, optionsForDropdown[0]);
+            utilities.verifyElementNotDisabled(utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), 0));
+        });
+
+        it('Added text in option input field should be displayed in dropdown of \'Specify correct answer\' section', () => {
+            cy.log('Add input to all options input field for dropdown 1');
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown);
+            fillInTheGapsOverImageDropdownPage.steps.expandDropdownInSpecifyCorrectAnswerSection(0)
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownOptionsSpecifyCorrectAnswer(optionsForDropdown);
+        });
+
+        it('When user deletes an option then the deleted option should not be displayed in dropdown in \'Specify correct answer\' section', () => {
+            fillInTheGapsOverImageDropdownPage.steps.deleteOption(3);
+            cy.log('Checking the deleted option should not exist in the dropdown')
+            fillInTheGapsOverImageDropdownPage.steps.expandDropdownInSpecifyCorrectAnswerSection(0);
+            let optionsForDropdown1 = optionsForDropdown.slice(0, 3);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownOptionsSpecifyCorrectAnswer(optionsForDropdown1);
+        });
+
+        it('When user adds an option using \'Add Option\' button then the added option should be displayed in dropdown in \'Specify correct answer\' section', () => {
+            fillInTheGapsOverImageDropdownPage.steps.addOption();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionInputField(3, `${optionsForDropdown[3]}`);
+            fillInTheGapsOverImageDropdownPage.steps.expandDropdownInSpecifyCorrectAnswerSection(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownOptionsSpecifyCorrectAnswer(optionsForDropdown);
+        });
+
+        it('When the user has added two same options in the options section, only one occurrence of that option should be listed in the dropdown', () => {
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionInputField(0, `${optionsForDropdown[1]}`);
+            let optionsForDropdown1 = optionsForDropdown.slice(1, 4);
+            fillInTheGapsOverImageDropdownPage.steps.expandDropdownInSpecifyCorrectAnswerSection(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownOptionsSpecifyCorrectAnswer(optionsForDropdown1);
+        });
+
+        it('When user has adds another response area, then the newly added dropdown should be in disabled state in specify correct answer section', () => {
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(40);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDisabledDropdownInSpecifyCorrectAnswerSection(1);
+        });
+
+        it('CSS of specify correct answer section dropdown in active state', { tags: 'css' }, () => {
+            cy.log('Expand dropdown');
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, `${optionsForDropdown[3]}`);
+            fillInTheGapsOverImageDropdownPage.steps.expandDropdownInSpecifyCorrectAnswerSection(0);
+            //Selected option
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.dropdownListOptions(optionsForDropdown[3]), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            });
+            //Unselected option
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.dropdownListOptions(optionsForDropdown[2]), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.transparent
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), {
+                'border': `1px solid ${css.color.activeComponentBorder}`,
+            });
+        });
+
+        it('Accessibility of specify correct answer section dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.dropdownList());
+        });
+    });
+
+    describe('Dropdown options in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+        });
+
+        it('When user has not entered text in the options input field then the dropdown should be disabled and the user should not be able to expand the dropdown in the \'preview tab\'', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyDisabledDropdownInPreviewTab(0);
+        });
+
+        it('When user enters a text in at least 1 option input field then the preview tab dropdown should be enabled', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionInputField(0, optionsForDropdown[0]);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            utilities.verifyElementNotDisabled(utilities.getNthElement(fillInTheGapsOverImageDropdownPage.dropdownPreviewTab(), 0));
+        });
+
+        it('The added text in dropdown options input fields should be displayed in dropdown of \'preview tab\'', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.expandDropdownInPreviewTab(0)
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownOptionsPreviewTab(optionsForDropdown);
+        });
+
+        it('When user deletes an option then the deleted option should not be displayed in dropdown in \'preview tab\'', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.deleteOption(3);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            cy.log('Checking the deleted option should not exist in the dropdown')
+            fillInTheGapsOverImageDropdownPage.steps.expandDropdownInPreviewTab(0);
+            let optionsForDropdown1 = optionsForDropdown.slice(0, 3);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownOptionsPreviewTab(optionsForDropdown1);
+        });
+
+        it('When user adds an option using \'Add Option\' button then the added option should be displayed in dropdown in \'preview tab\'', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.addOption();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionInputField(3, `${optionsForDropdown[3]}`);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.expandDropdownInPreviewTab(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownOptionsPreviewTab(optionsForDropdown);
+        });
+
+        it('When the user has added two same options in the options, only one occurrence of that option should be listed in the dropdown', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionInputField(0, `${optionsForDropdown[1]}`);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.expandDropdownInPreviewTab(0);
+            let optionsForDropdown1 = optionsForDropdown.slice(1, 4);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownOptionsPreviewTab(optionsForDropdown1);
+        });
+
+        it('When user has adds another response area, then the newly added dropdown should be in disabled state in preview tab', () => {
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(40);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDisabledDropdownInPreviewTab(1);
+        });
+
+        it('CSS of preview tab dropdown', { tags: 'css' }, () => {
+            cy.log('Expand dropdown');
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, `${optionsForDropdown[3]}`);
+            fillInTheGapsOverImageDropdownPage.steps.expandDropdownInPreviewTab(0);
+            //Selected option
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.dropdownListOptions(optionsForDropdown[3]), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            });
+            //Unselected option
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.dropdownListOptions(optionsForDropdown[2]), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.transparent
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection(), {
+                'border': `1px solid ${css.color.activeComponentBorder}`,
+            });
+        });
+
+        it('Accessibility of preview tab dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.dropdownList());
+        });
+    });
+});