itemengine-cypress-automation 1.0.342-regressionFixes18thMarch-b97f3ea.0 → 1.0.342

package/cypress/pages/thinkSpherePage.js

@@ -0,0 +1,1874 @@
+import utilities from "../support/helpers/utilities";
+import { browseItemsPage } from "../pages/components/browseItemsPage";
+import { editCategoryFlyout } from "../pages/components/editCategoryFlyout";
+import { dialogBoxBase } from "../pages/dialogBoxBase";
+import { backgroundImageUploadComponent, createQuestionBasePage, scoringSectionBaseEditTab, commonComponents, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent, toolSettingsComponent, questionInstructionsComponent, studentViewSettingsLabelComponent, defaultToolDropdown, essayResponseCommonComponents, equationEditorSectionCommonComponent, equationEditorFlyout, createCustomCategoryFlyout } from "./components"
+import { drawingResponsePage } from "./drawingResponsePage";
+import { optionsWrapperComponent } from "../pages/components/optionsWrapperComponent";
+import { selectQuestionResourceToolPage } from "./selectQuestionResourceToolPage";
+import { videoResponsePage } from "./videoResponsePage";
+import { singleSelectionPage } from "./singleSelectionPage";
+import { essayResponsePage } from "./essayResponsePage";
+import { equationEditorCategoriesAndSymbols } from "../fixtures/equationEditorCategoriesAndSymbols ";
+const css = Cypress.env('css');
+
+const selectors = {
+    ...essayResponsePage,
+    ...backgroundImageUploadComponent,
+    ...questionInstructionsComponent,
+    ...commonComponents,
+    ...scoringSectionBaseEditTab,
+    ...additionalSettingsPanel,
+    ...drawingResponsePage,
+    ...defaultToolDropdown,
+    ...optionsWrapperComponent,
+    ...essayResponseCommonComponents,
+    ...equationEditorSectionCommonComponent,
+    ...selectQuestionResourceToolPage,
+    ...browseItemsPage,
+    ...videoResponsePage,
+    ...dialogBoxBase,
+    ...editCategoryFlyout,
+    ...createCustomCategoryFlyout,
+    ...createQuestionBasePage,
+    
+    editQuestionPencil: () => cy.get('[class*="Widgetstyles__HeaderContainer"] button.icon-pencil'),
+    widgetHeaderQuestionTitle: () => cy.get('[class*="Widgetstyles__HeaderContainer"] [class*="Widgetstyles__QuestionTypeText"]'),
+    imageUploadSection: () => cy.get('[class*="TabsComponentstyles__ImageUploadComponentWrapper"]'),
+    addThinkSphereQuestionButton: () => cy.get('.ngie-btn-contained').contains('add ThinkSphere question'),
+    whiteBoardCanvasAndControls: () => cy.get('[class*="WhiteboardPagesstyles__WhiteboardPagesWrapper"]'),
+    whiteBoardImageProperties: () => cy.get('[class*="WhiteBoardImagePropertiesstyles__ImagePropertiesWrapper"]'),
+    whiteBoardImagePropertiesInputTypeFile: () => cy.get('[class*="WhiteBoardImagePropertiesstyles__ImagePropertiesWrapper"] input[type="file"]'),
+    topLeftButton: () => utilities.getNthElement(cy.get('button[class*="WhiteBoardImagePropertiesstyles__StyledButton"]'), 0),
+    centerButton: () => utilities.getNthElement(cy.get('button[class*="WhiteBoardImagePropertiesstyles__StyledButton"]'), 1),
+    topRightButton: () => utilities.getNthElement(cy.get('button[class*="WhiteBoardImagePropertiesstyles__StyledButton"]'), 2),
+    opacityLabel: () => utilities.getNthElement(cy.get('h2[class*="WhiteBoardImagePropertiesstyles__LayoutLabel"]'), 1),
+    imageAlternativeTextLabel: () => cy.get('div[class*="InlineTextFieldWithDebouncestyles__PropertyLabel"]'),
+    imageAlternativeTextInputField: () => cy.get('input.text-field'),
+    imageRadioButton: () => cy.get('div[data-value="image"]'),
+    manageWhiteBoardTitle: () => cy.get('[class*="WhiteboardPagesstyles__HeadingLabel"]'),
+    whiteBoardPreviousButton: () => cy.get('[class*="whiteboard-pagination-prev-button"]'),
+    whiteBoardPageLabel: () => cy.get('[class*="WhiteboardPagesstyles__PageLabel"]'),
+    whiteBoardPageCounter: () => cy.get('[class*="WhiteboardPagesstyles__PageCounter"]'),
+    whiteBoardNextButton: () => cy.get('[class*="whiteboard-pagination-next-button"]'),
+    whiteBoardDeleteButton: () => cy.get('[class*="whiteboard-delete-page-button"]'),
+    whiteBoardAddNewPageButton: () => cy.get('[class*="whiteboard-add-new-page-button"]'),
+    imageRadioInput: () => cy.get('div[data-value="image"] input[type="radio"]'),
+    pageImageTitle: () => cy.get('div[class*="WhiteBoardImagePropertiesstyles__PageImageTitle"]'),
+    radioGroupWrapper: () => cy.get('div[class*="ngie-radio-group-wrapper"]'),
+    blankCanvasRadioInput: () => cy.get('div[data-value="blankCanvas"] input[type="radio"]'),
+    imageUploadSectionWrapper: () => cy.get('div[class*="UploadImagestyles__BackgroundImageWrapper"]'),
+    pageImagePropertiesTitle: () => cy.get('div[class*="WhiteBoardImagePropertiesstyles__PageImagePropertiesTitle"]'),
+    layoutLabel: () => cy.get('h2[class*="WhiteBoardImagePropertiesstyles__LayoutLabel"]'),
+    alignmentOptions: () => cy.get('ul[class*="WhiteBoardImagePropertiesstyles__AlignmentOptions"]'),
+    solvePhaseAccordion: () => utilities.getNthElement(cy.get('[class*="Solvestyles__SolvePhaseAccordionWrapper"] .ngie-accordion-summary'), 0),
+    solvePhaseAccordionLabel: () => utilities.getNthElement(cy.get('.thinksphere-author-phases-accordion [class*="Solvestyles__HeadingLabel"]'), 0),
+    solvePhaseAccordionExpandIcon: () => utilities.getNthElement(cy.get('.thinksphere-author-phases-accordion [class*="expandIconWrapper"]'), 0),
+    solveToolsAndControlsOptionsTiles: (formattingOption) => cy.get(`.icon-button-custom-format[aria-label*="${formattingOption}"]`),
+    solvePhaseAccordionContentWrapper: () => cy.get('.thinksphere-author-phases-accordion [class*="Solvestyles__ContentWrapper"]'),
+    customizeToolsAndControls: () => cy.get('.thinksphere-author-phases-accordion .customize-tools-and-controls-wrapper .ngie-accordion-summary'),
+    customizeToolsAndControlsIcon: () => cy.get('.thinksphere-author-phases-accordion .customize-tools-and-controls-wrapper [class*="expandIconWrapper"]'),
+    customizeToolsAndControlsLabel: () => cy.get('.thinksphere-author-phases-accordion .customize-tools-and-controls-wrapper [class*="Solvestyles__HeadingLabel"]'),
+    phasesSection: () => cy.get('[class*="Phasesstyles__PhasesWrapper"]'),
+    phasesSectionTitle: () => cy.get('[class*="Phasesstyles__PhasesTextWrapper"]'),
+    planPhaseSection: () => cy.get('[class*="Planstyles__PlanAccordianWrapper"]'),
+    planPhaseAccordian: () => cy.get('[class*="Planstyles__PlanAccordianWrapper"] [class~="MuiAccordionSummary-root"]'),
+    planPhaseAccordianLabel: () => cy.get('[class*="Planstyles__AccordionLabel"]'),
+    planPhaseSectionDescription: () => cy.get('[class*="Planstyles__PlanAccordianWrapper"] [class*="Planstyles__PlanDescriptionTextWrapper"]'),
+    planStrategySection: () => cy.get('[class*="Planstyles__StrategiesWrapper"]'),
+    planStrategyListHeader: () => cy.get('[class*="Planstyles__StrategiesWrapper"] [class*="Planstyles__HeadingTextWrapper"]'),
+    planStrategyListResetToDefault: () => cy.get('[class*="Planstyles__StrategiesWrapper"] [class*="Planstyles__DefaultResetWrapper"]'),
+    planStrategyAddItemButton: () => cy.get('[class*="Planstyles__StrategiesWrapper"] [class*="ListOptionsComponentstyles__AddItemWrapper"] [role="button"]'),
+    planStrategyCheckbox: () => cy.get('[class*="Planstyles__StrategiesWrapper"] .thinksphere-option-text-field-wrapper [data-ngie-testid*="-checkbox"]'),
+    videoLinkComponent: () => utilities.getNthElement(cy.get('[class*="ListOptionsComponentstyles__UploadVideoWrapper"]'), 0),
+    uploadVideoLinkButton: () => cy.get('[class*="ListOptionsComponentstyles__UploadVideoTextWrapper"]'),
+    planSentenceStarterSection: () => cy.get('[class*="Planstyles__SentenceFramesWrapper"]'),
+    planSentenceStarterListHeader: () => cy.get('[class*="Planstyles__SentenceFramesWrapper"] [class*="Planstyles__HeadingTextWrapper"]'),
+    planSentenceStarterListResetToDefault: () => cy.get('[class*="Planstyles__SentenceFramesWrapper"] [class*="Planstyles__DefaultResetWrapper"]'),
+    planSentenceStarterAddItemButton: () => cy.get('[class*="Planstyles__SentenceFramesWrapper"] [class*="ListOptionsComponentstyles__AddItemWrapper"] [role="button"]'),
+    planSentenceStarterCheckbox : () => cy.get('[class*="Planstyles__SentenceFramesWrapper"] .thinksphere-option-text-field-wrapper [data-ngie-testid*="-checkbox"]'),
+    solvePhaseAccordian: () => cy.get('[class*="Planstyles__SolveAccordianWrapper"] [class~="MuiAccordionSummary-root"] [role="button"]'),
+    solvePhaseAccordianLabel: () => cy.get('[class*="Solvestyles__AccordionLabel"]'),
+    inputTypeVideoFile: () => cy.get('[class*="Planstyles__StrategiesWrapper"] input[type="file"]'),
+    inputTypeFile: () => cy.get('[class*="TabsComponentstyles__ImageUploadComponentWrapper"] input[type="file"]'),
+    whiteBoardInputTypeFile: () => cy.get('[class*="UploadImagestyles__UploadWrapper"] input[type="file"]'),
+    warningPopupTitle: () => cy.get('.dialog-title-wrapper'),
+    warningPopupContentText: () => cy.get('.upload-question-preview-popup-error-msg'),
+    warningPopupOkButton: () => cy.get('.upload-question-preview-popup-ok-btn'),
+    editVideoButton: () => cy.get('[aria-label*="Change video"]'),
+    deleteVideoButton: () => cy.get('[aria-label*="Delete video"]'),
+    listInputField: () => cy.get('.option-component textarea[placeholder]'),
+    deleteButton: () => cy.get('button[aria-label*="Delete"]'),
+    optionNumeration: () => cy.get('[class*="MuiInputAdornment-positionStart"]'),
+    iconPencil: () => cy.get('div[class*="icon-pencil"]'),
+    iconXCircle: () => cy.get('div[class*="icon-x-circle"]'),
+    dragIcon: () => cy.get('[class*="drag-icon-edit"]'),
+    moreOptionsIcon: () => cy.get('[class*="more-options-icon"]'),
+    ThinkSphereQuestionHeaderPencilIcon: () => utilities.getNthElement(cy.get('[class*="Widgetstyles__HeaderContainer"] [class*="icon-pencil"]'), 0),
+    ThinkSphereMathQuestionHeaderSwapIcon: () => cy.get('[class*="Widgetstyles__HeaderContainer"] [class*="icon-swap"]'),
+    ThinkSphereMathQuestionHeaderPencilIcon: () => utilities.getNthElement(cy.get('[class*="Widgetstyles__HeaderContainer"] [class*="icon-pencil"]'), 1),
+    thinkSphereMathQuestionHeaderDeleteIcon: () => cy.get('[class*="Widgetstyles__HeaderContainer"] [class*="icon-Delete"]'),
+    addCheckMathQuestionButton: () => cy.get('.ngie-btn-typography').contains(`Add 'Check your math' question`),
+    firstAvailableItemLink: () => utilities.getNthElement(cy.get('.browse-item-styled-link'), 0),
+    saveButton: () => cy.get('.ngie-btn-typography').contains('save',{matchCase: false}),
+    cancelButton: () => cy.get('.ngie-btn-typography').contains('cancel',{matchCase: false}),
+    AddCheckMathQuestionHeader: () => cy.get('.browse-title-wrapper').contains(`Add 'Check your math' question`),
+    singleOptionTextFieldWrapper: () => cy.get('[class*="SingleOptionstyle__TextFieldWrapper"]'),
+    customizeStampComponent: () => cy.get('[class*="CustomizeStampstyles__CustomizeStampWrapper"]'),
+    customizeStampHeading: () => cy.get('[class*="CustomizeStampstyles__CustomizeStampHeading"]'),
+    customizeStampCard: (ariaLabel, checked) => cy.get(`[class*="CustomizeStampstyles__StampCard"]${ariaLabel ? ('[aria-label="' + ariaLabel + '"]') : ''}${checked ? ('[aria-checked="' + checked + '"]') : ''}`),
+    customizeStampCardImg: (ariaLabel) => cy.get('[class*="CustomizeStampstyles__QuestionImage"]'),
+    questionImage: () => cy.get('img[class*="QuestionImageComponentstyle__QuestionImage"]'),
+    stampsToolButton: () => cy.get('#stamps button[aria-label*="Stamps"]'),
+    imageUploadSectionImageLabel: () => thinkSpherePage.imageUploadSection().find('div[class*="edit-question-image-label"]'),
+    imageUploadSectionUploadFileContent: () => thinkSpherePage.imageUploadSection().find('div[class*="upload-file-content"]'),
+    imageUploadSectionUploadCloudIconWrapper: () => thinkSpherePage.imageUploadSection().find('div[class*="upload-question-upload-cloud-icon-wrapper"]'),
+    imageUploadSectionDragDropFileText: () => thinkSpherePage.imageUploadSection().find('span[class*="drag-and-drop-file-text"]'),
+    imageUploadSectionFileInputLabel: () => thinkSpherePage.imageUploadSection().find('div[class*="file-input-label"]'),
+    imageUploadSectionDeviceIcon: () => thinkSpherePage.imageUploadSection().find('span[class*="icon-Device"]'),
+    imageUploadSectionSupportedFileText: () => thinkSpherePage.imageUploadSection().find('span[class*="supported-file-text"]'),
+    imageUploadSectionSupportedFileIconWrapper: () => thinkSpherePage.imageUploadSection().find('div[class*="supported-file-icon-wrapper"]'),
+    imageUploadSectionMaximumFileSize: () => thinkSpherePage.imageUploadSection().find('div[class*="maximum-file-size"]'),
+    imageUploadSectionFileUploaderWrapper: () => thinkSpherePage.imageUploadSection().find('div[class*="QuestionImageComponentstyle__FileUploaderWrapper"]'),
+    imageUploadSectionQuestionImage: () => thinkSpherePage.imageUploadSection().find('div[class*="QuestionImageComponentstyle__QuestionImage"]'),
+    imageUploadSectionQuestionImageContainer: () => thinkSpherePage.imageUploadSection().find('div[class*="QuestionImageComponentstyle__QuestionImageContainer"]'),
+    imageUploadSectionQuestionImageEditIcon: () => thinkSpherePage.imageUploadSection().find('div[class*="QuestionImageComponentstyle__EditIcon"]'),
+    imageUploadSectionQuestionImageCrossIcon: () => thinkSpherePage.imageUploadSection().find('div[class*="QuestionImageComponentstyle__CrossIcon"]'),
+    imageRadioButtonParentSvg: () => thinkSpherePage.imageRadioButton().parent().find('svg'),
+    solvePhaseAccordionSvg: () => thinkSpherePage.solvePhaseAccordion().find('svg'),
+    customizeToolsAndControlsPath: () => thinkSpherePage.customizeToolsAndControls().find('path'),
+    solvePhaseToolsAndControlsOptionsTilesFeatherCheckIcon: () => thinkSpherePage.solveToolsAndControlsOptionsTiles('Text').find('[data-name="Icon feather-check"]'),
+    solvePhaseToolsAndControlsOptionsTilesRectangle: () => thinkSpherePage.solveToolsAndControlsOptionsTiles('Text').find('[data-name*="Rectangle"]'),
+    solvePhaseToolsAndControlsOptionsTilesDragItemFlexWrapperSvg: () => thinkSpherePage.solveToolsAndControlsOptionsTiles('Text').find('.drag-item-flex-wrapper svg'),
+    solvePhaseToolsAndControlsOptionsTilesTextDragIconSvgPath: () => thinkSpherePage.solveToolsAndControlsOptionsTiles('Text').find('.drag-icon-button-custom-format svg path'),
+    solvePhaseToolsAndControlsOptionsTilesArrayDragIconSvgPath: () => thinkSpherePage.solveToolsAndControlsOptionsTiles('Array').find('.drag-icon-button-custom-format svg path'),
+    playerTimer: () => cy.get('[class*="VideoPlayerstyles__PlayerTimerWrapper"]'),
+    strategiesPreviewHeader: () => cy.get('[class*="StrategiesPreviewstyles__HeadingWrapper"]'),
+    addNewStrategyButton: () => cy.get('[class*="StrategiesPreviewstyles__AddStrategyButton"]'),
+    strategiesInputBoxEditTab: () => cy.get('.video-upload-support-wrapper .edit-mcq-option-wrapper'),
+    strategiesBoxPreviewTab: () => cy.get('[class*="StrategiesPreviewstyles__ListWrapper"]'),
+    popupTitle: () => cy.get('[class*="dialog-title-wrapper"]'),
+    strategyNameLabel: () => cy.get('[class*="ThinkSpherePreviewstyles__StrategyNameTextWrapper"]'),
+    strategyNameInputField: () => cy.get('[class*="new-strategy-name-field"]'),
+    addStrategyPopupCancelButton: () => 
+        cy.get('.dialog-content').contains('Cancel'),
+    addStrategyPopupSaveButton: () => 
+        cy.get('.dialog-content').contains('Save'),
+    // preview tab plan section selection
+    questionInstructionPreviewTexWrapper: () => cy.get('.question-instruction.question-text-wrapper'),
+    questionInstructionPreviewImageWrapper: () => cy.get('[class*="ThinkSpherePreviewstyles__ImageWrapper"]'),
+    questionInstructionPreviewImageExpandButton: () => cy.get('[class*="ThinkSpherePreviewstyles__ExpandImageIconWrapper"]'),
+    questionInstructionImagePopup: () => cy.get('[class*="QuestionTextstyle__ImagePopupDiv"]'),
+    closeExpandImagePopupButton: () => cy.get('.close-popup-btn'),
+    PlanningPreviewWrapper : () => cy.get('[class*="PlanningPreviewstyles__PlanningPreviewWrapper"]'),
+    planningPreviewHeading: () => cy.get('[class*="PlanningPreviewstyles__HeadingWrapper"]'),
+    planningWriteWrapper : () => cy.get('[class*="PlanningPreviewstyles__WriteWrapper"]'),
+    problemAskingWrapper: () => cy.get('[class*="PlanningPreviewstyles__ProblemAskingWrapper"]'),
+    contentEditableDiv: () => cy.get('[class*="PlanningPreviewstyles__ContentEditableDiv"]'),
+    micIconWrapper: () => cy.get('[class*="PlanningPreviewstyles__MicIconWrapper"]'),
+    strategiesToPlanWrapper: () => cy.get('[class*="PlanningPreviewstyles__StrategiesToPlanWrapper"]'),
+    subheadingWrapper: () => cy.get('[class*="PlanningPreviewstyles__SubHeadingWrapper"]'),
+    writePlanWrapper: () => cy.get('[class*="PlanningPreviewstyles__WritePlanWrapper"]'),
+    strategyChipWrapper: () => cy.get('[class*="PlanningPreviewstyles__StrategyChipWrapper"]'),
+    strategyChip: () => cy.get('[class*="PlanningPreviewstyles__StrategyChip-"]'),
+    strategiesPreviewListLI: () => cy.get('[class*="StrategiesPreviewstyles__ListLI"]'),
+    chooseStarterLabel: () => cy.get('[class*="ThinkSpherePreviewstyles__DropDownLabel"]'),
+    chooseStarterDropdown: () => cy.get('[class*="drop-down-parent"]'),
+    chooseStarterTextIconWrapper: () => cy.get('[class*="DropDownstyles__StarterTextIconWrapper"]'),
+    chooseStartersListOptions: () => cy.get('.ngie-popover-container.dropdown-list-container li[role="option"]'),
+    chooseStartersListOptionLabels: () => cy.get('.ngie-popover-container.dropdown-list-container li[role="option"] .dropdown-label-text'),
+    starterTextWrapper: () => cy.get('.starter-text-wrapper'),
+    starterIocn: () => cy.get('[class*="DropDownstyles__StarterIconWrapper"]'),
+    addNewStrategyTextWrapper: () => cy.get('[class*="StrategiesPreviewstyles__AddStrategyTextWrapper"]'),
+    strategyTextWrapper: () => cy.get('[class*="StrategiesPreviewstyles__StrategyTextWrapper"]'),
+    videoIconWrapper: () => cy.get('[class*="StrategiesPreviewstyles__VideoIconWrapper"]'),
+    whiteBoardCanvas: () => cy.get('[class*="WhiteboardPagesstyles__Canvas"]'),
+    whiteBoardImage: () => cy.get('[class*="WhiteboardPagesstyles__BackgroundImage"]'),
+    videoPopupTitle: () => cy.get('[class*="dialog-title-wrapper"]'),
+    videoPopupCloseButton: () => cy.get('[class*="dialog-close-button"]'),
+    videoPreviewPopup: () => cy.get('[class*="video-preview-popup"]'),
+    gridItemsWrapper: (number) => cy.get('[class*="DragAndDropGridstyles__GridItemsWrapper"]').eq(number),
+    dragButton: (number) => cy.get('[type="button"]').eq(number),
+    customizeStampsButton: (customizeStampPosition) => cy.get(`button[aria-label="Stamp ${customizeStampPosition}"]`),
+    buttonSave: () => cy.get('.action-btn-wrapper button').eq(1),
+    buttonCancel: () => cy.get('.action-btn-wrapper button').eq(0),
+    nextGenThinkSphereCreateItemWrapper: () => cy.get('#nextgen-thinkshpere-create-item'),
+    equationEditorSectionTitle: () => cy.get('.equation-editor-text-title'),
+    referenceIdWrapper: () => cy.get('.edit-item-reference-id-wrapper'),
+    editBoxWrapper: () => cy.get('.edit-box-wrapper'),
+    editBoxText: () => cy.get('.edit-box-text'),
+    editBoxTextInput: () => thinkSpherePage.editBoxWrapper().find('input'),
+    editIconPencil: () => cy.get('.icon-pencil'),
+    thinkSphereQuestionHeader: () => cy.get('.edit-question-header-title'),
+    filterSectionQuestionTypesAccordion: () => cy.get('.filter-section-expansion-panel-summary-root'),
+    filterSectionQuestionAccordion: () => cy.get('.expansion-item-expansion-panel-summary-content'),
+    checkBox: () => cy.get('.MuiCheckbox-root'),
+    browseItemQuestionItem: () => cy.get('.browse-item-question-item'),
+    ErrorMessageContainer: () => cy.get('.ErrorMessageContainer'),
+    categoriesDropDown: () => cy.get('.dropdown-form-control[label="Categories"]'),
+    categoriesDropDownLabelText: () => cy.get('.dropdown-label-text'),
+    categoriesDropDownMenuItem: () => cy.get('.dropdown-menu-item .dropdown-label-text'),
+    categoriesDropDownParent: () => cy.get('.drop-down-parent'),
+    cardWrapper: () => cy.get('.card-wrapper'),
+    cardLabel: () => cy.get('.widget-card-label'),
+    thinkSphereQuestionInstructionCKEditor: () => cy.get('div.cke_editable[contenteditable="true"]'),
+};
+
+const steps = {
+    ...essayResponsePage.steps,
+    ...backgroundImageUploadComponent.steps,
+    ...questionInstructionsComponent.steps,
+    ...scoringSectionBaseEditTab.steps,
+    ...commonComponents.steps,
+    ...additionalSettingsPanel.steps,
+    ...toolSettingsComponent.steps,
+    ...studentViewSettingsLabelComponent.tests,
+    ...defaultToolDropdown.steps,
+    ...optionsWrapperComponent.steps,
+    ...essayResponseCommonComponents.steps,
+    ...equationEditorFlyout.steps,
+    ...equationEditorSectionCommonComponent.steps,
+    ...selectQuestionResourceToolPage.steps,
+    ...browseItemsPage.steps,
+    ...videoResponsePage.steps,
+    ...createQuestionBasePage.steps,
+    ...createCustomCategoryFlyout.steps,
+
+    /**
+     * Navigates to the ThinkSphere create question page.
+     * @param {string} questionType - The type of question to create.
+     */
+    navigateToThinkSphereCreateQuestion: (questionType) => {
+        cy.visit('/item-engine/thinksphere/create-item');
+        thinkSpherePage.steps.addThinkSphereQuestion();
+    },
+
+    addThinkSphereQuestion: () => {
+        thinkSpherePage.addThinkSphereQuestionButton()
+            .click();
+    },
+
+    /**
+     * Verifies if the accordion is collapsed.
+     * @param {string} accordian - The accordion to verify ('plan' or 'solve').
+     * @param {boolean} isCollapsed - Whether the accordion should be collapsed.
+     */
+    verifyAccordianCollapsed: (accordian, isCollapsed) => {
+        if (accordian === 'plan') {
+            thinkSpherePage.planPhaseAccordian()
+                .should('have.attr', 'aria-expanded', isCollapsed ? 'false' : 'true');
+        } else if (accordian === 'solve') {
+            thinkSpherePage.solvePhaseAccordian()
+                .should('have.attr', 'aria-expanded', isCollapsed ? 'false' : 'true');
+        }
+    },
+
+    /**
+     * Clicks on the specified accordion.
+     * @param {string} accordian - The accordion to click ('plan' or 'solve').
+     */
+    clickOnAccordian: (accordian) => {
+        if (accordian === 'plan') {
+            thinkSpherePage.planPhaseAccordian()
+                .click();
+        } else if (accordian === 'solve') {
+            thinkSpherePage.solvePhaseAccordian()
+                .click();
+        }
+        cy.wait(500);
+    },
+
+    clickOnEditThinkSphereItem: () => {
+        browseItemsPage.steps.clickOnItemReferenceId('~zzz item name');
+        utilities.getNthElement(thinkSpherePage.editQuestionPencil(), 0)
+            .click();
+        cy.barsPreLoaderWait();
+    },
+
+    clickOnAddCheckMathQuestionButton: () => {
+        thinkSpherePage.addCheckMathQuestionButton()
+            .click();
+        cy.interceptGraphql('getItems');
+    },
+
+    clickOnFirstAvailableItemLink: () => {
+        thinkSpherePage.firstAvailableItemLink()
+            .click();
+        cy.interceptGraphql('getItems');
+    },
+
+    clickOnSaveButton: () => {
+        cy.interceptGraphql('setItem');
+        thinkSpherePage.saveButton()
+            .click();
+        cy.wait('@setItem');
+    },
+
+    clickOnCancelButton: () => {
+        cy.interceptGraphql('setItem');
+        thinkSpherePage.cancelButton()
+            .click();
+    },
+
+    clickOnSwapButton: () => {
+        thinkSpherePage.ThinkSphereMathQuestionHeaderSwapIcon()
+            .click();
+        cy.wait(2000);
+    },
+
+    clickOnEditButton: () => {
+        thinkSpherePage.ThinkSphereMathQuestionHeaderPencilIcon()
+            .click();
+        cy.wait(2000);
+    },
+
+    clickOnDeleteButton: () => {
+        thinkSpherePage.thinkSphereMathQuestionHeaderDeleteIcon()
+            .click();
+        cy.wait(2000);
+    },
+
+    /**
+     * Verifies the question title.
+     * @param {string} questionType - The type of question to verify.
+     */
+    verifyQuestionTitle: (questionType) => {
+        utilities.verifyInnerText(utilities.getNthElement(thinkSpherePage.widgetHeaderQuestionTitle(), 0), questionType);
+    },
+
+    verifyPlanSectionAccessibility: () => {
+        thinkSpherePage.planPhaseSection().find('div[class~="MuiAccordionSummary-root"]')
+            .should('have.attr', 'aria-expanded', 'true')
+            .should('have.attr', 'role', 'button')
+            .should('have.attr', 'tabindex', '0');
+    },
+
+    /**
+     * Uploads a file.
+     * @param {string} file - The file to upload.
+     */
+    uploadFile: (file) => {
+        thinkSpherePage.inputTypeFile()
+            .attachFile(file);
+        cy.wait(4000);
+    },
+
+    uploadWhiteBoardImage: (file) => {
+        thinkSpherePage.whiteBoardInputTypeFile()
+            .attachFile(file);
+        cy.wait(4000);
+    },
+
+    /**
+     * Uploads a video file.
+     * @param {string} file - The file to upload.
+     */
+    uploadVideoFile: (file) => {
+        const fileName = file.split('/').pop(); // Extracts only 'sample.mp4'
+    
+        cy.fixture(file, 'binary') // Read the file as binary
+            .then(Cypress.Blob.binaryStringToBlob)
+            .then((blob) => {
+                const fileObj = new File([blob], fileName, { type: 'video/mp4' });
+                const dataTransfer = new DataTransfer();
+                dataTransfer.items.add(fileObj);
+    
+                thinkSpherePage.inputTypeVideoFile().then(($input) => {
+                    $input[0].files = dataTransfer.files;
+                    cy.wrap($input).trigger('change', { force: true });
+                });
+            });
+    
+        cy.wait(4000);
+    },
+
+    /**
+     * Uploads a file to the whiteboard.
+     * @param {string} file - The file to upload.
+     */
+    WhiteBoardUploadFile: (file) => {
+        thinkSpherePage.whiteBoardImagePropertiesInputTypeFile()
+            .attachFile(file);
+        cy.wait(4000);
+    },
+
+    navigateToThinkSphereCreateItem: () => {
+        cy.visit('/item-engine/thinksphere/create-item');
+    },
+
+    navigateToReviewItemBank: () => {
+        thinkSpherePage.addReviewQuestionButton().click();
+    },
+
+    clickOnAddThinkSphereQuestion: () => {
+        thinkSpherePage.addThinkSphereQuestionButton()
+            .click();
+    },
+
+    verifyCenterOptionAlignmentIsSelected: () => {
+        thinkSpherePage.centerButton()
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+     * Verifies the opacity slider value.
+     * @param {string} opacityValue - The expected opacity value.
+     */
+    verifyOpacitySliderValue: (opacityValue) => {
+        thinkSpherePage.opacitySlider()
+            .find('input')
+            .should('have.value', opacityValue)
+    },
+
+    /**
+     * Verifies the opacity input field value.
+     * @param {string} opacityValue - The expected opacity value.
+     */
+    verifyOpacityInputFieldValue: (opacityValue) => {
+        thinkSpherePage.opacityInputField()
+            .should('have.value', opacityValue)
+    },
+
+    clickOnOpacitySlider: () => {
+        thinkSpherePage.opacitySlider()
+            .click();
+    },
+
+    /**
+     * Adds input to the opacity input field.
+     * @param {string} value - The value to input.
+     */
+    addInputToOpacityInputField: (value) => {
+        thinkSpherePage.opacityInputField()
+            .clear()
+            .type(value, { delay: 0 })
+    },
+
+    /**
+     * Verifies the image alternative text input field.
+     * @param {string} imageAlternativeText - The expected alternative text.
+     */
+    verifyImageAlternativeTextInputField: (imageAlternativeText) => {
+        thinkSpherePage.imageAlternativeTextInputField()
+            .should('have.value', imageAlternativeText);
+    },
+    expandSolvePhaseAccordion: () => {
+        thinkSpherePage.solvePhaseAccordion()
+        .click()
+        .should('have.attr', 'aria-expanded', 'true');
+    },
+    expandCustomizeToolsAndControls: () => {
+        thinkSpherePage.customizeToolsAndControls()
+        .click()
+        .should('have.attr', 'aria-expanded', 'true');
+    },
+    /**
+     * Verifies the tools and controls options.
+     * @param {Array<string>} options - The options to verify.
+     */
+    verifyToolsAndControlsOptions: (options) => {
+        options.forEach(option => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.solveToolsAndControlsOptionsTiles(option), 'visible');
+        });
+    },
+    /**
+     * Selects an option from tools and controls.
+     * @param {string} option - The option to select.
+     */
+    selectOptionFromToolsAndControls: (option) => {
+        thinkSpherePage.solveToolsAndControlsOptionsTiles(option)
+        .click();
+        thinkSpherePage.solveToolsAndControlsOptionsTiles(option)
+        .should('have.attr', 'data-aria-pressed', 'true');
+    },
+    /**
+     * Deselects an option from tools and controls.
+     * @param {string} option - The option to deselect.
+     */
+    deselectOptionFromToolsAndControls: (option) => {
+        thinkSpherePage.solveToolsAndControlsOptionsTiles(option)
+        .click();
+        thinkSpherePage.solveToolsAndControlsOptionsTiles(option)
+        .should('have.attr', 'data-aria-pressed', 'false');
+    },
+    /**
+     * Verifies if an option is selected.
+     * @param {string} option - The option to verify.
+     */
+    verifyOptionIsSelected: (option) => {
+        thinkSpherePage.solveToolsAndControlsOptionsTiles(option)
+        .should('have.attr', 'data-aria-pressed', 'true');
+    },
+    /**
+     * Verifies if an option is not selected.
+     * @param {string} option - The option to verify.
+     */
+    verifyOptionIsNotSelected: (option) => {
+        thinkSpherePage.solveToolsAndControlsOptionsTiles(option)
+        .should('have.attr', 'data-aria-pressed', 'false');
+    },
+
+    /**
+     * Verifies the options contents.
+     * @param {number} index - The index of the option.
+     * @param {string} text - The text to verify.
+     * @param {string} placeholder - The placeholder text to verify.
+     */
+    verifyOptionsContents: (index, text, placeholder) => {
+        utilities.getNthElement(thinkSpherePage.optionWrapper(), index)
+            .within(() => {
+                utilities.getNthElement(thinkSpherePage.listInputField(), 0)
+                    .should('have.attr', 'placeholder', placeholder);
+                utilities.getNthElement(thinkSpherePage.listInputField(), 0)
+                    .should('have.value', text);
+                thinkSpherePage.dragHandleButton()
+                    .should('exist');
+                thinkSpherePage.deleteButton()
+                    .should('be.visible');
+                thinkSpherePage.optionNumeration()
+                    .should('have.text', index + 1);
+            });
+    },
+
+    /**
+     * Deletes an option.
+     * @param {number} index - The index of the option to delete.
+     */
+    deleteOption: (index) => {
+        utilities.getNthElement(thinkSpherePage.deleteButton(), index)
+            .click();
+    },
+    
+    /**
+     * Verifies the delete option button disabled state.
+     * @param {string} list - The list to verify ('strategy' or other).
+     */
+    verifyDeleteOptionButtonDisabledState: (list) => {
+        if (list === "strategy") {
+            utilities.getNthElement(thinkSpherePage.optionsSectionWrapper(), 0)
+                .within(() => {
+                    thinkSpherePage.deleteButton()
+                        .each(($element) => {
+                            utilities.verifyElementDisabled(cy.wrap($element))
+                        });
+                });
+        } else {
+            utilities.getNthElement(thinkSpherePage.optionsSectionWrapper(), 1)
+                .within(() => {
+                    thinkSpherePage.deleteButton()
+                        .each(($element) => {
+                            utilities.verifyElementDisabled(cy.wrap($element))
+                        });
+                });
+        }
+    },
+
+    /**
+     * Verifies the checkbox button disabled state.
+     * @param {string} list - The list to verify ('strategy' or other).
+     * @param {number} optionCount - The number of options to verify.
+     */
+    verifyCheckboxButtonDisabledState: (list, optionCount) => {
+        if (list === 'strategy') {
+            utilities.getNthElement(utilities.getNthElement(thinkSpherePage.planStrategyCheckbox().find('span'), 0), optionCount)
+                .should('have.attr', 'aria-disabled', 'true');
+        } else {
+            utilities.getNthElement(utilities.getNthElement(thinkSpherePage.planSentenceStarterCheckbox().find('span'), 0), optionCount)
+                .should('have.attr', 'aria-disabled', 'true');
+        }
+    },
+
+    /**
+     * Add the option in the list.
+     * @param {string} list - The list to verify ('strategy' or other).
+     */
+    addOption: (list) => {
+        if (list === 'strategy') {
+            thinkSpherePage.planStrategyAddItemButton()
+                .click();
+        } else {
+            thinkSpherePage.planSentenceStarterAddItemButton()
+                .click()
+                .trigger('mouseout', { force: true });
+        }
+    },
+
+    /**
+     * Selects an option.
+     * @param {string} list - The list to select from ('strategy' or other).
+     * @param {number} optionCount - The number of options to select.
+     */
+    selectOption: (list, optionCount) => {
+        if (list === 'strategy') {
+            utilities.getNthElement(thinkSpherePage.planStrategyCheckbox(), optionCount)
+                .click();
+        } else {
+            utilities.getNthElement(thinkSpherePage.planSentenceStarterCheckbox(), optionCount)
+                .click();
+        }
+    },
+
+    /**
+     * Adds text to an option.
+     * @param {string} list - The list to add text to ('strategy' or other).
+     * @param {number} optionCount - The number of options to add text to.
+     * @param {string} text - The text to add.
+     */
+    addOptionText: (list, optionCount, text) => {
+        if (list === 'strategy') {
+            thinkSpherePage.planStrategySection()
+                .within(() => {
+                    utilities.getNthElement(thinkSpherePage.listInputField(), optionCount)
+                        .clear()
+                        .type(text);
+                });
+        } else {
+            thinkSpherePage.planSentenceStarterSection()
+                .within(() => {
+                    utilities.getNthElement(thinkSpherePage.listInputField(), optionCount)
+                        .clear()
+                        .type(text);
+                });
+        }
+    },
+
+    /**
+     * Verifies the warning popup.
+     * @param {string} heading - The heading of the warning popup.
+     * @param {string} content - The content of the warning popup.
+     */
+    verifyWarningPopup: (heading, content) => {
+        utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+        dialogBoxBase.dialogBoxTitle().within(() => {
+            utilities.verifyInnerText(thinkSpherePage.warningPopupTitle(), heading);
+        });
+        dialogBoxBase.dialogBoxContent().within(() => {
+            utilities.verifyInnerText(thinkSpherePage.warningPopupContentText(), content);
+            utilities.verifyInnerText(thinkSpherePage.warningPopupOkButton(), 'OK');
+        });
+    },
+
+    verifyCustomizeStampsComponent: () => {
+        utilities.verifyElementVisibilityState(thinkSpherePage.customizeStampComponent(), 'visible');
+    },
+
+    /**
+     * Verifies the default stamps.
+     * @param {Array<string>} defaultStamps - The default stamps to verify.
+     */
+    verifyDefaultStamps: (defaultStamps = []) => {
+        thinkSpherePage.customizeStampComponent()
+            .within(() => {
+                thinkSpherePage.customizeStampCard()
+                    .should('have.length', defaultStamps.length);
+                defaultStamps.forEach((ele) => {
+                    utilities.verifyElementVisibilityState(thinkSpherePage.customizeStampCard(ele, 'true'), 'visible');
+                });
+            });
+    },
+
+    /**
+     * Clicks on a customize card.
+     * @param {number} index - The index of the card to click.
+     * @param {string} ariaLabel - The aria-label of the card to click.
+     */
+    clickOnCustomizeCard: (index, ariaLabel) => {
+        if (ariaLabel) {
+            thinkSpherePage.customizeStampCard(ariaLabel)
+                .click();
+
+        } else {
+            utilities.getNthElement(thinkSpherePage.customizeStampCard(), index)
+                .click();
+        }
+    },
+
+    verifySelectAndUnselectStamps: () => {
+        thinkSpherePage.customizeStampComponent()
+            .within(() => {
+                thinkSpherePage.steps.clickOnCustomizeCard(0);
+                utilities.verifyElementVisibilityState(thinkSpherePage.customizeStampCard('Stamp 1', 'false'), 'visible');
+                thinkSpherePage.steps.clickOnCustomizeCard(0);
+                utilities.verifyElementVisibilityState(thinkSpherePage.customizeStampCard('Stamp 1', 'true'), 'visible');
+            });
+    },
+
+    clickOnStampsTool: () => {
+        thinkSpherePage.stampsToolButton()
+            .click();
+    },
+
+    verifyQuestionImageCustomStamp: () => {
+        let imgSrc = '';
+        thinkSpherePage.questionImage()
+            .invoke('attr', 'src') // Get the value of the 'src' attribute
+            .then((src) => {
+                imgSrc = src; // Store the value in the imgSrc variable
+                cy.log(imgSrc); // Optional: Log the value to the Cypress console
+            });
+        utilities.verifyCSS(
+            utilities.getNthElement(thinkSpherePage.customizeStampCard(), 0),
+            {
+                border: `1px solid ${css.color.secondaryBtnDisabled}`,
+            },
+        );
+        utilities.getNthElement(thinkSpherePage.customizeStampCard(), 0)
+            .within(() => {
+                thinkSpherePage.customizeStampCardImg()
+                    .invoke('attr', 'src') // Get the value of the 'src' attribute
+                    .then((src) => {
+                        expect(src).to.equal(imgSrc);
+                    });
+            });
+    },
+    createReviewQuestion: () => {
+        const questionType = 'single selection'
+        const options = ['Animal', 'Vehicle', 'Birds', 'Insects'];
+        thinkSpherePage.steps.clickOnCreateItemButton();
+        thinkSpherePage.steps.selectQuestionType(questionType);
+        singleSelectionPage.steps.addQuestionInstructions();
+        singleSelectionPage.steps.addInputToOptionsInputField(options);
+        singleSelectionPage.steps.allotPoints(20);
+        singleSelectionPage.steps.checkOptionInSpecifyCorrectAnswerSection(1);
+        thinkSpherePage.steps.clickOnSaveButton();
+    },
+
+    clickOnVideoLink: () => {
+        thinkSpherePage.videoLinkComponent()
+            .click();
+    },
+
+    verifyVideoPlaybackTimer: (elapsedTime, totalTime) => {
+        thinkSpherePage.playerTimer()
+            .should('have.text', `${elapsedTime}/${totalTime}`);
+    },
+
+    waitForPlaybackToBegin: () => {
+        thinkSpherePage.playerTimer()
+            .should('contain', '0:01/');
+    },
+
+    expandChooseStarterDropdown: () => {
+        thinkSpherePage.chooseStarterDropdown()
+            .click();
+    },
+
+    verifyOptionAlignmentIsSelected: (direction) => {
+        if(direction === 'topLeft') {
+            thinkSpherePage.whiteBoardCanvas()
+            .should('not.have.css', 'justify-content', 'start');
+        } else {
+            thinkSpherePage.whiteBoardCanvas()
+                .should('have.css', 'justify-content', (direction === 'center' || direction === 'flex-end') ? 'normal' : direction);
+            if (direction === 'center') {
+                thinkSpherePage.whiteBoardCanvas()
+                    .should('have.css', 'align-items', 'normal');
+            }
+        }
+    },
+    
+    clickOnImageRadioButton: () => {
+        thinkSpherePage.imageRadioButton()
+            .click();
+    },
+
+    clickOnEditQuestionIcon: () => {
+        utilities.getNthElement(thinkSpherePage.editQuestionPencil(), 0)
+            .click();
+    },
+
+    clickOnQuestionInstructionExpandImageButton: () => {
+        thinkSpherePage.questionInstructionPreviewImageExpandButton()
+            .click();
+    },
+
+    clickOnCloseExpandImagePopupButton: () => {
+        thinkSpherePage.dialogBoxRoot()
+            .within(() => {
+                thinkSpherePage.closeExpandImagePopupButton()
+                    .click();
+            });
+    },
+
+    clickOnStrategiesPreviewListLI: () => {
+        utilities.getNthElement(thinkSpherePage.strategiesPreviewListLI(), 1)
+            .click();
+    },
+
+    clickOnVideoIcon: () => {
+        utilities.getNthElement(thinkSpherePage.videoIconWrapper(), 0)
+            .click();
+    },
+
+    closeVideoPopup: () => {
+        thinkSpherePage.dialogBoxRoot()
+            .within(() => {
+                thinkSpherePage.buttonClose()
+                    .click();
+            });
+    },
+
+    hoverOnVolumeControlButton: () => {
+        thinkSpherePage.volumeControlButton()
+            .realHover({ position: 'bottom' });
+    },
+
+    verifyPlaybackElapsedTime: (time) => {
+        const playbackTimeElement = thinkSpherePage.playerTimer();
+        playbackTimeElement
+            .invoke('text')
+            .then((text) => {
+                let elapsedTime = text.split('/')[0];
+                let currentElapsedTimerMinutes = Number(elapsedTime.split(':')[0]);
+                let currentElapsedTimerSeconds = Number(elapsedTime.split(':')[1]);
+                let currentTotalElapsedTimerSeconds = currentElapsedTimerMinutes * 60 + currentElapsedTimerSeconds;
+                expect(currentTotalElapsedTimerSeconds).to.eq(time);
+            });
+    },
+
+    getToolbarOptionCount: (number) => {
+        return thinkSpherePage.gridItemsWrapper(number).find('button').its('length');
+    },
+
+    selectTools: (array, number) => {
+        thinkSpherePage.steps.getToolbarOptionCount(number).then((count) => {
+            thinkSpherePage.gridItemsWrapper(number).within(() => {
+                for (let i = 0; i < count; i++) {
+                    thinkSpherePage.dragButton(i)
+                        .invoke('attr', 'aria-label')
+                        .then((attr) => {
+                            if (attr.includes('not-selected')) {
+                                const toolName = attr.split(' ').slice(0, -1).join(' ');
+                                if (array.includes(toolName)) {
+                                    thinkSpherePage.dragButton(i)
+                                        .click();
+                                }
+                            } else {
+                                const toolName = attr.split(' ').slice(0, -1).join(' ');
+                                if (!array.includes(toolName)) {
+                                    thinkSpherePage.dragButton(i)
+                                        .click();
+                                }
+                            }
+                        })
+                }
+            });
+        });
+    },
+
+    verifySelectTools: (array, number) => {
+        thinkSpherePage.steps.getToolbarOptionCount(number).then((count) => {
+            thinkSpherePage.gridItemsWrapper(number).within(() => {
+                for (let i = 0; i < count; i++) {
+                    thinkSpherePage.dragButton(i)
+                        .invoke('attr', 'aria-label')
+                        .then((attr) => {
+                            const toolName = attr.split(' ').slice(0, -1).join(' ');
+                            if (array.includes(toolName)) {
+                                thinkSpherePage.dragButton(i)
+                                    .invoke('attr', 'aria-label')
+                                    .should('contain', ' selected');
+                            } else {
+                                thinkSpherePage.dragButton(i)
+                                    .invoke('attr', 'aria-label')
+                                    .should('contain', ' not-selected');
+                            }
+                        })
+                }
+            });
+        });
+    },
+
+    verifyUploadedImage: () => {
+        thinkSpherePage.whiteBoardImage()
+            .should('exist')
+            .and('have.attr', 'src')
+            .and('not.be.empty');
+    },
+
+    visitThinksphereBrowseItemsPage: () => {
+        cy.visit('/item-engine/thinksphere/browse-items');
+        cy.interceptGraphql('getItems');
+        cy.wait('@getItems');
+    },
+
+    clickOnCustomizeStamp: (customizeStampPosition) => {
+        thinkSpherePage.customizeStampsButton(customizeStampPosition)
+            .click();
+        cy.wait(1000);
+    },
+
+    verifyCustomizeStampSelectedUnselected: (selected, customizeStampPosition) => {
+        utilities.verifyElementAttribute(thinkSpherePage.customizeStampsButton(customizeStampPosition), 'aria-checked', selected ? 'true' : 'false');
+    },
+
+    saveCustomCategory: () => {
+        thinkSpherePage.buttonSave()
+            .click();
+    },
+
+    cancelCustomCategory: () => {
+        thinkSpherePage.buttonCancel()
+            .click();
+    },
+
+    createCustomCategoryWithMultipleCategoryCharacters: () => {
+        cy.log('Creating a custom category by selecting \'Keypad\' category, partially selecting \'Basic\' and \'Greek\' categories')
+        createCustomCategoryFlyout.steps.openCreateCustomCategoryFlyout();
+        createCustomCategoryFlyout.steps.checkCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['primary'].displayName}`);
+        cy.wait(2000);
+        createCustomCategoryFlyout.steps.verifyPartiallyCheckedStateOfCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['matrices'].displayName}`);
+        createCustomCategoryFlyout.steps.expandCategoryAccordion(`Greek Symbols`);
+        createCustomCategoryFlyout.steps.selectASymbolInCreateCustomCategoryFlyout(`${equationEditorCategoriesAndSymbols['greek'].displayName}`, `${equationEditorCategoriesAndSymbols.greek.symbols.gamma.ariaLabel}`);
+        createCustomCategoryFlyout.steps.selectASymbolInCreateCustomCategoryFlyout(`${equationEditorCategoriesAndSymbols['greek'].displayName}`, `${equationEditorCategoriesAndSymbols.greek.symbols.delta.ariaLabel}`);
+        createCustomCategoryFlyout.steps.addInputToCustomCategoryNameInputField('Custom category with name.');
+        thinkSpherePage.steps.saveCustomCategory();
+        utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+    },
+
+    createCustomCategoryWithNameAndIcon: () => {
+        cy.log('Creating a category by selecting \'Arrows\' category')
+        createCustomCategoryFlyout.steps.openCreateCustomCategoryFlyout();
+        createCustomCategoryFlyout.steps.checkCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['geo'].displayName}`);
+        createCustomCategoryFlyout.steps.addInputToCustomCategoryNameInputField('Custom category with name and icon.');
+        createCustomCategoryFlyout.steps.addInputToCategoryIconInputField('#');
+        thinkSpherePage.steps.saveCustomCategory();
+    },
+
+    verifyCategoryCharactersAndUnSelectedState: (arrayOfSymbolsAriaLabel) => {
+        thinkSpherePage.categoryCharacters()
+        .then(($symbols) => {
+            for (let index = 10; index < $symbols.length - 1; index++) {
+                editCategoryFlyout.categoryCharacters()
+                .eq(index)
+                .should('not.have.class', 'Mui-selected')
+                .invoke('attr', 'aria-label')
+                .then((ariaLabel) => {
+                    const tooltipText = ariaLabel.split(' ').slice(0, -1).join(' ');
+                    editCategoryFlyout.categoryCharacters()
+                        .eq(index)
+                        .verifyTooltip(tooltipText);
+                });
+            }
+        });
+    },
+
+    verifyCategoryCharactersAndSelectedState: (arrayOfSymbolsAriaLabel) => {
+        editCategoryFlyout.categoryCharacters()
+            .then(($symbols) => {
+                for (let index = 0; index < arrayOfSymbolsAriaLabel.length - 1; index++) {
+                    editCategoryFlyout.categoryCharacters()
+                    .eq(index)
+                    .should('have.class', 'Mui-selected')
+                    .invoke('attr', 'aria-label')
+                    .then((ariaLabel) => {
+                        const tooltipText = ariaLabel.split(' ').slice(0, -1).join(' ');
+                        editCategoryFlyout.categoryCharacters()
+                            .eq(index)
+                            .verifyTooltip(tooltipText);
+                    });
+                }
+            });
+    },
+
+    expandDropdown: () => {
+        thinkSpherePage.categoriesDropDownParent()
+            .click();
+    },
+
+    verifyDropdownOptions: (dropDownListArray) => {
+        thinkSpherePage.categoriesDropDownMenuItem().should('have.length', dropDownListArray.length).each(($item) => {
+        cy.wrap($item)
+            .invoke('text')
+            .then((text) => {
+                const trimmedText = text.trim();
+                expect(dropDownListArray).to.include(trimmedText);
+            });
+        });
+    },
+
+    clickOnDropDownCategory: (index) => {
+        thinkSpherePage.categoriesDropDownMenuItem().eq(index).click();
+    },
+
+    clickOnQuestionTypesAccordion: () => {
+        thinkSpherePage.filterSectionQuestionTypesAccordion()
+        .click()
+    },
+
+    typeInSearchBar: (input) => {
+        thinkSpherePage.searchBar()
+        .clear()
+        .type(input)
+        .should('have.value', input);
+    },
+
+    searchInSearchBar: (input) => {
+        thinkSpherePage.searchBar()
+        .clear()
+        .type(input)
+        .should('have.value', input)
+        .type('{enter}');
+    },
+
+    clickOnSolvePhaseAccordionIcon: (element) => {
+        thinkSpherePage.solvePhaseAccordionExpandIcon()
+            .click();
+    },
+
+    verifyElementDoesNotHaveExpandedClass: (element) => {
+        element.should('not.have.class', 'Mui-expanded');
+    },
+
+    verifyElementDoesNotHaveCheckedClass: (element) => {
+        element.should('not.have.class', 'Mui-checked');
+    },
+
+    verifyThinkSphereSearchBarPlaceholder: () => {
+        thinkSpherePage.searchBar().should('have.attr', 'placeholder', 'Search by title, tags and content');
+    },
+
+    verifyReviewItemSearchBarPlaceholder: () => {
+        thinkSpherePage.searchBar().should('have.attr', 'placeholder', 'Search by question type');
+    },
+
+    verifyEquationEditorSectionCategoryNotPressed: () => {
+        thinkSpherePage.equationEditorSectionCategories().eq(1).should('have.attr', 'data-aria-pressed', 'false');
+    },
+
+    verifyEquationEditorSectionCategoryIsPressed: () => {
+        thinkSpherePage.equationEditorSectionCategories().eq(10).should('have.attr', 'data-aria-pressed', 'true');
+    },
+
+    verifyTypeCheckBoxStrategy: () => {
+        utilities.getNthElement(thinkSpherePage.planStrategyCheckbox(), 5)
+            .find('input').should('have.attr', 'type', 'checkbox');
+    },
+
+    verifyTypeCheckBoxSentenceStarter: () => {
+        utilities.getNthElement(thinkSpherePage.planSentenceStarterCheckbox(), 5)
+            .find('input').should('have.attr', 'type', 'checkbox');
+    },
+
+    verifyStrategyCheckBoxNotChecked: () => {
+        utilities.getNthElement(thinkSpherePage.planStrategyCheckbox(), 5)
+            .find('input').should('not.have.attr', 'checked');
+    },
+
+    verifySentenceStrategyCheckBoxNotChecked: () => {
+        utilities.getNthElement(thinkSpherePage.planSentenceStarterCheckbox(), 5)
+            .find('input').should('not.have.attr', 'checked');
+    },
+
+    verifyTextIsNotEmpty: (element) => {
+        element.invoke('text')
+        .should('not.be.empty');
+    },
+
+    verifyLength: (element, length) => {
+        element.should('have.length', length);
+    },
+
+    verifyFilterSectionExpanded: () => {
+        thinkSpherePage.filterSectionQuestionTypesAccordion().should('have.class', 'Mui-expanded');
+    },
+
+    verifyFilterSectionCollapsed: () => {
+        thinkSpherePage.filterSectionQuestionTypesAccordion().should('not.have.class', 'Mui-expanded');
+    },
+
+    verifySolvePhaseAccordionExpanded: () => {
+        thinkSpherePage.solvePhaseAccordionExpandIcon().should('have.class', 'Mui-expanded');
+    },
+
+    verifySolvePhaseAccordionCollapsed: () => {
+        thinkSpherePage.solvePhaseAccordionExpandIcon().should('not.have.class', 'Mui-expanded');
+    },
+
+    addQuestionInstructionInnerHTML: (innerHTML) => {
+        thinkSpherePage.thinkSphereQuestionInstructionCKEditor()
+            .invoke('html', innerHTML);
+    },
+
+    verifyQuestionInstructionIncreasedHeightAndScrollBar: () => {
+        thinkSpherePage.thinkSphereQuestionInstructionCKEditor()
+            .invoke('height') // Get the height of the element
+            .should('be.gt', 198);
+
+        thinkSpherePage.thinkSphereQuestionInstructionCKEditor()
+            .should(($el) => {
+                const scrollWidth = $el[0].scrollWidth;
+                const clientWidth = $el[0].clientWidth;
+
+                // Assert that horizontal scroll is present
+                expect(scrollWidth).to.be.greaterThan(clientWidth);
+            });
+    },
+};
+
+const tests = {
+    ...essayResponsePage.tests,
+    ...createQuestionBasePage.tests,
+    ...backgroundImageUploadComponent.tests,
+    ...questionInstructionsComponent.tests,
+    ...commonComponents.tests,
+    ...scoringSectionBaseEditTab.tests,
+    ...additionalSettingsPanel.tests,
+    ...additionalSettingsAccessibilitySectionComponent.tests,
+    ...toolSettingsComponent.tests,
+    ...studentViewSettingsLabelComponent.tests,
+    ...defaultToolDropdown.tests,
+    ...optionsWrapperComponent.tests,
+    ...equationEditorFlyout.tests,
+
+    /**
+     * Verifies the ThinkSphere cancel button functionality.
+     * @param {string} questionType - The type of question.
+     */
+    verifyThinkSphereCancelButton: (questionType) => {
+        it('When user has made no edits and clicks on cancel button, the user should be directed back to the \'Select a Question\' page', () => {
+            createQuestionBasePage.cancelButton()
+                .click();
+        });
+
+        it('When user has made some edits/changes and clicks on cancel button, a popup should be displayed with message \'Are you sure you want to leave this page? Your changes have not been saved.\'', () => {
+            thinkSpherePage.steps.navigateToThinkSphereCreateQuestion();
+            questionInstructionsComponent.steps.addTextInQuestionInstructionsInputField('Edited');
+            if (questionType !== 'feedback scale' && questionType !== 'highlight image' && questionType !== 'think sphere') {
+                scoringSectionBaseEditTab.steps.allotPoints(20);
+            };
+            createQuestionBasePage.cancelButton()
+                .click();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxContentText(), 'Are you sure you want to leave this page? Your changes have not been saved.');
+            utilities.verifyInnerText(dialogBoxBase.buttonAccept(), 'Yes, I want to leave this page');
+            utilities.verifyInnerText(dialogBoxBase.buttonReject(), 'No, I\'d like to go back');
+        });
+
+        it('CSS of popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(dialogBoxBase.dialogBox(), {
+                'background-color': css.color.defaultBackground
+            })
+
+            utilities.verifyCSS(dialogBoxBase.dialogBoxContent(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(dialogBoxBase.buttonAccept(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.primaryBtnBg
+            });
+            utilities.verifyCSS(dialogBoxBase.buttonReject(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessibility of popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dialogBoxBase.dialogBox());
+        });
+
+        it(`Clicking on \'No, I'd like to go back\' button should close the popup and user should remain on the edit interface of the question`, () => {
+            dialogBoxBase.buttonReject()
+                .click();
+            createQuestionBasePage.editTab()
+                .should('have.attr', 'aria-selected', 'true');
+            utilities.verifyTextContent(questionInstructionsComponent.questionInstructionsInputField(), 'Edited');
+        });
+
+        it(`Clicking on \'Yes, I want to leave this page\' button should should discard all changes and direct the user to the \'Select a question\' page.`, () => {
+            createQuestionBasePage.cancelButton()
+                .click();
+            dialogBoxBase.buttonAccept()
+                .click();
+        });
+    },
+
+    /**
+     * Verifies the disabled delete button tooltip.
+     * @param {number} NthElement - The index of the delete button.
+     * @param {string} disableTooltipText - The tooltip text to verify.
+     */
+    verifyDisabledDeleteButtonTooltip: (NthElement, disableTooltipText) => {
+        it('When the user hovers over the disabled delete buttons of the options then \'Minimum one option is required\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the delete button', () => {
+            utilities.getNthElement(thinkSpherePage.deleteButton(), NthElement)
+                .trigger('mouseover', { force: true });
+            utilities.verifyInnerText(thinkSpherePage.tooltipText(), disableTooltipText);
+            utilities.getNthElement(thinkSpherePage.deleteButton(), NthElement)
+                .trigger('mouseout', { force: true });
+            utilities.verifyElementVisibilityState(thinkSpherePage.tooltipText(), 'notExist');
+        });
+
+        it('CSS of disabled delete button tooltip', { tags: 'css' }, () => {
+            utilities.getNthElement(thinkSpherePage.deleteButton(), NthElement)
+                .trigger('mouseover', { force: true });
+            utilities.verifyElementVisibilityState(thinkSpherePage.tooltipText(), 'visible')
+            utilities.verifyCSS(thinkSpherePage.tooltipText(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.getNthElement(thinkSpherePage.deleteButton(), NthElement)
+                .trigger('mouseout', { force: true });
+            utilities.verifyElementVisibilityState(thinkSpherePage.tooltipText(), 'notExist');
+        });
+    },
+    
+    /**
+     * Verifies the add option functionality.
+     * @param {string} list - The list to add the option to ('strategy' or other).
+     * @param {Array<string>} optionList - The list of options.
+     */
+    verifyAddOptionFunctionality: (list, optionList) => {
+        it('When user adds an option using \'Add Option\' button then the added option input field should be displayed and option numeration should increment', () => {
+            let initialOptionCount;
+            if (list === 'strategy') {
+                thinkSpherePage.planStrategySection()
+                    .within(() => {
+                        thinkSpherePage.steps.getOptionCount().then((count) => {
+                            initialOptionCount = count;
+                        });
+                    });
+                    
+                thinkSpherePage.steps.addOption(list);
+                thinkSpherePage.planStrategySection()
+                    .within(() => {
+                        thinkSpherePage.steps.getOptionCount().should('eq', initialOptionCount + 1);
+                        thinkSpherePage.steps.verifyOptionsContents(initialOptionCount, '', 'Enter strategy name');
+                    });  
+                thinkSpherePage.steps.deleteOption(5);
+            } else {
+                thinkSpherePage.planSentenceStarterSection()
+                    .within(() => {
+                        thinkSpherePage.steps.getOptionCount().then((count) => {
+                            initialOptionCount = count;
+                        });
+                    });
+                    
+                thinkSpherePage.steps.addOption(list);
+                thinkSpherePage.planSentenceStarterSection()
+                    .within(() => {
+                        thinkSpherePage.steps.getOptionCount().should('eq', initialOptionCount + 1);
+                        thinkSpherePage.steps.verifyOptionsContents(initialOptionCount, '', 'Enter sentence starter name');
+                    });  
+                thinkSpherePage.steps.deleteOption(10);
+            }
+        });
+    },
+
+    /**
+     * Verifies the contents and styling of the 'Options' section.
+     * @param {Object} params - The parameters for the function.
+     * @param {number} params.optionFieldsCount - The expected number of option input fields.
+     * @param {Array<string>} params.optionList - The list of options.
+     * @param {string} params.placeholder - The placeholder text.
+     * @param {string} params.list - The list to verify ('strategy' or other).
+     */
+    verifyListSectionContents: ({
+        optionFieldsCount,
+        optionList,
+        placeholder,
+        list,
+    }) => {
+        it(`By default ${optionFieldsCount} option input fields with placeholder text, drag handle and delete option icon buttons should be displayed`, () => {
+            for (let index = 0; index < optionFieldsCount; index++) {
+                if (list === 'strategy') {
+                    thinkSpherePage.planStrategySection()
+                        .within(() => {
+                            cy.log(optionList, optionList[index])
+                            thinkSpherePage.steps.verifyOptionsContents(index, optionList[index], placeholder);
+                        })
+                } else {
+                    thinkSpherePage.planSentenceStarterSection()
+                        .within(() => {
+                            cy.log(optionList, optionList[index])
+                            thinkSpherePage.steps.verifyOptionsContents(index, optionList[index], placeholder);
+                        })
+                }
+            };
+        });
+
+        it('\'Add Option\' button should be present', () => {
+            if (list === 'strategy') {
+                utilities.verifyInnerText(thinkSpherePage.planStrategyAddItemButton().find('p'), 'Add strategy');
+                utilities.verifyElementVisibilityState(thinkSpherePage.planStrategyAddItemButton(), 'visible');
+            } else {
+                utilities.verifyInnerText(thinkSpherePage.planSentenceStarterAddItemButton().find('p'), 'Add sentence starter');
+                utilities.verifyElementVisibilityState(thinkSpherePage.planSentenceStarterAddItemButton(), 'visible');
+            }
+        });
+
+        it('CSS of Options section', { tags: 'css' }, () => {
+            const withinComponent = (list === 'strategy') ? thinkSpherePage.planStrategySection() : thinkSpherePage.planSentenceStarterSection();
+
+            withinComponent.within(() => {
+                utilities.verifyCSS(thinkSpherePage.dragHandleButton().find('path'), {
+                    'fill': css.color.secondaryBtnActive
+                });
+                thinkSpherePage.deleteButton()
+                    .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+                utilities.verifyCSS(utilities.getNthElement(thinkSpherePage.listInputField(), 0), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.regular
+                });
+            });
+
+            if (list === 'strategy') {
+                utilities.verifyCSS(thinkSpherePage.planStrategyAddItemButton().find('p'), {
+                    'color': css.color.secondaryBtnActive,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.regular
+                });
+            } else {
+                utilities.verifyCSS(thinkSpherePage.planSentenceStarterAddItemButton().find('p'), {
+                    'color': css.color.secondaryBtnActive,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.regular
+                });
+            }
+        });
+    },
+    
+    /**
+     * Verifies the drag handle tooltip.
+     * @param {number} NthElement - The index of the drag handle.
+     */
+    verifyDragHandleTooltip: (NthElement) => {
+        it('On hovering over the drag handle of the options, \'Drag to reorder\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the drag handle', () => {
+            utilities.triggerMouseover(utilities.getNthElement(thinkSpherePage.dragHandleButton(), NthElement));
+            utilities.verifyInnerText(thinkSpherePage.tooltipText(), 'Drag to reorder');
+            utilities.triggerMouseout(utilities.getNthElement(thinkSpherePage.dragHandleButton(), NthElement));
+            utilities.verifyElementVisibilityState(thinkSpherePage.tooltipText(), 'notExist');
+        });
+
+        it('CSS of drag handle tooltip', { tags: 'css' }, () => {
+            utilities.getNthElement(thinkSpherePage.optionWrapper(), NthElement)
+                .within(() => {
+                    utilities.triggerMouseover(thinkSpherePage.dragHandleButton());
+                });
+            utilities.verifyCSS(thinkSpherePage.tooltipText(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.getNthElement(thinkSpherePage.optionWrapper(), NthElement)
+                .within(() => {
+                    utilities.triggerMouseout(thinkSpherePage.dragHandleButton())
+                });
+            utilities.verifyElementVisibilityState(thinkSpherePage.tooltipText(), 'notExist');
+        });
+
+        it('Accessibility of drag handle tooltip', { tags: 'a11y' }, () => {
+            utilities.getNthElement(thinkSpherePage.optionWrapper(), NthElement)
+                .within(() => {
+                    utilities.triggerMouseover(thinkSpherePage.dragHandleButton());
+                });
+            utilities.verifyElementVisibilityState(thinkSpherePage.tooltipText(), 'visible');
+            utilities.getNthElement(thinkSpherePage.optionWrapper(), NthElement)
+                .within(() => {
+                    utilities.triggerMouseout(thinkSpherePage.dragHandleButton())
+                });
+            utilities.verifyElementVisibilityState(thinkSpherePage.tooltipText(), 'notExist');
+        });
+    },
+
+    /**
+     * Verifies the enabled delete button and tooltip.
+     * @param {string} list - The list to verify ('strategy' or other).
+     * @param {number} NthElement - The index of the delete button.
+     */
+    verifyEnabledDeleteButtonAndTooltip: (list, NthElement) => {
+        it('When the number of options are greater than 1 and both the options are selected then the \'Delete\' icon buttons should get enabled', () => {
+            thinkSpherePage.steps.selectOption(list, 1);
+            thinkSpherePage.deleteButton()
+                .should('be.enabled');
+        });
+
+        it('CSS of enabled \'Delete\' option button', { tags: 'css' }, () => {
+            utilities.verifyCSS(utilities.getNthElement(thinkSpherePage.deleteButton(), NthElement), {
+                'opacity': '1'
+            });
+            utilities.getNthElement(thinkSpherePage.deleteButton(), NthElement)
+                .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon)
+        });
+
+        it('Accessibility of enabled \'Delete\' option button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(thinkSpherePage.deleteButton());
+        });
+
+        it('when the user hovers over the enabled \'Delete\' icon buttons, then \'Delete option\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the \'Delete\' icon button', () => {
+            utilities.getNthElement(thinkSpherePage.deleteButton(), NthElement)
+                .verifyTooltip(list === 'strategy' ? 'Delete strategy' : 'Delete sentence starter');
+        });
+
+        it('CSS of enabled delete button tooltip', { tags: 'css' }, () => {
+            utilities.triggerMouseover(utilities.getNthElement(thinkSpherePage.deleteButton(), NthElement));
+            utilities.verifyElementVisibilityState(thinkSpherePage.tooltipText(), 'visible')
+            utilities.verifyCSS(thinkSpherePage.tooltipText(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.triggerMouseout(utilities.getNthElement(thinkSpherePage.deleteButton(), NthElement));
+            utilities.verifyElementVisibilityState(thinkSpherePage.tooltipText(), 'notExist');
+        });
+    },
+
+    /**
+     * Verifies the options checkbox component.
+     * @param {string} list - The list to verify ('strategy' or other).
+     */
+    verifyOptionsCheckboxComponent: (list) => {
+        it('Option checkbox button should be present', () => {
+            if (list === 'strategy') {
+                utilities.getNthElement(thinkSpherePage.planStrategyCheckbox(), 0)
+                    .find('input')
+                    .should('have.attr', 'type', 'checkbox')
+                    .should('have.attr', 'checked');
+            } else {
+                utilities.getNthElement(thinkSpherePage.planSentenceStarterCheckbox(), 0)
+                    .find('input')
+                    .should('have.attr', 'type', 'checkbox')
+                    .should('have.attr', 'checked');
+            }
+        });
+
+        it('CSS of checked checkbox button', { tags: 'css' }, () => {
+            if (list === 'strategy') {
+                utilities.verifyCSS(
+                    utilities.getNthElement(thinkSpherePage.planStrategyCheckbox().find('svg g g'), 0), {
+                    'fill': css.color.primaryBtnBg,
+                });
+                utilities.verifyCSS(
+                    utilities.getNthElement(thinkSpherePage.planStrategyCheckbox().find('svg'), 0), {
+                    'width': '12px',
+                    'height': '12px',
+                });
+            } else {
+                utilities.verifyCSS(
+                    utilities.getNthElement(thinkSpherePage.planSentenceStarterCheckbox().find('svg g g'), 0), {
+                    'fill': css.color.primaryBtnBg,
+                });
+                utilities.verifyCSS(
+                    utilities.getNthElement(thinkSpherePage.planSentenceStarterCheckbox().find('svg'), 0), {
+                    'width': '12px',
+                    'height': '12px',
+                });
+            }
+        });
+
+        it('When user clicks on the checkbox button then the checkbox should get unchecked', () => {
+            if (list === 'strategy') {
+                thinkSpherePage.steps.selectOption(list, 0);
+                utilities.getNthElement(thinkSpherePage.planStrategyCheckbox(), 0)
+                    .find('input')
+                    .should('not.be.checked');
+                thinkSpherePage.steps.selectOption(list, 0);
+            } else {
+                thinkSpherePage.steps.selectOption(list, 0);
+                utilities.getNthElement(thinkSpherePage.planSentenceStarterCheckbox(), 0)
+                    .find('input')
+                    .should('not.be.checked');
+                thinkSpherePage.steps.selectOption(list, 0);
+            }
+        });
+
+        it('CSS of unchecked checkbox button', { tags: 'css' }, () => {
+            if (list === 'strategy') {
+                thinkSpherePage.steps.selectOption(list, 1);
+                utilities.verifyCSS(
+                    utilities.getNthElement(thinkSpherePage.planStrategyCheckbox().find('svg'), 1), {
+                        'fill': css.color.uncheckedCheckbox,
+                        'width': '12px',
+                        'height': '12px',
+                });
+            } else {
+                thinkSpherePage.steps.selectOption(list, 1);
+                utilities.verifyCSS(
+                    utilities.getNthElement(thinkSpherePage.planSentenceStarterCheckbox().find('svg'), 1), {
+                        'fill': css.color.uncheckedCheckbox,
+                        'width': '12px',
+                        'height': '12px',
+                });
+            }
+        });
+
+        it('Accessibility of checked \'Checkbox\' button', { tags: 'a11y' }, () => {
+            if (list === 'strategy') {
+                cy.checkAccessibility(thinkSpherePage.planStrategyCheckbox());
+            } else {
+                cy.checkAccessibility(thinkSpherePage.planSentenceStarterCheckbox());
+            }
+        });
+    },
+
+    /**
+     * Verifies the CSS of the 'Option' input field.
+     * @param {string} list - The list type ('strategy' or other).
+     */
+    verifyOptionsInput: (list) => {
+        it('CSS of \'Option\' input field', () => {
+            if (list === 'strategy') {
+                utilities.verifyCSS(utilities.getNthElement(thinkSpherePage.listInputField().parent(), 0), {
+                    'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                    'border-radius': '8px',
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.regular,
+                });
+            } else {
+                utilities.verifyCSS(utilities.getNthElement(thinkSpherePage.listInputField().parent(), 5), {
+                    'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                    'border-radius': '8px',
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.regular,
+                });
+            }
+        });
+    },
+
+    /**
+     * Verifies that at least one option is required.
+     * @param {string} list - The list type ('strategy' or other).
+     * @param {Array<string>} listOptions - The list of options.
+     * @param {string} disableTooltipText - The tooltip text to display when the delete button is disabled.
+     */
+    verifyAtleastOneOptionIsRequired: (list, listOptions, disableTooltipText) => {
+        const optionsToBeDeleted = listOptions.filter((el) => el !== listOptions[0]);
+
+        it('When the user deletes the last option, then the \'Delete\' icon button should get disabled', () => {
+            optionsToBeDeleted.forEach(() => { thinkSpherePage.steps.deleteOption(list === 'strategy' ? 1 : 6) });
+            thinkSpherePage.steps.verifyDeleteOptionButtonDisabledState(list);
+            optionsToBeDeleted.forEach(() => { thinkSpherePage.steps.addOption(list) });
+            listOptions.forEach((inputFieldText, optionIndex) => {
+                thinkSpherePage.steps.addOptionText(list, optionIndex, inputFieldText);
+            });
+        });
+        
+        it('When the user hovers over the disabled delete buttons of the options then \'Minimum one option is required\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the delete button', () => {
+            utilities.getNthElement(thinkSpherePage.deleteButton(), list === 'strategy' ? 0 : 5)
+                .trigger('mouseover', { force: true });
+            utilities.verifyInnerText(thinkSpherePage.tooltipText(), disableTooltipText);
+            utilities.getNthElement(thinkSpherePage.deleteButton(), list === 'strategy' ? 0 : 5)
+                .trigger('mouseout', { force: true });
+            utilities.verifyElementVisibilityState(thinkSpherePage.tooltipText(), 'notExist');
+        });
+
+        it('When the user uncheck the last option, then the \'Checkbox\' icon button should get disabled', () => {
+            thinkSpherePage.steps.verifyCheckboxButtonDisabledState(list, 0);
+        });
+    },
+
+    verifyUploadImageSectionContentWithCSSAndA11y: () => {
+        it('\'Upload\' label and \'Choose file\' button should be displayed', () => {
+            utilities.verifyInnerText(backgroundImageUploadComponent.uploadLabel(), 'Upload');
+            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.uploadLabel(), 'visible');
+            utilities.verifyInnerText(backgroundImageUploadComponent.chooseFileButton(), 'Choose file');
+            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.chooseFileButton(), 'visible');
+        });
+
+        it('\'File name\' label should be displayed and by default \'No file chosen\' text should be displayed below the \'File name\' label.', () => {
+            utilities.verifyInnerText(backgroundImageUploadComponent.fileNameLabel(), 'File name');
+            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.fileNameLabel(), 'visible');
+            utilities.verifyInnerText(backgroundImageUploadComponent.noFileChosenLabel(), 'No file chosen');
+            utilities.verifyElementVisibilityState(backgroundImageUploadComponent.noFileChosenLabel(), 'visible');
+        });
+
+        backgroundImageUploadComponent.tests.verifyCSSAndA11yBeforeUpload();
+
+        backgroundImageUploadComponent.tests.verifyImageUploadFunctionality('thinkSphere');
+    },
+
+    verifyQuestionInstructionsInputFieldThinkSpherePreviewTab: () => {
+        it('When user has not entered any text in the Question instructions input field in the \'Edit\' tab then nothing should be displayed in the \'Preview\' tab', () => {
+            createQuestionBasePage.steps.switchToPreviewTab();
+            //Failing due to https://redmine.zeuslearning.com/issues/553382
+            utilities.verifyElementVisibilityState(questionInstructionsComponent.questionInstructionsText(), 'notExist')
+        });
+
+        it('When the user specifies question instructions, then the added question instructions should be displayed in the \'Preview\' tab', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            questionInstructionsComponent.steps.addTextInQuestionInstructionsInputField('Which of the following is the major contributor to increased carbon dioxide levels because of urbanization? Select your answer from the options below.');
+            // UNCOMMENT BELOW CODE WHEN PREVIEW TAB IS AVAILABLE FOR THINKSPHERE
+            // createQuestionBasePage.steps.switchToPreviewTab();
+            // utilities.verifyTextContent(questionInstructionsComponent.questionInstructionsTextPreviewTab(), 'Which of the following is the major contributor to increased carbon dioxide levels because of urbanization? Select your answer from the options below.');
+        });
+    },
+
+    verifyResetToDefaultFunctionality: (optionList, listType) => {
+        if (listType === 'strategy') {
+            it('When user clicks on \'Reset to default\' button then the strategy list should be reset to default', () => {
+                thinkSpherePage.planStrategyListResetToDefault()
+                    .click();
+                optionList.forEach((option, index) => {
+                    thinkSpherePage.steps.verifyOptionsContents(index, option, 'Enter strategy name');
+                });
+            });
+        } else {
+            it('When user clicks on \'Reset to default\' button then the sentence starter list should be reset to default', () => {
+                thinkSpherePage.planSentenceStarterListResetToDefault()
+                    .click();
+                thinkSpherePage.planSentenceStarterSection()
+                .within(() => {
+                    optionList.forEach((option, index) => {
+                        thinkSpherePage.steps.verifyOptionsContents(index, option, 'Enter sentence starter name');
+                    });
+                })
+            });
+        }
+    },
+
+    verifyVideoLinkComponent: () => {
+        it('Video link component should be displayed', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.videoLinkComponent(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.videoLinkComponent(), 'Upload video');
+        });
+
+        it('CSS of video link component', { tags: 'css' }, () => {
+            thinkSpherePage.videoLinkComponent()
+                .within(() => {
+                    utilities.verifyCSS(thinkSpherePage.uploadVideoLinkButton(), {
+                        'color': css.color.linkText,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular,
+                        'font-family': '"Nunito Sans"',
+                        'text-decoration-line': 'underline',
+                    });
+
+                    cy.log('CSS of video link component on hover state');
+                    utilities.hoverOverElement(thinkSpherePage.uploadVideoLinkButton());
+                    utilities.verifyCSS(thinkSpherePage.uploadVideoLinkButton(), {
+                        'text-decoration-line': 'none',
+                    });
+                });
+        });
+
+        it('When user upload a file whose extension is not supported then an error message should be displayed', () => {
+            thinkSpherePage.videoLinkComponent()
+                .within(() => {
+                    thinkSpherePage.uploadVideoLinkButton()
+                        .click();
+                });
+            thinkSpherePage.steps.uploadVideoFile('uploads/sample.wmv');
+            thinkSpherePage.steps.verifyWarningPopup('File upload error', 'The file type is not supported. Please upload files with the following supported formats: mp4, webm.');
+        });
+
+        it('CSS of warning popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(dialogBoxBase.dialogBox(), {
+                'border': `1px solid ${css.color.secondaryBtnBorder}`,
+                'border-radius': '8px',
+                'background-color': css.color.primaryBtn,
+                'box-shadow': `${css.color.dialogBoxBoxShadow} 0px 0px 10px 0px`,
+            });
+
+            dialogBoxBase.dialogBoxTitle().within(() => {
+                utilities.verifyCSS(thinkSpherePage.warningPopupTitle(), {
+                    'color': css.color.secondaryBtn,
+                    'font-size': css.fontSize.heading,
+                    'font-weight': css.fontWeight.bold
+                });
+            });
+
+            dialogBoxBase.dialogBoxContent().within(() => {
+                utilities.verifyCSS(thinkSpherePage.warningPopupContentText(), {
+                    'color': css.color.sectionHeading,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.regular,
+                    'font-family': 'Inter'
+                });
+
+                utilities.verifyCSS(thinkSpherePage.warningPopupOkButton(), {
+                    'background-color': css.color.primaryBtnBg,
+                    'border': `1px solid ${css.color.primaryBtnBorder}`,
+                    'color': css.color.primaryBtn,
+                    'border-radius': '8px',
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.semibold,
+                    'font-family': '"Nunito Sans"',
+                    'box-shadow': `${css.color.primaryBtnBorder} 0px 5px 0px 0px`
+                });
+            });
+        });
+
+        it('When user click on OK button of warning popup then the popup should be closed', () => {
+            dialogBoxBase.dialogBoxContent().within(() => {
+                thinkSpherePage.warningPopupOkButton()
+                    .click();
+            });
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+        });
+
+        it('When user upload a file whose extension is supported then no error message should be displayed', () => {
+            thinkSpherePage.videoLinkComponent()
+                .within(() => {
+                    thinkSpherePage.uploadVideoLinkButton()
+                        .click();
+                });
+            thinkSpherePage.steps.uploadVideoFile('uploads/sample.webm');
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            thinkSpherePage.videoLinkComponent()
+                .within(() => {
+                    thinkSpherePage.deleteVideoButton()
+                        .click();
+                });
+        });
+
+        it('When user upload a file of size more than 25MB then an error message should be displayed', () => {
+            thinkSpherePage.videoLinkComponent()
+                .within(() => {
+                    thinkSpherePage.uploadVideoLinkButton()
+                        .click();
+                });
+            thinkSpherePage.steps.uploadVideoFile('uploads/sample30MB.mp4');
+            thinkSpherePage.steps.verifyWarningPopup('File upload error', 'The file could not be uploaded. The file is 31 MB exceeding the maximum size of 25 MB.');
+        });
+
+        it('When user click on OK button of warning popup then the popup should be closed', () => {
+            dialogBoxBase.dialogBoxContent().within(() => {
+                thinkSpherePage.warningPopupOkButton()
+                    .click();
+            });
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+        });
+
+        it('When user upload a file of size less than 25MB then no error message should be displayed and video uploaded successfully', () => {
+            thinkSpherePage.videoLinkComponent()
+                .within(() => {
+                    thinkSpherePage.uploadVideoLinkButton()
+                        .click();
+                });
+            thinkSpherePage.steps.uploadVideoFile('uploads/sample2MB.mp4');
+            cy.interceptGraphql('getFileScanStatus');
+            cy.wait(5000);
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+        });
+
+        it('When user upload correct file then uploaded file name, edit video button along with delete video button should present', () => {
+            thinkSpherePage.videoLinkComponent().within(() => {
+                utilities.verifyInnerText(thinkSpherePage.uploadVideoLinkButton(), 'sample2MB.mp4');
+                utilities.verifyElementVisibilityState(thinkSpherePage.editVideoButton(), 'visible');
+                utilities.verifyElementVisibilityState(thinkSpherePage.deleteVideoButton(), 'visible');
+            });
+        });
+        
+        it('CSS of edit video button and delete video button', { tags: 'css' }, () => {
+            thinkSpherePage.videoLinkComponent().within(() => {
+                utilities.verifyCSS(thinkSpherePage.editVideoButton(), {
+                    'width': '24px',
+                    'height': '24px',
+                    'background-color': css.color.transparent,
+                });
+                utilities.verifyCSS(thinkSpherePage.deleteVideoButton(), {
+                    'width': '24px',
+                    'height': '24px',
+                    'background-color': css.color.transparent,
+                });
+            });
+        });
+
+        it('When user upload another file size less than 25MB then no error message should be displayed and video uploaded successfully', () => {
+            thinkSpherePage.videoLinkComponent()
+                .within(() => {
+                    thinkSpherePage.editVideoButton()
+                        .click();
+                });
+            thinkSpherePage.steps.uploadVideoFile('uploads/sample2MB_2.mp4');
+            cy.interceptGraphql('getFileScanStatus');
+            cy.wait(5000);
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+        });
+
+        it('When user upload another correct file then uploaded file name, edit video button along with delete video button should present', () => {
+            thinkSpherePage.videoLinkComponent().within(() => {
+                utilities.verifyInnerText(thinkSpherePage.uploadVideoLinkButton(), 'sample2MB_2.mp4');
+                utilities.verifyElementVisibilityState(thinkSpherePage.editVideoButton(), 'visible');
+                utilities.verifyElementVisibilityState(thinkSpherePage.deleteVideoButton(), 'visible');
+            });
+        });
+
+        it('When user click on delete video button then the video should be deleted', () => {
+            thinkSpherePage.videoLinkComponent()
+                .within(() => {
+                    thinkSpherePage.deleteVideoButton()
+                        .click();
+                });
+            utilities.verifyInnerText(thinkSpherePage.videoLinkComponent(), 'Upload video');
+        });
+
+        it('Accessibility of video link component', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(thinkSpherePage.singleOptionTextFieldWrapper());
+        });
+    },
+
+    verifyErrorMessageCSSAndA11y: () => {
+        it('CSS of error message', { tags: 'css' }, () => {
+            utilities.verifyCSS(commonComponents.errorMessage(), {
+                'color': css.color.errorText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of error message', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(thinkSpherePage.nextGenThinkSphereCreateItemWrapper());
+        });
+    },
+
+    verifyQuestionAccordion: () => {
+        it('Author should be able to expand and collapse the question accordion by clicking on the expand icon', () => {
+            thinkSpherePage.filterSectionQuestionAccordion().each(($accordion) => {
+                cy.wrap($accordion).find('.expansion-item-icon-wrapper').click();
+                cy.wrap($accordion).should('have.class', 'Mui-expanded');
+            });
+
+            thinkSpherePage.filterSectionQuestionAccordion().each(($accordion) => {
+                cy.wrap($accordion).find('.expansion-item-icon-wrapper').click();
+                cy.wrap($accordion).should('not.have.class', 'Mui-expanded');
+            });
+        });
+    },
+
+    verifyCreateItemHeaderSection: () => {
+        it('The page displays a unique Reference ID at the top left corner in the format "Ref ID:"', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.referenceIdWrapper(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.referenceIdWrapper().children('div').first(), 'Ref ID:\u00A0');
+            const initialRefId = thinkSpherePage.referenceIdWrapper().children('div').eq(1).invoke('text');
+            initialRefId.then((refId) => {
+                expect(refId).to.be.a('string').and.not.be.empty;
+                cy.reload();
+                thinkSpherePage.referenceIdWrapper().children('div').eq(1).invoke('text').should((newRefId) => {
+                    expect(newRefId).to.be.a('string').and.not.be.empty;
+                    expect(newRefId).to.not.equal(refId);
+                });
+            });
+        });
+
+        it('Edit text box and edit icon pencil should exist, and on clicking the edit input field with placeholder \'Enter title\ should allow the user to add title' , () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.editBoxTextInput(), 'visible');
+            thinkSpherePage.editBoxTextInput().blur();
+            utilities.verifyElementVisibilityState(thinkSpherePage.editIconPencil(), 'visible');
+            thinkSpherePage.editIconPencil().click();
+            thinkSpherePage.editBoxTextInput().should('have.attr', 'placeholder', 'Enter title');
+            thinkSpherePage.editBoxTextInput().type('Test Title');
+            thinkSpherePage.editBoxTextInput().blur();
+            utilities.verifyInnerText(thinkSpherePage.editBoxText(),'Test Title');
+        });
+    },
+
+    verifyDefaultTab: () => {
+        it('By default edit tab should be selected', () => {
+            thinkSpherePage.editTab().should('have.class', 'Mui-selected');
+        });
+    },
+};
+
+export const thinkSpherePage = {
+    ...selectors,
+    steps,
+    tests
+};