itemengine-cypress-automation 1.0.573-IEI-7080-f70315e.0 → 1.0.573

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/studentViewSettings.js

@@ -1,7 +1,10 @@
-import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import { fillInTheGapsOverImageTextPage, itemPreviewPage, studentViewPage } from "../../../pages";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
+let correctAnswerViews = ['Question preview', 'Item preview', 'Student view'];
+const views = utilities.getViews(correctAnswerViews);
+let itemReferenceID = "";
 
 describe('Create Item page - drag and drop into categories: Student view settings', () => {
     before(() => {
@@ -34,6 +37,56 @@ describe('Create Item page - drag and drop into categories: Student view setting
         fillInTheGapsOverImageTextPage.tests.verifySpellCheckFunctionalityPreviewTab();
     });
 
+    views.forEach((view) => {
+        describe(`${view}: Student view settings`, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+                        cy.barsPreLoaderWait();
+                        fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+                        fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+                        fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+                        fillInTheGapsOverImageTextPage.steps.checkSpellCheckCheckbox();
+                        fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                };
+            });
+
+            beforeEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        break;
+                    case 'Item preview':
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                }
+            });
+            if (view === 'Question preview') {
+                after(() => {
+                    fillInTheGapsOverImageTextPage.steps.clickOnSaveQuestionButton();
+                    fillInTheGapsOverImageTextPage.steps.clickOnConfirmButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it('When the \'Spell check\' functionality is enabled, the response field should have \'spellcheck\' attribute set as \'true\' in the preview tab', () => {
+                fillInTheGapsOverImageTextPage.steps.verifySpellCheckOfResponseFieldPreviewTabEnabled(0);
+            });
+        });
+    });
+
     /*describe('Allow students to check answer: Edit tab', () => {
         abortEarlySetup();
         before(() => {

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/styleAndLayoutCustomization.js

@@ -399,6 +399,18 @@ describe('Create Item page - Fill in the gaps over image with text: Style and la
             fillInTheGapsOverImageTextPage.steps.verifyResponseAreaDimensions(30, 118);
         });
 
+        it('User should only be able to enter numeric values in the \'Height (px)\' and \'Width (px)\' input fields', () => {
+            fillInTheGapsOverImageTextPage.steps.setTextContainerHeight('1*2');
+            fillInTheGapsOverImageTextPage.steps.setTextContainerWidth('2%1');
+            fillInTheGapsOverImageTextPage.steps.verifyValueInTextContainerWidthAndHeightInputField('12', '21');
+            fillInTheGapsOverImageTextPage.steps.setTextContainerHeight('apple');
+            fillInTheGapsOverImageTextPage.steps.setTextContainerWidth('news');
+            fillInTheGapsOverImageTextPage.steps.verifyValueInTextContainerWidthAndHeightInputField('', '');
+            fillInTheGapsOverImageTextPage.steps.setTextContainerHeight('54!@');
+            fillInTheGapsOverImageTextPage.steps.setTextContainerWidth('@12');
+            fillInTheGapsOverImageTextPage.steps.verifyValueInTextContainerWidthAndHeightInputField('54', '12');
+        });
+
         it('When the user specifies the height and width, the dimensions of the text containers should update accordingly', () => {
             fillInTheGapsOverImageTextPage.steps.setTextContainerHeight(100);
             fillInTheGapsOverImageTextPage.steps.setTextContainerWidth(200);

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/styleAndLayoutCustomizationAllViews.js

@@ -0,0 +1,156 @@
+import { fillInTheGapsOverImageTextPage, itemPreviewPage, studentViewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+import { colorPopupComponent } from "../../../pages/components";
+let correctAnswerViews = ['Question preview', 'Item preview', 'Student view', 'Grading view', 'Correct answer view'];
+const views = utilities.getViews(correctAnswerViews);
+const css = Cypress.env('css');
+let itemReferenceID = "";
+const modifiedColor = 'rgb(121, 60, 60)';
+
+describe('Create Item page - Drag and drop into categories: Style and layout customization', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        describe(`${view}: Style and Layout Customization - Default State`, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+                        cy.barsPreLoaderWait();
+                        fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+                        fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+                        fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+                        fillInTheGapsOverImageTextPage.steps.selectResponseArea(0);
+                        fillInTheGapsOverImageTextPage.steps.selectResponseAreaPointerStyle('left');
+                        fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        fillInTheGapsOverImageTextPage.steps.switchToGradingView();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/grading-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Correct answer view':
+                        cy.visit(`/item-engine/demo/render-item/correct-answer-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                };
+            });
+
+            beforeEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        break;
+                    case 'Item preview':
+                        fillInTheGapsOverImageTextPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+                        itemPreviewPage.steps.resetQuestionPreview();
+                        break;
+                }
+            });
+
+            if (view === 'Question preview') {
+                after(() => {
+                    fillInTheGapsOverImageTextPage.steps.clickOnSaveQuestionButton();
+                    fillInTheGapsOverImageTextPage.steps.clickOnConfirmButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it(`Text container should have default border color, fill color, and border style in ${view}`, () => {
+                fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldFillColor(0, css.color.optionsBg);
+                fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldBorderColor(0, `1px solid ${css.color.activeComponentBorder}`);
+                fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldBorderStyle(0, 'solid');
+            });
+
+            it(`text container connector style should be displayed in default state in ${view}`, () => {
+                fillInTheGapsOverImageTextPage.steps.verifyResponseAreaConnectorEndPointShapePreviewTab('Circle');
+            });
+        });
+    });
+
+    views.forEach((view) => {
+        describe(`${view}: Style and Layout Customization - modified State`, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+                        cy.barsPreLoaderWait();
+                        fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+                        fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+                        fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+                        fillInTheGapsOverImageTextPage.steps.selectResponseArea(0);
+                        fillInTheGapsOverImageTextPage.steps.selectResponseAreaPointerStyle('left');
+                        fillInTheGapsOverImageTextPage.steps.expandStyleAndLayoutCustomizationAccordion();
+                        fillInTheGapsOverImageTextPage.steps.selectEndPointShapeButton('Square');
+                        fillInTheGapsOverImageTextPage.steps.editColor(0);
+                        colorPopupComponent.steps.clickInColorSaturationPalette();
+                        colorPopupComponent.steps.clickOnOkButton();
+                        fillInTheGapsOverImageTextPage.steps.editColor(1);
+                        colorPopupComponent.steps.clickInColorSaturationPalette();
+                        colorPopupComponent.steps.clickOnOkButton();
+                        fillInTheGapsOverImageTextPage.steps.selectBorderStyleToggleButton('Dotted');
+                        fillInTheGapsOverImageTextPage.steps.checkSetHeightAndWidthForAllTextContainersCheckbox();
+                        fillInTheGapsOverImageTextPage.steps.setTextContainerHeight(100);
+                        fillInTheGapsOverImageTextPage.steps.setTextContainerWidth(200);
+                        fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        fillInTheGapsOverImageTextPage.steps.switchToGradingView();
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                };
+            });
+
+            beforeEach(() => {
+                switch (view) {
+                    case 'Question preview':
+                        break;
+                    case 'Item preview':
+                        fillInTheGapsOverImageTextPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+                        itemPreviewPage.steps.resetQuestionPreview();
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                }
+            });
+
+            if (view === 'Question preview') {
+                after(() => {
+                    fillInTheGapsOverImageTextPage.steps.clickOnSaveQuestionButton();
+                    fillInTheGapsOverImageTextPage.steps.clickOnConfirmButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it(`Text container should have default border color, fill color, and border style in ${view}`, () => {
+                fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldFillColor(0, modifiedColor);
+                fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldBorderColor(0, `1px dotted ${modifiedColor}`);
+                fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldBorderStyle(0, 'dotted');
+            });
+
+            it(`text container connector style should be displayed in default state in ${view}`, () => {
+                fillInTheGapsOverImageTextPage.steps.verifyResponseAreaConnectorEndPointShapePreviewTab('Square');
+            });
+
+            it(`Text containers should have modified height and width in ${view}`, () => {
+                fillInTheGapsOverImageTextPage.steps.verifyAnswerInputFieldHeightAndWidthInAllViews(0, '100px', '200px');
+            });
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/supportedFileTypes.js

@@ -43,7 +43,5 @@ describe('Create item page - Fill in the gaps over image with text: Supported fi
             utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.errorMessage(), 'notExist');
             utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.canvasUploadedImage(), 'notExist');
         });
-
-        fillInTheGapsOverImageTextPage.tests.verifyErrorMessageCSSAndA11y();
     });
 });

package/cypress/e2e/ILC/FillInTheGapsTextNew/Scoring/partialDifferentWeightsAlternativePointsGreaterThanCorrectPoints.js

@@ -25,7 +25,7 @@ describe('Create item page - Fill in the gaps with text: Partial different weigh
             fillInTheGapsTextPage.steps.switchToPreviewTab();
         });
 
-        it.only('When the user selects \'Grading\' view without attempting the question, response area numeration should be displayed, correct answers section should be displayed with correct answers from the alternative accordion and respective response area numeration', () => {
+        it('When the user selects \'Grading\' view without attempting the question, response area numeration should be displayed, correct answers section should be displayed with correct answers from the alternative accordion and respective response area numeration', () => {
             fillInTheGapsTextPage.steps.switchToGradingView();
             fillInTheGapsTextPage.steps.verifyResponseAreaNumeration();
             if (alternativeAnswerCheck) {

package/cypress/e2e/ILC/ImageHighlight/additionalSettings.js

@@ -198,4 +198,90 @@ describe('Create Item page - Image highlight : Additional settings', () => {
             imageHighlightPage.steps.verifyHighlightRegionAriaLabelPreviewTab(1, 'Response 2 of 2');
         });
     });
+
+    describe('Additional settings: Enumeration placement and details section', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+            imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+            imageHighlightPage.steps.addTextInQuestionInstructionsInputField('Select the appropriate highlight in the image below');
+            imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+            imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+            imageHighlightPage.steps.highlightRegionInImage(flowerHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(leafHighlightRegion);
+            imageHighlightPage.steps.allotPoints(10);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(1);
+            imageHighlightPage.steps.expandAdditionalSettings();
+            imageHighlightPage.steps.switchToPreviewTab();
+        });
+
+        it('The enumeration placement label should be displayed in the additional settings accordion of edit tab and should contain text "Enumeration placement"', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            utilities.verifyInnerText(imageHighlightPage.enumerationPlacementLabel(), 'Enumeration placement');
+            utilities.verifyElementVisibilityState(imageHighlightPage.enumerationPlacementLabel(), 'visible');
+        });
+
+        it('Toggle buttons with options "Top", "Center" and "Bottom" should be present for enumeration placement and by default "Top" enumeration placement toggle button should be selected and other toggles should not be not selected', () => {
+            utilities.verifyElementVisibilityState(imageHighlightPage.enumerationToggleButtonContainer(), 'visible');
+            utilities.verifyElementVisibilityState(imageHighlightPage.enumerationPlacementTopToggleButton(), 'visible');
+            utilities.verifyElementVisibilityState(imageHighlightPage.enumerationPlacementCenterToggleButton(), 'visible');
+            utilities.verifyElementVisibilityState(imageHighlightPage.enumerationPlacementBottomToggleButton(), 'visible');
+            utilities.verifiedElementSelectedNotSelectedState(imageHighlightPage.enumerationPlacementTopToggleButton(), 'selected');
+            utilities.verifiedElementSelectedNotSelectedState(imageHighlightPage.enumerationPlacementCenterToggleButton(), 'notSelected');
+            utilities.verifiedElementSelectedNotSelectedState(imageHighlightPage.enumerationPlacementBottomToggleButton(), 'notSelected');
+        });
+
+        it('When toggle button for "Enumeration placement" is set to "Top" then the numeration placement should be updated to top for the highlight region in the preview tab', () => {
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.highlightARegionInPreviewTab(0);
+            imageHighlightPage.steps.highlightARegionInPreviewTab(1);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyNumerationPlacementForHighlightRegionInPreviewTab('Top', 0);
+            imageHighlightPage.steps.verifyNumerationPlacementForHighlightRegionInPreviewTab('Top', 1);
+        });
+
+        it('When the user changes "Enumeration placement" to bottom then the numeration placement should be updated to bottom for the highlight region in the preview tab', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.selectBottomEnumerationPlacementToggle();
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.highlightARegionInPreviewTab(0);
+            imageHighlightPage.steps.highlightARegionInPreviewTab(1);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyNumerationPlacementForHighlightRegionInPreviewTab('Bottom', 0);
+            imageHighlightPage.steps.verifyNumerationPlacementForHighlightRegionInPreviewTab('Bottom', 1);
+        });
+
+        it('When the user changes "Enumeration placement" to center then the numeration placement should be updated to center for the highlight region in the preview tab', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.selectCenterEnumerationPlacementToggle();
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.highlightARegionInPreviewTab(0);
+            imageHighlightPage.steps.highlightARegionInPreviewTab(1);
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyNumerationPlacementForHighlightRegionInPreviewTab('Center', 0);
+            imageHighlightPage.steps.verifyNumerationPlacementForHighlightRegionInPreviewTab('Center', 1);
+        });
+
+        it('When the user has set "ARIA label", then it should be present for the highlight region in the preview tab', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.enterTextInAriaLabelInputField(0, 'Correct response 1');
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyHighlightRegionAriaLabelPreviewTab(0, 'Correct response 1, Response 1 of 2');
+            imageHighlightPage.steps.verifyHighlightRegionAriaLabelPreviewTab(1, 'Response 2 of 2');
+        });
+
+        it('Accessibility of input field in preview tab when custom \'ARIA label\' is set', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(imageHighlightPage.highlightPreviewTab());
+        });
+
+        it('When the user clears the set value in the "ARIA label" input field, then the default aria labels should be present for the highlight region in the preview tab', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.clearTextInAriaLabelInputField(0);
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyHighlightRegionAriaLabelPreviewTab(0, 'Response 1 of 2');
+            imageHighlightPage.steps.verifyHighlightRegionAriaLabelPreviewTab(1, 'Response 2 of 2');
+        });
+    });
 });

package/cypress/e2e/ILC/ImageHighlight/backgroundImageAndCanvasProperties.js

@@ -122,6 +122,18 @@ describe('Create item page - Image highlight: Background image section', () => {
             imageHighlightPage.steps.uncheckFillImageToCanvasCheckbox();
         });
 
+        it('When user unchecks \'Fill image to canvas\' checkbox, then the original image dimensions should be restored', () => {
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyImageUploadedPreviewTab();
+            imageHighlightPage.steps.verifyImageDimensionsPreviewTab(500, 500);
+        });
+
+        it('When user unchecks \'Fill image to canvas\' checkbox, saves the question then the original image dimensions should be restored in item preview', () => {
+            imageHighlightPage.steps.saveAQuestionWithIncompleteAuthoring();
+            imageHighlightPage.steps.verifyImageDimensionsPreviewTab(500, 500);
+            imageHighlightPage.steps.clickOnEditQuestionButton();
+        });
+
         it('\'Lock aspect ratio\' and \'Reset dimensions\' buttons should be displayed and by default \'Lock aspect ratio\' button should be locked', () => {
             utilities.verifyElementVisibilityState(imageHighlightPage.lockAspectRatioButton(), 'visible');
             utilities.verifyElementVisibilityState(imageHighlightPage.resetDimensionsButton(), 'visible');
@@ -220,7 +232,7 @@ describe('Create item page - Image highlight: Background image section', () => {
         });
     });
 
-    describe.skip('Canvas width, Canvas height, Image alternative text -  Edit tab canvas section functionality', () => {
+    describe('Canvas width, Canvas height, Image alternative text -  Edit tab canvas section functionality', () => {
         abortEarlySetup();
         before(() => {
             imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
@@ -242,6 +254,7 @@ describe('Create item page - Image highlight: Background image section', () => {
 
         it('When aspect ratio is unlocked and user changes the value in height input field, then width input field should remain unchanged and the dimensions should be updated in the image popup preview section', () => {
             imageHighlightPage.steps.updateCanvasHeight(500);
+            cy.wait(500); //wait added to stabilize the test as sometimes it fails due to slow rendering of canvas preview section
             imageHighlightPage.steps.verifyCanvasHeight(500);
             imageHighlightPage.steps.verifyCanvasWidth(500);
             imageHighlightPage.steps.verifyCanvasHeightSpecifyCorrectAnswer(500);
@@ -251,8 +264,9 @@ describe('Create item page - Image highlight: Background image section', () => {
         it('When user locks the aspect ratio button and changes the value in the width input field, the height input field should be updated accordingly to maintain the updated aspect ratio', () => {
             imageHighlightPage.steps.lockAspectRatio();
             imageHighlightPage.steps.updateCanvasWidth(800);
-            imageHighlightPage.steps.verifyCanvasHeight(500);
-            imageHighlightPage.steps.verifyCanvasHeightSpecifyCorrectAnswer(500);
+            cy.wait(500); //wait added to stabilize the test as sometimes it fails due to slow rendering of canvas preview section
+            imageHighlightPage.steps.verifyCanvasHeight(450);
+            imageHighlightPage.steps.verifyCanvasHeightSpecifyCorrectAnswer(450);
         });
 
         it('When user selects the \'Reset dimensions\' button the height and width should reset to the original values', () => {
@@ -294,28 +308,47 @@ describe('Create item page - Image highlight: Background image section', () => {
             imageHighlightPage.steps.verifyCanvasImageTopLeftAlignedInPreviewTab();
         });
 
-        it('When user selects \'Center\' image alignment in edit tab, then canvas image should be aligned to center in preview tab ', () => {
+        it('When \'Top left\' image alignment is selected by default, saves the question then in item preview the canvas image should be aligned to top left', () => {
+            imageHighlightPage.steps.saveAQuestionWithIncompleteAuthoring();
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyImageUploadedPreviewTab();
+            imageHighlightPage.steps.verifyCanvasImageTopLeftAlignedInPreviewTab();
             imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.clickOnEditQuestionButton();
+        });
+
+        it('When user selects \'Center\' image alignment in edit tab, then canvas image should be aligned to center in preview tab ', () => {
             imageHighlightPage.steps.selectCenterImageAlignment();
             imageHighlightPage.steps.switchToPreviewTab();
             imageHighlightPage.steps.verifyCanvasImageCenterAlignedInPreviewTab();
         });
 
-        it('When user selects \'Top right\' image alignment, then canvas image should be aligned to top right in preview tab', () => {
+        it('When \'Center\' image alignment is selected by default, saves the question then in item preview the canvas image should be aligned to center', () => {
+            imageHighlightPage.steps.saveAQuestionWithIncompleteAuthoring();
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyImageUploadedPreviewTab();
+            imageHighlightPage.steps.verifyCanvasImageCenterAlignedInPreviewTab();
             imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.clickOnEditQuestionButton();
+        });
+
+        it('When user selects \'Top right\' image alignment, then canvas image should be aligned to top right in preview tab', () => {
             imageHighlightPage.steps.selectTopRightImageAlignment();
             imageHighlightPage.steps.switchToPreviewTab();
             imageHighlightPage.steps.verifyCanvasImageTopRightAlignedInPreviewTab();
         });
 
-        it('When user selects \'Top left\' image alignment again, then image should be aligned to top left inside the canvas in preview tab', () => {
-            imageHighlightPage.steps.switchToEditTab();
-            imageHighlightPage.steps.selectTopLeftImageAlignment();
+        it('When \'Top right\' image alignment is selected by default, saves the question then in item preview the canvas image should be aligned to center', () => {
+            imageHighlightPage.steps.saveAQuestionWithIncompleteAuthoring();
             imageHighlightPage.steps.switchToPreviewTab();
-            imageHighlightPage.steps.verifyCanvasImageTopLeftAlignedInPreviewTab();
+            imageHighlightPage.steps.verifyImageUploadedPreviewTab();
+            imageHighlightPage.steps.verifyCanvasImageTopRightAlignedInPreviewTab();
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.clickOnEditQuestionButton();
         });
 
         it('When opacity is 100 percent by default, then canvas image should have 100 percent opacity in preview tab ', () => {
+            imageHighlightPage.steps.switchToPreviewTab();
             imageHighlightPage.steps.verifyOpacityValueForCanvasImageInPreviewTab(100);
         });
 
@@ -333,6 +366,15 @@ describe('Create item page - Image highlight: Background image section', () => {
             imageHighlightPage.steps.verifyOpacityValueForCanvasImageInPreviewTab(40);
         });
 
+        it('When user changes opacity input field value in edit tab, saves the question then opacity for canvas image should change accordingly in item preview tab ', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.enterInputToOpacityInputField(50);
+            imageHighlightPage.steps.saveQuestion();
+            imageHighlightPage.steps.switchToItemPreviewTab();
+            imageHighlightPage.steps.verifyOpacityValueForCanvasImageInItemPreviewTab(50);
+            imageHighlightPage.steps.clickOnEditQuestionButton();
+        });
+
         it('When user checks \'Fill image to canvas\' checkbox in edit tab, then image should be adjusted to fit inside the canvas in preview tab', () => {
             imageHighlightPage.steps.switchToEditTab();
             imageHighlightPage.steps.checkFillImageToCanvasCheckbox();
@@ -340,6 +382,15 @@ describe('Create item page - Image highlight: Background image section', () => {
             imageHighlightPage.steps.verifyImageFitsToCanvasInPreviewTab();
         });
 
+        it('When user checks \'Fill image to canvas\' checkbox in edit tab, saves the question, then image should be adjusted to fit inside the canvas in item preview', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.checkFillImageToCanvasCheckbox();
+            imageHighlightPage.steps.saveQuestion();
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyImageFitsToCanvasInPreviewTab();
+            imageHighlightPage.steps.clickOnEditQuestionButton();
+        });
+
         it('When user unchecks \'Fill image to canvas\' checkbox, then image dimensions should set to default state in preview tab', () => {
             imageHighlightPage.steps.switchToEditTab();
             imageHighlightPage.steps.uncheckFillImageToCanvasCheckbox();

package/cypress/e2e/ILC/ImageHighlight/customiseHighlightStyle.js

@@ -10,10 +10,11 @@ const branchesHighlightRegion = [[50, 30], [50, 42], [65, 42], [65, 30]];
 const leafHighlightRegion = [[26, 26], [26, 36], [48, 36], [48, 26]];
 const rootsHighlightRegion = [[45, 45], [45, 55], [57, 55], [57, 45]];
 
-const defaultStateColor = 'rgb(120, 60, 60)';
+const defaultStateColor = 'rgba(60, 73, 120, 0.4)';
+const defaultStateColorSpecifyPossibleOptions = 'rgba(60, 120, 119, 0.7)';
 const activeStateColor = 'rgb(60, 120, 120)';
-const defaultStateBorderColorWithOpacity = 'rgba(120, 61, 61, 0.5)';
-const defaultStateBorderColorWithNoOpacity = 'rgba(120, 60, 60, 0)';
+const defaultStateBorderColorWithOpacity = 'rgba(79, 60, 120, 0.5)';
+const defaultStateBorderColorWithNoOpacity = 'rgba(79, 60, 120, 0)';
 
 describe('Create Item page - Image highlight: Customize image highlight style', () => {
     before(() => {
@@ -151,9 +152,9 @@ describe('Create Item page - Image highlight: Customize image highlight style',
             imageHighlightPage.steps.clickOnFillColorIcon();
             imageHighlightPage.steps.clickOnActiveStateColorEditButton();
             colorPopupComponent.steps.clickInColorSaturationPalette();
-            imageHighlightPage.steps.verifySelectedColorBlock(defaultStateColor);
+            imageHighlightPage.steps.verifySelectedColorBlock(defaultStateColorSpecifyPossibleOptions);
             imageHighlightPage.steps.clickOnOkButton();
-            imageHighlightPage.steps.verifyEditedFillColorInSpecifyCorrectAnswerSection(0, defaultStateColor);
+            imageHighlightPage.steps.verifyEditedFillColorInSpecifyCorrectAnswerSection(0, defaultStateColorSpecifyPossibleOptions);
             imageHighlightPage.steps.verifyEditedFillColorInSpecifyCorrectAnswerSection(1, activeStateColor);
         });
     });
@@ -323,7 +324,8 @@ describe('Create Item page - Image highlight: Customize image highlight style',
 
     // Change 'Stroke color' to 'Border color' in the following tests after https://redmine.zeuslearning.com/issues/580697 has been resolved.
 
-    describe('Border color image highlight style : Edit tab content and functionality', () => {
+    //Remove skip once https://weldnorthed.atlassian.net/browse/IEI-6981 is resolved.
+    describe.skip('Border color image highlight style : Edit tab content and functionality', () => {
         abortEarlySetup();
         before(() => {
             imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
@@ -349,9 +351,9 @@ describe('Create Item page - Image highlight: Customize image highlight style',
             utilities.verifyElementVisibilityState(imageHighlightPage.colorPopupWrapper(), 'visible');
         });
 
-        it('The popup should contain \'Border color\' label and two color boxes with label \'Default\' and \'Active\'. Both color boxes should have edit color button.Verify defualt color of both \'Default\' and \'Active\' color boxes', () => {
+        it('The popup should contain \'Stroke color\' label and two color boxes with label \'Default\' and \'Active\'. Both color boxes should have edit color button.Verify defualt color of both \'Default\' and \'Active\' color boxes', () => {
             utilities.verifyElementVisibilityState(imageHighlightPage.colorPopupMenuLabel(), 'visible');
-            utilities.verifyInnerText(imageHighlightPage.colorPopupMenuLabel(), 'Border color');
+            utilities.verifyInnerText(imageHighlightPage.colorPopupMenuLabel(), 'Stroke color');
             utilities.verifyElementVisibilityState(imageHighlightPage.defaultStateColorLabel(), 'visible');
             utilities.verifyInnerText(imageHighlightPage.defaultStateColorLabel(), 'Default');
             utilities.verifyElementVisibilityState(imageHighlightPage.activeStateColorLabel(), 'visible');
@@ -479,7 +481,7 @@ describe('Create Item page - Image highlight: Customize image highlight style',
 
         it('\'Border style\' icon should be displayed and as user hovers over it then a tooltip \'Border style\' should be displayed', () => {
             utilities.verifyElementVisibilityState(imageHighlightPage.borderStyleButton(), 'visible');
-            imageHighlightPage.steps.verifyToolTipText(3, imageHighlightPage.borderStyleButton(), 'Border style');
+            imageHighlightPage.steps.verifyToolTipText(3, imageHighlightPage.borderStyleButton(), 'Border Style');
         });
 
         it('When user clicks on the \'Border style\' icon then a popup should be displayed', () => {
@@ -622,7 +624,7 @@ describe('Create Item page - Image highlight: Customize image highlight style',
     });
 
     //Remove skip once ⁠https://redmine.zeuslearning.com/issues/579605 is resolved
-    describe.skip('Fill color image highlight style : Preview tab and functionality', () => {
+    describe('Fill color image highlight style : Preview tab and functionality', () => {
         abortEarlySetup();
         before(() => {
             imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
@@ -700,7 +702,7 @@ describe('Create Item page - Image highlight: Customize image highlight style',
     });
 
     //Remove skip once ⁠https://redmine.zeuslearning.com/issues/579605 is resolved
-    describe.skip('Border color image highlight style : Preview tab functionality', () => {
+    describe('Border color image highlight style : Preview tab functionality', () => {
         abortEarlySetup();
         before(() => {
             imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
@@ -778,7 +780,7 @@ describe('Create Item page - Image highlight: Customize image highlight style',
     });
 
     //Remove skip once ⁠https://redmine.zeuslearning.com/issues/579605 is resolved
-    describe.skip('Border style image highlight style : Preview tab functionality', () => {
+    describe('Border style image highlight style : Preview tab functionality', () => {
         abortEarlySetup();
         before(() => {
             imageHighlightPage.steps.navigateToCreateQuestion('image highlight');

package/cypress/e2e/ILC/ImageHighlight/imageHighlightStyle.js

@@ -102,8 +102,7 @@ describe('Create Item page - Image Highlight : Image selection style', () => {
 
     });
 
-    //Need to remove skip once https://redmine.zeuslearning.com/issues/579605
-    describe.skip('Image selection style: Preview tab functionality', () => {
+    describe('Image selection style: Preview tab functionality', () => {
         abortEarlySetup();
         before(() => {
             imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
@@ -139,6 +138,17 @@ describe('Create Item page - Image Highlight : Image selection style', () => {
             imageHighlightPage.steps.switchToEditTab();
         });
 
+        it('When user has selected \'Outline\' image selection style, saves the question and selects a highlighted region in \'Preview tab\' section then the region should be outlined and unselected highlighted regions should be in default state', () => {
+            imageHighlightPage.steps.saveAQuestionWithIncompleteAuthoring();
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.highlightARegionInPreviewTab(0);
+            imageHighlightPage.steps.verifyOutlineHighlightRegionItemPreviewTabSection(0);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(1);
+            imageHighlightPage.steps.verifyDefaultHighlightRegion(2);
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.clickOnEditQuestionButton();
+        });
+
         it('When user has selected \'Pattern\' image selection style and selects a highlighted region in \'Preview tab\' section then the region should be filled with pattern and unselected highlighted regions should be in default state', () => {
             imageHighlightPage.steps.selectpatternToggleButton();
             imageHighlightPage.steps.verifyToggleButtonSelected('Pattern');
@@ -148,6 +158,5 @@ describe('Create Item page - Image Highlight : Image selection style', () => {
             imageHighlightPage.steps.verifyDefaultHighlightRegion(1);
             imageHighlightPage.steps.verifyDefaultHighlightRegion(2);
         });
-
     });
 });