itemengine-cypress-automation 1.0.25 → 1.0.26

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

@@ -0,0 +1,200 @@
+import constants from "../../../fixtures/constants";
+import { highlightImagePage } from "../../../pages";
+import { uploadImageSectionComponent } from "../../../pages/components/uploadImageSectionComponent";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+
+describe('Create Item page - Highlight image: Question instructions, edit tab contents and image popup', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question instructions input field - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+        });
+
+        highlightImagePage.tests.verifyQuestionInstructionsInputFieldEditTab();
+    });
+
+    describe('Question instructions input field - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+        });
+
+        highlightImagePage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
+    });
+
+    describe('Highlight image - Edit tab default contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+        });
+
+        it('\'Highlight image\' title should be displayed', () => {
+            utilities.verifyInnerText(highlightImagePage.highlightImageLabel(), 'Highlight image');
+            utilities.verifyElementVisibilityState(highlightImagePage.highlightImageLabel(), 'visible');
+        });
+
+        uploadImageSectionComponent.tests.uploadImageEditTabContents();
+    });
+
+    describe('Upload image - device popup contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+        });
+
+        uploadImageSectionComponent.tests.verifyUploadImagePopupImageTitle();
+
+        uploadImageSectionComponent.tests.uploadImagePopupContents(500, 500);
+
+        uploadImageSectionComponent.tests.verifyButtonReplaceInImagePopup();
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/547305
+    describe('Upload image popup contents functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+        });
+
+        uploadImageSectionComponent.tests.uploadImageHeightWidthAspectRatioAndResetDimensionsFunctionality(500, 500);
+
+        uploadImageSectionComponent.tests.uploadImageReplaceButtonFunctionality();
+
+        it('When user selects the \'Cancel\' button the image should not be uploaded', () => {
+            uploadImageSectionComponent.steps.clickOnImagePopupCancelButton();
+            utilities.verifyElementVisibilityState(highlightImagePage.highlighImageCanvas(), 'notExist');
+        });
+
+        it('When user uploads an image and selects \'Ok\' button the image should be displayed in the highlight image section', () => {
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(highlightImagePage.highlighImageCanvas(), 'visible');
+        });
+    });
+
+    describe('Upload image - source URL popup contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+        });
+
+        uploadImageSectionComponent.tests.verifyUploadImageSourceURLTitle();
+
+        uploadImageSectionComponent.tests.verifyUploadImageSourceURLDefaultLabelAndInputField();
+
+        uploadImageSectionComponent.tests.uploadImagePopupContents(650, 684);
+    });
+
+    describe('Upload image \'Source URL\' popup contents functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            uploadImageSectionComponent.steps.clickOnSourceURL();
+            uploadImageSectionComponent.steps.uploadImageUsingSourceURL(constants.flowerImage);
+        });
+
+        uploadImageSectionComponent.tests.uploadImageHeightWidthAspectRatioAndResetDimensionsFunctionality(650, 684);
+
+        it('When user selects the \'Cancel\' button the image should not be uploaded', () => {
+            uploadImageSectionComponent.steps.clickOnImagePopupCancelButton();
+            utilities.verifyElementVisibilityState(highlightImagePage.highlighImageCanvas(), 'notExist');
+        });
+
+        it('When user uploads an image and selects \'Ok\' button the image should be displayed in the highlight image section', () => {
+            uploadImageSectionComponent.steps.clickOnSourceURL();
+            uploadImageSectionComponent.steps.uploadImageUsingSourceURL(constants.flowerImage);
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(highlightImagePage.highlighImageCanvas(), 'visible');
+        });
+    });
+
+    describe('Supported file types functionality: device popup', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+        });
+
+        const supportedFormatFiles = {
+            jpg: 'highlightImage.jpg',
+            jpeg: 'sample.jpeg',
+            png: 'image.png',
+            gif: 'sample.gif',
+            heic: 'sample.heic',
+            heif: 'sample.heif',
+            svg: 'sample.svg'
+        };
+
+        Object.keys(supportedFormatFiles).forEach((fileType) => {
+            it(`User should be able to upload ${fileType} file in the upload section using link text \'device\' and it should be displayed in the \'Set correct answer\' section and \'Preview tab\'`, () => {
+                uploadImageSectionComponent.steps.uploadFile(supportedFormatFiles[fileType]);
+                uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+                uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+                utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
+                highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+                highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
+                highlightImagePage.steps.verifyUploadedImageFormatInSetCorrectAnswerSection(fileType);
+                cy.log('Checking in preview tab')
+                highlightImagePage.steps.switchToPreviewTab();
+                highlightImagePage.steps.verifyUploadedImageFormatInPreviewTab(fileType);
+                highlightImagePage.steps.switchToEditTab();
+                cy.log('Post step: Delete the image')
+                uploadImageSectionComponent.steps.clickOnDeleteImageButton();
+                highlightImagePage.steps.clickOnAcceptButtonInDialogBox();
+            });
+        });
+    });
+
+    describe('Supported file types functionality: Source URL popup', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+        });
+
+        const supportedFormatFiles = {
+            jpg: constants.foxImageLink,
+            jpeg: constants.sampleJPEGLink,
+            png: constants.samplePNGLink,
+            gif: constants.sampleGIFLink,
+            svg: constants.sampleSVGLink
+        };
+
+        Object.keys(supportedFormatFiles).forEach((fileType) => {
+            it(`User should be able to upload ${fileType} file in the upload section using link text \'device\' and it should be displayed in the \'Set correct answer\' section and \'Preview tab\'`, () => {
+                uploadImageSectionComponent.steps.clickOnSourceURL();
+                uploadImageSectionComponent.steps.uploadImageUsingSourceURL(supportedFormatFiles[fileType]);
+                uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+                uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+                utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'notExist');
+                highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+                highlightImagePage.steps.verifyImageUploadedInSetCorrectAnswerSection();
+                highlightImagePage.steps.verifyUploadedImageFormatInSetCorrectAnswerSection(fileType);
+                cy.log('Checking in preview tab')
+                highlightImagePage.steps.switchToPreviewTab();
+                highlightImagePage.steps.verifyUploadedImageFormatInPreviewTab(fileType);
+                highlightImagePage.steps.switchToEditTab();
+                cy.log('Post step: Delete the image')
+                uploadImageSectionComponent.steps.clickOnDeleteImageButton();
+                highlightImagePage.steps.clickOnAcceptButtonInDialogBox();
+            });
+        });
+    });
+});

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

