itemengine-cypress-automation 1.0.51 → 1.0.63

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

@@ -0,0 +1,134 @@
+import { fillInTheGapsOverImageDropdownPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create item page - Fill in the gaps over image - dropdown: Edit aria-label checkbox', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Edit aria-label in edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.addQuestionInstructions();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+        });
+
+        it('When the user uploads an image in image section, then \'Edit aria-labels for response containers\' checkbox and label should be displayed in the image properties in disabled state', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyDisabledStateOfEditAriaLabelsForResponseContainersCheckbox();
+        });
+
+        it('When the user adds a response container in the image, then \'Edit aria-labels for response containers\' checkbox should be enabled and by default it should be unchecked', () => {
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDefaultEnabledStateOfEditAriaLabelsForResponseContainersCheckbox();
+        });
+
+        it('CSS of \'Edit aria-labels for response containers\' label', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.editAriaLabelForResponseContainersLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'Edit aria-labels for response containers\' checkbox', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.editAriaLabelForResponseContainersCheckbox());
+        });
+
+        it('When the user checks the \'Edit aria-labels for response containers\' checkbox, then a label \'ARIA labels\' and an input field with numeration and placeholder text \'Enter label\' should be displayed', () => {
+            fillInTheGapsOverImageDropdownPage.steps.checkEditAriaLabelCheckbox();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.ariaLabelsLabel(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.ariaLabelsLabel(), 'ARIA labels');
+            fillInTheGapsOverImageDropdownPage.steps.verifyEditAriaLabelInputFieldContents(1);
+        });
+
+        it('CSS of \'ARIA labels\' label and input fields', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.ariaLabelsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.ariaLabelsInputFieldNumeration(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.ariaLabelsInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'ARIA labels\' input fields', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDropdownPage.ariaLabelsInputField());
+        });
+
+        it('When the user adds another response container to the uploaded image, a input field should be added in the \'Edit aria-labels for response container section\' with the numeration \'2\'', () => {
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.verifyEditAriaLabelInputFieldContents(2);
+        });
+
+        it('When the user removes a response container from the uploaded image, the edit aria-label response field corresponding to the removed response container should not be displayed and the remaining edit aria-label input field should be displayed with updated numeration', () => {
+            fillInTheGapsOverImageDropdownPage.steps.clickOnResponseContainerCloseButton(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyEditAriaLabelInputFieldContents(1);
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/547409
+        it('When the user has not given any input to the edit aria-label input field, the aria-label attribute for response container in image section should be \'Response #\' and aria-label attribute for response dropdown in set correct answer section should be \'Add answer for Response #\'', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerAriaLabelAttribute(0, 'Response 1');
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownAriaLabelAttributeInSetCorrectAnswerSection(0, 'Add answer for Response 1');
+        });
+
+        it('When the user enters text in the edit aria-label input field, the added text should appear as the aria-label attribute of the response container in the uploaded image and response dropdown in the set correct answer section', () => {
+            fillInTheGapsOverImageDropdownPage.steps.enterTextInEditAriaLabelInputField(0, 'Custom aria-label');
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerAriaLabelAttribute(0, 'Custom aria-label');
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownAriaLabelAttributeInSetCorrectAnswerSection(0, 'Custom aria-label');
+        });
+
+        it('When the user clears the text in the edit aria-label input field, the aria-label attribute of the response container in the uploaded image should again appear as \'Response #\' and aria-label attribute of the response dropdown in the set correct answer section should again appear as \'Add answer for Response #\'', () => {
+            fillInTheGapsOverImageDropdownPage.steps.clearEditAriaLabelInputField(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseContainerAriaLabelAttribute(0, 'Response 1');
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownAriaLabelAttributeInSetCorrectAnswerSection(0, 'Add answer for Response 1');
+        });
+    });
+
+    describe('Edit aria-label in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.addQuestionInstructions();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/547409
+        it('When the user has not given any input to the edit aria-label input field, the aria-label attribute for response dropdown in preview tab should be \'Response #\'', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownAriaLabelAttributeInPreviewTab(0, 'Response 1');
+        });
+
+        it('When the user enters text in the edit aria-label input field, the added text should appear as the aria-label attribute of the response dropdown in preview tab', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.checkEditAriaLabelCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.enterTextInEditAriaLabelInputField(0, 'Custom aria-label');
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownAriaLabelAttributeInPreviewTab(0, 'Custom aria-label');
+        });
+
+        it('When the user clears the text in the edit aria-label input field, the aria-label attribute of the response dropdown in preview tab should again appear as \'Response #\'', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.clearEditAriaLabelInputField(0);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDropdownAriaLabelAttributeInPreviewTab(0, 'Response 1');
+        });
+    });
+});

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

