itemengine-cypress-automation 1.0.142 → 1.0.143

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

@@ -0,0 +1,132 @@
+import { fillInTheGapsOverImageDragAndDropPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const fontSizes = { 'Tiny': '12px', 'Small': '14px', 'Default': '16px', 'Normal': '18px', 'Big': '22px', 'Huge': '26px' };
+const options = ['Bat', 'Eagle'];
+
+describe('Create Item page - Fill in the gaps over image - drag and drop: Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional Settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyAdditionalSettingsAccordionProperties();
+    });
+
+    describe('Additional settings: Font size contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyFontSizeSectionContents();
+    });
+
+    describe('Additional settings: Font size - functionality in edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(40);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(options);
+            fillInTheGapsOverImageDragAndDropPage.steps.expandAdditionalSettings();
+        });
+
+        Object.keys(fontSizes).forEach((option) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the edit tab options should change to ${fontSizes[option]} accordingly`, () => {
+                fillInTheGapsOverImageDragAndDropPage.steps.selectFontSizeOptionFromFontSizeDropdown(option);
+                utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.fontSizeDropdown(), `${option}`);
+                utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.dropzoneLabelSpecifyCorrectAnswerSection(), {
+                    'font-size': css.fontSize.default
+                });
+                utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOptionText(), {
+                    'font-size': fontSizes[option]
+                });
+            });
+        });
+    });
+
+    describe('Additional settings: Font size - functionality in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.addTextInQuestionInstructionsInputField('Drag and drop into categories');
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(40);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(options);
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Bat': 0, 'Eagle': 1 });
+            fillInTheGapsOverImageDragAndDropPage.steps.expandAdditionalSettings();
+        });
+
+        Object.keys(fontSizes).forEach((option) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the preview tab should change to ${fontSizes[option]} accordingly`, () => {
+                fillInTheGapsOverImageDragAndDropPage.steps.selectFontSizeOptionFromFontSizeDropdown(option);
+                utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.fontSizeDropdown(), `${option}`);
+                fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+                utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.questionInstructionsText(), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.draggableOptionText(), {
+                    'font-size': fontSizes[option]
+                });
+                fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Bat': 0 });
+                fillInTheGapsOverImageDragAndDropPage.steps.switchToGradingView();
+                utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.dropzoneNumeration(), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.correctAnswersNumeration(), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.correctAnswersLabel(), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.correctAnswersOptions(), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.correctIncorrectStatusMessageText(), {
+                    'font-size': fontSizes[option]
+                });
+                fillInTheGapsOverImageDragAndDropPage.steps.switchToStudentView();
+                fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            });
+        });
+    });
+
+    describe('Additional settings: Accessibility section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyAdditionalSettingsAccessibilitySection();
+    });
+
+    describe('Additional Settings: Details section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyDetailsSection();
+    });
+});

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