@@ -0,0 +1,318 @@
+import constants from "../../../fixtures/constants";
+import { dialogBoxBase, highlightImagePage } from "../../../pages";
+import { uploadImageSectionComponent } from "../../../pages/components/uploadImageSectionComponent";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create Item page - Highlight image: Edit tab tools, content and functionality', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Highlight image contents - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.log('Uploading an image');
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+        });
+
+        it('\'Pen\' tool should be visible and should be in selected state by default', () => {
+            utilities.verifyElementVisibilityState(highlightImagePage.penTool(), 'visible');
+            highlightImagePage.steps.verifySelectedStateOfPenTool();
+        });
+
+        it('\'Select\' tool should be visible and should be in unselected state by default', () => {
+            utilities.verifyElementVisibilityState(highlightImagePage.selectTool(), 'visible');
+            highlightImagePage.steps.verifyUnselectedStateOfSelectTool();
+        });
+
+        it('\'Undo\' tool should be visible and should be in unselected state by default', () => {
+            utilities.verifyElementVisibilityState(highlightImagePage.undoTool(), 'visible');
+            highlightImagePage.steps.verifyUnselectedStateOfUndoTool();
+        });
+
+        it('\'Redo\' tool should be visible and should be in unselected state by default', () => {
+            utilities.verifyElementVisibilityState(highlightImagePage.redoTool(), 'visible');
+            highlightImagePage.steps.verifyUnselectedStateOfRedoTool();
+        });
+
+        it('\'Item Eraser\' tool should be visible and should be in unselected state by default', () => {
+            utilities.verifyElementVisibilityState(highlightImagePage.itemEraserTool(), 'visible');
+            highlightImagePage.steps.verifyUnselectedStateOfItemEraserTool();
+        });
+
+        it('\'Clear All\' tool should be visible and should be in unselected state by default', () => {
+            utilities.verifyElementVisibilityState(highlightImagePage.clearAllTool(), 'visible');
+            highlightImagePage.steps.verifyUnselectedStateOfClearAllTool();
+        });
+
+        it('\'Highlight count\' label having value 0 should be displayed by default', () => {
+            utilities.verifyElementVisibilityState(highlightImagePage.highlightCount(), 'visible')
+            highlightImagePage.steps.verifyHighlightCountInHighlightImageSection(0);
+        });
+
+        it('\'Edit image\' and \'Delete image\' button should be visible', () => {
+            utilities.verifyInnerText(uploadImageSectionComponent.editImageButton(), 'Edit image');
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.editImageButton(), 'visible');
+            utilities.verifyInnerText(uploadImageSectionComponent.deleteImageButton(), 'Delete image');
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.deleteImageButton(), 'visible');
+        });
+
+        //TODO: Need to update script after https://redmine.zeuslearning.com/issues/518498 is resolved
+        it('When the user hovers overs the tools, tooltips with texts should be displayed and on moving the focus away from the tools, the tooltips should disappear', () => {
+            const tools = [highlightImagePage.selectTool, highlightImagePage.penTool, highlightImagePage.undoTool, highlightImagePage.redoTool, highlightImagePage.itemEraserTool, highlightImagePage.clearAllTool];
+            const tooltip = ['SelectSelect, move, rotate and re-size', 'PenDraw a polygon', 'UndoUndo last action', 'RedoRedo last action', 'Item EraserRemove the item hovered', 'Clear AllRemove all the highlights']
+            for (let index = 0; index < tools.length; index++) {
+                highlightImagePage.steps.verifyTooltip(tools[index](), tooltip[index])
+            }
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/543603
+        it('CSS of \'Highlight image\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(highlightImagePage.penTool(), {
+                'background-color': css.color.liTextSelectedBg,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(highlightImagePage.selectTool(), {
+                'background-color': css.color.secondaryBtnBg,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(uploadImageSectionComponent.editImageButton().find('span'), {
+                'color': css.color.secondaryBtnActive,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            cy.log('Verifying color of edit image icon')
+            uploadImageSectionComponent.editImageButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.secondaryBtnActive);
+            utilities.verifyCSS(uploadImageSectionComponent.deleteImageButton().find('span'), {
+                'color': css.color.errorText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            cy.log('Verifying color of delete image icon')
+            uploadImageSectionComponent.deleteImageButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+            utilities.verifyCSS(highlightImagePage.highlightCount(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextBg
+            });
+            const tools = [highlightImagePage.selectTool, highlightImagePage.penTool, highlightImagePage.undoTool, highlightImagePage.redoTool, highlightImagePage.itemEraserTool, highlightImagePage.clearAllTool]
+            tools.forEach(tool => {
+                utilities.verifyCSS(tool().find('svg'), {
+                    'color': css.color.activeButtons,
+                });
+            });
+        });
+
+        it('Accessibility of upload image section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightImagePage.highlightImageSectionWrapper());
+        });
+    });
+
+    describe('Edit image popup contents and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.log('Uploading an image');
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            uploadImageSectionComponent.steps.clickOnEditImageButton();
+        });
+
+        uploadImageSectionComponent.tests.verifyUploadImagePopupImageTitle();
+
+        uploadImageSectionComponent.tests.uploadImagePopupContents(500, 500);
+
+        uploadImageSectionComponent.tests.verifyButtonReplaceInImagePopup();
+
+        uploadImageSectionComponent.tests.uploadImageHeightWidthAspectRatioAndResetDimensionsFunctionality(500, 500);
+
+        it('When user clicks on \'Cancel\' button the popup should close and image should not get edited', () => {
+            uploadImageSectionComponent.steps.clickOnImagePopupCancelButton();
+            highlightImagePage.steps.verifyEditTabWidthInputFieldValue(500);
+            cy.log('Post step: Clicking on edit image button')
+            uploadImageSectionComponent.steps.clickOnEditImageButton();
+        });
+
+        uploadImageSectionComponent.tests.uploadImageReplaceButtonFunctionality();
+
+        it('When user makes some edits and clicks on the \'Ok\' button the popup should close and the edited image should be uploaded', () => {
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            highlightImagePage.steps.verifyEditTabWidthInputFieldValue(225);
+        });
+    });
+
+    describe('Edit image pop up content - source URL', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.log('Uploading an image using source url');
+            uploadImageSectionComponent.steps.clickOnSourceURL();
+            uploadImageSectionComponent.steps.uploadImageUsingSourceURL(constants.flowerImage);
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            uploadImageSectionComponent.steps.clickOnEditImageButton();
+        });
+
+        //Failing due to  https://redmine.zeuslearning.com/issues/543833
+        it('When user selects source URL, a popup should be displayed with title \'Add source URL\'', () => {
+            utilities.verifyInnerText(uploadImageSectionComponent.imagePopupTitle(), 'Add source URL');
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.imagePopupTitle(), 'visible');
+        });
+
+        uploadImageSectionComponent.tests.verifyUploadImageSourceURLLabelAndInputFieldInEditSourceURLPopup();
+
+        uploadImageSectionComponent.tests.uploadImagePopupContents(650, 684);
+    });
+
+    describe('Delete image - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.log('Uploading an image');
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+        });
+
+        uploadImageSectionComponent.tests.verifyDeleteImagePopup();
+
+        it('When user clicks on \'Cancel\' button the popup should close and image should not get deleted', () => {
+            dialogBoxBase.steps.clickOnRejectButtonInDialogBox();
+            utilities.verifyElementVisibilityState(highlightImagePage.highlighImageCanvas(), 'visible');
+        });
+
+        it('When user clicks on \'Delete image\' button the popup should close and image should get deleted', () => {
+            uploadImageSectionComponent.steps.clickOnDeleteImageButton();
+            dialogBoxBase.steps.clickOnAcceptButtonInDialogBox();
+            utilities.verifyElementVisibilityState(highlightImagePage.highlighImageCanvas(), 'notExist')
+        });
+    });
+
+    describe('Width(px) and Image alternative text: contents and Set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When user has not uploaded an image then \'Width(px)\' and \'Image alternative text\' label and input field should not be displayed', () => {
+            utilities.verifyElementVisibilityState(highlightImagePage.widthLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.widthInputField(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.imageAlternativeTextLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightImagePage.imageAlternativeTextInputField(), 'notExist');
+        });
+
+        it('When user uploads an image \'Width(px)\' label and input field should be displayed and by default the input field should be prefilled with the width of the uploaded image', () => {
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+            utilities.verifyInnerText(highlightImagePage.widthLabel(), 'Width (px)');
+            utilities.verifyElementVisibilityState(highlightImagePage.widthLabel(), 'visible');
+            highlightImagePage.steps.verifyEditTabWidthInputFieldValue(500);
+            utilities.verifyElementVisibilityState(highlightImagePage.widthInputField(), 'visible');
+        });
+
+        it('When user has uploaded an image \'Image alternative text\' label and input field should be displayed and by default the input field should be empty', () => {
+            utilities.verifyInnerText(highlightImagePage.imageAlternativeTextLabel(), 'Image alternative text');
+            utilities.verifyElementVisibilityState(highlightImagePage.imageAlternativeTextLabel(), 'visible');
+            highlightImagePage.steps.verifyImageAlternativeTextInputField('');
+            utilities.verifyElementVisibilityState(highlightImagePage.imageAlternativeTextInputField(), 'visible');
+        });
+
+        it('When the user enters a value in the \'Width\' input field then the width of the image in \'Highlight image\' section and \'Set correct answer\' section should be updated accordingly', () => {
+            highlightImagePage.steps.addInputToEditTabWidthInputField(250);
+            highlightImagePage.steps.verifyImageWidthInHighlightImageSection(250);
+            highlightImagePage.steps.verifyHeightAndWidthOfImageInSetCorrectAnswerSection(500, 250);
+        });
+
+        it('When user has edited the value of image in \'Highlight image\' section then the width of image should be edited in the \'Edit image\' popup', () => {
+            uploadImageSectionComponent.steps.clickOnEditImageButton();
+            uploadImageSectionComponent.steps.verifyWidthInputFieldValueInImagePopup(250);
+            uploadImageSectionComponent.steps.clickOnImagePopupCancelButton();
+        });
+
+        it('When user enters text in the \'Image alternative text\' input field the alternative text should be displayed in the \'Set correct answer\' section', () => {
+            highlightImagePage.steps.addInputToImageAlternativeTextInputField(constants.flowerImageAltText);
+            highlightImagePage.steps.verifyImageAlternativeTextOfImageInSetCorrectAnswerSection(constants.flowerImageAltText);
+        });
+
+        it('CSS of Width(px) and Image alternative text section', { tags: 'css' }, () => {
+            utilities.verifyCSS(highlightImagePage.widthLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(highlightImagePage.widthInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(highlightImagePage.imageAlternativeTextLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(highlightImagePage.imageAlternativeTextInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of Width(px) and Image alternative text section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightImagePage.imageAlternativeTextLabel().parents('.width-alternative-text-wrapper'));
+        });
+
+        it('When user clears the \'Image alternative text\' input field then the alternative text should not be displayed in the \'Set correct answer\' section', () => {
+            highlightImagePage.steps.clearImageAlternativeTextInputField();
+            highlightImagePage.steps.verifyImageAlternativeTextOfImageInSetCorrectAnswerSection('');
+        });
+    });
+
+    describe('Width(px) and Image alternative text: preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight image question type');
+            highlightImagePage.steps.navigateToCreateQuestion('highlight image');
+            cy.log('Uploading an image');
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
+            highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
+        });
+
+        it('When the user enters a value in the \'Width\' input field then the width of the image should be updated accordingly in the \'Preview tab\'', () => {
+            highlightImagePage.steps.addInputToEditTabWidthInputField(250);
+            highlightImagePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.verifyHeightAndWidthOfImageInPreviewTab(500, 250);
+        });
+
+        it('When user enters text in the \'Image alternative text\' input field the alternative text should be displayed in the \'Preview tab\'', () => {
+            highlightImagePage.steps.switchToEditTab();
+            highlightImagePage.steps.addInputToImageAlternativeTextInputField(constants.flowerImageAltText);
+            highlightImagePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.verifyImageAlternativeTextOfImageInPreviewTab(constants.flowerImageAltText);
+        });
+
+        it('When user clears the \'Image alternative text\' input field then the alternative text should not be displayed in the \'Preview tab\'', () => {
+            highlightImagePage.steps.switchToEditTab();
+            highlightImagePage.steps.clearImageAlternativeTextInputField();
+            highlightImagePage.steps.switchToPreviewTab();
+            highlightImagePage.steps.verifyImageAlternativeTextOfImageInPreviewTab('');
+        });
+    });
+});