itemengine-cypress-automation 1.0.83 → 1.0.84

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

@@ -0,0 +1,510 @@
+import { fillInTheGapsOverImageDragAndDropPage } 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 - Fill in the gaps: Question instructions, Options section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question instructions input field - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image - drag and drop');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyQuestionInstructionsInputFieldEditTab();
+    });
+
+    describe('Question instructions input field - Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
+    });
+
+    describe('Background image section - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Background image\' label should be visible', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.backgroundImageLabel(), 'Background image');
+        })
+
+        it('\'Upload\' label and \'Choose file\' button should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.uploadLabel(), 'Upload');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.uploadLabel(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.chooseFileButton(), 'Choose file');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.chooseFileButton(), 'visible');
+        });
+
+        it('\'File name\' label should be displayed and by default \'No file chosen\' text should be displayed below the \'File name\' label.', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.fileNameLabel(), 'File name');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.fileNameLabel(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.noFileChosenLabel(), 'No file chosen');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.noFileChosenLabel(), 'visible');
+        });
+
+        it('CSS of upload section', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.uploadLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.chooseFileButton(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'border-bottom-color': css.color.titleContainerBorder
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.fileNameLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.noFileChosenLabel(), {
+                'color': css.color.panelLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of  Upload section before uploading image', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.uploadLabel().parents('.edit-question-edit-tab-wrapper'));
+        });
+
+        it('When the user adds the image file and file upload is inprogress, file name and progress bar should be displayed below \'File name\' label. Progress bar should disappear once file is uploaded and uploaded image should be displayed', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.uploadImageProgressBar(), 'visible');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyFileNameLabel('highlightImage.jpg');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.canvasImage(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.uploadImageProgressBar(), 'notExist');
+        });
+
+        it('Delete button should appear beside uploaded file\'s name', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.deleteImageIcon(), 'visible');
+        });
+
+        it('When user clicks on \'Choose file\' button again and upload another image file, previously uploaded image file should get replaced with new image file', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('sample1.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyFileNameLabel('sample1.jpg');
+        });
+
+        it('When the user hovers on \'Delete\' button, \'Delete image\' text should be displayed in tooltip', () => {
+            fillInTheGapsOverImageDragAndDropPage.deleteImageIcon()
+                .verifyTooltip('Delete image');
+        });
+
+        it('CSS of tooltip', { tags: 'css' }, () => {
+            fillInTheGapsOverImageDragAndDropPage.deleteImageIcon()
+                .trigger('mouseover');
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.tooltipText(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.tooltipBg
+            });
+        });
+
+        it('When user clicks on the \'Delete\' button, then \'Delete\' popup should be displayed', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.deleteImage();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.dialogBox(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.dialogBoxTitle(), 'Delete');
+        });
+
+        it('The pop up should be displayed with the message \'Are you sure you want to delete the image?\'', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.dialogBoxContent(), 'Are you sure you want to delete the image?');
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.deleteImagePopupButtonDelete(), 'Delete image');
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.deleteImagePopupButtonCancel(), 'Cancel');
+        });
+
+        it('CSS of popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.dialogBox(), {
+                'background-color': css.color.defaultBackground,
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.dialogBoxContent().find('[class*="UploadImagestyles__DeletePopupWrapper"]'), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.deleteImagePopupButtonDelete(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.deleteImagePopupButtonCancel(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.defaultBackground
+            });
+        });
+
+        it('Accessibility of the popup', () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.dialogBox());
+        });
+
+        it('When user clicks on \'Cancel\' button, then popup should close and user should remain on the edit interface of the question', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnCancelButtonInDeleteImagePopup();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.dialogBox(), 'notExist');
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.uploadedFileNameLabel(), 'sample1.jpg');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.canvasImage(), 'visible');
+        });
+
+        it('When user clicks on \'Delete image\' button, then popup should close and image inside the canvas should be deleted', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.deleteImage();
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnDeleteButtonInDeleteImagePopup();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.dialogBox(), 'notExist');
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.noFileChosenLabel(), 'No file chosen');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasImageNotExist();
+        });
+
+        it('When user has deleted image, then error message \'Error:Image is required\' should be displayed below \'Upload\' button', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.errorMessage(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.errorMessage(), 'Error: Image is required.');
+        });
+    });
+
+    describe('Image properties section - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyFileNameLabel('highlightImage.jpg');
+        });
+
+        it('\'Image properties\' label should be displayed.', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.imagePropertiesLabel(), 'Image properties');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.imagePropertiesLabel(), 'visible');
+        });
+
+        it('\'Fill image to canvas\' label and checkbox should be displayed and checkbox should be unchecked by default', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.fillImageToCanvasLabel(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.fillImageToCanvasLabel(), 'Fill image to canvas');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.fillImageToCanvasCheckbox(), 'exist');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyFillImageToCanvasCheckboxUnchecked();
+        });
+
+        it('User should be able to check \'Fill image to canvas\' checkbox', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.checkFillImageToCanvasCheckbox();
+        });
+
+        it('\'Image alignment\' label should be displayed. ', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.imageAlignmentLabel(), 'Image alignment');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.imageAlignmentLabel(), 'visible');
+        });
+
+        it(`\'Image alignment\' section should have three options ${alignmentOptions} and ${alignmentOptions[0]} should be active selection by default`, () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.topLeftAlignmentButton(), 'Top left');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.topLeftAlignmentButton(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.centerAlignmentButton(), 'Center');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.centerAlignmentButton(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.topRightAlignmentButton(), 'Top right');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.topRightAlignmentButton(), 'visible');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasImageTopLeftAligned();
+        });
+
+        it('\'Opacity\' label, slider and input field should be displayed. \'Opacity\' slider and input field should be set to 100 percent by default', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDefaultOpacityLabelSliderAndInputField();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacitySliderValue(100);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacityInputFieldValue(100);
+        });
+
+        it('The maximum value of \'Opacity\' slider should be 100', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyMaxOpacitySliderValue();
+        });
+
+        it('When the user changes the opacity slider value, value in the opacity input field should also change', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnOpacitySlider();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacitySliderValue(50);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacityInputFieldValue(50);
+        });
+
+        it('When the user changes value in the opacity input field, the slider value should also change accordingly', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.enterInputToOpacityInputField(85);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacityInputFieldValue(85);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacitySliderValue(85);
+        });
+
+        it('CSS of \'Opacity\' Section in Edit tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.opacityLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.opacityInputField(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.opacitySlider(), {
+                'color': css.color.activeButtons,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of opacity section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.opacityLabel().parents('.MuiGrid-root'));
+        });
+
+        it('\'Image alternative text\' label and input field should be displayed. By default input field should be empty', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.imageAlternativeTextLabel(), 'Image alternative text');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.imageAlternativeTextLabel(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.imageAlternativeTextInputField(), '');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.imageAlternativeTextInputField(), 'exist');
+        });
+
+        it('User should be able to enter text in \'Image alternative text\' input field', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.enterAndVerifyImageAlternativeTextInInputField('Image description');
+        });
+
+        it('\'Lock aspect ratio\' and \'Reset dimensions\' buttons should be displayed and by default \'Lock aspect ratio\' button should be locked', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.lockAspectRatioButton(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.resetDimensionsButton(), 'visible');
+        });
+    });
+
+    describe('Image properties section - Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyFileNameLabel('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+        });
+
+        it('When \'Top left\' image alignment is selected by default, then image should be aligned to top left inside the canvas', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasImageTopLeftAligned();
+        });
+
+        it('When user selects \'Center\' image alignment, then image should be aligned to center inside the canvas', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.selectCenterImageAlignment();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasImageCenterAligned();
+        });
+
+        it('When user selects \'Top right\' image alignment, then image should be aligned to top right inside the canvas', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.selectTopRightImageAlignment();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasImageTopRightAligned();
+        });
+
+        it('When user selects \'Top left\' image alignment again, then image should be aligned to top left inside the canvas', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.selectTopLeftImageAlignment();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasImageTopLeftAligned();
+        });
+
+        it('When opacity value is set to 100 percent by default, then opacity for image should be100 percent inside canvas', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacityValueForCanvasImage(100);
+        });
+
+        it('When user changes opacity slider value , then opacity for image should be updated accordingly', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnOpacitySlider();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacityValueForCanvasImage(50);
+        });
+
+        it('When user changes opacity value in input field, then opacity for image should be updated accordingly', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.enterInputToOpacityInputField(40);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacityInputFieldValue(40);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacityValueForCanvasImage(40);
+        });
+
+        it('When user checks \'Fill image to canvas\' checkbox, then image should be adjusted to fit inside the canvas', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.checkFillImageToCanvasCheckbox();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageFitsToCanvas();
+        });
+
+        // Failed due to https://redmine.zeuslearning.com/issues/556897
+        it('When user unchecks \'Fill image to canvas\' checkbox, then image dimensions should set to default state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.uncheckFillImageToCanvasCheckbox();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageDoesNotFitToCanvas();
+        });
+    });
+
+    describe('Canvas width, Canvas height, Image alternative text - Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyFileNameLabel('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+        });
+
+        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', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.unlockAspectRatio();
+            fillInTheGapsOverImageDragAndDropPage.steps.updateCanvasWidth(500);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasWidth(500);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasHeight(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', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.updateCanvasHeight(500);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasHeight(500);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasWidth(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', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.lockAspectRatio();
+            fillInTheGapsOverImageDragAndDropPage.steps.updateCanvasWidth(600);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasHeight(600);
+        });
+
+        it('When user selects the \'Reset dimensions\' button the height and width should reset to the original values', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.resetDimensions();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasWidth(768);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasHeight(432);
+        });
+
+        it('When user enters text in the \'Alternative text\' input field, then alternative text should be displayed for canvas image', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.enterAndVerifyImageAlternativeTextInInputField('This is Alternative text for image');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageAlternativeTextPresentInEditTab('This is Alternative text for image');
+        });
+
+        it('When user clears text in the \'Alternative text\' input field, then alternative text should not be displayed for canvas image', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clearImageAlternativeTextInputFieldText();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyNoImageAlternativeTextPresentInEditTab();
+        });
+    });
+
+    describe('Image properties, Image alignment, Opacity section - Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyFileNameLabel('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+        });
+
+        it('When \'Top left\' image alignment is selected by default, then in preview tab canvas image should be aligned to top left', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploadedInPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasImageTopLeftAlignedInPreviewTab();
+        });
+
+        it('When user selects \'Center\' image alignment in edit tab, then canvas image should be aligned to center in preview tab ', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectCenterImageAlignment();
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasImageCenterAlignedInPreviewTab();
+        });
+
+        it('When user selects \'Top right\' image alignment, then canvas image should be aligned to top right in preview tab', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectTopRightImageAlignment();
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.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', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectTopLeftImageAlignment();
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasImageTopLeftAlignedInPreviewTab();
+        });
+
+        it('When opacity is 100 percent by default, then canvas image should have 100 percent opacity in preview tab ', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacityValueForCanvasImageInPreviewTab(100);
+        });
+
+        it('When user changes opacity slider value in edit tab, then opacity for canvas image should change accordingly in preview tab ', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnOpacitySlider();
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.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 ', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.enterInputToOpacityInputField(40);
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.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', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.checkFillImageToCanvasCheckbox(); fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageFitsToCanvasInPreviewTab();
+        });
+
+        // Failed due to https://redmine.zeuslearning.com/issues/556897
+        it('When user unchecks \'Fill image to canvas\' checkbox, then image dimensions should set to default state in preview tab', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.uncheckFillImageToCanvasCheckbox();
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageDoesNotFitToCanvas();
+        });
+    });
+
+    describe('Canvas width, Canvas height, Image alternative text - Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyFileNameLabel('highlightImage.jpg');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.uploadImageProgressBar(), 'visible');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+        });
+
+        it('When the user has uploaded canvas image, then switching to the preview tab should display canvas image with same dimensions', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploadedInPreviewTab();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.canvasImage(), 'visible');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasWidthInPreviewTab(768);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasHeightInPreviewTab(432);
+        });
+
+        it('When user updates width and height in edit tab, then updated changes should be reflected in preview tab', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.unlockAspectRatio();
+            fillInTheGapsOverImageDragAndDropPage.steps.updateCanvasWidth(500);
+            fillInTheGapsOverImageDragAndDropPage.steps.updateCanvasHeight(500);
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasWidthInPreviewTab(500);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasHeightInPreviewTab(500);
+        });
+
+        it('When user resets image dimensions in edit tab, then updated changes should be reflected in preview tab', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.resetDimensions();
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasWidthInPreviewTab(768);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasHeightInPreviewTab(432);
+        });
+
+        it('When user enters text in the \'Alternative text\' input field, then alternative text should be displayed in the \'Preview tab\'', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.enterAndVerifyImageAlternativeTextInInputField('This is Alternative text for image');
+            cy.log('Switching to Preview Tab');
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageAlternativeTextInPreviewTab('This is Alternative text for image');
+        });
+
+        it('When user clears text in the \'Alternative text\' input field, then alternative text should not be displayed in the \'Preview tab\'', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.clearImageAlternativeTextInputFieldText();
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyNoImageAlternativeTextPresentInPreviewTab();
+        });
+
+        it('When user deletes the uploaded image file in edit tab, then canvas image should not appear in preview tab', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.deleteImage();
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnDeleteButtonInDeleteImagePopup();
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.canvasImage(), 'notExist');
+        });
+    });
+});