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

package/cypress/pages/thinkSpherePage.js

@@ -1,15 +1,19 @@
 import utilities from "../support/helpers/utilities";
 import { browseItemsPage } from "../pages/components/browseItemsPage";
+import { editCategoryFlyout } from "../pages/components/editCategoryFlyout";
 import { dialogBoxBase } from "../pages/dialogBoxBase";
-import { backgroundImageUploadComponent, createQuestionBasePage, scoringSectionBaseEditTab, commonComponents, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent, toolSettingsComponent, questionInstructionsComponent, studentViewSettingsLabelComponent, defaultToolDropdown, essayResponseCommonComponents, equationEditorSectionCommonComponent, equationEditorFlyout } from "./components"
+import { backgroundImageUploadComponent, createQuestionBasePage, scoringSectionBaseEditTab, commonComponents, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent, toolSettingsComponent, questionInstructionsComponent, studentViewSettingsLabelComponent, defaultToolDropdown, essayResponseCommonComponents, equationEditorSectionCommonComponent, equationEditorFlyout, createCustomCategoryFlyout } from "./components"
 import { drawingResponsePage } from "./drawingResponsePage";
 import { optionsWrapperComponent } from "../pages/components/optionsWrapperComponent";
 import { selectQuestionResourceToolPage } from "./selectQuestionResourceToolPage";
 import { videoResponsePage } from "./videoResponsePage";
 import { singleSelectionPage } from "./singleSelectionPage";
