itemengine-cypress-automation 1.0.142 → 1.0.143

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

@@ -0,0 +1,138 @@
+import { fillInTheGapsDropdownPage } 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 with dropdown - Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyAdditionalSettingsAccordionProperties();
+    });
+
+    describe('Additional settings: Font size - Contents in edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyFontSizeSectionContents();
+    });
+
+    describe('Additional settings: Font size - functionality in edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.addTextInQuestionInstructionsInputField('Fill in the gaps');
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown1);
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionFields(1, optionsForDropdown2);
+            fillInTheGapsDropdownPage.steps.allotPoints(20);
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, correctAnswerArray[0]);
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(1, correctAnswerArray[1]);
+            fillInTheGapsDropdownPage.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`, () => {
+                fillInTheGapsDropdownPage.steps.selectFontSizeOptionFromFontSizeDropdown(option);
+                utilities.verifyInnerText(fillInTheGapsDropdownPage.fontSizeDropdown(), `${option}`);
+                fillInTheGapsDropdownPage.steps.expandDropdownInSpecifyCorrectAnswerSection(0);
+                utilities.verifyCSS(fillInTheGapsDropdownPage.dropdownTextLabel(), {
+                    'font-size': fontSizes[option]
+                });
+                fillInTheGapsDropdownPage.steps.selectOptionFromDropdownList(correctAnswerArray[0]);
+                utilities.verifyCSS(fillInTheGapsDropdownPage.dropdownTextLabel(), {
+                    'font-size': fontSizes[option]
+                });
+            });
+        });
+    });
+
+    describe('Additional settings: Font size - functionality in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.addTextInQuestionInstructionsInputField('Fill in the gaps');
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown1);
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionFields(1, optionsForDropdown2);
+            fillInTheGapsDropdownPage.steps.allotPoints(20);
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, correctAnswerArray[0]);
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(1, correctAnswerArray[1]);
+            fillInTheGapsDropdownPage.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`, () => {
+                fillInTheGapsDropdownPage.steps.selectFontSizeOptionFromFontSizeDropdown(option);
+                utilities.verifyInnerText(fillInTheGapsDropdownPage.fontSizeDropdown(), `${option}`);
+                fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+                utilities.verifyCSS(fillInTheGapsDropdownPage.questionInstructionsText(), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(fillInTheGapsDropdownPage.questionContainerPreviewTab(), {
+                    'font-size': fontSizes[option]
+                });
+                fillInTheGapsDropdownPage.steps.expandDropdownInPreviewTab(0);
+                utilities.verifyCSS(fillInTheGapsDropdownPage.dropdownTextLabel(), {
+                    'font-size': fontSizes[option]
+                });
+                fillInTheGapsDropdownPage.steps.selectOptionFromDropdownList(correctAnswerArray[0]);
+                utilities.verifyCSS(fillInTheGapsDropdownPage.dropdownTextLabel(), {
+                    'font-size': fontSizes[option]
+                });
+                fillInTheGapsDropdownPage.steps.switchToGradingView();
+                utilities.verifyCSS(fillInTheGapsDropdownPage.correctAnswersLabel(), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(fillInTheGapsDropdownPage.correctAnswerResponseNumeration(), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(fillInTheGapsDropdownPage.correctAnswerResponse(), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(fillInTheGapsDropdownPage.correctIncorrectStatusMessageText(), {
+                    'font-size': fontSizes[option]
+                });
+                fillInTheGapsDropdownPage.steps.switchToStudentView();
+                fillInTheGapsDropdownPage.steps.switchToEditTab();
+            });
+        });
+    });
+
+    describe('Additional settings: Accessibility section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyAdditionalSettingsAccessibilitySection();
+    });
+    
+    describe('Additional Settings: Details section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyDetailsSection();
+    });
+});

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

