itemengine-cypress-automation 1.0.78 → 1.0.80

package/cypress/pages/drawingResponsePage.js

@@ -0,0 +1,1467 @@
+import utilities from "../support/helpers/utilities"
+import { questionInstructionsComponent, createQuestionBasePage, commonComponents, additionalSettingsPanel, scoringSectionBaseEditTab } from "./components"
+import { dialogBoxBase } from "./dialogBoxBase";
+
+const css = Cypress.env('css');
+const fontSizePopupOptions = { 'Tiny': '12px', 'Small': '14px', 'Default': '16px', 'Normal': '18px', 'Big': '22px', 'Huge': '26px' };
+
+const selectors = {
+    ...commonComponents,
+    ...dialogBoxBase,
+    ...additionalSettingsPanel,
+    ...questionInstructionsComponent,
+    ...scoringSectionBaseEditTab,
+    ...createQuestionBasePage,
+    //Customize toolbar options and controls
+    customizeToolbarOptionsAndControlsAccordion: () => cy.get('.drawing-response-accordion .ngie-accordion-summary'),
+    customizeToolbarOptionsAndControlsLabel: () => cy.get('.customized-options-label'),
+    toolbarOptionsAndControlsFormattingOptionsTiles: (toolbarOptionTitle = null) => {
+        if (toolbarOptionTitle) {
+            return cy.get(`.icon-button-custom-format[title*="${toolbarOptionTitle}"]`)
+        } else {
+            return cy.get('.icon-button-custom-format')
+        }
+    },
+    toolBarOptionsLabel: () => cy.get('[class*="ToolbarLabel"]').eq(0),
+    controlsLabel: () => cy.get('[class*="ToolbarLabel"]').eq(1),
+    customizeToolbarOptionsAndControlsSectionTickIcon: () => cy.get('.tick-icon-wrapper'),
+
+    //Additional options
+    additionalOptionsLabel: () => cy.get('[class*="CustomizedAdditionalOptionsLabel"]'),
+    optionsLabel: () => cy.get('[class*="OptionsTitleWrapper"]'),
+    optionLabelInfoIcon: () => cy.get('[class*="CustomizedAdditionalOptionsstyles__InfoIconWrapper"]'),
+    additionalOptionsTiles: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[data-ngie-testid*="-toggle-button"][aria-label="${ariaLabel}"]`)
+        } else {
+            return cy.get('[data-ngie-testid*="-toggle-button"]')
+        }
+    },
+
+    //Default colors
+    defaultStrokeColorsWrapper: () => cy.get('ColorSelectionComponentstyles__DefaultColorOptions').eq(0),
+    defaultStrokeFontColorLabel: () => cy.get('[class*="ColorSelectionComponentstyles__LabelWrapper"]').eq(0),
+    colorPickerBlock: () => cy.get('.color-picker-block'),
+    colorPickerBlockCloseIcon: () => cy.get('[class*="ColorSelectionComponentstyles__CloseIcon"]'),
+    defaultFillColorsLabel: () => cy.get('[class*="ColorSelectionComponentstyles__LabelWrapper"]').eq(1),
+    defaultFillColorsWrapper: () => cy.get('ColorSelectionComponentstyles__DefaultColorOptions').eq(1),
+
+    //Customize special characters
+    customizeSpecialCharactersCheckbox: () => cy.get('[data-ngie-testid="customize-special-characters-checkbox"] .ngie-checkbox input'),
+    customizeSpecialCharactersLabel: () => cy.get('[data-ngie-testid="customize-special-characters-checkbox"] [class*="label"]'),
+    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(0),
+    selectSpecialCharacterLanguagesLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__SpecialCharLabel"]'),
+    customizeSpecialCharactersPreviewButton: () => cy.get('[class*="CustomizedSpecialCharacterstyles__PreviewLabel"]'),
+    charactersCategoryTilesWrapper: () => cy.get('[class*="CustomizedSpecialCharacterstyles__DragAndDropWrapper"]'),
+    specialAndMathCharacterTiles: (specialOrMathCharacterCategory = null) => {
+        if (specialOrMathCharacterCategory) {
+            return cy.get(`[id*="DraggableItem"] button[aria-label="${specialOrMathCharacterCategory}"]`)
+        } else {
+            return cy.get('[id*="DraggableItem"] button')
+        }
+    },
+    specialAndMathCharacterTileIcon: () => cy.get('.equation-editor-icon'),
+    specialAndMathCharacterTileCategoryName: () => cy.get('.equation-editor-label-wrapper'),
+    specialAndMathCharacterTileSectionCategoriesDragIcon: () => cy.get('.drag-icon-equation-editor-button'),
+
+    //Customize math characters
+    customizeMathCharactersCheckbox: () => cy.get('[data-ngie-testid="customize-math-characters-checkbox"] .ngie-checkbox input'),
+    customizeMathCharactersLabel: () => cy.get('[data-ngie-testid="customize-math-characters-checkbox"] [class*="label"]'),
+    selectMathCharacterCategoryLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__SpecialCharLabel"]'),
+    customizeMathCharactersPreviewButton: () => cy.get('[class*="CustomizedSpecialCharacterstyles__PreviewLabel"]'),
+
+    //Preview popup
+    charactersPreviewPopupSymbol: () => cy.get('[class*="CustomizedSpecialCharacterstyles__CharacterWrapper"]'),
+
+    //Special characters preview popup
+    specialCharactersPreviewPopupCharactersCategoryWrapper: () => cy.get('[class*="special"][class*="accordion"]'),
+    specialCharactersPreviewPopupCategoryAccordionExpandIcon: () => cy.get('[class*="expandIconWrapper"]'),
+    specialCharactersPreviewPopupCategoryLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__AccordionLabel"]'),
+
+    //Math characters preview popup
+    mathCharactersPreviewPopupCharactersCategoryWrapper: () => cy.get('[class*="CustomizedSpecialCharacterstyles__AccordionWrapper"]'),
+    mathCharactersPreviewPopupCategoryLabel: () => cy.get('[class*="CustomizedMathCharacterstyles__PopupTitle"]'),
+
+    //Show only custom special characters section
+    customSpecialCharactersLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__SpecialCharLabel"]'),
+    customSpecialCharactersInputField: () => cy.get('input[aria-label="Custom special characters"]'),
+
+    //Preview tab
+    previewTabDrawingToolbarWrapper: () => cy.get('.edit-question-preview-wrapper .drawing-tool__toolbar'),
+    previewTabDrawingToolbarOption: (drawingOption = null) => {
+        if (drawingOption) {
+            return cy.get(`.drawing-tool__button[aria-label = "${drawingOption}"]:visible`)
+        } else {
+            return cy.get('.drawing-tool__button:visible')
+        }
+    },
+    previewTabToolbarOptionTooltip: () => cy.get('.edit-question-preview-wrapper [role="tooltip"][class*="Tooltipstyles__TooltipContent"]'),
+    previewTabLowerCanvas: () => cy.get('.edit-question-preview-wrapper .lower-canvas'),
+    previewTabUpperCanvas: () => cy.get('.edit-question-preview-wrapper .upper-canvas'),
+    previewTabSecondaryToolbarOptionLabel: () => cy.get('.edit-question-preview-wrapper .drawing-tool__secondary-toolbar__tool-name'),
+    previewTabSecondaryToolbarOption: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`.drawing-tool-options__tool__button[aria-label="${ariaLabel}"]:visible`);
+        } else {
+            return cy.get('.drawing-tool-options__tool__button:visible')
+        }
+    },
+    previewTabToolbarOptionName: () => cy.get('[class*="tool-name"]:visible'),
+    previewTabSecondaryOptionPopup: () => cy.get('.edit-question-preview-wrapper .drawing-tool-options__options'),
+    previewTabSecondaryOptionPopupTitle: () => cy.get('.edit-question-preview-wrapper .drawing-tool-options__options .drawing-tool-options__options__label'),
+    previewTabSecondaryOptionPopupOptions: () => cy.get('.edit-question-preview-wrapper .drawing-tool-options__options__options-list__button'),
+    previewTabColorPickerLabel: () => cy.get('.drawing-tool-color-picker__label'),
+    colorPalleteSelectedColorLabel: () => cy.get('.drawing-tool-color-picker__selected-color-label'),
+    colorPalleteSelectedColorBlock: () => cy.get('.drawing-tool-color-picker__selected-color'),
+    colorPalleteCancelButton: () => cy.get('.drawing-tool-color-picker__footer__cancel-btn'),
+    colorPalleteOkButton: () => cy.get('.drawing-tool-color-picker__footer__ok-btn'),
+
+    //Opacity popup
+    previewTabSecondaryPopupOpacityInputField: () => cy.get('.edit-question-preview-wrapper .drawing-tool-options__options__number-wrapper input'),
+    previewTabSecondaryPopupOpacityPercentageLabel: () => cy.get('.edit-question-preview-wrapper .drawing-tool-options__options__percentage-wrapper'),
+    previewTabSecondaryPopupOpacitySlider: () => cy.get('.edit-question-preview-wrapper .drawing-tool-options__options__slider'),
+    previewTabSecondaryOptionPopupStrokeImage: () => cy.get('.edit-question-preview-wrapper .drawing-tool-options__options__options-list__button svg[aria-label*="Stroke"]'),
+    previewTabSecondaryOptionPopupEraserImage: () => cy.get('.edit-question-preview-wrapper .drawing-tool-options__options__options-list__button svg[aria-label*="Eraser"]'),
+
+    //Font size popup
+    fontSizeOption: () => cy.get('.drawing-tool-options__options__text-size__button'),
+    fontSizeOptionLabels: () => cy.get('.text-size .drawing-tool-options__options__text-size__title'),
+    fontSizesLabels: () => cy.get('.text-size .drawing-tool-options__options__text-size__value'),
+
+    //Insert image
+    insertImageContainer: () => cy.get('.edit-question-preview-wrapper .drawing-tool-modal__content'),
+    insertImageContainerTitle: () => cy.get('.drawing-tool-modal__content .image-upload__title-text'),
+    insertImageContainerHelptext: () => cy.get('.image-upload__dropzone p'),
+    insertImageContainerSelectButton: () => cy.get('.drawing-tool-modal__content .image-upload__button'),
+    insertImageContainerCloseButton: () => cy.get('.drawing-tool-modal__content .drawing-tool-modal__close-button'),
+    inputTypeFile: () => cy.get('input[type="file"]'),
+    insertImageContainerErrorMessage: () => cy.get('.image-upload__error'),
+
+    //Characters popup
+    charactersPopupTitle: () => cy.get('[class*="characters__title-container"]'),
+    charactersPopupCloseButton: () => cy.get('[class*="characters__close-button"]'),
+    charactersPopupCategoryTitle: () => cy.get('[class*="characters__container"] [class*="options__characters__title"]'),
+    charactersPopupCharactersCategoryWrapper: () => cy.get('[class*="characters__characters-wrapper"]'),
+    charactersPopupCharacterSymbol: () => cy.get('[class*="characters__button"]'),
+
+    //Background section
+    backgroundLabel: () => cy.get('[class*="BackgroundLabelWrapper"]'),
+    blankCanvasLabel: () => cy.get('label[aria-label="Blank Canvas"]'),
+    blankCanvasRadioButton: () => cy.get('input[aria-label="Blank Canvas"]'),
+    imageLabel: () => cy.get('label[aria-label="Image"]'),
+    imageRadioButton: () => cy.get('input[aria-label="Image"]'),
+    patternLabel: () => cy.get('label[aria-label="Pattern"]'),
+    patternRadioButton: () => cy.get('input[aria-label="Pattern"]'),
+    canvasWidthLabel: () => cy.get('label[aria-labelledby="Canvas width (px)"]'),
+    canvasWidthInputField: () => cy.get('input[aria-label="Canvas width (px)"]'),
+    canvasHeightLabel: () => cy.get('label[aria-labelledby="Canvas height (px)"]'),
+    canvasHeightInputField: () => cy.get('input[aria-label="Canvas height (px)"]'),
+    aspectRatioButton: () => cy.get('.lock-reset-icon-wrapper button').eq(0),
+    resetDimensionsButton: () => cy.get('.lock-reset-icon-wrapper button').eq(1),
+    uploadLabel: () => cy.get('[class*="SimpleImageUploaderstyles__LabelWrapper"]').eq(0),
+    fileNameLabel: () => cy.get('[class*="SimpleImageUploaderstyles__LabelWrapper"]').eq(1),
+    fileUploadSection: () => cy.get('.file-input-wrapper'),
+    chooseFileButton: () => cy.get('.choose-file-button'),
+    noFileChosenLabel: () => cy.get('[aria-label="No file chosen"]'),
+    fileUploadProgressBar: () => cy.get('[class*="SimpleImageUploaderstyles__ProgressBar-"]'),
+    uploadedFileNameLabel: () => cy.get('[class*="SimpleImageUploaderstyles__SelectedFile-"]'),
+    imagePropertiesLabel: () => cy.get('.settings-label'),
+    fillImageToCanvasLabel: () => cy.get('[data-ngie-testid="fill-image-to-canvas-checkbox"]'),
+    fillImageToCanvasCheckbox: () => cy.get('[data-ngie-testid="fill-image-to-canvas-checkbox"] input'),
+    imageAlignmentLabel: () => cy.get('[class*="CanvasControlsstyles__AlignmentWrapper"] .additional-settings-label'),
+    topLeftOption: () => cy.get('li[class*="CanvasControlsstyles__AlignmentOption"]').eq(0),
+    centerOption: () => cy.get('li[class*="CanvasControlsstyles__AlignmentOption"]').eq(1),
+    topRightOption: () => cy.get('li[class*="CanvasControlsstyles__AlignmentOption"]').eq(2),
+    imageAlternativeTextLabel: () => cy.get('[class*="CanvasControlsstyles__AltTextWrapper"] .text-label'),
+    imageAlternativeTextInputField: () => cy.get('[class*="CanvasControlsstyles__AltTextWrapper"] input'),
+    opacityLabel: () => cy.get('[class*="CanvasControlsstyles__SliderWrapper"] .additional-settings-label'),
+    opacitySlider: () => cy.get('[class*="MuiSlider-root"]'),
+    opacityInputField: () => cy.get('.opacity-input-field input'),
+    editTabDrawingToolbarOption: (drawingOption = null) => {
+        if (drawingOption) {
+            return cy.get(`.drawing-tool__button[aria-label="${drawingOption}"]`)
+        } else {
+            return cy.get('.drawing-tool__button')
+        }
+    },
+    drawingToolWrapper: () => cy.get('.drawing-tool [class*="drawing-tool__wrapper"]'),
+    editTabUpperCanvas: () => cy.get('.upper-canvas'),
+    selectPatternLabel: () => cy.get('[class*="CanvasControlsstyles__PatternSelectionWrapper"] .additional-settings-label'),
+    orientationLabel: () => cy.get('#Orientation-dropdown-label'),
+    orientationDropdown: () => cy.get('#Orientation-select'),
+    orientationDropdownListOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="Orientation-dropdown-label"] [role="option"][aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('[aria-labelledby*="Orientation-dropdown-label"] [role="option"]')
+        }
+    },
+    selectPatternOptionsButton: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`.drawing-response-options button[aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('.drawing-response-options button')
+        }
+    },
+    selectPatternOptionsLabel: () => cy.get('.drawing-response-options [class*="ListItemLabel"]'),
+
+    //additional settings
+    accessibilityLabel: () => cy.get('[class*="DrawingResponsestyles__AccessibilityWrapper"] .layout-label'),
+    flagThisQuestionAsNonAccessibleCheckboxLabel: () => cy.get('[data-ngie-testid="flag-this-question-as-non-accessible-checkbox"]'),
+    flagThisQuestionAsNonAccessibleCheckbox: () => cy.get('[data-ngie-testid="flag-this-question-as-non-accessible-checkbox"] input'),
+    canvasStyleLayoutLabel: () => cy.get('[class*="DrawingResponsestyles__LayoutLabel"].layout-label').eq(0),
+    defaultStrokeLineThicknessLabel: () => cy.get('.line-thickness-label'),
+    setLineTypeLabel: () => cy.get('.line-type-label'),
+    defaultStrokeLineThicknessButton: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[class*="DrawingResponsestyles__StrokeLineThicknessWrapper"] button[aria-label*="Default stroke/line thickness group ${ariaLabel}"]`)
+        } else {
+            return cy.get('[class*="DrawingResponsestyles__StrokeLineThicknessWrapper"] button')
+        }
+    },
+    additionalSettingsStrokeImage: () => cy.get('[class*="DrawingResponsestyles__StrokeLineThicknessWrapper"] svg[aria-label*="Stroke"]'),
+    setLineTypeButton: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[class*="DrawingResponsestyles__SetLineTypeWrapper"] button[aria-label*="Set line types group ${ariaLabel}"]`)
+        } else {
+            return cy.get('[class*="DrawingResponsestyles__SetLineTypeWrapper"] button')
+        }
+    },
+    spellCheckCheckBoxLabel: () => cy.get('[data-ngie-testid="spell-check-checkbox"]'),
+    spellCheckCheckBox: () => cy.get('[data-ngie-testid="spell-check-checkbox"] input'),
+
+    //Math characters popup
+    mathCharactersPopupCategoryTitle: () => cy.get('[class*="characters__container"] [class*="options__characters__title"]'),
+
+    //Special characters popup
+    specialCharactersPopupCategoryTitle: () => cy.get('[class*="characters__container"] [class*="options__accordion__header"]'),
+    specialCharactersPopupCategoryAccordionIcon: () => cy.get('[class*="characters__container"] [aria-label="AccordionIcon"]'),
+    customSpecialCharactersInputField: () => cy.get('input[aria-label="Custom special characters"]'),
+
+    //Edit tab color picker popup
+    editTabColorPickerPopupOpacityPalette: () => cy.get('.react-colorful__last-control .react-colorful__interactive'),
+    editTabColorPickerPopupOpacityPicker: () => cy.get('.react-colorful__last-control .react-colorful__pointer'),
+    editTabColorPickerPopupSetToNoColorButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(0),
+    editTabColorPickerPopupCancelButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(1),
+    editTabColorPickerPopupOkButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(2),
+
+    //TODO: Student view: Need to remove once https://redmine.zeuslearning.com/issues/556302 is fixed
+    studentAndGradingViewDrawingToolbarOption: (drawingOption = null) => {
+        if (drawingOption) {
+            return cy.get(`.drawing-tool__button[aria-label = "${drawingOption}"]`).eq(0)
+        } else {
+            return cy.get('.drawing-tool__button')
+        }
+    },
+    studentViewUpperCanvas: () => cy.get('.upper-canvas').eq(0)
+}
+
+const steps = {
+    ...questionInstructionsComponent.steps,
+    ...createQuestionBasePage.steps,
+    ...dialogBoxBase.steps,
+    ...additionalSettingsPanel.steps,
+    ...questionInstructionsComponent.steps,
+    ...scoringSectionBaseEditTab.steps,
+    ...createQuestionBasePage.steps,
+    ...commonComponents.steps,
+    /**
+     * @param {string[]} arrayOfToolbarOptions array of toolbar options to be selected
+     * @description this function selects toolbar options from edit tab
+     */
+    selectEditTabToolbarOptions: (arrayOfToolbarOptions) => {
+        arrayOfToolbarOptions.forEach((arialabel) => {
+            drawingResponsePage.toolbarOptionsAndControlsFormattingOptionsTiles(arialabel)
+                .click()
+                .find('[role="menuitemcheckbox"]')
+                .should('have.attr', 'aria-checked', 'true');
+        });
+    },
+
+    /**
+     * @param {string} arialabel toolbar option to be selected
+     * @description this function selects toolbar option from preview tab
+     */
+    selectPreviewTabToolbarOption: (arialabel) => {
+        drawingResponsePage.previewTabDrawingToolbarOption(arialabel)
+            .click();
+    },
+
+    /**
+    * @param {string} arialabel toolbar option to be selected
+    * @description this function selects secondary toolbar option from preview tab
+    */
+    selectPreviewTabSecondaryToolbarOption: (secondaryOption) => {
+        drawingResponsePage.previewTabSecondaryToolbarOption(secondaryOption)
+            .click();
+    },
+
+    /**
+     * @description Select toolbar options in edit tab
+     * @param {string[]} arrayOfToolbarOptions Array of option tiles to be selected
+     */
+    selectOptionsTiles: (arrayOfToolbarOptions) => {
+        arrayOfToolbarOptions.forEach((arialabel) => {
+            drawingResponsePage.additionalOptionsTiles(arialabel)
+                .click()
+                .should('have.attr', 'aria-pressed', 'true');
+        });
+    },
+
+    /**
+      * @param {string} title title of secondary popup
+      * @description this function verifies title of the secondary option popup
+      */
+    verifySecondaryOptionPopupTitle: (title) => {
+        utilities.verifyInnerText(drawingResponsePage.previewTabSecondaryOptionPopupTitle(), title);
+        utilities.verifyElementVisibilityState(drawingResponsePage.previewTabSecondaryOptionPopupTitle(), 'visible');
+    },
+
+    /**
+      * @param {string} title title of secondary option characters popup
+      * @description this function verifies title of the secondary option characters popup
+      */
+    verifySecondaryOptionCharactersPopupTitle: (title) => {
+        utilities.verifyInnerText(drawingResponsePage.charactersPopupTitle(), title);
+        utilities.verifyElementVisibilityState(drawingResponsePage.charactersPopupTitle(), 'visible');
+    },
+
+    /**
+     * @param {number} index index of secondary option
+     * @param {*} optionColor color of the option
+     * @description this function checks the color of the option
+     */
+    verifyCSSOfSecondaryOptionPopupOptions: (index, optionColor) => {
+        utilities.verifyCSS(drawingResponsePage.previewTabSecondaryOptionPopupOptions().eq(index), {
+            'background-color': optionColor
+        });
+    },
+
+    /**
+     * @param {number} index index of secondary option
+     * @param {*} optionColor color of the option
+     * @description this function checks the color of the color block
+     */
+    verifyCSSOfDefaultFontStrokeFillColorBlockInEditTab: (index, optionColor) => {
+        utilities.verifyCSS(drawingResponsePage.colorPickerBlock().eq(index), {
+            'background-color': optionColor
+        });
+    },
+
+    verifyNoColorBlockInDefaultFontStrokeColorBlockSection: (index) => {
+        drawingResponsePage.colorPickerBlock()
+            .eq(index)
+            .find('svg')
+            .should('have.class', 'no-color-icon');
+    },
+
+    verifyAddColorBlockInDefaultFontStrokeColorBlockSection: (index) => {
+        drawingResponsePage.colorPickerBlock()
+            .eq(index)
+            .find('path')
+            .should('have.attr', 'data-name', 'Add color');
+    },
+
+    verifyCloseIconOnColorBlockInDefaultFontStrokeColorBlockSection: (index) => {
+        drawingResponsePage.colorPickerBlock()
+            .eq(index)
+            .parents('[class*="ColorSelectionComponentstyles__ColorPickerWrapper"]')
+            .within(() => {
+                utilities.verifyElementVisibilityState(drawingResponsePage.colorPickerBlockCloseIcon(), 'visible');
+            });
+    },
+
+    clickOnColorBlockCloseButtonInDefaultFontStrokeColorBlockSection: (index) => {
+        drawingResponsePage.colorPickerBlockCloseIcon()
+            .eq(index)
+            .click();
+    },
+
+    clickOnFontStrokeFillColorBlockInEditTab: (index) => {
+        drawingResponsePage.colorPickerBlock()
+            .eq(index)
+            .click();
+    },
+
+    clickOnAddColorBlockInDefaultFontStrokeColorBlockSection: () => {
+        drawingResponsePage.colorPickerBlock()
+            .find('[data-name="Add color"]')
+            .click();
+    },
+
+    verifyAddColorBlockIsDisabledInDefaultFontStrokeColorBlockSection: () => {
+        drawingResponsePage.colorPickerBlock()
+            .last()
+            .should('have.attr', 'opacity', '0.38');
+    },
+
+    verifySelectedColorLabelAndSelectedColorBlock: () => {
+        utilities.verifyInnerText(drawingResponsePage.colorPalleteSelectedColorLabel(), 'Selected color');
+        utilities.verifyElementVisibilityState(drawingResponsePage.colorPalleteSelectedColorLabel(), 'visible');
+        utilities.verifyElementVisibilityState(drawingResponsePage.colorPalleteSelectedColorBlock(), 'visible');
+    },
+
+    /**
+     * @description Verify selected option from secondary option popup
+     * @param {number} selectedOptionIndex index of selected option
+     */
+    verifySelectedOptionFromSecondaryOptionPopup: (selectedOptionIndex) => {
+        drawingResponsePage.previewTabSecondaryOptionPopupOptions()
+            .eq(selectedOptionIndex)
+            .find('.drawing-tool-options__options__options-list__button--active')
+            .should('exist');
+    },
+
+    /**
+      * @param {number} optionIndex index of the option that has no color
+      * @description this function verifies the No color option
+      */
+    verifyNoColorOptionFromSecondaryOptionPopup: (optionIndex) => {
+        drawingResponsePage.previewTabSecondaryOptionPopupOptions()
+            .eq(optionIndex)
+            .find('svg')
+            .should('have.attr', 'aria-label', 'NoColor');
+    },
+
+    /**
+     * @param {number} index of the option to be selected
+     */
+    selectOptionFromSecondaryOptionPopup: (index) => {
+        drawingResponsePage.previewTabSecondaryOptionPopupOptions()
+            .eq(index)
+            .click()
+    },
+
+    verifySecondaryPopupDoesNotExist: () => {
+        utilities.verifyElementVisibilityState(drawingResponsePage.previewTabSecondaryOptionPopup(), 'notExist')
+    },
+
+    /**
+     * @param {string} strokeColor color of the selected option displayed below the secondary option
+     * @description this function verifies secondary option stroke color
+     */
+    verifySecondaryOptionStrokeColor: (index, strokeColor) => {
+        utilities.verifyCSS(drawingResponsePage.previewTabSecondaryToolbarOption().eq(index).find('svg path[data-name*="Path"]').eq(1), {
+            'fill': strokeColor
+        });
+    },
+
+    verifyPreviewTabColorPickerLabel: () => {
+        utilities.verifyInnerText(drawingResponsePage.previewTabColorPickerLabel(), 'Select color')
+    },
+
+    expandCustomizeToolbarOptionsAndControlsAccordion: () => {
+        drawingResponsePage.customizeToolbarOptionsAndControlsAccordion()
+            .click()
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    /**
+     * @param {string[]} toolbarOptionsArray Array of title of the toolbar options
+     * @description Select the toolbar option or controls tile in customize section 
+     */
+    selectToolbarOptionsAndControlsFormattingOptionsTiles: (toolbarOptionsArray) => {
+        toolbarOptionsArray.forEach((toolbarOption) => {
+            drawingResponsePage.toolbarOptionsAndControlsFormattingOptionsTiles(toolbarOption)
+                .click()
+                .should('have.attr', 'aria-label', `${toolbarOption} selected`);
+        });
+    },
+
+    /**
+     * @description Verify that toolbar option is selected in preview tab
+     * @param {string} arialabel Aria-label of toolbar option
+     */
+    verifyToolbarOptionIsSelectedInPreviewTab: (arialabel) => {
+        drawingResponsePage.previewTabDrawingToolbarOption(arialabel)
+            .should('have.class', 'drawing-tool__button--active');
+    },
+
+    /**
+     * @description Verify that toolbar option is not selected in preview tab
+     * @param {string} arialabel Aria-label of toolbar option
+     */
+    verifyToolbarOptionIsNotSelectedInPreviewTab: (arialabel) => {
+        drawingResponsePage.previewTabDrawingToolbarOption(arialabel)
+            .should('not.have.class', 'drawing-tool__button--active');
+    },
+
+    /**
+     * @description Verify the displayed secondary toolbar options
+     * @param {string[]} secondaryOptionsArray Array of secondary toolbar options
+     */
+    verifyDisplayedSecondaryToolbarOptionsInPreviewTab: (secondaryOptionsArray) => {
+        secondaryOptionsArray.forEach((secondaryToolbarOption) => {
+            utilities.verifyElementVisibilityState(drawingResponsePage.previewTabSecondaryToolbarOption(secondaryToolbarOption), 'visible');
+        })
+        utilities.verifyElementCount(drawingResponsePage.previewTabSecondaryToolbarOption(), secondaryOptionsArray.length);
+    },
+
+    /**
+    * @param {string} color in the selected color block in rgb/rgba format
+    * @description this function is used to verify in the selected color block of the color popup
+    */
+    verifySelectedColorBlock: (color) => {
+        utilities.verifyCSS(drawingResponsePage.colorPalleteSelectedColorBlock(), {
+            'background-color': color
+        });
+    },
+
+    verifyColorPopupCancelButton: () => {
+        utilities.verifyInnerText(drawingResponsePage.colorPalleteCancelButton(), 'Cancel');
+        utilities.verifyElementVisibilityState(drawingResponsePage.colorPalleteCancelButton(), 'visible');
+    },
+
+    verifyColorPopupOkButton: () => {
+        utilities.verifyInnerText(drawingResponsePage.colorPalleteOkButton(), 'OK');
+        utilities.verifyElementVisibilityState(drawingResponsePage.colorPalleteOkButton(), 'visible');
+    },
+
+    clickOnEditTabColorPaletteOkButton: () => {
+        drawingResponsePage.editTabColorPickerPopupOkButton()
+            .click();
+    },
+
+    clickOnEditTabColorPaletteCancelButton: () => {
+        drawingResponsePage.editTabColorPickerPopupCancelButton()
+            .click();
+    },
+
+    /**
+     * @param {number} index of the selected option
+     */
+    verifyFontSizePopupSelectedOption: (index) => {
+        drawingResponsePage.fontSizeOption()
+            .eq(index)
+            .should('have.class', 'active-item')
+    },
+
+    /**
+     * @param {number} index of option to be selected
+     */
+    selectOptionFromFontSizePopup: (index) => {
+        drawingResponsePage.fontSizeOption()
+            .eq(index)
+            .click();
+    },
+
+    /**
+     * @param {number} thickness of the stroke
+     * @description this function verifies the thickness of the stroke
+     */
+    verifySecondaryPopupEraserThickness: (thickness, index) => {
+        drawingResponsePage.previewTabSecondaryOptionPopupEraserImage()
+            .eq(index)
+            .should('have.attr', 'height', thickness)
+            .and('have.attr', 'width', thickness);
+    },
+
+    verifySecondaryPopupExist: () => {
+        utilities.verifyElementVisibilityState(drawingResponsePage.previewTabSecondaryOptionPopup(), 'exist')
+    },
+
+    /**
+     * @param {number} opacityValue value of opacity input field
+     * @description this function verifies the value of opacity input field
+     */
+    verifySecondaryPopupOpacityInputFieldValue: (opacityValue) => {
+        drawingResponsePage.previewTabSecondaryPopupOpacityInputField()
+            .should('have.value', opacityValue);
+    },
+
+    /**
+    * @param {number} sliderValue value of opacity input field
+    * @description this function verifies the value of opacity input field
+    */
+    verifySecondaryPopupOpacitySliderValue: (sliderValue) => {
+        drawingResponsePage.previewTabSecondaryPopupOpacitySlider()
+            .should('have.value', sliderValue);
+    },
+
+    clickOnSecondaryPopupSlider: () => {
+        drawingResponsePage.previewTabSecondaryPopupOpacitySlider()
+            .click({ force: true });
+    },
+
+    /**
+     * @param {number} opacityValue value of opacity input field
+     * @description this function verifies the value of opacity input field
+     */
+    enterValueInOpacityInputFieldValue: (opacityValue) => {
+        drawingResponsePage.previewTabSecondaryPopupOpacityInputField()
+            .clear()
+            .type(opacityValue)
+            .should('have.value', opacityValue);
+    },
+
+    /**
+     * @param {number} thickness of the stroke
+     * @description this function verifies the thickness of the stroke
+     */
+    verifySecondaryPopupStrokeThickness: (thickness, index) => {
+        drawingResponsePage.previewTabSecondaryOptionPopupStrokeImage()
+            .eq(index)
+            .should('have.attr', 'height', thickness)
+            .and('have.attr', 'width', thickness);
+    },
+
+    closeSecondaryPopup: () => {
+        cy.get('body')
+            .click();
+    },
+
+    verifyInsertImageContainerIsVisible: () => {
+        utilities.verifyElementVisibilityState(drawingResponsePage.insertImageContainer(), 'visible');
+    },
+
+    verifyInsertImageContainerNotExist: () => {
+        utilities.verifyElementVisibilityState(drawingResponsePage.insertImageContainer(), 'notExist');
+    },
+
+    /**
+     * @param {string} fileName name of the file being uploaded
+     * @param {string} fileSize size of the file being uploaded
+     */
+    verifyUploadingFilesMessage: (fileName, fileSize) => {
+        drawingResponsePage.insertImageContainer()
+            .should('have.text', `Uploading files. Please wait...${fileName} - ${fileSize}`)
+    },
+
+    /**
+     * @param {string} file name of the file in fixtures/upload folder
+     * @description this function uploads a file
+     */
+    uploadFile: (file) => {
+        drawingResponsePage.inputTypeFile()
+            .attachFile(file);
+    },
+
+    verifyImageContainerErrorMessage: (fileName) => {
+        drawingResponsePage.insertImageContainerErrorMessage()
+            .should('have.text', `The following files were rejected${fileName} is too large. The maximum file size is 5MB`)
+    },
+
+    /**
+     * @description Verify the option displayed in Line type popup
+     * @param {string} lineType Type of line 
+     * @param {number} index Index of line type option
+     */
+    verifySecondaryPopupLineType: (lineType, index) => {
+        drawingResponsePage.previewTabSecondaryOptionPopupOptions()
+            .eq(index)
+            .find('svg')
+            .should('have.attr', 'aria-label', `${lineType}`);
+    },
+
+    /**
+     * @description Verify the displayed selected text color under the text color option icon
+     * @param {string} color Color of the selected text color which is displayed under toolbar icon
+     */
+    verifySelectedTextColorUnderTextColorOptionInPreviewTab: (color) => {
+        utilities.verifyCSS(drawingResponsePage.previewTabSecondaryToolbarOption().eq(3).find('svg path[data-name*="Path"]').eq(0), {
+            'fill': color
+        });
+    },
+
+    clickOnCharactersPopupCloseButton: () => {
+        drawingResponsePage.charactersPopupCloseButton()
+            .click();
+    },
+
+    /**
+     * @description Click on a symbol in characters popup
+     * @param {string} ariaLabel Aria-label of the symbol 
+     */
+    clickOnCharacterPopupSymbol: (ariaLabel) => {
+        drawingResponsePage.charactersPopupCharacterSymbol()
+            .find(`svg[aria-label="${ariaLabel}"]`)
+            .click();
+    },
+
+    verifySecondaryToolbarOptionFontSizePopup: () => {
+        Object.keys(fontSizePopupOptions).forEach((size, index) => {
+            utilities.verifyInnerText(drawingResponsePage.fontSizeOptionLabels().eq(index), size);
+            utilities.verifyInnerText(drawingResponsePage.fontSizesLabels().eq(index), fontSizePopupOptions[size]);
+        });
+    },
+
+    /**
+     * @description Verify categories and symbols displayed in math characters popup
+     * @param {object[]} categoryAndSymbolsArray Array of list of categories and their symbols present in math characters popup 
+     */
+    verifyMathCharactersPopupCategoriesAndSymbols: (categoryAndSymbolsArray) => {
+        categoryAndSymbolsArray.forEach((category, index) => {
+            utilities.verifyInnerText(drawingResponsePage.mathCharactersPopupCategoryTitle().eq(index), `${category.categoryName}`);
+            drawingResponsePage.charactersPopupCharactersCategoryWrapper()
+                .eq(index)
+                .within(() => {
+                    categoryAndSymbolsArray[index].symbols.forEach((symbol, index) => {
+                        drawingResponsePage.charactersPopupCharacterSymbol()
+                            .eq(index)
+                            .find('svg')
+                            .should('have.attr', 'aria-label', `${symbol}`);
+                    });
+                });
+        });
+    },
+
+    /**
+     * @description Verify symbols displayed in for a category in special characters popup
+     * @param {number} categoryIndex Index of the category
+     * @param {string[]} categorySymbolsArray Array of the symbols of the category
+     */
+    verifySpecialCharactersPopupCategorySymbols: (categoryIndex, categorySymbolsArray) => {
+        drawingResponsePage.charactersPopupCharactersCategoryWrapper()
+            .eq(categoryIndex)
+            .within(() => {
+                categorySymbolsArray[index].forEach((symbolARIALabel, index) => {
+                    drawingResponsePage.charactersPopupCharacterSymbol()
+                        .eq(index)
+                        .find('svg')
+                        .should('have.attr', 'aria-label', `${symbolARIALabel}`);
+                });
+            });
+    },
+
+    /**
+     * @description click on special characters popup category accordion
+     * @param {number} index index of category 
+     */
+    clickOnSpecialCharactersCategoryAccordion: (index) => {
+        drawingResponsePage.specialCharactersPopupCategoryAccordionIcon()
+            .eq(index)
+            .click();
+    },
+
+    /**
+     * @description Verify the displayed categories and their accordions in special characters popup
+     * @param {object[]} categoryListArray Array of special characters categories
+     */
+    verifySpecialCharactersPopupCategoryTitlesAndAccordions: (categoryListArray) => {
+        categoryListArray.forEach((category, index) => {
+            utilities.verifyInnerText(drawingResponsePage.specialCharactersPopupCategoryTitle().eq(index), `${category.categoryName}`);
+            utilities.verifyElementVisibilityState(drawingResponsePage.specialCharactersPopupCategoryTitle().eq(index), 'visible');
+            utilities.verifyElementVisibilityState(drawingResponsePage.specialCharactersPopupCategoryAccordionIcon().eq(index), 'visible');
+        });
+    },
+
+    /**
+     * @description verify special characters popup category accordion is expanded
+     * @param {number} index index of category 
+     */
+    verifySpecialCharactersPopupCategoryAccordionIsExpanded: (index) => {
+        drawingResponsePage.specialCharactersPopupCategoryTitle()
+            .eq(index)
+            .within(() => {
+                cy.wrap()
+                    .find('span[class*="icon-open"]')
+                    .should('exist');
+            });
+        utilities.verifyElementVisibilityState(drawingResponsePage.charactersPopupCharactersCategoryWrapper().eq(index), 'visible');
+    },
+
+    /**
+     * @description verify special characters popup category accordion is collapsed
+     * @param {number} index index of category 
+     */
+    verifySpecialCharactersPopupCategoryAccordionIsCollapsed: (index) => {
+        drawingResponsePage.specialCharactersPopupCategoryTitle()
+            .eq(index)
+            .within(() => {
+                cy.wrap()
+                    .find('span[class*="icon-open"]')
+                    .should('not.exist');
+            });
+        utilities.verifyElementVisibilityState(drawingResponsePage.charactersPopupCharactersCategoryWrapper().eq(index), 'notExist');
+    },
+
+    /**
+     * @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(drawingResponsePage.specialCharactersPreviewPopupCategoryLabel().eq(index), `${category.categoryName}`);
+            drawingResponsePage.charactersPopupCharactersCategoryWrapper()
+                .eq(index)
+                .within(() => {
+                    drawingResponsePage.specialCharactersPreviewPopupCategoryAccordionExpandIcon()
+                        .click();
+                    category.symbols.forEach((symbolARIALabel, index) => {
+                        drawingResponsePage.charactersPopupCharacterSymbol()
+                            .eq(index)
+                            .find('svg')
+                            .should('have.attr', 'aria-label', `${symbolARIALabel}`);
+                    });
+                });
+        });
+    },
+
+    /**
+    * @description Click on category accordion expand icon in special characters popup
+    * @param {number} index Index of category in popup
+    */
+    clickOnSpecialCharactersPreviewPopupCategoryAccordionExpandIcon: (index) => {
+        drawingResponsePage.specialCharactersPreviewPopupCategoryAccordionExpandIcon()
+            .eq(index)
+            .click();
+    },
+
+    checkCustomizeSpecialCharactersCheckbox: () => {
+        drawingResponsePage.customizeSpecialCharactersCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    checkCustomizeMathCharactersCheckbox: () => {
+        drawingResponsePage.customizeMathCharactersCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    verifyGroupedByLanguageRadioButtonIsSelected: () => {
+        drawingResponsePage.groupByLanguageRadioButton()
+            .should('be.checked');
+    },
+
+    /**
+     * @description Verify customized special or math character category tiles in edit tab
+     * @param {string[]} charactersCategoriesArray Array of special or math character categories
+     */
+    verifyCustomizeSpecialOrMathCharactersCategoryTiles: (charactersCategoriesArray) => {
+        drawingResponsePage.charactersCategoryTilesWrapper()
+            .within(() => {
+                charactersCategoriesArray.forEach((characterCategory, index) => {
+                    drawingResponsePage.specialAndMathCharacterTiles()
+                        .eq(index)
+                        .should('have.attr', 'aria-label', `${characterCategory}`);
+                });
+            });
+        utilities.verifyElementCount(drawingResponsePage.specialAndMathCharacterTiles(), charactersCategoriesArray.length);
+    },
+
+    /**
+     * @description Verify selected special or math characters category tiles 
+     * @param {string[]} selectedSpecialOrMathCharactersCategoriesArray Array of selected special or math characters categories
+     */
+    verifySelectedCustomizeSpecialOrMathCharactersCategoryTiles: (selectedSpecialOrMathCharactersCategoriesArray) => {
+        drawingResponsePage.charactersCategoryTilesWrapper()
+            .within(() => {
+                selectedSpecialOrMathCharactersCategoriesArray.forEach((characterCategory) => {
+                    drawingResponsePage.specialAndMathCharacterTiles(characterCategory)
+                        .should('have.class', 'Mui-selected')
+                        .within(() => {
+                            utilities.verifyElementVisibilityState(drawingResponsePage.customizeToolbarOptionsAndControlsSectionTickIcon(), 'visible');
+                        });
+                });
+            });
+    },
+
+    clickOnCustomizeSpecialCharactersPreviewButton: () => {
+        drawingResponsePage.customizeSpecialCharactersPreviewButton()
+            .click();
+    },
+
+    clickOnCustomizeMathCharactersPreviewButton: () => {
+        drawingResponsePage.customizeMathCharactersPreviewButton()
+            .click();
+    },
+
+    /**
+     * @description Verify math characters categories and symbols in preview tab
+     * @param {object[]} categoryAndSymbolsArray Array of math characters categories and symbols
+     */
+    verifyMathCharactersPreviewPopupInEditTab: (categoryAndSymbolsArray) => {
+        categoryAndSymbolsArray.forEach((category, index) => {
+            utilities.verifyInnerText(drawingResponsePage.mathCharactersPreviewPopupCategoryLabel().eq(index), `${category.categoryName}`);
+            drawingResponsePage.mathCharactersPreviewPopupCharactersCategoryWrapper()
+                .eq(index)
+                .within(() => {
+                    category.symbols.forEach((symbol, index) => {
+                        utilities.verifyElementVisibilityState(drawingResponsePage.charactersPreviewPopupSymbol().eq(index), 'visible');
+                        drawingResponsePage.charactersPreviewPopupSymbol()
+                            .eq(index)
+                            .find('path')
+                            .should('have.attr', 'data-name', `${symbol}`);
+                    });
+                    utilities.verifyElementCount(drawingResponsePage.charactersPreviewPopupSymbol(), category.symbols.length);
+                });
+        });
+        utilities.verifyElementCount(drawingResponsePage.mathCharactersPreviewPopupCharactersCategoryWrapper(), categoryAndSymbolsArray.length);
+    },
+
+    clickOnSpecialOrMathCharactersCategoryTile: (categoryName) => {
+        drawingResponsePage.specialAndMathCharacterTiles(categoryName)
+            .click();
+    },
+
+    verifySpecialCharacterCategoryTileIsSelected: (categoryName) => {
+        drawingResponsePage.specialAndMathCharacterTiles(categoryName)
+            .should('have.attr', 'aria-pressed', 'true')
+            .within(() => {
+                utilities.verifyElementVisibilityState(drawingResponsePage.customizeToolbarOptionsAndControlsSectionTickIcon(), 'visible');
+            });
+    },
+
+    verifySpecialOrMathCharacterCategoryTileIsNotSelected: (categoryName) => {
+        drawingResponsePage.specialAndMathCharacterTiles(categoryName)
+            .should('have.attr', 'aria-pressed', 'false')
+            .within(() => {
+                utilities.verifyElementVisibilityState(drawingResponsePage.customizeToolbarOptionsAndControlsSectionTickIcon(), 'hidden');
+            });
+    },
+
+    selectShowOnlyCustomSpecialCharactersRadioButton: () => {
+        drawingResponsePage.showOnlyCustomSpecialCharactersRadioButton()
+            .click()
+            .should('be.checked');
+    },
+
+    selectGroupByLanguageRadioButton: () => {
+        drawingResponsePage.groupByLanguageRadioButton()
+            .click()
+            .should('be.checked');
+    },
+
+    verifyPatternRadioButtonIsNotSelected: () => {
+        drawingResponsePage.patternRadioButton()
+            .should('not.be.checked');
+    },
+
+    selectPatternRadioButton: () => {
+        drawingResponsePage.patternRadioButton()
+            .click()
+            .should('be.checked');
+    },
+
+    addInputToCustomSpecialCharactersInputField: (input) => {
+        drawingResponsePage.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(drawingResponsePage.charactersPreviewPopupSymbol().eq(index), `${customSpecialCharacter}`);
+            utilities.verifyElementVisibilityState(drawingResponsePage.charactersPreviewPopupSymbol().eq(index), 'visible');
+        });
+        utilities.verifyElementCount(drawingResponsePage.charactersPreviewPopupSymbol(), `${customSpecialCharacters.length}`);
+    },
+
+    /**
+    * Verify custom special characters displayed in characters popup in preview tab
+    * @param {string[]} customSpecialCharacters Array of custom special characters
+    */
+    verifyCustomSpecialCharactersDisplayedInPreviewTab: (customSpecialCharacters) => {
+        customSpecialCharacters.forEach((customSpecialCharacter, index) => {
+            utilities.verifyInnerText(drawingResponsePage.charactersPopupCharacterSymbol().eq(index), `${customSpecialCharacter}`);
+            utilities.verifyElementVisibilityState(drawingResponsePage.charactersPopupCharacterSymbol().eq(index), 'visible');
+        });
+        utilities.verifyElementCount(drawingResponsePage.charactersPopupCharacterSymbol(), `${customSpecialCharacters.length}`);
+    },
+
+    clickInOpacityPalette: () => {
+        drawingResponsePage.editTabColorPickerPopupOpacityPalette()
+            .click();
+    },
+
+    /**
+     * @description verify tooltip for disabled add color block button
+     * @param {string} tooltip Tooltip for disabled add color block button
+     */
+    verifyTooltipForDisabledAddColorButton: (tooltip) => {
+        utilities.hoverOverElement(drawingResponsePage.colorPickerBlock().last());
+        utilities.verifyTextContent(drawingResponsePage.tooltipText(), `${tooltip}`);
+        utilities.hoverAwayFromElement(drawingResponsePage.colorPickerBlock().last());
+    },
+
+    /**
+     * @param {number} opacityValue value of opacity on the opacity slider
+     * @description this function is used to verify the opacity value on the opacity slider
+     */
+    verifyOpacitySliderValue: (opacityValue) => {
+        drawingResponsePage.opacitySlider()
+            .find('input')
+            .should('have.value', opacityValue)
+    },
+
+    verifyDrawingToolsIsDisabled: () => {
+        utilities.verifyElementDisabledClass(drawingResponsePage.drawingToolWrapper());
+    },
+
+    clickOnCenterOptionAlignment: () => {
+        drawingResponsePage.centerOption()
+            .click();
+    },
+
+    verifyCenterOptionAlignmentIsSelected: () => {
+        drawingResponsePage.centerOption().find('button')
+            .then(($element) => {
+                const attributeValue = $element.attr('aria-label');
+                expect(attributeValue).to.include('selected');
+            });
+    },
+
+    verifyTopLeftOptionAlignmentIsSelected: () => {
+        drawingResponsePage.topLeftOption().find('button')
+            .then(($element) => {
+                const attributeValue = $element.attr('aria-label');
+                expect(attributeValue).to.include('selected');
+            });
+    },
+
+    /**
+    * @param {number} canvasWidth width of canvas in preview tab
+    * @description this function verifies the width of canvas in preview tab
+    */
+    verifyCanvasWidthInPreviewTab: (canvasWidth) => {
+        drawingResponsePage.previewTabUpperCanvas()
+            .then(($element) => {
+                const offsetWidth = $element[0].offsetWidth;
+                expect(offsetWidth).to.closeTo(canvasWidth, 2);
+            });
+    },
+
+    /**
+     * @param {number} canvasHeight height of canvas in preview tab
+     * @description this function verifies the height of canvas in preview tab
+     */
+    verifyCanvasHeightInPreviewTab: (canvasHeight) => {
+        drawingResponsePage.previewTabUpperCanvas()
+            .then(($element) => {
+                const offsetHeight = $element[0].offsetHeight;
+                expect(offsetHeight).to.closeTo(canvasHeight, 2);
+            })
+    },
+
+    /**
+    * @param {number} canvasWidth width of canvas in edit tab
+    * @description this function verifies the width of canvas in edit tab
+    */
+    verifyCanvasWidthInEditTab: (canvasWidth) => {
+        drawingResponsePage.editTabUpperCanvas()
+            .then(($element) => {
+                const offsetWidth = $element[0].offsetWidth;
+                expect(offsetWidth).to.closeTo(canvasWidth, 2);
+            });
+    },
+
+    /**
+     * @param {number} canvasHeight height of canvas in edit tab
+     * @description this function verifies the height of canvas in edit tab
+     */
+    verifyCanvasHeightInEditTab: (canvasHeight) => {
+        drawingResponsePage.editTabUpperCanvas()
+            .then(($element) => {
+                const offsetHeight = $element[0].offsetHeight;
+                expect(offsetHeight).to.closeTo(canvasHeight, 2);
+            })
+    },
+
+    expandOrientationDropdown: () => {
+        drawingResponsePage.orientationDropdown()
+            .click();
+    },
+
+    /**
+     * @param {('Potrait'|'Landscape'|'Square')} listOption 
+     * @description this function selects an option from expanded minimum scoring dropdown
+     */
+    selectOrientationTypeListOption: (listOption) => {
+        drawingResponsePage.orientationDropdownListOptions(listOption)
+            .click();
+    },
+
+    /**
+    * @param {string[]}  patterns - An array of pattern options.
+    * @description  * Verifies the visibilty and innertext of pattern labels.
+    */
+    verifySelectPatternOptionsLabel: (patterns) => {
+        for (let index = 0; index < patterns.length; index++) {
+            utilities.verifyInnerText(drawingResponsePage.selectPatternOptionsLabel().eq(index), patterns[index]);
+            utilities.verifyElementVisibilityState(drawingResponsePage.selectPatternOptionsLabel().eq(index), 'visible');
+        };
+    },
+
+    /**
+     * @param {string} arialabel pattern option to be selected
+     * @description this function selects an pattern
+     */
+    selectPatternTypeOption: (arialabel) => {
+        drawingResponsePage.selectPatternOptionsButton(arialabel)
+            .click();
+    },
+
+    /**
+     * @description Verify that pattern option is selected.
+     * @param {string} arialabel Aria-label of pattern option
+     */
+    verifyPatternOptionIsSelected: (arialabel) => {
+        drawingResponsePage.selectPatternOptionsButton(arialabel)
+            .then(($element) => {
+                const attributeValue = $element.attr('aria-label');
+                expect(attributeValue).to.include('selected');
+            });
+    },
+
+    verifyFlagThisQuestionAsNonAccessibleCheckboxIsUnchecked: () => {
+        drawingResponsePage.flagThisQuestionAsNonAccessibleCheckbox()
+            .should('not.be.checked');
+    },
+
+    checkFlagThisQuestionAsNonAccessibleCheckbox: () => {
+        drawingResponsePage.flagThisQuestionAsNonAccessibleCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    uncheckFlagThisQuestionAsNonAccessibleCheckbox: () => {
+        drawingResponsePage.flagThisQuestionAsNonAccessibleCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    /**
+     * @param {string} arialabel stroke/line thickness option to be selected
+     * @description this function selects stroke/line thickness option
+     */
+    selectStrokeLineThicknessTypeOption: (arialabel) => {
+        drawingResponsePage.defaultStrokeLineThicknessButton(arialabel)
+            .click();
+    },
+
+    /**
+     * @description Verify that stroke/line thickness option is selected.
+     * @param {string} arialabel Aria-label of stroke/line thickness option
+     */
+    verifyStrokeLineThicknessOptionIsSelected: (arialabel) => {
+        drawingResponsePage.defaultStrokeLineThicknessButton(arialabel)
+            .then(($element) => {
+                const attributeValue = $element.attr('aria-label');
+                expect(attributeValue).to.include('selected');
+            });
+    },
+
+    /**
+     * @description Verify that selected icon is displayed.
+     * @param {string} arialabel Aria-label of selected stroke/line thickness option
+     */
+    verifySelectedIconIsDisplayedOnStrokeThicknessButton: (arialabel) => {
+        drawingResponsePage.defaultStrokeLineThicknessButton(arialabel)
+            .find('[class*="SelectedIcon"] svg')
+            .should('be.visible');
+    },
+
+    /**
+     * @param {number} thickness of the stroke
+     * @description this function verifies the thickness of the stroke in additional settings
+     */
+    verifyStrokeThicknessInAdditionalSettings: (thickness, index) => {
+        drawingResponsePage.additionalSettingsStrokeImage()
+            .eq(index)
+            .should('have.attr', 'height', thickness)
+            .and('have.attr', 'width', thickness);
+    },
+
+    /**
+     * @param {string} arialabel set line type option to be unselected
+     * @description this function unselect line type option
+     */
+    unselectSetLineTypeOption: (arialabel) => {
+        drawingResponsePage.setLineTypeButton(arialabel)
+            .click();
+    },
+
+    verifySpellCheckCheckboxIsUnchecked: () => {
+        drawingResponsePage.spellCheckCheckBox()
+            .should('not.be.checked');
+    },
+
+    checkSpellCheckCheckbox: () => {
+        drawingResponsePage.spellCheckCheckBox()
+            .click()
+            .should('be.checked');
+    },
+
+    uncheckSpellCheckCheckbox: () => {
+        drawingResponsePage.spellCheckCheckBox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    /**
+     * @description Verify that line type option is selected.
+     * @param {string} arialabel Aria-label of line type option
+     */
+    verifyLineTypeOptionIsSelected: (arialabel) => {
+        drawingResponsePage.setLineTypeButton(arialabel)
+            .then(($element) => {
+                const attributeValue = $element.attr('aria-label');
+                expect(attributeValue).to.include('selected');
+            });
+    },
+
+    /**
+     * @description Verify that line type option is not selected.
+     * @param {string} arialabel Aria-label of line type option
+     */
+    verifyLineTypeOptionIsNotSelected: (arialabel) => {
+        drawingResponsePage.setLineTypeButton(arialabel)
+            .then(($element) => {
+                const attributeValue = $element.attr('aria-label');
+                expect(attributeValue).to.not.include('selected');
+            });
+    },
+
+    /**
+     * @description Verify that selected icon is not displayed.
+     * @param {string} arialabel Aria-label of line type option
+     */
+    verifySelectedIconIsNotDisplayedOnLineTypeButton: (arialabel) => {
+        drawingResponsePage.setLineTypeButton(arialabel)
+            .find('[class*="SelectedIcon"]')
+            .should('not.exist');
+    },
+
+    verifyBlankCanvasRadioButtonIsSelected: () => {
+        drawingResponsePage.blankCanvasRadioButton()
+            .should('be.checked');
+    },
+
+    /**
+    * @param {number} canvasWidth width of the canvas
+    * @description this function verifies canvas width input field value
+    */
+    verifyCanvasWidthInputFieldValue: (canvasWidth) => {
+        drawingResponsePage.canvasWidthInputField()
+            .should('have.value', canvasWidth);
+    },
+
+    /**
+     * @param {number} canvasHeight height of the canvas
+     * @description this function verifies canvas height input field value
+     */
+    verifyCanvasHeightInputFieldValue: (canvasHeight) => {
+        drawingResponsePage.canvasHeightInputField()
+            .should('have.value', canvasHeight);
+    },
+
+    /**
+    * @param {number} canvasHeight Height of the displayed canvas
+    * @description Add input to canvas height input field
+    */
+    enterTextInCanvasHeightInputField: (canvasHeight) => {
+        drawingResponsePage.canvasHeightInputField()
+            .clear()
+            .type(`${canvasHeight}`)
+            .blur()
+            .should('have.value', canvasHeight);
+    },
+
+    /**
+     * @param {number} canvasWidth Width of the displayed canvas
+     * @description Add input to canvas width input field
+     */
+    enterTextInCanvasWidthInputField: (canvasWidth) => {
+        drawingResponsePage.canvasWidthInputField()
+            .clear()
+            .type(`${canvasWidth}`)
+            .blur()
+            .should('have.value', canvasWidth);
+    },
+
+    /**
+    * @description this function locks aspect ratio
+    */
+    lockAspectRatio: () => {
+        drawingResponsePage.aspectRatioButton()
+            .click();
+        steps.verifyAspectRatioButtonIsLocked();
+    },
+
+    /**
+     * @description this function unlocks aspect ratio
+     */
+    unlockAspectRatio: () => {
+        drawingResponsePage.aspectRatioButton()
+            .click();
+        steps.verifyAspectRatioButtonIsUnlocked();
+    },
+
+    /**
+     * @description this function verifies aspect ratio is locked
+     */
+    verifyAspectRatioButtonIsLocked: () => {
+        drawingResponsePage.aspectRatioButton()
+            .should('have.attr', 'aria-label', 'Locked aspect ratio');
+    },
+
+    /**
+    * @description this function verifies aspect ratio is unlocked
+    */
+    verifyAspectRatioButtonIsUnlocked: () => {
+        drawingResponsePage.aspectRatioButton()
+            .should('have.attr', 'aria-label', 'Unlocked aspect ratio');
+    },
+
+    /**
+    * @description this function verifies the reset dimensions button is disabled
+    */
+    verifyResetDimensionsButtonIsDisabled: () => {
+        utilities.verifyElementDisabled(drawingResponsePage.resetDimensionsButton());
+    },
+
+    /**
+     * @description this function resets dimensions
+     */
+    resetDimensions: () => {
+        drawingResponsePage.resetDimensionsButton()
+            .click();
+    },
+
+    selectImageRadioButton: () => {
+        drawingResponsePage.imageRadioButton()
+            .click()
+            .should('be.checked');
+    },
+
+    selectShowOnlyCustomSpecialCharactersRadioButton: () => {
+        drawingResponsePage.showOnlyCustomSpecialCharactersRadioButton()
+            .click()
+            .should('be.checked');
+    },
+
+    verifyFillImageToCanvasCheckboxIsUnchecked: () => {
+        drawingResponsePage.fillImageToCanvasCheckbox()
+            .should('not.be.checked');
+    },
+
+    checkFillImageToCanvasCheckbox: () => {
+        drawingResponsePage.fillImageToCanvasCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    /**
+     * @param {string} imageAlternativeText alternate input field
+     * @description this function verifies text present in image alternative text input
+     */
+    verifyImageAlternativeTextInputField: (imageAlternativeText) => {
+        drawingResponsePage.imageAlternativeTextInputField()
+            .should('have.value', imageAlternativeText);
+    },
+
+    /**
+     * @param {number} opacityValue value of opacity
+     * @description this function is used to verify the opacity value in the opacity input field
+     */
+    verifyOpacityInputFieldValue: (opacityValue) => {
+        drawingResponsePage.opacityInputField()
+            .should('have.value', opacityValue)
+    },
+
+    /**
+     * @param {number} value of opacity
+     * @description this function is used to enter value in opacity input field
+     */
+    addInputToOpacityInputField: (value) => {
+        drawingResponsePage.opacityInputField()
+            .clear()
+            .type(value, { delay: 0 })
+    },
+
+    clickOnOpacitySlider: () => {
+        drawingResponsePage.opacitySlider()
+            .click();
+    },
+
+    addInputToCustomSpecialCharactersInputField: (input) => {
+        drawingResponsePage.customSpecialCharactersInputField()
+            .type(`${input}`)
+            .should('have.value', `${input}`)
+    },
+
+    selectCustomSpecialCharacter: () => {
+        drawingResponsePage.charactersPopupCharacterSymbol()
+            .click();
+    },
+    // student view
+    /**
+    * @param {string} arialabel toolbar option to be selected
+    * @description this function selects toolbar option from student view
+    */
+    selectStudentViewToolbarOption: (arialabel) => {
+        drawingResponsePage.studentAndGradingViewDrawingToolbarOption(arialabel)
+            .click();
+    },
+
+    clickOnStudentViewUpperCanvas: () => {
+        drawingResponsePage.studentViewUpperCanvas()
+            .click({ force: true });
+        createQuestionBasePage
+    },
+
+    verifyCustomizeToolbarOptionsAndControlsAccordionCollapsedState: () => {
+        drawingResponsePage.customizeToolbarOptionsAndControlsAccordion()
+            .should('have.attr', 'aria-expanded', 'false');
+    },
+
+    /**
+     * @param {string} toolbarOption title of the toolbar options
+     * @description Select the toolbar option or controls tile in customize section
+     */
+    unselectToolbarOptionsAndControlsFormattingOptionsTiles: (toolbarOption) => {
+        drawingResponsePage.toolbarOptionsAndControlsFormattingOptionsTiles(toolbarOption)
+            .click()
+            .find('[role="menuitemcheckbox"]')
+            .should('have.attr', 'aria-checked', 'false');
+    },
+
+    /**
+     * @param {string[]} defaultAdditionalOptionsArray Array of aria-label of the additional options
+     * @description verifies that the additional option is unselected
+     */
+    verifyAdditionalOptionsUnselectedState: (defaultAdditionalOptionsArray) => {
+        defaultAdditionalOptionsArray.forEach((additionalOption) => {
+            drawingResponsePage.additionalOptionsTiles(additionalOption)
+                .should('have.class', 'ngie-toggle-button-not-selected');
+        });
+    },
+
+    /**
+     * @param {string} toolbarAndControlOption aria-label of the toolbar and controls formating options
+     * @description verifies that the toolbar and controls formating options is in selected state.
+     */
+    verifyToolbarAndControlsOptionsSelectedState: (toolbarAndControlOption) => {
+            drawingResponsePage.toolbarOptionsAndControlsFormattingOptionsTiles(toolbarAndControlOption)
+                .should('have.class', 'Mui-selected');
+    }
+}
+
+const tests = {
+    ...questionInstructionsComponent.tests,
+    ...commonComponents.tests,
+    ...additionalSettingsPanel.tests,
+    ...questionInstructionsComponent.tests,
+    ...scoringSectionBaseEditTab.tests,
+    ...createQuestionBasePage.tests,
+
+    checkAccessibilityForSecondaryToolbarOptionPopup: () => {
+        it('Accessibility of popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.previewTabSecondaryOptionPopup());
+        });
+    }
+}
+
+export const drawingResponsePage = {
+    ...selectors,
+    steps,
+    tests
+}