itemengine-cypress-automation 1.0.154 → 1.0.155

package/cypress/e2e/ILC/GridFill/customizeLayoutFillImageBackgroundImage.js

@@ -0,0 +1,669 @@
+import { gridFillPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+import { gridFillColorProperties } from "../../../fixtures/fillColorDefaultProperties";
+const css = Cypress.env('css');
+
+describe('Create item page - Grid fill: Customize layout section - \'Fill Image\' and \'Background image\'', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('\'Fill Image\' - Contents and edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            gridFillPage.steps.navigateToCreateQuestion('grid fill');
+            cy.barsPreLoaderWait();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+        });
+
+        it('User should be able to select \'Image\' radio button', () => {
+            gridFillPage.steps.selectImageRadioButton();
+        });
+
+        it(`\'Customize highlight properties\' accordion should have \'Default\' section with ${gridFillColorProperties['default'].displayName} label, fill color label, border color label, hex colors and opacity with color blocks`, () => {
+            utilities.verifyInnerText(gridFillPage.defaultLabel(), gridFillColorProperties['default'].displayName);
+            utilities.verifyInnerText(gridFillPage.defaultFillColorLabel(), 'Fill color');
+            utilities.verifyInnerText(gridFillPage.defaultBorderColorLabel(), 'Border color');
+            utilities.verifyInnerText(gridFillPage.defaultFillColorHexCodeLabel(), gridFillColorProperties.default.colorProperties.fillColorHexValue);
+            utilities.verifyInnerText(gridFillPage.defaultBorderColorHexCodeLabel(), gridFillColorProperties.default.colorProperties.borderColorHexValue);
+            utilities.verifyInnerText(gridFillPage.defaultFillColorOpacityLabel(), `${gridFillColorProperties.default.colorProperties.fillColorOpacity}%`);
+            utilities.verifyInnerText(gridFillPage.defaultBorderColorOpacityLabel(), `${gridFillColorProperties.default.colorProperties.borderColorOpacity}%`);
+            utilities.verifyElementVisibilityState(gridFillPage.defaultFillColorBlock(), 'visible');
+            gridFillPage.steps.verifyDefaultFillColorBlockColor(gridFillColorProperties.default.colorProperties.fillColorRgbaValue);
+            utilities.verifyElementVisibilityState(gridFillPage.defaultBorderColorBlock(), 'visible');
+            gridFillPage.steps.verifyDefaultBorderColorBlockColor(gridFillColorProperties.default.colorProperties.borderColorRgbValue);
+        });
+
+        it(`\'Customize highlight properties\' accordion should have \'Hover\' section with ${gridFillColorProperties['hover'].displayName} label, fill color label, border color label, hex colors and opacity with color blocks`, () => {
+            utilities.verifyInnerText(gridFillPage.hoverLabel(), gridFillColorProperties['hover'].displayName);
+            utilities.verifyInnerText(gridFillPage.hoverFillColorLabel(), 'Fill color');
+            utilities.verifyInnerText(gridFillPage.hoverBorderColorLabel(), 'Border color');
+            utilities.verifyInnerText(gridFillPage.hoverFillColorHexCodeLabel(), gridFillColorProperties.hover.colorProperties.fillColorHexValue);
+            utilities.verifyInnerText(gridFillPage.hoverBorderColorHexCodeLabel(), gridFillColorProperties.hover.colorProperties.borderColorHexValue);
+            utilities.verifyInnerText(gridFillPage.hoverFillColorOpacityLabel(), `${gridFillColorProperties.hover.colorProperties.fillColorOpacity}%`);
+            utilities.verifyInnerText(gridFillPage.hoverBorderColorOpacityLabel(), `${gridFillColorProperties.hover.colorProperties.borderColorOpacity}%`);
+            utilities.verifyElementVisibilityState(gridFillPage.hoverFillColorBlock(), 'visible');
+            gridFillPage.steps.verifyHoverFillColorBlockColor(gridFillColorProperties.hover.colorProperties.fillColorRgbaValue);
+            utilities.verifyElementVisibilityState(gridFillPage.hoverBorderColorBlock(), 'visible');
+            gridFillPage.steps.verifyHoverBorderColorBlockColor(gridFillColorProperties.hover.colorProperties.borderColorRgbValue);
+        });
+
+        it(`\'Customize highlight properties\' accordion should have \'Filled\' section with ${gridFillColorProperties['filled'].displayName} label, border color label, hex colors and opacity with color blocks`, () => {
+            utilities.verifyInnerText(gridFillPage.filledLabel(), gridFillColorProperties['filled'].displayName);
+            utilities.verifyInnerText(gridFillPage.filledBorderColorLabel(), 'Border color');
+            utilities.verifyInnerText(gridFillPage.filledBorderColorHexCodeLabel(), gridFillColorProperties.filled.colorProperties.borderColorHexValue);
+            utilities.verifyInnerText(gridFillPage.filledBorderColorOpacityLabel(), `${gridFillColorProperties.filled.colorProperties.borderColorOpacity}%`);
+            utilities.verifyElementVisibilityState(gridFillPage.filledBorderColorBlock(), 'visible');
+            gridFillPage.steps.verifyFilledBorderColorBlockColor(gridFillColorProperties.filled.colorProperties.borderColorRgbValue);
+            utilities.verifyElementCount(gridFillPage.colorBlock(), 5);
+        });
+
+        it('\'Filled image\' label should be visible', () => {
+            utilities.verifyInnerText(gridFillPage.filledImageLabel(), 'Filled image');
+        });
+
+        it('\'Upload\' label and \'Choose file\' button should be displayed', () => {
+            utilities.verifyInnerText(gridFillPage.filledImageUploadLabel(), 'Upload');
+            utilities.verifyElementVisibilityState(gridFillPage.filledImageUploadLabel(), 'visible');
+            utilities.verifyInnerText(gridFillPage.filledImageChooseFileButton(), 'Choose file');
+            utilities.verifyElementVisibilityState(gridFillPage.filledImageChooseFileButton(), '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(gridFillPage.filledImageFileNameLabel(), 'File name');
+            utilities.verifyElementVisibilityState(gridFillPage.filledImageFileNameLabel(), 'visible');
+            utilities.verifyInnerText(gridFillPage.filledImageNoFileChosenLabel(), 'No file chosen');
+            utilities.verifyElementVisibilityState(gridFillPage.filledImageNoFileChosenLabel(), 'visible');
+        });
+
+        it('CSS of upload section', { tags: 'css' }, () => {
+            utilities.verifyCSS(gridFillPage.filledImageUploadLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(gridFillPage.filledImageChooseFileButton(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'border-bottom-color': css.color.titleContainerBorder
+            });
+            utilities.verifyCSS(gridFillPage.filledImageFileNameLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(gridFillPage.filledImageNoFileChosenLabel(), {
+                '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(gridFillPage.filledImageUploadLabel().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', () => {
+            gridFillPage.steps.uploadFilledImageFile('highlightImage.jpg');
+            utilities.verifyElementVisibilityState(gridFillPage.uploadImageProgressBar(), 'visible');
+            gridFillPage.steps.verifyFilledImageFileNameLabel('highlightImage.jpg');
+        });
+
+        it('Delete button should appear beside uploaded file\'s name', () => {
+            utilities.verifyElementVisibilityState(gridFillPage.filledImageDeleteImageButton(), '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', () => {
+            gridFillPage.steps.uploadFilledImageFile('sample1.jpg');
+            gridFillPage.steps.verifyFilledImageFileNameLabel('sample1.jpg');
+        });
+
+        it('\'Alt text\' label and empty input field should be displayed besides the uploaded image and user should be able to give a text input in it', () => {
+            utilities.verifyInnerText(gridFillPage.filledImageAltTextLabel(), 'Alt text');
+            utilities.verifyElementVisibilityState(gridFillPage.filledImageAltTextLabel(), 'visible');
+            utilities.verifyElementVisibilityState(gridFillPage.filledImageAltTextInputField(), 'visible');
+            utilities.verifyInputFieldValue(gridFillPage.filledImageAltTextInputField(), '');
+            gridFillPage.steps.addInputToFilledImageAltTextInputField('Filled image alternative text');
+        });
+
+        it('When user has uploaded a filled image and then shades a cell in customize layout section, then the shaded cell should be filled with the provided image', () => {
+            gridFillPage.steps.shadeCell(0, 0);
+            gridFillPage.steps.verifyFilledImageInShadedCellInCustomizeLayoutGrid(0, 0);
+        });
+
+        it('When user had added input in alt text input field for filled image, then the shaded cell\'s filled image should have the provided alternative text', () => {
+            gridFillPage.steps.verifyFilledImageAltTextInShadedCellInCustomizeLayoutGrid(0, 0, 'Filled image alternative text');
+        });
+
+        it('When user has uploaded a filled image and then selects a cell in specify correct answer section, then the selected cell should be filled with the provided image', () => {
+            gridFillPage.steps.selectCellSpecifyCorrectAnswerSection(0, 0);
+            gridFillPage.steps.verifyFilledImageInShadedCellInSpecifyCorrectAnswerGrid(0, 0);
+        });
+
+        it('When user had added input in alt text input field for filled image, then the selected cell\'s filled image should have the provided alternative text', () => {
+            gridFillPage.steps.verifyFilledImageAltTextInShadedCellInSpecifyCorrectAnswerGrid(0, 0, 'Filled image alternative text');
+        });
+
+        it('When user clears the filled image alt text input field, then the shaded cell\'s filled image should not have alternative text', () => {
+            gridFillPage.steps.clearFilledImageAltTextInputField();
+            gridFillPage.steps.verifyFilledImageAltTextInShadedCellInCustomizeLayoutGrid(0, 0, '');
+            gridFillPage.steps.verifyFilledImageAltTextInShadedCellInSpecifyCorrectAnswerGrid(0, 0, '');
+        });
+
+        it('When the user hovers on \'Delete\' button, \'Delete image\' text should be displayed in tooltip', () => {
+            gridFillPage.filledImageDeleteImageButton()
+                .verifyTooltip('Delete image');
+        });
+
+        it('CSS of tooltip', { tags: 'css' }, () => {
+            utilities.hoverOverElement(gridFillPage.filledImageDeleteImageButton());
+            utilities.verifyCSS(gridFillPage.tooltipText(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.tooltipBg
+            });
+            utilities.hoverAwayFromElement(gridFillPage.filledImageDeleteImageButton());
+        });
+
+        it('When user clicks on the \'Delete\' button, then \'Delete\' popup should be displayed', () => {
+            gridFillPage.steps.deleteFilledImage();
+            utilities.verifyElementVisibilityState(gridFillPage.dialogBox(), 'visible');
+            utilities.verifyInnerText(gridFillPage.dialogBoxTitle(), 'Delete');
+        });
+
+        it('The pop up should be displayed with the message \'Are you sure you want to delete the image?\'', () => {
+            utilities.verifyInnerText(gridFillPage.dialogBoxContent(), 'Are you sure you want to delete the image?');
+            utilities.verifyInnerText(gridFillPage.deleteImagePopupButtonDelete(), 'Delete image');
+            utilities.verifyInnerText(gridFillPage.deleteImagePopupButtonCancel(), 'Cancel');
+        });
+
+        it('CSS of popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(gridFillPage.dialogBox(), {
+                'background-color': css.color.defaultBackground,
+            });
+            utilities.verifyCSS(gridFillPage.dialogBoxContent().find('[class*="DeletePopupWrapper"]'), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(gridFillPage.deleteImagePopupButtonDelete(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(gridFillPage.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', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(gridFillPage.dialogBox());
+        });
+
+        it('When user clicks on \'Cancel\' button, then popup should close and user should remain on the edit interface of the question', () => {
+            gridFillPage.steps.clickOnCancelButtonInDeleteImagePopup();
+            utilities.verifyElementVisibilityState(gridFillPage.dialogBox(), 'notExist');
+            utilities.verifyInnerText(gridFillPage.uploadedFileNameLabel(), 'sample1.jpg');
+        });
+
+        it('When user clicks on \'Delete image\' button, then popup should close and image should be deleted', () => {
+            gridFillPage.steps.deleteFilledImage();
+            gridFillPage.steps.clickOnDeleteButtonInDeleteImagePopup();
+            utilities.verifyElementVisibilityState(gridFillPage.dialogBox(), 'notExist');
+            utilities.verifyInnerText(gridFillPage.filledImageNoFileChosenLabel(), 'No file chosen');
+        });
+
+        it('When user has deleted the uploaded filled image, then the shaded/selected cells in edit tab grids should not have a filled image', () => {
+            gridFillPage.steps.verifyFilledImageNotDisplayedInCellInCustomizeLayoutGrid(0, 0);
+            gridFillPage.steps.verifyFilledImageNotDisplayedInCellInSpecifyCorrectAnswerGrid(0, 0);
+        });
+
+        it('CSS of uploaded file name and Alt text section', { tags: 'css' }, () => {
+            utilities.verifyCSS(gridFillPage.uploadedFileNameLabel().find('[class*="UploadImagestyles__SelectedFile"]'), {
+                'color': css.color.uploadedFileName,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(gridFillPage.filledImageAltTextLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(gridFillPage.filledImageAltTextInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.defaultBackground
+            });
+        });
+
+        it('Accessibility of  Upload section before uploading image', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(gridFillPage.filledImageUploadLabel().parents('.edit-question-edit-tab-wrapper'));
+        });
+    });
+
+    describe('\'Fill Image\' - preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            gridFillPage.steps.navigateToCreateQuestion('grid fill');
+            cy.barsPreLoaderWait();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+            gridFillPage.steps.selectImageRadioButton();
+            gridFillPage.steps.uploadFilledImageFile('highlightImage.jpg');
+            gridFillPage.steps.switchToPreviewTab();
+        });
+
+        it('When user has uploaded a filled image and selects a cell in preview tab, then the selected cell in preview tab should be  filled with the provided image', () => {
+            gridFillPage.steps.selectCellPreviewTab(0, 0);
+            gridFillPage.steps.verifyFilledImageInSelectedCellInPreviewTabGrid(0, 0);
+        });
+
+        it('When user has added input in alt text input field for filled image, then the filled image in selected cell in preview tab should have the provided alternative text', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.addInputToFilledImageAltTextInputField('Filled image alternative text');
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.selectCellPreviewTab(0, 0);
+            gridFillPage.steps.verifyFilledImageAltTextInShadedCellInPreviewTabGrid(0, 0, 'Filled image alternative text');
+        });
+
+        it('When user clears the filled image alt text input field, then the filled image in selected cell in preview tab should not have alternative text', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.clearFilledImageAltTextInputField();
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.selectCellPreviewTab(0, 0);
+            gridFillPage.steps.verifyFilledImageAltTextInShadedCellInPreviewTabGrid(0, 0, '');
+        });
+
+        it('When user has deleted the uploaded filled image, then the selected cell in preview tab grid should not have a filled image', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.deleteFilledImage();
+            gridFillPage.steps.clickOnDeleteButtonInDeleteImagePopup();
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.selectCellPreviewTab(0, 0);
+            gridFillPage.steps.verifyFilledImageNotDisplayedInCellInPreviewTabGrid(0, 0);
+        });
+    });
+
+    describe('\'Background image\' - Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            gridFillPage.steps.navigateToCreateQuestion('grid fill');
+            cy.barsPreLoaderWait();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+        });
+
+        gridFillPage.tests.verifyBackgroundImageSectionContentWithCSSAndA11y('grid fill');
+
+        it('When user has uploaded an image as background, then the image should be displayed as background in grids in edit tab', () => {
+            gridFillPage.steps.verifyBackgroundImageIsDisplayedInEditTabGrids();
+        });
+
+        gridFillPage.tests.verifyDeleteImagePopupContentAndFunctionality();
+
+        it('When user has deleted the uploaded background image, then the image should not be displayed as background in grids in edit tab', () => {
+            gridFillPage.steps.verifyBackgroundImageIsNotDisplayedInEditTabGrids();
+        });
+    });
+
+    describe('\'Background image\' - Image properties section edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            gridFillPage.steps.navigateToCreateQuestion('grid fill');
+            cy.barsPreLoaderWait();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+            gridFillPage.steps.uploadFile('highlightImage.jpg');
+            gridFillPage.steps.verifyFileNameLabel('highlightImage.jpg');
+        });
+
+        it('\'Image properties\' label should be displayed.', () => {
+            utilities.verifyInnerText(gridFillPage.imagePropertiesLabel(), 'Image properties');
+            utilities.verifyElementVisibilityState(gridFillPage.imagePropertiesLabel(), 'visible');
+        });
+
+        it('\'Fill image to grid\' label and checkbox should be displayed and checkbox should be checked by default', () => {
+            utilities.verifyElementVisibilityState(gridFillPage.fillImageToGridCheckboxLabel(), 'visible');
+            utilities.verifyInnerText(gridFillPage.fillImageToGridCheckboxLabel(), 'Fill image to grid');
+            utilities.verifyElementVisibilityState(gridFillPage.fillImageToGridCheckbox(), 'exist');
+            gridFillPage.steps.verifyFillImageToGridCheckboxIsChecked();
+        });
+
+        it('User should be able to uncheck \'Fill image to grid\' checkbox', () => {
+            gridFillPage.steps.uncheckFillImageToGridCheckbox();
+        });
+
+        it('\'Lock aspect ratio\' and \'Reset dimensions\' buttons should be displayed and by default \'Lock aspect ratio\' button should be locked', () => {
+            utilities.verifyElementVisibilityState(gridFillPage.lockAspectRatioButton(), 'visible');
+            utilities.verifyElementVisibilityState(gridFillPage.resetDimensionsButton(), 'visible');
+        });
+
+        it('\'Image alignment\' label should be displayed. ', () => {
+            utilities.verifyInnerText(gridFillPage.imageAlignmentLabel(), 'Image alignment');
+            utilities.verifyElementVisibilityState(gridFillPage.imageAlignmentLabel(), 'visible');
+        });
+
+        it(`\'Image alignment\' section should have three options 'Top left', 'Center', 'Top right' and 'Top left' should be active selection by default`, () => {
+            utilities.verifyInnerText(gridFillPage.topLeftAlignmentButton(), 'Top left');
+            utilities.verifyElementVisibilityState(gridFillPage.topLeftAlignmentButton(), 'visible');
+            utilities.verifyInnerText(gridFillPage.centerAlignmentButton(), 'Center');
+            utilities.verifyElementVisibilityState(gridFillPage.centerAlignmentButton(), 'visible');
+            utilities.verifyInnerText(gridFillPage.topRightAlignmentButton(), 'Top right');
+            utilities.verifyElementVisibilityState(gridFillPage.topRightAlignmentButton(), 'visible');
+        });
+
+        it('\'Image alternative text\' label and input field should be displayed. By default input field should be empty', () => {
+            utilities.verifyInnerText(gridFillPage.backgroundImageAlternativeTextLabel(), 'Alt text');
+            utilities.verifyElementVisibilityState(gridFillPage.backgroundImageAlternativeTextLabel(), 'visible');
+            utilities.verifyInnerText(gridFillPage.backgroundImageAlternativeTextInputField(), '');
+            utilities.verifyElementVisibilityState(gridFillPage.backgroundImageAlternativeTextInputField(), 'exist');
+        });
+
+        it('User should be able to enter text in \'Image alternative text\' input field', () => {
+            gridFillPage.steps.addInputToBackgroundImageAltTextInputField('Background image description');
+        });
+    });
+
+    describe('Image alignment, Opacity section and \'Fill image to grid\' checkbox - edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            gridFillPage.steps.navigateToCreateQuestion('grid fill');
+            cy.barsPreLoaderWait();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+            gridFillPage.steps.uploadFile('highlightImage.jpg');
+            gridFillPage.steps.verifyFileNameLabel('highlightImage.jpg');
+        });
+
+        it('When \'Top left\' image alignment is selected by default, then image should be aligned to top left inside the edit tab grids', () => {
+            gridFillPage.steps.verifyImageIsTopLeftAlignedInEditTabGrids();
+        });
+
+        it('When user selects \'Center\' image alignment, then image should be aligned to center inside the the edit tab grids', () => {
+            gridFillPage.steps.selectCenterImageAlignment();
+            gridFillPage.steps.verifyImageIsCenterAlignedInEditTabGrids();
+        });
+
+        it('When user selects \'Top right\' image alignment, then image should be aligned to top right inside the the edit tab grids', () => {
+            gridFillPage.steps.selectTopRightImageAlignment();
+            gridFillPage.steps.verifyImageIsTopRightAlignedInEditTabGrids();
+        });
+
+        it('When user selects \'Top left\' image alignment again, then image should be aligned to top left inside the the edit tab grids', () => {
+            gridFillPage.steps.selectTopLeftImageAlignment();
+            gridFillPage.steps.verifyImageIsTopLeftAlignedInEditTabGrids();
+        });
+
+        it('When opacity value is set to 100 percent by default, then opacity for image should be100 percent inside edit tab grids', () => {
+            gridFillPage.steps.verifyOpacityValueForGridImagesInEditTab('1');
+        });
+
+        it('When user changes opacity slider value , then opacity for image should be updated accordingly', () => {
+            gridFillPage.steps.clickActionOnOpacitySlider();
+            gridFillPage.steps.verifyOpacityValueForGridImagesInEditTab('0.5');
+        });
+
+        it('When user changes opacity value in input field, then opacity for image should be updated accordingly', () => {
+            gridFillPage.steps.enterInputToOpacityInputField(40);
+            gridFillPage.steps.verifyOpacityValueForGridImagesInEditTab('0.4');
+        });
+
+        it('When \'Fill image to grid\' checkbox is checked, then image should be adjusted to fit inside the grid', () => {
+            gridFillPage.steps.verifyImageFitsToGridInEditTab();
+        });
+
+        it('When user unchecks \'Fill image to grid\' checkbox, then image dimensions should set to default state', () => {
+            gridFillPage.steps.uncheckFillImageToGridCheckbox();
+            gridFillPage.steps.verifyDefaultImageInGridInEditTab();
+        });
+    });
+
+    describe('Image width, Image height, Image alternative text -  Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            gridFillPage.steps.navigateToCreateQuestion('grid fill');
+            cy.barsPreLoaderWait();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+            gridFillPage.steps.uploadFile('highlightImage.jpg');
+            gridFillPage.steps.verifyFileNameLabel('highlightImage.jpg');
+            gridFillPage.steps.uncheckFillImageToGridCheckbox();
+        });
+
+        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 grid', () => {
+            gridFillPage.steps.unlockAspectRatio();
+            gridFillPage.steps.updateCanvasWidth(100);
+            gridFillPage.steps.verifyGridBackgroundImageDimensionsInEditTab('100px', '500px');
+        });
+
+        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 grid', () => {
+            gridFillPage.steps.updateCanvasHeight(120);
+            gridFillPage.steps.verifyGridBackgroundImageDimensionsInEditTab('100px', '120px');
+        });
+
+        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', () => {
+            gridFillPage.steps.lockAspectRatio();
+            gridFillPage.steps.updateCanvasWidth(150);
+            gridFillPage.steps.verifyGridBackgroundImageDimensionsInEditTab('120px', '150px');
+        });
+
+        it('When user selects the \'Reset dimensions\' button the height and width should reset to the original values', () => {
+            gridFillPage.steps.resetDimensions();
+            gridFillPage.steps.verifyDefaultImageInGridInEditTab();
+            utilities.verifyInputFieldValue(gridFillPage.canvasWidthInputField(), 500);
+            utilities.verifyInputFieldValue(gridFillPage.canvasHeightInputField(), 500);
+        });
+
+        it('When user adds input in alt text input field for background image, then the grid background image in edit tab should have the provided alternative text', () => {
+            gridFillPage.steps.addInputToBackgroundImageAltTextInputField('Background image alternative text');
+            gridFillPage.steps.verifyBackgroundImageAltTextInEditTabGrids('Background image alternative text');
+        });
+
+        it('When user clears the background image alt text input field, then the grid background image in edit tab should not have alternative text', () => {
+            gridFillPage.steps.clearBackgroundImageAltTextInputField();
+            gridFillPage.steps.verifyBackgroundImageAltTextNotPresentInEditTabGrids('');
+        });
+    });
+
+    describe('\'Background image\' - preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            gridFillPage.steps.navigateToCreateQuestion('grid fill');
+            cy.barsPreLoaderWait();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+            gridFillPage.steps.uploadFile('highlightImage.jpg');
+            gridFillPage.steps.verifyFileNameLabel('highlightImage.jpg');
+            gridFillPage.steps.switchToPreviewTab();
+        });
+
+        it('When user has uploaded an image as background, then the image should be displayed as background in grids in preview tab', () => {
+            gridFillPage.steps.verifyBackgroundImageIsDisplayedInPreviewTabGrid();
+        });
+
+        it('When user has deleted the uploaded background image, then the image should not be displayed as background in grid in preview tab', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.deleteImage();
+            gridFillPage.steps.clickOnDeleteButtonInDeleteImagePopup();
+            utilities.verifyElementVisibilityState(gridFillPage.dialogBox(), 'notExist');
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.verifyBackgroundImageIsNotDisplayedInPreviewTabGrid();
+        });
+    });
+
+    describe('Image alignment, Opacity section and \'Fill image to grid\' checkbox - preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            gridFillPage.steps.navigateToCreateQuestion('grid fill');
+            cy.barsPreLoaderWait();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+            gridFillPage.steps.uploadFile('highlightImage.jpg');
+            gridFillPage.steps.verifyFileNameLabel('highlightImage.jpg');
+            gridFillPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Top left\' image alignment is selected by default, then image should be aligned to top left inside the preview tab grid', () => {
+            gridFillPage.steps.verifyImageIsTopLeftAlignedInPreviewTabGrid();
+        });
+
+        it('When user selects \'Center\' image alignment, then image should be aligned to center inside the the preview tab grid', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.selectCenterImageAlignment();
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.verifyImageIsCenterAlignedInPreviewTabGrid();
+        });
+
+        it('When user selects \'Top right\' image alignment, then image should be aligned to top right inside the the preview tab grid', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.selectTopRightImageAlignment();
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.verifyImageIsTopRightAlignedInPreviewTabGrid();
+        });
+
+        it('When user selects \'Top left\' image alignment again, then image should be aligned to top left inside the the edit tab grids', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.selectTopLeftImageAlignment();
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.verifyImageIsTopLeftAlignedInPreviewTabGrid();
+        });
+
+        it('When opacity value is set to 100 percent by default, then opacity for image should be 100 percent inside preview tab grid', () => {
+            gridFillPage.steps.verifyOpacityValueForGridImageInPreviewTab('1');
+        });
+
+        it('When user changes opacity slider value, then opacity for image should be updated accordingly', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.clickActionOnOpacitySlider();
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.verifyOpacityValueForGridImageInPreviewTab('0.5');
+        });
+
+        it('When user changes opacity value in input field, then opacity for image should be updated accordingly', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.enterInputToOpacityInputField(40);
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.verifyOpacityValueForGridImageInPreviewTab('0.4');
+        });
+
+        it('When \'Fill image to grid\' checkbox is checked, then image should be adjusted to fit inside the preview tab grid', () => {
+            gridFillPage.steps.verifyImageFitsToGridInPreviewTab();
+        });
+
+        it('When user unchecks \'Fill image to grid\' checkbox, then image dimensions should set to default state', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.uncheckFillImageToGridCheckbox();
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.verifyDefaultImageInGridInPreviewTab();
+        });
+    });
+
+    describe('Image width, Image height, Image alternative text - preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            gridFillPage.steps.navigateToCreateQuestion('grid fill');
+            cy.barsPreLoaderWait();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+            gridFillPage.steps.uploadFile('highlightImage.jpg');
+            gridFillPage.steps.verifyFileNameLabel('highlightImage.jpg');
+            gridFillPage.steps.uncheckFillImageToGridCheckbox();
+        });
+
+        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 grid', () => {
+            gridFillPage.steps.unlockAspectRatio();
+            gridFillPage.steps.updateCanvasWidth(100);
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.verifyGridBackgroundImageDimensionsInPreviewTab('100px', '500px');
+        });
+
+        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 grid', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.updateCanvasHeight(120);
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.verifyGridBackgroundImageDimensionsInPreviewTab('100px', '120px');
+        });
+
+        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', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.lockAspectRatio();
+            gridFillPage.steps.updateCanvasWidth(150);
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.verifyGridBackgroundImageDimensionsInPreviewTab('120px', '150px');
+        });
+
+        it('When user selects the \'Reset dimensions\' button the height and width should reset to the original values', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.resetDimensions();
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.verifyDefaultImageInGridInPreviewTab();
+        });
+
+        it('When user adds input in alt text input field for background image, then the grid background image in preview tab should have the provided alternative text', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.addInputToBackgroundImageAltTextInputField('Background image alternative text');
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.verifyBackgroundImageAltTextInPreviewTabGrids('Background image alternative text');
+        });
+
+        it('When user clears the background image alt text input field, then the grid background image in preview tab should not have alternative text', () => {
+            gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.clearBackgroundImageAltTextInputField();
+            gridFillPage.steps.switchToPreviewTab();
+            gridFillPage.steps.verifyBackgroundImageAltTextNotPresentInEditTabGrids();
+        });
+    });
+
+    describe('Uploading both filled and background image - edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            gridFillPage.steps.navigateToCreateQuestion('grid fill');
+            cy.barsPreLoaderWait();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+            gridFillPage.steps.uploadFile('image.png');
+            gridFillPage.steps.verifyFileNameLabel('image.png');
+            gridFillPage.steps.selectImageRadioButton();
+            gridFillPage.steps.uploadFilledImageFile('highlightImage.jpg');
+            gridFillPage.steps.verifyFilledImageFileNameLabel('highlightImage.jpg');
+            utilities.verifyElementNotDisabled(gridFillPage.deleteImageIcon());
+        });
+
+        it('Uploaded background image should be displayed in the edit tab grids', () => {
+            gridFillPage.steps.verifyBackgroundImageIsDisplayedInEditTabGrids();
+        });
+
+        it('When user shades a cell in customize layout section grid, then the uploaded filled image should be displayed in that cell', () => {
+            gridFillPage.steps.shadeCell(0, 0);
+            gridFillPage.steps.verifyFilledImageInShadedCellInCustomizeLayoutGrid(0, 0);
+        });
+
+        it('When user selects a cell in specify correct answer section grid, then the uploaded filled image should be displayed in that cell', () => {
+            gridFillPage.steps.selectCellSpecifyCorrectAnswerSection(0, 0);
+            gridFillPage.steps.verifyFilledImageInShadedCellInSpecifyCorrectAnswerGrid(0, 0);
+        });
+    });
+
+    describe('Uploading both filled and background image - preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            gridFillPage.steps.navigateToCreateQuestion('grid fill');
+            cy.barsPreLoaderWait();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+            gridFillPage.steps.uploadFile('image.png');
+            gridFillPage.steps.verifyFileNameLabel('image.png');
+            gridFillPage.steps.selectImageRadioButton();
+            gridFillPage.steps.uploadFilledImageFile('highlightImage.jpg');
+            gridFillPage.steps.verifyFilledImageFileNameLabel('highlightImage.jpg');
+            utilities.verifyElementNotDisabled(gridFillPage.deleteImageIcon());
+            gridFillPage.steps.switchToPreviewTab();
+        });
+
+        it('Uploaded background image should be displayed in the preview tab grid', () => {
+            gridFillPage.steps.verifyBackgroundImageIsDisplayedInPreviewTabGrid();
+        });
+
+        it('When user selects a cell in preview tab grid, then the uploaded filled image should be displayed in that cell', () => {
+            gridFillPage.steps.selectCellPreviewTab(0, 0);
+            gridFillPage.steps.verifyFilledImageInSelectedCellInPreviewTabGrid(0, 0);
+        });
+    });
+});