@@ -0,0 +1,132 @@
+import { fillInTheGapsOverImageDropdownPage } from "../../../pages";
+import { uploadImageSectionComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+import constants from "../../../fixtures/constants";
+const css = Cypress.env('css');
+
+describe('Create Item page - Fill in the gaps over image - dropdown: Question instructions, image section, upload image popup and source URL popup', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question Instructions input field - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyQuestionInstructionsInputFieldEditTab();
+    });
+
+    describe('Question Instructions input field - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
+    });
+
+    describe('Image section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Image\' title should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.imageSectionImageLabel(), 'Image');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.imageSectionImageLabel(), 'visible');
+        });
+
+        uploadImageSectionComponent.tests.uploadImageEditTabContents();
+    });
+
+    describe('Upload image - device popup contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        uploadImageSectionComponent.tests.verifyUploadImagePopupImageTitle();
+
+        uploadImageSectionComponent.tests.uploadImagePopupContents(500, 500);
+
+        uploadImageSectionComponent.tests.verifyButtonReplaceInImagePopup();
+    });
+
+    describe('Upload image popup contents functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+        });
+
+        uploadImageSectionComponent.tests.uploadImageHeightWidthAspectRatioAndResetDimensionsFunctionality(500, 500);
+
+        uploadImageSectionComponent.tests.uploadImageReplaceButtonFunctionality();
+
+        it('When user selects the \'Cancel\' button the image should not be uploaded', () => {
+            uploadImageSectionComponent.steps.clickOnImagePopupCancelButton();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.imageSectionImage(), 'notExist');
+        });
+
+        it('When user uploads an image and selects \'Ok\' button the image should be displayed in the image section', () => {
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.imageSectionImage(), 'visible');
+        });
+    });
+
+    describe('Upload image - source URL popup contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        uploadImageSectionComponent.tests.verifyUploadImageSourceURLTitle();
+
+        uploadImageSectionComponent.tests.verifyUploadImageSourceURLDefaultLabelAndInputField();
+
+        uploadImageSectionComponent.tests.uploadImagePopupContents(650, 684);
+    });
+
+    describe('Upload image \'Source URL\' popup contents functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            uploadImageSectionComponent.steps.clickOnSourceURL();
+            uploadImageSectionComponent.steps.uploadImageUsingSourceURL(constants.flowerImage);
+        });
+
+        uploadImageSectionComponent.tests.uploadImageHeightWidthAspectRatioAndResetDimensionsFunctionality(650, 684);
+
+        it('When user selects the \'Cancel\' button the image should not be uploaded', () => {
+            uploadImageSectionComponent.steps.clickOnImagePopupCancelButton();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.imageSectionImage(), 'notExist');
+        });
+
+        it('When user uploads an image and selects \'Ok\' button the image should be displayed in the image section', () => {
+            uploadImageSectionComponent.steps.clickOnSourceURL();
+            uploadImageSectionComponent.steps.uploadImageUsingSourceURL(constants.flowerImage);
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.imageSectionImage(), 'visible');
+        });
+    });
+});

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

