itemengine-cypress-automation 1.0.46 → 1.0.48

package/cypress/e2e/ILC/FillInTheGapsOverImageText/fillInTheGapsOverImageTextEditTabBasicSection.js

@@ -0,0 +1,133 @@
+import { fillInTheGapsOverImageTextPage } 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 - text: 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 - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyQuestionInstructionsInputFieldEditTab();
+    });
+
+    describe('Question Instructions input field - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
+    });
+
+    describe('Image section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Image\' title should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.imageSectionImageLabel(), 'Image');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.imageSectionImageLabel(), 'visible');
+        });
+
+        uploadImageSectionComponent.tests.uploadImageEditTabContents();
+    });
+
+    describe('Upload image - device popup contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            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 - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+        });
+
+        //Failing due to - https://redmine.zeuslearning.com/issues/547305
+        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(fillInTheGapsOverImageTextPage.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(fillInTheGapsOverImageTextPage.imageSectionImage(), 'visible');
+        });
+    });
+
+    describe('Upload image - source URL popup contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            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 - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            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(fillInTheGapsOverImageTextPage.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(fillInTheGapsOverImageTextPage.imageSectionImage(), 'visible');
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsOverImageText/fillInTheGapsOverImageTextEditTabScoringSection.js

@@ -0,0 +1,227 @@
+import { fillInTheGapsOverImageTextPage } 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 - text: Scoring section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Scoring section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyScoringTypeLabelAndDropdown('autoScored');
+
+        fillInTheGapsOverImageTextPage.tests.verifyAutoScoredScoringTypeSectionWithCSSAnda11y();
+    });
+
+    describe('Auto scored: All or nothing scoring - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyResponseContentsOfSetCorrectAnswerSection();
+
+        fillInTheGapsOverImageTextPage.tests.verifyAutoScoredAllOrNothingPointsAndMinimumScoreAwardedLabelAndInputField();
+
+        fillInTheGapsOverImageTextPage.tests.verifyPointsFieldErrorState(10);
+
+        fillInTheGapsOverImageTextPage.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 - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+        });
+
+        it('User should be able to select \'Partial - equal weights\' scoring type', () => {
+            fillInTheGapsOverImageTextPage.steps.selectPartialEqualWeightsCheckbox();
+        });
+
+        fillInTheGapsOverImageTextPage.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', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyPointsPerResponseLabel();
+            fillInTheGapsOverImageTextPage.steps.verifyPartialEqualWeightsPointsPerResponseScore('-');
+            fillInTheGapsOverImageTextPage.steps.verifyDefaultPenaltyPointsInputFieldAndLabel();
+            fillInTheGapsOverImageTextPage.steps.verifyDefaultMinimumScoreIfAttemptedLabelAndPointsField();
+            fillInTheGapsOverImageTextPage.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', () => {
+            fillInTheGapsOverImageTextPage.steps.allotPoints(4);
+            fillInTheGapsOverImageTextPage.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', () => {
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            utilities.verifyElementCount(fillInTheGapsOverImageTextPage.responseFieldSetCorrectAnswerSection(), 3);
+            fillInTheGapsOverImageTextPage.steps.verifyPartialEqualWeightsPointsPerResponseScore(1.33);
+        });
+
+        it('When user removes a response from the question, then the points per response score should be updated accordingly', () => {
+            fillInTheGapsOverImageTextPage.steps.deleteResponseContainer(2);
+            fillInTheGapsOverImageTextPage.steps.verifyPartialEqualWeightsPointsPerResponseScore(2);
+        });
+
+        it('CSS of \'Points per response\' label and its displayed score', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.pointsPerResponseLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.partialEqualWeightsPointsPerResponseScore(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyCSSandA11yOfRoundDownScoreCheckboxInCheckedState();
+        
+        fillInTheGapsOverImageTextPage.tests.verifyPenaltyPointsInputField();
+
+        fillInTheGapsOverImageTextPage.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', () => {
+            fillInTheGapsOverImageTextPage.steps.selectAllOrNothingCheckbox();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.pointsPerResponseLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.partialEqualWeightsPointsPerResponseScore(), 'notExist');
+            fillInTheGapsOverImageTextPage.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', () => {
+            fillInTheGapsOverImageTextPage.steps.allotPoints(9);
+            fillInTheGapsOverImageTextPage.steps.selectPartialEqualWeightsCheckbox();
+            fillInTheGapsOverImageTextPage.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 - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+        });
+
+        it('User should be able to select \'Partial - different weights\' scoring', () => {
+            fillInTheGapsOverImageTextPage.steps.selectPartialDifferentWeightsCheckbox();
+        });
+
+        fillInTheGapsOverImageTextPage.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', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyPointsPerResponseLabel();
+            fillInTheGapsOverImageTextPage.steps.verifyPartialDifferentWeightsPointsInputFieldIsEmpty();
+            fillInTheGapsOverImageTextPage.steps.verifyDefaultPenaltyPointsInputFieldAndLabel();
+            fillInTheGapsOverImageTextPage.steps.verifyDefaultMinimumScoreIfAttemptedLabelAndPointsField();
+            fillInTheGapsOverImageTextPage.steps.verifyDefaultRoundDownScoreCheckboxCheckedAndLabel();
+        });
+
+        it('When the user has not set any answer in the response, then the \'Points per response\' input field should be disabled', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyPartialDifferentWeightsPointsInputFieldIsDisabled();
+        });
+
+        it('When user gives an input to the response input field then the \'Points per response\' input field should be enabled', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, 'Flower');
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(1, 'Leaf');
+            fillInTheGapsOverImageTextPage.steps.verifyPartialDifferentWeightsPointsInputFieldIsEnabled(0);
+            fillInTheGapsOverImageTextPage.steps.verifyPartialDifferentWeightsPointsInputFieldIsEnabled(1);
+        });
+
+        it('User should be able to give a score input to \'Points per response\' input fields', () => {
+            fillInTheGapsOverImageTextPage.steps.addPartialDifferentWeightsPoints([2.3, 3.4]);
+        });
+
+        it('CSS of \'Points per response\' label and \'Points per response\' input fields', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.pointsPerResponseLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.pointsInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyCSSandA11yOfRoundDownScoreCheckboxInCheckedState();
+        
+        fillInTheGapsOverImageTextPage.tests.verifyPenaltyPointsInputField();
+
+        fillInTheGapsOverImageTextPage.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', () => {
+            fillInTheGapsOverImageTextPage.steps.selectAllOrNothingCheckbox();
+            fillInTheGapsOverImageTextPage.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.', () => {
+            fillInTheGapsOverImageTextPage.steps.allotPoints(9);
+            fillInTheGapsOverImageTextPage.steps.selectPartialDifferentWeightsCheckbox();
+            fillInTheGapsOverImageTextPage.steps.verifyPartialDifferentWeightsPointsInputFieldIsEmpty();
+        });
+    });
+
+    describe('Manually scored scoring - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+        });
+
+        it('User should be able to select \'Manually scored\' scoring type from scoring type dropdown', () => {
+            fillInTheGapsOverImageTextPage.steps.selectAScoringTypeFromScoringTypeDropdown('Manually scored')
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyManualScoringEditTabFunctionality();
+
+        fillInTheGapsOverImageTextPage.tests.verifyPointsFieldErrorState(10);
+
+        fillInTheGapsOverImageTextPage.tests.verifyMinimumScoreIfAttemptedFieldErrorState(10, 20, 10);
+    });
+
+    describe('Non scored scoring - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyEditTabNonScoredScoringSectionContents();
+
+        fillInTheGapsOverImageTextPage.tests.verifyResponseContentsOfSetCorrectAnswerSection();
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsOverImageText/fillInTheGapsOverImageTextHeaderSection.js

@@ -0,0 +1,109 @@
+import { dialogBoxBase, fillInTheGapsOverImageTextPage } from "../../../pages";
+import { uploadImageSectionComponent } from "../../../pages/components/uploadImageSectionComponent";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+
+describe('Create question page - Fill in the gaps over image - text: 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 - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyCreateQuestionPageQuestionTypeHeader('Fill in the gaps over image - text');
+    });
+
+    describe('Tabs section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+        });
+
+        fillInTheGapsOverImageTextPage.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 - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyCancelButton('fill in the gaps over image - text');
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/548426
+    //Failing due to https://redmine.zeuslearning.com/issues/548420
+    //Failing due to https://redmine.zeuslearning.com/issues/548383
+    describe('Save question button - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            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)', () => {
+                fillInTheGapsOverImageTextPage.steps.verifyQuestionInstructionsErrorMessage();
+                fillInTheGapsOverImageTextPage.steps.verifyPointsFieldErrorMessage();
+                fillInTheGapsOverImageTextPage.steps.verifyImageSectionErrorMessage();
+                fillInTheGapsOverImageTextPage.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', () => {
+                fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+                fillInTheGapsOverImageTextPage.steps.clickOnSaveQuestionButton();
+                utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+                dialogBoxBase.steps.closeWarningPopup();
+                fillInTheGapsOverImageTextPage.steps.verifyEditTabSelectedState();
+                fillInTheGapsOverImageTextPage.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();
+                fillInTheGapsOverImageTextPage.steps.verifyImageSectionErrorMessageNotExists();
+                fillInTheGapsOverImageTextPage.steps.clickOnSaveQuestionButton();
+                dialogBoxBase.steps.closeWarningPopup();
+                fillInTheGapsOverImageTextPage.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: Please set a correct answer.\' error message should appear in the set correct answer section', () => {
+                fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+                fillInTheGapsOverImageTextPage.steps.verifyMinimumOneResponseContainerIsRequiredErrorMessageNotExists();
+                fillInTheGapsOverImageTextPage.steps.clickOnSaveQuestionButton();
+                dialogBoxBase.steps.closeWarningPopup();
+                fillInTheGapsOverImageTextPage.steps.verifySetCorrectAnswerSectionErrorMessage();
+            });
+
+            it('Validation error messages should disappear when all required input fields are filled', () => {
+                fillInTheGapsOverImageTextPage.steps.addQuestionInstructions();
+                fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, 'Flower');
+                fillInTheGapsOverImageTextPage.steps.allotPoints(10);
+                fillInTheGapsOverImageTextPage.steps.verifyErrorMessageIsNotDisplayed();
+                fillInTheGapsOverImageTextPage.steps.verifySetCorrectAnswerErrorIconIsNotDisplayed();
+            });
+
+            fillInTheGapsOverImageTextPage.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', () => {
+                fillInTheGapsOverImageTextPage.steps.saveAQuestionAndVerifySnackbar();
+            });
+
+            fillInTheGapsOverImageTextPage.tests.verifySavedSuccessfullySnackbarCSSanda11y();
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsOverImageText/fillInTheGapsOverImageTextImageProperties.js

