itemengine-cypress-automation 1.0.376-resourceAndTools-fbbcf92.0 → 1.0.376

package/cypress/e2e/ILC/ThinkSphere/previewTabSolveSection.js

@@ -0,0 +1,36 @@
+import { thinkSpherePage } from "../../../pages";
+import { browseItemsPage } from "../../../pages/components/browseItemsPage";
+import { commonComponents } from "../../../pages/components/commonComponents";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+import { whiteBoardTools, editSectionWhiteBoardToolButtons } from "../../../fixtures/thinkSphereWhiteboardTools";
+const css = Cypress.env('css');
+
+describe('Preview question : ThinkSphere Question - Solve Section - preview tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+        thinkSpherePage.steps.navigateToThinkSphereCreateQuestion();
+        thinkSpherePage.steps.switchToPreviewTab();
+        thinkSpherePage.steps.clickOnSolveTab();
+    });
+
+    describe('Whiteboard and its sections should be present', () => {
+        abortEarlySetup();
+        thinkSpherePage.tests.verifyWhiteBoardAndSections();
+    });
+
+    describe('Whiteboard tools and sub tools should be present', () => {
+        abortEarlySetup();
+        thinkSpherePage.tests.verifyWhiteboardToolsAndSubTools(whiteBoardTools, editSectionWhiteBoardToolButtons);
+    });
+
+    describe('Whiteboard page navigation', () => {
+        abortEarlySetup();
+        thinkSpherePage.tests.verifyWhiteboardPageNavigation();
+    });
+
+    describe('Verify Whiteboard recording', () => {
+        abortEarlySetup();
+        thinkSpherePage.tests.verifyWhiteboardRecordingAndPlayback(whiteBoardTools);
+    });
+});

package/cypress/fixtures/thinkSphereWhiteboardTools.js