@@ -0,0 +1,237 @@
+import { fillInTheGapsOverImageDropdownPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+let optionsForResponse = ['Flower', 'Leaf', 'Stem', 'Branch'];
+
+describe('Create item page - Fill in the gaps over image - dropdown: Scoring section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Scoring section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyScoringTypeLabelAndDropdown('autoScored');
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyAutoScoredScoringTypeSectionWithCSSAnda11y();
+    });
+
+    describe('Auto scored: All or nothing scoring - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyResponseContentsOfSetCorrectAnswerSection();
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyAutoScoredAllOrNothingPointsAndMinimumScoreAwardedLabelAndInputField();
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyPointsFieldErrorState(10);
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyMinimumScoreIfAttemptedFieldErrorState(10, 20, 10);
+    });
+
+    describe('Auto scored: Partial - equal weights scoring - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+        });
+
+        it('User should be able to select \'Partial - equal weights\' scoring type', () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectPartialEqualWeightsCheckbox();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyResponseContentsOfSetCorrectAnswerSection();
+
+        it('When the points input field is empty and the user has switched to \'Partial - equal weights\' scoring, then \'Points per response\' label should be displayed and a \'-\' should be displayed besides each response, \'Penalty points\' and \'Minimum score awarded (if attempted)\' labels and input fields should be displayed and \'Round down score\' label and checkbox should be displayed and by default it should be checked', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyPointsPerResponseLabel();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPartialEqualWeightsPointsPerResponseScore('-');
+            fillInTheGapsOverImageDropdownPage.steps.verifyDefaultPenaltyPointsInputFieldAndLabel();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDefaultMinimumScoreIfAttemptedLabelAndPointsField();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDefaultRoundDownScoreCheckboxCheckedAndLabel();
+        });
+
+        it('When user gives a score input to \'Points\' input field, then the score should be equally divided and displayed besides each response under the \'Points per response\' label', () => {
+            fillInTheGapsOverImageDropdownPage.steps.allotPoints(4);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPartialEqualWeightsPointsPerResponseScore(2);
+        });
+
+        it('When user adds a response to the question, then one more response field should be displayed in the set correct answer section and points per response score should be updated accordingly', () => {
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.responseDropdownSetCorrectAnswerSection(), 3);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPartialEqualWeightsPointsPerResponseScore(1.33);
+        });
+
+        it('When user removes a response from the question, then the points per response score should be updated accordingly', () => {
+            fillInTheGapsOverImageDropdownPage.steps.clickOnResponseContainerCloseButton(2);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPartialEqualWeightsPointsPerResponseScore(2);
+        });
+
+        it('CSS of \'Points per response\' label and its displayed score', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.pointsPerResponseLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.partialEqualWeightsPointsPerResponseScore(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyCSSandA11yOfRoundDownScoreCheckboxInCheckedState();
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyPenaltyPointsInputField();
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyMinimumScoreAwardedLabelAndInputField();
+
+        it('When the user switches to \'All or nothing\' scoring, the \'Points per response\' label and the points displayed for individual responses should not be displayed and the points displayed in \'Points\' input field should remain unchanged', () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectAllOrNothingCheckbox();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.pointsPerResponseLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.partialEqualWeightsPointsPerResponseScore(), 'notExist');
+            fillInTheGapsOverImageDropdownPage.steps.verifyPointsFieldValue(4);
+        });
+
+        it('When user has entered points in \'All or nothing\' scoring type and switches to \'Partial equal weights\' scoring type, then the score should be equally divided and displayed besides each response under the \'Points per response\' label', () => {
+            fillInTheGapsOverImageDropdownPage.steps.allotPoints(9);
+            fillInTheGapsOverImageDropdownPage.steps.selectPartialEqualWeightsCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPartialEqualWeightsPointsPerResponseScore(4.5);
+        });
+    });
+
+    describe('Auto scored: Partial - different weights scoring - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+        });
+
+        it('User should be able to select \'Partial - different weights\' scoring', () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectPartialDifferentWeightsCheckbox();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyResponseContentsOfSetCorrectAnswerSection();
+
+        it('When the user has switched to \'Partial - different weights\' scoring, then \'Points per response\' label should be displayed and a points input field should be displayed besides each response option, \'Penalty Points\' and \'Minimum score awarded (if attempted)\' labels and input fields should be displayed and \'Round down score\' checkbox should be displayed and by default it should be checked', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyPointsPerResponseLabel();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPartialDifferentWeightsPointsInputFieldIsEmpty();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDefaultPenaltyPointsInputFieldAndLabel();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDefaultMinimumScoreIfAttemptedLabelAndPointsField();
+            fillInTheGapsOverImageDropdownPage.steps.verifyDefaultRoundDownScoreCheckboxCheckedAndLabel();
+        });
+
+        it('When the user has not set any answer in the response, then the \'Points per response\' input field should be disabled', () => {
+            fillInTheGapsOverImageDropdownPage.steps.verifyPartialDifferentWeightsPointsInputFieldIsDisabled();
+        });
+
+        it('When user gives an input to the response input field then the \'Points per response\' input field should be enabled', () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, optionsForResponse[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(1, optionsForResponse[1]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPartialDifferentWeightsPointsInputFieldIsEnabled(0);
+            fillInTheGapsOverImageDropdownPage.steps.verifyPartialDifferentWeightsPointsInputFieldIsEnabled(1);
+        });
+
+        it('User should be able to give a score input to \'Points per response\' input fields', () => {
+            fillInTheGapsOverImageDropdownPage.steps.addPartialDifferentWeightsPoints([2.3, 3.4]);
+        });
+
+        it('CSS of \'Points per response\' label and \'Points per response\' input fields', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.pointsPerResponseLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.pointsInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyCSSandA11yOfRoundDownScoreCheckboxInCheckedState();
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyPenaltyPointsInputField();
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyMinimumScoreAwardedLabelAndInputField();
+
+
+        it('When the user switches to \'All or nothing\' scoring, the points added for individual responses in Partial - different weights scoring should get summed up in the All or nothing scoring points input field', () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectAllOrNothingCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPointsFieldValue(5.7);
+        });
+
+        it('When user has entered points in \'All or nothing\' scoring type and switches to \'Partial different weights\' scoring type, then the points input field displayed besides each response should be blank.', () => {
+            fillInTheGapsOverImageDropdownPage.steps.allotPoints(9);
+            fillInTheGapsOverImageDropdownPage.steps.selectPartialDifferentWeightsCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyPartialDifferentWeightsPointsInputFieldIsEmpty();
+        });
+    });
+
+    describe('Manually scored scoring - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+        });
+
+        it('User should be able to select \'Manually scored\' scoring type from scoring type dropdown', () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectAScoringTypeFromScoringTypeDropdown('Manually scored')
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyManualScoringEditTabFunctionality();
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyPointsFieldErrorState(10);
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyMinimumScoreIfAttemptedFieldErrorState(10, 20, 10);
+    });
+
+    describe('Non scored scoring - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyEditTabNonScoredScoringSectionContents();
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyResponseContentsOfSetCorrectAnswerSection();
+    });
+});

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