@@ -0,0 +1,156 @@
+import constants from "../../../fixtures/constants";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { dialogBoxBase, fillInTheGapsOverImageTextPage } from "../../../pages";
+import { uploadImageSectionComponent } from "../../../pages/components";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create item page - Fill in the gaps over image - text: Image properties', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Edit image popup contents and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.log('Uploading an image');
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            uploadImageSectionComponent.steps.clickOnEditImageButton();
+        });
+
+        uploadImageSectionComponent.tests.verifyUploadImagePopupImageTitle();
+
+        uploadImageSectionComponent.tests.uploadImagePopupContents(500, 500);
+
+        uploadImageSectionComponent.tests.verifyButtonReplaceInImagePopup();
+
+        uploadImageSectionComponent.tests.uploadImageHeightWidthAspectRatioAndResetDimensionsFunctionality(500, 500);
+
+        it('When user clicks on \'Cancel\' button the popup should close and image should not get edited', () => {
+            uploadImageSectionComponent.steps.clickOnImagePopupCancelButton();
+            fillInTheGapsOverImageTextPage.steps.verifyWidthInputFieldValue(500);
+            fillInTheGapsOverImageTextPage.steps.verifyHeightInputFieldValue(500);
+            cy.log('Post step: Clicking on edit image button')
+            uploadImageSectionComponent.steps.clickOnEditImageButton();
+        });
+
+        uploadImageSectionComponent.tests.uploadImageReplaceButtonFunctionality();
+
+        it('When user makes some edits and clicks on the \'Ok\' button the popup should close and the edited image should be uploaded', () => {
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.verifyWidthInputFieldValue(225);
+            fillInTheGapsOverImageTextPage.steps.verifyHeightInputFieldValue(225);
+        });
+    });
+
+    describe('Edit image pop up content - source URL', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.log('Uploading an image using source url');
+            uploadImageSectionComponent.steps.clickOnSourceURL();
+            uploadImageSectionComponent.steps.uploadImageUsingSourceURL(constants.flowerImage);
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            uploadImageSectionComponent.steps.clickOnEditImageButton();
+        });
+
+        //Failing due to  https://redmine.zeuslearning.com/issues/543833
+        uploadImageSectionComponent.tests.verifyUploadImageSourceURLTitle();
+
+        uploadImageSectionComponent.tests.verifyUploadImageSourceURLLabelAndInputFieldInEditSourceURLPopup();
+
+        uploadImageSectionComponent.tests.uploadImagePopupContents(650, 684);
+    });
+
+    describe('Delete image - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.log('Uploading an image');
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+        });
+
+        uploadImageSectionComponent.tests.verifyDeleteImagePopup();
+
+        it('When user clicks on \'Cancel\' button the popup should close and image should not get deleted', () => {
+            dialogBoxBase.steps.clickOnRejectButtonInDialogBox();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.imageSectionImage(), 'visible');
+        });
+
+        it('When user clicks on \'Delete image\' button the popup should close and image should get deleted', () => {
+            uploadImageSectionComponent.steps.clickOnDeleteImageButton();
+            dialogBoxBase.steps.clickOnAcceptButtonInDialogBox();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.imageSectionImage(), 'notExist')
+        });
+    });
+
+    describe('Image properties section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyImagePropertiesSectionContents();
+    });
+
+    describe('Image properties - \'Image hover text\' and \'Image alternative text\' : Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyImageHoverAndAlternativeTextFunctionalityInEditTab();
+    });
+
+    describe('Image properties - \'Image hover text\' and \'Image alternative text\' : Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyImageHoverAndAlternativeTextFunctionalityInPreviewTab();
+    });
+
+    describe('Image properties - \'Height and width (px)\' : Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyImagePropertiesHeightAndWidthInputFieldInEditTab();
+    });
+
+    describe('Image properties - \'Height and width (px)\' : Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyImagePropertiesHeightAndWidthInputFieldInPreviewTab();
+    });
+});