itemengine-cypress-automation 1.0.26 → 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

@@ -122,79 +122,4 @@ describe('Create Item page - Highlight image: Question instructions, edit tab co
             utilities.verifyElementVisibilityState(highlightImagePage.highlighImageCanvas(), 'visible');
         });
     });
-
-    describe('Supported file types functionality: device popup', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to highlight image question type');
-            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
-            cy.barsPreLoaderWait();
-        });
-
-        const supportedFormatFiles = {
-            jpg: 'highlightImage.jpg',
-            jpeg: 'sample.jpeg',
-            png: 'image.png',
-            gif: 'sample.gif',
-            heic: 'sample.heic',
-            heif: 'sample.heif',
-            svg: 'sample.svg'
-        };
-
-        Object.keys(supportedFormatFiles).forEach((fileType) => {
-            it(`User should be able to upload ${fileType} file in the upload section using link text \'device\' and it should be displayed in the \'Set correct answer\' section and \'Preview tab\'`, () => {
-                uploadImageSectionComponent.steps.uploadFile(supportedFormatFiles[fileType]);
-                uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
-                uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
-                utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
-                highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
-                highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
-                highlightImagePage.steps.verifyUploadedImageFormatInSetCorrectAnswerSection(fileType);
-                cy.log('Checking in preview tab')
-                highlightImagePage.steps.switchToPreviewTab();
-                highlightImagePage.steps.verifyUploadedImageFormatInPreviewTab(fileType);
-                highlightImagePage.steps.switchToEditTab();
-                cy.log('Post step: Delete the image')
-                uploadImageSectionComponent.steps.clickOnDeleteImageButton();
-                highlightImagePage.steps.clickOnAcceptButtonInDialogBox();
-            });
-        });
-    });
-
-    describe('Supported file types functionality: Source URL popup', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to highlight image question type');
-            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
-            cy.barsPreLoaderWait();
-        });
-
-        const supportedFormatFiles = {
-            jpg: constants.foxImageLink,
-            jpeg: constants.sampleJPEGLink,
-            png: constants.samplePNGLink,
-            gif: constants.sampleGIFLink,
-            svg: constants.sampleSVGLink
-        };
-
-        Object.keys(supportedFormatFiles).forEach((fileType) => {
-            it(`User should be able to upload ${fileType} file in the upload section using link text \'device\' and it should be displayed in the \'Set correct answer\' section and \'Preview tab\'`, () => {
-                uploadImageSectionComponent.steps.clickOnSourceURL();
-                uploadImageSectionComponent.steps.uploadImageUsingSourceURL(supportedFormatFiles[fileType]);
-                uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
-                uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
-                utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
-                highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
-                highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
-                highlightImagePage.steps.verifyUploadedImageFormatInSetCorrectAnswerSection(fileType);
-                cy.log('Checking in preview tab')
-                highlightImagePage.steps.switchToPreviewTab();
-                highlightImagePage.steps.verifyUploadedImageFormatInPreviewTab(fileType);
-                highlightImagePage.steps.switchToEditTab();
-                cy.log('Post step: Delete the image')
-                uploadImageSectionComponent.steps.clickOnDeleteImageButton();
-                highlightImagePage.steps.clickOnAcceptButtonInDialogBox();
-            });
-        });
-    });
 });