@@ -0,0 +1,66 @@
+export const whiteBoardTools = [
+    {
+        dataTestId: 'add-text', isDefault: true,
+        name: 'text', subToolS: ['SPECIAL_CHARACTERS', 'MATH_CHARACTERS', 'TEXT_SIZE', 'TEXT_COLOR']
+    },
+    { dataTestId: 'draw', isDefault: true, name: 'pen', subToolS: ['STROKE_COLOR'] },
+    { dataTestId: 'highlighter', isDefault: true, name: 'highlighter' },
+    { dataTestId: 'add-image', isDefault: true, name: 'image' },
+    {
+        dataTestId: 'add-shape', isDefault: true, name: 'shapes', subToolS: ['line', 'curvedarrow', 'verticalcurvedarrow',
+            'triangle', 'righttriangle', 'rectangle', 'oval', 'parallelogram', 'trapezoid', 'pentagon', 'hexagon',
+            'octagon', 'FILL_COLOR',
+        ]
+    },
+    {
+        dataTestId: 'stamp', isDefault: true, name: 'stamp', popupSelector: 'stamps', popupContent: ['one-block', 'ten-block',
+            'hundred-block', 'stick-figure', 'one-cent', 'five-cent', 'ten-cent', 'twenty-five-cent',
+            'dollar one-dollar', 'dollar five-dollar', 'dollar ten-dollar', 'red-disc', 'yellow-disc'
+        ]
+    },
+    {
+        dataTestId: 'unifix-cube', isDefault: false, name: 'unifix cube', subToolS: ['vertical-blue-unifix-cube', 'vertical-red-unifix-cube',
+            'vertical-green-unifix-cube', 'vertical-black-unifix-cube'
+        ]
+    },
+    { dataTestId: 'equation', isDefault: false, name: 'equation editor' },
+    {
+        dataTestId: 'diagram', isDefault: false, name: 'diagram', subToolS: ['ten-frame', 'place-value-mat',
+            'part-part-whole', 'l-diagram', 'equality-diagram'
+        ]
+    },
+    { dataTestId: 'array', isDefault: false, name: 'array', popupSelector: 'array-dimensions' },
+    {
+        dataTestId: 'numberline', isDefault: false, name: 'number line', popupSelector: 'number-line-chooser',
+        popupContent: ['number-line-0-10', 'number-line-0-20', 'blank', 'open', 'generator']
+    },
+    {
+        dataTestId: 'fraction-bar', isDefault: false, name: 'fraction bar', subToolS: ['fraction-bar-1', 'fraction-bar-1-2',
+            'fraction-bar-1-4', 'fraction-bar-1-3', 'fraction-bar-1-5', 'fraction-bar-1-6', 'fraction-bar-1-8',
+            'fraction-bar-1-10', 'fraction-bar-1-12', 'fraction-label-switch-div'
+        ]
+    },
+    { dataTestId: 'table', isDefault: false, name: 'table', popupSelector: 'array-dimensions' },
+    {
+        dataTestId: 'algebra-tile', isDefault: false, name: 'algebra tile', subToolS: ['algebra-tile-1', 'algebra-tile--1',
+            'algebra-tile-x2', 'algebra-tile--x2', 'algebra-tile-x', 'algebra-tile--x']
+    },
+    { dataTestId: 'grid', isDefault: false, name: 'grid', subToolS: ['full-grid', 'positive-grid', 'open-grid', 'label-switch-div'] },
+    { dataTestId: 'protractor', isDefault: false, name: 'protractor' },
+    { dataTestId: 'ruler', isDefault: false, name: 'ruler' },
+    { dataTestId: 'simplecalculator', isDefault: false, name: 'simple calculator' },
+    { dataTestId: 'scientificcalculator', isDefault: false, name: 'scientific calculator' },
+    { dataTestId: 'select', isDefault: true, name: 'select' },
+    { dataTestId: 'eraser', isDefault: true, name: 'eraser', popupSelector: 'eraser-width-picker' },
+    { dataTestId: 'item-eraser', isDefault: true, name: 'item eraser' },
+    // { dataTestId: 'delete', isDefault: true, name: 'delete' },
+    { dataTestId: 'undo', isDefault: true, name: 'undo' },
+    { dataTestId: 'redo', isDefault: true, name: 'redo' },
+    { dataTestId: 'clear', isDefault: true, name: 'clear' }
+];
+
+export const editSectionWhiteBoardToolButtons = ['Unifix Cube', 'Diagrams', 'Array',
+    'Number line', 'Fraction bars', 'Protractor', 'Table', 'Grids',
+    'Equation editor', 'Algebra tiles', 'Ruler', 
+    'Simple Calculator', 'Scientific Calculator'
+];

package/cypress/pages/thinkSpherePage.js

@@ -213,6 +213,7 @@ const selectors = {
     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),
@@ -222,6 +223,34 @@ const selectors = {
     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 = {
@@ -317,7 +346,7 @@ const steps = {
     clickOnCancelButton: () => {
         cy.interceptGraphql('setItem');
         thinkSpherePage.cancelButton()
-            .click({ force: true });
+            .click();
     },
 
     clickOnSwapButton: () => {
@@ -1218,12 +1247,15 @@ const steps = {
             });
     },
 
-    verifyProblemAskingMicSection: () => {
+    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);
+                }
             });
     },
 
@@ -1259,13 +1291,16 @@ const steps = {
             });
     },
 
-    verifyWritePlanMicSection: () => {
+    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');
-            });
+        .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) => {
@@ -1319,6 +1354,11 @@ const steps = {
             .click();
     },
 
+    clickOnSolveTab: () => {
+        thinkSpherePage.solveTab()
+            .click();
+    },
+
     clickOnPlanTab: () => {
         thinkSpherePage.planTab()
             .click();
@@ -1343,6 +1383,53 @@ const steps = {
         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);
@@ -1352,6 +1439,197 @@ const steps = {
         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 = {
@@ -2176,6 +2454,258 @@ const tests = {
             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 = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itemengine-cypress-automation",
-  "version": "1.0.376-resourceAndTools-fbbcf92.0",
+  "version": "1.0.376",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -52,4 +52,4 @@
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.47.0"
   }
-}
+}