itemengine-cypress-automation 1.0.204-graphQLUpdate-b0c0036.0 → 1.0.204

package/cypress/pages/components/autoScoredScoringPreviewTab.js

@@ -14,7 +14,7 @@ const selectors = {
     correctIncorrectAnswerLabel: () => cy.get('.answer-label-text'),
     checkAnswerButton: () => cy.get('.check-answer-and-status-wrapper button'),
     correctIncorrectAnswerBorder: () => cy.get('[class*="question-preview-wrapper"] [class*="correct-answer-border"]'),
-    scoringTypeLabelPreviewTab: () => cy.get('.score-text-wrapper')
+    scoringTypeLabelPreviewTab: () => cy.get('[class*="ScoringPreviewBandstyles__ScoreWrapper"]')
 }
 
 const steps = {

package/cypress/pages/components/autoScoredScoringSectionMultiResponseType.js

@@ -300,6 +300,7 @@ const steps = {
             case 'specify points for each incorrect answer':
             case 'specify points for each incorrect dropdown':
             case 'specify points for each incorrect dot plot':
+            case 'specify points for each incorrect text container':
                 autoScoredScoringSectionMultiResponseType.specifyPointsForEachIncorrectOptionRadioButton()
                     .click();
                 break;

package/cypress/pages/components/autoScoredSpecifyCorrectAnswerSection.js

@@ -356,7 +356,7 @@ const tests = {
                 .within(() => {
                     utilities.verifyElementVisibilityState(scoringSectionBaseEditTab.pleaseEnterPointsErrorMessage(), 'notExist');
                 });
-            if (questionType != 'list ordering' && questionType != 'short text response' && questionType != 'text entry math' && questionType != 'text selection') {
+            if (questionType != 'list ordering' && questionType != 'short text response' && questionType != 'text entry math' && questionType != 'text selection' && questionType != 'fill in the gaps with text' && questionType != 'fill in the gaps over image text') {
                 steps.verifySpecifyCorrectAnswerErrorMessage();
             }
             else if (questionType === 'short text response' || questionType === 'fill in the gaps with text' || questionType === 'fill in the gaps over image text' || questionType === 'text entry math') {

package/cypress/pages/components/backgroundImageUploadComponent.js

@@ -11,7 +11,7 @@ const selectors = {
     fileNameLabel: () => cy.get('[class*="__LabelWrapper"][class*="Upload"]').eq(1),
     fileUploadSection: () => cy.get('.file-input-wrapper'),
     chooseFileButton: () => cy.get('.choose-file-button'),
-    noFileChosenLabel: () => cy.get('[aria-label="No file chosen"]'),
+    noFileChosenLabel: () => cy.get('[class*="UploadImagestyles__SelectedFile"] [class*="UploadImagestyles__FileLabelWrapper"]'),
     uploadImageProgressBar: () => cy.get('[class*="ProgressBar"]'),
     uploadedFileNameLabel: () => cy.get('[class*="styles__SelectedFileWithIcon"][class*="Upload"]'),
     deleteImageIcon: () => cy.get('[aria-label*="Delete image"]'),

package/cypress/pages/components/chartsCommonComponent.js

@@ -169,6 +169,15 @@ const steps = {
             });
     },
 
+    /**
+     * @description Verifies the graph title
+     * @param {string} label - The expected title of the graph.
+     */
+    verifyGraphTitleInSelectChartType: (label) => {
+        utilities.verifyElementVisibilityState(chartsCommonComponent.selectChartTypeGraphTitleButton(), 'visible');
+        utilities.verifyInnerText(chartsCommonComponent.selectChartTypeGraphTitleButton(), label);
+    },
+
     /**
      * @description Verifies the graph title
      * @param {string} label - The expected title of the graph.
@@ -211,7 +220,7 @@ const tests = {
     verifyToleranceThresholdLabelAndInputField: () => {
         it('Tolerance/Threshold label and input field should be displayed and by default input field should be empty', () => {
             utilities.verifyElementVisibilityState(chartsCommonComponent.toleranceThresholdLabel(), 'visible');
-            utilities.verifyInnerText(chartsCommonComponent.toleranceThresholdLabel(), 'Tolerance/Threshold');
+            utilities.verifyInnerText(chartsCommonComponent.toleranceThresholdLabel(), 'Tolerance');
             utilities.verifyElementVisibilityState(chartsCommonComponent.toleranceThresholdInputField(), 'visible');
             utilities.verifyInnerText(chartsCommonComponent.toleranceThresholdInputField(), '');
         });

package/cypress/pages/components/customizeMathCharacterComponent.js

@@ -59,7 +59,12 @@ const steps = {
                         customizeMathCharacterComponent.mathCharactersPreviewPopupSymbol()
                             .eq(index)
                             .find('path')
-                            .should('have.attr', 'data-name', `${symbol}`);
+                            .invoke('attr', 'data-name')
+                            .then((dataName) => {
+                                let newDataName = dataName.trim();
+                                newDataName = newDataName.toLowerCase();
+                                expect(newDataName).to.equal(symbol.toLowerCase());
+                            });
                     });
                     utilities.verifyElementCount(customizeMathCharacterComponent.mathCharactersPreviewPopupSymbol(), category.symbols.length);
                 });
@@ -109,10 +114,10 @@ const steps = {
             .click();
     },
 
-     /**
-     * This function verifies the the math category characters are not selectedF
-     * @param {string} categoryName math category characters aria label
-     */
+    /**
+    * This function verifies the the math category characters are not selectedF
+    * @param {string} categoryName math category characters aria label
+    */
     verifyMathCharacterCategoryTileIsNotSelected: (categoryName) => {
         customizeMathCharacterComponent.mathCharacterTiles(categoryName)
             .should('have.attr', 'data-aria-pressed', 'false')

package/cypress/pages/components/fillInTheGapsDropdownCommonComponent.js

@@ -334,7 +334,7 @@ const steps = {
     expandAndCollapseDropdownInSpecifyCorrectAnswerSection: (dropdownIndex) => {
         utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownSpecifyCorrectAnswerSection(), dropdownIndex)
             .click();
-        utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.dropdownListOptions(), 'visible');
+        utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.dropdownListOptions(), 'exist');
         cy.get('body')
             .click({ position: 'center' });
     },
@@ -729,7 +729,7 @@ const tests = {
         });
 
         it('When the user selects any option from the dropdown, then error message should disappear and that option should be displayed on the dropdown', () => {
-            fillInTheGapsDropdownCommonComponent.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, optionsForDropdown[0]);
+            fillInTheGapsDropdownCommonComponent.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, 'Flower');
             commonComponents.steps.verifyErrorMessageIsNotDisplayed();
         });
 

