itemengine-cypress-automation 1.0.105 → 1.0.107

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

@@ -3,10 +3,7 @@ import utilities from "../../../support/helpers/utilities";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 const css = Cypress.env('css');
 
-const alignmentOptions = ['Top left', 'Center', 'Top right'];
-const dropzonePointerStyles = ['none', 'bottom', 'bottom right', 'right', 'top right', 'top', 'top left', 'left', 'bottom left'];
-const labels = [fillInTheGapsOverImageDragAndDropPage.selectedColorLabel, fillInTheGapsOverImageDragAndDropPage.hexLabel]
-const inputFields = [fillInTheGapsOverImageDragAndDropPage.hexInputField];
+const dropzonePointerStyles = ['None', 'Bottom', 'Bottom right', 'Right', 'Top right', 'Top', 'Top left', 'Left', 'Bottom left'];
 
 describe('Create item page - Fill in the gaps: Question instructions, Options section', () => {
     before(() => {
@@ -40,143 +37,9 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
             cy.barsPreLoaderWait();
         });
 
-        it('\'Background image\' label should be visible', () => {
-            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.backgroundImageLabel(), 'Background image');
-        })
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyBackgroundImageSectionContentWithCSSAndA11y();
 
-        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');
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
-        });
-
-        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.');
-        });
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyDeleteImagePopupContentAndFunctionality();
     });
 
     describe('Canvas section - Edit tab', () => {
@@ -186,59 +49,30 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
             cy.barsPreLoaderWait();
         });
 
-        it('\'Canvas\' label and canvas should be displayed', () => {
-            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.canvasLabel(), 'Canvas');
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.canvasLabel(), 'visible');
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.canvas(), 'visible');
-        });
-
-        it('When user uploads background image for canvas, then it should be displayed', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
-        });
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyCanvasLabelAndCanvas();
 
         it('Select dropzone, Insert dropzone and Insert text buttons should be displayed.', () => {
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.selectDropzoneButton(), 'visible');
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.insertDropzoneButton(), 'visible');
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.insertTextButton(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.selectResponseAreaButton(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.insertResponseAreaButton(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.insertTextAreaButton(), 'visible');
         });
 
         it('When \'Insert dropzone\' button is selected, then \'Insert dropzone\' label should be displayed inside canvas', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasMenuButtonSelected();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasMenuButtonSelected('Insert dropzone');
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasSelectedMenuText('Insert dropzone');
         });
 
         it('When user hovers over select dropzone button, then \'Select dropzone\' tooltip should be displayed', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyTooltipInnerText(fillInTheGapsOverImageDragAndDropPage.selectDropzoneButton, 'Select dropzone');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyTooltipInnerText(fillInTheGapsOverImageDragAndDropPage.selectResponseAreaButton, 'Select dropzone');
         });
 
         it('When user hovers over insert dropzone button, then \'Insert dropzone\' tooltip should be displayed', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyTooltipInnerText(fillInTheGapsOverImageDragAndDropPage.insertDropzoneButton, 'Insert dropzone');
-        });
-
-        it('When user hovers over insert text button, then \'Insert text\' tooltip should be displayed', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyTooltipInnerText(fillInTheGapsOverImageDragAndDropPage.insertTextButton, 'Insert text');
-        });
-
-        it('Undo, redo and clear all buttons should be displayed', () => {
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.undoButton(), 'visible');
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.redoButton(), 'visible');
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.clearAllButton(), 'visible');
-        });
-
-        it('When user hovers over undo button, then \'Undo\' tooltip should be displayed', () => {
-            utilities.hoverAwayFromElement(fillInTheGapsOverImageDragAndDropPage.canvasSelectedMenuText());
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyTooltipInnerText(fillInTheGapsOverImageDragAndDropPage.undoButton, 'Undo');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyTooltipInnerText(fillInTheGapsOverImageDragAndDropPage.insertResponseAreaButton, 'Insert dropzone');
         });
 