@@ -0,0 +1,309 @@
+import { fillInTheGapsDropdownPage } 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 with 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(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown1);
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionFields(1, optionsForDropdown2);
+            fillInTheGapsDropdownPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsDropdownPage.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', () => {
+            fillInTheGapsDropdownPage.steps.checkCustomizePlaceholderTextCheckbox();
+            utilities.verifyElementCount(fillInTheGapsDropdownPage.individualPlaceholderTextInputField(), 2);
+            fillInTheGapsDropdownPage.steps.verifyIndividualPlaceholderTextInputFields(0);
+            fillInTheGapsDropdownPage.steps.verifyIndividualPlaceholderTextInputFields(1);
+        });
+
+        it('When the users adds a new dropdown, the count of the placeholder text input fields should update accordingly', () => {
+            fillInTheGapsDropdownPage.steps.addResponseArea();
+            utilities.verifyElementCount(fillInTheGapsDropdownPage.individualPlaceholderTextInputField(), 3);
+            fillInTheGapsDropdownPage.steps.verifyIndividualPlaceholderTextInputFields(2);
+        });
+
+        it('When the user deletes any dropdown, the count of the placeholder text input fields should update accordingly', () => {
+            fillInTheGapsDropdownPage.steps.deleteAResponseArea(2);
+            utilities.verifyElementCount(fillInTheGapsDropdownPage.individualPlaceholderTextInputField(), 2);
+            fillInTheGapsDropdownPage.steps.verifyIndividualPlaceholderTextInputFields(0);
+            fillInTheGapsDropdownPage.steps.verifyIndividualPlaceholderTextInputFields(1);
+        });
+    });
+
+    describe('Additional Settings: Placeholder text - functionality in edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown1);
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionFields(1, optionsForDropdown2);
+            fillInTheGapsDropdownPage.steps.expandAdditionalSettings();
+        });
+
+        it('When \'Placeholder text\' input field is empty then no \'Placeholder text\' should be displayed in the specify correct answer section dropdown', () => {
+            fillInTheGapsDropdownPage.steps.verifyDropdownPlaceholderTextNotExistsSpecifyCorrectAnswerSection(0);
+            fillInTheGapsDropdownPage.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', () => {
+            fillInTheGapsDropdownPage.steps.addInputToPlaceholderTextInputField('Add answer');
+            fillInTheGapsDropdownPage.steps.verifyDropdownPlaceholderTextSpecifyCorrectAnswerSection(0, 'Add answer');
+            fillInTheGapsDropdownPage.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(fillInTheGapsDropdownPage.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', () => {
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, 'Flower');
+            fillInTheGapsDropdownPage.steps.verifyDropdownPlaceholderTextNotExistsSpecifyCorrectAnswerSection(0);
+            fillInTheGapsDropdownPage.steps.verifyDropdownPlaceholderTextSpecifyCorrectAnswerSection(1, 'Add answer');
+            fillInTheGapsDropdownPage.steps.navigateToDropdownOptionsTab(0);
+            fillInTheGapsDropdownPage.steps.deleteOption(0);
+            fillInTheGapsDropdownPage.steps.verifyDropdownPlaceholderTextSpecifyCorrectAnswerSection(0, 'Add answer');
+            fillInTheGapsDropdownPage.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', () => {
+            fillInTheGapsDropdownPage.steps.clearPlaceholderTextInputField();
+            fillInTheGapsDropdownPage.steps.verifyDropdownPlaceholderTextNotExistsSpecifyCorrectAnswerSection(0);
+            fillInTheGapsDropdownPage.steps.verifyDropdownPlaceholderTextNotExistsSpecifyCorrectAnswerSection(1);
+        });
+
+        it('When "Customize placeholder text for individual text containers" checkbox is checked and \'Placeholder text\' input fields for individual text containers are kept empty, then no \'Placeholder text\' should be displayed in the specify correct answer section dropdowns', () => {
+            fillInTheGapsDropdownPage.steps.checkCustomizePlaceholderTextCheckbox();
+            fillInTheGapsDropdownPage.steps.verifyDropdownPlaceholderTextNotExistsSpecifyCorrectAnswerSection(0);
+            fillInTheGapsDropdownPage.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', () => {
+            fillInTheGapsDropdownPage.steps.addInputToIndividualPlaceholderTextInputField(0, 'Response a');
+            fillInTheGapsDropdownPage.steps.verifyDropdownPlaceholderTextSpecifyCorrectAnswerSection(0, 'Response a');
+            fillInTheGapsDropdownPage.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', () => {
+            fillInTheGapsDropdownPage.steps.clearIndividualPlaceholderTextInputField(0);
+            fillInTheGapsDropdownPage.steps.verifyDropdownPlaceholderTextNotExistsSpecifyCorrectAnswerSection(0);
+            fillInTheGapsDropdownPage.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')
+            fillInTheGapsDropdownPage.steps.addInputToPlaceholderTextInputField('Global placeholder');
+            fillInTheGapsDropdownPage.steps.addInputToIndividualPlaceholderTextInputField(0, 'Response 1');
+            fillInTheGapsDropdownPage.steps.verifyDropdownPlaceholderTextSpecifyCorrectAnswerSection(0, 'Response 1');
+            fillInTheGapsDropdownPage.steps.verifyDropdownPlaceholderTextSpecifyCorrectAnswerSection(1, 'Global placeholder');
+        });
+
+        it('Accessibility of \'Placeholder text\' in preview tab', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDropdownPage.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', () => {
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, 'Petal');
+            fillInTheGapsDropdownPage.steps.verifyDropdownPlaceholderTextNotExistsSpecifyCorrectAnswerSection(0);
+            fillInTheGapsDropdownPage.steps.deleteOption(0);
+            fillInTheGapsDropdownPage.steps.verifyDropdownPlaceholderTextSpecifyCorrectAnswerSection(0, 'Response 1');
+            fillInTheGapsDropdownPage.steps.verifyDropdownPlaceholderTextSpecifyCorrectAnswerSection(1, 'Global placeholder');
+        });
+    });
+
+    describe('Additional Settings: Placeholder text - functionality in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown1);
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionFields(1, optionsForDropdown2);
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, correctAnswerArray[0]);
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(1, correctAnswerArray[1]);
+            fillInTheGapsDropdownPage.steps.expandAdditionalSettings();
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyPlaceholderTextPreviewTabFunctionality();
+
+        fillInTheGapsDropdownPage.tests.verifyIndividualPlaceholderTextPreviewTabFunctionality();
+    });
+
+    describe('Additional Settings: Grading view - Contents in edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyGradingViewEnumerationSectionContents('Dropdown');
+
+        it('When the user selects "Without enumeration" radio button, the identifiers section should disappear', () => {
+            fillInTheGapsDropdownPage.steps.selectEnumerationType('without enumeration');
+            utilities.verifyElementVisibilityState(fillInTheGapsDropdownPage.identifiersLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(fillInTheGapsDropdownPage.numericalToggleButton(), 'notExist');
+        });
+
+        it('When the user selects "With enumeration" radio button again, the identifiers section should appear again', () => {
+            fillInTheGapsDropdownPage.steps.selectEnumerationType('with enumeration');
+            utilities.verifyElementVisibilityState(fillInTheGapsDropdownPage.identifiersLabel(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsDropdownPage.numericalToggleButton(), 'visible');
+        })
+    });
+
+    describe('Additional settings: Grading view - functionality in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown1);
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionFields(1, optionsForDropdown2);
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, correctAnswerArray[0]);
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(1, correctAnswerArray[1]);
+            fillInTheGapsDropdownPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+            fillInTheGapsDropdownPage.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`, () => {
+                fillInTheGapsDropdownPage.steps.selectIdentifierToggleButton(option);
+                fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+                fillInTheGapsDropdownPage.steps.verifyDropdownNumerationNotExistsPreviewTab();
+            });
+
+            it('When user clicks on \'Check answer\' button then the numeration should not be displayed in the dropdowns', () => {
+                fillInTheGapsDropdownPage.steps.checkAnswer();
+                fillInTheGapsDropdownPage.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`, () => {
+                fillInTheGapsDropdownPage.steps.switchToGradingView();
+                fillInTheGapsDropdownPage.steps.verifyDropdownEnumeration(enumerationOptions[option]);
+                fillInTheGapsDropdownPage.steps.verifyCorrectAnswerDropdownEnumeration(enumerationOptions[option]);
+                cy.log('Post step: Switch to Edit tab')
+                fillInTheGapsDropdownPage.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', () => {
+            fillInTheGapsDropdownPage.steps.selectEnumerationType('without enumeration');
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.steps.switchToGradingView();
+            utilities.verifyInnerText(fillInTheGapsDropdownPage.correctAnswerSectionWithoutEnumerationWrapper(), 'Lorem ipsum dolor sit amet, \nFlower\n​\nonsectetur adipiscing elit. Ut pellentesque tinciduntornare. Integer porttitor est quis urna porttitor, eget tempus tellus dapibus \nLeaf\n​');
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerResponsesWithoutEnumeration(['Flower', 'Leaf']);
+            fillInTheGapsDropdownPage.steps.verifyDropdownNumerationNotExistsPreviewTab();
+            utilities.verifyElementVisibilityState(fillInTheGapsDropdownPage.correctAnswerResponseNumeration(), 'notExist');
+        });
+
+        it('CSS of correct answer section', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsDropdownPage.correctAnswerSectionWithoutEnumerationWrapper(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            fillInTheGapsDropdownPage.correctAnswerSectionWithoutEnumerationWrapper()
+                .within(() => {
+                    utilities.verifyCSS(fillInTheGapsDropdownPage.dropdownTextLabel(), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular
+                    });
+                    utilities.verifyCSS(fillInTheGapsDropdownPage.correctAnswerResponseWrapperWithoutEnumeration().parent().find('[role="combobox"]'), {
+                        'border': `1px solid ${css.color.correctAnswer}`
+                    });
+                });
+        });
+
+        it('Accessibility of correct answer section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDropdownPage.correctAnswerSectionWithoutEnumerationWrapper().parents('[class*="question-preview-wrapper"]'));
+        });
+    });
+
+    describe('Additional settings: ARIA label for dropdowns - Contents in edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyAriaLabelSectionContents('dropdown');
+
+        it('When the users adds a new dropdown, the count of the aria label text input fields should update accordingly', () => {
+            fillInTheGapsDropdownPage.steps.addResponseArea();
+            utilities.verifyElementCount(fillInTheGapsDropdownPage.ariaLabelInputField(), 3);
+            fillInTheGapsDropdownPage.steps.verifyAriaLabelTextInputFields(2);
+        });
+
+        it('When the user deletes any dropdown, the count of the aria label texts input fields should update accordingly', () => {
+            fillInTheGapsDropdownPage.steps.deleteAResponseArea(1);
+            utilities.verifyElementCount(fillInTheGapsDropdownPage.ariaLabelInputField(), 2);
+            fillInTheGapsDropdownPage.steps.verifyAriaLabelTextInputFields(0);
+            fillInTheGapsDropdownPage.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', () => {
+            fillInTheGapsDropdownPage.steps.enterTextInAriaLabelInputField(0, 'Select correct option');
+            fillInTheGapsDropdownPage.steps.verifyDropdownAriaLabelSpecifyCorrectAnswerSection(0, 'Select correct option');
+            fillInTheGapsDropdownPage.steps.verifyDropdownAriaLabelSpecifyCorrectAnswerSection(1, 'Add answer for response 2');
+        });
+    });
+
+    describe('Additional settings: ARIA label for dropdowns - functionality in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.expandAdditionalSettings();
+            fillInTheGapsDropdownPage.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', () => {
+            fillInTheGapsDropdownPage.steps.verifyDropdownAriaLabelPreviewTab(0, 'Add answer for response 1');
+            fillInTheGapsDropdownPage.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', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.enterTextInAriaLabelInputField(0, 'Correct response 1');
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.steps.verifyDropdownAriaLabelPreviewTab(0, 'Correct response 1');
+            fillInTheGapsDropdownPage.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(fillInTheGapsDropdownPage.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', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.clearTextInAriaLabelInputField(0);
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.steps.verifyDropdownAriaLabelPreviewTab(0, 'Add answer for response 1');
+            fillInTheGapsDropdownPage.steps.verifyDropdownAriaLabelPreviewTab(1, 'Add answer for response 2');
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsDropdownNew/dropdownSettings.js

@@ -0,0 +1,181 @@
+import { dialogBoxBase, fillInTheGapsDropdownPage } from "../../../pages";
+import utilities from "../../../support/helpers/utilities";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+describe('Create item page - Fill in the gaps with dropdown: Dropdown settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Dropdown settings - Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When the user clicks on a Dropdown settings button, then Dropdown settings popup should be displayed with the title \'Dropdown settings\'', () => {
+            fillInTheGapsDropdownPage.steps.clickOnResponseAreaSettingsButton(0);
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBoxTitle(), 'visible');
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'Dropdown settings');
+        });
+
+        it('\'Width (px)\' label and input field with default value should be displayed. \'Height (px)\' label and input field should not be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsDropdownPage.responseAreaSettingsWidthLabel(), 'Width (px)');
+            utilities.verifyElementVisibilityState(fillInTheGapsDropdownPage.responseAreaSettingsWidthLabel(), 'visible');
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaSettingsWidthInputFieldValue(120);
+            utilities.verifyElementVisibilityState(fillInTheGapsDropdownPage.responseAreaSettingsHeightLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(fillInTheGapsDropdownPage.responseAreaSettingsHeightInputField(), 'notExist');
+        });
+
+        it('The minimum allowed value for \'Width (px)\' input field should be \'120\'', () => {
+            fillInTheGapsDropdownPage.steps.verifyMinimumValueOfWidthInputField();
+        });
+
+        it('When user gives an input lower than \'120\' in \'Width (px)\' input field, then the input field value should be automatically set to 120', () => {
+            fillInTheGapsDropdownPage.steps.addInputToWidthInputField(50);
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaSettingsWidthInputFieldValue(120);
+        });
+
+        it('\'Set for all dropdowns\' label and checkbox should be displayed and by default the checkbox should be checked', () => {
+            utilities.verifyInnerText(fillInTheGapsDropdownPage.setForAllDropdownsLabel(), 'Set for all dropdowns');
+            utilities.verifyElementVisibilityState(fillInTheGapsDropdownPage.setForAllDropdownsLabel(), 'visible');
+            fillInTheGapsDropdownPage.steps.verifySetForAllDropdownsCheckboxChecked();
+        });
+
+        it('\'OK\' and \'Cancel\' button should be displayed in the popup', () => {
+            utilities.verifyInnerText(fillInTheGapsDropdownPage.responseAreaSettingsCancelButton(), 'Cancel');
+            utilities.verifyElementVisibilityState(fillInTheGapsDropdownPage.responseAreaSettingsCancelButton(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsDropdownPage.responseAreaSettingsOkButton(), 'OK');
+            utilities.verifyElementVisibilityState(fillInTheGapsDropdownPage.responseAreaSettingsOkButton(), 'visible');
+        });
+
+        it('When user updates any value and clicks on \'Cancel\' button, then the Dropdown settings popup should close and the updated values should not be saved', () => {
+            fillInTheGapsDropdownPage.steps.addInputToWidthInputField(150);
+            fillInTheGapsDropdownPage.steps.uncheckSetForAllDropdownsCheckbox();
+            fillInTheGapsDropdownPage.steps.clickOnResponseAreaSettingsCancelButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            cy.log('Reopening Dropdown settings popup and verifying changes not retained');
+            fillInTheGapsDropdownPage.steps.clickOnResponseAreaSettingsButton(0);
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaSettingsWidthInputFieldValue(120);
+            fillInTheGapsDropdownPage.steps.verifySetForAllDropdownsCheckboxChecked();
+        });
+
+        it('When user updates any value and clicks on \'OK\' button, then the Dropdown settings popup should close and the updated values should be saved', () => {
+            fillInTheGapsDropdownPage.steps.addInputToWidthInputField(150);
+            fillInTheGapsDropdownPage.steps.uncheckSetForAllDropdownsCheckbox();
+            fillInTheGapsDropdownPage.steps.clickOnResponseAreaSettingsOkButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            cy.log('Reopening Dropdown settings popup and verifying changes are retained');
+            fillInTheGapsDropdownPage.steps.clickOnResponseAreaSettingsButton(0);
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaSettingsWidthInputFieldValue(150);
+            fillInTheGapsDropdownPage.steps.verifySetForAllDropdownsCheckboxUnchecked();
+        });
+
+        it('CSS of dropdown container settings popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(dialogBoxBase.dialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsDropdownPage.responseAreaSettingsWidthLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsDropdownPage.responseAreaSettingsWidthInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsDropdownPage.setForAllDropdownsLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsDropdownPage.responseAreaSettingsCancelButton(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.transparent
+            });
+            utilities.verifyCSS(fillInTheGapsDropdownPage.responseAreaSettingsOkButton(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.primaryBtnBg
+            });
+        });
+
+        it('Accessibility of dropdown container settings popup', { tags: 'css' }, () => {
+            cy.checkAccessibility(dialogBoxBase.dialogBox());
+        });
+    });
+
+    describe('Dropdown settings - Width input field functionality in Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.clickOnResponseAreaSettingsButton(0);
+        });
+
+        it('When \'Set for all dropdowns\' checkbox is checked, user updates the width input field value and clicks on OK, then width of all response areas in question input field should be updated', () => {
+            fillInTheGapsDropdownPage.steps.addInputToWidthInputField(180);
+            fillInTheGapsDropdownPage.steps.clickOnResponseAreaSettingsOkButton();
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaWidth(0, '180px');
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaWidth(1, '180px');
+        });
+        
+        it('When \'Set for all dropdowns\' checkbox is checked, user updates the width input field value and clicks on OK, then width of all dropdowns in the specify correct answer section should be updated', () => {
+            fillInTheGapsDropdownPage.steps.verifyDropdownWidthSpecifyCorrectAnswerSection(0, '180px');
+            fillInTheGapsDropdownPage.steps.verifyDropdownWidthSpecifyCorrectAnswerSection(1, '180px');
+        });
+
+        it('When \'Set for all dropdowns\' checkbox is unchecked, user updates the width input field value and clicks on OK, then width of that particular response area in question input field should be updated', () => {
+            cy.log('Pre-step: Uncheck \'Set for all dropdowns\' checkbox')
+            fillInTheGapsDropdownPage.steps.clickOnResponseAreaSettingsButton(0);
+            fillInTheGapsDropdownPage.steps.uncheckSetForAllDropdownsCheckbox();
+            fillInTheGapsDropdownPage.steps.addInputToWidthInputField(150);
+            fillInTheGapsDropdownPage.steps.clickOnResponseAreaSettingsOkButton();
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaWidth(0, '150px');
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaWidth(1, '180px');
+        });
+
+        it('When \'Set for all dropdowns\' checkbox is unchecked, user updates the width input field value and clicks on OK, then width of that dropdowns in the specify correct answer section should be updated', () => {
+            fillInTheGapsDropdownPage.steps.verifyDropdownWidthSpecifyCorrectAnswerSection(0, '150px');
+            fillInTheGapsDropdownPage.steps.verifyDropdownWidthSpecifyCorrectAnswerSection(1, '180px');
+        });
+    });
+
+    describe('Dropdown settings - Width input field functionality in Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.clickOnResponseAreaSettingsButton(0);
+        });
+
+        it('When \'Set for all dropdowns\' checkbox is checked, user updates the width input field value and clicks on OK, then dimensions of all answer input fields in preview tab should be updated', () => {
+            fillInTheGapsDropdownPage.steps.addInputToWidthInputField(180);
+            fillInTheGapsDropdownPage.steps.clickOnResponseAreaSettingsOkButton();
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.steps.verifyDropdownWidthPreviewTab(0, '180px');
+            fillInTheGapsDropdownPage.steps.verifyDropdownWidthPreviewTab(1, '180px');
+        });
+
+        it('When \'Set for all dropdowns\' checkbox is unchecked, user updates the width and height input field value and clicks on OK, then dimensions of that particular answer input field in in preview tab should be updated', () => {
+            cy.log('Pre-step: Uncheck \'Set for all dropdowns\' checkbox')
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.clickOnResponseAreaSettingsButton(0);
+            fillInTheGapsDropdownPage.steps.uncheckSetForAllDropdownsCheckbox();
+            fillInTheGapsDropdownPage.steps.addInputToWidthInputField(120);
+            fillInTheGapsDropdownPage.steps.clickOnResponseAreaSettingsOkButton();
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.steps.verifyDropdownWidthPreviewTab(0, '120px');
+            fillInTheGapsDropdownPage.steps.verifyDropdownWidthPreviewTab(1, '180px');
+        });
+    });
+});