itemengine-cypress-automation 1.0.128 → 1.0.131-updateILCrepo6March-02c78d1.0

package/cypress/e2e/ILC/FillInTheGapsDropdownNew/Scoring/partialEqualWeightsWithCorrectPointsEqualToAlternativePoints.js

@@ -0,0 +1,186 @@
+import { fillInTheGapsDropdownPage } from "../../../../pages";
+import { commonComponents } from "../../../../pages/components";
+import abortEarlySetup from "../../../../support/helpers/abortEarly";
+import utilities from "../../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const optionsForDropdown1 = ['Flower', 'Petal', 'Stem', 'Branch'];
+const optionsForDropdown2 = ['Leaf', 'Leaves', 'Stem', 'Seed'];
+const optionsForDropdown3 = ['Flower', 'Leaf', 'Stem', 'Roots'];  //Common answer
+const correctAnswerArray = ['Flower', 'Leaf', 'Stem'];
+const alternateAnswerArray = ['Petal', 'Leaves', 'Stem'];
+const incorrectAnswerArray = ['Branch', 'Seed', 'Roots'];
+
+describe('Create item page - Fill in the gaps with dropdown: Partial equal with alternative answers', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question preview: Auto scored - Partial equal weights with alternative answer - When \'Correct answer\' points are equal to \'Alternative answer\' points', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.addResponseAreaInQuestionField();
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown1);
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionFields(1, optionsForDropdown2);
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionFields(2, optionsForDropdown3);
+            fillInTheGapsDropdownPage.steps.allotPoints(15);
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, correctAnswerArray[0]);
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(1, correctAnswerArray[1]);
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(2, correctAnswerArray[2]);
+            fillInTheGapsDropdownPage.steps.addAlternativeAnswerAccordion(1);
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, alternateAnswerArray[0]);
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(1, alternateAnswerArray[1]);
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(2, alternateAnswerArray[2]);
+            fillInTheGapsDropdownPage.steps.allotPoints(15);
+            fillInTheGapsDropdownPage.steps.selectAutoScoredScoringSubtype('Partial equal weights');
+            fillInTheGapsDropdownPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user selects \'Grading\' view without attempting the question, dropdown numeration should be displayed, correct answers section should be displayed with correct answers from the correct accordion and respective dropdown numeration', () => {
+            fillInTheGapsDropdownPage.steps.switchToGradingView();
+            fillInTheGapsDropdownPage.steps.verifyDropdownNumerationPreviewTab();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(correctAnswerArray);
+        });
+
+        it('When the user attempts the question with responses from the correct accordion, then the user should be awarded full points and on switching to \'Grading\' view, correct icons should be displayed beside all the correct dropdowns, correct/incorrect status message and correct answer section should not be displayed', () => {
+            fillInTheGapsDropdownPage.steps.resetQuestionPreview();
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownInPreviewTab([{ dropdownIndex: 0, dropdownOption: correctAnswerArray[0] }, { dropdownIndex: 1, dropdownOption: correctAnswerArray[1] }, { dropdownIndex: 2, dropdownOption: correctAnswerArray[2] }]);
+            fillInTheGapsDropdownPage.steps.verifyPreviewScore(15, 15);
+            fillInTheGapsDropdownPage.steps.switchToGradingView();
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+            fillInTheGapsDropdownPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user has attempted the question with responses from the correct accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct dropdowns, correct/incorrect status message and correct answer section should not be displayed')
+            fillInTheGapsDropdownPage.steps.checkAnswer();
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts the question with responses from the alternative accordion, then the user should be awarded with full points and on switching to \'Grading\' view, correct icons should be displayed beside all the correct dropdowns, correct/incorrect status message and correct answer section should not be displayed', () => {
+            fillInTheGapsDropdownPage.steps.resetQuestionPreview();
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownInPreviewTab([{ dropdownIndex: 0, dropdownOption: alternateAnswerArray[0] }, { dropdownIndex: 1, dropdownOption: alternateAnswerArray[1] }, { dropdownIndex: 2, dropdownOption: alternateAnswerArray[2] }]);
+            fillInTheGapsDropdownPage.steps.verifyPreviewScore(15, 15);
+            fillInTheGapsDropdownPage.steps.switchToGradingView();
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+            fillInTheGapsDropdownPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user has attempted the question with responses from the alternative accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct dropdowns, correct/incorrect status message and correct answer section should not be displayed')
+            fillInTheGapsDropdownPage.steps.checkAnswer();
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts the question with partially correct options exclusively from the correct accordion, then the user should be awarded points of the correct accordion and on switching to \'Grading\' view, correct icon should be displayed besides the correct dropdowns, no icon should be displayed beside unattempted dropdown, correct/incorrect status message should not be displayed and correct answer section with all correct answers from the correct accordion along with dropdown numeration should be displayed', () => {
+            fillInTheGapsDropdownPage.steps.resetQuestionPreview();
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownInPreviewTab([{ dropdownIndex: 0, dropdownOption: correctAnswerArray[0] }]);
+            fillInTheGapsDropdownPage.steps.verifyPreviewScore(5, 15);
+            fillInTheGapsDropdownPage.steps.switchToGradingView();
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(correctAnswerArray);
+            fillInTheGapsDropdownPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user has attempted the question with partially correct options exclusively from the correct accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct dropdowns, correct/incorrect status message and correct answer section should not be displayed')
+            fillInTheGapsDropdownPage.steps.checkAnswer();
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts the question with partially correct options exclusively from the alternative accordion, then the user should be awarded points of the correctly attempted response and on switching to \'Grading\' view, correct icon should be displayed besides the correct dropdowns, no icon should be displayed beside unattempted dropdown, correct/incorrect status message should not be displayed and correct answer section with all correct answers from the correct accordion along with dropdown numeration should be displayed', () => {
+            fillInTheGapsDropdownPage.steps.resetQuestionPreview();
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownInPreviewTab([{ dropdownIndex: 0, dropdownOption: alternateAnswerArray[0] }]);
+            fillInTheGapsDropdownPage.steps.verifyPreviewScore(5, 15);
+            fillInTheGapsDropdownPage.steps.switchToGradingView();
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(correctAnswerArray);
+            fillInTheGapsDropdownPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user has attempted the question with partially correct options exclusively from the alternative accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct dropdowns, no icon should be displayed beside unattempted dropdown, correct/incorrect status message and correct answer section should not be displayed')
+            fillInTheGapsDropdownPage.steps.checkAnswer();
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user has attempted the question with equal number of correct responses from correct and alternative accordion, then the user should be awarded with points of the correctly attempted response and on switching to \'Grading\' view, correct icon should be displayed besides dropdown with correct accordion response, incorrect icon should be displayed beside dropdown with the alternative accordion response, correct/incorrect status message should not be displayed and correct answer section with all correct answers from the correct accordion along with dropdown numeration should be displayed', () => {
+            fillInTheGapsDropdownPage.steps.resetQuestionPreview();
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownInPreviewTab([{ dropdownIndex: 0, dropdownOption: correctAnswerArray[0] }, { dropdownIndex: 1, dropdownOption: alternateAnswerArray[1] }]);
+            fillInTheGapsDropdownPage.steps.verifyPreviewScore(5, 15);
+            fillInTheGapsDropdownPage.steps.switchToGradingView();
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionIcon(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(correctAnswerArray);
+            fillInTheGapsDropdownPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user has attempted the question with equal number of correct responses from correct and alternative accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides dropdown with correct accordion response, incorrect icon should be displayed beside dropdown with the alternative accordion response, correct/incorrect status message and correct answer section should not be displayed')
+            fillInTheGapsDropdownPage.steps.checkAnswer();
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionIcon(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('Race condition : When the user attempts the question with the common response between correct and alternative accordion, then the user should be awarded with points of the correctly attempted response and on switching to \'Grading\' view, correct icon should be besides the common response, no icon should be displayed beside unattempted dropdown, correct/incorrect status message should not be displayed and correct answer section with all correct answers from the correct accordion along with dropdown numeration should be displayed', () => {
+            fillInTheGapsDropdownPage.steps.resetQuestionPreview();
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownInPreviewTab([{ dropdownIndex: 2, dropdownOption: correctAnswerArray[2] }]);
+            fillInTheGapsDropdownPage.steps.verifyPreviewScore(5, 15);
+            fillInTheGapsDropdownPage.steps.switchToGradingView();
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(0);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(correctAnswerArray);
+            fillInTheGapsDropdownPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user has attempted the question with the common response between correct and alternative accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct dropdown, no icon should be displayed beside unattempted dropdown, correct/incorrect status message and correct answer section should not be displayed')
+            fillInTheGapsDropdownPage.steps.checkAnswer();
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(0);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts the question incorrectly, then the user should be awarded 0 points and on switching to \'Grading\' view, incorrect icons should be displayed besides all incorrect dropdowns, no icon should be displayed beside unattempted dropdown, correct/incorrect status message should not be displayed and correct answer section with all correct answers along with dropdown numeration should be displayed', () => {
+            fillInTheGapsDropdownPage.steps.resetQuestionPreview();
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownInPreviewTab([{ dropdownIndex: 0, dropdownOption: incorrectAnswerArray[0] }, { dropdownIndex: 1, dropdownOption: incorrectAnswerArray[1] }]);
+            fillInTheGapsDropdownPage.steps.verifyPreviewScore(0, 15);
+            fillInTheGapsDropdownPage.steps.switchToGradingView();
+            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionIcon(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(correctAnswerArray);
+            fillInTheGapsDropdownPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user has attempted the question incorrectly and clicks on \'Check answer\' button, then incorrect icons should be displayed besides all incorrect dropdowns, no icon should be displayed beside unattempted dropdown, correct/incorrect status message and correct answer section should not be displayed')
+            fillInTheGapsDropdownPage.steps.checkAnswer();
+            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionIcon(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+    });
+}); 

package/cypress/e2e/ILC/FillInTheGapsDropdownNew/Scoring/partialEqualWeightsWithCorrectPointsGreaterThanAlternativePoints.js

@@ -0,0 +1,214 @@
+import { fillInTheGapsDropdownPage } from "../../../../pages";
+import abortEarlySetup from "../../../../support/helpers/abortEarly";
+import utilities from "../../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const optionsForDropdown1 = ['Flower', 'Petal', 'Stem', 'Branch'];
+const optionsForDropdown2 = ['Leaf', 'Leaves', 'Stem', 'Seed'];
+const optionsForDropdown3 = ['Flower', 'Leaf', 'Stem', 'Roots'];  //Common answer
+const correctAnswerArray = ['Flower', 'Leaf', 'Stem'];
+const alternateAnswerArray = ['Petal', 'Leaves', 'Stem'];
+const incorrectAnswerArray = ['Branch', 'Seed', 'Roots'];
+
+describe('Create item page - Fill in the gaps with dropdown: Partial equal weights with alternative answers', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question preview: Auto scored - Partial equal weights with alternative answer - When \'Correct answer\' points are more than \'Alternate answer\' points', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.addResponseAreaInQuestionField();
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown1);
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionFields(1, optionsForDropdown2);
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionFields(2, optionsForDropdown3);
+            fillInTheGapsDropdownPage.steps.allotPoints(15);
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, correctAnswerArray[0]);
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(1, correctAnswerArray[1]);
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(2, correctAnswerArray[2]);
+            fillInTheGapsDropdownPage.steps.addAlternativeAnswerAccordion(1);
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, alternateAnswerArray[0]);
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(1, alternateAnswerArray[1]);
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(2, alternateAnswerArray[2]);
+            fillInTheGapsDropdownPage.steps.allotPoints(9);
+            fillInTheGapsDropdownPage.steps.selectAutoScoredScoringSubtype('Partial equal weights');
+            fillInTheGapsDropdownPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user selects \'Grading\' view without attempting the question, dropdown numeration should be displayed, correct answers section with a label \'Correct answers\' should be displayed with correct answers from the correct accordion and respective dropdown numeration', () => {
+            fillInTheGapsDropdownPage.steps.switchToGradingView();
+            fillInTheGapsDropdownPage.steps.verifyDropdownNumerationPreviewTab();
+            utilities.verifyInnerText(fillInTheGapsDropdownPage.correctAnswersLabel(), 'Correct answers');
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(correctAnswerArray);
+        });
+
+        it('When the user attempts the question with responses from the correct accordion, then the user should be awarded full points and on switching to \'Grading\' view, correct icons should be displayed beside all the correct dropdowns, correct/incorrect status message should not be displayed and correct answer section should not be displayed', () => {
+            fillInTheGapsDropdownPage.steps.resetQuestionPreview();
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownInPreviewTab([{ dropdownIndex: 0, dropdownOption: correctAnswerArray[0] }, { dropdownIndex: 1, dropdownOption: correctAnswerArray[1] }, { dropdownIndex: 2, dropdownOption: correctAnswerArray[2] }]);
+            fillInTheGapsDropdownPage.steps.verifyPreviewScore(15, 15);
+            fillInTheGapsDropdownPage.steps.switchToGradingView();
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+            fillInTheGapsDropdownPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user has attempted the question with responses from the correct accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct dropdowns, correct/incorrect status message should not be displayed and correct answer section should not be displayed');
+            fillInTheGapsDropdownPage.steps.checkAnswer();
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts the question with alternative accordion responses, then the user should be awarded with points specified for alternative accordion (less than full points) and on switching to \'Grading\' view, correct icons should be displayed beside all the correct dropdowns, correct/incorrect status message should not be displayed and correct answer section should not be displayed', () => {
+            fillInTheGapsDropdownPage.steps.resetQuestionPreview();
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownInPreviewTab([{ dropdownIndex: 0, dropdownOption: alternateAnswerArray[0] }, { dropdownIndex: 1, dropdownOption: alternateAnswerArray[1] }, { dropdownIndex: 2, dropdownOption: alternateAnswerArray[2] }]);
+            fillInTheGapsDropdownPage.steps.verifyPreviewScore(9, 15);
+            fillInTheGapsDropdownPage.steps.switchToGradingView();
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+            fillInTheGapsDropdownPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user has attempted the question with alternative accordion response and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct answer dropdowns, correct/incorrect status message should not be displayed and correct answer section should not be displayed');
+            fillInTheGapsDropdownPage.steps.checkAnswer();
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts the question with partially correct options exclusively from the correct accordion, then the user should be awarded points of the correctly attempted response and on switching to \'Grading\' view, correct icon should be displayed besides the correct dropdowns, no icon should be displayed beside unattempted dropdown, correct/incorrect status message should not be displayed and correct answer section with all correct answers from the correct accordion along with dropdown numeration should be displayed', () => {
+            fillInTheGapsDropdownPage.steps.resetQuestionPreview();
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownInPreviewTab([{ dropdownIndex: 0, dropdownOption: correctAnswerArray[0] }]);
+            fillInTheGapsDropdownPage.steps.verifyPreviewScore(5, 15);
+            fillInTheGapsDropdownPage.steps.switchToGradingView();
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(correctAnswerArray);
+            fillInTheGapsDropdownPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user has attempted the question with partially correct options exclusively from the correct accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct dropdowns, correct/incorrect status message should not be displayed and correct answer section should not be displayed');
+            fillInTheGapsDropdownPage.steps.checkAnswer();
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts the question with partially correct options exclusively from the alternative accordion, then the user should be awarded points of the correctly attempted response and on switching to \'Grading\' view, correct icon should be displayed besides the correct dropdowns, no icon should be displayed beside unattempted dropdown, correct/incorrect status message should not be displayed and correct answer section with all correct answers from the correct accordion along with dropdown numeration should be displayed', () => {
+            fillInTheGapsDropdownPage.steps.resetQuestionPreview();
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownInPreviewTab([{ dropdownIndex: 0, dropdownOption: alternateAnswerArray[0] }]);
+            fillInTheGapsDropdownPage.steps.verifyPreviewScore(3, 15);
+            fillInTheGapsDropdownPage.steps.switchToGradingView();
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(correctAnswerArray);
+            fillInTheGapsDropdownPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user has attempted the question with partially correct options exclusively from the alternative accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct dropdowns, no icon should be displayed beside unattempted dropdown, correct/incorrect status message should not be displayed and correct answer section should not be displayed');
+            fillInTheGapsDropdownPage.steps.checkAnswer();
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user has attempted the question with equal number of correct responses from correct and alternative accordion, then the user should be awarded with points of the correctly attempted response and on switching to \'Grading\' view, correct icon should be displayed besides correct accordion responses, incorrect icon should be displayed beside alternative accordion responses, correct/incorrect status message should not be displayed and correct answer section with all correct answers from the correct accordion along with dropdown numeration should be displayed', () => {
+            fillInTheGapsDropdownPage.steps.resetQuestionPreview();
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownInPreviewTab([{ dropdownIndex: 0, dropdownOption: correctAnswerArray[0] }, { dropdownIndex: 1, dropdownOption: alternateAnswerArray[1] }]);
+            fillInTheGapsDropdownPage.steps.verifyPreviewScore(5, 15);
+            fillInTheGapsDropdownPage.steps.switchToGradingView();
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionIcon(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(correctAnswerArray);
+            fillInTheGapsDropdownPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user has attempted the question with equal number of correct responses from correct and alternative accordion and clicks on \'Check answer\' button, correct icon should be displayed besides the correctly answered dropdowns, incorrect icon should be displayed beside alternative accordion responses, correct/incorrect status message should not be displayed and correct answer section should not be displayed')
+            fillInTheGapsDropdownPage.steps.checkAnswer();
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionIcon(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('Race condition : When the user attempts the question with the common response between correct and alternative accordion, then the user should be awarded with points of the correctly attempted response and on switching to \'Grading\' view, correct icon should be besides the common response, no icon should be displayed beside unattempted response, correct/incorrect status message should not be displayed and correct answer section with all correct answers from the correct accordion along with dropdown numeration should be displayed', () => {
+            fillInTheGapsDropdownPage.steps.resetQuestionPreview();
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownInPreviewTab([{ dropdownIndex: 2, dropdownOption: correctAnswerArray[2] }]);
+            fillInTheGapsDropdownPage.steps.verifyPreviewScore(5, 15);
+            fillInTheGapsDropdownPage.steps.switchToGradingView();
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(0);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(correctAnswerArray);
+            fillInTheGapsDropdownPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user has attempted the question with common response between correct and alternative accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correctly answered dropdown, no icon should be displayed beside unattempted dropdown, correct/incorrect status message should not be displayed and correct answer section should not be displayed')
+            fillInTheGapsDropdownPage.steps.checkAnswer();
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(0);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts the question incorrectly, then the user should be awarded 0 points and on switching to \'Grading\' view, incorrect icons should be displayed besides all incorrect responses, no icon should be displayed beside unattempted dropdown, correct/incorrect status message should not be displayed and correct answer section with all correct answers from the correct accordion along with dropdown numeration should be displayed', () => {
+            fillInTheGapsDropdownPage.steps.resetQuestionPreview();
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownInPreviewTab([{ dropdownIndex: 0, dropdownOption: incorrectAnswerArray[0] }, { dropdownIndex: 1, dropdownOption: incorrectAnswerArray[1] }]);
+            fillInTheGapsDropdownPage.steps.verifyPreviewScore(0, 15);
+            fillInTheGapsDropdownPage.steps.switchToGradingView();
+            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionIcon(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(correctAnswerArray);
+            fillInTheGapsDropdownPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user has attempted the question incorrectly and clicks on \'Check answer\' button, then incorrect icons should be displayed besides all incorrect dropdowns, no icon should be displayed beside unattempted dropdowns, correct/incorrect status message should not be displayed and correct answer section should not be displayed')
+            fillInTheGapsDropdownPage.steps.checkAnswer();
+            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionIcon(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotExist(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('Overachiever case: When the user attempts the question with more number of correct responses from the alternative accordion than the correct accordion but the score of the individual response from the correct accordion overpowers the combined score of the alternative accordion answers then on switching to the \'Grading view\', then points awarded should be of the correct accordion, correct icons should be displayed for the correct accordion response, incorrect icon should be displayed for the alternative accordion responses, correct/incorrect status message should not be displayed and correct answer section with all correct answers from the correct accordion along with dropdown numeration should be displayed', () => {
+            cy.log('Pre-step: Switching to Edit tab and allotting points to alternative accordion such that the difference between the points is substantial and there are no common responses between the two accordions')
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(2, optionsForDropdown3[3]);
+            fillInTheGapsDropdownPage.steps.allotPoints(5);
+            fillInTheGapsDropdownPage.steps.expandCorrectAnswerAccordion();
+            fillInTheGapsDropdownPage.steps.allotPoints(23);
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownInPreviewTab([{ dropdownIndex: 0, dropdownOption: alternateAnswerArray[0] }, { dropdownIndex: 1, dropdownOption: alternateAnswerArray[1] }, { dropdownIndex: 2, dropdownOption: correctAnswerArray[2] }]);
+            fillInTheGapsDropdownPage.steps.verifyPreviewScore(7.67, 23);
+            fillInTheGapsDropdownPage.steps.switchToGradingView();
+            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionIcon(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(correctAnswerArray);
+            fillInTheGapsDropdownPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user attempts the question with more number of correct responses from the alternative accordion than the correct accordion but the score of the individual response from the correct accordion overpowers the combined score of the alternative accordion answers and clicks on the \'Check answer\' button, correct icons should be displayed beside correct accordion responses, incorrect icons should be displayed beside alternative accordion responses, correct/incorrect answer label, correct answer container should not be displayed')
+            fillInTheGapsDropdownPage.steps.checkAnswer();
+            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionIcon(0);
+            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionIcon(1);
+            fillInTheGapsDropdownPage.steps.verifyCorrectOptionIcon(2);
+            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
+            fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+    });
+});

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

@@ -0,0 +1,161 @@
+import { fillInTheGapsDropdownPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const optionsForDropdown = ['Image of a flower', 'Petals are displayed', 'Stem is the largest', 'Branches of a plane contain both leaves and flowers'];
+
+describe('Create item page - Fill in the gaps with dropdown: Dropdown and Dropdown menu section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Dropdown and Dropdown menu section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyDropdownAndDropdownMenuSectionContents();
+    });
+
+    describe('Dropdown section - Specify correct answer section dropdown', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown);
+            fillInTheGapsDropdownPage.steps.uncheckWordWrapForDropdownMenuCheckbox();
+        });
+
+        it('When \'User specified width\' toggle button is selected, then dropdown menu width should be the same as collapsed dropdown in specify correct answer section', () => {
+            fillInTheGapsDropdownPage.steps.compareDropdownMenuAndDropdownWidthForUserSpecifiedWidth();
+            cy.log('Choosing an option from dropdown to collapse it')
+            fillInTheGapsDropdownPage.steps.selectOptionFromDropdownList(optionsForDropdown[0]);
+        });
+
+        it('When \'Auto scale\' toggle button is selected, then width of the collapsed dropdown and the dropdown menu should be auto scaled(increased) to accommodate the longest option in the dropdown menu in specify correct answer section', () => {
+            fillInTheGapsDropdownPage.steps.compareDropdownMenuAndDropdownWidthForAutoScaled();
+            cy.log('Choosing an option from dropdown to collapse it')
+            fillInTheGapsDropdownPage.steps.selectOptionFromDropdownList(optionsForDropdown[0]);
+        });
+
+        it('When user selects the \'User specified width\' toggle button, then the collapsed dropdown and the dropdown menu should return to its default width', () => {
+            fillInTheGapsDropdownPage.steps.selectUserSpecifiedWidthToggleButton();
+            fillInTheGapsDropdownPage.steps.verifyUserSpecifiedToggleButtonIsSelected();
+            fillInTheGapsDropdownPage.steps.verifyDropdownDefaultWidthInSpecifyCorrectAnswer();
+            cy.log('Choosing an option from dropdown to collapse it')
+            fillInTheGapsDropdownPage.steps.selectOptionFromDropdownList(optionsForDropdown[3]);
+        });
+
+        it('When \'Display multiline text in dropdown\' checkbox is unchecked and user selects and long text option in dropdown, then the selected long text option should be incompletely displayed in the dropdown with an ellipses at the end and a tooltip which displays the entire option', () => {
+            fillInTheGapsDropdownPage.steps.verifyMultilineTextNotDisplayedInDropdownSpecifyCorrectAnswerSection(0);
+            utilities.getNthElement(fillInTheGapsDropdownPage.dropdownSpecifyCorrectAnswerSection(), 0)
+                .verifyTooltip(`${optionsForDropdown[3]}`);
+        });
+
+        it('User should be able to check the \'Display multiline text in dropdown\' checkbox', () => {
+            fillInTheGapsDropdownPage.steps.checkDisplayMultilineCheckbox();
+        });
+
+        it('When \'Display multiline text in dropdown\' checkbox is checked, then the added long text option should be word wrapped and displayed in a multi-line format', () => {
+            fillInTheGapsDropdownPage.steps.verifyMultilineTextIsDisplayedInDropdownSpecifyCorrectAnswerSection(0);
+        });
+    });
+
+    describe('Dropdown menu section - Specify correct answer section dropdown', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown);
+        });
+
+        it('When \'Word wrap for dropdown menu\' checkbox is checked, then all the dropdown menu options should be word wrapped and displayed in a multi-line format', () => {
+            fillInTheGapsDropdownPage.steps.expandDropdownInSpecifyCorrectAnswerSection(0);
+            fillInTheGapsDropdownPage.steps.verifyDropdownMenuOptionsWordWrappedSpecifyCorrectAnswerSection();
+            cy.log('Selecting an option to collapse the dropdown');
+            fillInTheGapsDropdownPage.steps.selectOptionFromDropdownList(optionsForDropdown[0]);
+        });
+
+        it('User should be able to uncheck the \'Word wrap for dropdown menu\' checkbox', () => {
+            fillInTheGapsDropdownPage.steps.uncheckWordWrapForDropdownMenuCheckbox();
+        });
+
+        it('When \'Word wrap for dropdown menu\' checkbox is unchecked, then all the dropdown menu options should be displayed in a single line', () => {
+            fillInTheGapsDropdownPage.steps.expandDropdownInSpecifyCorrectAnswerSection(0);
+            fillInTheGapsDropdownPage.steps.verifyDropdownMenuOptionsNotWordWrappedSpecifyCorrectAnswerSection();
+        });
+    });
+
+    describe('Dropdown section - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown);
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'User specified width\' toggle button is selected, then dropdown menu width should be the same as collapsed dropdown in preview tab', () => {
+            fillInTheGapsDropdownPage.steps.compareDropdownMenuAndDropdownWidthForUserSpecifiedWidthInPreviewTab();
+            cy.log('Choosing an option from dropdown to collapse it')
+            fillInTheGapsDropdownPage.steps.selectOptionFromDropdownList(optionsForDropdown[0]);
+        });
+
+        it('When \'Auto scale\' toggle button is selected, then width of the collapsed dropdown and the dropdown menu should be auto scaled(increased) to accommodate the longest option in the dropdown menu in specify correct answer section', () => {
+            fillInTheGapsDropdownPage.steps.compareDropdownMenuAndDropdownWidthForAutoScaledInPreviewTab();
+            cy.log('Choosing an option from dropdown to collapse it')
+            fillInTheGapsDropdownPage.steps.selectOptionFromDropdownList(optionsForDropdown[3]);
+        });
+
+        it('When user selects the \'User specified width\' toggle button, then the collapsed dropdown and the dropdown menu should return to its default width', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.selectUserSpecifiedWidthToggleButton();
+            fillInTheGapsDropdownPage.steps.verifyUserSpecifiedToggleButtonIsSelected();
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.steps.verifyDropdownDefaultWidthInPreviewTab();
+            cy.log('Choosing an option from dropdown to collapse it')
+            fillInTheGapsDropdownPage.steps.selectOptionFromDropdownList(optionsForDropdown[3]);
+        });
+
+        it('When \'Display multiline text in dropdown\' checkbox is unchecked and user selects and long text option in dropdown, then the selected long text option should be incompletely displayed in the dropdown with an ellipses at the end and a tooltip which displays the entire option', () => {
+            fillInTheGapsDropdownPage.steps.verifyMultilineTextNotDisplayedInDropdownPreviewTab(0);
+            utilities.getNthElement(fillInTheGapsDropdownPage.dropdownPreviewTab(), 0)
+                .verifyTooltip(`${optionsForDropdown[3]}`);
+        });
+
+        it('When \'Display multiline text in dropdown\' checkbox is checked, then the added long text option should be word wrapped and displayed in a multi-line format', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.checkDisplayMultilineCheckbox();
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.steps.verifyMultilineTextIsDisplayedInDropdownPreviewTab(0);
+        });
+    });
+
+    describe('Dropdown menu section- Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown);
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Word wrap for dropdown menu\' checkbox is checked, then all the dropdown menu options should be word wrapped and displayed in a multi-line format', () => {
+            fillInTheGapsDropdownPage.steps.expandDropdownInPreviewTab(0);
+            fillInTheGapsDropdownPage.steps.verifyDropdownMenuOptionsWordWrappedPreviewTab();
+            cy.log('Selecting an option to collapse the dropdown');
+            fillInTheGapsDropdownPage.steps.selectOptionFromDropdownList(optionsForDropdown[0]);
+        });
+
+        it('When \'Word wrap for dropdown menu\' checkbox is unchecked, then all the dropdown menu options should be displayed in a single line', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.uncheckWordWrapForDropdownMenuCheckbox();
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.steps.expandDropdownInPreviewTab(0);
+            fillInTheGapsDropdownPage.steps.verifyDropdownMenuOptionsNotWordWrappedPreviewTab();
+        });
+    });
+});