itemengine-cypress-automation 1.0.200-23rdMayUpdates-264dc55.0 → 1.0.201-28thMayRepoUpdate-e720349.0

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

@@ -0,0 +1,408 @@
+import { imageHighlightPage } from "../../../pages";
+import utilities from "../../../support/helpers/utilities";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+const alignmentOptions = ['Top left', 'Center', 'Top right'];
+
+describe('Create item page - Image highlight: Background image section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question instructions input field - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+        });
+
+        imageHighlightPage.tests.verifyQuestionInstructionsInputFieldEditTab();
+    });
+
+    describe('Question instructions input field - Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+        });
+
+        imageHighlightPage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
+    });
+
+    describe('Background image section - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+        });
+
+        imageHighlightPage.tests.verifyBackgroundImageSectionContentWithCSSAndA11y('image highlight');
+
+        imageHighlightPage.tests.verifyDeleteImagePopupContentAndFunctionality();
+    });
+
+    describe('Specify possible options section - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Specify possible options\' label should be displayed', () => {
+            utilities.verifyInnerText(imageHighlightPage.specifyPossibleOptionsLabel(), 'Specify possible options');
+            utilities.verifyElementVisibilityState(imageHighlightPage.specifyPossibleOptionsLabel(), 'visible');
+        });
+
+        it('When user uploads background image for canvas, then it should be displayed in Specify possible options and Specify correct answer section', () => {
+            imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+            imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+            imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+        });
+
+        it('\'Pen\' tool should be visible and should be in selected state by default', () => {
+            utilities.verifyElementVisibilityState(imageHighlightPage.freeformTool(), 'visible');
+            imageHighlightPage.steps.verifySelectedStateOfFreeformTool();
+        });
+
+        it('\'Select\' tool should be visible and should be in unselected state by default', () => {
+            utilities.verifyElementVisibilityState(imageHighlightPage.selectTool(), 'visible');
+            imageHighlightPage.steps.verifyUnselectedStateOfSelectTool();
+        });
+
+        it('\'Undo\' tool should be visible and should be in unselected state by default', () => {
+            utilities.verifyElementVisibilityState(imageHighlightPage.undoTool(), 'visible');
+            imageHighlightPage.steps.verifyUnselectedStateOfUndoTool();
+        });
+
+        it('\'Redo\' tool should be visible and should be in unselected state by default', () => {
+            utilities.verifyElementVisibilityState(imageHighlightPage.redoTool(), 'visible');
+            imageHighlightPage.steps.verifyUnselectedStateOfRedoTool();
+        });
+
+        it('\'Item Eraser\' tool should be visible and should be in unselected state by default', () => {
+            utilities.verifyElementVisibilityState(imageHighlightPage.itemEraserTool(), 'visible');
+            imageHighlightPage.steps.verifyUnselectedStateOfItemEraserTool();
+        });
+
+        it('\'Clear All\' tool should be visible and should be in unselected state by default', () => {
+            utilities.verifyElementVisibilityState(imageHighlightPage.clearAllTool(), 'visible');
+            imageHighlightPage.steps.verifyUnselectedStateOfClearAllTool();
+        });
+
+        it('\'Highlight count\' label having value 0 should be displayed by default', () => {
+            utilities.verifyElementVisibilityState(imageHighlightPage.optionCount(), 'visible')
+            imageHighlightPage.steps.verifyOptionCountInHighlightImageSection(0);
+        });
+    });
+
+    describe('Image properties section - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+            imageHighlightPage.steps.addTextInQuestionInstructionsInputField('Select the appropriate highlight in the image below');
+            imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+            imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+            imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+        });
+
+        it('\'Image properties\' label should be displayed.', () => {
+            utilities.verifyInnerText(imageHighlightPage.imagePropertiesLabel(), 'Image properties');
+            utilities.verifyElementVisibilityState(imageHighlightPage.imagePropertiesLabel(), 'visible');
+        });
+
+        it('\'Fill image to canvas\' label and checkbox should be displayed and checkbox should be unchecked by default', () => {
+            utilities.verifyElementVisibilityState(imageHighlightPage.fillImageToCanvasLabel(), 'visible');
+            utilities.verifyInnerText(imageHighlightPage.fillImageToCanvasLabel(), 'Fill image to canvas');
+            utilities.verifyElementVisibilityState(imageHighlightPage.fillImageToCanvasCheckbox(), 'exist');
+            imageHighlightPage.steps.verifyFillImageToCanvasCheckboxChecked();
+        });
+
+        it('User should be able to uncheck \'Fill image to canvas\' checkbox', () => {
+            imageHighlightPage.steps.uncheckFillImageToCanvasCheckbox();
+        });
+
+        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');
+        });
+
+        it('\'Image alignment\' label should be displayed. ', () => {
+            utilities.verifyInnerText(imageHighlightPage.imageAlignmentLabel(), 'Image alignment');
+            utilities.verifyElementVisibilityState(imageHighlightPage.imageAlignmentLabel(), 'visible');
+        });
+
+        it(`\'Image alignment\' section should have three options ${alignmentOptions} and ${alignmentOptions[0]} should be active selection by default`, () => {
+            utilities.verifyInnerText(imageHighlightPage.topLeftAlignmentButton(), 'Top left');
+            utilities.verifyElementVisibilityState(imageHighlightPage.topLeftAlignmentButton(), 'visible');
+            utilities.verifyInnerText(imageHighlightPage.centerAlignmentButton(), 'Center');
+            utilities.verifyElementVisibilityState(imageHighlightPage.centerAlignmentButton(), 'visible');
+            utilities.verifyInnerText(imageHighlightPage.topRightAlignmentButton(), 'Top right');
+            utilities.verifyElementVisibilityState(imageHighlightPage.topRightAlignmentButton(), 'visible');
+        });
+
+        it('\'Image alternative text\' label and input field should be displayed. By default input field should be empty', () => {
+            utilities.verifyInnerText(imageHighlightPage.imageAlternativeTextLabel(), 'Image alternative text');
+            utilities.verifyElementVisibilityState(imageHighlightPage.imageAlternativeTextLabel(), 'visible');
+            utilities.verifyInnerText(imageHighlightPage.imageAlternativeTextInputField(), '');
+            utilities.verifyElementVisibilityState(imageHighlightPage.imageAlternativeTextInputField(), 'exist');
+        });
+
+        it('User should be able to enter text in \'Image alternative text\' input field', () => {
+            imageHighlightPage.steps.enterAndVerifyImageAlternativeTextInInputField('Image description');
+        });
+    });
+
+    describe('Image properties section -  Edit tab canvas section functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+            imageHighlightPage.steps.addTextInQuestionInstructionsInputField('Select the appropriate highlight in the image below');
+            imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+            imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+            imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+            imageHighlightPage.steps.uncheckFillImageToCanvasCheckbox();
+        });
+
+        it('When \'Top left\' image alignment is selected by default, then image should be aligned to top left inside the canvas', () => {
+            imageHighlightPage.steps.verifyCanvasImageTopLeftAligned();
+            imageHighlightPage.steps.verifyCanvasImageTopLeftAlignedSpecifyCorrectAnswer();
+        });
+
+        it('When user selects \'Center\' image alignment, then image should be aligned to center inside the canvas', () => {
+            imageHighlightPage.steps.selectCenterImageAlignment();
+            imageHighlightPage.steps.verifyCanvasImageCenterAligned();
+            imageHighlightPage.steps.verifyCanvasImageCenterAlignedSpecifyCorrectAnswer();
+        });
+
+        it('When user selects \'Top right\' image alignment, then image should be aligned to top right inside the canvas', () => {
+            imageHighlightPage.steps.selectTopRightImageAlignment();
+            imageHighlightPage.steps.verifyCanvasImageTopRightAligned();
+            imageHighlightPage.steps.verifyCanvasImageTopRightAlignedSpecifyCorrectAnswer();
+        });
+
+        it('When user selects \'Top left\' image alignment again, then image should be aligned to top left inside the canvas', () => {
+            imageHighlightPage.steps.selectTopLeftImageAlignment();
+            imageHighlightPage.steps.verifyCanvasImageTopLeftAligned();
+            imageHighlightPage.steps.verifyCanvasImageTopLeftAlignedSpecifyCorrectAnswer();
+        });
+
+        it('When opacity value is set to 100 percent by default, then opacity for image should be100 percent inside canvas', () => {
+            imageHighlightPage.steps.verifyOpacityValueForCanvasImage(100);
+            imageHighlightPage.steps.verifyOpacityValueForCanvasImageSpecifyCorrectAnswer(100);
+        });
+
+        it('When user changes opacity slider value , then opacity for image should be updated accordingly', () => {
+            imageHighlightPage.steps.clickActionOnOpacitySlider();
+            imageHighlightPage.steps.verifyOpacityValueForCanvasImage(50);
+            imageHighlightPage.steps.verifyOpacityValueForCanvasImageSpecifyCorrectAnswer(50);
+        });
+
+        it('When user changes opacity value in input field, then opacity for image should be updated accordingly', () => {
+            imageHighlightPage.steps.enterInputToOpacityInputField(40);
+            imageHighlightPage.steps.verifyOpacityInputFieldValue(40);
+            imageHighlightPage.steps.verifyOpacityValueForCanvasImage(40);
+            imageHighlightPage.steps.verifyOpacityValueForCanvasImageSpecifyCorrectAnswer(40);
+        });
+
+        it('When user checks \'Fill image to canvas\' checkbox, then image should be adjusted to fit inside the canvas', () => {
+            imageHighlightPage.steps.checkFillImageToCanvasCheckbox();
+            imageHighlightPage.steps.verifyImageFitsToCanvas();
+            imageHighlightPage.steps.verifyImageFitsToCanvasSpecifyCorrectAnswer();
+        });
+
+        it('When user unchecks \'Fill image to canvas\' checkbox, then image dimensions should set to default state', () => {
+            imageHighlightPage.steps.uncheckFillImageToCanvasCheckbox();
+            imageHighlightPage.steps.verifyImageDoesNotFitToCanvas();
+            imageHighlightPage.steps.verifyImageDoesNotFitToCanvasSpecifyCorrectAnswer();
+        });
+    });
+
+    describe('Canvas width, Canvas height, Image alternative text -  Edit tab canvas section functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+            imageHighlightPage.steps.addTextInQuestionInstructionsInputField('Select the appropriate highlight in the image below');
+            imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+            imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+            imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+        });
+
+        it('When aspect ratio is unlocked and user changes the value in width input field, the height input field should remain unchanged and the dimensions should be updated in the image popup preview section', () => {
+            imageHighlightPage.steps.unlockAspectRatio();
+            imageHighlightPage.steps.updateCanvasWidth(500);
+            imageHighlightPage.steps.verifyCanvasWidth(500);
+            imageHighlightPage.steps.verifyCanvasWidthSpecifyCorrectAnswer(500);
+            imageHighlightPage.steps.verifyCanvasHeight(432);
+            imageHighlightPage.steps.verifyCanvasHeightSpecifyCorrectAnswer(432);
+        });
+
+        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);
+            imageHighlightPage.steps.verifyCanvasHeight(500);
+            imageHighlightPage.steps.verifyCanvasWidth(500);
+            imageHighlightPage.steps.verifyCanvasHeightSpecifyCorrectAnswer(500);
+            imageHighlightPage.steps.verifyCanvasWidthSpecifyCorrectAnswer(500);
+        });
+
+        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);
+        });
+
+        it('When user selects the \'Reset dimensions\' button the height and width should reset to the original values', () => {
+            imageHighlightPage.steps.resetDimensions();
+            imageHighlightPage.steps.verifyCanvasWidth(768);
+            imageHighlightPage.steps.verifyCanvasHeight(432);
+            imageHighlightPage.steps.verifyCanvasWidthSpecifyCorrectAnswer(768);
+            imageHighlightPage.steps.verifyCanvasHeightSpecifyCorrectAnswer(432);
+        });
+
+        it('When user enters text in the \'Alternative text\' input field, then alternative text should be displayed for canvas image', () => {
+            imageHighlightPage.steps.enterAndVerifyImageAlternativeTextInInputField('This is Alternative text for image');
+            imageHighlightPage.steps.verifyImageAltTextSpecifyPossibleOptionsImageCanvas('This is Alternative text for image');
+            imageHighlightPage.steps.verifyImageAltTextSpecifyCorrectAnswerImageCanvas('This is Alternative text for image');
+        });
+
+        it('When user clears text in the \'Alternative text\' input field, then default alternative text should be displayed for canvas image', () => {
+            imageHighlightPage.steps.clearImageAlternativeTextInputFieldText();
+            imageHighlightPage.steps.verifyNoImageAltTextSpecifyPossibleOptionsImageCanvas();
+            imageHighlightPage.steps.verifyNoImageAltTextSpecifyCorrectAnswerImageCanvas();
+        });
+    });
+
+    describe('Image properties, Image alignment, Opacity section - Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+            imageHighlightPage.steps.addTextInQuestionInstructionsInputField('Select the appropriate highlight in the image below');
+            imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+            imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+            imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+            imageHighlightPage.steps.uncheckFillImageToCanvasCheckbox();
+        });
+
+        it('When \'Top left\' image alignment is selected by default, then in preview tab canvas image should be aligned to top left', () => {
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyImageUploadedPreviewTab();
+            imageHighlightPage.steps.verifyCanvasImageTopLeftAlignedInPreviewTab();
+        });
+
+        it('When user selects \'Center\' image alignment in edit tab, then canvas image should be aligned to center in preview tab ', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            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', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            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();
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyCanvasImageTopLeftAlignedInPreviewTab();
+        });
+
+        it('When opacity is 100 percent by default, then canvas image should have 100 percent opacity in preview tab ', () => {
+            imageHighlightPage.steps.verifyOpacityValueForCanvasImageInPreviewTab(100);
+        });
+
+        it('When user changes opacity slider value in edit tab, then opacity for canvas image should change accordingly in preview tab ', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.clickActionOnOpacitySlider();
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyOpacityValueForCanvasImageInPreviewTab(50);
+        });
+
+        it('When user changes opacity input field value in edit tab, then opacity for canvas image should change accordingly in preview tab ', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.enterInputToOpacityInputField(40);
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyOpacityValueForCanvasImageInPreviewTab(40);
+        });
+
+        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();
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyImageFitsToCanvasInPreviewTab();
+        });
+
+        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();
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyImageDoesNotFitToCanvasInPreviewTab();
+        });
+    });
+
+    describe('Canvas width, Canvas height, Image alternative text - Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+            imageHighlightPage.steps.addTextInQuestionInstructionsInputField('Select the appropriate highlight in the image below');
+            imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+            imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+            imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+        });
+
+        it('When the user has uploaded canvas image, then switching to the preview tab should display canvas image with same dimensions', () => {
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyImageUploadedPreviewTab();
+            imageHighlightPage.steps.verifyCanvasWidthInPreviewTab(768);
+            imageHighlightPage.steps.verifyCanvasHeightInPreviewTab(432);
+        });
+
+        it('When user updates width and height in edit tab, then updated changes should be reflected in preview tab', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.unlockAspectRatio();
+            imageHighlightPage.steps.updateCanvasWidth(800);
+            imageHighlightPage.steps.updateCanvasHeight(450);
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyCanvasWidthInPreviewTab(800);
+            imageHighlightPage.steps.verifyCanvasHeightInPreviewTab(450);
+        });
+
+        it('When user resets image dimensions in edit tab, then updated changes should be reflected in preview tab', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.resetDimensions();
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyCanvasWidthInPreviewTab(768);
+            imageHighlightPage.steps.verifyCanvasHeightInPreviewTab(432);
+        });
+
+        it('When user enters text in the \'Alternative text\' input field, then alternative text should be displayed in the \'Preview tab\'', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.enterAndVerifyImageAlternativeTextInInputField('This is Alternative text for image');
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyImageAlternativeTextInPreviewTab('This is Alternative text for image');
+        });
+
+        it('When user clears text in the \'Alternative text\' input field, then default alternative text should  be displayed in the \'Preview tab\'', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.clearImageAlternativeTextInputFieldText();
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyNoImageAlternativeTextPresentInPreviewTab();
+        });
+
+        it('When user deletes the uploaded image file in edit tab, then canvas image should not appear in preview tab', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.deleteImage();
+            imageHighlightPage.steps.clickOnDeleteButtonInDeleteImagePopup();
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyImageNotUploadedPreviewTab()
+        });
+    });
+});