@@ -0,0 +1,143 @@
+import { fillInTheGapsOverImageDropdownPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const fontSizes = { 'Tiny': '12px', 'Small': '14px', 'Default': '16px', 'Normal': '18px', 'Big': '22px', 'Huge': '26px' };
+const optionsForDropdown1 = ['Flower', 'Petal', 'Stem', 'Branch'];
+const optionsForDropdown2 = ['Leaf', 'Leaves', 'Stem', 'Seed'];
+const correctAnswerArray = ['Flower', 'Leaf'];
+
+describe('fill in the gaps over image - dropdown - Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyAdditionalSettingsAccordionProperties();
+    });
+
+    describe('Additional settings: Font size - Contents in edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyFontSizeSectionContents();
+    });
+
+    describe('Additional settings: Font size - functionality in edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.addTextInQuestionInstructionsInputField('Fill in the gaps');
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(40);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown1);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionFields(1, optionsForDropdown2);
+            fillInTheGapsOverImageDropdownPage.steps.allotPoints(20);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, correctAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(1, correctAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditionalSettings();
+        });
+
+        Object.keys(fontSizes).forEach((option) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the preview tab should change to ${fontSizes[option]} accordingly`, () => {
+                fillInTheGapsOverImageDropdownPage.steps.selectFontSizeOptionFromFontSizeDropdown(option);
+                utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.fontSizeDropdown(), `${option}`);
+                fillInTheGapsOverImageDropdownPage.steps.expandDropdownInSpecifyCorrectAnswerSection(0);
+                utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.dropdownTextLabel(), {
+                    'font-size': fontSizes[option]
+                });
+                fillInTheGapsOverImageDropdownPage.steps.selectOptionFromDropdownList(correctAnswerArray[0]);
+                utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.dropdownTextLabel(), {
+                    'font-size': fontSizes[option]
+                });
+            });
+        });
+    });
+
+    describe('Additional settings: Font size - functionality in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.addTextInQuestionInstructionsInputField('Fill in the gaps');
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(40);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown1);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionFields(1, optionsForDropdown2);
+            fillInTheGapsOverImageDropdownPage.steps.allotPoints(20);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, correctAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(1, correctAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditionalSettings();
+        });
+
+        Object.keys(fontSizes).forEach((option) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the preview tab should change to ${fontSizes[option]} accordingly`, () => {
+                fillInTheGapsOverImageDropdownPage.steps.selectFontSizeOptionFromFontSizeDropdown(option);
+                utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.fontSizeDropdown(), `${option}`);
+                fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+                utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.questionInstructionsText(), {
+                    'font-size': fontSizes[option]
+                });
+                fillInTheGapsOverImageDropdownPage.steps.expandDropdownInPreviewTab(0);
+                utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.dropdownTextLabel(), {
+                    'font-size': fontSizes[option]
+                });
+                fillInTheGapsOverImageDropdownPage.steps.selectOptionFromDropdownList(correctAnswerArray[0]);
+                utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.dropdownTextLabel(), {
+                    'font-size': fontSizes[option]
+                });
+                fillInTheGapsOverImageDropdownPage.steps.switchToGradingView();
+                utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.correctAnswersLabel(), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.correctAnswerResponseNumeration(), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.correctAnswerResponse(), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.correctIncorrectStatusMessageText(), {
+                    'font-size': fontSizes[option]
+                });
+                fillInTheGapsOverImageDropdownPage.steps.switchToStudentView();
+                fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            });
+        });
+    });
+
+    describe('Additional settings: Accessibility section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyAdditionalSettingsAccessibilitySection();
+    });
+
+    describe('Additional Settings: Details section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyDetailsSection();
+    });
+});

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

