itemengine-cypress-automation 1.0.12 → 1.0.14

package/cypress/pages/components/gridCommonComponents.js

@@ -533,7 +533,8 @@ const steps = {
                 .eq(columnIndex)
                 .clear()
                 .type(points, { delay: 0 })
-                .should('have.value', points);
+                .should('have.value', points)
+                .blur();
         });
     },
 
@@ -895,7 +896,7 @@ const tests = {
                         .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.regular);
                 });
             gridCommonComponents.addOptionButton()
-                .verifyCSS(css.color.secondaryBtnActive, css.fontSize.normal, css.fontWeight.medium);
+                .verifyCSS(css.color.secondaryBtnActive, css.fontSize.default, css.fontWeight.medium);
         });
     },
 

package/cypress/pages/components/index.js

@@ -35,4 +35,5 @@ export * from './fillInTheGapsDropdownCommonComponent';
 export * from './figOverImageCommonComponent';
 export * from './uploadImageSectionComponent';
 export * from './colorPopupComponent';
-export * from './customizeHighlightPropertiesComponent';
+export * from './customizeHighlightPropertiesComponent';
+export * from './browseItemsPage';

package/cypress/pages/components/listSortingAndOrderingBase.js

@@ -246,7 +246,7 @@ const tests = {
             utilities.verifyCSS(optionsWrapperComponent.addOptionButton(), {
                 'color': css.color.secondaryBtnActive,
                 'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular
+                'font-weight': css.fontWeight.medium
             });
         });
 

package/cypress/pages/components/questionInstructionsComponent.js

@@ -5,7 +5,7 @@ const css = Cypress.env('css');
 const selectors = {
     questionInstructionsLabelEditTab: () => cy.get('.edit-question-instruction-label'),
     questionInstructionsInputField: () => cy.get('[title="Question Instructions"]'),
-    questionInstructionsText: () => cy.get('.edit-question-preview-wrapper .question-instruction.question-text-wrapper'),
+    questionInstructionsText: () => cy.get('.edit-question-preview-wrapper .question-instruction'),
 }
 
 const steps = {
@@ -31,6 +31,11 @@ const steps = {
                 commonComponents.errorMessage()
                     .verifyInnerText('Error: Question instructions are required.');
             });
+    },
+
+    verifyQuestionInstructionsText: () => {
+        questionInstructionsComponent.questionInstructionsText()
+            .should('have.text', 'Which of the following is the major contributor to increased carbon dioxide levels because of urbanization? Select your answer from the options below.');
     }
 }
 
@@ -99,8 +104,7 @@ const tests = {
             questionInstructionsComponent.steps.addQuestionInstructions()
             cy.log('Switching to Preview Tab')
             createQuestionBasePage.steps.switchToPreviewTab();
-            questionInstructionsComponent.questionInstructionsText()
-                .should('have.text', 'Which of the following is the major contributor to increased carbon dioxide levels because of urbanization? Select your answer from the options below.');
+            steps.verifyQuestionInstructionsText();
         });
     }
 };

package/cypress/pages/components/uploadImageSectionComponent.js

