itemengine-cypress-automation 1.0.244 → 1.0.245

package/cypress/e2e/ILC/Matching/styleAndLayoutCustomizationDropzoneBorderStyleProperties.js

@@ -0,0 +1,113 @@
+import { matchingPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+
+const borderStyleOptions = ['dashed', 'dotted', 'solid', 'none'];
+
+describe('Matching - Style and layout customization', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Style and Layout customization accordion: Dropzone border style contents and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it(`Border style label and ${borderStyleOptions} should be displayed and by default dashed should be selected`, () => {
+            utilities.verifyInnerText(matchingPage.dropzoneBorderStyleLabel(), 'Border style');
+            borderStyleOptions.forEach((option) => {
+                utilities.verifyElementVisibilityState(matchingPage.dropzoneBorderStyleOptions(option), 'exist');
+            })
+            matchingPage.steps.verifyDropzoneBorderStyleSelected('dashed');
+        });
+
+        it('By default \'Dashed\' borders should be displayed for the dropzone in the edit tab', () => {
+            matchingPage.steps.verifyDropzoneBorderStyleSpecifyCorrectAnswer('dashed');
+        });
+
+        borderStyleOptions.forEach((option) => {
+            it(`When user selects ${option} then the borders in the dropzone should be ${option}`, () => {
+                matchingPage.steps.selectDropzoneBorderStyleOption(option);
+                matchingPage.steps.verifyDropzoneBorderStyleSpecifyCorrectAnswer(option);
+            });
+        });
+    });
+
+    describe('Style and Layout customization accordion: Dropzone border style preview functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            matchingPage.steps.switchToPreviewTab();
+        });
+
+        it('By default \'Dashed\' borders should be displayed for the dropzone in the preview tab', () => {
+            matchingPage.steps.verifyDropzoneBorderStylePreviewTab('dashed');
+        });
+
+        borderStyleOptions.forEach((option) => {
+            it(`When user selects ${option} then the borders in the dropzone should be ${option}`, () => {
+                matchingPage.steps.switchToEditTab();
+                matchingPage.steps.selectDropzoneBorderStyleOption(option);
+                matchingPage.steps.switchToPreviewTab();
+                matchingPage.steps.verifyDropzoneBorderStylePreviewTab(option);
+            });
+        });
+    });
+
+    describe('Style and Layout customization accordion: Draggable options border style contents and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it(`Border style label and ${borderStyleOptions} should be displayed and by default solid should be selected`, () => {
+            utilities.verifyInnerText(matchingPage.draggableOptionsBorderStyleLabel(), 'Border style');
+            borderStyleOptions.forEach((option) => {
+                utilities.verifyElementVisibilityState(matchingPage.draggableOptionsBorderStyleOptions(option), 'exist');
+            })
+            matchingPage.steps.verifyDraggableOptionsBorderStyleSelected('solid');
+        });
+
+        it('By default \'Solid\' borders should be displayed for the draggable options in the edit tab', () => {
+            matchingPage.steps.verifyDropzoneBorderStyleSpecifyCorrectAnswer('dashed');
+        });
+
+        borderStyleOptions.forEach((option) => {
+            it(`When user selects ${option} then the borders in the draggable options should be ${option}`, () => {
+                matchingPage.steps.selectDraggableOptionsBorderStyleOption(option);
+                matchingPage.steps.verifyDraggableOptionsBorderStyleSpecifyCorrectAnswer(option);
+            });
+        });
+    });
+
+    describe('Style and Layout customization accordion: Draggable options border style preview functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            matchingPage.steps.switchToPreviewTab();
+        });
+
+        it('By default \'Solid\' borders should be displayed for the draggable options in the preview tab', () => {
+            matchingPage.steps.verifyDraggableOptionsBorderStylePreviewTab('solid');
+        });
+
+        borderStyleOptions.forEach((option) => {
+            it(`When user selects ${option} then the borders in the draggable options should be ${option}`, () => {
+                matchingPage.steps.switchToEditTab();
+                matchingPage.steps.selectDraggableOptionsBorderStyleOption(option);
+                matchingPage.steps.switchToPreviewTab();
+                matchingPage.steps.verifyDraggableOptionsBorderStylePreviewTab(option);
+            });
+        });
+    });
+});

package/cypress/e2e/ILC/Matching/styleAndLayoutCustomizationDropzoneProperties.js