@@ -0,0 +1,113 @@
+import { dialogBoxBase, fillInTheGapsOverImageDropdownPage } from "../../../pages";
+import { uploadImageSectionComponent } from "../../../pages/components/uploadImageSectionComponent";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const optionsForResponse = ['Flower', 'Petal', 'Stem', 'Branch'];
+
+describe('Create question page - Fill in the gaps over image - dropdown: Header section and Saving question', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Header section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyCreateQuestionPageQuestionTypeHeader('Fill in the gaps over image - dropdown');
+    });
+
+    describe('Tabs section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyTabsSection();
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/547758
+    describe('Cancel button', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyCancelButton('fill in the gaps over image - dropdown');
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/548426
+    //Failing due to https://redmine.zeuslearning.com/issues/548420
+    describe('Save question button - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        describe('Validation error messages', () => {
+            dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton();
+
+            it('Validation error messages should be displayed below required input fields (Question instructions, Image section, Points input field)', () => {
+                fillInTheGapsOverImageDropdownPage.steps.verifyQuestionInstructionsErrorMessage();
+                fillInTheGapsOverImageDropdownPage.steps.verifyPointsFieldErrorMessage();
+                fillInTheGapsOverImageDropdownPage.steps.verifyImageSectionErrorMessage();
+                fillInTheGapsOverImageDropdownPage.steps.verifySetCorrectAnswerErrorIconIsDisplayed();
+            });
+
+            it('When the user has made no changes and switches to the preview tab and clicks on \'Save question\' button, the user should get a warning popup and on closing the warning popup, the user should be on the edit tab', () => {
+                fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+                fillInTheGapsOverImageDropdownPage.steps.clickOnSaveQuestionButton();
+                utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+                dialogBoxBase.steps.closeWarningPopup();
+                fillInTheGapsOverImageDropdownPage.steps.verifyEditTabSelectedState();
+                fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabNotSelectedState();
+            });
+
+            it('When the user uploads an image, the \'Error: Image is required.\' error message should disappear and then on clicking the \'Save question\' button, \'Error: Minimum one response container is required.\' error message should appear in the set correct answer section', () => {
+                uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+                uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+                uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+                fillInTheGapsOverImageDropdownPage.steps.verifyImageSectionErrorMessageNotExists();
+                fillInTheGapsOverImageDropdownPage.steps.clickOnSaveQuestionButton();
+                dialogBoxBase.steps.closeWarningPopup();
+                fillInTheGapsOverImageDropdownPage.steps.verifyMinimumOneResponseContainerIsRequiredErrorMessage();
+            });
+
+            it('When the user adds a response container, the \'Error: Minimum one response container is required.\' error message should disappear and then on clicking the \'Save question\' button, \'Error: Option is required\' should be displayed for response option fields and \'Error: Please set a correct answer.\' error message should appear in the set correct answer section', () => {
+                fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+                fillInTheGapsOverImageDropdownPage.steps.verifyMinimumOneResponseContainerIsRequiredErrorMessageNotExists();
+                fillInTheGapsOverImageDropdownPage.steps.clickOnSaveQuestionButton();
+                dialogBoxBase.steps.closeWarningPopup();
+                for (let index = 0; index < 4; index++) {
+                    fillInTheGapsOverImageDropdownPage.steps.verifyOptionsForResponseInputFieldErrorMessage(index);
+                };
+                fillInTheGapsOverImageDropdownPage.steps.verifySetCorrectAnswerSectionErrorMessage();
+            });
+
+            it('Validation error messages should disappear when all required input fields are filled', () => {
+                fillInTheGapsOverImageDropdownPage.steps.addQuestionInstructions();
+                fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse);
+                fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, optionsForResponse[0]);
+                fillInTheGapsOverImageDropdownPage.steps.allotPoints(10);
+                fillInTheGapsOverImageDropdownPage.steps.verifyErrorMessageIsNotDisplayed();
+                fillInTheGapsOverImageDropdownPage.steps.verifySetCorrectAnswerErrorIconIsNotDisplayed();
+            });
+
+            fillInTheGapsOverImageDropdownPage.tests.verifya11yOfCreateItemWrapperContents();
+        });
+
+        describe('Saving a question', () => {
+            it('When user has filled all the mandatory fields then on clicking on Save Question button the question should get saved and a snackbar with text \'Saved successfully!\' should be displayed', () => {
+                fillInTheGapsOverImageDropdownPage.steps.saveAQuestionAndVerifySnackbar();
+            });
+
+            fillInTheGapsOverImageDropdownPage.tests.verifySavedSuccessfullySnackbarCSSanda11y();
+        });
+    });
+});