itemengine-cypress-automation 1.0.86 → 1.0.88

package/cypress/pages/components/customizeSpecialCharacterComponent.js

@@ -0,0 +1,165 @@
+import utilities from "../../support/helpers/utilities";
+
+const selectors = {
+    groupByLanguageRadioButton: () => cy.get('[class*="CustomizedSpecialCharacterstyles__RadioGroupWrapper"] .ngie-radio-btn input').eq(0),
+    groupByLanguageLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__RadioGroupWrapper"] .ngie-radio-label').eq(0),
+    showOnlyCustomSpecialCharactersRadioButton: () => cy.get('[class*="CustomizedSpecialCharacterstyles__RadioGroupWrapper"] .ngie-radio-btn input').eq(1),
+    showOnlyCustomSpecialCharactersLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__RadioGroupWrapper"] .ngie-radio-label').eq(1),
+    selectSpecialCharacterLanguagesLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__SpecialCharLabel"]'),
+    customizeSpecialCharactersPreviewButton: () => cy.get('[class*="CustomizedSpecialCharacterstyles__PreviewLabel"]'),
+    specialCharactersCategoryTileTickIcon: () => cy.get('.tick-icon-wrapper'),
+    TickIcon: () => cy.get('.tick-icon-wrapper'),
+    specialCharactersCategoryTilesWrapper: () => cy.get('[class*="CustomizedSpecialCharacterstyles__DragAndDropWrapper"]'),
+    specialCharacterTiles: (specialCharacterCategory = null) => {
+        if (specialCharacterCategory) {
+            return cy.get(`[id*="DraggableItem"] button[aria-label="${specialCharacterCategory}"]`)
+        } else {
+            return cy.get('[id*="DraggableItem"] button')
+        }
+    },
+    specialCharacterTileIcon: () => cy.get('.equation-editor-icon'),
+    specialCharacterTileCategoryName: () => cy.get('.equation-editor-label-wrapper'),
+    specialCharacterTileSectionCategoriesDragIcon: () => cy.get('.drag-icon-equation-editor-button'),
+    //Special characters preview popup
+    specialCharactersPreviewPopupCharactersCategoryWrapper: () => cy.get('[class*="special"][class*="accordion"]'),
+    specialCharactersPreviewPopupCategoryAccordionExpandIcon: () => cy.get('[class*="expandIconWrapper"]'),
+    specialCharactersPreviewPopupCategoryLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__AccordionLabel"]'),
+    specialCharactersPreviewPopupSymbol: () => cy.get('[class*="CustomizedSpecialCharacterstyles__CharacterWrapper"]'),
+
+    //Show only custom special characters section
+    customSpecialCharactersLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__SpecialCharLabel"]'),
+    customSpecialCharactersInputField: () => cy.get('input[aria-label="Custom special characters"]'),
+}
+
+const steps = {
+    verifyGroupedByLanguageRadioButtonIsSelected: () => {
+        customizeSpecialCharacterComponent.groupByLanguageRadioButton()
+            .should('be.checked');
+    },
+
+    selectGroupByLanguageRadioButton: () => {
+        customizeSpecialCharacterComponent.groupByLanguageRadioButton()
+            .click()
+            .should('be.checked');
+    },
+
+    selectShowOnlyCustomSpecialCharactersRadioButton: () => {
+        customizeSpecialCharacterComponent.showOnlyCustomSpecialCharactersRadioButton()
+            .click()
+            .should('be.checked');
+    },
+
+    clickOnCustomizeSpecialCharactersPreviewButton: () => {
+        customizeSpecialCharacterComponent.customizeSpecialCharactersPreviewButton()
+            .click();
+    },
+
+    /**
+        * @description Click on category accordion expand icon in special characters popup
+        * @param {number} index Index of category in popup
+        */
+    clickOnSpecialCharactersPreviewPopupCategoryAccordionExpandIcon: (index) => {
+        customizeSpecialCharacterComponent.specialCharactersPreviewPopupCategoryAccordionExpandIcon()
+            .eq(index)
+            .click();
+    },
+
+    /**
+    * @description Verify the special characters preview popup in edit tab
+    * @param {object[]} categoryAndSymbolsArray Array of list of categories and their symbols
+    */
+    verifySpecialCharactersPreviewPopupInEditTab: (categoryAndSymbolsArray) => {
+        categoryAndSymbolsArray.forEach((category, index) => {
+            utilities.verifyInnerText(customizeSpecialCharacterComponent.specialCharactersPreviewPopupCategoryLabel().eq(index), `${category.categoryName}`);
+            customizeSpecialCharacterComponent.specialCharactersPreviewPopupCharactersCategoryWrapper()
+                .eq(index)
+                .within(() => {
+                    customizeSpecialCharacterComponent.specialCharactersPreviewPopupCategoryLabel()
+                        .click();
+                    category.symbols.forEach((symbolARIALabel, index) => {
+                        customizeSpecialCharacterComponent.charactersPopupCharacterSymbol() //Check this
+                            .eq(index)
+                            .find('svg')
+                            .should('have.attr', 'aria-label', `${symbolARIALabel}`);
+                    });
+                });
+        });
+    },
+
+    /**
+     * @description Verify customized special character category tiles in edit tab
+     * @param {string[]} charactersCategoriesArray Array of special character categories
+     */
+    verifyCustomizeSpecialCharactersCategoryTiles: (charactersCategoriesArray) => {
+        customizeSpecialCharacterComponent.specialCharactersCategoryTilesWrapper()
+            .within(() => {
+                charactersCategoriesArray.forEach((characterCategory, index) => {
+                    customizeSpecialCharacterComponent.specialCharacterTiles()
+                        .eq(index)
+                        .should('have.attr', 'aria-label', `${characterCategory}`);
+                });
+            });
+        utilities.verifyElementCount(customizeSpecialCharacterComponent.specialCharacterTiles(), charactersCategoriesArray.length);
+    },
+
+    /**
+    * @description Verify selected special characters category tiles 
+    * @param {string[]} selectedSpecialCharactersCategoriesArray Array of selected special characters categories
+    */
+    verifySelectedCustomizeSpecialCharactersCategoryTiles: (selectedSpecialCharactersCategoriesArray) => {
+        customizeSpecialCharacterComponent.specialCharactersCategoryTilesWrapper()
+            .within(() => {
+                selectedSpecialCharactersCategoriesArray.forEach((characterCategory) => {
+                    customizeSpecialCharacterComponent.specialCharacterTiles(characterCategory)
+                        .should('have.class', 'Mui-selected')
+                        .within(() => {
+                            utilities.verifyElementVisibilityState(customizeSpecialCharacterComponent.specialCharactersCategoryTileTickIcon(), 'visible');
+                        });
+                });
+            });
+    },
+
+    clickOnSpecialCharactersCategoryTile: (categoryName) => {
+        customizeSpecialCharacterComponent.specialCharacterTiles(categoryName)
+            .click();
+    },
+
+    verifySpecialCharacterCategoryTileIsSelected: (categoryName) => {
+        customizeSpecialCharacterComponent.specialCharacterTiles(categoryName)
+            .should('have.attr', 'data-aria-pressed', 'false')
+            .within(() => {
+                utilities.verifyElementVisibilityState(customizeSpecialCharacterComponent.TickIcon(), 'visible');
+            });
+    },
+
+    verifySpecialCharacterCategoryTileIsNotSelected: (categoryName) => {
+        customizeSpecialCharacterComponent.specialCharacterTiles(categoryName)
+            .should('have.attr', 'data-aria-pressed', 'false')
+            .within(() => {
+                utilities.verifyElementVisibilityState(customizeSpecialCharacterComponent.TickIcon(), 'hidden');
+            });
+    },
+
+    addInputToCustomSpecialCharactersInputField: (input) => {
+        customizeSpecialCharacterComponent.customSpecialCharactersInputField()
+            .type(`${input}`)
+            .should('have.value', `${input}`)
+    },
+
+    /**
+     * Verify custom special characters displayed in edit tab preview popup
+     * @param {string[]} customSpecialCharacters Array of custom special characters
+     */
+    verifyCustomSpecialCharactersDisplayedInPreviewPopupEditTab: (customSpecialCharacters) => {
+        customSpecialCharacters.forEach((customSpecialCharacter, index) => {
+            utilities.verifyInnerText(customizeSpecialCharacterComponent.specialCharactersPreviewPopupSymbol().eq(index), `${customSpecialCharacter}`);
+            utilities.verifyElementVisibilityState(customizeSpecialCharacterComponent.specialCharactersPreviewPopupSymbol().eq(index), 'visible');
+        });
+        utilities.verifyElementCount(customizeSpecialCharacterComponent.specialCharactersPreviewPopupSymbol(), `${customSpecialCharacters.length}`);
+    },
+}
+
+export const customizeSpecialCharacterComponent = {
+    ...selectors,
+    steps
+}