@@ -222,6 +222,8 @@ const steps = {
         uploadImageSectionComponent.imagePopupImagePreview()
             .find('img')
             .should('have.attr', 'src', sourceUrl);
+        uploadImageSectionComponent.imagePopupImagePreview()
+            .click();
     },
 
     clickOnEditImageButton: () => {

package/cypress/pages/createItemPage.js

@@ -7,7 +7,12 @@ const selectors = {
     previewTab: () => cy.get('[data-ngie-testid="preview-tab"]'),
     editTab: () => cy.get('[data-ngie-testid="edit-tab"]'),
     settingsButton: () => cy.get('.settingsBtn '),
-    viewAllQuestionsButton: () => cy.get('.view-question-resource-button-wrapper')
+    viewAllQuestionsButton: () => cy.get('.view-question-resource-button-wrapper'),
+    createItemContainer: () => cy.get('.edit-wrapper'),
+    referenceId: () => cy.get('.edit-item-reference-id'),
+    itemTitle: () => cy.get('.ItemLevel-Header'),
+    tagsButton: () => cy.get('.ngie-button').contains('Tags'),
+    tagsInputField: () => cy.get('.tags-chip-container')
 }
 
 const steps = {
@@ -15,10 +20,38 @@ const steps = {
         createItemPage.addQuestionButton()
             .click();
     },
-    
+
     clickOnAddResource: () => {
         createItemPage.addResourceAndToolsButton()
             .click();
+    },
+
+    navigateToCreateItemPage: () => {
+        cy.visit('/item-engine/demo/create-item');
+    },
+
+    verifyCreateItemContainerIsVisible: () => {
+        createItemPage.createItemContainer()
+            .should('be.visible');
+    },
+
+    verifyAddQuestionButtonIsVisible: () => {
+        createItemPage.addQuestionButton()
+            .should('be.visible');
+    },
+
+    clickOnTagsButton: () => {
+        createItemPage.tagsButton()
+            .click();
+    },
+
+    /**
+    * @param {string[]} arrayOfTags of text displayed in tags input field
+    * @description Verify the text in tags input field
+    */
+    verifyTagsInInputField: (arrayOfTags) => {
+        createItemPage.tagsInputField()
+            .should('have.text', arrayOfTags.sort().join(''));
     }
 }
 

package/cypress/pages/dialogBoxBase.js

@@ -3,8 +3,8 @@ import { createQuestionBasePage } from "./components";
 const css = Cypress.env('css');
 
 const selectors = {
-    dialogBox: () => cy.get('[aria-describedby="alert-dialog-description"]'),
-    dialogBoxTitle: () => cy.get('#alert-dialog-title'),
+    dialogBox: () => cy.get('[role="dialog"]'),
+    dialogBoxTitle: () => cy.get('.dialog-title'),
     dialogBoxContent: () => cy.get('div[id="alert-dialog-description"]'),
     buttonReject: () => cy.get('.action-btn-wrapper button').eq(0),
     buttonAccept: () => cy.get('.action-btn-wrapper button').eq(1),

package/cypress/pages/dragAndDropIntoCategoriesAllOrNothingScoring.js

@@ -106,8 +106,8 @@ const tests = {
             dragAndDropIntoCategoriesPage.steps.verifyNumerationOfCategoryCellsInQuestionPreview(cellNumerationArray);
             dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(0);
             dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(1);
-            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(2);
-            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionCrossmarkIcon(3);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionCrossmarkIcon(2);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(3);
             dragAndDropIntoCategoriesPage.steps.verifyIncorrectAttemptBorder();
             dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectCellBorderNotExists();
             dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');
@@ -119,8 +119,8 @@ const tests = {
             autoScoredPreviewBase.steps.checkAnswer();
             dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(0);
             dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(1);
-            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(2);
-            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionCrossmarkIcon(3);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionCrossmarkIcon(2);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionCheckmarkIcon(3);
             dragAndDropIntoCategoriesPage.steps.verifyIncorrectAttemptBorder();
             dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectCellBorderNotExists();
             dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect');

package/cypress/pages/dragAndDropIntoCategoriesCellsScoring.js

@@ -1,6 +1,8 @@
 import { autoScoredPreviewBase, previewScoringAndShowCorrectAnswerComponent } from "./components";
 import { dragAndDropIntoCategoriesPage } from "./dragAndDropIntoCategoriesPage";
 const cellNumerationArray = ['1', '2', '3', '4'];
+const correctTabAnswerArray = [['Bat'], ['Eagle', 'Parrot'], ['Platypus', 'Whale'], ['Ostrich']];
+
 const tests = {
     verifyScoringForEachCell: (scoringSubtype) => {
         it('When the user attempts the question incorrectly then on selecting \'Show correct answer\' checkbox, 0 points should be provided, red cross-mark should be displayed besides incorrect answer responses, incorrect cell border and red cross-mark should be displayed for incorrect cells and the correct answer section should display the incorrect/not attempted options from the correct tab along with category cell numeration', () => {

package/cypress/pages/dragAndDropIntoCategoriesPage.js

@@ -57,7 +57,7 @@ const selectors = {
     setCorrectAnswerSectionCategoryGrid: () => cy.get('[class*="DragAndDropMatrixstyles__TableWrapper"]'),
     previewTabCategoryGrid: () => cy.get('.edit-question-preview-wrapper [class*="DragAndDropMatrixstyles__TableWrapper"]'),
     //Additional settings
-    rowHeadingLabel: () => cy.get('[class*="Classificationstyle__RowResponseWrapper"] .inline-text-property-label').eq(0),
+    rowHeadingLabel: () => cy.get('[class*="RowResponseWrapper"] .text-label '),
     rowHeadingInputField: () => cy.get('input[aria-label="Row heading"]'),
     rowHeadingSetCorrectAnswerSection: () => cy.get('[class*="DragAndDropMatrixstyles__RowTitleCell"]'),
     rowHeadingPreviewTab: () => cy.get('.edit-question-preview-wrapper [class*="DragAndDropMatrixstyles__RowTitleCell"]'),
@@ -786,7 +786,7 @@ const steps = {
             .contains(optionName)
             .click();
         draggableOptionsContainer.setCorrectAnswerDraggableOptionsWrapper('drag and drop into categories')
-            .find('[class*="DragAndDropMatrixstyles__DroppableWrapper"]')
+            .find('[class*="DroppableWrapper"]')
             .click({ force: true });
     },
 
@@ -802,7 +802,7 @@ const steps = {
                     .click();
             });
         draggableOptionsContainer.previewTabDraggableOptionsWrapper('drag and drop into categories')
-            .find('[class*="DragAndDropMatrixstyles__DroppableWrapper"]')
+            .find('[class*="DroppableWrapper"]')
             .click({ force: true });
     },
 
@@ -1066,7 +1066,7 @@ const steps = {
      */
     enterTextInRowTitleWidthInputField: (text) => {
         dragAndDropIntoCategoriesPage.rowTitleWidthInputField()
-            .type(text, { delay: 0 })
+            .type(text)
             .blur();
     },
 
@@ -1092,7 +1092,7 @@ const steps = {
      */
     enterTextInRowMinHeightInputField: (text) => {
         dragAndDropIntoCategoriesPage.rowMinHeightInputField()
-            .type(text, { delay: 0 })
+            .type(text)
             .blur();
     },
 
@@ -1206,7 +1206,8 @@ const steps = {
 
     clearMaxResponsePerCellInputField: () => {
         dragAndDropIntoCategoriesPage.maxResponsePerCellInputField()
-            .clear();
+            .clear()
+            .blur();
     },
 
     /**
@@ -1537,10 +1538,6 @@ const tests = {
         });
     },
 
-    /**
-    * @param {string[]} numerationArray array of the numeration displayed with options numbers| lowercase| uppercase
-    * @description this function checks the numeration displayed for the options and correct answer container options when check answer is selected
-    */
     verifyCategoryCellsNumerationNotDisplayedWhenCheckAnswerIsSelected: () => {
         it('When user clicks on \'Check answer\' button then the numeration should not be displayed in the category cells', () => {
             autoScoredPreviewBase.steps.checkAnswer()

package/cypress/pages/essayResponseBasicPage.js

@@ -13,8 +13,8 @@ const selectors = {
     copyCustomizeFormattingOption: () => cy.get(`[data-ngie-testid="copy-toggle-button"]`),
     pasteCustomizeFormattingOption: () => cy.get(`[data-ngie-testid="paste-toggle-button"]`),
     specialCharacterCustomizeFormattingOption: () => cy.get(`[data-ngie-testid="special-characters-toggle-button"]`),
-    customizeFormattingOptionsLabel: () => cy.get('.customized_button_label'),
-    customizeFormattingOptionsIcon: () => cy.get('.audio_icon_wrapper'),
+    customizeFormattingOptionsLabel: () => cy.get('.ngie-toggle-button-label'),
+    customizeFormattingOptionsIcon: () => cy.get('.ngie-toggle-button-icon svg'),
     customizeFormattingOptionsWrapper: () => cy.get('.customize-essay-formatting-options'),
 };
 

package/cypress/pages/essayResponseMathPage.js

@@ -12,8 +12,9 @@ const selectors = {
     textToNotBeRenderedAsLaTextInputFieldWrapper: (inputfieldNumber) => cy.get('.text-not-to-be-rendered-input').eq(inputfieldNumber),
     textToNotBeRenderedAsLaTextInputField: () => cy.get('[aria-label="Text to not be rendered as LaTex"]'),
     textToNotBeRenderedAsLaTextInputFieldCount: () => cy.get('.start-adornment'),
-    addTextButton: () => cy.get('.text-not-latex-wrapper .add-option'),
-    inputFieldLatexCharacter: () => cy.get('var[mathquill-command-id]')
+    addTextButton: () => cy.get('.text-not-latex-wrapper .ngie-icon-with-label-btn'),
+    inputFieldLatexCharacter: () => cy.get('var[mathquill-command-id]'),
+    deleteButton: () => cy.get('.icon-button-wrapper button')
 }
 
 const steps = {

package/cypress/pages/essayResponsePage.js

@@ -351,7 +351,7 @@ const tests = {
             cy.log('Adding a space and inserting more symbols in the response field.');
             essayResponsePage.responseField()
                 .click()
-                .type(' ');
+                .type('  ');
             essayResponsePage.previewTabToolbarOption(`${specialOrMathCharacters[popupType].popupTitle}`)
                 .click();
             essayResponsePage.specialAndMathCharacterPopupSymbols()

package/cypress/pages/fillInTheGapsOverImageDropdownPage.js

@@ -1,12 +1,15 @@
 import utilities from "../support/helpers/utilities";
-import { createQuestionBasePage, figOverImageCommonComponent, fillInTheGapsDropdownCommonComponent, commonComponents, uploadImageSectionComponent, optionsWrapperComponent, ckEditorToolbar, equationEditorFlyout, autoScoredSetCorrectAnswerSection, scoringSectionBase, autoScoredScoringSectionMultipleResponsesType, autoScoredScoringSection, previewScoringAndShowCorrectAnswerComponent, additionalSettingsPanel, autoScoredAdditionalSettings, autoScoredPreviewBase, questionInstructionsComponent } from "./components"
+import { createQuestionBasePage, figOverImageCommonComponent, fillInTheGapsDropdownCommonComponent, commonComponents, uploadImageSectionComponent, optionsWrapperComponent, ckEditorToolbar, equationEditorFlyout, autoScoredSetCorrectAnswerSection, scoringSectionBase, autoScoredScoringSectionMultipleResponsesType, autoScoredScoringSection, previewScoringAndShowCorrectAnswerComponent, additionalSettingsPanel, autoScoredAdditionalSettings, autoScoredPreviewBase, questionInstructionsComponent, answerNumerationComponent } from "./components"
 
 const selectors = {
     ...figOverImageCommonComponent,
     ...fillInTheGapsDropdownCommonComponent,
     ...questionInstructionsComponent,
+    ...answerNumerationComponent,
+    ...additionalSettingsPanel,
     responseDropdownPreviewTab: () => cy.get('[class*="ImageWithDropdownPreviewstyles__DraggableInput"] [class*="icon-chevron"]'),
-    responseDropdownWrapperPreviewTab: () => cy.get('[class*="ImageWithDropdownPreviewstyles__IconDiv"]'),
+    responseDropdownWrapperPreviewTab: () => cy.get('.response-dropdown-wrapper'),
+    responseDropdownContainerWrapperPreviewTab: () => cy.get('[class*="ImageWithDropdownPreviewstyles__IconDiv"]'),
     //Correct answer container
     previewTabCorrectAnswerContainer: () => cy.get('.cloze-with-text-correct-answer-wrapper'),
     previewTabCorrectAnswerLabel: () => cy.get('.cloze-with-text-correct-answer-label'),
@@ -31,7 +34,7 @@ const steps = {
     ...autoScoredPreviewBase.steps,
     ...autoScoredScoringSection.steps,
     ...questionInstructionsComponent.steps,
-
+    ...answerNumerationComponent.steps,
     /**
      * @param {number} responseContainerIndex Index of response container
      * @param {number[]} responseContainerPositionCoordinates Position coordinates of the response container
@@ -128,7 +131,7 @@ const steps = {
      * @description Verify that the incorrect option at the specified index has a cross-mark icon and is visible.
      */
     verifyIncorrectOptionCrossmarkIcon: (index) => {
-        fillInTheGapsOverImageDropdownPage.responseDropdownWrapperPreviewTab()
+        fillInTheGapsOverImageDropdownPage.responseDropdownContainerWrapperPreviewTab()
             .eq(index)
             .find('.tick-icon-wrapper')
             .should('have.class', 'icon-incorrect')
@@ -140,7 +143,7 @@ const steps = {
      * @description Verify that the correct option at the specified index has a check-mark icon and is visible.
      */
     verifyCorrectOptionCheckmarkIcon: (index) => {
-        fillInTheGapsOverImageDropdownPage.responseDropdownWrapperPreviewTab()
+        fillInTheGapsOverImageDropdownPage.responseDropdownContainerWrapperPreviewTab()
             .eq(index)
             .find('.tick-icon-wrapper')
             .should('have.class', 'icon-correct')
@@ -152,7 +155,7 @@ const steps = {
      * @description Verify that the option at the specified index does not have a check-mark or cross-mark.
      */
     verifyCheckmarkOrCrossmarkNotVisible: (index) => {
-        utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseDropdownWrapperPreviewTab().eq(index).find('.tick-icon-wrapper'), 'notExist');
+        utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseDropdownContainerWrapperPreviewTab().eq(index).find('.tick-icon-wrapper'), 'notExist');
     },
 
     /**
@@ -194,7 +197,68 @@ const steps = {
                 let responseVerticalCoordinate = coordinatesArray[1].trim();
                 expect(responseVerticalCoordinate).to.be.eq(verticalCoordinate);
             });
+    },
+
+    /**
+     * @param {number} responseDropdownIndex Index of response dropdown
+     * @description Verify placeholder for response dropdown in preview tab does not exist
+     */
+    verifyPlaceholderAttributeInPreviewTabDropdownNotExists: (responseDropdownIndex) => {
+        fillInTheGapsOverImageDropdownPage.responseDropdownContainerWrapperPreviewTab()
+            .eq(responseDropdownIndex)
+            .within(() => {
+                utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.responseDropdownPlaceholderText(), 'notExist');
+            });
+    },
+
+    /**
+     * @param {number} responseDropdownIndex Index of response dropdown
+     * @param {*} placeholderText Placeholder for dropdown
+     * @description Verify placeholder text displayed for response dropdown in preview tab
+     */
+    verifyPlaceholderAttributeInPreviewTabDropdown: (responseDropdownIndex, placeholderText) => {
+        fillInTheGapsOverImageDropdownPage.responseDropdownContainerWrapperPreviewTab()
+            .eq(responseDropdownIndex)
+            .within(() => {
+                utilities.verifyTextContent(fillInTheGapsDropdownCommonComponent.responseDropdownPlaceholderText(), placeholderText);
+            });
+    },
+
+    /**
+     * @param {number} responseDropdownIndex Index of response dropdown
+     * @param {number} height Height of response dropdown in preview tab
+     * @description Verify height of response dropdown in preview tab
+     */
+    verifyDropdownHeightPreviewTab: (responseDropdownIndex, height) => {
+        fillInTheGapsOverImageDropdownPage.responseDropdownWrapperPreviewTab()
+            .eq(responseDropdownIndex)
+            .should('have.attr', 'height', `${height}px`);
+    },
+
+    /**
+     * @param {number} responseDropdownIndex Index of response dropdown
+     * @param {number} width Width of response dropdown in preview tab
+     * @description Verify width of response dropdown in preview tab
+     */
+    verifyDropdownWidthPreviewTab: (responseDropdownIndex, width) => {
+        fillInTheGapsOverImageDropdownPage.responseDropdownWrapperPreviewTab()
+            .eq(responseDropdownIndex)
+            .should('have.attr', 'width', `${width}px`);
+    },
+
+    /**
+      * Verify the numeration of response fields in the Preview Tab.
+      * @param {string[]} optionNumerationArray - An array of expected numeration strings to verify.
+      */
+    verifyResponseDropdownNumeration: (optionNumerationArray) => {
+        fillInTheGapsOverImageDropdownPage.responseDropdownContainerWrapperPreviewTab()
+        optionNumerationArray.forEach((optionNumeration, count) => {
+            fillInTheGapsOverImageDropdownPage.responseNumeration()
+                .eq(count)
+                .should('have.text', `${optionNumeration}`);
+        });
     }
+
 }
 
 const tests = {
@@ -206,8 +270,11 @@ const tests = {
     ...autoScoredScoringSection.tests,
     ...commonComponents.tests,
     ...previewScoringAndShowCorrectAnswerComponent.tests,
+    ...answerNumerationComponent.tests,
+    ...additionalSettingsPanel.tests,
+    ...autoScoredAdditionalSettings.tests,
     ...questionInstructionsComponent.tests,
-
+    ...createQuestionBasePage.tests,
     /**
      * @param {number} minimumScoreIfAttemptedPoints - The minimum score awarded if attempted.
      * @param {number} allocatedPoints - The expected allocated points for the question.

package/cypress/pages/fillInTheGapsTextPage.js

@@ -59,7 +59,7 @@ const steps = {
     expandResponseAccordion: (responseIndex) => {
         fillInTheGapsTextPage.responseAccordionWrapper()
             .eq(responseIndex)
-            .find('.additional-settings-panel')
+            .find('[role="button"]')
             .should('have.attr', 'aria-expanded', 'false')
             .click()
             .should('have.attr', 'aria-expanded', 'true');

package/cypress/pages/highlightImagePage.js

@@ -37,13 +37,11 @@ const selectors = {
     highlighImageCanvasWrapper: () => cy.get('.drawing-tool__wrapper .drawing-tool__canvas'),
     highlighImageCanvas: () => cy.get('.drawing-tool__wrapper .upper-canvas'),
     setCorrectAnswerSectionHighlight: () => cy.get('[class*="HighlightImageControlstyles__ShapeWrapper"] a'),
-    setCorrectAnswerSectionHighlightActivePattern: () => cy.get('[class*="HighlightImageControlstyles__ShapeWrapper"] a [class*="HighlightImageControlstyles__DiamondPattern-"]'),
     setCorrectAnswerSectionHighlightFillColor: () => cy.get('[class*="HighlightImageControlstyles__ShapeWrapper"] a [class*="HighlightImageControlstyles__DiamondPatternWrapper"]'),
     setCorrectAnswerSectionHighlightPolygon: () => cy.get('[class*="HighlightImageControlstyles__PolygonWrapper"]'),
     highlightNumeration: () => cy.get('[class*="styles__TextWrapper"]'),
     setCorrectAnswerSectionImage: () => cy.get('.highlight-svg-responseive image'),
     previewTabHighlight: () => cy.get('.edit-question-preview-wrapper [class*="HighlightImageControlstyles__ShapeWrapper"] a'),
-    previewTabHighlightActivePattern: () => cy.get('.edit-question-preview-wrapper [class*="HighlightImageControlstyles__ShapeWrapper"] a [class*="HighlightImageControlstyles__DiamondPattern-"]'),
     previewTabHighlightFillColor: () => cy.get('.edit-question-preview-wrapper [class*="HighlightImageControlstyles__ShapeWrapper"] a [class*="HighlightImageControlstyles__DiamondPatternWrapper"]'),
     previewTabHighlightPolygon: () => cy.get('.edit-question-preview-wrapper [class*="HighlightImageControlstyles__PolygonWrapper"]'),
     multipleSelectionCheckboxLabel: () => cy.get('[data-ngie-testid="multiple-selection-checkbox"] .MuiFormControlLabel-label'),
@@ -486,14 +484,14 @@ const steps = {
 
     clickOnUndoTool: () => {
         highlightImagePage.undoTool()
-            .click()
-            .blur();
+            .click();
+        steps.clickOnPenTool();
     },
 
     clickOnRedoTool: () => {
         highlightImagePage.redoTool()
-            .click()
-            .blur();
+            .click();
+        steps.clickOnPenTool();
     },
 
     clickOnClearAllTool: () => {
@@ -1150,8 +1148,9 @@ const steps = {
     * @description this function verifies that active pattern is displayed on the highlight region in Set correct answer section
     */
     verifyActivePatternIsDisplayedOnHighlightRegionInSetCorrectAnswerSection: (index) => {
-        highlightImagePage.setCorrectAnswerSectionHighlightActivePattern()
+        highlightImagePage.setCorrectAnswerSectionHighlight()
             .eq(index)
+            .find('[class*="HighlightImageControlstyles__DiamondPattern-"]')
             .should('exist');
     },
 
@@ -1160,8 +1159,9 @@ const steps = {
     * @description this function verifies that active pattern is displayed on the highlight region in Preview tab
     */
     verifyActivePatternIsDisplayedOnHighlightRegionInPreviewTab: (index) => {
-        highlightImagePage.previewTabHighlightActivePattern()
+        highlightImagePage.previewTabHighlight()
             .eq(index)
+            .find('[class*="HighlightImageControlstyles__DiamondPattern-"]')
             .should('exist');
     },
 
@@ -1170,8 +1170,9 @@ const steps = {
     * @description this function verifies that active pattern is not displayed on the highlight region in Set correct answer section
     */
     verifyActivePatternIsNotDisplayedOnHighlightRegionInSetCorrectAnswerSection: (index) => {
-        highlightImagePage.setCorrectAnswerSectionHighlightActivePattern()
+        highlightImagePage.setCorrectAnswerSectionHighlight()
             .eq(index)
+            .find('[class*="HighlightImageControlstyles__DiamondPattern-"]')
             .should('not.exist');
     },
 
@@ -1180,8 +1181,9 @@ const steps = {
     * @description this function verifies that active pattern is not displayed on the highlight region in Preview Tab
     */
     verifyActivePatternIsNotDisplayedOnHighlightRegionInPreviewTab: (index) => {
-        highlightImagePage.previewTabHighlightActivePattern()
+        highlightImagePage.previewTabHighlight()
             .eq(index)
+            .find('[class*="HighlightImageControlstyles__DiamondPattern-"]')
             .should('not.exist');
     }
 }

package/cypress/pages/highlightPage.js

@@ -50,12 +50,13 @@ const selectors = {
     setCorrectAnswerSpans: () => cy.get('[class*="Highlightstyles__Wrapper"] span'),
     setCorrectAnswerOption: () => cy.get('[class*="Highlightstyles__Wrapper"] .highlighted'),
     setPointsButton: () => cy.get('[class*="Highlightstyles__SetPointsPopupWrapper"] button'),
-    setPointsPopupSaveButton: () => cy.get('.compact-popup-accept-button'),
-    setPointsPopupCancelButton: () => cy.get('.compact-popup-reject-button'),
+    setPointsPopupSaveButton: () => cy.get('.popup-button-wrapper button').eq(1),
+    setPointsPopupCancelButton: () => cy.get('.popup-button-wrapper button').eq(0),
     setPointsPopupOptions: () => cy.get('[class*="SetPointsPopupstyle__MappedAnswer"]'),
     setPointsPopupPointsLabel: () => cy.get('[class*="SetPointsPopupstyle__PointLabel"]'),
     //Check this after https://redmine.zeuslearning.com/issues/542344 is fixed
-    pointsPerResponseLabelAndScore: () => cy.get('[class*="Highlightstyles__PartialPointsPerResponseLabel"]'),
+    pointsPerResponseLabel: () => cy.get('[class*="Highlightstyles__PartialPointsPerResponseLabel"]'),
+    pointsPerResponseScore: () => cy.get('[class*="Highlightstyles__PartialPointsPerResponseValue"]'),
     //preview tab
     previewTabQuestionContainer: () => cy.get('.highlight-preview-wrapper'),
     previewTabParagraphs: () => cy.get('.highlight-preview-wrapper p'),
@@ -64,6 +65,7 @@ const selectors = {
     //additional settings
     maximumNumberOfAnswersLabel: () => cy.get('.maximum-answers'),
     maximumAnswersInputField: () => cy.get('[class*="StudentResponseComponentstyle__OptionWrapper"] input'),
+    setCorrectAnswerErrorMessage: () => cy.get('[class*="ErrorMessageContainer"]')
 }
 
 const steps = {
@@ -232,6 +234,12 @@ const steps = {
             .click();
     },
 
+    verifySetCorrectAnswerSectionErrorMessage: () => {
+        highlightPage.setCorrectAnswerErrorMessage()
+            .eq(1)
+            .verifyInnerText('Error: Please set a correct answer.');
+    },
+
     verifyResetPopupForClearingOptionSelection: () => {
         utilities.verifyElementVisibilityState(highlightPage.dialogBox(), 'visible');
         utilities.verifyInnerText(highlightPage.dialogBoxTitle(), 'Reset');
@@ -622,7 +630,7 @@ const steps = {
      * @description Verify the points per response score
      */
     verifyPartialEqualWeightsPointsPerResponseScore: (points) => {
-        utilities.verifyInnerText(highlightPage.pointsPerResponseLabelAndScore(), `Points per response: ${points}`);
+        utilities.verifyInnerText(highlightPage.pointsPerResponseScore(), `${points}`);
     },
 
     clickOnClearHighlightButtonInHighlightOptionsSection: () => {
@@ -630,7 +638,7 @@ const steps = {
             .click();
     },
 
-    verifyDefaultSetPointsButtonLabelAndDisabledState: () => {   
+    verifyDefaultSetPointsButtonLabelAndDisabledState: () => {
         utilities.verifyInnerText(highlightPage.setPointsButton(), 'Set points');
         utilities.verifyElementVisibilityState(highlightPage.setPointsButton(), 'visible');
         utilities.verifyElementVisibilityState(highlightPage.setPointsButton().find('svg'), 'exist');
@@ -810,6 +818,21 @@ const steps = {
             .should('exist')
             .should('have.text', 'This is Bold text input.lorem');
     },
+
+    verifyHighlightOptionsFieldErrorMessage: () => {
+        highlightPage.highlightOptionsTextFieldWrapper()
+            .next()
+            .should('have.text', 'Error: Minimum one highlight option is required.');
+    },
+
+    //TODO- Update after https://redmine.zeuslearning.com/issues/548968 is resolved
+    verifySetCorrectAnswerErrorMessage: () => {
+        highlightPage.setCorrectAnswerLabel()
+            .parents('.highlight-set-correct-wrapper')
+            .within(() => {
+                utilities.verifyTextContent(highlightPage.errorMessage().eq(1), 'Error: Please set a correct answer.')
+            });
+    }
 }
 
 const tests = {
@@ -823,6 +846,7 @@ const tests = {
     ...additionalSettingsPanel.tests,
     ...studentResponseAndLayoutComponent.tests,
     ...autoScoredAdditionalSettings.tests,
+    ...createQuestionBasePage.tests,
 
     /**
      * @param {number} totalPoints Maximum total points set for the question