package/cypress/pages/components/fillInTheGapsTextCommonComponent.js

@@ -999,11 +999,12 @@ const tests = {
             commonComponents.steps.verifyErrorMessageIsNotDisplayed();
         });
 
-        it('When user should not be able to add limit more than 50 inside minimum and maximum limit input field', () => {
+        it('When user enters minimum limit more than maximum limit then error messages should be displayed and when user enters equal value then the error message should disappear', () => {
             fillInTheGapsTextCommonComponent.steps.setMinimumLimit(60);
-            fillInTheGapsTextCommonComponent.steps.verifyMinimumLimit(6);
+            utilities.verifyInnerText(commonComponents.errorMessage().eq(0), 'Error: Minimum limit must be less than or equal to Maximum limit.');
+            utilities.verifyInnerText(commonComponents.errorMessage().eq(1), 'Error: Maximum limit must be greater than or equal to Minimum limit.');
             fillInTheGapsTextCommonComponent.steps.setMaximumLimit(60);
-            fillInTheGapsTextCommonComponent.steps.verifyMaximumLimit(6);
+            commonComponents.steps.verifyErrorMessageIsNotDisplayed();
         });
     },
 

package/cypress/pages/components/gridQuestionCommonComponent.js

@@ -1144,7 +1144,7 @@ const steps = {
     verifyNumerationStyleOptionSelected: (index) => {
         gridQuestionCommonComponent.numerationStyleOptions()
             .eq(index)
-            .should('have.attr', 'aria-selected', 'true')
+            .should('have.attr', 'aria-pressed', 'true')
     },
 
     /**
@@ -1251,7 +1251,7 @@ const steps = {
      */
     verifyOptionAlignmentInCellButtonSelected: (option) => {
         gridQuestionCommonComponent.optionAlignmentInCellButton(option)
-            .should('have.attr', 'aria-selected', 'true');
+            .should('have.attr', 'aria-pressed', 'true');
     },
 
     /**
@@ -1586,14 +1586,14 @@ const steps = {
     verifyColumnDimensionsSpecifyCorrectAnswer: (dimension) => {
         switch (dimension) {
             case 'Auto':
-                gridQuestionCommonComponent.tableRowHeadersSpecifyCorrectAnswerSection()
+                gridQuestionCommonComponent.tableCellWrapperSpecifyCorrectAnswerSection()
                     .each(($el) => {
                         cy.wrap($el)
                             .should('not.have.css', 'width', '225px');
                     });
                 break;
             case 'Custom':
-                gridQuestionCommonComponent.tableRowHeadersSpecifyCorrectAnswerSection()
+                gridQuestionCommonComponent.tableCellWrapperSpecifyCorrectAnswerSection()
                     .each(($el) => {
                         cy.wrap($el)
                             .should('have.css', 'width', '225px');
@@ -1611,14 +1611,14 @@ const steps = {
     verifyColumnDimensionsPreviewTab: (dimension) => {
         switch (dimension) {
             case 'Auto':
-                gridQuestionCommonComponent.tableRowHeadersPreviewTab()
+                gridQuestionCommonComponent.tableCellWrapperPreviewTab()
                     .each(($el) => {
                         cy.wrap($el)
                             .should('not.have.css', 'width', '225px');
                     });
                 break;
             case 'Custom':
-                gridQuestionCommonComponent.tableRowHeadersPreviewTab()
+                gridQuestionCommonComponent.tableCellWrapperPreviewTab()
                     .each(($el) => {
                         cy.wrap($el)
                             .should('have.css', 'width', '225px');
@@ -1679,13 +1679,13 @@ const steps = {
     },
 
     verifyTableColumnWidthSpecifyCorrectAnswer: (index, width) => {
-        gridQuestionCommonComponent.tableCellSpecifyCorrectAnswerSection()
+        gridQuestionCommonComponent.tableCellWrapperSpecifyCorrectAnswerSection()
             .eq(index)
             .should('have.css', 'width', `${width}px`);
     },
 
     verifyTableColumnDoeNotHaveSpecifiedWidthSpecifyCorrectAnswer: (index, width) => {
-        gridQuestionCommonComponent.tableCellSpecifyCorrectAnswerSection()
+        gridQuestionCommonComponent.tableCellWrapperSpecifyCorrectAnswerSection()
             .eq(index)
             .should('not.have.css', 'width', `${width}px`);
     },
@@ -1707,13 +1707,13 @@ const steps = {
     },
 
     verifyTableColumnWidthPreviewTab: (index, width) => {
-        gridQuestionCommonComponent.tableCellPreviewTab()
+        gridQuestionCommonComponent.tableCellWrapperPreviewTab()
             .eq(index)
             .should('have.css', 'width', `${width}px`);
     },
 
     verifyTableColumnDoeNotHaveSpecifiedWidthPreviewTab: (index, width) => {
-        gridQuestionCommonComponent.tableCellPreviewTab()
+        gridQuestionCommonComponent.tableCellWrapperPreviewTab()
             .eq(index)
             .should('not.have.css', 'width', `${width}px`);
     },
@@ -1858,7 +1858,7 @@ const steps = {
 
     checkApplyToFirstColumnRadioButton: () => {
         gridQuestionCommonComponent.applyToFirstColumnRadioButton()
-            .click()
+            .dblclick()
             .should('be.checked');
     },
 

package/cypress/pages/components/imageCanvasComponent.js

@@ -107,7 +107,7 @@ const steps = {
         utilities.verifyElementVisibilityState(imageCanvasComponent.canvasImage(), 'visible');
         utilities.verifyElementVisibilityState(backgroundImageUploadComponent.uploadImageProgressBar(), 'notExist');
         //Note: wait is added here for the image to fully load, else the first two response areas gets overlapped
-        cy.wait(2000);
+        cy.wait(5000);
     },
 
     verifyImageIsUploadedInPreviewTab: () => {
@@ -445,7 +445,7 @@ const steps = {
                 case 'top right':
                     return { top: '-19px', left: '-31px' };
                 case 'top':
-                    return { top: '-22.5px', left: '-23.5px' };
+                    return { top: '-22.5px', left: '-25.5px' };
                 case 'top left':
                     return { top: '-27px', left: '-24px' };
                 case 'left':

package/cypress/pages/components/layoutSectionComponent.js

@@ -58,34 +58,34 @@ const selectors = {
     numberLineNumberLineSection: () => cy.get('.number-line-grid-setting .ngie-jxgbox svg'),
     numberLineAxisNumberLineSection: () => cy.get('.number-line-grid-setting .ngie-jxgbox svg line'),
     numberLineTitleNumberLineSection: () => cy.get('[class*="LineGraphComponentsstyles__TitleContainer"]'),
-    minLabel: () => cy.get('[class*="LineGraphComponentsstyles__GraphRightLeft"] [class*="LineGraphComponentsstyles__CustomInputFieldLabel"]').eq(0),
-    minInputField: () => cy.get('[class*="LineGraphComponentsstyles__GraphRightLeft"] input').eq(0),
-    maxLabel: () => cy.get('[class*="LineGraphComponentsstyles__GraphRightLeft"] [class*="LineGraphComponentsstyles__CustomInputFieldLabel"]').eq(1),
-    maxInputField: () => cy.get('[class*="LineGraphComponentsstyles__GraphRightLeft"] input').eq(1),
-    intervalLabel: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [aria-labelledby="Interval"]'),
+    minLabel: () => cy.get('[class*="CustomInputFieldWrapper"] [class*="CustomInputFieldLabel"]').eq(0),
+    minInputField: () => cy.get('[class*="CustomInputFieldWrapper"] input').eq(0),
+    maxLabel: () => cy.get('[class*="CustomInputFieldWrapper"] [class*="CustomInputFieldLabel"]').eq(1),
+    maxInputField: () => cy.get('[class*="CustomInputFieldWrapper"] input').eq(1),
+    intervalLabel: () => cy.get('[aria-labelledby="Interval"]'),
     intervalInputField: () => cy.get('input[id="Interval"]'),
-    annotateEveryLabel: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [aria-labelledby="Annotate every"]'),
+    annotateEveryLabel: () => cy.get('[aria-labelledby="Annotate every"]'),
     annotateEveryInputField: () => cy.get('input[id="Annotate every"]'),
-    lineSettingsToggleButtonWrapper: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [class*="SingleSelectToggleGroupstyles__ToggleButtonWrapper"]').eq(0),
-    lineSettingsLabel: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] .single-select-toggle-group-title').eq(0),
+    lineSettingsToggleButtonWrapper: () => cy.get('.number-line-grid-setting [class*="SingleSelectToggleGroupstyles__ToggleButtonWrapper"]').eq(0),
+    lineSettingsLabel: () => cy.get('.number-line-grid-setting .single-select-toggle-group-title').eq(0),
     lineSettingsToggleButton: (ariaLabel = null) => {
         if (ariaLabel !== null) {
-            return cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [class*="SingleSelectToggleGroupstyles__ButtonContainer"]').eq(0).find(`button[aria-label*="${ariaLabel}"]`);
+            return cy.get('.number-line-grid-setting [class*="SingleSelectToggleGroupstyles__ButtonContainer"]').eq(0).find(`button[aria-label*="${ariaLabel}"]`);
         } else {
-            return cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [class*="SingleSelectToggleGroupstyles__ButtonContainer"]').eq(0).find('button');
+            return cy.get('.number-line-grid-setting [class*="SingleSelectToggleGroupstyles__ButtonContainer"]').eq(0).find('button');
         }
     },
-    displayNumbersToggleButtonWrapper: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [class*="SingleSelectToggleGroupstyles__ToggleButtonWrapper"]').eq(1),
-    displayNumbersLabel: () => cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] .single-select-toggle-group-title').eq(1),
+    displayNumbersToggleButtonWrapper: () => cy.get('.number-line-grid-setting [class*="SingleSelectToggleGroupstyles__ToggleButtonWrapper"]').eq(1),
+    displayNumbersLabel: () => cy.get('.number-line-grid-setting .single-select-toggle-group-title').eq(1),
     displayNumbersToggleButton: (ariaLabel = null) => {
         if (ariaLabel !== null) {
-            return cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [class*="SingleSelectToggleGroupstyles__ButtonContainer"]').eq(1).find(`button[aria-label*="${ariaLabel}"]`);
+            return cy.get('.number-line-grid-setting [class*="SingleSelectToggleGroupstyles__ButtonContainer"]').eq(1).find(`button[aria-label*="${ariaLabel}"]`);
         } else {
-            return cy.get('[class*="LineGridSettingstyles__LineSettingFlexWrapper"] [class*="SingleSelectToggleGroupstyles__ButtonContainer"]').eq(1).find('button');
+            return cy.get('.number-line-grid-setting [class*="SingleSelectToggleGroupstyles__ButtonContainer"]').eq(1).find('button');
         }
     },
-    displaySpecificAnnotationLabel: () => cy.get('[class*="LineGridSettingstyles__SpecificAnnotationWrapper"] .inline-text-property-label'),
-    displaySpecificAnnotationInputField: () => cy.get('[class*="LineGridSettingstyles__SpecificAnnotationWrapper"] input')
+    displaySpecificAnnotationLabel: () => cy.get('.number-line-grid-setting [class*="SpecificAnnotationWrapper"]  [class*="PropertyLabel"]'),
+    displaySpecificAnnotationInputField: () => cy.get('.number-line-grid-setting [class*="SpecificAnnotationWrapper"]  input')
 }
 
 const steps = {
@@ -582,7 +582,8 @@ const steps = {
     enterTextInIntervalInputField: (value) => {
         layoutSectionComponent.intervalInputField()
             .clear()
-            .type(value);
+            .type(value, { force: true })
+            .trigger('input');
     },
 
     /**
@@ -620,7 +621,8 @@ const steps = {
     enterTextInDisplaySpecificAnnotationInputField: (value) => {
         layoutSectionComponent.displaySpecificAnnotationInputField()
             .clear()
-            .type(value);
+            .type(value)
+            .blur();
     },
 
     /**

package/cypress/pages/components/mcqAdditionalSettingsBase.js

@@ -26,44 +26,184 @@ const selectors = {
     //Number of option columns
     numberOfOptionColumnsLabel: () => cy.get('#Number-of-Option-Columns-dropdown-label'),
     numberOfOptionColumnsDropdown: () => cy.get('#Number-of-Option-Columns-select'),
-    numberOfOptionColumnsListOptions: (optionNumber) => cy.get('[aria-labelledby="Number-of-Option-Columns-dropdown-label Number-of-Option-Columns-placeholder"] li[role="option"]').eq(optionNumber),
+    numberOfOptionColumnsListOptions: (optionNumber) => cy.get(`[aria-labelledby="Number-of-Option-Columns-dropdown-label Number-of-Option-Columns-placeholder"] li[role="option"][aria-label*=${optionNumber}]`),
     //Option orientation dropdown
-    optionOrientationLabel: () => cy.get('#Option-Orientation-dropdown-label'),
-    optionOrientationDropdown: () => cy.get('#Option-Orientation-select'),
-    optionOrientationListOptions: (optionIndex) => cy.get('[aria-labelledby="Option-Orientation-dropdown-label Option-Orientation-placeholder"] li[role="option"]').eq(optionIndex),
-    optionNumeration: () => cy.get('.mcq-option-numeration')
+    optionDirectionLabel: () => cy.get('.option-direction [class*="__LabelWrapper"]').eq(0),
+    optionDirectionOptions: (optionAriaLabel) => cy.get(`.ngie-toggle-button-label-wrapper button[aria-label*="option direction ${optionAriaLabel}"]`),
+    optionAlignmentLabel: () => cy.get('.option-alignment [class*="__LabelWrapper"]').eq(0),
+    optionAlignmentOptions: (optionAriaLabel) => cy.get(`.option-alignment button[aria-label*="Option alignment ${optionAriaLabel}"]`),
+    optionNumeration: () => cy.get('.mcq-option-numeration'),
+    multipleColumnsLabel: () => cy.get('[data-ngie-testid="multiple-columns-checkbox"] .MuiFormControlLabel-label'),
+    multipleColumnsCheckbox: () => cy.get('[data-ngie-testid="multiple-columns-checkbox"] input'),
 }
 
 const steps = {
-    verifyOptionDesignDropdownSelectedOption: (selectedOption) => {
-        utilities.verifyInnerText(mcqAdditionalSettingsBase.optionDesignDropdown(), selectedOption)
+    expandOptionDesignDropdown: () => {
+        mcqAdditionalSettingsBase.optionDesignDropdown()
+            .click();
     },
 
-    verifyOptionNumerationDropdownSelectedOption: (selectedOption) => {
-        utilities.verifyInnerText(mcqAdditionalSettingsBase.optionNumerationDropdown(), selectedOption)
+    /**
+    * Verifies that the specified option design is selected.
+    * @param {string} option - The option to verify.
+    */
+    verifyOptionDesignOptionSelected: (option) => {
+        mcqAdditionalSettingsBase.optionDesignDropdownListOptions(option)
+            .should('have.attr', 'aria-selected', 'true');
     },
 
-    verifySpecifyCorrectAnswerOptionNumeration: () => {
-        mcqAdditionalSettingsBase.optionNumeration()
-            .each(($option, index) => {
-                cy.wrap($option)
-                    .should('have.text', index + 1)
-            });
+    /**
+    * Selects an option from the design dropdown list.
+    * @param {string} option - The option to select.
+    */
+    selectOptionDesignDropdownOption: (option) => {
+        mcqAdditionalSettingsBase.optionDesignDropdownListOptions(option)
+            .click();
+    },
+
+    expandOptionNumerationDropdown: () => {
+        mcqAdditionalSettingsBase.optionNumerationDropdown()
+            .click();
+    },
+
+    /**
+    * Selects an option from the numeration dropdown list.
+    * @param {string} option - The option to select.
+    */
+    selectOptionNumerationDropdownOption: (option) => {
+        mcqAdditionalSettingsBase.optionNumerationDropdownListOptions(option)
+            .click();
+    },
+
+    /**
+    * Verifies that the specified numeration dropdown option is selected.
+    * @param {string} option - The option to verify.
+    */
+    verifyOptionNumerationDropdownOptionSelected: (option) => {
+        mcqAdditionalSettingsBase.optionNumerationDropdownListOptions(option)
+            .should('have.attr', 'aria-selected', 'true');
+    },
+
+    /**
+    * Verifies the inner text of numeration options.
+    * @param {Array<string>} numerationArray - Array of numeration options to verify.
+    */
+    verifyOptionNumeration: (numerationArray) => {
+        numerationArray.forEach((option, index) => {
+            utilities.verifyInnerText(mcqAdditionalSettingsBase.optionNumeration().eq(index), option);
+        })
+    },
+
+    verifyMultipleColumnsCheckboxUnchecked: () => {
+        mcqAdditionalSettingsBase.multipleColumnsCheckbox()
+            .should('not.be.checked');
+    },
+
+    checkMultipleColumnsCheckbox: () => {
+        mcqAdditionalSettingsBase.multipleColumnsCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    expandNumberOfOptionsColumnDropdown: () => {
+        mcqAdditionalSettingsBase.numberOfOptionColumnsDropdown()
+            .click();
     },
 
-    verifyPreviewTabOptionNumeration: () => {
-        commonComponents.previewTabQuestionWrapper()
-            .within(() => {
-                mcqAdditionalSettingsBase.optionNumeration()
-                    .each(($option, index) => {
-                        cy.wrap($option)
-                            .should('have.text', index + 1)
-                    });
+    /**
+    * Selects a number of option columns from the dropdown list.
+    * @param {string} option - The option to select.
+    */
+    selectNumberOfOptionColumnDropdownOption: (option) => {
+        mcqAdditionalSettingsBase.numberOfOptionColumnsListOptions(option)
+            .click();
+    },
+
+    /**
+     * This function verifies selected state of option
+     * @param {string} option to be verified as selected
+     */
+    verifyOptionDirectionOptionSelected: (option) => {
+        mcqAdditionalSettingsBase.optionDirectionOptions(option)
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+     * This function verifies selected state of option
+     * @param {string} option to be verified as selected
+     */
+    verifyOptionAlignmentOptionSelected: (option) => {
+        mcqAdditionalSettingsBase.optionAlignmentOptions(option)
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+     * This function selects option from option direction dropdown
+     * @param {string} option to be selected
+     */
+    selectOptionDirectionOption: (option) => {
+        mcqAdditionalSettingsBase.optionDirectionOptions(option)
+            .click();
+    },
+
+    /**
+     * This function selects option from option alignment
+     * @param {string} option to be selected
+     */
+    selectOptionAlignmentOption: (option) => {
+        mcqAdditionalSettingsBase.optionAlignmentOptions(option)
+            .click();
+    }
+}
+
+const tests = {
+    verifyMultipleColumnsFunctionality: () => {
+        const numberOfOptionColumn = ['2', '3', '4', '5', '6'];
+        it('Multiple columns checkbox and label should be displayed and by default the checkbox should be unchecked', () => {
+            utilities.verifyInnerText(mcqAdditionalSettingsBase.multipleColumnsLabel(), 'Multiple columns');
+            mcqAdditionalSettingsBase.steps.verifyMultipleColumnsCheckboxUnchecked();
+        });
+
+        it('When user checks the \'Multiple columns\' checkbox then \'Number of option columns\' label and dropdown should be displayed and by default \'2\' option should be selected', () => {
+            mcqAdditionalSettingsBase.steps.checkMultipleColumnsCheckbox();
+            utilities.verifyInnerText(mcqAdditionalSettingsBase.numberOfOptionColumnsLabel(), 'Number of option columns');
+            utilities.verifyInnerText(mcqAdditionalSettingsBase.numberOfOptionColumnsDropdown(), '2');
+        });
+
+        it('When user expands \'Number of option columns\' then options from 2 to 6 should be displayed', () => {
+            mcqAdditionalSettingsBase.steps.expandNumberOfOptionsColumnDropdown();
+            numberOfOptionColumn.forEach((option) => {
+                utilities.verifyElementVisibilityState(mcqAdditionalSettingsBase.numberOfOptionColumnsListOptions(option), 'visible');
             });
+            mcqAdditionalSettingsBase.steps.selectNumberOfOptionColumnDropdownOption('2');
+        });
+
+        it('\'Option direction\' label should be displayed 2 options \'Row by Row\' and \'Column by Column\' and by default \'Row by Row\' should be selected', () => {
+            utilities.verifyInnerText(mcqAdditionalSettingsBase.optionDirectionLabel(), 'Option direction');
+            utilities.verifyElementVisibilityState(mcqAdditionalSettingsBase.optionDirectionOptions('row by row'), 'visible');
+            utilities.verifyElementVisibilityState(mcqAdditionalSettingsBase.optionDirectionOptions('column by column'), 'visible');
+            mcqAdditionalSettingsBase.steps.verifyOptionDirectionOptionSelected('row by row');
+        });
+
+        it('\'Option alignment\' label should be displayed 3 options \'Left\', \'Center\', \'Right\' and by default \'Left\' should be selected', () => {
+            utilities.verifyInnerText(mcqAdditionalSettingsBase.optionAlignmentLabel(), 'Option alignment');
+            utilities.verifyElementVisibilityState(mcqAdditionalSettingsBase.optionAlignmentOptions('left'), 'visible');
+            utilities.verifyElementVisibilityState(mcqAdditionalSettingsBase.optionAlignmentOptions('center'), 'visible');
+            utilities.verifyElementVisibilityState(mcqAdditionalSettingsBase.optionAlignmentOptions('right'), 'visible');
+            mcqAdditionalSettingsBase.steps.verifyOptionAlignmentOptionSelected('left');
+        });
+
+        it('When user selects \'Column by Column\' option then option alignment section should not be displayed', () => {
+            mcqAdditionalSettingsBase.steps.selectOptionDirectionOption('column by column');
+            utilities.verifyElementVisibilityState(mcqAdditionalSettingsBase.optionAlignmentOptions('left'), 'notExist');
+            utilities.verifyElementVisibilityState(mcqAdditionalSettingsBase.optionAlignmentOptions('center'), 'notExist');
+            utilities.verifyElementVisibilityState(mcqAdditionalSettingsBase.optionAlignmentOptions('right'), 'notExist');
+        });
     }
 }
 
 export const mcqAdditionalSettingsBase = {
     ...selectors,
-    steps
+    steps,
+    tests
 }

package/cypress/pages/dialogBoxBase.js

@@ -9,7 +9,7 @@ const selectors = {
     buttonReject: () => cy.get('[data-testid="reject-button"]'),
     buttonAccept: () => cy.get('[data-testid="accept-button"]'),
     buttonClose: () => cy.get('[aria-label="CLOSE"]'),
-    dialogBoxContentText: () => cy.get('[class*="dialog-content"] [class*="EditQuestionstyles__PopupContentWrapper"]')
+    dialogBoxContentText: () => cy.get('[class*="dialog-content"] [class*="__PopupContentWrapper"]')
 }
 
 const steps = {

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, styleAndLayoutCustomizationAccordionComponent } from "./components";
+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 utilities from "../support/helpers/utilities";
 import constants from "../fixtures/constants";
 const css = Cypress.env('css');
@@ -90,9 +90,6 @@ 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 = {
@@ -1308,7 +1305,6 @@ 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/drawingResponsePage.js

@@ -165,9 +165,9 @@ const selectors = {
     selectPatternOptionsLabel: () => cy.get('.drawing-response-options [class*="ListItemLabel"]'),
 
     //additional settings
-    accessibilityLabel: () => cy.get('[class*="DrawingResponsestyles__AccessibilityWrapper"] .layout-label'),
-    flagThisQuestionAsNonAccessibleCheckboxLabel: () => cy.get('[data-ngie-testid="flag-this-question-as-non-accessible-checkbox"]'),
-    flagThisQuestionAsNonAccessibleCheckbox: () => cy.get('[data-ngie-testid="flag-this-question-as-non-accessible-checkbox"] input'),
+    accessibilityLabel: () => cy.get('[class*="Accessibilitystyles__AccessibilityLabelWrapper"]'),
+    flagThisQuestionAsNonAccessibleCheckboxLabel: () => cy.get('.accessibility-wrapper .MuiFormControlLabel-label'),
+    flagThisQuestionAsNonAccessibleCheckbox: () => cy.get('.accessibility-wrapper input'),
     canvasStyleLayoutLabel: () => cy.get('[class*="DrawingResponsestyles__LayoutLabel"].layout-label').eq(0),
     defaultStrokeLineThicknessLabel: () => cy.get('.line-thickness-label'),
     setLineTypeLabel: () => cy.get('.line-type-label'),

package/cypress/pages/feedbackScalePage.js

@@ -78,8 +78,8 @@ const selectors = {
     editColorButton: () => cy.get('.icon-pencil'),
     allowStudentsToAddCommentCheckbox: () => cy.get('[data-ngie-testid="allow-students-to-add-comment-checkbox"] input'),
     allowStudentsToAddCommentCheckboxLabel: () => cy.get('[data-ngie-testid="allow-students-to-add-comment-checkbox"] .MuiFormControlLabel-label'),
-    commentLabel: () => cy.get('.describe-your-experience .inline-text-property-label'),
-    commentInputField: () => cy.get('input[aria-label="Comment"]'),
+    commentLabel: () => cy.get('.describe-your-experience [class*="__LabelWarpper"]'),
+    commentInputField: () => cy.get('.describe-your-experience [role="textbox"]'),
     legendSectionLabel: () => cy.get('.feedback-legend-wrapper [class*="LegendLabelWrapper"]'),
     showLegendCheckboxLabel: () => cy.get('[data-ngie-testid="show-legend-checkbox"] .MuiFormControlLabel-label'),
     showLegendCheckbox: () => cy.get('[data-ngie-testid="show-legend-checkbox"] input'),
@@ -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-container [class*="InlineRichTextComponentstyles__LabelWarpper"]')
+    additionalSettingsAcknowledgementsLabel: () => cy.get('.additional-settings-container [class*="InlineRichTextComponentstyles__LabelWarpper"]')
 }
 
 const steps = {
@@ -183,11 +183,11 @@ const steps = {
             .should('have.class', 'selected-button');
     },
 
-     /**
-     * @param {number} buttonIndex index of the feedback button
-     * @description this function verifies the selected state of a feedback button
-     */
-     verifyFeedbackNumberButtonSelectedState: (buttonIndex) => {
+    /**
+    * @param {number} buttonIndex index of the feedback button
+    * @description this function verifies the selected state of a feedback button
+    */
+    verifyFeedbackNumberButtonSelectedState: (buttonIndex) => {
         utilities.getNthElement(feedbackScalePage.feedbackNumberButton(), buttonIndex)
             .should('have.class', 'selected-button');
     },
@@ -678,7 +678,14 @@ const steps = {
      * @param {string} text - The expected text in the comment input field.
      */
     verifyTextInCommentInputField: (text) => {
-        utilities.verifyInputFieldValue(feedbackScalePage.commentInputField(), text)
+        feedbackScalePage.commentInputField()
+            .should('have.text', text);
+    },
+
+    verifyCommentInputFieldDisabledGradingView: () => {
+        feedbackScalePage.commentInputField()
+            .parents('.disabled-input-field')
+            .should('exist');
     },
 
     collapseLegendAccordion: () => {