itemengine-cypress-automation 1.0.348 → 1.0.350-feature-thinkSphere-01c175a.0

package/cypress/pages/thinkSpherePage.js

@@ -0,0 +1,1307 @@
+import utilities from "../support/helpers/utilities";
+import { browseItemsPage } from "../pages/components/browseItemsPage";
+import { dialogBoxBase } from "../pages/dialogBoxBase";
+import { backgroundImageUploadComponent, createQuestionBasePage, scoringSectionBaseEditTab, commonComponents, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent, toolSettingsComponent, questionInstructionsComponent, studentViewSettingsLabelComponent, defaultToolDropdown, essayResponseCommonComponents, equationEditorSectionCommonComponent, equationEditorFlyout } from "./components"
+import { drawingResponsePage } from "./drawingResponsePage";
+import { optionsWrapperComponent } from "../pages/components/optionsWrapperComponent";
+import { selectQuestionResourceToolPage } from "./selectQuestionResourceToolPage";
+const css = Cypress.env('css');
+
+const selectors = {
+    ...backgroundImageUploadComponent,
+    ...questionInstructionsComponent,
+    ...commonComponents,
+    ...scoringSectionBaseEditTab,
+    ...additionalSettingsPanel,
+    ...drawingResponsePage,
+    ...defaultToolDropdown,
+    ...optionsWrapperComponent,
+    ...essayResponseCommonComponents,
+    ...equationEditorSectionCommonComponent,
+    ...selectQuestionResourceToolPage,
+    ...browseItemsPage,
+    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'),
+    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('[class*="WhiteBoardImagePropertiesstyles__AltTextWrapper"] input'),
+    imageRadioButton: () => cy.get('div[data-value="image"]'),
+    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"]'),
+    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*="Edit video"]'),
+    deleteVideoButton: () => cy.get('[aria-label*="Delete video"]'),
+    listInputField: () => cy.get('.option-component textarea[placeholder]'),
+    deleteButton: () => cy.get('button[aria-label*="Delete item"]'),
+    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}),
+    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) => cy.get(`[class*="CustomizeStampstyles__StampCard"]${ariaLabel ? ('[aria-label="' + ariaLabel + '"]') : ''}`),
+    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'),
+    customizeToolsAndControlsSvg: () => thinkSpherePage.customizeToolsAndControls().find('svg'),
+    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')
+};
+
+const steps = {
+    ...createQuestionBasePage.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,
+
+    /**
+     * 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');
+    },
+
+    clickOnSwapButton: () => {
+        thinkSpherePage.ThinkSphereMathQuestionHeaderSwapIcon()
+            .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);
+    },
+
+    /**
+     * Uploads a video file.
+     * @param {string} file - The file to upload.
+     */
+    uploadVideoFile: (file) => {
+        thinkSpherePage.inputTypeVideoFile()
+            .attachFile(file);
+        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();
+    },
+    
+    navigateToThinkSphereCreateQuestion: () => {
+        thinkSpherePage.steps.navigateToThinkSphereCreateItem();
+        thinkSpherePage.steps.clickOnAddThinkSphereQuestion();
+    },
+
+    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');
+    },
+    navigateToThinkSphereCreateItem: () => {
+        cy.visit('/item-engine/thinksphere/create-item');
+    },
+    clickOnAddThinkSphereQuestion: () => {
+        thinkSpherePage.addThinkSphereQuestionButton()
+            .click();
+    },
+    navigateToThinkSphereCreateQuestion: () => {
+        thinkSpherePage.steps.navigateToThinkSphereCreateItem();
+        thinkSpherePage.steps.clickOnAddThinkSphereQuestion();
+    },
+    /**
+     * 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();
+        }
+    },
+
+    /**
+     * 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} selected`), '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 not selected'), 'visible');
+                thinkSpherePage.steps.clickOnCustomizeCard(0);
+                utilities.verifyElementVisibilityState(thinkSpherePage.customizeStampCard('Stamp 1 selected'), '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.figDefaultComponentBorder}`,
+            },
+        );
+        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: (questionType = 'Drawing Response') => {
+        thinkSpherePage.steps.clickOnCreateItemButton();
+        thinkSpherePage.steps.selectQuestionType(questionType);
+        thinkSpherePage.steps.clickOnSaveButton();
+    },
+    clickOnImageRadioButton: () => {
+        thinkSpherePage.imageRadioButton()
+            .click();
+    }
+};
+
+const tests = {
+    ...createQuestionBasePage.tests,
+    ...backgroundImageUploadComponent.tests,
+    ...questionInstructionsComponent.tests,
+    ...commonComponents.tests,
+    ...scoringSectionBaseEditTab.tests,
+    ...additionalSettingsPanel.tests,
+    ...additionalSettingsAccessibilitySectionComponent.tests,
+    ...toolSettingsComponent.tests,
+    ...studentViewSettingsLabelComponent.tests,
+    ...defaultToolDropdown.tests,
+    ...optionsWrapperComponent.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('Delete item for item 1');
+        });
+
+        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();
+                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/image.png');
+            thinkSpherePage.steps.verifyWarningPopup('File upload error', 'The file type is not supported. Please upload files with the following supported formats: mov, avi, mp4, webm, wmv.');
+        });
+
+        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 of size more than 10MB then an error message should be displayed', () => {
+            thinkSpherePage.videoLinkComponent()
+                .within(() => {
+                    thinkSpherePage.uploadVideoLinkButton()
+                        .click();
+                });
+            thinkSpherePage.steps.uploadVideoFile('uploads/sample20MB.mp4');
+            thinkSpherePage.steps.verifyWarningPopup('File upload error', 'The file could not be uploaded. The file is 37 MB exceeding the maximum size of 10 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 10MB 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 10MB 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());
+        });
+    },
+};
+
+export const thinkSpherePage = {
+    ...selectors,
+    steps,
+    tests
+};