-        it('When user hovers over clear all button, then \'Clear all\' tooltip should be displayed', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyTooltipInnerText(fillInTheGapsOverImageDragAndDropPage.clearAllButton, 'Clear all');
-        });
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyInsertTextTooltip();
 
-        it('When user hovers over redo button, then \'Redo\' tooltip should be displayed', () => {
-            utilities.hoverAwayFromElement(fillInTheGapsOverImageDragAndDropPage.undoButton());
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyTooltipInnerText(fillInTheGapsOverImageDragAndDropPage.redoButton, 'Redo');
-        });
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyUndoRedoClearAllButtons();
     });
 
     describe('Canvas : Insert dropzone, Delete, Undo, Redo - Specify correct answer section', () => {
@@ -257,7 +91,7 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
         });
 
         it('When user deletes a dropzone in canvas, then dropzone should be removed from specify correct answer section and remaining dropzones should be numbered appropriately', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.removeDropzone(1);
+            fillInTheGapsOverImageDragAndDropPage.steps.removeResponseArea(1);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzoneCountInSpecifyCorrectAnswerSection(2);
             for (let i = 0; i < 2; i++) {
                 utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.dropzoneLabelSpecifyCorrectAnswerSection(), i), `Dropzone ${i + 1}`);
@@ -311,40 +145,34 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
         });
 
         it(`When user selects dropzone, then 9 options ${dropzonePointerStyles} should be displayed and by default ${dropzonePointerStyles[7]} should be selected`, () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.selectDropzone(1);
-            utilities.verifyElementCount(fillInTheGapsOverImageDragAndDropPage.dropzoneStyle(), 9);
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzonePointerStyle(dropzonePointerStyles[7], 1);
+            fillInTheGapsOverImageDragAndDropPage.steps.selectResponseArea(1);
+            utilities.verifyElementCount(fillInTheGapsOverImageDragAndDropPage.responseAreaStyle(), 9);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyResponseAreaPointerStyle(dropzonePointerStyles[7], 1);
         });
 
         it('CSS of dropzones', { tags: 'css' }, () => {
-            utilities.verifyCSS(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.dropzone(), 1), {
+            utilities.verifyCSS(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.responseArea(), 1), {
                 'border': `2px solid ${css.color.activeComponentBorder}`
             });
-            utilities.verifyCSS(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.dropzone(), 0), {
+            utilities.verifyCSS(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.responseArea(), 0), {
                 'border': `2px dashed ${css.color.activeComponentBorder}`
             });
         });
 
         it(`When user hovers over the pointer styles, then ${dropzonePointerStyles} tooltip should be displayed`, () => {
-            dropzonePointerStyles.forEach((dropzonePointer, index) => {
-                cy.log('Clicking on canvas Selected Menu Text to hover away from select dropzone button');
-                fillInTheGapsOverImageDragAndDropPage.steps.clickOnCanvasSelectedMenuText();
-                fillInTheGapsOverImageDragAndDropPage.dropzoneStyle()
-                    .eq(index)
-                    .verifyTooltip(dropzonePointer);
-            });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyPointerStyleTooltip();
         });
 
         it(`When the user has selected a dropzone and chooses  ${dropzonePointerStyles[0]}, then selected drop zone should have the specified effect applied, and the other drop zones should remain unaffected.`, () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.selectDropzonePointerStyle(dropzonePointerStyles[0]);
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzonePointerStyle(dropzonePointerStyles[0], 1);
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzonePointerStyle(dropzonePointerStyles[7], 0);
+            fillInTheGapsOverImageDragAndDropPage.steps.selectResponseAreaPointerStyle(dropzonePointerStyles[0]);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyResponseAreaPointerStyle(dropzonePointerStyles[0], 1);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyResponseAreaPointerStyle(dropzonePointerStyles[7], 0);
         });
 
         it(`When the user chooses  ${dropzonePointerStyles[1]}, then selected drop zone should have the specified effect applied, and the other drop zones should remain unaffected.`, () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.selectDropzonePointerStyle(dropzonePointerStyles[1]);
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzonePointerStyle(dropzonePointerStyles[1], 1);
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzonePointerStyle(dropzonePointerStyles[7], 0);
+            fillInTheGapsOverImageDragAndDropPage.steps.selectResponseAreaPointerStyle(dropzonePointerStyles[1]);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyResponseAreaPointerStyle(dropzonePointerStyles[1], 1);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyResponseAreaPointerStyle(dropzonePointerStyles[7], 0);
         });
     });
 
