itemengine-cypress-automation 1.0.389-graphAndCharts-04d27f6.0 → 1.0.390-IEI-6314-testScriptForTextEntryMathValidations-dcad527.0

package/cypress/pages/chartsDotPlotPage.js

@@ -1649,6 +1649,31 @@ const steps = {
             utilities.verifyElementVisibilityState(autoScoredScoringPreviewTab.incorrectIcon(), 'visible');
         }
     },
+    /**
+     * @param {Object<number, number>} responsePointsObject - An object where keys are indexes of the points fields and values are the points to be allotted.
+     * @description Allots points to the enabled points input fields for each option in the scoring section based on the provided object.
+     */
+    allotPartialDifferentWeightsPoints: (responsePointsObject) => {
+        Object.entries(responsePointsObject).forEach(([index, points]) => {
+            const indexNumber = parseInt(index);
+            autoScoredScoringSectionMultiResponseType.pointsInputField()
+                .eq(indexNumber)
+                .should('not.be.disabled')
+            autoScoredScoringSectionMultiResponseType.pointsInputField()
+                .eq(indexNumber)
+                .clear()
+            autoScoredScoringSectionMultiResponseType.pointsInputField()
+                .eq(indexNumber)
+                .focus()
+                .click()
+                .type(`${points}`, { delay: 1000 });
+            autoScoredScoringSectionMultiResponseType.pointsInputField()
+                .eq(indexNumber)
+                .click()
+                .blur()
+                .should('have.value', points);
+        });
+    },
 }
 
 const tests = {

package/cypress/pages/chartsLinePage.js

@@ -107,7 +107,7 @@ const steps = {
      * @param {number} pointIndex Index of the point to be locked 
      */
     lockPoint: (pointIndex) => {
-        utilities.hoverOverElement(utilities.getNthElement(chartsLinePage.selectChartTypePoint(), pointIndex))
+        utilities.triggerMouseover(utilities.getNthElement(chartsLinePage.selectChartTypePoint(), pointIndex))
         barAndLineChartComponent.barAndPointTooltipLockUnlockButton()
             .click();
         barAndLineChartComponent.barAndPointTooltipLockUnlockButton()
@@ -116,7 +116,9 @@ const steps = {
             .within(() => {
                 utilities.verifyElementVisibilityState(chartsLinePage.pointLockIcon(), 'visible');
             });
+        // Instead of triggerMouseout (which is flaky due to overlays), use hoverAwayFromElement utility for reliability
         utilities.hoverAwayFromElement();
+        cy.wait(300); // Give time for tooltip to disappear
     },
 
     /**
@@ -545,7 +547,32 @@ const steps = {
             .clear()
             .type(text)
             .should('have.value', text);
-    }
+    },
+    /**
+     * @param {Object<number, number>} responsePointsObject - An object where keys are indexes of the points fields and values are the points to be allotted.
+     * @description Allots points to the enabled points input fields for each option in the scoring section based on the provided object.
+     */
+    allotPartialDifferentWeightsPoints: (responsePointsObject) => {
+        Object.entries(responsePointsObject).forEach(([index, points]) => {
+            const indexNumber = parseInt(index);
+            autoScoredScoringSectionMultiResponseType.pointsInputField()
+                .eq(indexNumber)
+                .should('not.be.disabled')
+            autoScoredScoringSectionMultiResponseType.pointsInputField()
+                .eq(indexNumber)
+                .clear()
+            autoScoredScoringSectionMultiResponseType.pointsInputField()
+                .eq(indexNumber)
+                .focus()
+                .click()
+                .type(`${points}`, { delay: 1000 });
+            autoScoredScoringSectionMultiResponseType.pointsInputField()
+                .eq(indexNumber)
+                .click()
+                .blur()
+                .should('have.value', points);
+        });
+    },
 }
 
 const tests = {

package/cypress/pages/components/autoScoredSpecifyCorrectAnswerSection.js

@@ -327,7 +327,11 @@ const tests = {
         });
 
         it('If user has not selected correct answer in the correct accordion, then the Add alternative answer button should be in disabled state', () => {
-            utilities.verifyElementDisabled(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton());
+            if (questionType === 'list ordering') {
+                utilities.verifyElementNotDisabled(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton());
+            } else {
+                utilities.verifyElementDisabled(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton());
+            }
         });
     },
 

package/cypress/pages/components/chartsCommonComponent.js

@@ -21,6 +21,7 @@ const selectors = {
 
     //specify correct answer
     pointsInputField: () => cy.get('.ngie-accordion-detail .points-input-field input[type="text"]'),
+    pointsInputFieldForManualScoring: () => cy.get('.points-input-field input[type="text"]'),
     graphTitleSpecifyCorrectAnswer: () => cy.get('.ngie-accordion-detail .chart-top-wrapper .title-container'),
     xAxisLabelSpecifyCorrectAnswer: () => cy.get('.ngie-accordion-detail .chart-bottom-wrapper .title-container'),
 
@@ -31,7 +32,7 @@ const selectors = {
     previewTabGraphTitle: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartsPreviewstyles__TopWrapper"] .title-container'),
     previewTabXAxisLabelButton: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartsPreviewstyles__BottomWrapper"] .title-container'),
     tickIconWrapper: () => cy.get('[class*="tick-icon-wrapper"] svg'),
-   chartsContainerPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .chart-container'),
+    chartsContainerPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .chart-container'),
     graphTitleCorrectAnswerSection: () => cy.get('[class*="question-preview-wrapper"] .chart-top-wrapper .title-container').eq(1),
     xAxisLabelCorrectAnswerSection: () => cy.get('[class*="question-preview-wrapper"] .chart-bottom-wrapper .title-container').eq(1),
     partialDifferentWeightsPointsInputFieldLabel: () => cy.get('[class*="Chartsstyles__PartialPointsWrapper"] .partial-points-input-label'),
@@ -122,6 +123,20 @@ const steps = {
             .blur();
     },
 
+    /**
+     * @description - Allots points in the scoring section for manual scoring.
+     * \@param {number} points - The points to be allotted.
+     */
+    allotPointsForManualScoring: (points) => {
+        chartsCommonComponent.pointsInputFieldForManualScoring()
+            .clear()
+            .type(`${points}`)
+            .wait(1000);
+        chartsCommonComponent.pointsInputFieldForManualScoring()
+            .should('have.value', points)
+            .blur();
+    },
+
     //Preview tab
     /**
      * @description edit x axis label in preview tab
@@ -257,7 +272,11 @@ const steps = {
      */
     verifyPartialEqualWeightsPointsPerResponseScore: (points) => {
         utilities.verifyInnerText(autoScoredScoringSectionMultiResponseType.partialEqualWeightsPointsPerResponseScore(), points);
-    }
+    },
+    verifyPoints: (points) => {
+        chartsCommonComponent.pointsInputField()
+            .should('have.value', points);
+    },
 }
 
 const tests = {

package/cypress/pages/components/ckEditorEquationEditorComponent.js

@@ -9,6 +9,7 @@ const selectors = {
     equationEditorIcon: () => cy.get('.cke_button__nextgeneqneditor_icon:visible'),
     equationEditorLabel: () => cy.get('[class*="EquationEditorstyles__Heading"]'),
     okButton: () => cy.get('[title="OK"]'),
+    audioPlayerOkButton: () => cy.get('.save-action-btn-wrapper button').eq(0),
     editorCancelButton: () => cy.get('[title="Cancel"]'),
     equationEditorPopUp: () => cy.get('[class*="EquationEditorstyles__EquationEditorContainer"]'),
     equationWrapper: () => cy.get('.cke_widget_ngie_equation [class*="NGMathJax"]'),

package/cypress/pages/components/ckEditorInsertImageComponent.js

@@ -15,7 +15,7 @@ const selectors = {
     imageInfoButton: () => cy.get('[title="Image Info"]'),
     uploadButton: () => cy.get('[title="Upload"]'),
     //Image Info
-    urlLabel: () => cy.get('.dialog-input-label').eq(0),
+    imageUrlLabel: () => cy.get('.dialog-input-label').eq(0),
     urlInputField: () => cy.get('.cke_dialog_ui_input_text').eq(1),
     alternateTextLabel: () => cy.get('.dialog-input-label').eq(1),
     alternateTextInputField: () => cy.get('.cke_dialog_ui_input_text').eq(3),
@@ -23,7 +23,7 @@ const selectors = {
     widthInputField: () => cy.get('.cke_dialog_ui_input_text').eq(5),
     heightLabel: () => cy.get('.dialog-input-label').eq(3),
     heightInputField: () => cy.get('.cke_dialog_ui_input_text').eq(7),
-    borderLabel: () => cy.get('[class="cke_dialog_ui_html"]').eq(2),
+    borderLabel: () => cy.get('.dialog-input-label').eq(4),
     borderInputField: () => cy.get('.cke_dialog_ui_input_text').eq(9),
     hSpaceLabel: () => cy.get('.dialog-input-label').eq(5),
     hSpaceInputField: () => cy.get('.cke_dialog_ui_input_text').eq(11),
@@ -36,7 +36,7 @@ const selectors = {
     fixedRadioButton: () => cy.get('[class*="image-responsiveness-radio-wrapper"]').eq(3),
     fixedRadioLabel: () => cy.get('[class*="image-responsiveness-radio-wrapper"]').eq(4),
     //Alignment
-    alignmentLabel: () => cy.get('.dialog-input-label').eq(9),
+    alignmentLabel: () => cy.get('.dialog-input-label').eq(7),
     alignmentDropDown: () => cy.get('.cke_dialog_ui_input_select').eq(3),
     alignmentOptions: (alignment = null) => {
         if (alignment) {

package/cypress/pages/components/ckEditorInsertTableComponent.js

@@ -26,7 +26,7 @@ const selectors = {
 
     //Table Style
     tableStyleLabel: () => cy.get('.table_styles_header .cke_dialog_ui_html'),
-    borderLabel: () => cy.get('.cke_dialog_ui_vbox_child').eq(26),
+    tableBorderLabel: () => cy.get('.cke_dialog_ui_vbox_child').eq(26),
     clearAllTableStyle: () => cy.get('.clear_all_table_styles'),
 
     //Borders
@@ -90,7 +90,7 @@ const selectors = {
     heightPxInput: () => cy.get('.cke_dialog_ui_input_text').eq(7),
 
     //Alignment, Caption and Summary
-    alignmentLabel: () => cy.get('.dialog-input-label').eq(9),
+    tableAlignmentLabel: () => cy.get('.dialog-input-label').eq(9),
     alignmentDropDown: () => cy.get('.cke_dialog_ui_input_select').eq(2),
     captionLabel: () => cy.get('.dialog-input-label').eq(10),
     captionInputField: () => cy.get('.cke_dialog_ui_input_text').eq(15),
@@ -358,7 +358,7 @@ const steps = {
     },
 
     scrollingDownToAlignmentLabel: () => {
-        ckEditorInsertTableComponent.alignmentLabel()
+        ckEditorInsertTableComponent.tableAlignmentLabel()
             .scrollIntoView()
     },
 

package/cypress/pages/components/ckEditorLinkComponent.js

@@ -12,7 +12,7 @@ const selectors = {
     linkLabel: () => cy.get('.dialog-header-label'),
     linkPopUpWrapper: () => cy.get('.custom-link-wrapper'),
     urlInQuestionInstruction: () => cy.get('[data-cke-saved-href*="https"]'),
-    foxImageLinkUrlValueCheck: () => cy.get('[src*="https://cdn.pixabay.com/photo/2016/11/29/03/28/fox-1867062_960_720.jpg"]'),
+    foxImageLinkUrlValueCheck: () => cy.get('[href*="https://cdn.pixabay.com/photo/2016/11/29/03/28/fox-1867062_960_720.jpg"]'),
     urlInputField: () => cy.get('input[class*="cke_dialog_ui_input_text"]').eq(1),
     OkButton: () => cy.get('[title="OK"]'),
     //Link Info
@@ -24,8 +24,8 @@ const selectors = {
     linkTypeDropDown: () => cy.get('.cke_dialog_ui_input_select').eq(0),
     protocolLabel: () => cy.get('.dialog-input-label').eq(2),
     protocolDropDown: () => cy.get('.cke_dialog_ui_input_select').eq(1),
-    urlLabel: () => cy.get('.dialog-input-label').eq(0),
-    urlInputField: () => cy.get('.cke_dialog_ui_input_text').eq(0),
+    urlLabel: () => cy.get('.cke_dialog_ui_text .dialog-input-label').eq(1),
+    urlInputField: () => cy.get('.cke_dialog_ui_input_text input').eq(1),
     //Protocol
     protocolDropDown: () => cy.get('.dialog-input-area').eq(2),
     selectProtocolOptionDropdown: (protocolType = null) => {
@@ -55,8 +55,7 @@ const steps = {
 
     addURLInLinkPopUp: (text) => {
         ckEditorLinkComponent.urlInputField()
-            .type(text, { delay: 0 })
-            .blur();
+            .type(text, { delay: 0 });
     },
 
     addTextInDisplayText: (text) => {
@@ -72,7 +71,7 @@ const steps = {
 
     expandProtocolDropDown: () => {
         ckEditorLinkComponent.protocolDropDown()
-            .click({force: true});
+            .click({ force: true });
     },
 
     selectProtocolType: (protocolType) => {
@@ -122,12 +121,12 @@ const steps = {
             doc.addEventListener('click', () => {
                 setTimeout(function () { doc.location.reload() }, 5000);
             });
-        ckEditorLinkComponent.foxImageLinkUrlValueCheckPreviewTab()
+            ckEditorLinkComponent.foxImageLinkUrlValueCheckPreviewTab()
                 .click();
-         cy.verifyDownload(fileName);
+            cy.verifyDownload(fileName);
         });
     },
-    
+
 
     clickSendItToServerButton: () => {
         ckEditorLinkComponent.sendItToServerButton()

package/cypress/pages/components/colorPopupComponent.js

@@ -6,6 +6,7 @@ const selectors = {
     ...dialogBoxBase,
     colorBlock: () => cy.get('.color-picker-block'),
     colorSaturationPalette: () => cy.get('.react-colorful__saturation'),
+    alphaPicker : () => cy.get('.react-colorful__alpha'),
     colorSaturationPicker: () => cy.get('.react-colorful__saturation-pointer .react-colorful__pointer-fill'),
     colorHuePalette: () => cy.get('.react-colorful__hue'),
     colorHuePicker: () => cy.get('.react-colorful__hue-pointer .react-colorful__pointer-fill'),
@@ -97,6 +98,11 @@ const steps = {
             .click();
     },
 
+    clickInAlphaPicker: () => {
+        colorPopupComponent.alphaPicker()
+            .click();
+    },
+
     clickInColorHuePalette: () => {
         colorPopupComponent.colorHuePalette()
             .click();

package/cypress/pages/components/createQuestionBasePage.js

@@ -120,36 +120,49 @@ const steps = {
      */
     verifyWarningIconOnRequiredFields: (requiredFieldsArray) => {
         requiredFieldsArray.forEach((field) => {
-            if (field === 'Please set points') {
+            if (field === 'Please set points.') {
                 scoringSectionBaseEditTab.pointsWrapper()
                     .within(() => {
                         utilities.verifyElementVisibilityState(commonComponents.warningIcon(), 'exist');
                     });
-            } else if (field === 'Please enter all option values') {
+            } else if (field === 'Please enter all option values.') {
                 optionsWrapperComponent.optionsLabel()
                     .within(() => {
                         utilities.verifyElementVisibilityState(commonComponents.warningIcon(), 'exist');
                     });
-            } else if (field === 'Please upload an image') {
+            } else if (field === 'Please upload an image.') {
                 createQuestionBasePage.backgroundImageLabel()
                     .within(() => {
                         utilities.verifyElementVisibilityState(commonComponents.warningIcon(), 'exist');
                     });
-            } else if (field === 'Please insert a dropzone' || field === 'Please insert a text container') {
+            } else if (field === 'Please insert a dropzone' || field === 'Please insert a text container.') {
                 createQuestionBasePage.canvasLabel()
                     .parents('[class*="CanvasLabelWrapper"]')
                     .within(() => {
                         utilities.verifyElementVisibilityState(commonComponents.warningIcon(), 'notExist');
                     });
-            } else if (field === 'Please enter all questions' || field === 'Please enter all prompts') {
+            } else if (field === 'Please enter all questions.' || field === 'Please enter all prompts.') {
                 gridQuestionCommonComponent.specifyRowsAndColumnsTableHelpText()
                     .within(() => {
                         utilities.verifyElementVisibilityState(commonComponents.warningIcon(), 'exist');
                     });
             }
+            else if (field === 'Please select a file type') {
+                // Upload Response Select File Type Accordion
+                cy.get('.edit-question-edit-tab-wrapper .ngie-accordion-summary')
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(commonComponents.warningIcon(), 'exist');
+                    });
+            } else if (field === 'Please enter text block.') {
+                // Content Block Body Label
+                cy.get('.options-label')
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(commonComponents.warningIcon(), 'exist');
+                    });
+            }
         })
     },
-  
+
 
     clickOnEditQuestionButton: () => {
         createQuestionBasePage.editButton()

package/cypress/pages/components/desmosToolComponent.js

@@ -21,7 +21,7 @@ const selectors = {
     previewTabDesmosToolKeypad: () => cy.get('[class*="DesmosToolstyles__DesmosToolViewWrapper"] .dcg-basic-keypad-container'),
     previewTabDesmosToolKeypadKeys: (ariaLabel = null) => {
         if (ariaLabel) {
-            return cy.get(`.dcg-basic-keypad  .dcg-keypad-btn[aria-label*="${ariaLabel}"]:visible`)
+            return cy.get(`.dcg-basic-keypad  .dcg-keypad-btn[aria-label*="${ariaLabel}"]`)
         } else {
             return cy.get('.dcg-basic-keypad  .dcg-keypad-btn')
         }

package/cypress/pages/components/draggableOptionsSectionComponent.js

@@ -26,6 +26,7 @@ const selectors = {
 const steps = {
     expandDraggableOptionsLayoutDropdown: () => {
         draggableOptionsSectionComponent.draggableOptionsLayoutDropdown()
+            .trigger('mouseover')
             .click();
     },
 
@@ -35,6 +36,7 @@ const steps = {
      */
     selectOptionFromDraggableOptionsLayoutDropdown: (listOption) => {
         draggableOptionsSectionComponent.draggableOptionsLayoutDropdownListOptions(listOption)
+            .trigger('mouseover')
             .click();
     },
 

package/cypress/pages/components/equationEditorSectionCommonComponent.js

@@ -1,6 +1,6 @@
 import utilities from "../../support/helpers/utilities";
 import { equationEditorCategoriesAndSymbols } from "../../fixtures/equationEditorCategoriesAndSymbols ";
-import { equationEditorFlyout, commonComponents, essayResponseCommonComponents, createQuestionBasePage } from "../components";
+import { equationEditorFlyout, commonComponents, essayResponseCommonComponents, createQuestionBasePage, autoScoredScoringPreviewTab } from "../components";
 const css = Cypress.env('css');
 const allCategories = Object.values(equationEditorCategoriesAndSymbols)
 const defaultSelectedCategories = ['Numpad', 'Keypad', 'Intermediate', 'Primary', 'General', 'Common', 'Algebra', 'Geo', 'Compare', 'Matrices'];
@@ -302,7 +302,7 @@ const tests = {
         it(`In the equation editor flyout the ${allCategories[0].displayName} should be selected by default and the Equation editor input field should be prefilled with the added equation`, () => {
             equationEditorFlyout.steps.verifyCategoryTileSelectedInEquationEditor(`${equationEditorCategoriesAndSymbols['numPad'].displayName}`);
             cy.log('Adding this to focus out of input field')
-            equationEditorFlyout.steps.selectEquationEditorCategoryPreviewTab(`${equationEditorCategoriesAndSymbols['numPad'].displayName}`)
+            equationEditorFlyout.steps.selectEquationEditorCategoryPreviewTab(`${equationEditorCategoriesAndSymbols['numPad'].displayName}`);
             utilities.verifyTextContent(equationEditorFlyout.previewInputField(), 'x+5=1​');
         });
 
@@ -312,7 +312,7 @@ const tests = {
                 equationEditorSectionCommonComponent.steps.verifyResponseFieldEquationText(0, 'x+5=1');
             }
             else {
-                equationEditorSectionCommonComponent.steps.verifyResponseFieldEquationTextNew(0, 'x+5=1');
+                equationEditorSectionCommonComponent.steps.verifyResponseFieldEquationTextNew(0, 'x+5=1​');
             }
         });
 
@@ -330,7 +330,7 @@ const tests = {
                 equationEditorSectionCommonComponent.steps.verifyResponseFieldEquationText(0, 'x+5×0');
             }
             else {
-                equationEditorSectionCommonComponent.steps.verifyResponseFieldEquationTextNew(0, 'x+5×0');
+                equationEditorSectionCommonComponent.steps.verifyResponseFieldEquationTextNew(0, 'x+5×0​');
             }
         });
     },

package/cypress/pages/components/fillInTheGapsDropdownCommonComponent.js

@@ -718,17 +718,17 @@ const steps = {
 
     verifyWarningIconOnRequiredFields: (requiredFieldsArray) => {
         requiredFieldsArray.forEach((field) => {
-            if (field === 'Please set points') {
+            if (field === 'Please set points.') {
                 scoringSectionBaseEditTab.pointsWrapper()
                     .within(() => {
                         utilities.verifyElementVisibilityState(commonComponents.warningIcon(), 'exist');
                     });
-            } else if (field === 'Please enter all option values') {
+            } else if (field === 'Please enter all option values.') {
                 fillInTheGapsDropdownCommonComponent.dropdownOptionsLabel()
                     .within(() => {
                         utilities.verifyElementVisibilityState(commonComponents.warningIcon(), 'exist');
                     });
-            } else if (field === 'Please upload an image') {
+            } else if (field === 'Please upload an image.') {
                 createQuestionBasePage.backgroundImageLabel()
                     .within(() => {
                         utilities.verifyElementVisibilityState(commonComponents.warningIcon(), 'exist');
@@ -745,6 +745,34 @@ const steps = {
                 const clientWidth = $dropdown[0].clientWidth;
                 expect(scrollWidth).to.not.be.greaterThan(clientWidth);
             });
+    },
+
+    /**
+         * @description Verify the options of a dropdown in the specify correct answer section.
+         * @param {number} index Index of the dropdown.
+         * @param {string[]} optionsArray Array of expected options.
+         */
+    verifyDropdownOptionsSpecifyCorrectAnswerSection: (index, optionsArray) => {
+        fillInTheGapsDropdownCommonComponent.dropdownSpecifyCorrectAnswerSection()
+            .eq(index)
+            .click();
+        fillInTheGapsDropdownCommonComponent.dropdownListOptions()
+            .should('have.length', optionsArray.length)
+            .each(($option, optionIndex) => {
+                cy.wrap($option)
+                    .should('have.text', optionsArray[optionIndex]);
+            });
+    },
+
+    /**
+     * Verifies the contents of option fields within the options section.
+     * @param {Array<string>} optionsTextArray - An array of strings representing the expected text content for each option field.
+     */
+    verifyOptionFieldContent: (optionsTextArray) => {
+        optionsTextArray.forEach((option, optionIndex) => {
+            utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownOptionsInputField(), optionIndex)
+                .should('have.value', option);
+        });
     }
 }
 

package/cypress/pages/components/fillInTheGapsTextCommonComponent.js

@@ -1421,7 +1421,7 @@ const tests = {
         it('When user has not entered text inside answer input field and clicks on \'Add alternate\' button, then the button should be disabled and \'Answer is required\' tooltip should be displayed', () => {
             utilities.verifyElementDisabled(utilities.getNthElement(fillInTheGapsTextCommonComponent.responseAccordionAddAlternateButton(), 0).find('button'));
             utilities.getNthElement(fillInTheGapsTextCommonComponent.responseAccordionAddAlternateButton(), 0)
-                .verifyTooltip('Answer is required');
+                .verifyTooltip('select text containerAnswer is required');//Unable to hover out of the select text toolbar option
         });
 
         it('When user enters text inside answer input field, then error message should disappear', () => {

package/cypress/pages/components/gridQuestionCommonComponent.js

@@ -44,6 +44,7 @@ const selectors = {
     optionsButton: () => cy.get('[class*="PreviewSelectionButton"]'),
     optionsButtonPreviewTab: () => cy.get('.preview-selection-grid [class*="PreviewSelectionButton"]'),
     gridPreviewTab: () => cy.get('.single-selection-grid-wrapper:visible'),
+    gridPrintPreviewTab: () => cy.get('[data-testid="print-preview-selection-grid-table"]'),
     gridSpecifyCorrectAnswerSection: () => cy.get('.set-correct-ans-selection-grid'),
     tableCell: () => cy.get('[class*="CellContainer"]'),
     tableCellWrapperSpecifyCorrectAnswerSection: () => cy.get('.set-correct-ans-selection-grid [class*="TableCellWrapper"]'),
@@ -214,8 +215,11 @@ const steps = {
                 gridQuestionCommonComponent.cellPropertyInputField()
                     .click();
                 gridQuestionCommonComponent.cellPropertyInputField()
-                    .clear()
-                    .type(text)
+                    .clear();
+                gridQuestionCommonComponent.cellPropertyInputField()
+                    .click()
+                gridQuestionCommonComponent.cellPropertyInputField()
+                    .type(text);
                 gridQuestionCommonComponent.cellPropertyInputField()
                     .blur();
             });
@@ -351,6 +355,55 @@ const steps = {
         });
     },
 
+
+    /**
+     * Verifies the property of a cell in the print preview of a grid question component.
+     * @param {Object} cellPosition - The position of the cell to verify, containing row and column indices.
+     * @param {number} cellPosition.row - The row index of the cell.
+     * @param {number} cellPosition.column - The column index of the cell.
+     * @param {'None'|Heading'|'Subheading'|'Text'|'Radio button'|'Checkbox'|'Radio button with text'|'Checkbox with text'|'No radio button'|'No checkbox'} cellProperty - The property to verify for the cell.
+     * @throws {Error} If an invalid cellProperty is provided.
+     */
+    verifyTableCellPropertyPrintPreviewTab: ({ row, column }, cellProperty) => {
+        gridQuestionCommonComponent.gridPrintPreviewTab().within(() => {
+            utilities.getNthElement(gridQuestionCommonComponent.tableRow(), row)
+                .within(() => {
+                    switch (cellProperty) {
+                        case 'None':
+                            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                                .should('have.class', 'cell-content-none');
+                            break;
+                        case 'Heading':
+                            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                                .should('have.class', 'cell-content-heading');
+                            break;
+                        case 'Subheading':
+                            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                                .should('have.class', 'cell-content-subeading');
+                            break;
+                        case 'Text':
+                        case 'No radio button':
+                        case 'No checkbox':
+                            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                                .should('have.class', 'cell-content-text');
+                            break;
+                        case 'Radio button':
+                        case 'Checkbox':
+                            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                                .should('have.class', 'cell-content-radio');
+                            break;
+                        case 'Radio button with text':
+                        case 'Checkbox with text':
+                            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                                .should('have.class', 'cell-content-radio-text');
+                            break;
+                        default:
+                            throw new Error('Invalid list option');
+                    };
+                });
+        });
+    },
+
     /**
      * Verifies the property of a cell in the specify correct answer section of a grid question component.
      * @param {Object} cellPosition - The position of the cell to verify, containing row and column indices.

package/cypress/pages/components/imageCanvasComponent.js

@@ -57,7 +57,8 @@ const selectors = {
     selectedColorBlockInTextColorPopup: () => cy.get('.color-library-selected'),
     textColorPopupWrapper: () => cy.get('[class*="Canvasstyle__TextColorPopupWrapper"]'),
     textColorLabelInTextColorPopup: () => cy.get('[class*="Canvasstyle__PopupText"]'),
-    canvasWrapperPreviewTab: () => cy.get('.image-container')
+    canvasWrapperPreviewTab: () => cy.get('.image-container'),
+    canvasToolbar: () => cy.get('[class*="Canvasstyle__ButtonsWrapper"]')
 }
 
 const steps = {
@@ -730,6 +731,11 @@ const steps = {
             'border-style': styleName
         });
     },
+
+    clickOnCanvasToolbar: () => {
+        imageCanvasComponent.canvasToolbar()
+            .click();
+    }
 }
 
 const tests = {
@@ -803,17 +809,17 @@ const tests = {
             commonComponents.steps.verifyErrorMessageIsNotDisplayed();
         });
 
-        it('User should be able to add maximum 20 multiple response containers inside canvas', () => {
+        it('User should be able to add multiple response containers inside canvas', () => {
             for (let i = 0; i < 21; i++) {
                 imageCanvasComponent.steps.insertResponseArea(i * 2);
             }
-            utilities.verifyElementCount(imageCanvasComponent.responseAreaWrapper(), 20);
+            utilities.verifyElementCount(imageCanvasComponent.responseAreaWrapper(), 22);
         });
 
         it('When user clicks on close button for a response container, then response container should disappear and numeration for existing response containers should be changed appropriately', () => {
             imageCanvasComponent.steps.removeResponseArea(0);
-            utilities.verifyElementCount(imageCanvasComponent.responseAreaWrapper(), 19);
-            for (let i = 0; i < 19; i++) {
+            utilities.verifyElementCount(imageCanvasComponent.responseAreaWrapper(), 21);
+            for (let i = 0; i < 21; i++) {
                 utilities.verifyInnerText(utilities.getNthElement(imageCanvasComponent.responseAreaNumerationText(), i), `${i + 1}`);
             }
         });

package/cypress/pages/components/playbackControlsBaseComponent.js

@@ -20,6 +20,7 @@ const selectors = {
             return cy.get('.speed-option')
         }
     },
+    audioPlayerLoaderIcon: () => cy.get('.recording-icon')
 }
 
 const steps = {
@@ -35,7 +36,7 @@ const steps = {
 
     hoverOnVolumeControlButton: () => {
         playbackControlsBaseComponent.volumeControlButton()
-            .realHover({ position: 'top' });
+            .realHover({ position: 'bottom' });
     },
 
     hoverOnMuteUnmuteButton: () => {
@@ -85,7 +86,7 @@ const steps = {
 
     clickOnVolumeButton: () => {
         playbackControlsBaseComponent.volumeControlButton()
-            .realClick();
+            .click();
     },
 
     focusOutFromVolumeControlButton: () => {
@@ -221,6 +222,8 @@ const steps = {
 const tests = {
     verifyVolumeControlFunctionality: () => {
         it('When the user hovers over \'Volume control\' button, volume control settings should open and by default it should be set to full volume and on hovering away from the button, the volume slider should disappear', () => {
+            utilities.verifyElementVisibilityState(playbackControlsBaseComponent.audioPlayerLoaderIcon(), 'notExist');
+            cy.wait(3000); // Wait for the audio player to load
             playbackControlsBaseComponent.steps.hoverOnVolumeControlButton();
             utilities.verifyElementVisibilityState(playbackControlsBaseComponent.volumeControlSlider(), 'visible');
             playbackControlsBaseComponent.steps.verifyVolumeOfPlaybackPlayer('100');
@@ -287,7 +290,7 @@ const tests = {
     verifyPlaybackSpeedContents: (playbackSpeedOptions) => {
         it(`When the user hovers overs the playback button, a list of ${playbackSpeedOptions.length} playback speed options - ${playbackSpeedOptions.join(' ')} should be displayed and by default 1x should be in selected state`, () => {
             playbackControlsBaseComponent.playbackSpeedButton()
-                .realHover();
+                .trigger('mouseover');
             utilities.verifyElementVisibilityState(playbackControlsBaseComponent.playbackSpeedOption(), 'visible');
             utilities.verifyElementCount(playbackControlsBaseComponent.playbackSpeedOption(), playbackSpeedOptions.length);
             playbackControlsBaseComponent.steps.verifyPlaybackSpeedListOptions(playbackSpeedOptions);