package/cypress/e2e/ILC/ImageHighlight/checkAnswerFunctionalityForAllViews.smoke.js

@@ -1,4 +1,4 @@
-import { imageHighlightPage, itemPreviewPage, studentViewPage } from "../../../pages";
+/*import { imageHighlightPage, itemPreviewPage, studentViewPage } from "../../../pages";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import utilities from "../../../support/helpers/utilities";
 var itemReferenceID = "";
@@ -138,4 +138,4 @@ describe('Create item page - Image highlight - Check answer functionality', () =
             });
         });
     });
-});
+});*/

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

@@ -0,0 +1,115 @@
+import { imageHighlightPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const flowerHighlightRegion = [[40, 6], [40, 20], [55, 20], [55, 6]];
+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]];
+
+describe('Create Item page - Image highlight : Descriptors accordion', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Descriptors accordion - edit tab contents and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When user has uploaded an image and added no highlights then the \'Descriptors\' accordion should not be displayed', () => {
+            utilities.verifyElementVisibilityState(imageHighlightPage.descriptorsAccordion(), 'notExist');
+        });
+
+        it('When the user highlights a region then \'Descriptors\' accordion  should be displayed', () => {
+            imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+            imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+            imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+            imageHighlightPage.steps.highlightRegionInImage(flowerHighlightRegion);
+            utilities.verifyInnerText(imageHighlightPage.descriptorsAccordion(), 'Descriptors');
+        });
+
+        it('By default \'Descriptors\' accordion should be collapsed and by clicking on the \'Descriptors\' accordion, user should be able to expand the accordion', () => {
+            imageHighlightPage.steps.verifyDescriptorsAccordionIsCollapsed();
+            imageHighlightPage.steps.expandDescriptorsAccordion();
+        });
+
+        it('CSS of \'Descriptors\' accordion', { tags: 'css' }, () => {
+            utilities.verifyCSS(imageHighlightPage.descriptorsAccordion(), {
+                'color': css.color.accordionLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(imageHighlightPage.descriptorsAccordion().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Additional Settings\' accordion', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(imageHighlightPage.descriptorsAccordion());
+        });
+
+        it('When user expands the \'Descriptors\' accordion \'Descriptors for options\' label should be displayed with a info icon', () => {
+            utilities.verifyInnerText(imageHighlightPage.descriptorsHeading(), 'Descriptors for options');
+            utilities.verifyElementVisibilityState(imageHighlightPage.descriptorsInfoIcon(), 'visible');
+        });
+
+        it('When hovers over the info \'Descriptors will be visible in grading view\' tooltip text should be displayed', () => {
+            imageHighlightPage.descriptorsInfoIcon()
+                .verifyTooltip('Descriptors will be visible on the grading view');
+        });
+
+        it('When user has highlighted 1 region in specify possible options section then only one input field should be displayed and it should be empty', () => {
+            imageHighlightPage.steps.verifyDescriptorsInputFieldContents(1);
+            imageHighlightPage.steps.verifyDescriptorsInputField(0, '');
+        });
+
+        it('When user adds a highlight region an input field should be added', () => {
+            imageHighlightPage.steps.highlightRegionInImage(leafHighlightRegion)
+            imageHighlightPage.steps.verifyDescriptorsInputFieldContents(2);
+        });
+
+        it('When user deletes an highlight region then the input field should be removed and correct numeration should be displayed', () => {
+            imageHighlightPage.steps.eraseAHighlightRegion(flowerHighlightRegion);
+            imageHighlightPage.steps.verifyDescriptorsInputFieldContents(1);
+        });
+
+        it('When user removes all the highlight regions then the \'Descriptors\' accordion should not be displayed', () => {
+            imageHighlightPage.steps.eraseAHighlightRegion(leafHighlightRegion);
+            utilities.verifyElementVisibilityState(imageHighlightPage.descriptorsAccordion(), 'notExist');
+        });
+    });
+
+    describe('Descriptors accordion - preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            cy.barsPreLoaderWait();
+            imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+            imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+            imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+            imageHighlightPage.steps.highlightRegionInImage(flowerHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(leafHighlightRegion);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(1);
+        });
+
+        it('When the user has highlighted regions and descriptor input fields are empty then \'Option 1\', \'Option 2\' should be displayed in the correct answer section', () => {
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyCorrectAnswerContainerContents(['Option 1', 'Option 2'], [1, 2]);
+        });
+
+        it('When the user enters text in input field of the descriptors and switches to preview tab then in the added descriptors should be displayed in the correct answer section', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.expandDescriptorsAccordion();
+            imageHighlightPage.steps.enterTextInDescriptorsInputField(0, 'Flower');
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.switchToGradingView();
+            imageHighlightPage.steps.verifyCorrectAnswerContainerContents(['Flower', 'Option 2'], [1, 2]);
+        });
+    });
+});