@@ -357,42 +185,9 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
             fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
         });
 
-        it('When user clicks inside canvas, then one dropzone should be added with pointer, close button and numeration.', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(80);
-            utilities.verifyElementCount(fillInTheGapsOverImageDragAndDropPage.dropzoneWrapper(), 1);
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.dropzone(), 'visible');
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.dropzonePointer(), 'visible');
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.removeDropzoneButton(), 'visible');
-            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.dropzoneNumerationText(), '1');
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.dropzoneNumerationText(), 'visible');
-        });
-
-        it('When user clicks on close button for dropzone, then dropzone should be removed from canvas and error message \'Error: Please insert a dropzone.\' should be displayed', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.removeDropzone(0);
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.dropzoneWrapper(), 'notExist');
-            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.errorMessage(), 'Error: Please insert a dropzone.');
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.errorMessage(), 'visible');
-        });
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyCanvasResponseAreaContents();
 
-        it('When user adds dropzone, then error message should disappear', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(80);
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.errorMessage(), 'notExist');
-        });
-
-        it('User should be able to add maximum 20 multiple dropzones inside canvas', () => {
-            for (let i = 0; i < 21; i++) {
-                fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(i * 2);
-            }
-            utilities.verifyElementCount(fillInTheGapsOverImageDragAndDropPage.dropzoneWrapper(), 20);
-        });
-
-        it('When user clicks on close button for a dropzone, then dropzone should disappear and numeration for existing dropzones should be changed appropriately', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.removeDropzone(0);
-            utilities.verifyElementCount(fillInTheGapsOverImageDragAndDropPage.dropzoneWrapper(), 19);
-            for (let i = 0; i < 19; i++) {
-                utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.dropzoneNumerationText(), i), `${i + 1}`);
-            }
-        });
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyInsertAndDeleteResponseAreaFunctionality('dropzone');
     });
 
     describe('Canvas : Undo, Redo, Clear all -  Edit tab canvas section functionality', () => {
@@ -404,63 +199,7 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
             fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
         });
 
-        it('When the user has not made any changes in the canvas, the \'Undo\' and \'Redo\' button should be in disabled state', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyUndoButtonDisabled();
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyRedoButtonDisabled();
-        });
-
-        it('When user adds dropzone inside canvas, the \'Undo\' button should get enabled but the \'Redo\' button should continue to stay in disabled state', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(80);
-            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(20);
-            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(30);
-            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(40);
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyUndoButtonEnabled();
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyRedoButtonDisabled();
-        });
-
-        it('When the user clicks on the \'Undo\' button, then previous action should be reversed and redo button should be in enabled state', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.undoAction();
-            utilities.verifyElementCount(fillInTheGapsOverImageDragAndDropPage.dropzone(), 3);
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyRedoButtonEnabled();
-        });
-
-        it('When the user clicks on the redo button, then previous action should be reinstated and redo button should be disabled', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.redoAction()
-            utilities.verifyElementCount(fillInTheGapsOverImageDragAndDropPage.dropzone(), 4);
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyRedoButtonDisabled();
-        });
-
-        it('When the user reaches the initial state by performing undo actions, the \'Undo\' button should get disabled and error message \'Error: Please insert a dropzone.\' should be displayed', () => {
-            for (var i = 0; i < 4; i++) {
-                fillInTheGapsOverImageDragAndDropPage.steps.undoAction();
-            }
-            utilities.verifyElementCount(fillInTheGapsOverImageDragAndDropPage.dropzone(), 0);
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyUndoButtonDisabled();
-            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.errorMessage(), 'Error: Please insert a dropzone.');
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.errorMessage(), 'visible');
-        });
-
-        it('When the user reaches the latest state by performing redo actions, the \'Redo\' button should get disabled and error message should disappear', () => {
-            for (var i = 0; i < 4; i++) {
-                fillInTheGapsOverImageDragAndDropPage.steps.redoAction();
-            }
-            utilities.verifyElementCount(fillInTheGapsOverImageDragAndDropPage.dropzone(), 4);
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyRedoButtonDisabled();
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.errorMessage(), 'notExist');
-        });
-
-        it('When user clicks on \'Clear all\' button, then all dropzones should be deleted and error message \'Error: Please insert a dropzone.\' should be displayed', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.clearAll();
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.dropzoneWrapper(), 'notExist');
-            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.errorMessage(), 'Error: Please insert a dropzone.');
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.errorMessage(), 'visible');
-        });
-
-        it('When user clicks on undo button, then previously added dropzones should be restored and error message should disappear', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.undoAction();
-            utilities.verifyElementCount(fillInTheGapsOverImageDragAndDropPage.dropzone(), 4);
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.errorMessage(), 'notExist');
-        });
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyUndoRedoClearAllButtonFunctionality('dropzone');
     });
 
     describe('Canvas : Insert text -  Edit tab canvas section functionality', () => {
@@ -472,136 +211,22 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
             fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
         });
 