package/cypress/pages/components/equationEditorFlyout.js

@@ -1,6 +1,7 @@
 import { equationEditorCategoriesAndSymbols } from "../../fixtures/equationEditorCategoriesAndSymbols ";
 import constants from "../../fixtures/constants";
 import { dialogBoxBase } from "../dialogBoxBase";
+import utilities from "../../support/helpers/utilities";
 const css = Cypress.env('css');
 
 const selectors = {
@@ -34,6 +35,129 @@ const selectors = {
 }
 
 const steps = {
+    /**
+     * @description verify category is not displayed in preview tab equation editor
+     * @param {string} categoryName Name of category
+     */
+    verifyCategoryIsNotDisplayedInEquationEditorPreviewTab: (categoryName) => {
+        utilities.verifyElementVisibilityState(equationEditorFlyout.categoryTab().contains(`${categoryName}`), 'notExist');
+    },
+
+    /**
+     * @description verify category in preview tab equation editor
+     * @param {string} categoryName Name of category
+     * @param {string} categoryIcon Icon of category
+     */
+    verifyCategoryInEquationEditorPreviewTab: (categoryName, categoryIcon) => {
+        equationEditorFlyout.categoryTab()
+            .contains(`${categoryName}`)
+            .parents('.tool-wrapper')
+            .within(() => {
+                utilities.verifyElementVisibilityState(equationEditorFlyout.categoryTabTitle(), 'visible');
+                utilities.verifyElementVisibilityState(equationEditorFlyout.categoryTabIcon(), 'visible');
+                utilities.verifyTextContent(equationEditorFlyout.categoryTabTitle(), `${categoryName}`);
+                utilities.verifyTextContent(equationEditorFlyout.categoryTabIcon(), `${categoryIcon}`);
+            });
+    },
+
+    /**
+     * @description select equation editor category in preview tab
+     * @param {string} categoryName Name of category
+     */
+    selectEquationEditorCategoryPreviewTab: (categoryName) => {
+        equationEditorFlyout.categoryTab()
+            .contains(`${categoryName}`)
+            .click();
+    },
+
+    /**
+    * @description Verify the symbols displayed in equation editor category in preview tab
+    * @param {string} categoryAccordionDisplayName Display name of category accordion in create custom category flyout
+    * @param {object[]} symbolsArray An array of objects which contain aria-label, title and text element of every symbol
+    * @param {string} symbolsArray[].title Title of symbol
+    * @param {string} symbolsArray[].textElement Text element of symbol
+    * @param {string} symbolsArray[].ariaLabel aria-label of symbol
+    * @example  [
+                    {
+                    title: 'One',
+                    textElement: '1',
+                    ariaLabel: 'one'
+                    },
+                    {
+                    title: 'Two',
+                    textElement: '2',
+                    ariaLabel: 'two'
+                    },
+                ]    
+    */
+    verifyCharactersDisplayedInEquationEditorCategoryPreviewTab: (symbolsArray) => {
+        equationEditorFlyout.categoryCharacters()
+            .each(($el, index) => {
+                cy.wrap($el)
+                    .should('have.attr', 'aria-label', symbolsArray[index].ariaLabel)
+                utilities.verifyTextContent(cy.wrap($el).find('title'), `${symbolsArray[index].title}`);
+                if (symbolsArray[index].textElement !== null) {
+                    utilities.verifyTextContent(cy.wrap($el), `${symbolsArray[index].textElement}`);
+                }
+            });
+        utilities.verifyElementCount(equationEditorFlyout.categoryCharacters(), symbolsArray.length);
+    },
+
+    /**
+     * @description Select category and enter the equations in equation editor input field
+     * @param {Object[]} responses - An array of objects containing the categoryName and symbolName
+     * @param {string} responses[].categoryName Name of the category
+     * @param {string} responses[].symbolName Name of the symbol from the selected category
+     */
+    enterEquation: (responses) => {
+        responses.forEach(({ categoryName, symbolName }) => {
+            equationEditorFlyout.categoryTab()
+                .contains(equationEditorCategoriesAndSymbols[categoryName].displayName, { matchCase: false })
+                .click();
+            symbolName.forEach((individualSymbol) => {
+                equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols[categoryName].symbols[individualSymbol].ariaLabel)
+                    .click();
+            });
+        });
+    },
+
+    /**
+     * @description type in the equation editor input field
+     * @param {string} text - text to be entered in the input field
+     */
+    enterTextInPreviewInputField: (text) => {
+        equationEditorFlyout.previewInputField()
+            .type(text);
+    },
+
+    clickOnOkButton: () => {
+        equationEditorFlyout.buttonOk()
+            .click();
+    },
+
+    /**
+     * @description type in the equation editor input field first empty box
+     * @param {string} text - text to be entered in the first empty box of field
+     */
+    enterTextInFirstEmptyBox: (textArray) => {
+        textArray.forEach((text) => {
+            equationEditorFlyout.inputFieldFirstEmptyBox()
+                .click()
+                .type(text)
+        });
+    },
+
+    /**
+     * @description type in the equation editor cursor input field
+     * @param {string} text - text to be entered at the cursor
+     */
+    enterTextAtInputFieldCursor: (text) => {
+        equationEditorFlyout.inputFieldCursor()
+            .click()
+            .type(text)
+    },
+
+    ///Old
     addGenericEquationUsingEquationEditorToCKEditorInputField: () => {
         equationEditorFlyout.categoryTab(equationEditorCategoriesAndSymbols['basic'].displayName)
             .click();

package/cypress/pages/components/essayResponseCommonComponents.js

@@ -155,6 +155,9 @@ const steps = {
             .should('be.checked');
     },
 
+    
+    ///OLD
+
     //TODO: need to improve this, we are passing two parameters here, only one should suffice
     openAndSelectOptionFromDisplayWordLimitDropdown: (optionIndex, optionName) => {
         essayResponseCommonComponents.displayWordLimitDropdown()

package/cypress/pages/components/figOverImageCanvasComponent.js

@@ -1,12 +1,38 @@
 import utilities from "../../support/helpers/utilities";
 import { backgroundImageUploadComponent } from "./backgroundImageUploadComponent";
+import { commonComponents } from "./commonComponents";
 import { createQuestionBasePage } from "./createQuestionBasePage";
 
 const selectors = {
     insertResponseAreaButton: () => cy.get('button[aria-label*="insert"]').eq(0),
     selectResponseAreaButton: () => cy.get('button[aria-label*="select"]').eq(0),
+    insertTextAreaButton: () => cy.get('button[aria-label*="insert text"]').eq(0),
     canvas: () => cy.get('[class*="Canvasstyle__DragAndDropCanvas"]'),
     canvasInPreviewTab: () => cy.get('[class*="PreviewTabstyles__ContentWrapper"] [class*="Canvasstyle__DragAndDropCanvas"]'),
+    canvasLabel: () => cy.get('[class*="Canvasstyle__CanvasTxt"]'),
+    selectDropzoneButton: () => cy.get('[aria-label="select dropzone"]'),
+    insertDropzoneButton: () => cy.get('[aria-label="insert dropzone"]'),
+    insertTextButton: () => cy.get('[aria-label="insert text"]'),
+    undoButton: () => cy.get('[aria-label="undo"]'),
+    redoButton: () => cy.get('[aria-label="redo"]'),
+    clearAllButton: () => cy.get('[aria-label="clear all"]'),
+    canvasSelectedMenuText: () => cy.get('[class*="Canvasstyle__CanvasSelectedMenuTxt"]'),
+    dropzoneWrapper: () => cy.get('[class*="Canvasstyle__ResponseDiv"]'),
+    dropzonePointer: () => cy.get('[class*="Canvasstyle__PointerWrapper"]'),
+    dropzone: () => cy.get('[class*="Canvasstyle__DropZone"]'),
+    dropzonePointerInPreviewTab: () => cy.get('.preview-content-wrapper [class*="Canvasstyle__PointerWrapper"]'),
+    dropzoneInPreviewTab: () => cy.get('.preview-content-wrapper [class*="Canvasstyle__DropzoneWrapper"]'),
+    textBoxInPreviewTab: () => cy.get('.preview-content-wrapper [class*="Canvasstyle__TextBoxContainer"] textarea'),
+    removeDropzoneButton: () => cy.get('.remove-button'),
+    dropzoneNumerationText: () => cy.get('[class*="Canvasstyle__DropzoneContent"]'),
+    dropzoneStyle: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`.canvas-secondary-control[aria-label="${ariaLabel}"]`)
+        } else {
+            return cy.get('.canvas-secondary-control')
+        }
+    },
+    textResponse: () => cy.get('[class*="Canvasstyle__TextBoxContainer"] textarea'),
     canvasImage: () => cy.get('.canvas-image'),
     canvasImageInPreviewTab: () => cy.get('[class*="PreviewTabstyles__ContentWrapper"] .canvas-image'),
     imagePropertiesLabel: () => cy.get('[class*="ImagePropertiesstyles__SectionLabel"]'),
@@ -22,8 +48,10 @@ const selectors = {
     canvasHeightInputField: () => cy.get('.common-text-wrapper .text-field').eq(1),
     imageAlternativeTextLabel: () => cy.get('[class*="InlineTextFieldWithDebouncestyles__PropertyLabel"]'),
     imageAlternativeTextInputField: () => cy.get('[class*="ImagePropertiesstyles__AltTextWrapper"] input'),
-    canvasImagePreviewTab: () => cy.get('.background-image'),
-    removeDropzoneButton: () => cy.get('.remove-button')
+    editColorLabel: () => cy.get('[class*="Canvasstyle__TextColorArray"] p'),
+    selectedColorBlockInTextColorPopup: () => cy.get('.color-library-selected'),
+    textColorPopupWrapper: () => cy.get('[class*="Canvasstyle__TextColorPopupWrapper"]'),
+    textColorLabelInTextColorPopup: () => cy.get('[class*="Canvasstyle__PopupText"]'),
 }
 
 const steps = {
@@ -46,6 +74,25 @@ const steps = {
             .click();
     },
 
+    /**
+    * @param {number} xCoordinateInPercentage - The x co-ordinate for position of the response area
+    * @description Adds response area to the canvas.
+    */
+    insertTextArea: (yCoordinateInPercentage) => {
+        figOverImageCanvasComponent.insertTextAreaButton()
+            .click();
+        figOverImageCanvasComponent.canvasImage()
+            .then(($element) => {
+                const imageHeight = $element[0].clientHeight;
+                const xCoordinate = 80;
+                const yCoordinate = yCoordinateInPercentage * imageHeight / 100;
+                figOverImageCanvasComponent.canvasImage()
+                    .click(xCoordinate, yCoordinate, { force: true });
+            });
+        figOverImageCanvasComponent.textResponse()
+            .type(text);
+    },
+
     verifyImageIsUploaded: () => {
         utilities.verifyElementVisibilityState(figOverImageCanvasComponent.canvasImage(), 'visible');
         utilities.verifyElementVisibilityState(backgroundImageUploadComponent.uploadImageProgressBar(), 'notExist');
@@ -149,11 +196,11 @@ const steps = {
             .should('have.attr', 'opacity', value);
     },
 
-     /**
-     * @param {number} value holds opacity value for image
-     * @description function verifies opacity value for image
-     */
-     verifyOpacityValueForCanvasImageInPreviewTab: (value) => {
+    /**
+    * @param {number} value holds opacity value for image
+    * @description function verifies opacity value for image
+    */
+    verifyOpacityValueForCanvasImageInPreviewTab: (value) => {
         figOverImageCanvasComponent.canvasImageInPreviewTab()
             .should('have.attr', 'opacity', value);
     },
@@ -293,6 +340,246 @@ const steps = {
         figOverImageCanvasComponent.canvasInPreviewTab()
             .should('have.css', 'height', `${height}px`);
     },
+
+    /**
+     * @param {"Insert dropzone"|"Insert text"|"Select dropzone"} {String} button denotes selected button name
+     *@description function verifies button active state
+     */
+    verifyCanvasMenuButtonSelected: (button) => {
+        switch (button) {
+            case 'Insert dropzone': figOverImageCanvasComponent.insertDropzoneButton()
+                .should('have.class', 'active');
+                break;
+            case 'Insert text': figOverImageCanvasComponent.insertTextButton()
+                .should('have.class', 'active');
+                break;
+            case 'Select dropzone': figOverImageCanvasComponent.selectDropzoneButton()
+                .should('have.class', 'active');
+                break;
+        }
+    },
+
+    /**
+         * @param {"Insert dropzone"|"Insert text"|"Select dropzone"} {String} button denotes selected button name
+         *@description function selects button
+         */
+    selectCanvasMenuButton: (button) => {
+        switch (button) {
+            case 'Insert dropzone': figOverImageCanvasComponent.insertDropzoneButton()
+                .click()
+                .should('have.class', 'active');
+                break;
+            case 'Insert text': figOverImageCanvasComponent.insertTextButton()
+                .click()
+                .should('have.class', 'active');
+                break;
+            case 'Select dropzone': figOverImageCanvasComponent.selectDropzoneButton()
+                .click()
+                .should('have.class', 'active');
+                break;
+        }
+    },
+
+    redoAction: () => {
+        figOverImageCanvasComponent.redoButton()
+            .click();
+    },
+
+    undoAction: () => {
+        figOverImageCanvasComponent.undoButton()
+            .click();
+    },
+
+    clearAll: () => {
+        figOverImageCanvasComponent.clearAllButton()
+            .click();
+    },
+
+    verifyUndoButtonDisabled: () => {
+        utilities.verifyElementDisabled(figOverImageCanvasComponent.undoButton());
+    },
+
+    verifyRedoButtonDisabled: () => {
+        utilities.verifyElementDisabled(figOverImageCanvasComponent.redoButton());
+    },
+
+    verifyUndoButtonEnabled: () => {
+        utilities.verifyElementNotDisabled(figOverImageCanvasComponent.undoButton());
+    },
+
+    verifyRedoButtonEnabled: () => {
+        utilities.verifyElementNotDisabled(figOverImageCanvasComponent.redoButton());
+    },
+
+    /**
+     * @param {number} dropzoneIndex dropzone number
+     * @description function selects dropzone of a particular index
+     */
+    selectDropzone: (dropzoneIndex) => {
+        figOverImageCanvasComponent.dropzone()
+            .eq(dropzoneIndex)
+            .click();
+    },
+
+    /**
+     * @param {string} style dropzone pointer orientation
+     * @description function selects dropzone pointer style
+     */
+    selectDropzonePointerStyle: (style) => {
+        figOverImageCanvasComponent.dropzoneStyle(style)
+            .click();
+    },
+
+    clickOnCanvasSelectedMenuText: () => {
+        figOverImageCanvasComponent.canvasSelectedMenuText()
+            .click();
+    },
+
+    verifyDropzonePointerStyle: (style, dropzoneIndex) => {
+        const getPosition = (option) => {
+            switch (option) {
+                case 'bottom':
+                    return { top: '-31.5px', left: '-37.5px' };
+                case 'bottom right':
+                    return { top: '-25px', left: '-40px' };
+                case 'right':
+                    return { top: '-21px', left: '-36.5px' };
+                case 'top right':
+                    return { top: '-19px', left: '-31px' };
+                case 'top':
+                    return { top: '-22.5px', left: '-25.5px' };
+                case 'top left':
+                    return { top: '-27px', left: '-24px' };
+                case 'left':
+                    return { bottom: '-20px', left: '-27px' };
+                case 'bottom left':
+                    return { bottom: '-18px', left: '-32px' };
+            }
+        }
+        const expectedPosition = getPosition(style);
+        if (style == 'left' || style == 'bottom left') {
+            figOverImageCanvasComponent.dropzonePointer()
+                .eq(dropzoneIndex)
+                .should('have.css', 'bottom', expectedPosition.bottom)
+                .and('have.css', 'left', expectedPosition.left);
+        }
+        else if (style == 'none') {
+            figOverImageCanvasComponent.dropzone()
+                .parent()
+                .should('not.contain', '[class*="Canvasstyle__PointerWrapper"]');
+        }
+        else {
+            figOverImageCanvasComponent.dropzonePointer()
+                .eq(dropzoneIndex)
+                .should('have.css', 'top', expectedPosition.top)
+                .and('have.css', 'left', expectedPosition.left);
+        }
+    },
+
+    verifyDropzonePointerStyleInPreviewTab: (style, dropzoneIndex) => {
+        const getPosition = (option) => {
+            switch (option) {
+                case 'bottom':
+                    return { top: '-31.5px', left: '-37.5px' };
+                case 'bottom right':
+                    return { top: '-25px', left: '-40px' };
+                case 'right':
+                    return { top: '-21px', left: '-36.5px' };
+                case 'top right':
+                    return { top: '-19px', left: '-31px' };
+                case 'top':
+                    return { top: '-22.5px', left: '-25.5px' };
+                case 'top left':
+                    return { top: '-27px', left: '-24px' };
+                case 'left':
+                    return { bottom: '-20px', left: '-27px' };
+                case 'bottom left':
+                    return { bottom: '-18px', left: '-32px' };
+            }
+        }
+        const expectedPosition = getPosition(style);
+        if (style == 'left' || style == 'bottom left') {
+            figOverImageCanvasComponent.dropzonePointerInPreviewTab()
+                .eq(dropzoneIndex)
+                .should('have.css', 'bottom', expectedPosition.bottom)
+                .and('have.css', 'left', expectedPosition.left);
+        }
+        else if (style == 'none') {
+            figOverImageCanvasComponent.dropzonePointerInPreviewTab()
+                .eq(dropzoneIndex)
+                .should('not.have.css', 'bottom')
+                .and('not.have.css', 'left');
+        }
+        else {
+            figOverImageCanvasComponent.dropzonePointerInPreviewTab()
+                .eq(dropzoneIndex)
+                .should('have.css', 'top', expectedPosition.top)
+                .and('have.css', 'left', expectedPosition.left);
+        }
+    },
+
+    verifyDropzoneNotExistInPreviewTab: () => {
+        utilities.verifyElementVisibilityState(figOverImageCanvasComponent.dropzoneInPreviewTab(), 'notExist');
+    },
+
+    verifyTextBoxNotExistInPreviewTab: () => {
+        utilities.verifyElementVisibilityState(figOverImageCanvasComponent.textBoxInPreviewTab(), 'notExist');
+    },
+
+    verifyDropzoneExistInPreviewTab: () => {
+        figOverImageCanvasComponent.dropzoneInPreviewTab()
+            .should('be.visible');
+    },
+
+    verifyTextBoxExistInPreviewTab: () => {
+        figOverImageCanvasComponent.textBoxInPreviewTab()
+            .should('be.visible');
+    },
+
+    verifyTextColorOfTextBox: (color) => {
+        figOverImageCanvasComponent.textResponse()
+            .should('have.css', 'color', color);
+    },
+
+    verifyTextColorOfTextBoxInPreviewTab: (color) => {
+        figOverImageCanvasComponent.textBoxInPreviewTab()
+            .should('have.css', 'color', color);
+    },
+
+    verifyTextOfTextBox: (text) => {
+        figOverImageCanvasComponent.textResponse()
+            .invoke('text')
+            .should('eq', text);
+    },
+
+    verifyTextOfTextBoxInPreviewTab: (text) => {
+        figOverImageCanvasComponent.textBoxInPreviewTab()
+            .invoke('text')
+            .should('eq', text);
+    },
+
+    clickOnTextColorButton: () => {
+        figOverImageCanvasComponent.dropzoneStyle()
+            .click();
+        utilities.verifyElementVisibilityState(figOverImageCanvasComponent.textColorPopupWrapper(), 'visible');
+    },
+
+    clickOnEditColorButton: () => {
+        figOverImageCanvasComponent.editColorLabel()
+            .click();
+    },
+
+    verifyColorBlockSelectedState: () => {
+        figOverImageCanvasComponent.selectedColorBlockInTextColorPopup()
+            .find('[data-name="Selected card icon"]')
+            .should('be.visible');
+    },
+
+    verifyColorBlock: (color) => {
+        figOverImageCanvasComponent.selectedColorBlockInTextColorPopup()
+            .should('have.css', 'background-color', color);
+    },
+
     /**
      * @description this function removes a dropzone from the canvas
      * @param {number} index of the dropzone to be removed
@@ -301,6 +588,28 @@ const steps = {
         figOverImageCanvasComponent.removeDropzoneButton()
             .eq(index)
             .click({ force: true });
+    },
+
+    /**
+     * @param {string} selectedMenu denotes canvas selected menu text
+     * @description function verifies inner text and visibility of canvas selected menu text
+     */
+    verifyCanvasSelectedMenuText: (selectedMenu) => {
+        utilities.verifyInnerText(figOverImageCanvasComponent.canvasSelectedMenuText(), selectedMenu);
+        utilities.verifyElementVisibilityState(figOverImageCanvasComponent.canvasSelectedMenuText(), 'visible');
+    },
+
+    /**
+     * @param {string} element denotes element
+     * @param {string} text denotes tooltip text
+     * @description function is used to hover over element and verify innertext of its tooltip
+     */
+    verifyTooltipInnerText: (element, text) => {
+        element()
+            .trigger('mouseover', { force: true });
+        utilities.verifyInnerText(commonComponents.tooltipText(), text);
+        element()
+            .trigger('mouseout', { force: true });
     }
 }