@@ -0,0 +1,251 @@
+import { dialogBoxBase, matchingPage } from "../../../pages";
+import { colorPopupComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const modifiedColor = 'rgb(121, 60, 60)'
+
+describe('Matching - Style and layout customization accordion', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Style and Layout customization accordion: Fill color edit tab contents and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('Grid label should be displayed', () => {
+            utilities.verifyInnerText(matchingPage.dropzoneLabel(), 'Dropzone');
+        });
+
+        it('\'Fill color\' label and two color blocks and an \'Edit color\' button should be displayed. The selected color block should be of color \'rgb(245, 248, 255)\' and the other color block should have \'No color\'', () => {
+            utilities.verifyInnerText(matchingPage.fillColorLabel(), 'Fill color');
+            matchingPage.steps.verifyColorBlockColor(0, css.color.matrixDropzoneCellBg);
+            matchingPage.steps.verifyColorBlockSelectedState(0);
+            matchingPage.steps.verifyColorBlockColor(1, css.color.none);
+            utilities.verifyInnerText(utilities.getNthElement(matchingPage.editColorButton(), 0), 'Edit color');
+            utilities.verifyElementVisibilityState(matchingPage.editColorButton(), 'visible');
+        });
+
+        it('When the user hovers over the color blocks in the \'Fill color\' section, hex code of the selected color should be displayed in a tooltip', () => {
+            utilities.getNthElement(matchingPage.colorBlock(), 0)
+                .verifyTooltip('#F5F8FF');
+            utilities.getNthElement(matchingPage.colorBlock(), 1)
+                .verifyTooltip('None');
+        });
+
+        it('By default, the first color option should be in selected state', () => {
+            matchingPage.steps.verifyColorBlockSelectedState(0);
+        });
+
+        it('When the default color block is in selected state in the \'Fill color\' section, then the background color of the grid in the specify correct answer section should be the default selected color', () => {
+            matchingPage.steps.verifyFillColorSpecifyCorrectAnswerSection(css.color.matrixDropzoneCellBg);
+        });
+
+        it('When the user selects the \'None\' color block, it should get in selected state and the no background color should be present for the grid in the specify correct answer section', () => {
+            matchingPage.steps.selectColorBlock(1);
+            matchingPage.steps.verifyFillColorSpecifyCorrectAnswerSection(css.color.defaultBackground);
+        });
+
+        it('When the user clicks on the \'Edit color\' button, modifies color for the selected color block, then the background color of the grid in the specify correct answer section should be the modified selected color', () => {
+            matchingPage.steps.editColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            matchingPage.steps.verifyFillColorSpecifyCorrectAnswerSection(modifiedColor);
+        });
+    });
+
+    describe('Style and Layout customization accordion: Fill color preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the default color block is in selected state in the \'Fill color\' section, then the background color of the grid in the preview tab should be the default selected color', () => {
+            matchingPage.steps.switchToPreviewTab();
+            matchingPage.steps.verifyFillColorPreviewTab(css.color.matrixDropzoneCellBg);
+        });
+
+        it('When the user selects the \'None\' color block, it should get in selected state and the no background color should be present for the grid in the preview tab', () => {
+            matchingPage.steps.switchToEditTab();
+            matchingPage.steps.selectColorBlock(1);
+            matchingPage.steps.switchToPreviewTab();
+            matchingPage.steps.verifyFillColorPreviewTab(css.color.defaultBackground);
+        });
+
+        it('When the user clicks on the \'Edit color\' button, modifies color for the selected color block, then the color block should get updated accordingly', () => {
+            matchingPage.steps.switchToEditTab();
+            matchingPage.steps.editColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            matchingPage.steps.switchToPreviewTab();
+            matchingPage.steps.verifyFillColorPreviewTab(modifiedColor);
+        });
+    });
+
+    describe('Style and Layout customization accordion: Border color edit tab contents and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('\'Border color\' label and two color blocks and an \'Edit color\' button should be displayed. The selected color block should be of color \'rgb(82, 0, 255) and the other color block should have \'No color\'', () => {
+            utilities.verifyInnerText(matchingPage.borderColorLabel(), 'Border color');
+            utilities.verifyInnerText(utilities.getNthElement(matchingPage.editColorButton(), 1), 'Edit color');
+            utilities.verifyElementVisibilityState(matchingPage.editColorButton(), 'visible');
+            matchingPage.steps.verifyColorBlockColor(2, css.color.activeComponentBorder);
+            matchingPage.steps.verifyColorBlockSelectedState(2);
+            matchingPage.steps.verifyColorBlockColor(3, css.color.none);
+        });
+
+        it('When the user hovers over the color blocks in the \'Border color\' section, hex code of the selected color should be displayed in a tooltip', () => {
+            utilities.getNthElement(matchingPage.colorBlock(), 2)
+                .verifyTooltip('#5200FF');
+            utilities.getNthElement(matchingPage.colorBlock(), 3)
+                .verifyTooltip('None');
+        });
+
+        it('By default, the first color option should be in selected state', () => {
+            matchingPage.steps.verifyColorBlockSelectedState(2);
+        });
+
+        it('When the default color block is in selected state in the \'Border color\' section, then the border color of the grid in the specify correct answer section should be the default selected color', () => {
+            matchingPage.steps.verifyBorderColorSpecifyCorrectAnswer(css.color.activeComponentBorder);
+        });
+
+        it('When the user selects the \'None\' color block, it should get in selected state and the no border color should be present for the grid in the specify correct answer section', () => {
+            matchingPage.steps.selectColorBlock(3);
+            matchingPage.steps.verifyBorderColorSpecifyCorrectAnswer(css.color.defaultBackground);
+        });
+
+        it('When the user clicks on the \'Edit color\' button, modifies color for the selected color block, then the border color of the grid in the specify correct answer section should be the modified selected color', () => {
+            matchingPage.steps.editColor(1);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            matchingPage.steps.verifyBorderColorSpecifyCorrectAnswer(modifiedColor);
+        });
+    });
+
+    describe('Style and Layout customization accordion: Border color preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            matchingPage.steps.switchToPreviewTab();
+        });
+
+        it('When the default color block is in selected state in the \'Fill color\' section, then the border color of the grid in the preview tab should be the default selected color', () => {
+            matchingPage.steps.verifyBorderColorPreviewTab(css.color.activeComponentBorder);
+        });
+
+        it('When the user selects the \'None\' color block, it should get in selected state and the no border color should be present for the grid in the preview tab', () => {
+            matchingPage.steps.switchToEditTab();
+            matchingPage.steps.selectColorBlock(3);
+            matchingPage.steps.switchToPreviewTab();
+            matchingPage.steps.verifyBorderColorPreviewTab(css.color.defaultBackground);
+        });
+
+        it('When the user clicks on the \'Edit color\' button, modifies color for the selected color block, then the color block should get updated accordingly', () => {
+            matchingPage.steps.switchToEditTab();
+            matchingPage.steps.editColor(1);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            matchingPage.steps.switchToPreviewTab();
+            matchingPage.steps.verifyBorderColorPreviewTab(modifiedColor);
+        });
+    });
+
+    describe('Color popup functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the user clicks on the \'Edit color\' present in an \'Fill color\' popup, then a select color popup should be displayed', () => {
+            matchingPage.steps.editColor(0);
+            colorPopupComponent.steps.verifyColorPopupIsDisplayed();
+        });
+
+        colorPopupComponent.tests.verifyColorPopupSelectColorTitle();
+
+        colorPopupComponent.tests.verifySaturationAndOpacityGradientPalette('rgb(255, 255, 255)');
+
+        colorPopupComponent.tests.verifyColorHuePaletteAndHexInputField('rgb(255, 0, 0)', '#ffffff');
+
+        colorPopupComponent.tests.verifyColorPopupFunctionality();
+    });
+
+    describe('Color popup - Updating the selected color', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the user moves the color picker in the color saturation palette, color in the selected color block and the hex code should change, color in the hue color palette and the opacity value should not change', () => {
+            matchingPage.steps.editColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(121, 60, 60)');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(119, 60, 60)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHexValue('#793c3c');
+            colorPopupComponent.steps.verifyOpacityGradientPaletteColor('rgb(119, 60, 60)');
+        });
+
+        it('When the user moves the color picker in the color hue palette, color in the selected color block, the hex code and the saturation color palette should change and the opacity value should not change', () => {
+            colorPopupComponent.steps.clickInColorHuePalette();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(60, 121, 121)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(0, 255, 255)');
+            colorPopupComponent.steps.verifyHexValue('#3c7979');
+            colorPopupComponent.steps.verifyOpacityGradientPaletteColor('rgb(60, 119, 119)');
+        });
+
+        it('When the user changes the color using hex code, the color in color saturation palette and color hue palette should change and the opacity value should not change', () => {
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.verifyHexValue('#ff0000');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyOpacityGradientPaletteColor('rgb(255, 0, 0)');
+        });
+    });
+
+    describe('Color popup - \'Cancel\' and \'Ok\' buttons', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the user modifies the selected color in the color popup and clicks on \'Cancel\' button, then the popup should close, the color block should not change and the modifications in the color popup should not persist', () => {
+            matchingPage.steps.editColor(0);
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.clickOnOpacityGradientHuePalette();
+            colorPopupComponent.steps.clickOnCancelButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            matchingPage.steps.verifyColorBlockColor(0, css.color.matrixDropzoneCellBg);
+        });
+
+        it('When the user modifies the selected color in the color popup and clicks on \'Ok\' button, then the popup should close, the color block should change to the new selected color and the modifications in the color popup should persist', () => {
+            cy.log('Pre-step: clicking on the edit color button')
+            matchingPage.steps.editColor(0);
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.clickOnOpacityGradientHuePalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            matchingPage.steps.verifyColorBlockColor(0, 'rgba(255, 0, 0, 0.5)');
+        });
+    });
+});

