itemengine-cypress-automation 1.0.25 → 1.0.27

package/cypress/e2e/ILC/HighlightImage/highlightImageCustomizeHighlightPropertiesFunctionality.js

@@ -0,0 +1,356 @@
+import { highlightImagePage } from "../../../pages";
+import { colorPopupComponent } from "../../../pages/components";
+import { uploadImageSectionComponent } from "../../../pages/components/uploadImageSectionComponent";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const flowerHighlightRegion = [[24, 6], [24, 24], [56, 24], [56, 6]];
+const leafHighlightRegion = [[54, 48], [54, 72], [82, 72], [82, 48]];
+
+describe('Create Item page - Highlight image: Customize highlight properties', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/546130
+    describe('Customize highlight properties accordion: Global and option tab functionality of default state in set correct answer and preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            cy.log('Uploading an image');
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
+            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
+            highlightImagePage.steps.verifyHighlightRegionsInSetCorrectAnswerSection(0, flowerHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(leafHighlightRegion);
+            highlightImagePage.steps.verifyHighlightRegionsInSetCorrectAnswerSection(1, leafHighlightRegion);
+            highlightImagePage.steps.expandCustomizeHighlightProperties();
+        });
+
+        it('When the user has not updated \'Fill color\' and \'Border color\' of \'Default\' state in \'Global\' tab then the default state of \'Option 1\' and \'Option 2\' highlight region should have the \'Fill color\' and \'Border color\' according to the global tab in the \'Set correct answer\' section', () => {
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(82, 0, 255)', '1');
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(82, 0, 255)', '1');
+        });
+
+        it('When the user has not updated \'Fill color\' and \'Border color\' of \'Default\' state in \'Global\' tab then the default state of \'Option 1\' and \'Option 2\' highlight region should have the \'Fill color\' and \'Border color\' according to the global tab in the\'Preview tab\'', () => {
+            cy.log('Switching to preview Tab');
+            highlightImagePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInPreviewTab(0, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(82, 0, 255)', '1');
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInPreviewTab(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(82, 0, 255)', '1');
+        });
+
+        it('When the user updates the \'Fill color\' and \'Border color\' of \'Default\' state in \'Option 1\' tab then the default state of the \'Option 1\' highlight region should be updated accordingly and the \'Option 2\' highlight region should have \'Fill color\' and \'Border color\' of default state according to the \'Global\' tab and hover and active state for \'Option 1\' and \'Option 2\' highlight region should be also according to the \'Global\' tab in the \'Set correct answer\' section', () => {
+            cy.log('Switching to edit Tab');
+            highlightImagePage.steps.switchToEditTab();
+            highlightImagePage.steps.navigateToOptionTab(1);
+            highlightImagePage.steps.clickOnHighlightColorBlock('defaultFillColor');
+            colorPopupComponent.steps.selectRecommendedColorBlock(0);
+            colorPopupComponent.steps.addInputToOpacityInputField('50');
+            colorPopupComponent.steps.clickOnOkButton();
+            highlightImagePage.steps.clickOnHighlightColorBlock('defaultBorderColor');
+            colorPopupComponent.steps.selectRecommendedColorBlock(1);
+            colorPopupComponent.steps.addInputToOpacityInputField('50');
+            colorPopupComponent.steps.clickOnOkButton();
+            cy.log("Verifying default state");
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(229, 76, 25)', '0.5');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(255, 240, 25)', '0.5');
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(82, 0, 255)', '1');
+            cy.log("Verifying hover state");
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(66, 0, 204)', '1');
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(66, 0, 204)', '1');
+            cy.log("Verifying active state");
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(41, 0, 128)', '1');
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(41, 0, 128)', '1');
+        });
+
+        it('When the user has updated the \'Fill color\' and \'Border color\' of \'Default\' state in \'Option 1\' tab then the default state of the \'Option 1\' highlight region should be updated accordingly and the \'Option 2\' highlight region should have \'Fill color\' and \'Border color\' of default state according to the \'Global\' tab and hover and active state for \'Option 1\' and \'Option 2\' highlight region should be also according to the \'Global\' tab in the \'Preview tab\'', () => {
+            cy.log('Switching to preview Tab');
+            highlightImagePage.steps.switchToPreviewTab();
+            cy.log("Verifying default state");
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInPreviewTab(0, 'rgb(229, 76, 25)', '0.5');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(255, 240, 25)', '0.5');
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInPreviewTab(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(82, 0, 255)', '1');
+            cy.log("Verifying hover state");
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInPreviewTab(0, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(66, 0, 204)', '1');
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInPreviewTab(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(66, 0, 204)', '1');
+            cy.log("Verifying active state");
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInPreviewTab(0, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(41, 0, 128)', '1');
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInPreviewTab(1, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(41, 0, 128)', '1');
+        });
+
+        it('When the user updates \'Fill color\' and \'Border color\' of \'Default\' state in \'Global tab\' then the default state of the \'Option 2\' highlight region should be updated accordingly and \'Fill color\' and \'Border color\' of \'Option 1\' highlight region of default state should be according to \'Option 1\' tab in the \'Set correct answer\' section', () => {
+            cy.log('Switching to edit Tab');
+            highlightImagePage.steps.switchToEditTab();
+            highlightImagePage.steps.navigateToGlobalTab();
+            highlightImagePage.steps.clickOnHighlightColorBlock('defaultFillColor');
+            colorPopupComponent.steps.selectRecommendedColorBlock(3);
+            colorPopupComponent.steps.addInputToOpacityInputField(70);
+            colorPopupComponent.steps.clickOnOkButton();
+            highlightImagePage.steps.clickOnHighlightColorBlock('defaultBorderColor');
+            colorPopupComponent.steps.selectRecommendedColorBlock(2);
+            colorPopupComponent.steps.addInputToOpacityInputField(70);
+            colorPopupComponent.steps.clickOnOkButton();
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(0, 0, 0)', '0.7');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(9, 179, 33)', '0.7');
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(229, 76, 25)', '0.5');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(255, 240, 25)', '0.5');
+        });
+
+        it('When the user has updated \'Fill color\' and \'Border color\' of \'Default\' state in \'Global tab\' then the default state of the \'Option 2\' highlight region should be updated accordingly and \'Fill color\' and \'Border color\' of \'Option 1\' highlight region of default state should be according to \'Option 1\' tab in the  in the \'Preview tab\'', () => {
+            cy.log('Switching to preview Tab');
+            highlightImagePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInPreviewTab(1, 'rgb(0, 0, 0)', '0.7');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(9, 179, 33)', '0.7');
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInPreviewTab(0, 'rgb(229, 76, 25)', '0.5');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(255, 240, 25)', '0.5');
+        });
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/546130
+    describe('Customize highlight properties accordion: Global and option tab functionality of hover state in set correct answer and preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            cy.log('Uploading an image');
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
+            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
+            highlightImagePage.steps.verifyHighlightRegionsInSetCorrectAnswerSection(0, flowerHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(leafHighlightRegion);
+            highlightImagePage.steps.verifyHighlightRegionsInSetCorrectAnswerSection(1, leafHighlightRegion);
+            highlightImagePage.steps.expandCustomizeHighlightProperties();
+        });
+
+        it('When the user has not updated \'Fill color\' and \'Border color\' of \'Hover\' state in \'Global\' tab then the hover state of \'Option 1\' and \'Option 2\' highlight region should have the \'Fill color\' and \'Border color\' according to the global tab in the \'Set correct answer\' section', () => {
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(66, 0, 204)', '1');
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(66, 0, 204)', '1');
+        });
+
+        it('When the user has not updated \'Fill color\' and \'Border color\' of \'Hover\' state in \'Global\' tab then the hover state of \'Option 1\' and \'Option 2\' highlight region should have the \'Fill color\' and \'Border color\' according to the global tab in the\'Preview tab\'', () => {
+            highlightImagePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInPreviewTab(0, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(66, 0, 204)', '1');
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInPreviewTab(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(66, 0, 204)', '1');
+        });
+
+        it('When the user updates the \'Fill color\' and \'Border color\' of \'Hover\' state in \'Option 1\' tab then the hover state of the \'Option 1\' highlight region should be updated accordingly and the \'Option 2\' highlight region should have \'Fill color\' and \'Border color\' of hover state according to the \'Global\' tab and default and active state for \'Option 1\' and \'Option 2 \' highlight region should be also according to the \'Global\' tab in the \'Set correct answer\' section', () => {
+            cy.log('Switching to edit Tab');
+            highlightImagePage.steps.switchToEditTab();
+            highlightImagePage.steps.navigateToOptionTab(1);
+            highlightImagePage.steps.clickOnHighlightColorBlock('hoverFillColor');
+            colorPopupComponent.steps.selectRecommendedColorBlock(2);
+            colorPopupComponent.steps.addInputToOpacityInputField(70);
+            colorPopupComponent.steps.clickOnOkButton();
+            highlightImagePage.steps.clickOnHighlightColorBlock('hoverBorderColor');
+            colorPopupComponent.steps.selectRecommendedColorBlock(3);
+            colorPopupComponent.steps.addInputToOpacityInputField(70);
+            colorPopupComponent.steps.clickOnOkButton();
+            cy.log("Verifying hover state");
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(9, 179, 33)', '0.7');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(0, 0, 0)', '0.7');
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(66, 0, 204)', '1');
+            cy.log("Verifying default state");
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(82, 0, 255)', '1');
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(82, 0, 255)', '1');
+            cy.log("Verifying active state");
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(41, 0, 128)', '1');
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(41, 0, 128)', '1');
+        });
+
+        it('When the user has updated the \'Fill color\' and \'Border color\' of \'Hover\' state in \'Option 1\' tab then the hover state of the \'Option 1\' highlight region should be updated accordingly and the \'Option 2\' highlight region should have \'Fill color\' and \'Border color\' of hover state according to the \'Global\' tab and default and active state for \'Option 1\' and \'Option 2 \' highlight region should be also according to the \'Global\' tab in the \'Preview\' tab', () => {
+            cy.log('Switching to preview Tab');
+            highlightImagePage.steps.switchToPreviewTab();
+            cy.log("Verifying hover state");
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInPreviewTab(0, 'rgb(9, 179, 33)', '0.7');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(0, 0, 0)', '0.7');
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInPreviewTab(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(66, 0, 204)', '1');
+            cy.log("Verifying default state");
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInPreviewTab(0, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(82, 0, 255)', '1');
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInPreviewTab(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(82, 0, 255)', '1');
+            cy.log("Verifying active state");
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInPreviewTab(0, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(41, 0, 128)', '1');
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInPreviewTab(1, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(41, 0, 128)', '1');
+        });
+
+        it('When the user updates \'Fill color\' and \'Border color\' of \'Hover\' state in \'Global tab\' then the hover state of the \'Option 2\' highlight region should be updated accordingly and \'Fill color\' and \'Border color\' of \'Option 1\' highlight region of hover state should be according to \'Option 1\' tab in the \'Set correct answer\' section', () => {
+            cy.log('Switching to edit Tab');
+            highlightImagePage.steps.switchToEditTab();
+            highlightImagePage.steps.navigateToGlobalTab();
+            highlightImagePage.steps.clickOnHighlightColorBlock('hoverFillColor');
+            colorPopupComponent.steps.selectRecommendedColorBlock(0);
+            colorPopupComponent.steps.addInputToOpacityInputField(30);
+            colorPopupComponent.steps.clickOnOkButton();
+            highlightImagePage.steps.clickOnHighlightColorBlock('hoverBorderColor');
+            colorPopupComponent.steps.selectRecommendedColorBlock(1);
+            colorPopupComponent.steps.addInputToOpacityInputField(30);
+            colorPopupComponent.steps.clickOnOkButton();
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(229, 76, 25)', '0.3');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(255, 240, 25)', '0.3');
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(9, 179, 33)', '0.7');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(0, 0, 0)', '0.7');
+        });
+
+        it('When the user has updated \'Fill color\' and \'Border color\' of \'Hover\' state in \'Global tab\' then the hover state of the \'Option 2\' highlight region should be updated accordingly and \'Fill color\' and \'Border color\' of \'Option 1\' highlight region of hover state should be according to \'Option 1\' tab in the  in the \'Preview tab\'', () => {
+            cy.log('Switching to preview Tab');
+            highlightImagePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInPreviewTab(1, 'rgb(229, 76, 25)', '0.3');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(255, 240, 25)', '0.3');
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInPreviewTab(0, 'rgb(9, 179, 33)', '0.7');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(0, 0, 0)', '0.7');
+        });
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/546130
+    describe('Customize highlight properties accordion: Global and option tab functionality of active state in set correct answer and preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+            cy.log('Uploading an image');
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
+            highlightImagePage.steps.highlightRegionInImage(flowerHighlightRegion);
+            highlightImagePage.steps.verifyHighlightRegionsInSetCorrectAnswerSection(0, flowerHighlightRegion);
+            highlightImagePage.steps.highlightRegionInImage(leafHighlightRegion);
+            highlightImagePage.steps.verifyHighlightRegionsInSetCorrectAnswerSection(1, leafHighlightRegion);
+            highlightImagePage.steps.expandCustomizeHighlightProperties();
+        });
+
+        it('When the user has not updated \'Fill color\' and \'Border color\' of \'Active\' state in \'Global\' tab then the active state of \'Option 1\' and \'Option 2\' highlight region should have the \'Fill color\' and \'Border color\' according to the global tab in the \'Set correct answer\' section', () => {
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(41, 0, 128)', '1');
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(41, 0, 128)', '1');
+        });
+
+        it('When the user has not updated \'Fill color\' and \'Border color\' of \'Active\' state in \'Global\' tab then the active state of \'Option 1\' and \'Option 2\' highlight region should have the \'Fill color\' and \'Border color\' according to the global tab in the\'Preview tab\'', () => {
+            cy.log('Switching to preview Tab');
+            highlightImagePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInPreviewTab(0, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(41, 0, 128)', '1');
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInPreviewTab(1, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(41, 0, 128)', '1');
+        });
+
+        it('When the user updates the \'Fill color\' and \'Border color\' of \'Active\' state in \'Option 1\' tab then the active state of the \'Option 1\' highlight region should be updated accordingly and the \'Option 2\' highlight region should have \'Fill color\' and \'Border color\' of active state according to the \'Global\' tab and default and hover state for \'Option 1\' and \'Option 2 \' highlight region should be also according to the \'Global\' tab in the \'Set correct answer\' section', () => {
+            cy.log('Switching to edit Tab');
+            highlightImagePage.steps.switchToEditTab();
+            highlightImagePage.steps.navigateToOptionTab(1);
+            highlightImagePage.steps.clickOnHighlightColorBlock('activeFillColor');
+            colorPopupComponent.steps.selectRecommendedColorBlock(1);
+            colorPopupComponent.steps.addInputToOpacityInputField(90);
+            colorPopupComponent.steps.clickOnOkButton();
+            highlightImagePage.steps.clickOnHighlightColorBlock('activeBorderColor');
+            colorPopupComponent.steps.selectRecommendedColorBlock(3);
+            colorPopupComponent.steps.addInputToOpacityInputField(90);
+            colorPopupComponent.steps.clickOnOkButton()
+            cy.log('Verfying default state')
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(82, 0, 255)', '1');
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(82, 0, 255)', '1');
+            cy.log("Verifying hover state");
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(66, 0, 204)', '1');
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(66, 0, 204)', '1');
+            cy.log("Verifying active state");
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(255, 240, 25)', '0.9');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(0, 0, 0)', '0.9');
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(41, 0, 128)', '1');
+        });
+
+        it('When the user has updated the \'Fill color\' and \'Border color\' of \'Active\' state in \'Option 1\' tab then the active state of the \'Option 1\' highlight region should be updated accordingly and the \'Option 2\' highlight region should have \'Fill color\' and \'Border color\' of active state according to the \'Global\' tab and default and hover state for \'Option 1\' and \'Option 2 \' highlight region should be also according to the \'Global\' tab in the \'Preview tab\'', () => {
+            cy.log('Switching to preview Tab');
+            highlightImagePage.steps.switchToPreviewTab();
+            cy.log('Verfying default state')
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInPreviewTab(0, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(82, 0, 255)', '1');
+            highlightImagePage.steps.verifyDefaultFillColorOfHighlightRegionInPreviewTab(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyDefaultBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(82, 0, 255)', '1');
+            cy.log("Verifying hover state");
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInPreviewTab(0, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(66, 0, 204)', '1');
+            highlightImagePage.steps.verifyHoverFillColorOfHighlightRegionInPreviewTab(1, 'rgb(186, 201, 255)', '0.4');
+            highlightImagePage.steps.verifyHoverBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(66, 0, 204)', '1');
+            cy.log("Verifying active state");
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInPreviewTab(0, 'rgb(255, 240, 25)', '0.9');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(0, 0, 0)', '0.9');
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInPreviewTab(1, 'rgb(107, 139, 255)', '0.7');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(41, 0, 128)', '1');
+        });
+
+        it('When the user updates \'Fill color\' and \'Border color\' of \'Active\' state in \'Global tab\' then the active state of the \'Option 2\' highlight region should be updated accordingly and \'Fill color\' and \'Border color\' of \'Option 1\' highlight region of active state should be according to \'Option 1\' tab in the \'Set correct answer\' section', () => {
+            cy.log('Switching to edit Tab');
+            highlightImagePage.steps.switchToEditTab();
+            highlightImagePage.steps.navigateToGlobalTab();
+            highlightImagePage.steps.clickOnHighlightColorBlock('activeFillColor');
+            colorPopupComponent.steps.selectRecommendedColorBlock(0);
+            colorPopupComponent.steps.addInputToOpacityInputField(80);
+            colorPopupComponent.steps.clickOnOkButton();
+            highlightImagePage.steps.clickOnHighlightColorBlock('activeBorderColor');
+            colorPopupComponent.steps.selectRecommendedColorBlock(2);
+            colorPopupComponent.steps.addInputToOpacityInputField(80);
+            colorPopupComponent.steps.clickOnOkButton();
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(229, 76, 25)', '0.8');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInSetCorrectAnswerSection(1, 'rgb(9, 179, 33)', '0.8');
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(255, 240, 25)', '0.9');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInSetCorrectAnswerSection(0, 'rgb(0, 0, 0)', '0.9');
+        });
+
+        it('When the user has updated \'Fill color\' and \'Border color\' of \'Active\' state in \'Global tab\' then the active state of the \'Option 2\' highlight region should be updated accordingly and \'Fill color\' and \'Border color\' of \'Option 1\' highlight region of active state should be according to \'Option 1\' tab in the  in the \'Preview tab\'', () => {
+            cy.log('Switching to preview Tab');
+            highlightImagePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInPreviewTab(1, 'rgb(229, 76, 25)', '0.8');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInPreviewTab(1, 'rgb(9, 179, 33)', '0.8');
+            highlightImagePage.steps.verifyActiveFillColorOfHighlightRegionInPreviewTab(0, 'rgb(255, 240, 25)', '0.9');
+            highlightImagePage.steps.verifyActiveBorderColorOfHighlightRegionInPreviewTab(0, 'rgb(0, 0, 0)', '0.9');
+        });
+    });
+});

package/cypress/e2e/ILC/HighlightImage/highlightImageEditTabBasic.js

@@ -0,0 +1,125 @@
+import constants from "../../../fixtures/constants";
+import { highlightImagePage } from "../../../pages";
+import { uploadImageSectionComponent } from "../../../pages/components/uploadImageSectionComponent";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+
+describe('Create Item page - Highlight image: Question instructions, edit tab contents and image popup', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question instructions input field - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+        });
+
+        highlightImagePage.tests.verifyQuestionInstructionsInputFieldEditTab();
+    });
+
+    describe('Question instructions input field - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+        });
+
+        highlightImagePage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
+    });
+
+    describe('Highlight image - Edit tab default contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+        });
+
+        it('\'Highlight image\' title should be displayed', () => {
+            utilities.verifyInnerText(highlightImagePage.highlightImageLabel(), 'Highlight image');
+            utilities.verifyElementVisibilityState(highlightImagePage.highlightImageLabel(), 'visible');
+        });
+
+        uploadImageSectionComponent.tests.uploadImageEditTabContents();
+    });
+
+    describe('Upload image - device popup contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+        });
+
+        uploadImageSectionComponent.tests.verifyUploadImagePopupImageTitle();
+
+        uploadImageSectionComponent.tests.uploadImagePopupContents(500, 500);
+
+        uploadImageSectionComponent.tests.verifyButtonReplaceInImagePopup();
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/547305
+    describe('Upload image popup contents functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            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(highlightImagePage.highlighImageCanvas(), 'notExist');
+        });
+
+        it('When user uploads an image and selects \'Ok\' button the image should be displayed in the highlight image section', () => {
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(highlightImagePage.highlighImageCanvas(), 'visible');
+        });
+    });
+
+    describe('Upload image - source URL popup contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+        });
+
+        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 highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            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(highlightImagePage.highlighImageCanvas(), 'notExist');
+        });
+
+        it('When user uploads an image and selects \'Ok\' button the image should be displayed in the highlight image section', () => {
+            uploadImageSectionComponent.steps.clickOnSourceURL();
+            uploadImageSectionComponent.steps.uploadImageUsingSourceURL(constants.flowerImage);
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(highlightImagePage.highlighImageCanvas(), 'visible');
+        });
+    });
+});