itemengine-cypress-automation 1.0.50 → 1.0.62

package/cypress/e2e/ILC/VideoResponse/videoResponseScoringSection.js

@@ -0,0 +1,76 @@
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { videoResponsePage } from "../../../pages";
+import utilities from "../../../support/helpers/utilities";
+
+describe('Create question page - Video response: Scoring', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Scoring section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+        });
+
+        videoResponsePage.tests.verifyScoringTypeLabelAndDropdown('manuallyScored');
+    });
+
+    describe('Manually scored scoring type - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+        });
+
+        it('When the user selects \'Manually scored\' option from the \'Scoring type\' dropdown, then the \'Points\' and \'Minimum score awarded (if attempted)\' labels and input fields should be displayed', () => {
+            videoResponsePage.steps.selectAScoringTypeFromScoringTypeDropdown('Manually scored');
+            videoResponsePage.steps.verifyDefaultPointsLabelAndInputField();
+            videoResponsePage.steps.verifyDefaultMinimumScoreIfAttemptedLabelAndPointsField();
+        });
+
+        videoResponsePage.tests.verifyPointsFieldErrorState(10);
+
+        videoResponsePage.tests.verifyMinimumScoreIfAttemptedFieldErrorState(10, 20, 10);
+    });
+
+    describe('Manually scored scoring type - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+            videoResponsePage.steps.selectAScoringTypeFromScoringTypeDropdown('Manually scored');
+            videoResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has selected \'Manually scored\' option from the \'Scoring type\' dropdown, then in the preview tab \'Show correct answer\' checkbox as well as points besides it should not be displayed', () => {
+            utilities.verifyElementVisibilityState(videoResponsePage.showCorrectAnswerCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(videoResponsePage.previewScoreText(), 'notExist');
+        })
+    });
+
+    describe('Non scored scoring type - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to video response question type');
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+        });
+
+        it('When the user selects \'Non Scored\' option from the \'Scoring type\' dropdown, then the \'Points\' input field should be displayed in disabled state with prefilled \'0\' points and \'Minimum score awarded (if attempted)\' input field should not be displayed', () => {
+            videoResponsePage.steps.selectAScoringTypeFromScoringTypeDropdown('Non scored')
+            videoResponsePage.steps.verifyNonScoredPointsField();
+        });
+    });
+
+    describe('Non scored scoring type - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+            videoResponsePage.steps.selectAScoringTypeFromScoringTypeDropdown('Non scored');
+            videoResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has selected \'Non scored\' option from the \'Scoring type\' dropdown, then in the preview tab \'Show correct answer\' checkbox as well as points besides it should not be displayed', () => {
+            utilities.verifyElementVisibilityState(videoResponsePage.showCorrectAnswerCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(videoResponsePage.previewScoreText(), 'notExist');
+        });
+    });
+});

package/cypress/e2e/ILC/fillInTheGapsOverImageDropdown/fillInTheGapsOverImageDropdownAddResponseContainer.js