-        it('When user clicks on \'Insert text\' button, then \'Text\' menu label and \'Text color\' icon should be displayed.', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.selectCanvasMenuButton('Insert text');
-            cy.log('Clicking on canvas Selected Menu Text to hover away from select dropzone button');
-            fillInTheGapsOverImageDragAndDropPage.steps.clickOnCanvasSelectedMenuText();
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasSelectedMenuText('Text');
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.dropzoneStyle(), 'visible');
-        });
-
-        it('\'Text color\' button should be in disabled state.', () => {
-            utilities.verifyElementDisabled(fillInTheGapsOverImageDragAndDropPage.dropzoneStyle());
-        });
-
-        it('When user hovers over \'Text color\' button, then \'Text color\' tooltip should be displayed.', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyTooltipInnerText(fillInTheGapsOverImageDragAndDropPage.dropzoneStyle, 'Text color');
-        });
-
-        it('When user clicks inside the canvas, then text box should be displayed and \'Text color\' button should be enabled', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.insertTextArea(80, 'Inserted text');
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyTextOfTextBox('Inserted text');
-            utilities.verifyElementNotDisabled(fillInTheGapsOverImageDragAndDropPage.dropzoneStyle());
-        });
-
-        it('Text color of text inside text box should be black by default', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyTextColorOfTextBox('rgb(0, 0, 46)');
-        });
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyInsertTextAndTextColorButton();
 
-        it('When user clicks on \'Text color\' button, \'Text color\' popup should be displayed.', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.clickOnTextColorButton();
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.textColorPopupWrapper(), 'visible');
-            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.textColorLabelInTextColorPopup(), 'Text color');
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.textColorLabelInTextColorPopup(), 'visible');
-        });
-
-        it('\'Edit color\' label and Black color block should be displayed in selected state in the popup', () => {
-            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.editColorLabel(), 'Edit color');
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.editColorLabel(), 'visible');
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.selectedColorBlockInTextColorPopup(), 'visible');
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyColorBlock('rgb(0, 0, 46)');
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyColorBlockSelectedState();
-        });
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyTextColorPopupFunctionality();
 
         it('When the user clicks on the \'Edit color\' present in an \'Text color\' popup, then a select color popup should be displayed', () => {
             fillInTheGapsOverImageDragAndDropPage.steps.clickOnEditColorButton();
             fillInTheGapsOverImageDragAndDropPage.steps.verifyColorPopupIsDisplayed();
         });
 
-        it('A title \'Select color\' should be displayed on the color popup', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyColorPopupSelectColorTitle();
-        });
+        fillInTheGapsOverImageDragAndDropPage.tests. verifyColorPopupSelectColorTitle();
+        
+        fillInTheGapsOverImageDragAndDropPage.tests.verifySaturationAndOpacityGradientPalette('rgb(0, 0, 46)');
 
