itemengine-cypress-automation 1.0.120 → 1.0.122-updateILCRepo28Feb-2c3e0e3.0

package/cypress/pages/components/{figOverImageCanvasComponent.js → imageCanvasComponent.js}

@@ -26,7 +26,7 @@ const selectors = {
     responseAreaWrapper: () => cy.get('[class*="Canvasstyle__ResponseDiv"]'),
     responseAreaPointer: () => cy.get('[class*="Canvasstyle__PointerWrapper"]'),
     responseArea: () => cy.get('[class*="Canvasstyle__DropZone"]'),
-    textBoxInPreviewTab: () => cy.get('.preview-content-wrapper [class*="Canvasstyle__TextBoxContainer"] textarea'),
+    textBoxInPreviewTab: () => cy.get('[class*="PreviewTabstyles__ContentWrapper"] textarea[class*="TextBox"]'),
     removeResponseAreaButton: () => cy.get('.remove-button'),
     responseAreaNumerationText: () => cy.get('[class*="Canvasstyle__DropzoneContent"]'),
     responseAreaStyle: (ariaLabel = null) => {
@@ -69,17 +69,17 @@ const steps = {
      * @description Adds response area to the canvas.
      */
     insertResponseArea: (yCoordinateInPercentage) => {
-        figOverImageCanvasComponent.insertResponseAreaButton()
+        imageCanvasComponent.insertResponseAreaButton()
             .click();
-        figOverImageCanvasComponent.canvasImage()
+        imageCanvasComponent.canvasImage()
             .then(($element) => {
                 const imageHeight = $element[0].clientHeight;
                 const xCoordinate = 25;
                 const yCoordinate = yCoordinateInPercentage * imageHeight / 100;
-                figOverImageCanvasComponent.canvasImage()
+                imageCanvasComponent.canvasImage()
                     .click(xCoordinate, yCoordinate, { force: true });
             });
-        figOverImageCanvasComponent.selectResponseAreaButton()
+        imageCanvasComponent.selectResponseAreaButton()
             .click();
     },
 
@@ -89,111 +89,111 @@ const steps = {
     * @description Adds text area to the canvas.
     */
     insertTextArea: (yCoordinateInPercentage, text) => {
-        figOverImageCanvasComponent.insertTextAreaButton()
+        imageCanvasComponent.insertTextAreaButton()
             .click();
-        figOverImageCanvasComponent.canvasImage()
+        imageCanvasComponent.canvasImage()
             .then(($element) => {
                 const imageHeight = $element[0].clientHeight;
                 const xCoordinate = 80;
                 const yCoordinate = yCoordinateInPercentage * imageHeight / 100;
-                figOverImageCanvasComponent.canvasImage()
+                imageCanvasComponent.canvasImage()
                     .click(xCoordinate, yCoordinate, { force: true });
             });
-        figOverImageCanvasComponent.textResponse()
+        imageCanvasComponent.textResponse()
             .type(text);
     },
 
     verifyImageIsUploaded: () => {
-        utilities.verifyElementVisibilityState(figOverImageCanvasComponent.canvasImage(), 'visible');
+        utilities.verifyElementVisibilityState(imageCanvasComponent.canvasImage(), 'visible');
         utilities.verifyElementVisibilityState(backgroundImageUploadComponent.uploadImageProgressBar(), 'notExist');
         //Note: wait is added here for the image to fully load, else the first two response areas gets overlapped
         cy.wait(2000);
     },
 
     verifyImageIsUploadedInPreviewTab: () => {
-        utilities.verifyElementVisibilityState(figOverImageCanvasComponent.canvasImageInPreviewTab(), 'visible')
+        utilities.verifyElementVisibilityState(imageCanvasComponent.canvasImageInPreviewTab(), 'visible')
     },
 
     verifyCanvasImageNotExist: () => {
-        utilities.verifyElementVisibilityState(figOverImageCanvasComponent.canvasImage(), 'notExist');
+        utilities.verifyElementVisibilityState(imageCanvasComponent.canvasImage(), 'notExist');
     },
 
     verifyFillImageToCanvasCheckboxUnchecked: () => {
-        figOverImageCanvasComponent.fillImageToCanvasCheckbox()
+        imageCanvasComponent.fillImageToCanvasCheckbox()
             .should('not.be.checked');
     },
 
     verifyFillImageToCanvasCheckboxChecked: () => {
-        figOverImageCanvasComponent.fillImageToCanvasCheckbox()
+        imageCanvasComponent.fillImageToCanvasCheckbox()
             .should('be.checked');
     },
 
     checkFillImageToCanvasCheckbox: () => {
-        figOverImageCanvasComponent.fillImageToCanvasCheckbox()
+        imageCanvasComponent.fillImageToCanvasCheckbox()
             .click();
         steps.verifyFillImageToCanvasCheckboxChecked();
     },
 
     uncheckFillImageToCanvasCheckbox: () => {
-        figOverImageCanvasComponent.fillImageToCanvasCheckbox()
+        imageCanvasComponent.fillImageToCanvasCheckbox()
             .click();
         steps.verifyFillImageToCanvasCheckboxUnchecked();
     },
 
     verifyCanvasImageTopLeftAligned: () => {
-        figOverImageCanvasComponent.canvasImage()
+        imageCanvasComponent.canvasImage()
             .should('have.css', 'top', '0px')
             .and('have.css', 'left', '0px');
     },
 
     verifyCanvasImageTopLeftAlignedInPreviewTab: () => {
-        figOverImageCanvasComponent.canvasImageInPreviewTab()
+        imageCanvasComponent.canvasImageInPreviewTab()
             .should('have.css', 'top', '0px')
             .and('have.css', 'left', '0px');
     },
 
     verifyCanvasImageTopRightAligned: () => {
-        figOverImageCanvasComponent.canvasImage()
+        imageCanvasComponent.canvasImage()
             .should('have.css', 'top', '0px')
             .and('not.have.css', 'left', '0px');
     },
 
     verifyCanvasImageTopRightAlignedInPreviewTab: () => {
-        figOverImageCanvasComponent.canvasImageInPreviewTab()
+        imageCanvasComponent.canvasImageInPreviewTab()
             .should('have.css', 'top', '0px')
             .and('not.have.css', 'left', '0px');
     },
 
     verifyCanvasImageCenterAligned: () => {
-        figOverImageCanvasComponent.canvasImage()
+        imageCanvasComponent.canvasImage()
             .should('not.have.css', 'top', '0px')
             .and('not.have.css', 'left', '0px');
     },
 
     verifyCanvasImageCenterAlignedInPreviewTab: () => {
-        figOverImageCanvasComponent.canvasImageInPreviewTab()
+        imageCanvasComponent.canvasImageInPreviewTab()
             .should('not.have.css', 'top', '0px')
             .and('not.have.css', 'left', '0px');
     },
 
     selectTopLeftImageAlignment: () => {
-        figOverImageCanvasComponent.topLeftAlignmentButton()
+        imageCanvasComponent.topLeftAlignmentButton()
             .click();
-        figOverImageCanvasComponent.topLeftAlignmentButton()
+        imageCanvasComponent.topLeftAlignmentButton()
             .should('have.attr', 'aria-pressed', 'true');
     },
 
     selectTopRightImageAlignment: () => {
-        figOverImageCanvasComponent.topRightAlignmentButton()
+        imageCanvasComponent.topRightAlignmentButton()
             .click();
-        figOverImageCanvasComponent.topRightAlignmentButton()
+        imageCanvasComponent.topRightAlignmentButton()
             .should('have.attr', 'aria-pressed', 'true');
     },
 
     selectCenterImageAlignment: () => {
-        figOverImageCanvasComponent.centerAlignmentButton()
+        imageCanvasComponent.centerAlignmentButton()
             .click();
-        figOverImageCanvasComponent.centerAlignmentButton()
+        imageCanvasComponent.centerAlignmentButton()
             .should('have.attr', 'aria-pressed', 'true');
     },
 
@@ -202,7 +202,7 @@ const steps = {
      * @description function verifies opacity value for image
      */
     verifyOpacityValueForCanvasImage: (value) => {
-        figOverImageCanvasComponent.canvasImage()
+        imageCanvasComponent.canvasImage()
             .should('have.attr', 'opacity', value);
     },
 
@@ -211,7 +211,7 @@ const steps = {
     * @description function verifies opacity value for image
     */
     verifyOpacityValueForCanvasImageInPreviewTab: (value) => {
-        figOverImageCanvasComponent.canvasImageInPreviewTab()
+        imageCanvasComponent.canvasImageInPreviewTab()
             .should('have.attr', 'opacity', value);
     },
 
@@ -220,9 +220,9 @@ const steps = {
      * @description this function adds text in input field and then verifies it
      */
     enterAndVerifyImageAlternativeTextInInputField: (text) => {
-        figOverImageCanvasComponent.imageAlternativeTextInputField()
+        imageCanvasComponent.imageAlternativeTextInputField()
             .type(text);
-        figOverImageCanvasComponent.imageAlternativeTextInputField()
+        imageCanvasComponent.imageAlternativeTextInputField()
             .should('have.value', text);
     },
 
@@ -231,7 +231,7 @@ const steps = {
      * @description this function verifies text for canvas image
      */
     verifyImageAlternativeTextInPreviewTab: (text) => {
-        figOverImageCanvasComponent.canvasImageInPreviewTab()
+        imageCanvasComponent.canvasImageInPreviewTab()
             .should('have.attr', 'alt', text);
     },
 
@@ -240,58 +240,59 @@ const steps = {
      * @description this function verifies text for canvas image
      */
     verifyImageAlternativeTextPresentInEditTab: (text) => {
-        figOverImageCanvasComponent.canvasImage()
+        imageCanvasComponent.canvasImage()
             .should('have.attr', 'alt', text);
     },
 
     clearImageAlternativeTextInputFieldText: () => {
-        figOverImageCanvasComponent.imageAlternativeTextInputField()
+        imageCanvasComponent.imageAlternativeTextInputField()
             .clear();
     },
 
     verifyNoImageAlternativeTextPresentInPreviewTab: () => {
-        figOverImageCanvasComponent.canvasImageInPreviewTab()
+        imageCanvasComponent.canvasImageInPreviewTab()
             .should('have.attr', 'alt', '');
     },
 
     verifyNoImageAlternativeTextPresentInEditTab: () => {
-        figOverImageCanvasComponent.canvasImage()
+        imageCanvasComponent.canvasImage()
             .should('have.attr', 'alt', '');
     },
 
     verifyImageFitsToCanvas: () => {
-        figOverImageCanvasComponent.canvasWidthInputField()
+        imageCanvasComponent.canvasWidthInputField()
             .invoke('attr', 'value')
             .then((value) => {
-                figOverImageCanvasComponent.canvasImage().should('have.css', 'width', `${value}px`);
+                imageCanvasComponent.canvasImage().should('have.css', 'width', `${value}px`);
             });
     },
 
     verifyImageDoesNotFitToCanvas: () => {
-        figOverImageCanvasComponent.canvasHeightInputField()
-            .invoke('attr', 'value')
-            .then((value) => {
-                figOverImageCanvasComponent.canvasImage().should('have.css', 'height', `${value}px`);
+        imageCanvasComponent.canvasImage()
+            .then(($element) => {
+                const imgWidth = $element[0].naturalWidth;
+                imageCanvasComponent.canvasImage()
+                    .should('have.css', 'width', `${imgWidth}px`);
             });
     },
 
     verifyImageFitsToCanvasInPreviewTab: () => {
         createQuestionBasePage.steps.switchToEditTab();
-        figOverImageCanvasComponent.canvasWidthInputField()
+        imageCanvasComponent.canvasWidthInputField()
             .invoke('attr', 'value')
             .then((value) => {
                 createQuestionBasePage.steps.switchToPreviewTab();
-                figOverImageCanvasComponent.canvasImageInPreviewTab().should('have.css', 'width', `${value}px`);
+                imageCanvasComponent.canvasImageInPreviewTab().should('have.css', 'width', `${value}px`);
             });
     },
 
     verifyImageDoesNotFitToCanvasInPreviewTab: () => {
         createQuestionBasePage.steps.switchToEditTab();
-        figOverImageCanvasComponent.canvasHeightInputField()
-            .invoke('attr', 'value')
-            .then((value) => {
+        imageCanvasComponent.canvasImage()
+            .then(($element) => {
+                const imgWidth = $element[0].naturalWidth;
                 createQuestionBasePage.steps.switchToPreviewTab();
-                figOverImageCanvasComponent.canvasImageInPreviewTab().should('have.css', 'height', `${value}px`);
+                imageCanvasComponent.canvasImageInPreviewTab().should('have.css', 'width', `${imgWidth}px`);
             });
     },
 
@@ -300,7 +301,7 @@ const steps = {
      * @description function updates canvas width in input field
      */
     updateCanvasWidth: (width) => {
-        figOverImageCanvasComponent.canvasWidthInputField()
+        imageCanvasComponent.canvasWidthInputField()
             .clear()
             .type(width);
     },
@@ -310,7 +311,7 @@ const steps = {
      * @description function updates canvas height in input field
      */
     updateCanvasHeight: (height) => {
-        figOverImageCanvasComponent.canvasHeightInputField()
+        imageCanvasComponent.canvasHeightInputField()
             .clear()
             .type(height);
     },
@@ -320,7 +321,7 @@ const steps = {
      * @description this function verifies width of canvas
      */
     verifyCanvasWidth: (width) => {
-        figOverImageCanvasComponent.canvas()
+        imageCanvasComponent.canvas()
             .should('have.attr', 'width', width);
     },
 
@@ -329,7 +330,7 @@ const steps = {
      * @description this function verifies height of canvas
      */
     verifyCanvasHeight: (height) => {
-        figOverImageCanvasComponent.canvas()
+        imageCanvasComponent.canvas()
             .should('have.css', 'height', `${height}px`);
     },
 
@@ -338,16 +339,16 @@ const steps = {
      *@description function verifies button active state
      */
     verifyCanvasMenuButtonSelected: (button) => {
-        if (button == 'Insert dropzone' || button == 'Insert text container') {
-            figOverImageCanvasComponent.insertResponseAreaButton()
+        if (button == 'Insert dropzone' || button == 'Insert text container' || button == 'Insert dropdown') {
+            imageCanvasComponent.insertResponseAreaButton()
                 .should('have.class', 'active');
         }
-        else if (button == 'Select dropzone' || button == 'Select text container') {
-            figOverImageCanvasComponent.selectResponseAreaButton()
+        else if (button == 'Select dropzone' || button == 'Select text container' || button == 'Select dropdown') {
+            imageCanvasComponent.selectResponseAreaButton()
                 .should('have.class', 'active');
         }
         else {
-            figOverImageCanvasComponent.insertTextAreaButton()
+            imageCanvasComponent.insertTextAreaButton()
                 .should('have.class', 'active');
         }
     },
@@ -357,52 +358,52 @@ const steps = {
          *@description function selects button
          */
     selectCanvasMenuButton: (button) => {
-        if (button == 'Insert dropzone' || button == 'Insert text container') {
-            figOverImageCanvasComponent.insertResponseAreaButton()
+        if (button == 'Insert dropzone' || button == 'Insert text container' || button == 'Insert dropdown') {
+            imageCanvasComponent.insertResponseAreaButton()
                 .click()
                 .should('have.class', 'active');
         }
-        else if (button == 'Select dropzone' || button == 'Select text container') {
-            figOverImageCanvasComponent.selectResponseAreaButton()
+        else if (button == 'Select dropzone' || button == 'Select text container' || button == 'Select dropdown') {
+            imageCanvasComponent.selectResponseAreaButton()
                 .click()
                 .should('have.class', 'active');
         }
         else {
-            figOverImageCanvasComponent.insertTextAreaButton()
+            imageCanvasComponent.insertTextAreaButton()
                 .click()
                 .should('have.class', 'active');
         }
     },
 
     redoAction: () => {
-        figOverImageCanvasComponent.redoButton()
+        imageCanvasComponent.redoButton()
             .click();
     },
 
     undoAction: () => {
-        figOverImageCanvasComponent.undoButton()
+        imageCanvasComponent.undoButton()
             .click();
     },
 
     clearAll: () => {
-        figOverImageCanvasComponent.clearAllButton()
+        imageCanvasComponent.clearAllButton()
             .click();
     },
 
     verifyUndoButtonDisabled: () => {
-        utilities.verifyElementDisabled(figOverImageCanvasComponent.undoButton());
+        utilities.verifyElementDisabled(imageCanvasComponent.undoButton());
     },
 
     verifyRedoButtonDisabled: () => {
-        utilities.verifyElementDisabled(figOverImageCanvasComponent.redoButton());
+        utilities.verifyElementDisabled(imageCanvasComponent.redoButton());
     },
 
     verifyUndoButtonEnabled: () => {
-        utilities.verifyElementNotDisabled(figOverImageCanvasComponent.undoButton());
+        utilities.verifyElementNotDisabled(imageCanvasComponent.undoButton());
     },
 
     verifyRedoButtonEnabled: () => {
-        utilities.verifyElementNotDisabled(figOverImageCanvasComponent.redoButton());
+        utilities.verifyElementNotDisabled(imageCanvasComponent.redoButton());
     },
 
     /**
@@ -410,7 +411,7 @@ const steps = {
      * @description function selects  response container of a particular index
      */
     selectResponseArea: (responseAreaIndex) => {
-        figOverImageCanvasComponent.responseArea()
+        imageCanvasComponent.responseArea()
             .eq(responseAreaIndex)
             .click();
     },
@@ -420,50 +421,51 @@ const steps = {
      * @description function selects  response container pointer style
      */
     selectResponseAreaPointerStyle: (style) => {
-        figOverImageCanvasComponent.responseAreaStyle(style)
+        const styleName = style.toLowerCase();
+        imageCanvasComponent.responseAreaStyle(styleName)
             .click();
     },
 
     clickOnCanvasSelectedMenuText: () => {
-        figOverImageCanvasComponent.canvasSelectedMenuText()
+        imageCanvasComponent.canvasSelectedMenuText()
             .click();
     },
 
     verifyResponseAreaPointerStyle: (style, responseAreaIndex) => {
         const getPosition = (option) => {
             switch (option) {
-                case 'Bottom':
+                case 'bottom':
                     return { top: '-31.5px', left: '-37.5px' };
-                case 'Bottom right':
+                case 'bottom right':
                     return { top: '-25px', left: '-40px' };
-                case 'Right':
+                case 'right':
                     return { top: '-21px', left: '-36.5px' };
-                case 'Top right':
+                case 'top right':
                     return { top: '-19px', left: '-31px' };
-                case 'Top':
+                case 'top':
                     return { top: '-22.5px', left: '-25.5px' };
-                case 'Top left':
+                case 'top left':
                     return { top: '-27px', left: '-24px' };
-                case 'Left':
+                case 'left':
                     return { bottom: '-20px', left: '-27px' };
-                case 'Bottom left':
+                case 'bottom left':
                     return { bottom: '-18px', left: '-32px' };
             }
         }
         const expectedPosition = getPosition(style);
-        if (style == 'Left' || style == 'Bottom left') {
-            figOverImageCanvasComponent.responseAreaPointer()
+        if (style == 'left' || style == 'bottom left') {
+            imageCanvasComponent.responseAreaPointer()
                 .eq(responseAreaIndex)
                 .should('have.css', 'bottom', expectedPosition.bottom)
                 .and('have.css', 'left', expectedPosition.left);
         }
-        else if (style == 'None') {
-            figOverImageCanvasComponent.responseArea()
+        else if (style == 'none') {
+            imageCanvasComponent.responseArea()
                 .parent()
                 .should('not.contain', '[class*="Canvasstyle__PointerWrapper"]');
         }
         else {
-            figOverImageCanvasComponent.responseAreaPointer()
+            imageCanvasComponent.responseAreaPointer()
                 .eq(responseAreaIndex)
                 .should('have.css', 'top', expectedPosition.top)
                 .and('have.css', 'left', expectedPosition.left);
@@ -471,55 +473,55 @@ const steps = {
     },
 
     verifyTextBoxNotExistInPreviewTab: () => {
-        utilities.verifyElementVisibilityState(figOverImageCanvasComponent.textBoxInPreviewTab(), 'notExist');
+        utilities.verifyElementVisibilityState(imageCanvasComponent.textBoxInPreviewTab(), 'notExist');
     },
 
     verifyTextBoxExistInPreviewTab: () => {
-        figOverImageCanvasComponent.textBoxInPreviewTab()
+        imageCanvasComponent.textBoxInPreviewTab()
             .should('be.visible');
     },
 
     verifyTextColorOfTextBox: (color) => {
-        figOverImageCanvasComponent.textResponse()
+        imageCanvasComponent.textResponse()
             .should('have.css', 'color', color);
     },
 
     verifyTextColorOfTextBoxInPreviewTab: (color) => {
-        figOverImageCanvasComponent.textBoxInPreviewTab()
+        imageCanvasComponent.textBoxInPreviewTab()
             .should('have.css', 'color', color);
     },
 
     verifyTextOfTextBox: (text) => {
-        figOverImageCanvasComponent.textResponse()
+        imageCanvasComponent.textResponse()
             .invoke('text')
             .should('eq', text);
     },
 
     verifyTextOfTextBoxInPreviewTab: (text) => {
-        figOverImageCanvasComponent.textBoxInPreviewTab()
+        imageCanvasComponent.textBoxInPreviewTab()
             .invoke('text')
             .should('eq', text);
     },
 
     clickOnTextColorButton: () => {
-        figOverImageCanvasComponent.responseAreaStyle()
+        imageCanvasComponent.responseAreaStyle()
             .click();
-        utilities.verifyElementVisibilityState(figOverImageCanvasComponent.textColorPopupWrapper(), 'visible');
+        utilities.verifyElementVisibilityState(imageCanvasComponent.textColorPopupWrapper(), 'visible');
     },
 
     clickOnEditColorButton: () => {
-        figOverImageCanvasComponent.editColorLabel()
+        imageCanvasComponent.editColorLabel()
             .click();
     },
 
     verifyColorBlockSelectedState: () => {
-        figOverImageCanvasComponent.selectedColorBlockInTextColorPopup()
+        imageCanvasComponent.selectedColorBlockInTextColorPopup()
             .find('[data-name="Selected card icon"]')
             .should('be.visible');
     },
 
     verifyColorBlock: (color) => {
-        figOverImageCanvasComponent.selectedColorBlockInTextColorPopup()
+        imageCanvasComponent.selectedColorBlockInTextColorPopup()
             .should('have.css', 'background-color', color);
     },
 
@@ -528,7 +530,7 @@ const steps = {
      * @param {number} index of the response container to be removed
      */
     removeResponseArea: (index) => {
-        figOverImageCanvasComponent.removeResponseAreaButton()
+        imageCanvasComponent.removeResponseAreaButton()
             .eq(index)
             .click({ force: true });
     },
@@ -538,8 +540,8 @@ const steps = {
      * @description function verifies inner text and visibility of canvas selected menu text
      */
     verifyCanvasSelectedMenuText: (selectedMenu) => {
-        utilities.verifyInnerText(figOverImageCanvasComponent.canvasSelectedMenuText(), selectedMenu);
-        utilities.verifyElementVisibilityState(figOverImageCanvasComponent.canvasSelectedMenuText(), 'visible');
+        utilities.verifyInnerText(imageCanvasComponent.canvasSelectedMenuText(), selectedMenu);
+        utilities.verifyElementVisibilityState(imageCanvasComponent.canvasSelectedMenuText(), 'visible');
     },
 
     /**
@@ -561,11 +563,11 @@ const steps = {
         responseAreaPointerStyles.forEach((dropzonePointer, index) => {
             cy.log('Clicking on canvas Selected Menu Text to hover away from select dropzone button');
             steps.clickOnCanvasSelectedMenuText();
-            figOverImageCanvasComponent.responseAreaStyle()
+            imageCanvasComponent.responseAreaStyle()
                 .eq(index)
                 .trigger('mouseover', { force: true });
             utilities.verifyInnerText(commonComponents.tooltipText(), dropzonePointer);
-            figOverImageCanvasComponent.responseAreaStyle()
+            imageCanvasComponent.responseAreaStyle()
                 .eq(index)
                 .trigger('mouseout', { force: true });
         });
@@ -577,54 +579,54 @@ const tests = {
 
     verifyCanvasLabelAndCanvas: () => {
         it('\'Canvas\' label and canvas should be displayed', () => {
-            utilities.verifyInnerText(figOverImageCanvasComponent.canvasLabel(), 'Canvas');
-            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.canvasLabel(), 'visible');
-            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.canvas(), 'visible');
+            utilities.verifyInnerText(imageCanvasComponent.canvasLabel(), 'Canvas');
+            utilities.verifyElementVisibilityState(imageCanvasComponent.canvasLabel(), 'visible');
+            utilities.verifyElementVisibilityState(imageCanvasComponent.canvas(), 'visible');
         });
 
         it('When user uploads background image for canvas, then it should be displayed', () => {
             backgroundImageUploadComponent.steps.uploadFile('highlightImage.jpg');
-            figOverImageCanvasComponent.steps.verifyImageIsUploaded();
+            imageCanvasComponent.steps.verifyImageIsUploaded();
         });
     },
 
     verifyInsertTextTooltip: () => {
         it('When user hovers over insert text button, then \'Insert text\' tooltip should be displayed', () => {
-            figOverImageCanvasComponent.steps.verifyTooltipInnerText(figOverImageCanvasComponent.insertTextAreaButton, 'Insert text');
+            imageCanvasComponent.steps.verifyTooltipInnerText(imageCanvasComponent.insertTextAreaButton, 'Insert text');
         });
     },
 
     verifyUndoRedoClearAllButtons: () => {
         it('Undo, redo and clear all buttons should be displayed', () => {
-            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.undoButton(), 'visible');
-            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.redoButton(), 'visible');
-            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.clearAllButton(), 'visible');
+            utilities.verifyElementVisibilityState(imageCanvasComponent.undoButton(), 'visible');
+            utilities.verifyElementVisibilityState(imageCanvasComponent.redoButton(), 'visible');
+            utilities.verifyElementVisibilityState(imageCanvasComponent.clearAllButton(), 'visible');
         });
 
         it('When user hovers over undo button, then \'Undo\' tooltip should be displayed', () => {
-            utilities.hoverAwayFromElement(figOverImageCanvasComponent.canvasSelectedMenuText());
-            figOverImageCanvasComponent.steps.verifyTooltipInnerText(figOverImageCanvasComponent.undoButton, 'Undo');
+            utilities.hoverAwayFromElement(imageCanvasComponent.canvasSelectedMenuText());
+            imageCanvasComponent.steps.verifyTooltipInnerText(imageCanvasComponent.undoButton, 'Undo');
         });
 
         it('When user hovers over clear all button, then \'Clear all\' tooltip should be displayed', () => {
-            figOverImageCanvasComponent.steps.verifyTooltipInnerText(figOverImageCanvasComponent.clearAllButton, 'Clear all');
+            imageCanvasComponent.steps.verifyTooltipInnerText(imageCanvasComponent.clearAllButton, 'Clear all');
         });
 
         it('When user hovers over redo button, then \'Redo\' tooltip should be displayed', () => {
-            utilities.hoverAwayFromElement(figOverImageCanvasComponent.undoButton());
-            figOverImageCanvasComponent.steps.verifyTooltipInnerText(figOverImageCanvasComponent.redoButton, 'Redo');
+            utilities.hoverAwayFromElement(imageCanvasComponent.undoButton());
+            imageCanvasComponent.steps.verifyTooltipInnerText(imageCanvasComponent.redoButton, 'Redo');
         });
     },
 
     verifyCanvasResponseAreaContents: () => {
         it('When user clicks inside canvas, then one response container should be added with pointer, close button and numeration.', () => {
-            figOverImageCanvasComponent.steps.insertResponseArea(80);
-            utilities.verifyElementCount(figOverImageCanvasComponent.responseAreaWrapper(), 1);
-            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.responseArea(), 'visible');
-            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.responseAreaPointer(), 'visible');
-            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.removeResponseAreaButton(), 'visible');
-            utilities.verifyInnerText(figOverImageCanvasComponent.responseAreaNumerationText(), '1');
-            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.responseAreaNumerationText(), 'visible');
+            imageCanvasComponent.steps.insertResponseArea(80);
+            utilities.verifyElementCount(imageCanvasComponent.responseAreaWrapper(), 1);
+            utilities.verifyElementVisibilityState(imageCanvasComponent.responseArea(), 'visible');
+            utilities.verifyElementVisibilityState(imageCanvasComponent.responseAreaPointer(), 'visible');
+            utilities.verifyElementVisibilityState(imageCanvasComponent.removeResponseAreaButton(), 'visible');
+            utilities.verifyInnerText(imageCanvasComponent.responseAreaNumerationText(), '1');
+            utilities.verifyElementVisibilityState(imageCanvasComponent.responseAreaNumerationText(), 'visible');
         });
     },
 
@@ -633,29 +635,29 @@ const tests = {
      */
     verifyInsertAndDeleteResponseAreaFunctionality: (response) => {
         it(`When user clicks on close button for response container, then response container should be removed from canvas and error message 'Error: Please insert a ${response}.' should be displayed`, () => {
-            figOverImageCanvasComponent.steps.removeResponseArea(0);
-            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.responseAreaWrapper(), 'notExist');
+            imageCanvasComponent.steps.removeResponseArea(0);
+            utilities.verifyElementVisibilityState(imageCanvasComponent.responseAreaWrapper(), 'notExist');
             utilities.verifyInnerText(commonComponents.errorMessage(), `Error: Please insert a ${response}.`);
             utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
         });
 
         it('When user adds response container, then error message should disappear', () => {
-            figOverImageCanvasComponent.steps.insertResponseArea(80);
+            imageCanvasComponent.steps.insertResponseArea(80);
             commonComponents.steps.verifyErrorMessageIsNotDisplayed();
         });
 
         it('User should be able to add maximum 20 multiple response containers inside canvas', () => {
             for (let i = 0; i < 21; i++) {
-                figOverImageCanvasComponent.steps.insertResponseArea(i * 2);
+                imageCanvasComponent.steps.insertResponseArea(i * 2);
             }
-            utilities.verifyElementCount(figOverImageCanvasComponent.responseAreaWrapper(), 20);
+            utilities.verifyElementCount(imageCanvasComponent.responseAreaWrapper(), 20);
         });
 
         it('When user clicks on close button for a response container, then response container should disappear and numeration for existing response containers should be changed appropriately', () => {
-            figOverImageCanvasComponent.steps.removeResponseArea(0);
-            utilities.verifyElementCount(figOverImageCanvasComponent.responseAreaWrapper(), 19);
+            imageCanvasComponent.steps.removeResponseArea(0);
+            utilities.verifyElementCount(imageCanvasComponent.responseAreaWrapper(), 19);
             for (let i = 0; i < 19; i++) {
-                utilities.verifyInnerText(utilities.getNthElement(figOverImageCanvasComponent.responseAreaNumerationText(), i), `${i + 1}`);
+                utilities.verifyInnerText(utilities.getNthElement(imageCanvasComponent.responseAreaNumerationText(), i), `${i + 1}`);
             }
         });
     },
@@ -665,53 +667,53 @@ const tests = {
      */
     verifyUndoRedoClearAllButtonFunctionality: (response) => {
         it('When the user has not made any changes in the canvas, the \'Undo\' and \'Redo\' button should be in disabled state', () => {
-            figOverImageCanvasComponent.steps.verifyUndoButtonDisabled();
-            figOverImageCanvasComponent.steps.verifyRedoButtonDisabled();
+            imageCanvasComponent.steps.verifyUndoButtonDisabled();
+            imageCanvasComponent.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', () => {
-            figOverImageCanvasComponent.steps.insertResponseArea(80);
-            figOverImageCanvasComponent.steps.insertResponseArea(20);
-            figOverImageCanvasComponent.steps.insertResponseArea(30);
-            figOverImageCanvasComponent.steps.insertResponseArea(40);
-            figOverImageCanvasComponent.steps.verifyUndoButtonEnabled();
-            figOverImageCanvasComponent.steps.verifyRedoButtonDisabled();
+            imageCanvasComponent.steps.insertResponseArea(80);
+            imageCanvasComponent.steps.insertResponseArea(20);
+            imageCanvasComponent.steps.insertResponseArea(30);
+            imageCanvasComponent.steps.insertResponseArea(40);
+            imageCanvasComponent.steps.verifyUndoButtonEnabled();
+            imageCanvasComponent.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', () => {
-            figOverImageCanvasComponent.steps.undoAction();
-            utilities.verifyElementCount(figOverImageCanvasComponent.responseArea(), 3);
-            utilities.verifyElementNotDisabled(figOverImageCanvasComponent.redoButton());
+            imageCanvasComponent.steps.undoAction();
+            utilities.verifyElementCount(imageCanvasComponent.responseArea(), 3);
+            utilities.verifyElementNotDisabled(imageCanvasComponent.redoButton());
         });
 
         it('When the user clicks on the redo button, then previous action should be reinstated and redo button should be disabled', () => {
-            figOverImageCanvasComponent.steps.redoAction()
-            utilities.verifyElementCount(figOverImageCanvasComponent.responseArea(), 4);
-            figOverImageCanvasComponent.steps.verifyRedoButtonDisabled();
+            imageCanvasComponent.steps.redoAction()
+            utilities.verifyElementCount(imageCanvasComponent.responseArea(), 4);
+            imageCanvasComponent.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 ${response}.\' should be displayed`, () => {
             for (var i = 0; i < 4; i++) {
-                figOverImageCanvasComponent.steps.undoAction();
+                imageCanvasComponent.steps.undoAction();
             }
-            utilities.verifyElementCount(figOverImageCanvasComponent.responseArea(), 0);
-            figOverImageCanvasComponent.steps.verifyUndoButtonDisabled();
+            utilities.verifyElementCount(imageCanvasComponent.responseArea(), 0);
+            imageCanvasComponent.steps.verifyUndoButtonDisabled();
             utilities.verifyInnerText(commonComponents.errorMessage(), `Error: Please insert a ${response}.`);
             utilities.verifyElementVisibilityState(commonComponents.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++) {
-                figOverImageCanvasComponent.steps.redoAction();
+                imageCanvasComponent.steps.redoAction();
             }
-            utilities.verifyElementCount(figOverImageCanvasComponent.responseArea(), 4);
-            figOverImageCanvasComponent.steps.verifyRedoButtonDisabled();
+            utilities.verifyElementCount(imageCanvasComponent.responseArea(), 4);
+            imageCanvasComponent.steps.verifyRedoButtonDisabled();
             commonComponents.steps.verifyErrorMessageIsNotDisplayed();
         });
 
         it(`When user clicks on \'Clear all\' button, then all response container should be deleted and error message 'Error: Please insert a ${response}.' should be displayed`, () => {
-            figOverImageCanvasComponent.steps.clearAll();
-            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.responseAreaWrapper(), 'notExist');
+            imageCanvasComponent.steps.clearAll();
+            utilities.verifyElementVisibilityState(imageCanvasComponent.responseAreaWrapper(), 'notExist');
             utilities.verifyInnerText(commonComponents.errorMessage(), `Error: Please insert a ${response}.`);
             utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
         });
@@ -719,53 +721,53 @@ const tests = {
 
     verifyInsertTextAndTextColorButton: () => {
         it('When user clicks on \'Insert text\' button, then \'Text\' menu label and \'Text color\' icon should be displayed.', () => {
-            figOverImageCanvasComponent.steps.selectCanvasMenuButton('Insert text');
+            imageCanvasComponent.steps.selectCanvasMenuButton('Insert text');
             cy.log('Clicking on canvas Selected Menu Text to hover away from select dropzone button');
-            figOverImageCanvasComponent.steps.clickOnCanvasSelectedMenuText();
-            figOverImageCanvasComponent.steps.verifyCanvasSelectedMenuText('Text');
-            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.responseAreaStyle(), 'visible');
+            imageCanvasComponent.steps.clickOnCanvasSelectedMenuText();
+            imageCanvasComponent.steps.verifyCanvasSelectedMenuText('Text');
+            utilities.verifyElementVisibilityState(imageCanvasComponent.responseAreaStyle(), 'visible');
         });
 
         it('\'Text color\' button should be in disabled state.', () => {
-            utilities.verifyElementDisabled(figOverImageCanvasComponent.responseAreaStyle());
+            utilities.verifyElementDisabled(imageCanvasComponent.responseAreaStyle());
         });
 
         it('When user hovers over \'Text color\' button, then \'Text color\' tooltip should be displayed.', () => {
-            figOverImageCanvasComponent.steps.verifyTooltipInnerText(figOverImageCanvasComponent.responseAreaStyle, 'Text color');
+            imageCanvasComponent.steps.verifyTooltipInnerText(imageCanvasComponent.responseAreaStyle, 'Text color');
         });
     },
 
     verifyTextColorPopupFunctionality: () => {
         it('When user clicks inside the canvas, then text box should be displayed and \'Text color\' button should be enabled', () => {
-            figOverImageCanvasComponent.steps.insertTextArea(80, 'Inserted text');
-            figOverImageCanvasComponent.steps.verifyTextOfTextBox('Inserted text');
-            utilities.verifyElementNotDisabled(figOverImageCanvasComponent.responseAreaStyle());
+            imageCanvasComponent.steps.insertTextArea(80, 'Inserted text');
+            imageCanvasComponent.steps.verifyTextOfTextBox('Inserted text');
+            utilities.verifyElementNotDisabled(imageCanvasComponent.responseAreaStyle());
         });
 
         it('Text color of text inside text box should be black by default', () => {
-            figOverImageCanvasComponent.steps.verifyTextColorOfTextBox('rgb(0, 0, 46)');
+            imageCanvasComponent.steps.verifyTextColorOfTextBox('rgb(0, 0, 46)');
         });
 
         it('When user clicks on \'Text color\' button, \'Text color\' popup should be displayed.', () => {
-            figOverImageCanvasComponent.steps.clickOnTextColorButton();
-            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.textColorPopupWrapper(), 'visible');
-            utilities.verifyInnerText(figOverImageCanvasComponent.textColorLabelInTextColorPopup(), 'Text color');
-            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.textColorLabelInTextColorPopup(), 'visible');
+            imageCanvasComponent.steps.clickOnTextColorButton();
+            utilities.verifyElementVisibilityState(imageCanvasComponent.textColorPopupWrapper(), 'visible');
+            utilities.verifyInnerText(imageCanvasComponent.textColorLabelInTextColorPopup(), 'Text color');
+            utilities.verifyElementVisibilityState(imageCanvasComponent.textColorLabelInTextColorPopup(), 'visible');
         });
 
         it('\'Edit color\' label and Black color block should be displayed in selected state in the popup', () => {
-            utilities.verifyInnerText(figOverImageCanvasComponent.editColorLabel(), 'Edit color');
-            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.editColorLabel(), 'visible');
-            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.selectedColorBlockInTextColorPopup(), 'visible');
-            figOverImageCanvasComponent.steps.verifyColorBlock('rgb(0, 0, 46)');
-            figOverImageCanvasComponent.steps.verifyColorBlockSelectedState();
+            utilities.verifyInnerText(imageCanvasComponent.editColorLabel(), 'Edit color');
+            utilities.verifyElementVisibilityState(imageCanvasComponent.editColorLabel(), 'visible');
+            utilities.verifyElementVisibilityState(imageCanvasComponent.selectedColorBlockInTextColorPopup(), 'visible');
+            imageCanvasComponent.steps.verifyColorBlock('rgb(0, 0, 46)');
+            imageCanvasComponent.steps.verifyColorBlockSelectedState();
         });
     },
 
     verifySelectColorPopupContentAndFunctionality: () => {
 
         it('When the user clicks on the \'Edit color\' present in an \'Text color\' popup, then a select color popup should be displayed', () => {
-            figOverImageCanvasComponent.steps.clickOnEditColorButton();
+            imageCanvasComponent.steps.clickOnEditColorButton();
             colorPopupComponent.steps.verifyColorPopupIsDisplayed();
         });
 
@@ -836,19 +838,19 @@ const tests = {
 
     verifyImagePropertiesSectionContent: () => {
         it('\'Image properties\' label should be displayed.', () => {
-            utilities.verifyInnerText(figOverImageCanvasComponent.imagePropertiesLabel(), 'Image properties');
-            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.imagePropertiesLabel(), 'visible');
+            utilities.verifyInnerText(imageCanvasComponent.imagePropertiesLabel(), 'Image properties');
+            utilities.verifyElementVisibilityState(imageCanvasComponent.imagePropertiesLabel(), 'visible');
         });
 
         it('\'Fill image to canvas\' label and checkbox should be displayed and checkbox should be unchecked by default', () => {
-            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.fillImageToCanvasLabel(), 'visible');
-            utilities.verifyInnerText(figOverImageCanvasComponent.fillImageToCanvasLabel(), 'Fill image to canvas');
-            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.fillImageToCanvasCheckbox(), 'exist');
-            figOverImageCanvasComponent.steps.verifyFillImageToCanvasCheckboxUnchecked();
+            utilities.verifyElementVisibilityState(imageCanvasComponent.fillImageToCanvasLabel(), 'visible');
+            utilities.verifyInnerText(imageCanvasComponent.fillImageToCanvasLabel(), 'Fill image to canvas');
+            utilities.verifyElementVisibilityState(imageCanvasComponent.fillImageToCanvasCheckbox(), 'exist');
+            imageCanvasComponent.steps.verifyFillImageToCanvasCheckboxUnchecked();
         });
 
         it('User should be able to check \'Fill image to canvas\' checkbox', () => {
-            figOverImageCanvasComponent.steps.checkFillImageToCanvasCheckbox();
+            imageCanvasComponent.steps.checkFillImageToCanvasCheckbox();
         });
 
         it('\'Lock aspect ratio\' and \'Reset dimensions\' buttons should be displayed and by default \'Lock aspect ratio\' button should be locked', () => {
@@ -857,215 +859,215 @@ const tests = {
         });
 
         it('\'Image alignment\' label should be displayed. ', () => {
-            utilities.verifyInnerText(figOverImageCanvasComponent.imageAlignmentLabel(), 'Image alignment');
-            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.imageAlignmentLabel(), 'visible');
+            utilities.verifyInnerText(imageCanvasComponent.imageAlignmentLabel(), 'Image alignment');
+            utilities.verifyElementVisibilityState(imageCanvasComponent.imageAlignmentLabel(), 'visible');
         });
 
         it(`\'Image alignment\' section should have three options ${alignmentOptions} and ${alignmentOptions[0]} should be active selection by default`, () => {
-            utilities.verifyInnerText(figOverImageCanvasComponent.topLeftAlignmentButton(), 'Top left');
-            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.topLeftAlignmentButton(), 'visible');
-            utilities.verifyInnerText(figOverImageCanvasComponent.centerAlignmentButton(), 'Center');
-            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.centerAlignmentButton(), 'visible');
-            utilities.verifyInnerText(figOverImageCanvasComponent.topRightAlignmentButton(), 'Top right');
-            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.topRightAlignmentButton(), 'visible');
-            figOverImageCanvasComponent.steps.verifyCanvasImageTopLeftAligned();
+            utilities.verifyInnerText(imageCanvasComponent.topLeftAlignmentButton(), 'Top left');
+            utilities.verifyElementVisibilityState(imageCanvasComponent.topLeftAlignmentButton(), 'visible');
+            utilities.verifyInnerText(imageCanvasComponent.centerAlignmentButton(), 'Center');
+            utilities.verifyElementVisibilityState(imageCanvasComponent.centerAlignmentButton(), 'visible');
+            utilities.verifyInnerText(imageCanvasComponent.topRightAlignmentButton(), 'Top right');
+            utilities.verifyElementVisibilityState(imageCanvasComponent.topRightAlignmentButton(), 'visible');
+            imageCanvasComponent.steps.verifyCanvasImageTopLeftAligned();
         });
 
         it('\'Image alternative text\' label and input field should be displayed. By default input field should be empty', () => {
-            utilities.verifyInnerText(figOverImageCanvasComponent.imageAlternativeTextLabel(), 'Image alternative text');
-            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.imageAlternativeTextLabel(), 'visible');
-            utilities.verifyInnerText(figOverImageCanvasComponent.imageAlternativeTextInputField(), '');
-            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.imageAlternativeTextInputField(), 'exist');
+            utilities.verifyInnerText(imageCanvasComponent.imageAlternativeTextLabel(), 'Image alternative text');
+            utilities.verifyElementVisibilityState(imageCanvasComponent.imageAlternativeTextLabel(), 'visible');
+            utilities.verifyInnerText(imageCanvasComponent.imageAlternativeTextInputField(), '');
+            utilities.verifyElementVisibilityState(imageCanvasComponent.imageAlternativeTextInputField(), 'exist');
         });
 
         it('User should be able to enter text in \'Image alternative text\' input field', () => {
-            figOverImageCanvasComponent.steps.enterAndVerifyImageAlternativeTextInInputField('Image description');
+            imageCanvasComponent.steps.enterAndVerifyImageAlternativeTextInInputField('Image description');
         });
     },
 
     verifyImageAlignmentEditTabFunctionality: () => {
         it('When \'Top left\' image alignment is selected by default, then image should be aligned to top left inside the canvas', () => {
-            figOverImageCanvasComponent.steps.verifyCanvasImageTopLeftAligned();
+            imageCanvasComponent.steps.verifyCanvasImageTopLeftAligned();
         });
 
         it('When user selects \'Center\' image alignment, then image should be aligned to center inside the canvas', () => {
-            figOverImageCanvasComponent.steps.selectCenterImageAlignment();
-            figOverImageCanvasComponent.steps.verifyCanvasImageCenterAligned();
+            imageCanvasComponent.steps.selectCenterImageAlignment();
+            imageCanvasComponent.steps.verifyCanvasImageCenterAligned();
         });
 
         it('When user selects \'Top right\' image alignment, then image should be aligned to top right inside the canvas', () => {
-            figOverImageCanvasComponent.steps.selectTopRightImageAlignment();
-            figOverImageCanvasComponent.steps.verifyCanvasImageTopRightAligned();
+            imageCanvasComponent.steps.selectTopRightImageAlignment();
+            imageCanvasComponent.steps.verifyCanvasImageTopRightAligned();
         });
 
         it('When user selects \'Top left\' image alignment again, then image should be aligned to top left inside the canvas', () => {
-            figOverImageCanvasComponent.steps.selectTopLeftImageAlignment();
-            figOverImageCanvasComponent.steps.verifyCanvasImageTopLeftAligned();
+            imageCanvasComponent.steps.selectTopLeftImageAlignment();
+            imageCanvasComponent.steps.verifyCanvasImageTopLeftAligned();
         });
     },
 
     verifyFillImageToCanvasEditTabFunctionality: () => {
         it('When user checks \'Fill image to canvas\' checkbox, then image should be adjusted to fit inside the canvas', () => {
-            figOverImageCanvasComponent.steps.checkFillImageToCanvasCheckbox();
-            figOverImageCanvasComponent.steps.verifyImageFitsToCanvas();
+            imageCanvasComponent.steps.checkFillImageToCanvasCheckbox();
+            imageCanvasComponent.steps.verifyImageFitsToCanvas();
         });
 
         it('When user unchecks \'Fill image to canvas\' checkbox, then image dimensions should set to default state', () => {
-            figOverImageCanvasComponent.steps.uncheckFillImageToCanvasCheckbox();
-            figOverImageCanvasComponent.steps.verifyImageDoesNotFitToCanvas();
+            imageCanvasComponent.steps.uncheckFillImageToCanvasCheckbox();
+            imageCanvasComponent.steps.verifyImageDoesNotFitToCanvas();
         });
     },
 
     verifyAspectRatioAndResetDimensionsButtonFunctionality: () => {
         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', () => {
-            figOverImageCanvasComponent.steps.unlockAspectRatio();
-            figOverImageCanvasComponent.steps.updateCanvasWidth(500);
-            figOverImageCanvasComponent.steps.verifyCanvasWidth(500);
-            figOverImageCanvasComponent.steps.verifyCanvasHeight(432);
+            imageCanvasComponent.steps.unlockAspectRatio();
+            imageCanvasComponent.steps.updateCanvasWidth(500);
+            imageCanvasComponent.steps.verifyCanvasWidth(500);
+            imageCanvasComponent.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', () => {
-            figOverImageCanvasComponent.steps.updateCanvasHeight(500);
-            figOverImageCanvasComponent.steps.verifyCanvasHeight(500);
-            figOverImageCanvasComponent.steps.verifyCanvasWidth(500);
+            imageCanvasComponent.steps.updateCanvasHeight(500);
+            imageCanvasComponent.steps.verifyCanvasHeight(500);
+            imageCanvasComponent.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', () => {
-            figOverImageCanvasComponent.steps.lockAspectRatio();
-            figOverImageCanvasComponent.steps.updateCanvasWidth(800);
-            figOverImageCanvasComponent.steps.verifyCanvasHeight(450);
+            imageCanvasComponent.steps.lockAspectRatio();
+            imageCanvasComponent.steps.updateCanvasWidth(800);
+            imageCanvasComponent.steps.verifyCanvasHeight(450);
         });
 
         it('When user selects the \'Reset dimensions\' button the height and width should reset to the original values', () => {
-            figOverImageCanvasComponent.steps.resetDimensions();
-            figOverImageCanvasComponent.steps.verifyCanvasWidth(768);
-            figOverImageCanvasComponent.steps.verifyCanvasHeight(432);
+            imageCanvasComponent.steps.resetDimensions();
+            imageCanvasComponent.steps.verifyCanvasWidth(768);
+            imageCanvasComponent.steps.verifyCanvasHeight(432);
         });
     },
 
     verifyImageAlternativeTextEditTabFunctionality: () => {
         it('When user enters text in the \'Alternative text\' input field, then alternative text should be displayed for canvas image', () => {
-            figOverImageCanvasComponent.steps.enterAndVerifyImageAlternativeTextInInputField('This is Alternative text for image');
-            figOverImageCanvasComponent.steps.verifyImageAlternativeTextPresentInEditTab('This is Alternative text for image');
+            imageCanvasComponent.steps.enterAndVerifyImageAlternativeTextInInputField('This is Alternative text for image');
+            imageCanvasComponent.steps.verifyImageAlternativeTextPresentInEditTab('This is Alternative text for image');
         });
 
-        it('When user clears text in the \'Alternative text\' input field, then alternative text should not be displayed for canvas image', () => {
-            figOverImageCanvasComponent.steps.clearImageAlternativeTextInputFieldText();
-            figOverImageCanvasComponent.steps.verifyNoImageAlternativeTextPresentInEditTab();
+        it('When user clears text in the \'Alternative text\' input field, then default alternative text should be displayed for canvas image', () => {
+            imageCanvasComponent.steps.clearImageAlternativeTextInputFieldText();
+            imageCanvasComponent.steps.verifyDefaultImageAlternativeTextPresentInEditTab();
         });
     },
 
     verifyImageAlignmentPreviewTabFunctionality: () => {
         it('When \'Top left\' image alignment is selected by default, then in preview tab canvas image should be aligned to top left', () => {
-            figOverImageCanvasComponent.steps.switchToPreviewTab();
-            figOverImageCanvasComponent.steps.verifyImageIsUploadedInPreviewTab();
-            figOverImageCanvasComponent.steps.verifyCanvasImageTopLeftAlignedInPreviewTab();
+            imageCanvasComponent.steps.switchToPreviewTab();
+            imageCanvasComponent.steps.verifyImageIsUploadedInPreviewTab();
+            imageCanvasComponent.steps.verifyCanvasImageTopLeftAlignedInPreviewTab();
         });
 
         it('When user selects \'Center\' image alignment in edit tab, then canvas image should be aligned to center in preview tab ', () => {
-            figOverImageCanvasComponent.steps.switchToEditTab();
-            figOverImageCanvasComponent.steps.selectCenterImageAlignment();
-            figOverImageCanvasComponent.steps.switchToPreviewTab();
-            figOverImageCanvasComponent.steps.verifyCanvasImageCenterAlignedInPreviewTab();
+            imageCanvasComponent.steps.switchToEditTab();
+            imageCanvasComponent.steps.selectCenterImageAlignment();
+            imageCanvasComponent.steps.switchToPreviewTab();
+            imageCanvasComponent.steps.verifyCanvasImageCenterAlignedInPreviewTab();
         });
 
         it('When user selects \'Top right\' image alignment, then canvas image should be aligned to top right in preview tab', () => {
-            figOverImageCanvasComponent.steps.switchToEditTab();
-            figOverImageCanvasComponent.steps.selectTopRightImageAlignment();
-            figOverImageCanvasComponent.steps.switchToPreviewTab();
-            figOverImageCanvasComponent.steps.verifyCanvasImageTopRightAlignedInPreviewTab();
+            imageCanvasComponent.steps.switchToEditTab();
+            imageCanvasComponent.steps.selectTopRightImageAlignment();
+            imageCanvasComponent.steps.switchToPreviewTab();
+            imageCanvasComponent.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', () => {
-            figOverImageCanvasComponent.steps.switchToEditTab();
-            figOverImageCanvasComponent.steps.selectTopLeftImageAlignment();
-            figOverImageCanvasComponent.steps.switchToPreviewTab();
-            figOverImageCanvasComponent.steps.verifyCanvasImageTopLeftAlignedInPreviewTab();
+            imageCanvasComponent.steps.switchToEditTab();
+            imageCanvasComponent.steps.selectTopLeftImageAlignment();
+            imageCanvasComponent.steps.switchToPreviewTab();
+            imageCanvasComponent.steps.verifyCanvasImageTopLeftAlignedInPreviewTab();
         });
     },
 
     verifyFillImageToCanvasPreviewTabFunctionality: () => {
         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', () => {
-            figOverImageCanvasComponent.steps.switchToEditTab();
-            figOverImageCanvasComponent.steps.checkFillImageToCanvasCheckbox(); figOverImageCanvasComponent.steps.switchToPreviewTab();
-            figOverImageCanvasComponent.steps.verifyImageFitsToCanvasInPreviewTab();
+            imageCanvasComponent.steps.switchToEditTab();
+            imageCanvasComponent.steps.checkFillImageToCanvasCheckbox(); imageCanvasComponent.steps.switchToPreviewTab();
+            imageCanvasComponent.steps.verifyImageFitsToCanvasInPreviewTab();
         });
 
         // Failed due to https://redmine.zeuslearning.com/issues/556897
         it('When user unchecks \'Fill image to canvas\' checkbox, then image dimensions should set to default state in preview tab', () => {
-            figOverImageCanvasComponent.steps.switchToEditTab();
-            figOverImageCanvasComponent.steps.uncheckFillImageToCanvasCheckbox();
-            figOverImageCanvasComponent.steps.switchToPreviewTab();
-            figOverImageCanvasComponent.steps.verifyImageDoesNotFitToCanvas();
+            imageCanvasComponent.steps.switchToEditTab();
+            imageCanvasComponent.steps.uncheckFillImageToCanvasCheckbox();
+            imageCanvasComponent.steps.switchToPreviewTab();
+            imageCanvasComponent.steps.verifyImageDoesNotFitToCanvas();
         });
     },
 
     verifyImageAlternativeTextPreviewTabFunctionality: () => {
         it('When user enters text in the \'Alternative text\' input field, then alternative text should be displayed in the \'Preview tab\'', () => {
-            figOverImageCanvasComponent.steps.switchToEditTab();
-            figOverImageCanvasComponent.steps.enterAndVerifyImageAlternativeTextInInputField('This is Alternative text for image');
+            imageCanvasComponent.steps.switchToEditTab();
+            imageCanvasComponent.steps.enterAndVerifyImageAlternativeTextInInputField('This is Alternative text for image');
             cy.log('Switching to Preview Tab');
-            figOverImageCanvasComponent.steps.switchToPreviewTab();
-            figOverImageCanvasComponent.steps.verifyImageAlternativeTextInPreviewTab('This is Alternative text for image');
+            imageCanvasComponent.steps.switchToPreviewTab();
+            imageCanvasComponent.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\'', () => {
-            figOverImageCanvasComponent.steps.switchToEditTab();
-            figOverImageCanvasComponent.steps.clearImageAlternativeTextInputFieldText();
-            figOverImageCanvasComponent.steps.switchToPreviewTab();
-            figOverImageCanvasComponent.steps.verifyNoImageAlternativeTextPresentInPreviewTab();
+        it('When user clears text in the \'Alternative text\' input field, then default alternative text should  be displayed in the \'Preview tab\'', () => {
+            imageCanvasComponent.steps.switchToEditTab();
+            imageCanvasComponent.steps.clearImageAlternativeTextInputFieldText();
+            imageCanvasComponent.steps.switchToPreviewTab();
+            imageCanvasComponent.steps.verifyDefaultImageAlternativeTextPresentInPreviewTab();
         });
     },
 
     verifyImageOpacityPreviewTabFunctionality: () => {
         it('When opacity is 100 percent by default, then canvas image should have 100 percent opacity in preview tab ', () => {
-            figOverImageCanvasComponent.steps.verifyOpacityValueForCanvasImageInPreviewTab(100);
+            imageCanvasComponent.steps.verifyOpacityValueForCanvasImageInPreviewTab(100);
         });
 
         it('When user changes opacity slider value in edit tab, then opacity for canvas image should change accordingly in preview tab ', () => {
-            figOverImageCanvasComponent.steps.switchToEditTab();
-            figOverImageCanvasComponent.steps.clickActionOnOpacitySlider();
-            figOverImageCanvasComponent.steps.switchToPreviewTab();
-            figOverImageCanvasComponent.steps.verifyOpacityValueForCanvasImageInPreviewTab(50);
+            imageCanvasComponent.steps.switchToEditTab();
+            imageCanvasComponent.steps.clickActionOnOpacitySlider();
+            imageCanvasComponent.steps.switchToPreviewTab();
+            imageCanvasComponent.steps.verifyOpacityValueForCanvasImageInPreviewTab(50);
         });
 
         it('When user changes opacity input field value in edit tab, then opacity for canvas image should change accordingly in preview tab ', () => {
-            figOverImageCanvasComponent.steps.switchToEditTab();
-            figOverImageCanvasComponent.steps.enterInputToOpacityInputField(40);
-            figOverImageCanvasComponent.steps.switchToPreviewTab();
-            figOverImageCanvasComponent.steps.verifyOpacityValueForCanvasImageInPreviewTab(40);
+            imageCanvasComponent.steps.switchToEditTab();
+            imageCanvasComponent.steps.enterInputToOpacityInputField(40);
+            imageCanvasComponent.steps.switchToPreviewTab();
+            imageCanvasComponent.steps.verifyOpacityValueForCanvasImageInPreviewTab(40);
         });
     },
 
     verifyImageOpacityEditTabFunctionality: () => {
         it('When opacity value is set to 100 percent by default, then opacity for image should be100 percent inside canvas', () => {
-            figOverImageCanvasComponent.steps.verifyOpacityValueForCanvasImage(100);
+            imageCanvasComponent.steps.verifyOpacityValueForCanvasImage(100);
         });
 
         it('When user changes opacity slider value , then opacity for image should be updated accordingly', () => {
-            figOverImageCanvasComponent.steps.clickActionOnOpacitySlider();
-            figOverImageCanvasComponent.steps.verifyOpacityValueForCanvasImage(50);
+            imageCanvasComponent.steps.clickActionOnOpacitySlider();
+            imageCanvasComponent.steps.verifyOpacityValueForCanvasImage(50);
         });
 
         it('When user changes opacity value in input field, then opacity for image should be updated accordingly', () => {
-            figOverImageCanvasComponent.steps.enterInputToOpacityInputField(40);
-            figOverImageCanvasComponent.steps.verifyOpacityInputFieldValue(40);
-            figOverImageCanvasComponent.steps.verifyOpacityValueForCanvasImage(40);
+            imageCanvasComponent.steps.enterInputToOpacityInputField(40);
+            imageCanvasComponent.steps.verifyOpacityInputFieldValue(40);
+            imageCanvasComponent.steps.verifyOpacityValueForCanvasImage(40);
         });
     },
 
     verifyImageNotExistPreviewTab: () => {
         it('When user deletes the uploaded image file in edit tab, then canvas image should not appear in preview tab', () => {
-            figOverImageCanvasComponent.steps.switchToEditTab();
+            imageCanvasComponent.steps.switchToEditTab();
             backgroundImageUploadComponent.steps.deleteImage();
             backgroundImageUploadComponent.steps.clickOnDeleteButtonInDeleteImagePopup();
-            figOverImageCanvasComponent.steps.switchToPreviewTab();
-            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.canvasImageInPreviewTab(), 'notExist');
+            imageCanvasComponent.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(imageCanvasComponent.canvasImageInPreviewTab(), 'notExist');
         });
     },
 }
 
-export const figOverImageCanvasComponent = {
+export const imageCanvasComponent = {
     ...selectors,
     steps,
     tests