itemengine-cypress-automation 1.0.573-IEI-7080-f70315e.0 → 1.0.573-IEI-7065-Improve-test-coverage-for-essay-response-c25d1ee.0

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

@@ -1,9 +1,6 @@
 import { fillInTheGapsTextPage } from "../../../../pages";
-import { showAlternativeAnswersComponent } from "../../../../pages/components";
 import abortEarlySetup from "../../../../support/helpers/abortEarly";
 
-const alternativeAnswerCheck = Cypress.env('ENABLE_ALTERNATIVE_ANSWER_ENHANCEMENT') === 'true';
-
 describe('Create item page - Fill in the gaps with text: Partial equal weights with alternative answers', () => {
     before(() => {
         cy.loginAs('admin');
@@ -28,21 +25,7 @@ describe('Create item page - Fill in the gaps with text: Partial equal weights w
         it('When the user selects \'Grading\' view without attempting the question, correct answers section should be displayed with correct answers from the correct accordion and respective response area numeration', () => {
             fillInTheGapsTextPage.steps.switchToGradingView();
             fillInTheGapsTextPage.steps.verifyResponseAreaNumeration();
-            if (alternativeAnswerCheck) {
-                showAlternativeAnswersComponent.steps.clickShowAlternativeAnswersToggle();
-                fillInTheGapsTextPage.steps.verifyCorrectAnswerSectionWithAlternateAnswer([
-                    {
-                        correctAnswers: [['Flower'],['Leaf'],['Stem']],
-                        points: ['(15 points)', '(5 points)', '(5 points)', '(5 points)'],
-                    },
-                    {
-                        correctAnswers: [['Petals'],['Leaves'],['Stem']],
-                        points: ['(9 points)', '(3 points)', '(3 point)', '(3 points)'],
-                    }
-                ]);
-            } else {
-                fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower', 'Leaf', 'Stem']);
-            }
+            fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower', 'Leaf', 'Stem']);
         });
 
         it('When the user attempts the question with responses from the correct accordion, then the user should be awarded full points and on switching to \'Grading\' view, correct icons should be displayed beside all the correct responses, correct/incorrect and correct answer section should not be displayed', () => {
@@ -94,21 +77,7 @@ describe('Create item page - Fill in the gaps with text: Partial equal weights w
             fillInTheGapsTextPage.steps.verifyCorrectOptionIcon(1);
             fillInTheGapsTextPage.steps.verifyIncorrectOptionIcon(2);
             fillInTheGapsTextPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
-            if (alternativeAnswerCheck) {
-                showAlternativeAnswersComponent.steps.clickShowAlternativeAnswersToggle();
-                fillInTheGapsTextPage.steps.verifyCorrectAnswerSectionWithAlternateAnswer([
-                    {
-                        correctAnswers: [['Flower'],['Leaf'],['Stem']],
-                        points: ['(15 points)', '(5 points)', '(5 points)', '(5 points)'],
-                    },
-                    {
-                        correctAnswers: [['Petals'],['Leaves'],['Stem']],
-                        points: ['(9 points)', '(3 points)', '(3 point)', '(3 points)'],
-                    }
-                ]);
-            } else {
-                fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower', 'Leaf', 'Stem']);
-            }
+            fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower', 'Leaf', 'Stem']);
             fillInTheGapsTextPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
             /*cy.log('When the user has attempted the question with partially correct options exclusively from the correct accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct answer responses, correct/incorrect status message should not be displayed and correct answer section should not be displayed')
             fillInTheGapsTextPage.steps.checkAnswer();
@@ -128,21 +97,7 @@ describe('Create item page - Fill in the gaps with text: Partial equal weights w
             fillInTheGapsTextPage.steps.verifyIncorrectOptionIcon(1);
             fillInTheGapsTextPage.steps.verifyIncorrectOptionIcon(2);
             fillInTheGapsTextPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
-            if (alternativeAnswerCheck) {
-                showAlternativeAnswersComponent.steps.clickShowAlternativeAnswersToggle();
-                fillInTheGapsTextPage.steps.verifyCorrectAnswerSectionWithAlternateAnswer([
-                    {
-                        correctAnswers: [['Flower'],['Leaf'],['Stem']],
-                        points: ['(15 points)', '(5 points)', '(5 points)', '(5 points)'],
-                    },
-                    {
-                        correctAnswers: [['Petals'],['Leaves'],['Stem']],
-                        points: ['(9 points)', '(3 points)', '(3 point)', '(3 points)'],
-                    }
-                ]);
-            } else {
-                fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower', 'Leaf', 'Stem']);
-            }
+            fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower', 'Leaf', 'Stem']);
             fillInTheGapsTextPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
             /*cy.log('When the user has attempted the question with partially correct options exclusively from the alternative accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct answer responses, no icon should be displayed beside unattempted response correct/incorrect status message should not be displayed and correct answer section should not be displayed')
             fillInTheGapsTextPage.steps.checkAnswer();
@@ -162,21 +117,7 @@ describe('Create item page - Fill in the gaps with text: Partial equal weights w
             fillInTheGapsTextPage.steps.verifyCorrectOptionIcon(1);
             fillInTheGapsTextPage.steps.verifyIncorrectOptionIcon(2);
             fillInTheGapsTextPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
-            if (alternativeAnswerCheck) {
-                showAlternativeAnswersComponent.steps.clickShowAlternativeAnswersToggle();
-                fillInTheGapsTextPage.steps.verifyCorrectAnswerSectionWithAlternateAnswer([
-                    {
-                        correctAnswers: [['Flower'],['Leaf'],['Stem']],
-                        points: ['(15 points)', '(5 points)', '(5 points)', '(5 points)'],
-                    },
-                    {
-                        correctAnswers: [['Petals'],['Leaves'],['Stem']],
-                        points: ['(9 points)', '(3 points)', '(3 point)', '(3 points)'],
-                    }
-                ]);
-            } else {
-                fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower', 'Leaf', 'Stem']);
-            }
+            fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower', 'Leaf', 'Stem']);
             fillInTheGapsTextPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
             /*cy.log('When the user has attempted the question with equal number of correct responses from correct and alternative accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct answer responses, incorrect icon should be displayed beside empty responses correct/incorrect status message should not be displayed and correct answer section should not be displayed')
             fillInTheGapsTextPage.steps.checkAnswer();
@@ -196,21 +137,7 @@ describe('Create item page - Fill in the gaps with text: Partial equal weights w
             fillInTheGapsTextPage.steps.verifyIncorrectOptionIcon(1);
             fillInTheGapsTextPage.steps.verifyCorrectOptionIcon(2);
             fillInTheGapsTextPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
-            if (alternativeAnswerCheck) {
-                showAlternativeAnswersComponent.steps.clickShowAlternativeAnswersToggle();
-                fillInTheGapsTextPage.steps.verifyCorrectAnswerSectionWithAlternateAnswer([
-                    {
-                        correctAnswers: [['Flower'],['Leaf'],['Stem']],
-                        points: ['(15 points)', '(5 points)', '(5 points)', '(5 points)'],
-                    },
-                    {
-                        correctAnswers: [['Petals'],['Leaves'],['Stem']],
-                        points: ['(9 points)', '(3 points)', '(3 point)', '(3 points)'],
-                    }
-                ]);
-            } else {
-                fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower', 'Leaf', 'Stem']);
-            }
+            fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower', 'Leaf', 'Stem']);
             fillInTheGapsTextPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
             /*cy.log('When the user has attempted the question with common response between correct and alternative accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct answer responses, no icon should be displayed beside unattempted response correct/incorrect status message should not be displayed and correct answer section should not be displayed')
             fillInTheGapsTextPage.steps.checkAnswer();
@@ -230,21 +157,7 @@ describe('Create item page - Fill in the gaps with text: Partial equal weights w
             fillInTheGapsTextPage.steps.verifyIncorrectOptionIcon(1);
             fillInTheGapsTextPage.steps.verifyIncorrectOptionIcon(2);
             fillInTheGapsTextPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
-            if (alternativeAnswerCheck) {
-                showAlternativeAnswersComponent.steps.clickShowAlternativeAnswersToggle();
-                fillInTheGapsTextPage.steps.verifyCorrectAnswerSectionWithAlternateAnswer([
-                    {
-                        correctAnswers: [['Flower'],['Leaf'],['Stem']],
-                        points: ['(15 points)', '(5 points)', '(5 points)', '(5 points)'],
-                    },
-                    {
-                        correctAnswers: [['Petals'],['Leaves'],['Stem']],
-                        points: ['(9 points)', '(3 points)', '(3 point)', '(3 points)'],
-                    }
-                ]);
-            } else {
-                fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower', 'Leaf', 'Stem']);
-            }
+            fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower', 'Leaf', 'Stem']);
             fillInTheGapsTextPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
             /*cy.log('When the user has attempted the question incorrectly and clicks on \'Check answer\' button, then incorrect icons should be displayed besides all incorrect responses, no icon should be displayed beside unattempted response correct/incorrect status message should not be displayed and correct answer section should not be displayed')
             fillInTheGapsTextPage.steps.checkAnswer();
@@ -270,21 +183,7 @@ describe('Create item page - Fill in the gaps with text: Partial equal weights w
             fillInTheGapsTextPage.steps.verifyCorrectOptionIcon(1);
             fillInTheGapsTextPage.steps.verifyIncorrectOptionIcon(2);
             fillInTheGapsTextPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
-            if (alternativeAnswerCheck) {
-                showAlternativeAnswersComponent.steps.clickShowAlternativeAnswersToggle();
-                fillInTheGapsTextPage.steps.verifyCorrectAnswerSectionWithAlternateAnswer([
-                    {
-                        correctAnswers: [['Flower'],['Leaf'],['Stem']],
-                        points: ['(23 points)', '(7.67 points)', '(7.67 points)', '(7.67 points)'],
-                    },
-                    {
-                        correctAnswers: [['Petals'],['Leaves'],['Branch']],
-                        points: ['(5 points)', '(1.67 points)', '(1.67 point)', '(1.67 points)'],
-                    }
-                ]);
-            } else {
-                fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower', 'Leaf', 'Stem']);
-            }
+            fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower', 'Leaf', 'Stem']);
             fillInTheGapsTextPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
             /*cy.log('When the user attempts the question with more number of correct responses from the alternative accordion than the correct accordion but the score of the individual response from the correct accordion overpowers the combined score of the alternative accordion answers and clicks on the \'Check answer\' button, correct icons should be displayed beside correct accordion responses, incorrect icons should be displayed for the alternative accordion responses, correct/incorrect answer status message and correct answer section should not be displayed')
             fillInTheGapsTextPage.steps.checkAnswer();

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

@@ -1,10 +1,7 @@
 import { fillInTheGapsTextPage } from "../../../../pages";
-import { showAlternativeAnswersComponent } from "../../../../pages/components";
 import abortEarlySetup from "../../../../support/helpers/abortEarly";
 import utilities from "../../../../support/helpers/utilities";
 
-const alternativeAnswerCheck = Cypress.env('ENABLE_ALTERNATIVE_ANSWER_ENHANCEMENT') === 'true';
-
 describe('Create item page - Fill in the gaps with text: Response level alternate answer basic scoring', () => {
     before(() => {
         cy.loginAs('admin');
@@ -30,16 +27,7 @@ describe('Create item page - Fill in the gaps with text: Response level alternat
             fillInTheGapsTextPage.steps.switchToGradingView();
             fillInTheGapsTextPage.steps.verifyPreviewTabPointsBackgroundForIncorrectOrPartiallyCorrectAnswer();
             fillInTheGapsTextPage.steps.verifyResponseAreaNumeration();
-            if (alternativeAnswerCheck) {
-                fillInTheGapsTextPage.steps.verifyCorrectAnswerSectionWithAlternateAnswer([
-                    {
-                        correctAnswers: [['Flower', 'Fruit']],
-                        points: ['(15 points)'],
-                    },
-                ]);
-            } else {
-                fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower']);
-            }
+            fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower']);
         });
 
         it('When the user attempts the question incorrectly, then the user should be awarded 0 points and on switching to \'Grading\' view, incorrect icon should be displayed besides the incorrect response, a status message with text \'Your answer is incorrect\' and correct answer section with the first correct answer set in the response accordion should be displayed', () => {
@@ -48,16 +36,7 @@ describe('Create item page - Fill in the gaps with text: Response level alternat
             fillInTheGapsTextPage.steps.switchToGradingView();
             fillInTheGapsTextPage.steps.verifyIncorrectOptionIcon(0);
             fillInTheGapsTextPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
-            if (alternativeAnswerCheck) {
-                fillInTheGapsTextPage.steps.verifyCorrectAnswerSectionWithAlternateAnswer([
-                    {
-                        correctAnswers: [['Flower', 'Fruit']],
-                        points: ['(15 points)'],
-                    },
-                ]);
-            } else {
-                fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower']);
-            }
+            fillInTheGapsTextPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower']);
             fillInTheGapsTextPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
             /*cy.log('When the user attempts the question incorrectly and clicks on \'Check answer\' button, incorrect icon should be displayed besides the incorrect response, a status message with text \'Your answer is incorrect\' should be displayed and correct answer section should not be displayed')
             fillInTheGapsTextPage.steps.checkAnswer();

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);
         });
-
     });
 });