package/cypress/e2e/ILC/Matching/styleAndLayoutCustomizationLayoutProperties.js

@@ -0,0 +1,227 @@
+import { matchingPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+
+const rowColumnOptions = ['Small','Normal', 'Wide'];
+const dropzoneDimensions = ['Auto', 'Custom'];
+
+describe('Matching - Style and layout customization accordion', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Style and Layout customization accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+        });
+
+        matchingPage.tests.verifyStyleAndLayoutCustomizationAccordionProperties();
+
+        it('\'Layout\' label should be displayed', () => {
+            utilities.verifyInnerText(matchingPage.layoutLabel(), 'Layout')
+        });
+    });
+
+    describe('Style and Layout customization accordion: Row spacing and Column spacing edit tab contents and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('\'Row spacing\' label and dropdown should be displayed and by default \'Normal\' option is selected', () => {
+            utilities.verifyInnerText(matchingPage.rowSpacingDropdownLabel(), 'Row spacing');
+            utilities.verifyInnerText(matchingPage.rowSpacingDropdown(), 'Normal');
+            utilities.verifyElementVisibilityState(matchingPage.rowSpacingDropdown(), 'visible');
+        });
+
+        it(`When user expands \'Row spacing\' then ${rowColumnOptions} should be displayed then \'Normal\' option is selected`, () => {
+            matchingPage.steps.expandRowSpacingDropdown();
+            rowColumnOptions.forEach((option, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(matchingPage.rowSpacingDropdownOptions(), index), option);
+            });
+            matchingPage.steps.verifyRowSpacingOptionSelected('Normal');
+            matchingPage.steps.selectRowSpacingDropdownOption('Normal');
+            utilities.verifyElementVisibilityState(matchingPage.dropdownList(), 'notExist');
+        });
+
+        rowColumnOptions.forEach((option) => {
+            it(`When user selects \'Row spacing\' ${option} option then ${option} spacing should be displayed between the row options`, () => {
+                matchingPage.steps.expandRowSpacingDropdown();
+                matchingPage.steps.selectRowSpacingDropdownOption(option);
+                matchingPage.steps.verifyRowSpacingSpecifyCorrectAnswerSection(option);
+            });
+        });
+
+        it('\'Column spacing\' label and dropdown should be displayed and by default \'Normal\' option is selected', () => {
+            utilities.verifyInnerText(matchingPage.columnSpacingDropdownLabel(), 'Column spacing');
+            utilities.verifyInnerText(matchingPage.columnSpacingDropdown(), 'Normal');
+            utilities.verifyElementVisibilityState(matchingPage.columnSpacingDropdown(), 'visible');
+        });
+
+        it(`When user expands \'Column spacing\' then ${rowColumnOptions} should be displayed then \'Normal\' option is selected`, () => {
+            matchingPage.steps.expandColumnSpacingDropdown();
+            rowColumnOptions.forEach((option, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(matchingPage.columnSpacingDropdownOptions(), index), option);
+            });
+            matchingPage.steps.verifyColumnSpacingOptionSelected('Normal');
+            matchingPage.steps.selectColumnSpacingDropdownOption('Normal');
+            utilities.verifyElementVisibilityState(matchingPage.dropdownList(), 'notExist');
+        });
+
+        rowColumnOptions.forEach((option) => {
+            it(`When user selects \'Column spacing\' ${option} option then ${option} spacing should be displayed between the columns`, () => {
+                matchingPage.steps.expandColumnSpacingDropdown();
+                matchingPage.steps.selectColumnSpacingDropdownOption(option);
+                matchingPage.steps.verifyColumnSpacingSpecifyCorrectAnswerSection(option);
+            });
+        });
+    });
+
+    describe('Style and Layout customization accordion: Row spacing and Column spacing preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+        rowColumnOptions.forEach((option) => {
+            it(`When user selects \'Row spacing\' ${option} option then ${option} spacing should be displayed between the row options`, () => {
+                matchingPage.steps.expandRowSpacingDropdown();
+                matchingPage.steps.selectRowSpacingDropdownOption(option);
+                matchingPage.steps.switchToPreviewTab();
+                matchingPage.steps.verifyRowSpacingPreviewTab(option);
+                matchingPage.steps.switchToEditTab();
+            });
+        });
+
+        rowColumnOptions.forEach((option) => {
+            it(`When user selects \'Column spacing\' ${option} option then ${option} spacing should be displayed between the columns`, () => {
+                matchingPage.steps.expandColumnSpacingDropdown();
+                matchingPage.steps.selectColumnSpacingDropdownOption(option);
+                matchingPage.steps.switchToPreviewTab();
+                matchingPage.steps.verifyColumnSpacingPreviewTab(option);
+                matchingPage.steps.switchToEditTab();
+            });
+        });
+    });
+    
+    // Remove skip once https://redmine.zeuslearning.com/issues/580203 and https://redmine.zeuslearning.com/issues/580201 is resolved and make changes in the sheet
+    describe.skip('Style and Layout customization accordion: Dropzone dimensions edit tab contents and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait()
+            matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('\'Dropzone dimensions\' label and dropdown should be displayed and by default \'Auto\' option is selected', () => {
+            utilities.verifyInnerText(matchingPage.dropzoneDimensionsLabel(), 'Dropzone dimensions');
+            utilities.verifyInnerText(matchingPage.dropzoneDimensionsDropdown(), 'Auto');
+        });
+
+        it(`When user expands \'Dropzone dimensions\' then ${dropzoneDimensions} should be displayed then \'Auto\' option is selected`, () => {
+            matchingPage.steps.expandDropzoneDimensionsDropdown();
+            dropzoneDimensions.forEach((option, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(matchingPage.dropzoneDimensionsDropdownOptions(), index), option);
+            });
+            matchingPage.steps.verifyDropzoneDimensionsDropdownOptionSelected('Auto');
+            matchingPage.steps.selectDropzoneDimensionsDropdownOption('Auto');
+            utilities.verifyElementVisibilityState(matchingPage.dropdownList(), 'notExist')
+        });
+
+        dropzoneDimensions.forEach((option) => {
+            it(`When user selects \'Dropzone dimensions\' ${option} option then ${option} spacing should be displayed between the columns`, () => {
+                matchingPage.steps.expandDropzoneDimensionsDropdown();
+                matchingPage.steps.selectDropzoneDimensionsDropdownOption(option);
+                matchingPage.steps.verifyDropzoneDimensionsSpecifyCorrectAnswer(option);
+            });
+        });
+
+        it(`When user selects ${dropzoneDimensions[1]} then Specify for all dropzone columns, Specify for first dropzone column only radio buttons should be displayed`, () => {
+            utilities.verifyInnerText(matchingPage.specifyForAllDropzoneColumnsLabel(), 'Specify for all dropzone columns');
+            utilities.verifyElementVisibilityState(matchingPage.specifyForAllDropzoneColumnsRadioButton(), 'exist');
+            utilities.verifyInnerText(matchingPage.specifyForFirstDropzoneColumnOnlyLabel(), 'Specify for first dropzone column only');
+            utilities.verifyElementVisibilityState(matchingPage.specifyForFirstDropzoneColumnOnlyRadioButton(), 'exist');
+        });
+
+        it('By default, \'Specify for all columns\' should be selected and \'Dropzone width (px)\' label and input field should be displayed with 225 by default', () => {
+            matchingPage.steps.verifyCustomDimensionsRadioButtonSelected('Specify for all dropzone columns');
+            utilities.verifyInnerText(matchingPage.dropzoneWidthLabel(), 'Dropzone width (px)');
+            matchingPage.steps.verifyDropzoneWidthInputField(0, '225');
+        });
+
+        it('User should not be able to enter value below 108 and above 320 in the \'Dropzone width (px)\' input field', () => {
+            matchingPage.steps.enterTextInDropzoneWidthInputField(0, 90);
+            matchingPage.steps.verifyDropzoneWidthInputField(0, '108');
+            matchingPage.steps.enterTextInDropzoneWidthInputField(0, 400);
+            matchingPage.steps.verifyDropzoneWidthInputField(0, '320');
+        });
+
+        it('When the user edits the \'Dropzone width (px)\' input field value then it should be reflected in the specify correct answer section', () => {
+            matchingPage.steps.enterTextInDropzoneWidthInputField(0, 160);
+            matchingPage.steps.verifyDropzoneWidthInputField(0, '160');
+            matchingPage.steps.verifyDropzoneWidthSpecifyCorrectAnswer(0, 160);
+            matchingPage.steps.verifyDropzoneWidthSpecifyCorrectAnswer(1, 160);
+            matchingPage.steps.verifyDropzoneWidthSpecifyCorrectAnswer(2, 160);
+        });
+
+        it('When the user selects Specify for first column only \'Dropzone width (px)\' label and input field should be displayed', () => {
+            matchingPage.steps.selectCustomDimensionsRadioButton('Specify for first dropzone column only');
+            matchingPage.steps.verifyCustomDimensionsRadioButtonSelected('Specify for first dropzone column only');
+            utilities.verifyInnerText(matchingPage.dropzoneWidthLabel(), 'Dropzone width (px)');
+        });
+
+        it('When the user edits the \'Dropzone width (px)\' input field value then it should be reflected in the specify correct answer section only for the first column', () => {
+            matchingPage.steps.enterTextInDropzoneWidthInputField(0, 200);
+            matchingPage.steps.verifyDropzoneWidthInputField(0, '200');
+            matchingPage.steps.verifyDropzoneWidthSpecifyCorrectAnswer(0, 200);
+            matchingPage.steps.verifyDropzoneDoeNotHaveSpecifiedWidthSpecifyCorrectAnswer(1, 200);
+            matchingPage.steps.verifyDropzoneDoeNotHaveSpecifiedWidthSpecifyCorrectAnswer(2, 200);
+        });
+    });
+    
+    // Remove skip once https://redmine.zeuslearning.com/issues/580203 and https://redmine.zeuslearning.com/issues/580201 is resolved and make changes in the sheet
+    describe.skip('Style and Layout customization accordion: Dropzone dimensions preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        dropzoneDimensions.forEach((option) => {
+            it(`When user selects \'Dropzone dimensions\' ${option} option then ${option} spacing should be displayed between the columns`, () => {
+                matchingPage.steps.expandDropzoneDimensionsDropdown();
+                matchingPage.steps.selectDropzoneDimensionsDropdownOption(option);
+                matchingPage.steps.switchToPreviewTab();
+                matchingPage.steps.verifyDropzoneDimensionsPreviewTab(option);
+                matchingPage.steps.switchToEditTab();
+            });
+        });
+
+        it('When the user selects \'Specify for all columns\' radio button edits the \'Dropzone width (px)\' input field value then it should be reflected in the preview tab', () => {
+            matchingPage.steps.enterTextInDropzoneWidthInputField(0, 160);
+            matchingPage.steps.verifyDropzoneWidthInputField(0, '160');
+            matchingPage.steps.switchToPreviewTab();
+            matchingPage.steps.verifyDropzoneWidthPreviewTab(0, 160);
+            matchingPage.steps.verifyDropzoneWidthPreviewTab(1, 160);
+            matchingPage.steps.verifyDropzoneWidthPreviewTab(2, 160);
+        });
+
+        it('When the user selects \'Specify for first column\' radio button edits the \'Dropzone width (px)\' input field value then it should be reflected in the preview tab only for the first column', () => {
+            matchingPage.steps.switchToEditTab();
+            matchingPage.steps.selectCustomDimensionsRadioButton('Specify for first dropzone column only');
+            matchingPage.steps.verifyCustomDimensionsRadioButtonSelected('Specify for first dropzone column only');
+            matchingPage.steps.enterTextInDropzoneWidthInputField(0, 200);
+            matchingPage.steps.verifyDropzoneWidthInputField(0, 200);
+            matchingPage.steps.switchToPreviewTab();
+            matchingPage.steps.verifyDropzoneWidthPreviewTab(0, 200);
+            matchingPage.steps.verifyDropzoneDoeNotHaveSpecifiedWidthPreviewTab(1, 200);
+            matchingPage.steps.verifyDropzoneDoeNotHaveSpecifiedWidthPreviewTab(2, 200);
+        });
+    });
+});