-        it('A \'Color saturation palette\' should be displayed on the color popup along with a color picker and the color picker should be set on the selected color', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyColorSaturationPaletteAndPicker();
-            fillInTheGapsOverImageDragAndDropPage.steps.verifySaturationPaletteColor('rgb(0, 0, 46)');
-        });
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyColorHuePaletteAndHexInputField('rgb(0, 0, 255)', '#00002E');
 
-        it('A \'Color hue palette\' should be displayed on the color popup along with a color picker and the color picker should be set on the selected color', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyColorHuePaletteAndPicker();
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyHuePaletteColor('rgb(0, 0, 255)');
-        });
-
-        it('A \'Opacity gradient hue palette\' should be displayed on the color popup along with a Opacity gradient picker and the color picker should be set on the selected color', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacityGradientHuePaletteAndPicker();
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacityGradientPaletteColor('rgb(0, 0, 46)');
-        });
-
-        it('A \'Selected color\' label and color block displaying the selected color should be displayed', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.verifySelectedColorLabelAndSelectedColorBlock();
-        });
-
-        it('A \'Hex\' label and input field with pre-filled hex code value of the selected color should be displayed', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyHexLabelAndInputField();
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyHexValue('#00002E');
-        });
-
-        it('\'Cancel\' and \'Ok\' buttons should be displayed', () => {
-            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.cancelButton(), 'Cancel');
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.cancelButton(), 'visible');
-            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.okButton(), 'OK');
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.okButton(), 'visible');
-        });
-
-        it('CSS of color popup contents', { tags: 'css' }, () => {
-            labels.forEach(label => {
-                utilities.verifyCSS(label(), {
-                    'color': css.color.labels,
-                    'font-size': css.fontSize.normal,
-                    'font-weight': css.fontWeight.semibold
-                });
-            });
-            inputFields.forEach(inputField => {
-                utilities.verifyCSS(inputField(), {
-                    'color': css.color.text,
-                    'font-size': css.fontSize.default,
-                    'font-weight': css.fontWeight.regular
-                });
-            });
-            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.okButton(), {
-                'color': css.color.whiteText,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular,
-                'background-color': css.color.activeButtons
-            });
-            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.cancelButton(), {
-                'color': css.color.secondaryBtn,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.semibold,
-                'background-color': css.color.transparent
-            });
-        });
-
-        //Failing due to https://redmine.zeuslearning.com/issues/539391
-        it('Accessibility of color popup contents', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.dialogBox());
-        });
-
-        it('When the user changes the color using hex code, the color in color saturation palette and color hue palette should change', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.addInputToHexInputField('#ff0000');
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyHexValue('#ff0000');
-            fillInTheGapsOverImageDragAndDropPage.steps.verifySaturationPaletteColor('rgb(255, 0, 0)');
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
-        });
-
-        it('When the user changes the color opacity using opacity gradient hue, then opacity of color should change in selected color block and hex color code should remain unchanged', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.clickOnOpacityGradientHuePalette();
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacityGradientPaletteColor('rgba(255, 0, 0, 0.5)');
-            fillInTheGapsOverImageDragAndDropPage.steps.verifySelectedColorBlock('rgba(255, 0, 0, 0.5)');
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyHexValue('#ff0000');
-            fillInTheGapsOverImageDragAndDropPage.steps.verifySaturationPaletteColor('rgb(255, 0, 0)');
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
-        });
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyColorPopupFunctionality();
 
         it('When the user has modified the selected color in the color popup and clicks on \'Ok\' button, then the popup should close, the color block should change to the new selected color and the modifications in the color popup should persist', () => {
             fillInTheGapsOverImageDragAndDropPage.steps.clickOnOkButton();
@@ -610,6 +235,7 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
         });
 
         it('When the user modifies the selected color in the color popup and clicks on \'Cancel\' button, then the popup should close, the color block should not change and the modifications in the color popup should not persist', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnTextColorButton();
             fillInTheGapsOverImageDragAndDropPage.steps.clickOnEditColorButton()
             fillInTheGapsOverImageDragAndDropPage.steps.addInputToHexInputField('#00002E');
             fillInTheGapsOverImageDragAndDropPage.steps.clickOnCancelButton();
@@ -631,13 +257,13 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
             fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(20);
             fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(90);
             fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
-            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.dropzoneInPreviewTab(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTab(), 'visible');
         });
 
         it('When user selects a dropzone and changes dropzone pointer style in edit tab, then changes in dropzone pointer should be reflected in preview tab', () => {
             fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
-            fillInTheGapsOverImageDragAndDropPage.steps.selectDropzone(0);
-            fillInTheGapsOverImageDragAndDropPage.steps.selectDropzonePointerStyle(dropzonePointerStyles[1]);
+            fillInTheGapsOverImageDragAndDropPage.steps.selectResponseArea(0);
+            fillInTheGapsOverImageDragAndDropPage.steps.selectResponseAreaPointerStyle(dropzonePointerStyles[1]);
             fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
             fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzonePointerStyleInPreviewTab(dropzonePointerStyles[1], 0);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzonePointerStyleInPreviewTab(dropzonePointerStyles[8], 1);
@@ -684,76 +310,7 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
             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.verifyValueOfOpacitySlider(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.clickActionOnOpacitySlider();
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyValueOfOpacitySlider(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.verifyValueOfOpacitySlider(85);
-        });
-
-        fillInTheGapsOverImageDragAndDropPage.tests.verifyOpacityCSSAndA11y()
-
-        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');
-        });
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyImagePropertiesSectionContent();
     });
 
     describe('Image properties section -  Edit tab canvas section functionality', () => {
@@ -766,50 +323,12 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
             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();
-        });
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyImageAlignmentEditTabFunctionality();
 
