itemengine-cypress-automation 1.0.381-PR-fixes-1c28a3d.0 → 1.0.381-regressionFixes10June-8dc1710.0

package/cypress/pages/thinkSpherePage.js

@@ -31,7 +31,7 @@ const selectors = {
     ...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"]'),
@@ -80,13 +80,13 @@ const selectors = {
     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),
+    videoLinkComponent: (nthElement = 0) => utilities.getNthElement(cy.get('[class*="ListOptionsComponentstyles__UploadVideoWrapper"]'), nthElement),
     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"]'),
+    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"]'),
@@ -98,7 +98,7 @@ const selectors = {
     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"]'),
+    deleteButton: () => cy.get('button[aria-label*="Delete"].ngie-icon-btn-cls'),
     optionNumeration: () => cy.get('[class*="MuiInputAdornment-positionStart"]'),
     iconPencil: () => cy.get('div[class*="icon-pencil"]'),
     iconXCircle: () => cy.get('div[class*="icon-x-circle"]'),
@@ -110,8 +110,8 @@ const selectors = {
     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}),
+    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"]'),
@@ -150,9 +150,9 @@ const selectors = {
     popupTitle: () => cy.get('[class*="dialog-title-wrapper"]'),
     strategyNameLabel: () => cy.get('[class*="ThinkSpherePreviewstyles__StrategyNameTextWrapper"]'),
     strategyNameInputField: () => cy.get('[class*="new-strategy-name-field"]'),
-    addStrategyPopupCancelButton: () => 
+    addStrategyPopupCancelButton: () =>
         cy.get('.dialog-content').contains('Cancel'),
-    addStrategyPopupSaveButton: () => 
+    addStrategyPopupSaveButton: () =>
         cy.get('.dialog-content').contains('Save'),
     // preview tab plan section selection
     questionInstructionPreviewTexWrapper: () => cy.get('.question-instruction.question-text-wrapper'),
@@ -160,9 +160,9 @@ const selectors = {
     questionInstructionPreviewImageExpandButton: () => cy.get('[class*="ThinkSpherePreviewstyles__ExpandImageIconWrapper"]'),
     questionInstructionImagePopup: () => cy.get('[class*="QuestionTextstyle__ImagePopupDiv"]'),
     closeExpandImagePopupButton: () => cy.get('.close-popup-btn'),
-    PlanningPreviewWrapper : () => cy.get('[class*="PlanningPreviewstyles__PlanningPreviewWrapper"]'),
+    PlanningPreviewWrapper: () => cy.get('[class*="PlanningPreviewstyles__PlanningPreviewWrapper"]'),
     planningPreviewHeading: () => cy.get('[class*="PlanningPreviewstyles__HeadingWrapper"]'),
-    planningWriteWrapper : () => cy.get('[class*="PlanningPreviewstyles__WriteWrapper"]'),
+    planningWriteWrapper: () => cy.get('[class*="PlanningPreviewstyles__WriteWrapper"]'),
     problemAskingWrapper: () => cy.get('[class*="PlanningPreviewstyles__ProblemAskingWrapper"]'),
     contentEditableDiv: () => cy.get('[class*="PlanningPreviewstyles__ContentEditableDiv"]'),
     micIconWrapper: () => cy.get('[class*="PlanningPreviewstyles__MicIconWrapper"]'),
@@ -212,6 +212,45 @@ const selectors = {
     cardWrapper: () => cy.get('.card-wrapper'),
     cardLabel: () => cy.get('.widget-card-label'),
     thinkSphereQuestionInstructionCKEditor: () => cy.get('div.cke_editable[contenteditable="true"]'),
+    reviewTab: () => cy.get('div[aria-label="Review tab"]'),
+    solveTab: () => cy.get('div[aria-label="Solve tab"]'),
+    planTab: () => cy.get('div[aria-label="Plan tab"]'),
+    checkYourMathHeading: () => utilities.getNthElement(cy.get('div[class*="ReviewTabstyles__CheckYourMathTextWrapper"]'), 0),
+    problemAskingToMeTextWrapper: () => utilities.getNthElement(cy.get('div[class*="ReviewTabstyles__ProblemAskingToMeTextWrapper"]'), 0),
+    reviewQuestionWrapper: () => utilities.getNthElement(cy.get('div[class*="ReviewTabstyles__QuestionWrapper"]'), 0),
+    reviewComponentWrapper: () => utilities.getNthElement(cy.get('div[class*="ReviewTabstyles__ComponentWrapper"]'), 0),
+    problemStatementWrapper: () => utilities.getNthElement(cy.get('div[class*="ReviewTabstyles__ProblemStatementWrapper"]'), 0),
+    gradingViewRadioButton: () => cy.get('label[aria-label="Grading View"]'),
+    studentViewRadioButton: () => cy.get('label[aria-label="Student View"]'),
+    correctAnswerLabelWrapper: () => cy.get('div[class*="CorrectAnswerLabelWrapper"]'),
+    whiteboardComponent: () => cy.get('.whiteboard'),
+    whiteBoardTools: () => cy.get('.tools'),
+    whiteBoardSubTools: () => cy.get('.subtools'),
+    whiteBoardCanvasContainer: () => cy.get('.canvas-container'),
+    whiteBoardFooter: () => cy.get('.footer-container'),
+    whiteBoardNewPage: () => cy.get('[data-testid=new-page]'),
+    whiteBoardPreviousPage: () => cy.get('[data-testid=previous]'),
+    whiteBoardNextPage: () => cy.get('[data-testid=next]'),
+    whiteBoardRecordOrPauseButton: () => cy.get('[data-testid=record]'),
+    whiteBoardStopButton: () => cy.get('[data-testid=stop]'),
+    whiteBoardPage: () => cy.get('.page'),
+    whiteboardRecordingStatus: () => cy.get('.status-container'),
+    whiteboardRecordingTimeStatus: () => cy.get('.timecode-container'),
+    whiteboardPlayBackStatus: () => cy.get('[class*=ReviewTabstyles__ThinkSphereWhiteboardPlayerContainer]'),
+    whiteboardPlayer: () => cy.get('[class*=ThinkSphereWhiteboardPlayerstyles__ThinkSphereWhiteboardPlayerWrapper]'),
+    whiteboardRecordingInProgressWarning: () => cy.get('[class*=whiteboard-recording-warning-popup]'),
+    whiteboardRecordingInProgressWarningOkButton: () => cy.get('[data-testid=accept-button]'),
+    whiteboardRecordingInProgressWarningHeader: () => cy.get('#alert-dialog-title'),
+    whiteboardRecordingInProgressWarningDescription: () => cy.get('#alert-dialog-description'),
+    whiteboardPlaybackPlayButton: () => cy.get('[data-testid=play]'),
+    whiteboardPlaybackPauseButton: () => cy.get('[data-testid=pause]'),
+    whiteboardPlaybackTime: () => cy.get('[data-testid=time]'),
+    whiteboardPlaybackSpeakerButton: () => cy.get('.speaker-button'),
+    whiteboardVolumeIcon: () => cy.get('.volume-icon'),
+    whiteboardMutedIcon: () => cy.get('.mute-icon'),
+    whiteboardVolumeSlider: () => cy.get('[class*=slider-container]'),
+    submitButton: () => cy.get('button[aria-label="Submit"]'),
+    goToGradingViewButton: () => cy.contains('button', 'GO TO GRADING VIEW'),
 };
 
 const steps = {
@@ -365,20 +404,20 @@ const steps = {
      */
     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);
     },
 
@@ -454,13 +493,13 @@ const steps = {
     },
     expandSolvePhaseAccordion: () => {
         thinkSpherePage.solvePhaseAccordion()
-        .click()
-        .should('have.attr', 'aria-expanded', 'true');
+            .click()
+            .should('have.attr', 'aria-expanded', 'true');
     },
     expandCustomizeToolsAndControls: () => {
         thinkSpherePage.customizeToolsAndControls()
-        .click()
-        .should('have.attr', 'aria-expanded', 'true');
+            .click()
+            .should('have.attr', 'aria-expanded', 'true');
     },
     /**
      * Verifies the tools and controls options.
@@ -477,9 +516,9 @@ const steps = {
      */
     selectOptionFromToolsAndControls: (option) => {
         thinkSpherePage.solveToolsAndControlsOptionsTiles(option)
-        .click();
+            .click();
         thinkSpherePage.solveToolsAndControlsOptionsTiles(option)
-        .should('have.attr', 'data-aria-pressed', 'true');
+            .should('have.attr', 'data-aria-pressed', 'true');
     },
     /**
      * Deselects an option from tools and controls.
@@ -487,9 +526,9 @@ const steps = {
      */
     deselectOptionFromToolsAndControls: (option) => {
         thinkSpherePage.solveToolsAndControlsOptionsTiles(option)
-        .click();
+            .click();
         thinkSpherePage.solveToolsAndControlsOptionsTiles(option)
-        .should('have.attr', 'data-aria-pressed', 'false');
+            .should('have.attr', 'data-aria-pressed', 'false');
     },
     /**
      * Verifies if an option is selected.
@@ -497,7 +536,7 @@ const steps = {
      */
     verifyOptionIsSelected: (option) => {
         thinkSpherePage.solveToolsAndControlsOptionsTiles(option)
-        .should('have.attr', 'data-aria-pressed', 'true');
+            .should('have.attr', 'data-aria-pressed', 'true');
     },
     /**
      * Verifies if an option is not selected.
@@ -505,7 +544,7 @@ const steps = {
      */
     verifyOptionIsNotSelected: (option) => {
         thinkSpherePage.solveToolsAndControlsOptionsTiles(option)
-        .should('have.attr', 'data-aria-pressed', 'false');
+            .should('have.attr', 'data-aria-pressed', 'false');
     },
 
     /**
@@ -538,7 +577,7 @@ const steps = {
         utilities.getNthElement(thinkSpherePage.deleteButton(), index)
             .click();
     },
-    
+
     /**
      * Verifies the delete option button disabled state.
      * @param {string} list - The list to verify ('strategy' or other).
@@ -620,14 +659,14 @@ const steps = {
                 .within(() => {
                     utilities.getNthElement(thinkSpherePage.listInputField(), optionCount)
                         .clear()
-                        .type(text);
+                        .type(text, { delay: 500 });
                 });
         } else {
             thinkSpherePage.planSentenceStarterSection()
                 .within(() => {
                     utilities.getNthElement(thinkSpherePage.listInputField(), optionCount)
                         .clear()
-                        .type(text);
+                        .type(text, { delay: 500 });
                 });
         }
     },
@@ -754,9 +793,9 @@ const steps = {
     },
 
     verifyOptionAlignmentIsSelected: (direction) => {
-        if(direction === 'topLeft') {
+        if (direction === 'topLeft') {
             thinkSpherePage.whiteBoardCanvas()
-            .should('not.have.css', 'justify-content', 'start');
+                .should('not.have.css', 'justify-content', 'start');
         } else {
             thinkSpherePage.whiteBoardCanvas()
                 .should('have.css', 'justify-content', (direction === 'center' || direction === 'flex-end') ? 'normal' : direction);
@@ -766,7 +805,7 @@ const steps = {
             }
         }
     },
-    
+
     clickOnImageRadioButton: () => {
         thinkSpherePage.imageRadioButton()
             .click();
@@ -775,10 +814,11 @@ const steps = {
     clickOnEditQuestionIcon: () => {
         utilities.getNthElement(thinkSpherePage.editQuestionPencil(), 0)
             .click();
+        cy.wait(1000);
     },
 
     clickOnQuestionInstructionExpandImageButton: () => {
-        thinkSpherePage.questionInstructionPreviewImageExpandButton()
+        utilities.getNthElement(thinkSpherePage.questionInstructionPreviewImageExpandButton(), 0)
             .click();
     },
 
@@ -937,20 +977,20 @@ const steps = {
 
     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(' ');
+            .then(($symbols) => {
+                for (let index = 10; index < $symbols.length - 1; index++) {
                     editCategoryFlyout.categoryCharacters()
                         .eq(index)
-                        .verifyTooltip(tooltipText);
-                });
-            }
-        });
+                        .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) => {
@@ -958,15 +998,15 @@ const steps = {
             .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);
-                    });
+                        .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);
+                        });
                 }
             });
     },
@@ -978,12 +1018,12 @@ const steps = {
 
     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);
-            });
+            cy.wrap($item)
+                .invoke('text')
+                .then((text) => {
+                    const trimmedText = text.trim();
+                    expect(dropDownListArray).to.include(trimmedText);
+                });
         });
     },
 
@@ -993,22 +1033,22 @@ const steps = {
 
     clickOnQuestionTypesAccordion: () => {
         thinkSpherePage.filterSectionQuestionTypesAccordion()
-        .click()
+            .click()
     },
 
     typeInSearchBar: (input) => {
         thinkSpherePage.searchBar()
-        .clear()
-        .type(input)
-        .should('have.value', input);
+            .clear()
+            .type(input)
+            .should('have.value', input);
     },
 
     searchInSearchBar: (input) => {
         thinkSpherePage.searchBar()
-        .clear()
-        .type(input)
-        .should('have.value', input)
-        .type('{enter}');
+            .clear()
+            .type(input)
+            .should('have.value', input)
+            .type('{enter}');
     },
 
     clickOnSolvePhaseAccordionIcon: (element) => {
@@ -1062,7 +1102,7 @@ const steps = {
 
     verifyTextIsNotEmpty: (element) => {
         element.invoke('text')
-        .should('not.be.empty');
+            .should('not.be.empty');
     },
 
     verifyLength: (element, length) => {
@@ -1104,6 +1144,492 @@ const steps = {
                 expect(scrollWidth).to.be.greaterThan(clientWidth);
             });
     },
+
+    verifyQuestionImagePopup: () => {
+        thinkSpherePage.dialogBoxRoot()
+            .within(() => {
+                utilities.verifyElementVisibilityState(thinkSpherePage.questionInstructionImagePopup(), 'visible');
+                utilities.verifyElementVisibilityState(thinkSpherePage.closeExpandImagePopupButton(), 'visible');
+            });
+    },
+
+    verifyAddNewStrategyPopupCloseFunctionality: () => {
+        let countBeforeOpeningPopup, countAfterClosingPopup;
+        cy.get(thinkSpherePage.strategiesBoxPreviewTab())
+            .its('length')
+            .then((count) => {
+                countBeforeOpeningPopup = count;
+                cy.log('Count before opening popup:', countBeforeOpeningPopup);
+            });
+        thinkSpherePage.addNewStrategyButton().click();
+        thinkSpherePage.addStrategyPopupCancelButton().click();
+        cy.get(thinkSpherePage.strategiesBoxPreviewTab())
+            .its('length')
+            .then((count) => {
+                countAfterClosingPopup = count;
+                cy.log('Count after closing popup:', countAfterClosingPopup);
+                expect(countAfterClosingPopup).to.equal(countBeforeOpeningPopup);
+            });
+    },
+
+    verifyAddNewStrategyPopupSaveFunctionality: () => {
+        let countBeforeOpeningPopup, countAfterClosingPopup;
+        thinkSpherePage.strategiesBoxPreviewTab()
+            .its('length')
+            .then((count) => {
+                countBeforeOpeningPopup = count;
+                cy.log('Count before opening popup:', countBeforeOpeningPopup);
+            });
+        thinkSpherePage.addNewStrategyButton().click();
+        thinkSpherePage.strategyNameInputField().type('Test Strategy');
+        thinkSpherePage.addStrategyPopupSaveButton().click();
+        thinkSpherePage.strategiesBoxPreviewTab()
+            .its('length')
+            .then((count) => {
+                countAfterClosingPopup = count;
+                cy.log('Count after closing popup:', countAfterClosingPopup);
+                expect(countAfterClosingPopup).to.equal(countBeforeOpeningPopup + 1);
+            });
+    },
+
+    verifyVideoPopupDialogBox: () => {
+        thinkSpherePage.dialogBoxRoot()
+            .within(() => {
+                utilities.verifyElementVisibilityState(thinkSpherePage.dialogBoxTitle(), 'visible');
+                utilities.verifyInnerText(thinkSpherePage.dialogBoxTitle(), 'Create_a_model');
+                utilities.verifyElementVisibilityState(thinkSpherePage.buttonClose(), 'visible');
+            });
+    },
+
+    verifySentenceStartersDropdown: () => {
+        thinkSpherePage.chooseStarterTextIconWrapper()
+            .within(() => {
+                utilities.verifyElementVisibilityState(thinkSpherePage.starterIocn(), 'visible');
+                utilities.verifyInnerText(thinkSpherePage.starterTextWrapper(), 'Starters');
+            });
+        thinkSpherePage.chooseStarterDropdown()
+            .verifyPseudoClassBeforeProperty('content', '""');
+    },
+
+    verifySentenceStartersDropdownOptions: (sentenceStartersTextDefault) => {
+        sentenceStartersTextDefault.forEach((label, index) => {
+            utilities.verifyInnerText(utilities.getNthElement(thinkSpherePage.chooseStartersListOptionLabels(), index), label);
+        });
+    },
+
+    verifySentenceStartersDropdownFunctionality: () => {
+        thinkSpherePage.writePlanWrapper()
+            .within(() => {
+                thinkSpherePage.contentEditableDiv().clear();
+            });
+        thinkSpherePage.steps.expandChooseStarterDropdown();
+        utilities.getNthElement(thinkSpherePage.chooseStartersListOptions(), 1).click();
+        thinkSpherePage.writePlanWrapper()
+            .within(() => {
+                thinkSpherePage.contentEditableDiv().should('have.value', 'First, I will ');
+                thinkSpherePage.contentEditableDiv().clear();
+            });
+    },
+
+    verifyProblemAskingHeading: () => {
+        thinkSpherePage.problemAskingWrapper()
+            .within(() => {
+                utilities.verifyInnerText(thinkSpherePage.subheadingWrapper(), 'The problem is asking me to');
+                utilities.verifyElementVisibilityState(thinkSpherePage.subheadingWrapper(), 'visible');
+            });
+    },
+
+    verifyProblemAskingTextArea: () => {
+        thinkSpherePage.problemAskingWrapper()
+            .within(() => {
+                utilities.verifyElementVisibilityState(thinkSpherePage.contentEditableDiv(), 'visible');
+                utilities.verifyElementAttribute(thinkSpherePage.contentEditableDiv(), 'placeholder', 'Enter your text here');
+            });
+    },
+
+    verifyProblemAskingMicSection: (isGrading=false) => {
+        thinkSpherePage.problemAskingWrapper()
+            .within(() => {
+                utilities.verifyElementVisibilityState(thinkSpherePage.micIconWrapper(), 'visible');
+                utilities.verifyElementAttribute(thinkSpherePage.micIconWrapper(), 'role', 'button');
+                utilities.verifyElementAttribute(thinkSpherePage.micIconWrapper(), 'aria-label', 'Mic button');
+                if(isGrading) {
+                    utilities.verifyElementAttribute(thinkSpherePage.micIconWrapper(), 'tabindex', -1);
+                }
+            });
+    },
+
+    verifyProblemAskingTextAreaFunctionality: (textToEnter) => {
+        thinkSpherePage.problemAskingWrapper()
+            .within(() => {
+                thinkSpherePage.contentEditableDiv().type(textToEnter);
+                thinkSpherePage.contentEditableDiv().should('have.value', textToEnter);
+            });
+    },
+
+    verifyStrategiesToPlanHeading: () => {
+        thinkSpherePage.strategiesToPlanWrapper()
+            .within(() => {
+                utilities.verifyInnerText(thinkSpherePage.subheadingWrapper(), 'Add strategies to plan');
+                utilities.verifyElementVisibilityState(thinkSpherePage.subheadingWrapper(), 'visible');
+            });
+    },
+
+    verifyWritePlanHeading: () => {
+        thinkSpherePage.writePlanWrapper()
+            .within(() => {
+                utilities.verifyInnerText(thinkSpherePage.subheadingWrapper(), 'Write your plan');
+                utilities.verifyElementVisibilityState(thinkSpherePage.subheadingWrapper(), 'visible');
+            });
+    },
+
+    verifyWritePlanTextArea: () => {
+        thinkSpherePage.writePlanWrapper()
+            .within(() => {
+                utilities.verifyElementVisibilityState(thinkSpherePage.contentEditableDiv(), 'visible');
+                utilities.verifyElementAttribute(thinkSpherePage.contentEditableDiv(), 'placeholder', 'Enter your plan here');
+            });
+    },
+
+    verifyWritePlanMicSection: (isGrading=false) => {
+        thinkSpherePage.writePlanWrapper()
+        .within(() => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.micIconWrapper(), 'visible');
+            utilities.verifyElementAttribute(thinkSpherePage.micIconWrapper(), 'role', 'button');
+            utilities.verifyElementAttribute(thinkSpherePage.micIconWrapper(), 'aria-label', 'Mic button');
+            if(isGrading) {
+                utilities.verifyElementAttribute(thinkSpherePage.micIconWrapper(), 'tabindex', -1);
+            }
+        });
+    },
+
+    verifyWritePlanTextAreaFunctionality: (planTextToEnter) => {
+        thinkSpherePage.writePlanWrapper()
+            .within(() => {
+                thinkSpherePage.contentEditableDiv().type(planTextToEnter);
+                thinkSpherePage.contentEditableDiv().should('have.value', planTextToEnter);
+                thinkSpherePage.contentEditableDiv().clear();
+            });
+    },
+
+    verifyStrategyChipClickFunctionality: () => {
+        thinkSpherePage.writePlanWrapper()
+            .within(() => {
+                thinkSpherePage.contentEditableDiv().clear();
+            });
+        thinkSpherePage.strategyChip().click();
+        thinkSpherePage.writePlanWrapper()
+            .within(() => {
+                thinkSpherePage.contentEditableDiv().should('have.value', 'look for a pattern ');
+            });
+    },
+    clickUploadVideoButton: () => {
+        thinkSpherePage.uploadVideoLinkButton()
+            .click();
+    },
+
+    verifyPreAuthoredVideoTitles: (defaultStrategyTexts) => {
+        defaultStrategyTexts.forEach((text, index) => {
+            thinkSpherePage.videoLinkComponent(index)
+                .within(() => {
+                    utilities.verifyInnerText(thinkSpherePage.uploadVideoLinkButton(), text);
+                })
+        });
+    },
+
+    verifyPreAuthoredVideos: (preAuthoredVideos) => {
+        preAuthoredVideos.forEach(({ duration }, optionIndex) => {
+            thinkSpherePage.videoLinkComponent(optionIndex)
+                .within(thinkSpherePage.steps.clickUploadVideoButton);
+            thinkSpherePage.steps.startPlayback();
+            thinkSpherePage.steps.waitForPlaybackToBegin();
+            thinkSpherePage.playerTimer()
+                .should('contain', `/${duration}`);
+            thinkSpherePage.steps.closeVideoPopup();
+        })
+    },
+
+    clickOnReviewTab: () => {
+        thinkSpherePage.reviewTab()
+            .click();
+    },
+
+    clickOnSolveTab: () => {
+        thinkSpherePage.solveTab()
+            .click();
+    },
+
+    clickOnPlanTab: () => {
+        thinkSpherePage.planTab()
+            .click();
+    },
+
+    switchToGradingView: () => {
+        thinkSpherePage.gradingViewRadioButton()
+            .click();
+    },
+
+    switchToStudentView: () => {
+        thinkSpherePage.studentViewRadioButton()
+            .click();
+    },
+
+    verifyCorrectAnswerLabel: () => {
+        utilities.verifyElementVisibilityState(thinkSpherePage.correctAnswerLabelWrapper(), 'visible');
+    },
+
+    addImageAlternativeTextInputFieldText: (alternateTextForImage) => {
+        thinkSpherePage.imageAlternativeTextInputField().type(alternateTextForImage);
+        cy.wait(2000);
+    },
+
+    stepsBeforeGradingView: () => {
+        thinkSpherePage.steps.expandChooseStarterDropdown();
+        utilities.getNthElement(thinkSpherePage.chooseStartersListOptions(), 1).click();
+        thinkSpherePage.problemAskingWrapper().first()
+            .within(() => {
+                thinkSpherePage.contentEditableDiv().type('This is a test text for the problem.');
+            });
+        thinkSpherePage.strategyChip().click();
+        thinkSpherePage.submitButton().click();
+        thinkSpherePage.goToGradingViewButton().click();
+    },
+
+    verifyAddStrategiesButtonDisabled: () => {
+        thinkSpherePage.addNewStrategyButton().should('have.attr', 'tabindex', '-1');
+            thinkSpherePage.addNewStrategyButton().click({ force: true });
+            utilities.verifyElementVisibilityState(thinkSpherePage.popupTitle(), 'notExist');
+    },
+    
+    verifyStrategiesListButtonDisabled: () => {
+        utilities.getNthElement(thinkSpherePage.strategiesPreviewListLI(), 0).should('have.attr', 'tabindex', '-1');
+        utilities.getNthElement(thinkSpherePage.strategiesPreviewListLI(), 0).should('have.attr', 'aria-disabled', 'true');
+    },
+
+    verifySentenceStarterDropDownDisabled: () => {
+        thinkSpherePage.chooseStarterDropdown().should('have.attr', 'aria-disabled', 'true');
+    },
+
+    verifyDisabledProblemTextContainer: (textToEnter) => {
+        thinkSpherePage.problemAskingWrapper()
+            .within(() => {
+                thinkSpherePage.contentEditableDiv().should('have.attr', 'readonly');
+                thinkSpherePage.contentEditableDiv().should('have.value', textToEnter);
+            });
+    },
+
+    verifyDisabledWriteYourPlanTextContainer: (textToEnter) => {
+       thinkSpherePage.writePlanWrapper()
+            .within(() => {
+                thinkSpherePage.contentEditableDiv().should('have.attr', 'readonly');
+                thinkSpherePage.contentEditableDiv().should('have.value', textToEnter);
+            });
+    },
+
+    verifyDisabledStrategyChip: () => {
+        thinkSpherePage.strategyChip().should('have.attr', 'tabindex', -1);
+    },
+
+    verifyQuestionInstructionPreviewTexWrapperVisibility: (instructionText) => {
+        utilities.verifyElementVisibilityState(thinkSpherePage.questionInstructionPreviewTexWrapper(), 'visible');
+        utilities.verifyInnerText(thinkSpherePage.questionInstructionPreviewTexWrapper(), instructionText);
+    },
+
+    verifyQuestionInstructionPreviewImageWrapperVisibility: () => {
+        utilities.verifyElementVisibilityState(thinkSpherePage.questionInstructionPreviewImageWrapper(), 'visible');
+        utilities.verifyElementVisibilityState(thinkSpherePage.questionInstructionPreviewImageExpandButton(), 'visible');
+    },
+
+    verifyWhiteBoardVisibility: () => {
+        utilities.verifyElementVisibilityState(thinkSpherePage.whiteboardComponent(), 'visible');
+    },
+
+    verifyWhiteBoardSectionsVisibility: () => {
+        utilities.verifyElementVisibilityState(thinkSpherePage.whiteBoardTools(), 'visible');
+        utilities.verifyElementVisibilityState(thinkSpherePage.whiteBoardSubTools(), 'visible');
+        utilities.verifyElementVisibilityState(thinkSpherePage.whiteBoardCanvasContainer(), 'visible');
+        utilities.verifyElementVisibilityState(thinkSpherePage.whiteBoardFooter(), 'visible');
+    },
+
+    /**
+     * Verifies that the inner text of the whiteboard's page label matches the expected text.
+     * 
+     * @param {string} text - The exact text expected to be present in the page label element (e.g., "Page1 / 1").
+     */
+
+    verifyInnerTextOfPageLabel: (text) => {
+        thinkSpherePage.whiteBoardPage()
+            .should('have.text', text);
+    },
+
+    clickOnWhiteBoardNewPageButton: () => {
+        thinkSpherePage.whiteBoardNewPage()
+            .click();
+    },
+
+    clickOnPreviousButton: () => {
+        thinkSpherePage.whiteBoardPreviousPage()
+            .click();
+    },
+
+    clickOnNextButton: () => {
+        thinkSpherePage.whiteBoardNextPage()
+            .click();
+    },
+
+    verifyPreviousButtonDisabled: () => {
+        thinkSpherePage.whiteBoardPreviousPage()
+            .should('have.attr', 'disabled');
+    },
+
+    verifyNextButtonDisabled: () => {
+        thinkSpherePage.whiteBoardNextPage()
+            .should('have.attr', 'disabled');
+    },
+
+    /**
+     * Verifies that the inner text of the whiteboard's recording status matches the expected text.
+     * 
+     * @param {string} text - The exact text expected to be present in the recording status element (e.g., "Ready").
+     */
+
+    verifyRecordingStatus: (text) => {
+        thinkSpherePage.whiteboardRecordingStatus()
+            .should('have.text', text);
+    },
+
+    verifyRecordingTimeStatusNotPresent: () => {
+        thinkSpherePage.whiteboardRecordingTimeStatus()
+            .should('have.text', '');
+    },
+
+    verifyRecordingTimeStatusPresent: () => {
+        thinkSpherePage.whiteboardRecordingTimeStatus()
+            .invoke('text')
+            .should('not.be.empty');
+    },
+
+    clickOnRecordingOrPauseButton: () => {
+        thinkSpherePage.whiteBoardRecordOrPauseButton()
+            .click();
+    },
+
+    clickOnStopButton: () => {
+        thinkSpherePage.whiteBoardStopButton()
+            .click();
+    },
+
+    /**
+     * Verifies that the inner text of the whiteboard's playback element matches the expected text.
+     * 
+     * @param {string} text - The exact text expected to be present in the playback element (e.g., "Watch your recordingNo recording available.").
+     */
+
+    verifyPlayBackNotAvailable: (text) => {
+        thinkSpherePage.whiteboardPlayBackStatus().should('have.text', text);
+    },
+
+    verifyWhiteBoardPlayer: () => {
+        utilities.verifyElementVisibilityState(thinkSpherePage.whiteboardPlayer(), 'visible');
+    },
+
+    verifyWhiteBoardRecordingInprogressWarning: () => {
+        utilities.verifyElementVisibilityState(thinkSpherePage.whiteboardRecordingInProgressWarning(), 'visible');
+    },
+
+    verifyWhiteBoardRecordingInprogressWarningNotVisible: () => {
+        utilities.verifyElementVisibilityState(thinkSpherePage.whiteboardRecordingInProgressWarning(), 'not.be.visible');
+    },
+
+    clickOnWhiteBoardRecordingInProgressWarningOkButton: () => {
+        thinkSpherePage.whiteboardRecordingInProgressWarningOkButton()
+            .click();
+    },
+
+    /**
+     * Verifies that the inner text of the whiteboard's warning text header matches the expected text.
+     * 
+     * @param {string} text - The exact text expected to be present in the warning text header element (e.g., "Recording in Progress").
+     */
+
+    verifyWhiteboardWarningHeaderText: (text) => {
+        thinkSpherePage.whiteboardRecordingInProgressWarningHeader()
+            .should('have.text', text);
+    },
+
+    /**
+     * Verifies that the inner text of the whiteboard's whiteboard warning description matches the expected text.
+     * 
+     * @param {string} expected - The exact text expected to be present in the whiteboard warning description element (e.g., "You're currently recording your work. To avoid losing progress, please return and click Stop to save the recording.").
+     */
+
+    verifyWhiteboardWarningDescriptionText: (expected) => {
+        thinkSpherePage.whiteboardRecordingInProgressWarningDescription()
+            .invoke('text')
+            .then((text) => {
+                const cleanText = text.replace(/\s+/g, ' ').trim();
+                expect(cleanText).to.eq(expected);
+            });
+    },
+
+    clickOnWhiteBoardPlaybackPlayButton: () => {
+        thinkSpherePage.whiteboardPlaybackPlayButton()
+            .click();
+    },
+
+    clickOnWhiteBoardPlaybackPauseButton: () => {
+        thinkSpherePage.whiteboardPlaybackPauseButton()
+            .click();
+    },
+
+    verifyWhiteBoardPlayerPauseButtonVisible: () => {
+        thinkSpherePage.whiteboardPlaybackPauseButton()
+        .should('be.visible')
+        cy.wait(1000);
+    },
+
+    verifyWhiteBoardPlayerPlayButtonVisible: () => {
+        thinkSpherePage.whiteboardPlaybackPlayButton()
+            .should('be.visible');
+    },
+
+    /**
+     * Verifies that the inner text of the whiteboard's player time status matches the expected text.
+     * 
+     * @param {string} time - The exact text expected to be present in the player time status element (e.g., "00:00").
+     */
+
+    verifyWhiteBoardPlayerTimeStatus: (time) => {
+        thinkSpherePage.whiteboardPlaybackTime()
+            .invoke('text')
+            .then((text) => {
+                const currentTime = text.split('/')[0].trim(); // get part before "/"
+                expect(currentTime).to.eq(time);
+            });
+    },
+
+    clickOnWhiteBoardPlaybackSpeakerButton: () => {
+        thinkSpherePage.whiteboardPlaybackSpeakerButton()
+            .click();
+    },
+
+    verifyWhiteBoardPlayerVolumeMuted: () => {
+        utilities.verifyElementVisibilityState(thinkSpherePage.whiteboardMutedIcon(), 'visible');
+    },
+
+    verifyWhiteBoardPlayerVolumeUnmuted: () => {
+        utilities.verifyElementVisibilityState(thinkSpherePage.whiteboardVolumeIcon(), 'visible');
+    },
+
+    hoverOverWhiteBoardPlaybackSpeakerButton: () => {
+        thinkSpherePage.whiteboardPlaybackSpeakerButton()
+            .realHover({ position: 'top' });
+    },
+
+    verifyWhiteBoardPlayerVolumeSliderVisible: () => {
+        thinkSpherePage.whiteboardVolumeSlider()
+            .should('be.visible');
+    }
 };
 
 const tests = {
@@ -1218,7 +1744,7 @@ const tests = {
             utilities.verifyElementVisibilityState(thinkSpherePage.tooltipText(), 'notExist');
         });
     },
-    
+
     /**
      * Verifies the add option functionality.
      * @param {string} list - The list to add the option to ('strategy' or other).
@@ -1234,13 +1760,13 @@ const tests = {
                             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()
@@ -1249,13 +1775,13 @@ const tests = {
                             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);
             }
         });
@@ -1334,7 +1860,7 @@ const tests = {
             }
         });
     },
-    
+
     /**
      * Verifies the drag handle tooltip.
      * @param {number} NthElement - The index of the drag handle.
@@ -1484,17 +2010,17 @@ const tests = {
                 thinkSpherePage.steps.selectOption(list, 1);
                 utilities.verifyCSS(
                     utilities.getNthElement(thinkSpherePage.planStrategyCheckbox().find('svg'), 1), {
-                        'fill': css.color.uncheckedCheckbox,
-                        'width': '12px',
-                        'height': '12px',
+                    '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',
+                    'fill': css.color.uncheckedCheckbox,
+                    'width': '12px',
+                    'height': '12px',
                 });
             }
         });
@@ -1549,7 +2075,7 @@ const tests = {
                 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 });
@@ -1614,11 +2140,11 @@ const tests = {
                 thinkSpherePage.planSentenceStarterListResetToDefault()
                     .click();
                 thinkSpherePage.planSentenceStarterSection()
-                .within(() => {
-                    optionList.forEach((option, index) => {
-                        thinkSpherePage.steps.verifyOptionsContents(index, option, 'Enter sentence starter name');
-                    });
-                })
+                    .within(() => {
+                        optionList.forEach((option, index) => {
+                            thinkSpherePage.steps.verifyOptionsContents(index, option, 'Enter sentence starter name');
+                        });
+                    })
             });
         }
     },
@@ -1755,7 +2281,7 @@ const tests = {
                 utilities.verifyElementVisibilityState(thinkSpherePage.deleteVideoButton(), 'visible');
             });
         });
-        
+
         it('CSS of edit video button and delete video button', { tags: 'css' }, () => {
             thinkSpherePage.videoLinkComponent().within(() => {
                 utilities.verifyCSS(thinkSpherePage.editVideoButton(), {
@@ -1848,7 +2374,7 @@ const tests = {
             });
         });
 
-        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' , () => {
+        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');
@@ -1856,7 +2382,7 @@ const tests = {
             thinkSpherePage.editBoxTextInput().should('have.attr', 'placeholder', 'Enter title');
             thinkSpherePage.editBoxTextInput().type('Test Title');
             thinkSpherePage.editBoxTextInput().blur();
-            utilities.verifyInnerText(thinkSpherePage.editBoxText(),'Test Title');
+            utilities.verifyInnerText(thinkSpherePage.editBoxText(), 'Test Title');
         });
     },
 
@@ -1865,6 +2391,321 @@ const tests = {
             thinkSpherePage.editTab().should('have.class', 'Mui-selected');
         });
     },
+
+    /**
+     * Verifies the functionality of editing, selecting, and unselecting strategies and sentence starters.
+     * Ensures that changes are saved successfully and reflected in the preview section.
+     *
+     * @param {Object} sentenceStartersObject - The object containing strategies and sentence starters data.
+     * @param {Array<string>} sentenceStartersObject.editedStrategies - The list of edited strategies to verify.
+     * @param {Array<string>} sentenceStartersObject.editedSentenceStarters - The list of edited sentence starters to verify.
+     * @param {Array<string>} sentenceStartersObject.selectStrategies - The list of strategies to select and verify.
+     * @param {Array<string>} sentenceStartersObject.selectSentenceStarters - The list of sentence starters to select and verify.
+     */
+    verifyStrategiesAndSentenceStartersSection: (sentenceStartersObject) => {
+        const {
+            editedStrategies, editedSentenceStarters, selectStrategies, selectSentenceStarters
+        } = sentenceStartersObject || {};
+        it('When user edits the strategies and sentence starers, then the changes should be saved successfully and edited strategies and sentence starers should get displayed in preview side', () => {
+            thinkSpherePage.steps.switchToEditTab();
+            thinkSpherePage.steps.clickOnEditQuestionIcon();
+            editedStrategies.forEach((strategy, index) => {
+                thinkSpherePage.steps.addOptionText('strategy', index, strategy);
+            });
+            editedSentenceStarters.forEach((sentenceStarter, index) => {
+                thinkSpherePage.steps.addOptionText('sentenceStarter', index, sentenceStarter);
+            });
+            thinkSpherePage.steps.saveAQuestionAndVerifySnackbar();
+            thinkSpherePage.steps.switchToPreviewTab();
+            editedStrategies.forEach((label, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(thinkSpherePage.strategyTextWrapper(), index), label);
+            });
+            thinkSpherePage.steps.expandChooseStarterDropdown();
+            editedSentenceStarters.forEach((label, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(thinkSpherePage.chooseStartersListOptionLabels(), index), label);
+            });
+            utilities.clickOnBody();
+        });
+
+        it('When user select unselect the strategies and sentence starers, then the changes should be saved successfully and selected strategies and sentence starers should get displayed in preview side', () => {
+            thinkSpherePage.steps.switchToEditTab();
+            thinkSpherePage.steps.clickOnEditQuestionIcon();
+            editedStrategies.forEach((strategy, index) => {
+                if (!selectStrategies.includes(strategy)) {
+                    thinkSpherePage.steps.selectOption('strategy', index);
+                }
+            });
+            cy.wait(2000);
+            editedSentenceStarters.forEach((sentenceStarter, index) => {
+                if (!selectSentenceStarters.includes(sentenceStarter)) {
+                    thinkSpherePage.steps.selectOption('sentenceStarter', index);
+                }
+            });
+            cy.wait(2000);
+            thinkSpherePage.steps.saveAQuestionAndVerifySnackbar();
+            thinkSpherePage.steps.switchToPreviewTab();
+            selectStrategies.forEach((label, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(thinkSpherePage.strategyTextWrapper(), index), label);
+            });
+            thinkSpherePage.steps.expandChooseStarterDropdown();
+            selectSentenceStarters.forEach((label, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(thinkSpherePage.chooseStartersListOptionLabels(), index), label);
+            });
+            utilities.clickOnBody();
+        });
+    },
+
+    verifyWhiteBoardAndSections: () => {
+        it('Whiteboard should be present in the solve tab', () => {
+            thinkSpherePage.steps.verifyWhiteBoardVisibility();
+        });
+
+        it('Whiteboard should contain toolbar, subtools, whiteboard canvas and footer sections', () => {
+            thinkSpherePage.steps.verifyWhiteBoardSectionsVisibility();
+        });
+
+        it('CSS of whiteboard sections', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.whiteBoardTools(), {
+                'padding': '5px 8px',
+                'position': 'static',
+                'display': 'flex',
+                'flex-wrap': 'wrap'
+            });
+            utilities.verifyCSS(thinkSpherePage.whiteBoardSubTools(), {
+                'margin': '0px 8px',
+                'padding': '4px 8px',
+                'borderTop': `1px solid ${css.color.secondaryBtnBorder}`,
+                'minHeight': '49px',
+            });
+        });
+
+        it('Accessibility of Whiteboard', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(thinkSpherePage.whiteboardComponent());
+        });
+    },
+
+        /**
+     * Verifies default visibility, selection, and behavior of whiteboard tools and their subtools.
+     * 
+     * @param {Array<Object>} whiteBoardTools - An array of tool objects, where each object contains:
+     * @param {string} whiteBoardTools[].name - Display name of the tool.
+     * @param {string} whiteBoardTools[].dataTestId - The `data-testid` used to locate the tool in the DOM.
+     * @param {boolean} [whiteBoardTools[].isDefault] - Whether the tool is visible by default.
+     * @param {string[]} [whiteBoardTools[].subToolS] - An array of subtool identifiers (data-testid, data-name, or class).
+     * @param {string} [whiteBoardTools[].popupSelector] - A selector used to locate popup elements that appear after tool interaction.
+     * @param {string[]} [whiteBoardTools[].popupContent] - Optional array of class names used to verify the popup’s inner content.
+     * 
+     * @param {string[]} editSectionWhiteBoardToolButtons - A list of tool names that will be enabled during edit phase.
+    */
+
+    verifyWhiteboardToolsAndSubTools: (whiteBoardTools, editSectionWhiteBoardToolButtons) => {
+        const allToolIds = whiteBoardTools.map(tool => tool.dataTestId);
+
+        const defaultToolIds = whiteBoardTools.filter(tool => tool.isDefault).map(tool => tool.dataTestId);
+
+        it(`${defaultToolIds.join(', ')} should be visible in the whiteboard by default`, () => {
+            defaultToolIds.forEach((toolId) => {
+                cy.get(`[data-testid="${toolId}"]`).should('exist').and('be.visible');
+            });
+        });
+
+        it('All tools should be visible in the whiteboard after selected by the author', () => {
+            thinkSpherePage.steps.switchToEditTab();
+            thinkSpherePage.steps.clickOnSolvePhaseAccordionIcon();
+            thinkSpherePage.steps.expandCustomizeToolsAndControls();
+            editSectionWhiteBoardToolButtons.forEach((toolName) => {
+                thinkSpherePage.steps.selectOptionFromToolsAndControls(toolName);
+            })
+            thinkSpherePage.steps.switchToPreviewTab();
+            thinkSpherePage.steps.clickOnSolveTab();
+            allToolIds.forEach((toolId) => {
+                cy.get(`[data-testid="${toolId}"]`).should('exist').and('be.visible');
+            });
+        })
+
+        whiteBoardTools.forEach((tool) => {
+            it(`When user clicks on "${tool.name}" tool it should display its sub tools`, () => {
+              // Click the main tool by data-testid
+              cy.get(`[data-testid="${tool.dataTestId}"]`)
+                .and('be.visible')
+                .first()
+                .click({ force: true }) // force in case some are behind overlays
+                cy.wait(1000); // Wait for any animations or transitions to complete
+        
+              // If the tool has subtools, verify each
+              if (tool.subToolS && tool.subToolS.length > 0) {
+                tool.subToolS.forEach((subTool) => {
+                  // Try data-testid first, fall back to data-name if needed
+                  cy.get(`[data-testid="${subTool}"], [data-name="${subTool}"], [class*="${subTool}"]`)
+                    .should('exist')
+                    .and('be.visible');
+                });
+              }
+
+              if(tool.popupSelector) {
+                // Verify the popup selector if it exists
+                if(tool.popupSelector === 'eraser-width-picker') {
+                    cy.get(`[data-name="ERASER_THICKNESS"]`)
+                    .should('exist')
+                    .and('be.visible')
+                    .first()
+                    .click({ force: true });
+                    cy.get(`[class*="${tool.popupSelector}"]`).should('exist').and('be.visible');
+                } else {
+                    cy.get(`[data-testid="${tool.popupSelector}"]`).should('exist').and('be.visible');
+                }
+                if(tool.popupContent) {
+                    // Verify the content inside the popup
+                    tool.popupContent.forEach((content) => {
+                        cy.get(`[class="${content}"]`).should('exist').and('be.visible');
+                    });
+                }
+              }
+
+              if(tool.name === 'simple calculator' || tool.name ==='scientific calculator') {
+                cy.get(`[data-testid="${tool.dataTestId}"]`)
+                    .and('be.visible')
+                    .first()
+                    .click({ force: true }) // force in case some are behind overlays
+                    cy.wait(1000);
+              }
+            });
+        });
+    },
+
+    verifyWhiteboardPageNavigation: () => {
+        it('By default "Previous" and "Next" page buttons should be disabled', () => {
+            thinkSpherePage.steps.verifyPreviousButtonDisabled();
+            thinkSpherePage.steps.verifyNextButtonDisabled();
+        });
+        it('When user clicks on "New Page" button it should create new page', () => {
+            thinkSpherePage.steps.verifyInnerTextOfPageLabel('Page1 / 1');
+            thinkSpherePage.steps.clickOnWhiteBoardNewPageButton();
+            thinkSpherePage.steps.verifyInnerTextOfPageLabel('Page2 / 2');
+            thinkSpherePage.steps.verifyNextButtonDisabled();
+        });
+        it('When user clicks on "Previous" button then it should navigate to the previous page', () => {
+            thinkSpherePage.steps.clickOnPreviousButton();
+            thinkSpherePage.steps.verifyInnerTextOfPageLabel('Page1 / 2');
+            thinkSpherePage.steps.verifyPreviousButtonDisabled();
+        });
+        it('When user clicks on "Next" button then it should navigate to the next page', () => {
+            thinkSpherePage.steps.clickOnNextButton();
+            thinkSpherePage.steps.verifyInnerTextOfPageLabel('Page2 / 2');
+            thinkSpherePage.steps.verifyNextButtonDisabled();
+        });
+    },
+
+    /**
+     * Verifies the full recording and playback functionality of the whiteboard, including status changes,
+     * UI updates, warnings, and accessibility features.
+     * 
+     * @param {Array<Object>} whiteBoardTools - An array of whiteboard tool objects used to simulate interactions during recording.
+     * @param {string} whiteBoardTools[].dataTestId - The `data-testid` used to identify the tool.
+    */
+
+    verifyWhiteboardRecordingAndPlayback: (whiteBoardTools) => {
+        it('By default the recording status should be "Ready" and there should be no time status of recording', () => {
+            thinkSpherePage.steps.verifyRecordingStatus('Ready');
+            thinkSpherePage.steps.verifyRecordingTimeStatusNotPresent();
+        });
+
+        it('By default "Review" tab should contain "Watch your recording No recording available." before recording', () => {
+            thinkSpherePage.steps.clickOnReviewTab();
+            thinkSpherePage.steps.verifyPlayBackNotAvailable('Watch your recordingNo recording available.');
+            thinkSpherePage.steps.clickOnSolveTab();
+        });
+
+        it('When the user clicks on the recording button, the recording status should be "Recording"', () => {
+            thinkSpherePage.steps.clickOnRecordingOrPauseButton();
+            thinkSpherePage.steps.verifyRecordingStatus('Recording');
+            thinkSpherePage.steps.verifyRecordingTimeStatusPresent();
+        });
+
+        it('When the user clicks on the pause button, the recording status should be "Paused"', () => {
+            thinkSpherePage.steps.clickOnRecordingOrPauseButton();
+            thinkSpherePage.steps.verifyRecordingStatus('Paused');
+        });
+        
+        it('When the user click on Plan, or Review tab while recording, it should show a warning popup to the user', () => {
+            thinkSpherePage.steps.clickOnRecordingOrPauseButton();
+            thinkSpherePage.steps.clickOnReviewTab();
+            thinkSpherePage.steps.verifyWhiteBoardRecordingInprogressWarning();
+            thinkSpherePage.steps.clickOnWhiteBoardRecordingInProgressWarningOkButton();
+            thinkSpherePage.steps.clickOnPlanTab();
+            thinkSpherePage.steps.verifyWhiteboardWarningHeaderText('Recording in Progress');
+            thinkSpherePage.steps.verifyWhiteboardWarningDescriptionText("You're currently recording your work. To avoid losing progress, please return and click Stop to save the recording.");
+        });
+
+        it('CSS of Recording in Progress warning', { tags: 'css' }, () => {
+            utilities.verifyCSS(thinkSpherePage.whiteboardRecordingInProgressWarningHeader(), {
+                'border-bottom': `1px solid ${css.color.secondaryBtnBorder}`,
+                'padding': '20px 0px',
+                'margin': '0px 16px',
+                'text-align': 'left',
+            });
+            utilities.verifyCSS(thinkSpherePage.whiteboardRecordingInProgressWarningDescription(), {
+                'padding': '0px 16px',
+                'font-size': '16px',
+                'color': css.color.sectionHeading,
+                'line-height': '22px',
+                'font-weight': '400',
+            });
+            utilities.verifyCSS(thinkSpherePage.whiteboardRecordingInProgressWarningOkButton(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.primaryBtnBg
+            });
+        });
+        
+        it('Accessibility of whiteboard warning popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(thinkSpherePage.whiteboardRecordingInProgressWarning());
+            thinkSpherePage.steps.clickOnWhiteBoardRecordingInProgressWarningOkButton();
+        });
+
+
+        it('The user should be able to switch to Review tab without warning after stopping the recording and the Review tab should contain the Playback option', () => {
+            cy.get(`[data-testid="${whiteBoardTools[0].dataTestId}"]`)
+                .should('exist')
+                .and('be.visible')
+                .first()
+                .click({ force: true });
+            cy.get('.upper-canvas').click({ force: true });
+            cy.focused().type('Test text for recording');
+            thinkSpherePage.steps.clickOnStopButton();
+            thinkSpherePage.steps.clickOnReviewTab();
+            thinkSpherePage.steps.verifyWhiteBoardRecordingInprogressWarningNotVisible();
+            thinkSpherePage.steps.verifyWhiteBoardPlayer();
+        });
+
+        it('By default the user should see the playback time as 00:00 / total duration', () => {
+            thinkSpherePage.steps.verifyWhiteBoardPlayerTimeStatus('00:00');
+        });
+
+        it('When the user clicks on the Play button, it should play the recording', () => {
+            thinkSpherePage.steps.clickOnWhiteBoardPlaybackPlayButton();
+            thinkSpherePage.steps.verifyWhiteBoardPlayerPauseButtonVisible();
+            thinkSpherePage.steps.verifyWhiteBoardPlayerTimeStatus('00:01');
+        });
+
+        it('When the user clicks on the Pause button, it should pause the recording', () => {
+            thinkSpherePage.steps.clickOnWhiteBoardPlaybackPauseButton();
+            thinkSpherePage.steps.verifyWhiteBoardPlayerPlayButtonVisible();
+        });
+
+        it('When the user hovers over the speaker button, it should display the volume slider', () => {
+            thinkSpherePage.steps.hoverOverWhiteBoardPlaybackSpeakerButton();
+            thinkSpherePage.steps.verifyWhiteBoardPlayerVolumeSliderVisible();
+        });
+
+        it('When the user clicks on the speaker button, it should mute the volume, and when the user clicks on it again, it should unmute the volume', () => {
+            thinkSpherePage.steps.clickOnWhiteBoardPlaybackSpeakerButton();
+            thinkSpherePage.steps.verifyWhiteBoardPlayerVolumeMuted();
+            thinkSpherePage.steps.clickOnWhiteBoardPlaybackSpeakerButton();
+            thinkSpherePage.steps.verifyWhiteBoardPlayerVolumeUnmuted();
+        });
+    }
 };
 
 export const thinkSpherePage = {