package/cypress/e2e/ILC/MultipleSelection/headerSection.js

@@ -42,11 +42,14 @@ describe('Create item page - Multiple selection: Header section and Saving quest
         });
 
         describe('Validation error messages', () => {
-            dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton(['Please enter all option values', 'Please set points']);
+            dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton();
 
             it('Validation error messages should be displayed below required input fields', () => {
                 multipleSelectionPage.steps.verifyQuestionInstructionsErrorMessageIsNotDisplayed();
-                multipleSelectionPage.steps.verifyWarningIconOnRequiredFields(['Please enter all option values', 'Please set points']);
+                multipleSelectionPage.steps.verifyPointsFieldErrorMessageIsNotDisplayed();
+                multipleSelectionPage.steps.verifyOptionsInputFieldErrorMessage(0);
+                multipleSelectionPage.steps.verifySpecifyCorrectAnswerErrorIconIsVisible();
+                multipleSelectionPage.steps.verifySpecifyCorrectAnswerErrorMessage();
             });
 
             it('Validation error messages should disappear when required input fields are filled', () => {

package/cypress/e2e/ILC/MultipleSelectionGridNew/headerSection.js

@@ -42,11 +42,18 @@ describe('Create item page - Multiple selection grid: Header section and Saving
         });
 
         describe('Validation error messages', () => {
-            dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton(['Please enter all questions', 'Please set points']);
+            dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton();
 
             it('Validation error messages should be displayed below required input fields', () => {
                 multipleSelectionGridPage.steps.verifyQuestionInstructionsErrorMessageIsNotDisplayed();
-                multipleSelectionGridPage.steps.verifyWarningIconOnRequiredFields(['Please enter all questions', 'Please set points']);
+                multipleSelectionGridPage.steps.verifyPointsFieldErrorMessageIsNotDisplayed();
+                utilities.verifyInnerText(utilities.getNthElement(multipleSelectionGridPage.errorMessage(), 0), 'Error: Please enter some text.');
+                utilities.verifyInnerText(utilities.getNthElement(multipleSelectionGridPage.errorMessage(), 1), 'Error: Please set a correct answer.');
+                for (let index = 1; index < 4; index++) {
+                    multipleSelectionGridPage.steps.verifyErrorIconInSpecifyColumnsAndRowsGrid(index);
+                }
+                multipleSelectionGridPage.steps.verifySpecifyCorrectAnswerErrorIconIsVisible();
+                multipleSelectionGridPage.steps.verifySpecifyCorrectAnswerErrorMessage();
             });
 
             it('Validation error messages should disappear when required input fields are filled', () => {

package/cypress/e2e/ILC/NumberLine/headerSection.js

@@ -46,11 +46,12 @@ describe('Create item page - Number line: Header section and saving question', (
         });
 
         describe('Validation error messages', () => {
-            dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton(['Please set points']);
+            dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton();
 
             it('Validation error messages should be displayed below required input fields', () => {
                 numberLinePage.steps.verifyQuestionInstructionsErrorMessageIsNotDisplayed();
-                numberLinePage.steps.verifyWarningIconOnRequiredFields(['Please set points'])
+                numberLinePage.steps.verifyPointsFieldErrorMessageIsNotDisplayed();
+                utilities.verifyInnerText(numberLinePage.errorMessage(), 'Error: Please set a correct answer.');
             });
 
             it('Validation error messages should disappear when required input fields are filled', () => {