-        it('When opacity value is set to 100 percent by default, then opacity for image should be100 percent inside canvas', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacityValueForCanvasImage(100);
-        });
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyImageOpacityEditTabFunctionality();
 
-        it('When user changes opacity slider value , then opacity for image should be updated accordingly', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.clickActionOnOpacitySlider();
-            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();
-        });
+        //Failed due to https://redmine.zeuslearning.com/issues/560585
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyFillImageToCanvasEditTabFunctionality();
     });
 
     describe('Canvas width, Canvas height, Image alternative text -  Edit tab canvas section functionality', () => {
@@ -822,40 +341,9 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
             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');
-        });
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyAspectRatioAndResetDimensionsButtonFunctionality();
 
-        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();
-        });
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyImageAlternativeTextEditTabFunctionality();
     });
 
     describe('Image properties, Image alignment, Opacity section - Preview tab functionality', () => {
@@ -868,64 +356,12 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
             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.clickActionOnOpacitySlider();
-            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacityValueForCanvasImageInPreviewTab(50);
-        });
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyImageAlignmentPreviewTabFunctionality();
 
-        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();
-        });
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyImageOpacityPreviewTabFunctionality();
 
-        // 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();
-        });
+        //failed due to https://redmine.zeuslearning.com/issues/560585
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyFillImageToCanvasPreviewTabFunctionality();
     });
 
     describe('Canvas width, Canvas height, Image alternative text - Preview tab functionality', () => {
@@ -942,7 +378,7 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
         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');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.canvasImageInPreviewTab(), 'visible');
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasWidthInPreviewTab(768);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasHeightInPreviewTab(432);
         });
@@ -950,11 +386,11 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
         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.updateCanvasWidth(800);
+            fillInTheGapsOverImageDragAndDropPage.steps.updateCanvasHeight(450);
             fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasWidthInPreviewTab(500);
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasHeightInPreviewTab(500);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasWidthInPreviewTab(800);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasHeightInPreviewTab(450);
         });
 
         it('When user resets image dimensions in edit tab, then updated changes should be reflected in preview tab', () => {
@@ -965,27 +401,8 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
             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();
-        });
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyImageAlternativeTextPreviewTabFunctionality();
 
-        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');
-        });
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyImageNotExistPreviewTab();
     });
 });