@@ -0,0 +1,345 @@
+import { fillInTheGapsOverImageDropdownPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const enumerationOptions = {
+    'Numerical': ['1', '2'],
+    'Alphabet (uppercase)': ['A', 'B'],
+    'Alphabet (lowercase)': ['a', 'b'],
+    'Roman numeral (uppercase)': ['I', 'II'],
+    'Roman numeral (lowercase)': ['i', 'ii'],
+};
+const optionsForDropdown1 = ['Flower', 'Petal', 'Stem', 'Branch'];
+const optionsForDropdown2 = ['Leaf', 'Leaves', 'Stem', 'Seed'];
+const correctAnswerArray = ['Flower', 'Leaf'];
+const css = Cypress.env('css');
+
+describe('Fill In the gaps over image - dropdown - Additional settings : Placeholder text, Grading view, ARIA label for dropdowns', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional settings: Placeholder text - Contents in edit 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.insertResponseArea(40);
+            fillInTheGapsOverImageDropdownPage.steps.allotPoints(20);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown1);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionFields(1, optionsForDropdown2);
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyPlaceholderTextSectionContents('dropdown');
+
+        it('When the user checks the "Customize placeholder text for individual dropdowns" checkbox, "Placeholder text for dropdowns" label and two input fields for individual dropdowns should be displayed', () => {
+            fillInTheGapsOverImageDropdownPage.steps.checkCustomizePlaceholderTextCheckbox();
+            utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.individualPlaceholderTextInputField(), 2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIndividualPlaceholderTextInputFields(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIndividualPlaceholderTextInputFields(1);
+        });
+
+        it('When the users adds a new dropdown, the count of the placeholder text input fields should update accordingly', () => {
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea();
+            utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.individualPlaceholderTextInputField(), 3);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIndividualPlaceholderTextInputFields(2);
+        });
+
+        it('When the user deletes any dropdown, the count of the placeholder text input fields should update accordingly', () => {
+            fillInTheGapsOverImageDropdownPage.steps.removeResponseArea(2);
+            utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.individualPlaceholderTextInputField(), 2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIndividualPlaceholderTextInputFields(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyIndividualPlaceholderTextInputFields(1);
+        });
+    });
+
+    describe('Additional settings: Placeholder text - functionality in edit 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.insertResponseArea(40);
+            fillInTheGapsOverImageDropdownPage.steps.allotPoints(20);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown1);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionFields(1, optionsForDropdown2);
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditionalSettings();
+        });
+
+        it('When \'Placeholder text\' input field is empty then no \'Placeholder text\' should be displayed in the specify correct answer section dropdown', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownPlaceholderTextNotExistsSpecifyCorrectAnswerSection(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownPlaceholderTextNotExistsSpecifyCorrectAnswerSection(1);
+        });
+
+        it('When the user adds a text in the Placeholder input field, the added placeholder should be displayed in the specify correct answer section dropdown', () => {
+            fillInTheGapsOverImageDropdownPage.steps.addInputToPlaceholderTextInputField('Add answer');
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownPlaceholderTextSpecifyCorrectAnswerSection(0, 'Add answer');
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownPlaceholderTextSpecifyCorrectAnswerSection(1, 'Add answer');
+        });
+
+        //Comment: not possible to check css of placeholder since it is added as an attribute, properties of placeholder is not visible in dev tools
+
+        it('Accessibility of \'Placeholder text\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection());
+        });
+
+        it('When the user selects an option in the dropdown, then the placeholder text should disappear, when the user deletes the option set as correct answer, then the placeholder text should re-appear for the dropdown', () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, 'Flower');
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownPlaceholderTextNotExistsSpecifyCorrectAnswerSection(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownPlaceholderTextSpecifyCorrectAnswerSection(1, 'Add answer');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToDropdownOptionsTab(0);
+            fillInTheGapsOverImageDropdownPage.steps.deleteOption(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownPlaceholderTextSpecifyCorrectAnswerSection(0, 'Add answer');
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownPlaceholderTextSpecifyCorrectAnswerSection(1, 'Add answer');
+        });
+
+        it('When the user removes the placeholder text input field, then placeholder text should get updated accordingly for both the dropdowns', () => {
+            fillInTheGapsOverImageDropdownPage.steps.clearPlaceholderTextInputField();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownPlaceholderTextNotExistsSpecifyCorrectAnswerSection(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownPlaceholderTextNotExistsSpecifyCorrectAnswerSection(1);
+        });
+
+        it('When "Customize placeholder text for individual dropdowns" checkbox is checked and \'Placeholder text\' input fields for individual dropdowns are kept empty, then no \'Placeholder text\' should be displayed in the specify correct answer section dropdowns', () => {
+            fillInTheGapsOverImageDropdownPage.steps.checkCustomizePlaceholderTextCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownPlaceholderTextNotExistsSpecifyCorrectAnswerSection(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownPlaceholderTextNotExistsSpecifyCorrectAnswerSection(1);
+        });
+
+        it('When the user has set a placeholder text in either individual placeholder text input field, then placeholder text should be displayed for the respective specify correct answer section dropdown', () => {
+            fillInTheGapsOverImageDropdownPage.steps.addInputToIndividualPlaceholderTextInputField(0, 'Response a');
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownPlaceholderTextSpecifyCorrectAnswerSection(0, 'Response a');
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownPlaceholderTextNotExistsSpecifyCorrectAnswerSection(1);
+        });
+
+        it('When the user removes the placeholder text from individual placeholder text input field, then placeholder text should get updated accordingly for both the specify correct answer section dropdowns', () => {
+            fillInTheGapsOverImageDropdownPage.steps.clearIndividualPlaceholderTextInputField(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownPlaceholderTextNotExistsSpecifyCorrectAnswerSection(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownPlaceholderTextNotExistsSpecifyCorrectAnswerSection(1);
+        });
+
+        it('When the user has set placeholder text in individual placeholder text input field, then it should override the placeholder text set in the global placeholder text input field', () => {
+            cy.log('Pre step: Adding global placeholder text and individual placeholder text')
+            fillInTheGapsOverImageDropdownPage.steps.addInputToPlaceholderTextInputField('Global placeholder');
+            fillInTheGapsOverImageDropdownPage.steps.addInputToIndividualPlaceholderTextInputField(0, 'Response 1');
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownPlaceholderTextSpecifyCorrectAnswerSection(0, 'Response 1');
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownPlaceholderTextSpecifyCorrectAnswerSection(1, 'Global placeholder');
+        });
+
+        it('Accessibility of \'Placeholder text\' in preview tab', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.dropdownSpecifyCorrectAnswerSection());
+        });
+
+        it('When the user selects an option from the dropdown, then the placeholder text should disappear and on switching from edit tab to preview tab, the placeholder text should re-appear in the preview tab', () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, 'Petal');
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownPlaceholderTextNotExistsSpecifyCorrectAnswerSection(0);
+            fillInTheGapsOverImageDropdownPage.steps.deleteOption(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownPlaceholderTextSpecifyCorrectAnswerSection(0, 'Response 1');
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownPlaceholderTextSpecifyCorrectAnswerSection(1, 'Global placeholder');
+        });
+    });
+
+    describe('Additional settings: Placeholder text - functionality 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.insertResponseArea(40);
+            fillInTheGapsOverImageDropdownPage.steps.allotPoints(20);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown1);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionFields(1, optionsForDropdown2);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, correctAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(1, correctAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditionalSettings();
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyPlaceholderTextPreviewTabFunctionality();
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyIndividualPlaceholderTextPreviewTabFunctionality();
+    });
+
+    describe('Additional settings: Grading view - Contents in edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyGradingViewEnumerationSectionContents('Dropdown');
+
+        it('When the user selects "Without enumeration" radio button, the identifiers section should disappear', () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectEnumerationType('without enumeration');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.identifiersLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.numericalToggleButton(), 'notExist');
+        });
+
+        it('When the user selects "With enumeration" radio button again, the identifiers section should appear again', () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectEnumerationType('with enumeration');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.identifiersLabel(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.numericalToggleButton(), 'visible');
+        })
+    });
+
+    describe('Additional settings: Grading view - functionality 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.insertResponseArea(40);
+            fillInTheGapsOverImageDropdownPage.steps.allotPoints(20);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown1);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionFields(1, optionsForDropdown2);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, correctAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(1, correctAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditionalSettings();
+        });
+
+        Object.keys(enumerationOptions).forEach(option => {
+            it(`When "${option}" toggle button is selected in the dropdown identifiers section, then on switching to the preview tab dropdown numeration should not be displayed`, () => {
+                fillInTheGapsOverImageDropdownPage.steps.selectIdentifierToggleButton(option);
+                fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+                fillInTheGapsOverImageDropdownPage.steps.verifyDropdownNumerationNotExistsPreviewTab();
+            });
+
+            it('When user clicks on \'Check answer\' button then the numeration should not be displayed in the dropdowns', () => {
+                fillInTheGapsOverImageDropdownPage.steps.checkAnswer();
+                fillInTheGapsOverImageDropdownPage.steps.verifyDropdownNumerationNotExistsPreviewTab();
+            });
+
+            it(`When the user switches to the "Grading view", then the "${option}" numeration should be displayed in the dropdowns as well as correct answer options in the correct answer section`, () => {
+                fillInTheGapsOverImageDropdownPage.steps.switchToGradingView();
+                fillInTheGapsOverImageDropdownPage.steps.verifyDropdownEnumeration(enumerationOptions[option]);
+                fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerDropdownEnumeration(enumerationOptions[option]);
+                cy.log('Post step: Switch to Edit tab')
+                fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            });
+        });
+
+        it('When the user selects "without enumeration" radio button, then in the "Grading view", numeration should not be displayed for dropdowns and in the correct answer section, the entire question preview should be displayed with correct answers', () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectEnumerationType('without enumeration');
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.switchToGradingView();
+            utilities.verifyElementVisibilityState(utilities.getNthElement(fillInTheGapsOverImageDropdownPage.canvasImageInPreviewTab(), 1), 'visible');
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesWithoutEnumeration(['Flower', 'Leaf']);
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownNumerationNotExistsPreviewTab();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.correctAnswerResponseNumeration(), 'notExist');
+        });
+
+        it('CSS of correct answer section', { tags: 'css' }, () => {
+            fillInTheGapsOverImageDropdownPage.correctAnswerSectionWrapper()
+                .within(() => {
+                    utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.dropdownTextLabel(), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular
+                    });
+                    utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.correctAnswerResponseWrapperWithoutEnumeration().parent().find('[role="combobox"]'), {
+                        'border': `1px solid ${css.color.correctAnswer}`
+                    });
+                });
+        });
+
+        it('Accessibility of correct answer section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.correctAnswerResponseWrapperWithoutEnumeration().parents('[class*="question-preview-wrapper"]'));
+        });
+    });
+
+    describe('Additional settings: ARIA label for dropdowns - Contents in edit 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.expandAdditionalSettings();
+        });
+
+        it('When the user has not added any dropdowns, then the "ARIA label for dropdowns" section should be displayed in the additional settings panel', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.ariaLabelSectionLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.ariaLabelInputField(), 'notExist');
+        });
+
+        it('When the user adds dropdowns, then the "ARIA label for dropdowns" section should be displayed in the additional settings panel', () => {
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(80);
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.ariaLabelSectionLabel(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.ariaLabelInputField(), 'visible');
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyAriaLabelSectionContents('dropdown');
+
+        it('When the users adds a new dropdown, the count of the aria label text input fields should update accordingly', () => {
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea();
+            utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.ariaLabelInputField(), 3);
+            fillInTheGapsOverImageDropdownPage.steps.verifyAriaLabelTextInputFields(2);
+        });
+
+        it('When the user deletes any dropdown, the count of the aria label texts input fields should update accordingly', () => {
+            fillInTheGapsOverImageDropdownPage.steps.removeResponseArea(1);
+            utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.ariaLabelInputField(), 2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyAriaLabelTextInputFields(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyAriaLabelTextInputFields(1);
+        });
+
+        it('When the user sets aria label, then in the dropdowns of the specify correct answer section, the aria labels should get updated accordingly', () => {
+            fillInTheGapsOverImageDropdownPage.steps.enterTextInAriaLabelInputField(0, 'Select correct option');
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownAriaLabelSpecifyCorrectAnswerSection(0, 'Select correct option');
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownAriaLabelSpecifyCorrectAnswerSection(1, 'Add answer for response 2');
+        });
+    });
+
+    describe('Additional settings: ARIA label for dropdowns - functionality in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDropdownPage.steps.insertResponseArea(40);
+            fillInTheGapsOverImageDropdownPage.steps.allotPoints(20);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown1);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToDropdownOptionFields(1, optionsForDropdown2);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, correctAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(1, correctAnswerArray[1]);            fillInTheGapsOverImageDropdownPage.steps.expandAdditionalSettings();
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not set \'ARIA label\' input field, then default aria labels should be present for the dropdowns in the preview tab', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownAriaLabelPreviewTab(0, 'Add answer for response 1');
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownAriaLabelPreviewTab(1, 'Add answer for response 2');
+        });
+
+        it('When the user has set \'ARIA label\', then it should be present for the dropdowns in the preview tab', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.enterTextInAriaLabelInputField(0, 'Correct response 1');
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownAriaLabelPreviewTab(0, 'Correct response 1');
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownAriaLabelPreviewTab(1, 'Add answer for response 2');
+        });
+
+        it('Accessibility of input field in preview tab when custom \'ARIA label\' is set', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.dropdownPreviewTab().parents('[class*="question-preview-wrapper"]'));
+        });
+
+        it('When the user clears the set value in the \'ARIA label\' input field, then the default aria labels should be present for the dropdowns in the preview tab', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.clearTextInAriaLabelInputField(0);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownAriaLabelPreviewTab(0, 'Add answer for response 1');
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownAriaLabelPreviewTab(1, 'Add answer for response 2');
+        });
+    });
+});