@@ -0,0 +1,230 @@
+import { fillInTheGapsOverImageDropdownPage } from "../../../pages";
+import { uploadImageSectionComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create item page - Fill in the gaps over image - dropdown: Add response container, response container', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Add response container button', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        it('By default the \'Add response container\' button should not exist', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.addResponseContainerButton(), 'notExist');
+        });
+
+        it('When the user has uploaded an image in image section, then \'Add response container\' button should be displayed', () => {
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.addResponseContainerButton(), 'visible');
+        });
+
+        it('When the user clicks on \'Add response container\' button, then response container should be added over the uploaded image with numeration', () => {
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerIsDisplayedInImageSection(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerNumerationInImageSection(0);
+        });
+
+        it('When the user has added response container in image section, then \'Options for response #\' section should be displayed', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyOptionsForResponseLabelAndSectionIsDisplayed(0);
+        });
+
+        it('When the user adds a second response container in image section, then respective \'Options for response #\' section should be displayed for the newly added response container with proper numeration', () => {
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerNumerationInImageSection(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyOptionsForResponseLabelAndSectionIsDisplayed(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyOptionsForResponseLabelAndSectionIsDisplayed(1);
+            utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.optionsForResponseContainer(), 2);
+        });
+
+        it('When the user clicks on the close button on the response container, then the response container should be removed from the image and options for the removed response container should also be removed', () => {
+            fillInTheGapsOverImageDropdownPage.steps.clickOnResponseContainerCloseButton(0);
+            utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.responseContainer(), 1);
+            utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.optionsForResponseContainer(), 1);
+        });
+
+        it('The remaining response container and its options for response section should be displayed with proper updated numeration', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerIsDisplayedInImageSection(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerNumerationInImageSection(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyOptionsForResponseLabelAndSectionIsDisplayed(0);
+        });
+    });
+
+    describe('Add response container - set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+        });
+
+        it('When the user has not added any response container over the uploaded image, response label and dropdown should not be displayed in the set correct answer section', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.setCorrectAnswerResponseFieldLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseDropdownSetCorrectAnswerSection(), 'notExist');
+        });
+
+        it('When the user adds a response container over the uploaded image, then a label \'Response #\' and its respective dropdown should be displayed in the set correct answer section', () => {
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseFieldLabelInSetCorrectAnswerSection(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseDropdownIsDisplayedInSetCorrectAnswerSection(0);
+        });
+
+        it('When the user adds second response container in image section, then a label \'Response #\' and its respective dropdown should be displayed in the set correct answer section for the newly added response container with appropriate numeration', () => {
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseFieldLabelInSetCorrectAnswerSection(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseDropdownIsDisplayedInSetCorrectAnswerSection(1);
+            utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.setCorrectAnswerResponseFieldLabel(), 2);
+            utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.responseDropdownSetCorrectAnswerSection(), 2);
+        });
+
+        it('When the user removes a response container in the image section, then the label and dropdown for the removed response container should also be removed in the set correct answer section and the remaining label and dropdown in the set correct answer section should be displayed with proper updated numeration', () => {
+            fillInTheGapsOverImageDropdownPage.steps.clickOnResponseContainerCloseButton(0);
+            utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.setCorrectAnswerResponseFieldLabel(), 1);
+            utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.responseDropdownSetCorrectAnswerSection(), 1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseFieldLabelInSetCorrectAnswerSection(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseDropdownIsDisplayedInSetCorrectAnswerSection(0);
+        });
+    });
+
+    describe('Add response container - preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+        });
+
+        it('When the user has not added any response container over the uploaded image, then dropdown should not be displayed in preview tab', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseDropdownPreviewTab(), 'notExist');
+        });
+
+        it('When the user adds a response container over the uploaded image, then a dropdown should be displayed in preview tab', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseDropdownIsDisplayedInPreviewTab(0);
+        });
+
+        it('When the user adds a second response container in image section, then a second dropdown should also be displayed in preview tab', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseDropdownIsDisplayedInPreviewTab(1);
+            utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.responseDropdownPreviewTab(), 2);
+        });
+
+        it('When the user removes a response container in image section, then the respective dropdown should also be removed from the image in preview tab', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.clickOnResponseContainerCloseButton(0);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.responseDropdownPreviewTab(), 1);
+        });
+
+        it('When the user has added response container in edit tab, then in preview tab it should be positioned in the same way as it is positioned in edit tab', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            let coordinatesOfResponse1 = fillInTheGapsOverImageDropdownPage.steps.getResponseContainerPositionCoordinates(0);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseDropdownPositionCoordinatesInPreviewTab(0, coordinatesOfResponse1);
+        });
+    });
+
+    describe('Response container', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('fill in the gaps over image - dropdown');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.unlockAspectRatio();
+            fillInTheGapsOverImageDropdownPage.steps.updateImageHeight(300);
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+        });
+
+        it('When the user adds response container over the image, response container should be displayed with pointer, numeric count, chevron down arrow and close button', () => {
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerPointerInImageSection(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerNumerationInImageSection(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerChevronDownArrowInImageSection(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerCloseButtonInImageSection(0);
+        });
+
+        it('CSS of \'Response container\' in image section', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.responseContainerPointer().find('circle'), {
+                'fill': css.color.responseContainerPointer
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.responseContainerNumeration(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            fillInTheGapsOverImageDropdownPage.responseContainerChevronDownArrow()
+                .verifyPseudoClassBeforeProperty('color', css.color.secondaryBtn);
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.responseContainerCloseButton(), {
+                'background-color': css.color.secondaryBtnBg,
+                'border': `1px solid ${css.color.activeComponentBorder}`
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.responseContainerCloseButton().find('.X-mark-icon'), {
+                'fill': css.color.activeButtons,
+            });
+        });
+
+        it('Accessibility of \'Response container\' in image section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.responseContainer().parents('.image-container'));
+        });
+
+        it('When the user adds multiple response containers such that their combined width(including padding around the response containers) is less than the width of the uploaded image i.e. in this case 2 response containers, then the response containers should be displayed in the same line', () => {
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerVerticalPosition(1, 0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerVerticalPosition(1, 1);
+        });
+
+        it('When the user adds multiple response containers such that their combined width(including padding around the response containers) is more than the width of the uploaded image i.e. in this case 3 response containers, then the response container which exceeds the image width(3rd response container) should be displayed below the previously added response containers', () => {
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerVerticalPosition(1, 0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerVerticalPosition(1, 1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerVerticalPosition(2, 2);
+        });
+
+        it('When the user removes a response container using the close button, then the position of the remaining response containers should not be changed', () => {
+            let coordinatesOfResponse1 = fillInTheGapsOverImageDropdownPage.steps.getResponseContainerPositionCoordinates(0);
+            let coordinatesOfResponse2 = fillInTheGapsOverImageDropdownPage.steps.getResponseContainerPositionCoordinates(2);
+            fillInTheGapsOverImageDropdownPage.steps.clickOnResponseContainerCloseButton(1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerPositionCoordinates(0, coordinatesOfResponse1);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerPositionCoordinates(1, coordinatesOfResponse2);
+        });
+
+        //Update after https://redmine.zeuslearning.com/issues/543853 is resolved
+        it('When the user adds 15 response containers in the image section, then a snackbar with text \'You have reached the maximum number of tokens that can be added\' and a \'CLOSE\' button should be displayed', () => {
+            for (let numeration = 3; numeration < 16; numeration++) {
+                fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            };
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.snackbar(), 'You have reached the maximum number of tokens that can be added.');
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.snackbarCloseButton(), 'CLOSE');
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyMaximumNumberOfTokensSnackbarCSSandA11y();
+
+        it('When the user clicks on snackbar \'CLOSE\' button, the snackbar should disappear', () => {
+            //Add pre-step to remove and add response container
+            cy.log('Pre-step: Remove and add a response container to make the snackbar appear again');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnResponseContainerCloseButton(14);
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.closeSnackBar();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyDisabledStateOfAddResponseContainerButton();
+    });
+});

package/cypress/e2e/ILC/fillInTheGapsOverImageDropdown/fillInTheGapsOverImageDropdownAdditionalSettings.js

@@ -0,0 +1,247 @@
+import { fillInTheGapsOverImageDropdownPage } from "../../../pages";
+import { uploadImageSectionComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const optionsForResponse1 = ['Flower', 'Petal', 'Stem', 'Branch'];
+const optionsForResponse2 = ['Leaf', 'Leaves', 'Stem', 'Seed'];
+const answerNumerationDropdownOptions = ['Numerical', 'Uppercase alphabet', 'Lowercase alphabet'];
+const correctTabAnswerArray = ['Flower', 'Leaf'];
+const incorrectAnswerArray = ['Branch', 'Seed'];
+const numbers = ['1', '2'];
+const lowercase = ['a', 'b'];
+const uppercase = ['A', 'B'];
+const pointerDropdownList = ['Left', 'Right', 'Top', 'Bottom', 'Top left', 'Top right', 'None'];
+const fontSizeDropdownOptions = ['Default', 'Small', 'Normal', 'Large', 'Extra large', 'Huge'];
+const fontSizes = ['16px', '12px', '14px', '17px', '20px', '24px'];
+
+describe('Fill In the gaps over image - dropdown - Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    //https://redmine.zeuslearning.com/issues/542462
+    describe('Additional settings: Placeholder text : Contents and set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Advanced settings for all response areas\' label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.advanceSettingsforAllResponseAreasLabel(), 'Advanced settings for all response areas');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.advanceSettingsforAllResponseAreasLabel(), 'visible');
+        });
+
+        it('\'Placeholder text\' label and input field should be displayed and by default, the input field should be empty', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.placeholderTextLabel(), 'Placeholder text');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.placeholderTextLabel(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.placeholderTextInputField(), 'visible');
+            fillInTheGapsOverImageDropdownPage.steps.verifyPlaceholderTextInputFieldValue('');
+        });
+
+        it('When \'Placeholder text\' input field is empty then no \'Placeholder text\' should be displayed in the set correct answer dropdown', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseDropdownNotExists(0);
+        });
+
+        it('When the user adds a text in the Placeholder input field, the added placeholder should be displayed in the set correct answer dropdown', () => {
+            fillInTheGapsOverImageDropdownPage.steps.setResponseFieldPlaceholderTextGlobal('Enter response');
+            fillInTheGapsOverImageDropdownPage.steps.verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseDropdown(0, 'Enter response');
+        });
+
+        it('CSS of placeholder text', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.responseDropdownPlaceholderText(), {
+                'color': css.color.placeholderText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular,
+            });
+        });
+
+        it('Accessibility of \'Placeholder text\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.responseDropdownWrapperSetCorrectAnswerSection());
+        });
+
+        it('When the user selects and option in dropdown, then the placeholder text should disappear', () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, optionsForResponse1[0]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPlaceholderAttributeInSetCorrectAnswerSectionResponseDropdownNotExists(0);
+        });
+
+    });
+
+    describe('Additional settings: Placeholder text : Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Placeholder text\' input field is empty then no \'Placeholder text\' should be displayed in the preview tab dropdown', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyPlaceholderAttributeInPreviewTabDropdownNotExists(0);
+        });
+
+        it('When the user adds a text in the Placeholder input field, the added placeholder should be displayed in the preview tab dropdown', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.setResponseFieldPlaceholderTextGlobal('Enter response');
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPlaceholderAttributeInPreviewTabDropdown(0, 'Enter response');
+        });
+
+        it('CSS of placeholder text', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.responseDropdownPlaceholderText(), {
+                'color': css.color.placeholderText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular,
+            });
+        });
+
+        it('Accessibility of \'Placeholder text\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.responseDropdownContainerWrapperPreviewTab());
+        });
+
+        it('When the user selects and option in dropdown, then the placeholder text should disappear', () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, optionsForResponse1[0]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPlaceholderAttributeInPreviewTabDropdownNotExists(0);
+        });
+    });
+
+    describe('Additional settings: Height and Width : Contents and set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Height (px)\' and \'Width (px)\' labels and input fields should be displayed and by default, the input fields should be empty', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.responseFieldHeightLabel(), 'Height (px)');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseFieldHeightLabel(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseFieldHeightInputField(), 'visible');
+            fillInTheGapsOverImageDropdownPage.steps.verifyAdditionalSettingsHeightInputFieldValue('');
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.responseFieldWidthLabel(), 'Width (px)');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseFieldWidthLabel(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseFieldWidthInputField(), 'visible');
+            fillInTheGapsOverImageDropdownPage.steps.verifyAdditionalSettingsWidthInputFieldValue('');
+        });
+
+        it('When the input field of \'Height\' and \'Width\' is kept empty, the default dimension of the dropdown should be (120x34)px in the \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyHeightOfResponseDropdownInSetCorrectAnswerSection(0, 34);
+            fillInTheGapsOverImageDropdownPage.steps.verifyWidthOfResponseDropdownInSetCorrectAnswerSection(0, 120);
+        });
+
+        it('When the user adds \'Height\' for the dropdown then the height of the dropdown should get updated accordingly in the \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageDropdownPage.steps.setResponseFieldHeightGlobal(100);
+            fillInTheGapsOverImageDropdownPage.steps.verifyHeightOfResponseDropdownInSetCorrectAnswerSection(0, 100);
+        });
+
+        it('When the user adds \'Width\' for the dropdown then the Width of the dropdown should get updated accordingly in the \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageDropdownPage.steps.setResponseFieldWidthGlobal(100);
+            fillInTheGapsOverImageDropdownPage.steps.verifyWidthOfResponseDropdownInSetCorrectAnswerSection(0, 100);
+        });
+
+        it('When the user enters a value below 80px in the \'Width\' input field then the width of the input field should remain 80px in \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageDropdownPage.steps.setResponseFieldWidthGlobal(20);
+            fillInTheGapsOverImageDropdownPage.steps.verifyWidthOfResponseDropdownInSetCorrectAnswerSection(0, 80);
+        });
+
+        it('When the user enters a value above 400px in the \'Width\' input field then the width of the input field should remain 400px in \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageDropdownPage.steps.setResponseFieldWidthGlobal(800);
+            fillInTheGapsOverImageDropdownPage.steps.verifyWidthOfResponseDropdownInSetCorrectAnswerSection(0, 400);
+        });
+    });
+
+    describe('Additional settings: Height and Width : Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+        });
+
+        it('When the input field of \'Height\' and \'Width\' is kept empty, the default dimension of the dropdown should be (120x34)px for the preview tab', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownHeightPreviewTab(0, 34);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownWidthPreviewTab(0, 120);
+        });
+
+        it('When the user adds \'Height\' for the dropdown then the height of the dropdown should get updated accordingly in the preview tab', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.setResponseFieldHeightGlobal(100);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownHeightPreviewTab(0, 100);
+        });
+
+        it('When the user adds \'Width\' for the dropdown then the dropdowns should get updated accordingly in the preview tab', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.setResponseFieldWidthGlobal(100);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownWidthPreviewTab(0, 100);
+        });
+
+        it('When the user enters a value below 80px in the \'Width\' input field then the input field should remain 80px for the preview tab dropdowns', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.setResponseFieldWidthGlobal(20);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownWidthPreviewTab(0, 80);
+        });
+
+        it('When the user enters a value above 400px in the \'Width\' input field then the input field should remain 400px for preview tab dropdown', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.setResponseFieldWidthGlobal(800);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownHeightPreviewTab(0, 400);
+        });
+    });
+
+    describe('Additional settings: Pointer : Contents and image section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyPointerDropdownContentsGlobal();
+
+        pointerDropdownList.forEach((option, index) => {
+            it(`When the user selects \'${option}\' option from the pointer dropdown, then pointer position in image section response container should change to ${option}`, () => {
+                fillInTheGapsOverImageDropdownPage.steps.selectOptionFromPointerDropdownGlobal(option);
+                utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.pointerDropdown(), `${option}`);
+                fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerPointerInImageSection(0, index);
+            });
+        });
+
+        it(`When user selects ${pointerDropdownList[6]} then the pointer should not be displayed in the \'Image\' section`, () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseContainerPointer(), 'hidden');
+        });
+    });
+
+    //TODO: Pointer dropdown functionality is pending for preview tab due to https://redmine.zeuslearning.com/issues/548121
+    //TODO- The below listed describes will be added once the corresponding issues are fixed
+    //Match image to font-size => https://redmine.zeuslearning.com/issues/548149
+    //Fix position on image => https://redmine.zeuslearning.com/issues/547364 https://redmine.zeuslearning.com/issues/547338 https://redmine.zeuslearning.com/issues/548120
+});