+import { essayResponsePage } from "./essayResponsePage";
+import { equationEditorCategoriesAndSymbols } from "../fixtures/equationEditorCategoriesAndSymbols ";
 const css = Cypress.env('css');
 
 const selectors = {
+    ...essayResponsePage,
     ...backgroundImageUploadComponent,
     ...questionInstructionsComponent,
     ...commonComponents,
@@ -24,6 +28,10 @@ const selectors = {
     ...browseItemsPage,
     ...videoResponsePage,
     ...dialogBoxBase,
+    ...editCategoryFlyout,
+    ...createCustomCategoryFlyout,
+    ...createQuestionBasePage,
+
     editQuestionPencil: () => cy.get('[class*="Widgetstyles__HeaderContainer"] button.icon-pencil'),
     widgetHeaderQuestionTitle: () => cy.get('[class*="Widgetstyles__HeaderContainer"] [class*="Widgetstyles__QuestionTypeText"]'),
     imageUploadSection: () => cy.get('[class*="TabsComponentstyles__ImageUploadComponentWrapper"]'),
@@ -72,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"]'),
@@ -90,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"]'),
@@ -102,7 +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}),
+    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"]'),
@@ -127,7 +136,7 @@ const selectors = {
     imageUploadSectionQuestionImageCrossIcon: () => thinkSpherePage.imageUploadSection().find('div[class*="QuestionImageComponentstyle__CrossIcon"]'),
     imageRadioButtonParentSvg: () => thinkSpherePage.imageRadioButton().parent().find('svg'),
     solvePhaseAccordionSvg: () => thinkSpherePage.solvePhaseAccordion().find('svg'),
-    customizeToolsAndControlsSvg: () => thinkSpherePage.customizeToolsAndControls().find('svg'),
+    customizeToolsAndControlsPath: () => thinkSpherePage.customizeToolsAndControls().find('path'),
     solvePhaseToolsAndControlsOptionsTilesFeatherCheckIcon: () => thinkSpherePage.solveToolsAndControlsOptionsTiles('Text').find('[data-name="Icon feather-check"]'),
     solvePhaseToolsAndControlsOptionsTilesRectangle: () => thinkSpherePage.solveToolsAndControlsOptionsTiles('Text').find('[data-name*="Rectangle"]'),
     solvePhaseToolsAndControlsOptionsTilesDragItemFlexWrapperSvg: () => thinkSpherePage.solveToolsAndControlsOptionsTiles('Text').find('.drag-item-flex-wrapper svg'),
@@ -141,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'),
@@ -151,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"]'),
@@ -181,9 +190,42 @@ const selectors = {
     gridItemsWrapper: (number) => cy.get('[class*="DragAndDropGridstyles__GridItemsWrapper"]').eq(number),
     dragButton: (number) => cy.get('[type="button"]').eq(number),
     customizeStampsButton: (customizeStampPosition) => cy.get(`button[aria-label="Stamp ${customizeStampPosition}"]`),
+    buttonSave: () => cy.get('.action-btn-wrapper button').eq(1),
+    buttonCancel: () => cy.get('.action-btn-wrapper button').eq(0),
+    nextGenThinkSphereCreateItemWrapper: () => cy.get('#nextgen-thinkshpere-create-item'),
+    equationEditorSectionTitle: () => cy.get('.equation-editor-text-title'),
+    referenceIdWrapper: () => cy.get('.edit-item-reference-id-wrapper'),
+    editBoxWrapper: () => cy.get('.edit-box-wrapper'),
+    editBoxText: () => cy.get('.edit-box-text'),
+    editBoxTextInput: () => thinkSpherePage.editBoxWrapper().find('input'),
+    editIconPencil: () => cy.get('.icon-pencil'),
+    thinkSphereQuestionHeader: () => cy.get('.edit-question-header-title'),
+    filterSectionQuestionTypesAccordion: () => cy.get('.filter-section-expansion-panel-summary-root'),
+    filterSectionQuestionAccordion: () => cy.get('.expansion-item-expansion-panel-summary-content'),
+    checkBox: () => cy.get('.MuiCheckbox-root'),
+    browseItemQuestionItem: () => cy.get('.browse-item-question-item'),
+    ErrorMessageContainer: () => cy.get('.ErrorMessageContainer'),
+    categoriesDropDown: () => cy.get('.dropdown-form-control[label="Categories"]'),
+    categoriesDropDownLabelText: () => cy.get('.dropdown-label-text'),
+    categoriesDropDownMenuItem: () => cy.get('.dropdown-menu-item .dropdown-label-text'),
+    categoriesDropDownParent: () => cy.get('.drop-down-parent'),
+    cardWrapper: () => cy.get('.card-wrapper'),
+    cardLabel: () => cy.get('.widget-card-label'),
+    thinkSphereQuestionInstructionCKEditor: () => cy.get('div.cke_editable[contenteditable="true"]'),
+    reviewTab: () => cy.get('div[aria-label="Review 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"]'),
 };
 
 const steps = {
+    ...essayResponsePage.steps,
     ...backgroundImageUploadComponent.steps,
     ...questionInstructionsComponent.steps,
     ...scoringSectionBaseEditTab.steps,
@@ -200,6 +242,7 @@ const steps = {
     ...browseItemsPage.steps,
     ...videoResponsePage.steps,
     ...createQuestionBasePage.steps,
+    ...createCustomCategoryFlyout.steps,
 
     /**
      * Navigates to the ThinkSphere create question page.
@@ -271,12 +314,24 @@ const steps = {
         cy.wait('@setItem');
     },
 
+    clickOnCancelButton: () => {
+        cy.interceptGraphql('setItem');
+        thinkSpherePage.cancelButton()
+            .click({ force: true });
+    },
+
     clickOnSwapButton: () => {
         thinkSpherePage.ThinkSphereMathQuestionHeaderSwapIcon()
             .click();
         cy.wait(2000);
     },
 
+    clickOnEditButton: () => {
+        thinkSpherePage.ThinkSphereMathQuestionHeaderPencilIcon()
+            .click();
+        cy.wait(2000);
+    },
+
     clickOnDeleteButton: () => {
         thinkSpherePage.thinkSphereMathQuestionHeaderDeleteIcon()
             .click();
@@ -320,20 +375,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);
     },
 
@@ -409,13 +464,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.
@@ -432,9 +487,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.
@@ -442,9 +497,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.
@@ -452,7 +507,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.
@@ -460,7 +515,7 @@ const steps = {
      */
     verifyOptionIsNotSelected: (option) => {
         thinkSpherePage.solveToolsAndControlsOptionsTiles(option)
-        .should('have.attr', 'data-aria-pressed', 'false');
+            .should('have.attr', 'data-aria-pressed', 'false');
     },
 
     /**
@@ -493,7 +548,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).
@@ -543,7 +598,8 @@ const steps = {
                 .click();
         } else {
             thinkSpherePage.planSentenceStarterAddItemButton()
-                .click();
+                .click()
+                .trigger('mouseout', { force: true });
         }
     },
 
@@ -574,14 +630,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 });
                 });
         }
     },
@@ -708,9 +764,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);
@@ -720,7 +776,7 @@ const steps = {
             }
         }
     },
-    
+
     clickOnImageRadioButton: () => {
         thinkSpherePage.imageRadioButton()
             .click();
@@ -729,10 +785,11 @@ const steps = {
     clickOnEditQuestionIcon: () => {
         utilities.getNthElement(thinkSpherePage.editQuestionPencil(), 0)
             .click();
+        cy.wait(1000);
     },
 
     clickOnQuestionInstructionExpandImageButton: () => {
-        thinkSpherePage.questionInstructionPreviewImageExpandButton()
+        utilities.getNthElement(thinkSpherePage.questionInstructionPreviewImageExpandButton(), 0)
             .click();
     },
 
@@ -855,9 +912,450 @@ const steps = {
     verifyCustomizeStampSelectedUnselected: (selected, customizeStampPosition) => {
         utilities.verifyElementAttribute(thinkSpherePage.customizeStampsButton(customizeStampPosition), 'aria-checked', selected ? 'true' : 'false');
     },
+
+    saveCustomCategory: () => {
+        thinkSpherePage.buttonSave()
+            .click();
+    },
+
+    cancelCustomCategory: () => {
+        thinkSpherePage.buttonCancel()
+            .click();
+    },
+
+    createCustomCategoryWithMultipleCategoryCharacters: () => {
+        cy.log('Creating a custom category by selecting \'Keypad\' category, partially selecting \'Basic\' and \'Greek\' categories')
+        createCustomCategoryFlyout.steps.openCreateCustomCategoryFlyout();
+        createCustomCategoryFlyout.steps.checkCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['primary'].displayName}`);
+        cy.wait(2000);
+        createCustomCategoryFlyout.steps.verifyPartiallyCheckedStateOfCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['matrices'].displayName}`);
+        createCustomCategoryFlyout.steps.expandCategoryAccordion(`Greek Symbols`);
+        createCustomCategoryFlyout.steps.selectASymbolInCreateCustomCategoryFlyout(`${equationEditorCategoriesAndSymbols['greek'].displayName}`, `${equationEditorCategoriesAndSymbols.greek.symbols.gamma.ariaLabel}`);
+        createCustomCategoryFlyout.steps.selectASymbolInCreateCustomCategoryFlyout(`${equationEditorCategoriesAndSymbols['greek'].displayName}`, `${equationEditorCategoriesAndSymbols.greek.symbols.delta.ariaLabel}`);
+        createCustomCategoryFlyout.steps.addInputToCustomCategoryNameInputField('Custom category with name.');
+        thinkSpherePage.steps.saveCustomCategory();
+        utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+    },
+
+    createCustomCategoryWithNameAndIcon: () => {
+        cy.log('Creating a category by selecting \'Arrows\' category')
+        createCustomCategoryFlyout.steps.openCreateCustomCategoryFlyout();
+        createCustomCategoryFlyout.steps.checkCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['geo'].displayName}`);
+        createCustomCategoryFlyout.steps.addInputToCustomCategoryNameInputField('Custom category with name and icon.');
+        createCustomCategoryFlyout.steps.addInputToCategoryIconInputField('#');
+        thinkSpherePage.steps.saveCustomCategory();
+    },
+
+    verifyCategoryCharactersAndUnSelectedState: (arrayOfSymbolsAriaLabel) => {
+        thinkSpherePage.categoryCharacters()
+            .then(($symbols) => {
+                for (let index = 10; index < $symbols.length - 1; index++) {
+                    editCategoryFlyout.categoryCharacters()
+                        .eq(index)
+                        .should('not.have.class', 'Mui-selected')
+                        .invoke('attr', 'aria-label')
+                        .then((ariaLabel) => {
+                            const tooltipText = ariaLabel.split(' ').slice(0, -1).join(' ');
+                            editCategoryFlyout.categoryCharacters()
+                                .eq(index)
+                                .verifyTooltip(tooltipText);
+                        });
+                }
+            });
+    },
+
+    verifyCategoryCharactersAndSelectedState: (arrayOfSymbolsAriaLabel) => {
+        editCategoryFlyout.categoryCharacters()
+            .then(($symbols) => {
+                for (let index = 0; index < arrayOfSymbolsAriaLabel.length - 1; index++) {
+                    editCategoryFlyout.categoryCharacters()
+                        .eq(index)
+                        .should('have.class', 'Mui-selected')
+                        .invoke('attr', 'aria-label')
+                        .then((ariaLabel) => {
+                            const tooltipText = ariaLabel.split(' ').slice(0, -1).join(' ');
+                            editCategoryFlyout.categoryCharacters()
+                                .eq(index)
+                                .verifyTooltip(tooltipText);
+                        });
+                }
+            });
+    },
+
+    expandDropdown: () => {
+        thinkSpherePage.categoriesDropDownParent()
+            .click();
+    },
+
+    verifyDropdownOptions: (dropDownListArray) => {
+        thinkSpherePage.categoriesDropDownMenuItem().should('have.length', dropDownListArray.length).each(($item) => {
+            cy.wrap($item)
+                .invoke('text')
+                .then((text) => {
+                    const trimmedText = text.trim();
+                    expect(dropDownListArray).to.include(trimmedText);
+                });
+        });
+    },
+
+    clickOnDropDownCategory: (index) => {
+        thinkSpherePage.categoriesDropDownMenuItem().eq(index).click();
+    },
+
+    clickOnQuestionTypesAccordion: () => {
+        thinkSpherePage.filterSectionQuestionTypesAccordion()
+            .click()
+    },
+
+    typeInSearchBar: (input) => {
+        thinkSpherePage.searchBar()
+            .clear()
+            .type(input)
+            .should('have.value', input);
+    },
+
+    searchInSearchBar: (input) => {
+        thinkSpherePage.searchBar()
+            .clear()
+            .type(input)
+            .should('have.value', input)
+            .type('{enter}');
+    },
+
+    clickOnSolvePhaseAccordionIcon: (element) => {
+        thinkSpherePage.solvePhaseAccordionExpandIcon()
+            .click();
+    },
+
+    verifyElementDoesNotHaveExpandedClass: (element) => {
+        element.should('not.have.class', 'Mui-expanded');
+    },
+
+    verifyElementDoesNotHaveCheckedClass: (element) => {
+        element.should('not.have.class', 'Mui-checked');
+    },
+
+    verifyThinkSphereSearchBarPlaceholder: () => {
+        thinkSpherePage.searchBar().should('have.attr', 'placeholder', 'Search by title, tags and content');
+    },
+
+    verifyReviewItemSearchBarPlaceholder: () => {
+        thinkSpherePage.searchBar().should('have.attr', 'placeholder', 'Search by question type');
+    },
+
+    verifyEquationEditorSectionCategoryNotPressed: () => {
+        thinkSpherePage.equationEditorSectionCategories().eq(1).should('have.attr', 'data-aria-pressed', 'false');
+    },
+
+    verifyEquationEditorSectionCategoryIsPressed: () => {
+        thinkSpherePage.equationEditorSectionCategories().eq(10).should('have.attr', 'data-aria-pressed', 'true');
+    },
+
+    verifyTypeCheckBoxStrategy: () => {
+        utilities.getNthElement(thinkSpherePage.planStrategyCheckbox(), 5)
+            .find('input').should('have.attr', 'type', 'checkbox');
+    },
+
+    verifyTypeCheckBoxSentenceStarter: () => {
+        utilities.getNthElement(thinkSpherePage.planSentenceStarterCheckbox(), 5)
+            .find('input').should('have.attr', 'type', 'checkbox');
+    },
+
+    verifyStrategyCheckBoxNotChecked: () => {
+        utilities.getNthElement(thinkSpherePage.planStrategyCheckbox(), 5)
+            .find('input').should('not.have.attr', 'checked');
+    },
+
+    verifySentenceStrategyCheckBoxNotChecked: () => {
+        utilities.getNthElement(thinkSpherePage.planSentenceStarterCheckbox(), 5)
+            .find('input').should('not.have.attr', 'checked');
+    },
+
+    verifyTextIsNotEmpty: (element) => {
+        element.invoke('text')
+            .should('not.be.empty');
+    },
+
+    verifyLength: (element, length) => {
+        element.should('have.length', length);
+    },
+
+    verifyFilterSectionExpanded: () => {
+        thinkSpherePage.filterSectionQuestionTypesAccordion().should('have.class', 'Mui-expanded');
+    },
+
+    verifyFilterSectionCollapsed: () => {
+        thinkSpherePage.filterSectionQuestionTypesAccordion().should('not.have.class', 'Mui-expanded');
+    },
+
+    verifySolvePhaseAccordionExpanded: () => {
+        thinkSpherePage.solvePhaseAccordionExpandIcon().should('have.class', 'Mui-expanded');
+    },
+
+    verifySolvePhaseAccordionCollapsed: () => {
+        thinkSpherePage.solvePhaseAccordionExpandIcon().should('not.have.class', 'Mui-expanded');
+    },
+
+    addQuestionInstructionInnerHTML: (innerHTML) => {
+        thinkSpherePage.thinkSphereQuestionInstructionCKEditor()
+            .invoke('html', innerHTML);
+    },
+
+    verifyQuestionInstructionIncreasedHeightAndScrollBar: () => {
+        thinkSpherePage.thinkSphereQuestionInstructionCKEditor()
+            .invoke('height') // Get the height of the element
+            .should('be.gt', 198);
+
+        thinkSpherePage.thinkSphereQuestionInstructionCKEditor()
+            .should(($el) => {
+                const scrollWidth = $el[0].scrollWidth;
+                const clientWidth = $el[0].clientWidth;
+
+                // Assert that horizontal scroll is present
+                expect(scrollWidth).to.be.greaterThan(clientWidth);
+            });
+    },
+
+    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: () => {
+        thinkSpherePage.problemAskingWrapper()
+            .within(() => {
+                utilities.verifyElementVisibilityState(thinkSpherePage.micIconWrapper(), 'visible');
+                utilities.verifyElementAttribute(thinkSpherePage.micIconWrapper(), 'role', 'button');
+                utilities.verifyElementAttribute(thinkSpherePage.micIconWrapper(), 'aria-label', 'Mic button');
+            });
+    },
+
+    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: () => {
+        thinkSpherePage.writePlanWrapper()
+            .within(() => {
+                utilities.verifyElementVisibilityState(thinkSpherePage.micIconWrapper(), 'visible');
+                utilities.verifyElementAttribute(thinkSpherePage.micIconWrapper(), 'role', 'button');
+                utilities.verifyElementAttribute(thinkSpherePage.micIconWrapper(), 'aria-label', 'Mic button');
+            });
+    },
+
+    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();
+    },
+
+    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);
+    },
+
+    verifyQuestionInstructionPreviewTexWrapperVisibility: (instructionText) => {
+        utilities.verifyElementVisibilityState(thinkSpherePage.questionInstructionPreviewTexWrapper(), 'visible');
+        utilities.verifyInnerText(thinkSpherePage.questionInstructionPreviewTexWrapper(), instructionText);
+    },
+
+    verifyQuestionInstructionPreviewImageWrapperVisibility: () => {
+        utilities.verifyElementVisibilityState(thinkSpherePage.questionInstructionPreviewImageWrapper(), 'visible');
+        utilities.verifyElementVisibilityState(thinkSpherePage.questionInstructionPreviewImageExpandButton(), 'visible');
+    },
 };
 
 const tests = {
+    ...essayResponsePage.tests,
     ...createQuestionBasePage.tests,
     ...backgroundImageUploadComponent.tests,
     ...questionInstructionsComponent.tests,
@@ -869,6 +1367,7 @@ const tests = {
     ...studentViewSettingsLabelComponent.tests,
     ...defaultToolDropdown.tests,
     ...optionsWrapperComponent.tests,
+    ...equationEditorFlyout.tests,
 
     /**
      * Verifies the ThinkSphere cancel button functionality.
@@ -967,7 +1466,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).
@@ -983,13 +1482,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()
@@ -998,13 +1497,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);
             }
         });
@@ -1083,7 +1582,7 @@ const tests = {
             }
         });
     },
-    
+
     /**
      * Verifies the drag handle tooltip.
      * @param {number} NthElement - The index of the drag handle.
@@ -1233,17 +1732,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',
                 });
             }
         });
@@ -1298,7 +1797,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 });
@@ -1362,9 +1861,12 @@ const tests = {
             it('When user clicks on \'Reset to default\' button then the sentence starter list should be reset to default', () => {
                 thinkSpherePage.planSentenceStarterListResetToDefault()
                     .click();
-                optionList.forEach((option, index) => {
-                    thinkSpherePage.steps.verifyOptionsContents(index, option, 'Enter sentence starter name');
-                });
+                thinkSpherePage.planSentenceStarterSection()
+                    .within(() => {
+                        optionList.forEach((option, index) => {
+                            thinkSpherePage.steps.verifyOptionsContents(index, option, 'Enter sentence starter name');
+                        });
+                    })
             });
         }
     },
@@ -1501,7 +2003,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(), {
@@ -1550,6 +2052,130 @@ const tests = {
             cy.checkAccessibility(thinkSpherePage.singleOptionTextFieldWrapper());
         });
     },
+
+    verifyErrorMessageCSSAndA11y: () => {
+        it('CSS of error message', { tags: 'css' }, () => {
+            utilities.verifyCSS(commonComponents.errorMessage(), {
+                'color': css.color.errorText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of error message', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(thinkSpherePage.nextGenThinkSphereCreateItemWrapper());
+        });
+    },
+
+    verifyQuestionAccordion: () => {
+        it('Author should be able to expand and collapse the question accordion by clicking on the expand icon', () => {
+            thinkSpherePage.filterSectionQuestionAccordion().each(($accordion) => {
+                cy.wrap($accordion).find('.expansion-item-icon-wrapper').click();
+                cy.wrap($accordion).should('have.class', 'Mui-expanded');
+            });
+
+            thinkSpherePage.filterSectionQuestionAccordion().each(($accordion) => {
+                cy.wrap($accordion).find('.expansion-item-icon-wrapper').click();
+                cy.wrap($accordion).should('not.have.class', 'Mui-expanded');
+            });
+        });
+    },
+
+    verifyCreateItemHeaderSection: () => {
+        it('The page displays a unique Reference ID at the top left corner in the format "Ref ID:"', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.referenceIdWrapper(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.referenceIdWrapper().children('div').first(), 'Ref ID:\u00A0');
+            const initialRefId = thinkSpherePage.referenceIdWrapper().children('div').eq(1).invoke('text');
+            initialRefId.then((refId) => {
+                expect(refId).to.be.a('string').and.not.be.empty;
+                cy.reload();
+                thinkSpherePage.referenceIdWrapper().children('div').eq(1).invoke('text').should((newRefId) => {
+                    expect(newRefId).to.be.a('string').and.not.be.empty;
+                    expect(newRefId).to.not.equal(refId);
+                });
+            });
+        });
+
+        it('Edit text box and edit icon pencil should exist, and on clicking the edit input field with placeholder \'Enter title\ should allow the user to add title', () => {
+            utilities.verifyElementVisibilityState(thinkSpherePage.editBoxTextInput(), 'visible');
+            thinkSpherePage.editBoxTextInput().blur();
+            utilities.verifyElementVisibilityState(thinkSpherePage.editIconPencil(), 'visible');
+            thinkSpherePage.editIconPencil().click();
+            thinkSpherePage.editBoxTextInput().should('have.attr', 'placeholder', 'Enter title');
+            thinkSpherePage.editBoxTextInput().type('Test Title');
+            thinkSpherePage.editBoxTextInput().blur();
+            utilities.verifyInnerText(thinkSpherePage.editBoxText(), 'Test Title');
+        });
+    },
+
+    verifyDefaultTab: () => {
+        it('By default edit tab should be selected', () => {
+            thinkSpherePage.editTab().should('have.class', 'Mui-selected');
+        });
+    },
+
+    /**
+     * 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();
+        });
+    },
 };
 
 export const thinkSpherePage = {