itemengine-cypress-automation 1.0.202 → 1.0.203

package/cypress/pages/components/singleMultipleSelectionModeComponent.js

@@ -1,3 +1,6 @@
+const css = Cypress.env('css');
+import utilities from "../../support/helpers/utilities";
+
 const selectors = {
     multipleSelectionToggleButton: () => cy.get('.response-toggle-wrapper button[aria-label*="Multiple selection"]'),
     singleSelectionToggleButton: () => cy.get('.response-toggle-wrapper button[aria-label*="Single selection"]'),
@@ -12,10 +15,80 @@ const steps = {
     selectSingleSelectionToggle: () => {
         singleMultipleSelectionModeComponent.singleSelectionToggleButton()
             .click();
+    },
+
+    /**
+     * @param {("Single selection"|"Multiple selection")} toggleButtonType - Type of toggle button.
+     * @description Verifies the selected state of toggle button.
+     */
+    verifyToggleButtonSelected: (toggleButtonType) => {
+        switch (toggleButtonType) {
+            case 'Single Selection':
+                singleMultipleSelectionModeComponent.singleSelectionToggleButton()
+                    .should('have.attr','aria-pressed','true');
+                break;
+            case 'Multiple selection':
+                singleMultipleSelectionModeComponent.multipleSelectionToggleButton()
+                    .should('have.attr','aria-pressed','true');
+                break;
+            default:
+                throw new Error('Invalid toggle button');        
+        }
+    },
+
+    /**
+     * @param {("Single selection"|"Multiple selection")} toggleButtonType - Type of toggle button.
+     * @description Verifies the not-selected state of toggle button.
+     */
+    verifyToggleButtonNotSelected: (toggleButtonType) => {
+        switch (toggleButtonType) {
+            case 'Single Selection':
+                singleMultipleSelectionModeComponent.singleSelectionToggleButton()
+                    .should('have.attr','aria-pressed','false');
+                break;
+            case 'Multiple selection':
+                singleMultipleSelectionModeComponent.multipleSelectionToggleButton()
+                    .should('have.attr','aria-pressed','false');
+                break;
+            default:
+                throw new Error('Invalid toggle button');        
+        }
+    },
+}
+
+const tests = {
+    verifySingleMultipleSelectionModeContentCSSandA11y: () => {
+        it('\'Single selection\' and \'Multiple selection\' toggle buttons should be visible and \'Multiple selection\' should be selected by default',() => {
+            utilities.verifyElementVisibilityState(singleMultipleSelectionModeComponent.singleSelectionToggleButton(),'visible');
+            utilities.verifyElementVisibilityState(singleMultipleSelectionModeComponent.multipleSelectionToggleButton(),'visible');
+            utilities.verifyInnerText(singleMultipleSelectionModeComponent.singleSelectionToggleButton(),'Single selection');
+            utilities.verifyInnerText(singleMultipleSelectionModeComponent.multipleSelectionToggleButton(),'Multiple selection');
+            singleMultipleSelectionModeComponent.steps.verifyToggleButtonSelected('Multiple selection');
+        });
+
+        it('CSS of Single multiple selection toggle buttons', { tags: 'css' }, () => {
+            utilities.verifyCSS(singleMultipleSelectionModeComponent.singleSelectionToggleButton(), {
+                'background-color': css.color.transparent,
+                'color':css.color.UnselectedToggleButton,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(singleMultipleSelectionModeComponent.multipleSelectionToggleButton(), {
+                'background-color': css.color.toggleButtonSelectedBg,
+                'color':css.color.primaryBtn,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+        });
+
+        it('Accessibility of Single multiple selection toggle buttons', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(singleMultipleSelectionModeComponent.multipleSelectionToggleButton().parents('[class*="HighlightImagestyles__ToggleWrapper"]'));
+        });
     }
 }
 
 export const singleMultipleSelectionModeComponent = {
     ...selectors,
-    steps
+    steps,
+    tests
 }

package/cypress/pages/dragAndDropIntoCategoriesPage.js

@@ -1,4 +1,4 @@
-import { optionsWrapperComponent, createQuestionBasePage, autoScoredSpecifyCorrectAnswerSection, scoringSectionBaseEditTab, autoScoredScoringSectionMultiResponseType, questionInstructionsComponent, autoScoredStudentViewSettings, autoScoredScoringPreviewTab, commonComponents, ckEditorToolbar, equationEditorFlyout, randomizeOptionsComponent, allowMultipleInstancesOfSameDraggableOptionComponent, studentViewSettingsLabelComponent, additionalSettingsPanel, draggableOptionContainer, draggableOptionsSectionComponent, maximumCapacityPerDropzoneComponent, enableOuterBorderComponent, specifyRowsAndColumnsComponent, additionalSettingsAccessibilitySectionComponent } from "./components";
+import { optionsWrapperComponent, createQuestionBasePage, autoScoredSpecifyCorrectAnswerSection, scoringSectionBaseEditTab, autoScoredScoringSectionMultiResponseType, questionInstructionsComponent, autoScoredStudentViewSettings, autoScoredScoringPreviewTab, commonComponents, ckEditorToolbar, equationEditorFlyout, randomizeOptionsComponent, allowMultipleInstancesOfSameDraggableOptionComponent, studentViewSettingsLabelComponent, additionalSettingsPanel, draggableOptionContainer, draggableOptionsSectionComponent, maximumCapacityPerDropzoneComponent, enableOuterBorderComponent, specifyRowsAndColumnsComponent, additionalSettingsAccessibilitySectionComponent, styleAndLayoutCustomizationAccordionComponent } from "./components";
 import utilities from "../support/helpers/utilities";
 import constants from "../fixtures/constants";
 const css = Cypress.env('css');
@@ -56,7 +56,7 @@ const selectors = {
     rightArrowNavigationButton: () => cy.get('[class*="DragAndDropTablestyles__PaginationRightControl"]'),
 
     //Specify correct answer matrix
-    tableCellContainerSpecifyCorrectAnswerSection: () => cy.get('[class*="CellDropZonestyles__CellContainer"]'),
+    tableCellContainerSpecifyCorrectAnswerSection: () => cy.get('.classification-set-correct-answer-wrapper [class*="styles__CellContainer"]'),
     tableRowContainerSpecifyCorrectAnswerSection: () => cy.get('[class*="Matrixstyles__RowContainer"]'),
     leftArrowNavigationButtonSpecifyCorrectAnswerSection: () => cy.get('.classification-set-correct-answer-wrapper [aria-label="Left Pagination Button"]'),
     rightArrowNavigationButtonSpecifyCorrectAnswerSection: () => cy.get('.classification-set-correct-answer-wrapper [aria-label="Right Pagination Button"]'),
@@ -90,6 +90,9 @@ const selectors = {
     maxLimitInEachDropzoneHelpText: () => cy.get('[class*="Matrixstyles__MaxLimitWrapper"]'),
     dropzoneGridSpecifyCorrectAnswerSection: () => cy.get('[class*="Matrixstyles__TableWrapper"]'),
     dropzoneGridPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="Matrixstyles__TableWrapper"]'),
+
+    //Additional settings
+    layoutLabel: () => cy.get('[class*="Layoutstyles__SectionWrapper"]'),
 }
 
 const steps = {
@@ -921,11 +924,17 @@ const steps = {
         dragAndDropIntoCategoriesPage.leftArrowNavigationButton()
             .click();
     },
+
     clickOnLeftArrowNavigationButtonSpecifyCorrectAnswerSection: () => {
         dragAndDropIntoCategoriesPage.leftArrowNavigationButtonSpecifyCorrectAnswerSection()
             .click();
     },
 
+    clickOnLeftArrowNavigationButtonPreviewTab: () => {
+        dragAndDropIntoCategoriesPage.leftArrowNavigationButtonPreviewTab()
+            .click();
+    },
+
     clickOnRightArrowNavigationButton: () => {
         dragAndDropIntoCategoriesPage.rightArrowNavigationButton()
             .click();
@@ -936,6 +945,11 @@ const steps = {
             .click();
     },
 
+    clickOnRightArrowNavigationButtonPreviewTab: () => {
+        dragAndDropIntoCategoriesPage.rightArrowNavigationButtonPreviewTab()
+            .click();
+    },
+
     /**
      * @description Verify column is visible in the specify columns and rows section table
      * @param {number} columnIndex Index of the column
@@ -952,6 +966,14 @@ const steps = {
         utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.tableCellContainerSpecifyCorrectAnswerSection().eq(columnIndex), 'visible');
     },
 
+    /**
+   * @description Verify column is visible in the preview tab table
+   * @param {number} columnIndex Index of the column
+   */
+    verifyColumnIsVisibleInTablePreviewTab: (columnIndex) => {
+        utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.cellContainerPreviewTab().eq(columnIndex), 'visible');
+    },
+
     /**
      * @description Verify column is not visible in the specify columns and rows section table
      * @param {number} columnIndex Index of the column
@@ -1286,6 +1308,7 @@ const tests = {
     ...createQuestionBasePage.tests,
     ...additionalSettingsPanel.tests,
     ...additionalSettingsAccessibilitySectionComponent.tests,
+    ...styleAndLayoutCustomizationAccordionComponent.tests,
     verifyContentsOfSpecifyCorrectAnswerSection: (scoringType) => {
         it(`When the user selects ${scoringType} from scoring type dropdown then the specify correct answer sections should be displayed`, () => {
             dragAndDropIntoCategoriesPage.steps.verifyTableCellPropertySpecifyCorrectAnswer(0, 'None');

package/cypress/pages/essayResponsePage.js

@@ -804,7 +804,15 @@ const steps = {
         categoryNamesArray.forEach((categoryTooltipName) => {
             essayResponsePage.equationEditorSectionCategories()
                 .contains(categoryTooltipName, { matchCase: false })
-                .verifyTooltip(categoryTooltipName);
+                .trigger('mouseover')
+            commonComponents.tooltipText()
+                .and('be.visible')
+                .should('have.text', categoryTooltipName)
+            essayResponsePage.equationEditorSectionCategories()
+                .contains(categoryTooltipName, { matchCase: false })
+                .trigger('mouseout')
+            commonComponents.tooltipText()
+                .should('not.exist');
         });
     },
 

package/cypress/pages/feedbackScalePage.js

@@ -97,7 +97,7 @@ const selectors = {
     scoringHelpText: () => cy.get('[class*="ScoringText"]'),
     studentViewSettingsLabel: () => cy.get('[class*="StudentViewSettingsLabel"]'),
     legendAccordionWrapper: () => cy.get('[class*="feedback-layout-accordion"]'),
-    additionalSettingsAcknowledgementsLabel:()=> cy.get('.additional-settings-label').eq(1)
+    additionalSettingsAcknowledgementsLabel:()=> cy.get('.additional-settings-container [class*="InlineRichTextComponentstyles__LabelWarpper"]')
 }
 
 const steps = {

package/cypress/pages/fillInTheGapsDragAndDropPage.js

@@ -1,7 +1,7 @@
 import constants from "../fixtures/constants";
 import utilities from "../support/helpers/utilities";
 const css = Cypress.env('css');
-import { createQuestionBasePage, optionsWrapperComponent, autoScoredScoringPreviewTab, scoringSectionBaseEditTab, questionInputFieldComponent, fillInTheGapsDragAndDropCommonComponents, correctIncorrectAnswerLabelComponent, questionInstructionsComponent, autoScoredStudentViewSettings, ckEditorToolbar, equationEditorFlyout, draggableOptionContainer, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, commonComponents, draggableOptionsSectionComponent, studentViewSettingsLabelComponent, randomizeOptionsComponent, enableOuterBorderComponent, allowMultipleInstancesOfSameDraggableOptionComponent, additionalSettingsPanel, responseAreaSettingsPopupComponent, styleAndLayoutCustomizationAccordionComponent, figCommonStyleAndLayoutComponent, draggableOptionsStyleAndLayoutComponent } from "./components"
+import { createQuestionBasePage, optionsWrapperComponent, autoScoredScoringPreviewTab, scoringSectionBaseEditTab, questionInputFieldComponent, fillInTheGapsDragAndDropCommonComponents, correctIncorrectAnswerLabelComponent, questionInstructionsComponent, autoScoredStudentViewSettings, ckEditorToolbar, equationEditorFlyout, draggableOptionContainer, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, commonComponents, draggableOptionsSectionComponent, studentViewSettingsLabelComponent, randomizeOptionsComponent, enableOuterBorderComponent, allowMultipleInstancesOfSameDraggableOptionComponent, additionalSettingsPanel, responseAreaSettingsPopupComponent, gradingViewEnumerationComponent, ariaLabelSectionComponent, styleAndLayoutCustomizationAccordionComponent, figCommonStyleAndLayoutComponent, draggableOptionsStyleAndLayoutComponent } from "./components"
 
 //TODO update option container selectors when https://redmine.zeuslearning.com/issues/563159 is resolved
 const selectors = {
@@ -20,6 +20,8 @@ const selectors = {
     ...enableOuterBorderComponent,
     ...responseAreaSettingsPopupComponent,
     ...additionalSettingsPanel,
+    ...gradingViewEnumerationComponent,
+    ...ariaLabelSectionComponent,
     ...styleAndLayoutCustomizationAccordionComponent,
     ...figCommonStyleAndLayoutComponent,
     ...draggableOptionsStyleAndLayoutComponent,
@@ -51,6 +53,7 @@ const selectors = {
     optionContainerOptionsPreviewTab: () => cy.get('.no-split-pane-wrapper .draggable-selected-item'),
     dropzoneWrapperPreviewTab: () => cy.get('.label-image-with-dnd-canvas-wrapper .cell'),
     dropzoneNumeration: () => cy.get('[class*="DroppableHotspotstyle__NumerationDiv"]'),
+    correctAnswerSectionWithoutEnumerationWrapper: () => cy.get('[class*="ClozeWithDragAndDropstyles__CorrectAnswers"] .question-text-wrapper'),
     //Additional settings
     accessibilityLabel: () => cy.get('[class*="Accessibilitystyles__AccessibilityLabelWrapper"]'),
     flagNonAccessibleCheckbox: () => cy.get('[data-ngie-testid="response-option-checkbox"] input'),
@@ -79,6 +82,8 @@ const steps = {
     ...allowMultipleInstancesOfSameDraggableOptionComponent.steps,
     ...additionalSettingsPanel.steps,
     ...responseAreaSettingsPopupComponent.steps,
+    ...gradingViewEnumerationComponent.steps,
+    ...ariaLabelSectionComponent.steps,
     ...styleAndLayoutCustomizationAccordionComponent.steps,
     ...figCommonStyleAndLayoutComponent.steps,
     ...draggableOptionsStyleAndLayoutComponent.steps,
@@ -634,8 +639,8 @@ const steps = {
      */
     verifyOptionTextNotWordWrappedInDropzoneSpecifyCorrectAnswerSection: (dropzoneIndex) => {
         utilities.getNthElement(fillInTheGapsDragAndDropPage.dropzoneSpecifyCorrectAnswerSection(), dropzoneIndex)
-            .find('.item-content-container')
-            .should('not.have.class', 'word-wrap');
+            .find('.question-text-wrapper')
+            .should('not.have.class', 'word-wrap-area');
     },
 
     /**
@@ -644,8 +649,8 @@ const steps = {
      */
     verifyOptionTextIsWordWrappedInDropzoneSpecifyCorrectAnswerSection: (dropzoneIndex) => {
         utilities.getNthElement(fillInTheGapsDragAndDropPage.dropzoneSpecifyCorrectAnswerSection(), dropzoneIndex)
-            .find('.item-content-container')
-            .should('have.class', 'word-wrap');
+            .find('.question-text-wrapper')
+            .should('have.class', 'word-wrap-area');
     },
 
     verifyDropzoneHeightWhenLongTextIsDroppedInSpecifyCorrectAnswerSection: () => {
@@ -671,8 +676,8 @@ const steps = {
      */
     verifyOptionTextNotWordWrappedInDropzonePreviewTab: (dropzoneIndex) => {
         utilities.getNthElement(fillInTheGapsDragAndDropPage.dropzonePreviewTab(), dropzoneIndex)
-            .find('.item-content-container')
-            .should('not.have.class', 'word-wrap');
+            .find('.question-text-wrapper')
+            .should('not.have.class', 'word-wrap-area');
     },
 
     /**
@@ -681,8 +686,8 @@ const steps = {
      */
     verifyOptionTextIsWordWrappedInDropzonePreviewTab: (dropzoneIndex) => {
         utilities.getNthElement(fillInTheGapsDragAndDropPage.dropzonePreviewTab(), dropzoneIndex)
-            .find('.item-content-container')
-            .should('have.class', 'word-wrap');
+            .find('.question-text-wrapper')
+            .should('have.class', 'word-wrap-area');
     },
 
     verifyDropzoneHeightWhenLongTextIsDroppedInPreviewTab: () => {
@@ -734,11 +739,85 @@ const steps = {
         utilities.hoverAwayFromElement();
     },
 
+    /**
+     * Verifies that the partial equal weights points per response score is as expected.
+     * @param {string} pointsPerResponse - The expected points per response score text.
+     */
     verifyPartialEqualWeightsPointsPerResponseScore: (pointsPerResponse) => {
         fillInTheGapsDragAndDropPage.partialEqualWeightsPointsPerResponseScore()
             .should('have.text', pointsPerResponse);
     },
 
+    verifyDropzoneNumerationNotExists: () => {
+        utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.dropzoneNumeration(), 'notExist');
+    },
+
+    /**
+     * Verifies the enumeration of dropzones in the preview tab against the provided array.
+     * @param {Array<string>} enumerationArray - The array of expected enumerations.
+     * @example - verifyDropzoneEnumeration(['1', '2', '3']);
+     */
+    verifyDropzoneEnumeration: (enumerationArray) => {
+        utilities.verifyElementCount(fillInTheGapsDragAndDropPage.dropzonePreviewTab(), enumerationArray.length);
+        enumerationArray.forEach((option, index) => {
+            fillInTheGapsDragAndDropPage.dropzonePreviewTab()
+                .eq(index)
+                .within(() => {
+                    utilities.verifyTextContent(fillInTheGapsDragAndDropPage.dropzoneNumeration(), `${option}`);
+                });
+        });
+    },
+
+    /**
+     * Verifies the enumeration of correct answer responses against the provided array.
+     * @param {Array<string>} enumerationArray - The array of expected correct answer enumerations.
+     * @example - verifyCorrectAnswerResponsesEnumeration(['A', 'B', 'C']);
+     */
+    verifyCorrectAnswerResponsesEnumeration: (enumerationArray) => {
+        utilities.verifyElementCount(fillInTheGapsDragAndDropCommonComponents.correctAnswersOptions(), enumerationArray.length);
+        enumerationArray.forEach((option, index) => {
+            utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsDragAndDropCommonComponents.correctAnswersNumeration(), index), `${option}`);
+        });
+    },
+
+    /**
+     * Verifies the correct answer responses without enumeration.
+     * @param {string[]} correctAnswerArray - An array of correct answer responses to verify.
+     * @returns {void}
+     */
+    verifyCorrectAnswerResponsesWithoutEnumeration: (correctAnswerArray) => {
+        utilities.verifyElementCount(fillInTheGapsDragAndDropCommonComponents.correctAnswerResponseWrapperWithoutEnumeration(), correctAnswerArray.length);
+        correctAnswerArray.forEach((correctAnswer, index) => {
+            utilities.getNthElement(fillInTheGapsDragAndDropCommonComponents.correctAnswerResponseWrapperWithoutEnumeration(), index)
+                .within(($element) => {
+                    utilities.verifyElementVisibilityState(autoScoredScoringPreviewTab.correctIcon(), 'visible');
+                    utilities.verifyInnerText(cy.wrap($element), correctAnswer);
+                })
+        });
+    },
+
+    /**
+     * Verifies the 'aria-label' attribute of a dropzone element in the preview tab.
+     * @param {number} inputFieldIndex - The index of the dropzone element to verify.
+     * @param {string} ariaLabel - The expected value of the 'aria-label' attribute.
+     */
+    verifyDropzoneAriaLabelPreviewTab: (inputFieldIndex, ariaLabel) => {
+        fillInTheGapsDragAndDropPage.dropzonePreviewTab()
+            .eq(inputFieldIndex)
+            .should('have.attr', 'aria-label', ariaLabel)
+    },
+
+    /**
+     * Verifies the 'aria-label' attribute of a dropzone element in the 'Specify Correct Answer' section.
+     * @param {number} inputFieldIndex - The index of the dropzone element to verify.
+     * @param {string} ariaLabel - The expected value of the 'aria-label' attribute.
+     */
+    verifyDropzoneAriaLabelSpecifyCorrectAnswerSection: (inputFieldIndex, ariaLabel) => {
+        fillInTheGapsDragAndDropPage.dropzoneSpecifyCorrectAnswerSection()
+            .eq(inputFieldIndex)
+            .should('have.attr', 'aria-label', ariaLabel)
+    },
+
     /**
      * Verifies the placement of the draggable option panel.
      * @param {('Bottom' | 'Top' | 'Left' | 'Right')} panelPlacement - The placement of the draggable option panel. 
@@ -805,10 +884,10 @@ const steps = {
     },
 
     /**
-     * Verifies the border color of a draggable option.
-     * @param {number} optionIndex - The index of the draggable option.
-     * @param {string} borderValue - The expected border value of the draggable option.
-     */
+      * Verifies the border color of a draggable option.
+      * @param {number} optionIndex - The index of the draggable option.
+      * @param {string} borderValue - The expected border value of the draggable option.
+      */
     verifyDraggableOptionBorderColor: (optionIndex, borderValue) => {
         utilities.verifyCSS(utilities.getNthElement(draggableOptionContainer.draggableOption(), optionIndex), {
             'border': borderValue
@@ -816,22 +895,22 @@ const steps = {
     },
 
     /**
-     * Verifies the border style of a draggable option.
-     * @param {number} optionIndex - The index of the draggable option.
-     * @param {string} borderStyle - The expected border style of the draggable option.
-     */
+      * Verifies the border style of the dropzone at the specified index.
+      * @param {number} optionIndex - The index of the response area to verify.
+      * @param {string} borderStyle - The expected border style value in CSS format.
+      */
     verifyDraggableOptionBorderStyle: (optionIndex, borderStyle) => {
         const styleName = borderStyle.toLowerCase();
-        utilities.verifyCSS(utilities.getNthElement(draggableOptionContainer.draggableOption(), optionIndex), {
+        utilities.verifyCSS(utilities.getNthElement(fillInTheGapsDragAndDropPage.draggableOption(), optionIndex), {
             'border-style': styleName
         });
     },
 
     /**
-     * Verifies the drag handle icon of the draggable options.
-     * @param {('Default' | 'Arrows' | 'None')} dragIcon - The type of drag icon.
-     * @throws {Error} If an incorrect drag icon is provided.
-     */
+      * Verifies the drag handle icon of the draggable options.
+      * @param {('Default' | 'Arrows' | 'None')} dragIcon - The type of drag icon.
+      * @throws {Error} If an incorrect drag icon is provided.
+      */
     verifyDraggableOptionDragHandleIcon: (dragIcon) => {
         draggableOptionContainer.draggableOption()
             .each(($element) => {
@@ -868,10 +947,10 @@ const steps = {
     },
 
     /**
-     * Verifies the border color of the dropzone at the specified index.
-     * @param {number} dropzoneIndex - The index of the response area to verify.
-     * @param {string} borderValue - The expected border color value in CSS format.
-     */
+      * Verifies the border color of the dropzone at the specified index.
+      * @param {number} dropzoneIndex - The index of the response area to verify.
+      * @param {string} borderValue - The expected border color value in CSS format.
+      */
     verifyDropzoneBorderColor: (dropzoneIndex, borderValue) => {
         utilities.verifyCSS(utilities.getNthElement(fillInTheGapsDragAndDropPage.dropzonePreviewTab(), dropzoneIndex), {
             'border': borderValue
@@ -879,10 +958,10 @@ const steps = {
     },
 
     /**
-     * Verifies the border style of the dropzone at the specified index.
-     * @param {number} dropzoneIndex - The index of the response area to verify.
-     * @param {string} borderStyle - The expected border style value in CSS format.
-     */
+      * Verifies the border style of the dropzone at the specified index.
+      * @param {number} dropzoneIndex - The index of the response area to verify.
+      * @param {string} borderStyle - The expected border style value in CSS format.
+      */
     verifyDropzoneBorderStyle: (dropzoneIndex, borderStyle) => {
         const styleName = borderStyle.toLowerCase();
         utilities.verifyCSS(utilities.getNthElement(fillInTheGapsDragAndDropPage.dropzonePreviewTab(), dropzoneIndex), {
@@ -909,6 +988,8 @@ const tests = {
     ...questionInstructionsComponent.tests,
     ...questionInputFieldComponent.tests,
     ...additionalSettingsPanel.tests,
+    ...gradingViewEnumerationComponent.tests,
+    ...ariaLabelSectionComponent.tests,
     ...styleAndLayoutCustomizationAccordionComponent.tests,
     ...figCommonStyleAndLayoutComponent.tests,
     ...draggableOptionsStyleAndLayoutComponent.tests,

package/cypress/pages/matchingPage.js

@@ -75,6 +75,7 @@ const selectors = {
     correctAnswersOptions: () => cy.get('.match-list-drag-and-drop .question-text-wrapper'),
     correctAnswersWrapper: () => cy.get('.match-list-drag-and-drop'),
     correctAnswersOptionContainer: () => cy.get('.draggable-selected-option'),
+    gradingViewOption: () => cy.get('..item-content-wrapper'),
     questionBorderPreviewTab: () => cy.get('[class*="ClozeWithDragAndDropstyles__WrapperDiv"]'),
     correctAnswerResponseWrapperWithoutEnumeration: () => cy.get('.answer-status-response-preview-wrapper  .item-wrapper'),
     correctAnswerTextWithoutEnumeration: () => cy.get('.answer-status-response-preview-wrapper  .item-wrapper'),
@@ -942,7 +943,7 @@ const steps = {
     },
 
     verifyGradingViewOptionDisabled: () => {
-        matchingPage.correctAnswersOptionContainer()
+        matchingPage.gradingViewOption()
             .should('have.css', 'pointer-events', 'none');
     },
 

package/cypress/pages/multipleSelectionGridPage.js

@@ -1,5 +1,5 @@
 import utilities from "../support/helpers/utilities";
-import { createQuestionBasePage, questionInstructionsComponent, gridQuestionCommonComponent, scoringSectionBaseEditTab, autoScoredScoringPreviewTab, correctIncorrectAnswerLabelComponent, autoScoredStudentViewSettings, specifyRowsAndColumnsComponent, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, studentViewSettingsLabelComponent, randomizeOptionsComponent, commonComponents, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent } from "./components";
+import { createQuestionBasePage, questionInstructionsComponent, gridQuestionCommonComponent, scoringSectionBaseEditTab, autoScoredScoringPreviewTab, correctIncorrectAnswerLabelComponent, autoScoredStudentViewSettings, specifyRowsAndColumnsComponent, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, studentViewSettingsLabelComponent, randomizeOptionsComponent, commonComponents, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent, styleAndLayoutCustomizationAccordionComponent } from "./components";
 const css = Cypress.env('css');
 
 const selectors = {
@@ -31,6 +31,7 @@ const steps = {
     ...randomizeOptionsComponent.steps,
     ...commonComponents.steps,
     ...additionalSettingsPanel.steps,
+    ...styleAndLayoutCustomizationAccordionComponent.steps,
     /**
      * Modifies the property of an option cell in the grid for checkbox settings.
      * @param {Object} position - The position of the option cell.
@@ -154,6 +155,7 @@ const tests = {
     ...commonComponents.tests,
     ...additionalSettingsPanel.tests,
     ...additionalSettingsAccessibilitySectionComponent.tests,
+    ...styleAndLayoutCustomizationAccordionComponent.tests,
     /**
      * Verifies the contents and functionality of the 'Specify correct answer' accordion for multiple selection questions.
      * @param {{'Correct' | 'Alternative'}} accordionName - The name of the accordion to be used in the validation.
@@ -242,7 +244,7 @@ const tests = {
             optionCellPropertyMenuOptions.forEach((cellType, index) => {
                 utilities.verifyInnerText(utilities.getNthElement(multipleSelectionGridPage.editCellPropertyListOption(), index), cellType);
             });
-            multipleSelectionGridPage.steps.verifyCellPropertyMenuOptionIsSelected(optionCellPropertyMenuOptions[2]);
+            multipleSelectionGridPage.steps.verifyCellPropertyMenuOptionIsSelected(optionCellPropertyMenuOptions[0]);
         });
 
         it('CSS of default option type dropdown in active state', { tags: 'css' }, () => {

package/cypress/pages/shortTextResponsePage.js

@@ -829,7 +829,7 @@ const steps = {
 
     verifyAriaLabelAddedResponseFieldPreviewTab: (text) => {
         shortTextResponsePage.previewTabResponseField()
-            .should('have.attr', 'aria-label', `${text}   Maximum 50 characters`);
+            .should('have.attr', 'aria-label', `${text}   `);
     },
 
     verifyAnswerInputFieldHasDefaultAriaLabelInSpecifyCorrectAnswerSection: () => {
@@ -839,7 +839,7 @@ const steps = {
 
     verifyResponseFieldHasDefaultAriaLabelInPreviewTab: () => {
         shortTextResponsePage.previewTabResponseField()
-            .should('have.attr', 'aria-label', 'Enter your response to the question here   Maximum 50 characters');
+            .should('have.attr', 'aria-label', 'Enter your response to the question here   ');
     },
 
     checkFlagThisItemNonAccessibleCheckbox: () => {

package/cypress/pages/singleSelectionGridPage.js

@@ -1,5 +1,5 @@
 import utilities from "../support/helpers/utilities";
-import { createQuestionBasePage, questionInstructionsComponent, gridQuestionCommonComponent, scoringSectionBaseEditTab, ckEditorToolbar, equationEditorFlyout, autoScoredScoringPreviewTab, correctIncorrectAnswerLabelComponent, autoScoredScoringSectionMultiResponseType, autoScoredStudentViewSettings, specifyRowsAndColumnsComponent, autoScoredSpecifyCorrectAnswerSection, randomizeOptionsComponent, studentViewSettingsLabelComponent, commonComponents, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent } from "./components";
+import { createQuestionBasePage, questionInstructionsComponent, gridQuestionCommonComponent, scoringSectionBaseEditTab, ckEditorToolbar, equationEditorFlyout, autoScoredScoringPreviewTab, correctIncorrectAnswerLabelComponent, autoScoredScoringSectionMultiResponseType, autoScoredStudentViewSettings, specifyRowsAndColumnsComponent, autoScoredSpecifyCorrectAnswerSection, randomizeOptionsComponent, studentViewSettingsLabelComponent, commonComponents, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent, styleAndLayoutCustomizationAccordionComponent } from "./components";
 const css = Cypress.env('css');
 
 const selectors = {
@@ -35,6 +35,7 @@ const steps = {
     ...randomizeOptionsComponent.steps,
     ...commonComponents.steps,
     ...additionalSettingsPanel.steps,
+    ...styleAndLayoutCustomizationAccordionComponent.steps,
     /**
      * Modifies the property of an option cell in the grid for radio button settings.
      * @param {Object} position - The position of the option cell.
@@ -158,6 +159,7 @@ const tests = {
     ...createQuestionBasePage.tests,
     ...additionalSettingsPanel.tests,
     ...additionalSettingsAccessibilitySectionComponent.tests,
+    ...styleAndLayoutCustomizationAccordionComponent.tests,
     /**
      * Verifies the contents and functionality of the 'Specify correct answer' accordion for multiple selection questions.
      * @param {{'Correct' | 'Alternative'}} accordionName - The name of the accordion to be used in the validation.
@@ -222,7 +224,7 @@ const tests = {
             optionCellPropertyMenuOptions.forEach((cellType, index) => {
                 utilities.verifyInnerText(utilities.getNthElement(singleSelectionGridPage.editCellPropertyListOption(), index), cellType);
             });
-            singleSelectionGridPage.steps.verifyCellPropertyMenuOptionIsSelected(optionCellPropertyMenuOptions[2]);
+            singleSelectionGridPage.steps.verifyCellPropertyMenuOptionIsSelected(optionCellPropertyMenuOptions[0]);
         });
 
         it('CSS of default option type dropdown in active state', { tags: 'css' }, () => {

package/cypress/pages/textEntryMathPage.js

@@ -10,6 +10,7 @@ const selectors = {
     ...createQuestionBasePage,
     ...autoScoredScoringSectionMultiResponseType,
     ...autoScoredSpecifyCorrectAnswerSection,
+    ...commonComponents,
 
     addStructureTab: () => cy.get('[data-ngie-testid="add-structure-tab"]'),
     responseToken: () => cy.get('.cke_button__addresponse'),

package/cypress/pages/textEntryMathWithImagePage.js

@@ -15,7 +15,7 @@ const selectors = {
     canvasInPreviewTab: () => cy.get('[class*="PreviewTabstyles__ContentWrapper"] .image-container'),
     textAreaPreviewTab: () => cy.get('.label-image-with-text-preview [class*="TextBoxContainer"]'),
     tickIcon: () => cy.get('.add-background-tick-icon-wrapper [data-name*="Rectangle"]'),
-    responseFieldWrapperPreviewTab: () => cy.get('.cloze-response-wrapper'),
+    responseFieldWrapperPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="__PointerWrapper"]'),
     responseFieldNumerationPreviewTab: () => cy.get('.image-container .response-input-adornment')
 }
 

package/cypress/pages/uploadResponsePage.js

@@ -298,11 +298,9 @@ const steps = {
             });
     },
 
-    verifyEditDisplayTextPopupInputFieldAndSelectedText: () => {
+    verifyEditDisplayTextPopupInputField: () => {
         uploadResponsePage.editDisplayTextPopupInputField()
             .should('have.value', 'image.png')
-            .parent()
-            .and('have.class', 'Mui-focused');
     },
 
     clearEditDisplayTextPopupInputField: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itemengine-cypress-automation",
-  "version": "1.0.202",
+  "version": "1.0.203",
   "description": "",
   "main": "index.js",
   "scripts": {