itemengine-cypress-automation 1.0.247-06SeptUpdates-b1623d7.0 → 1.0.247

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

@@ -0,0 +1,223 @@
+import { 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', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Style and Layout customization accordion: Draggable options drag icon handle', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('Draggable options label should be displayed', () => {
+            utilities.verifyInnerText(matchingPage.draggableOptionsLabel(), 'Draggable options');
+        });
+
+        it('Drag handle icon label should be displayed with 3 options and by default the first option should be selected draggable options', () => {
+            utilities.verifyInnerText(matchingPage.dragHandleIconLabel(), 'Drag handle icon');
+            utilities.verifyElementCount(matchingPage.dragHandleOptions(), 3);
+            matchingPage.steps.verifyDragHandleOptionSelected(0);
+        });
+
+        it('By default, the default selected drag handle should be displayed in the specify correct answer section draggable options', () => {
+            matchingPage.steps.verifyDragHandleIconSpecifyCorrectAnswer('drag icon');
+        });
+
+        it('When user selects arrows drag handle icon then arrow icons should be displayed the specify correct answer section draggable options', () => {
+            matchingPage.steps.selectDragHandleOption(1);
+            matchingPage.steps.verifyDragHandleIconSpecifyCorrectAnswer('arrow icon');
+        });
+
+        it('When user selects none option then drag handles should not be displayed for the specify correct answer section draggable options', () => {
+            matchingPage.steps.selectDragHandleOption(2);
+            matchingPage.steps.verifyDragHandleIconSpecifyCorrectAnswer('none');
+        });
+    });
+
+    describe('Style and Layout customization accordion: Draggable options drag icon handle', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            matchingPage.steps.switchToPreviewTab();
+        });
+
+        it('By default, the default selected drag handle should be displayed in the preview tab draggable options', () => {
+            matchingPage.steps.verifyDragHandleIconPreviewTab('drag icon');
+        });
+
+        it('When user selects arrows drag handle icon then arrow icons should be displayed the preview tab draggable options', () => {
+            matchingPage.steps.switchToEditTab();
+            matchingPage.steps.selectDragHandleOption(1);
+            matchingPage.steps.switchToPreviewTab();
+            matchingPage.steps.verifyDragHandleIconPreviewTab('arrow icon');
+        });
+
+        it('When user selects none option then drag handles should not be displayed for the preview tab draggable options', () => {
+            matchingPage.steps.switchToEditTab();
+            matchingPage.steps.selectDragHandleOption(2);
+            matchingPage.steps.switchToPreviewTab();
+            matchingPage.steps.verifyDragHandleIconPreviewTab('none');
+        });
+    });
+
+    describe('Style and Layout customization accordion: Draggable options Fill color edit tab contents and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        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.draggableOptionsFillColorLabel(), 'Fill color');
+            matchingPage.steps.verifyColorBlockColor(4, css.color.defaultBackground);
+            matchingPage.steps.verifyColorBlockSelectedState(0);
+            matchingPage.steps.verifyColorBlockColor(5, css.color.none);
+            utilities.verifyInnerText(utilities.getNthElement(matchingPage.editColorButton(), 2), '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(), 4)
+                .verifyTooltip('#FFFFFF');
+            utilities.getNthElement(matchingPage.colorBlock(), 5)
+                .verifyTooltip('None');
+        });
+
+        it('By default, the first color option should be in selected state', () => {
+            matchingPage.steps.verifyColorBlockSelectedState(4);
+        });
+
+        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.verifyDraggableOptionsFillColorSpecifyCorrectAnswerSection(css.color.defaultBackground);
+        });
+
+        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(5);
+            matchingPage.steps.verifyDraggableOptionsFillColorSpecifyCorrectAnswerSection(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(2);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            matchingPage.steps.verifyDraggableOptionsFillColorSpecifyCorrectAnswerSection(modifiedColor);
+        });
+    });
+
+    describe('Style and Layout customization accordion: Draggable options 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.verifyDraggableOptionsFillColorPreviewTab(css.color.defaultBackground);
+        });
+
+        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(5);
+            matchingPage.steps.switchToPreviewTab();
+            matchingPage.steps.verifyDraggableOptionsFillColorPreviewTab(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(2);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            matchingPage.steps.switchToPreviewTab();
+            matchingPage.steps.verifyDraggableOptionsFillColorPreviewTab(modifiedColor);
+        });
+    });
+
+    describe('Style and Layout customization accordion: Draggable options 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(), 3), 'Edit color');
+            utilities.verifyElementVisibilityState(matchingPage.editColorButton(), 'visible');
+            matchingPage.steps.verifyColorBlockColor(6, css.color.figDefaultComponentBorder);
+            matchingPage.steps.verifyColorBlockSelectedState(2);
+            matchingPage.steps.verifyColorBlockColor(7, 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(), 6)
+                .verifyTooltip('#6B8BFF');
+            utilities.getNthElement(matchingPage.colorBlock(), 7)
+                .verifyTooltip('None');
+        });
+
+        it('By default, the first color option should be in selected state', () => {
+            matchingPage.steps.verifyColorBlockSelectedState(6);
+        });
+
+        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.verifyDraggableOptionsBorderColorSpecifyCorrectAnswer(css.color.figDefaultComponentBorder);
+        });
+
+        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(7);
+            matchingPage.steps.verifyDraggableOptionsBorderColorSpecifyCorrectAnswer(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(3);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            matchingPage.steps.verifyDraggableOptionsBorderColorSpecifyCorrectAnswer(modifiedColor);
+        });
+    });
+
+    describe('Style and Layout customization accordion: Draggable options 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.verifyDraggableOptionsBorderColorPreviewTab(css.color.figDefaultComponentBorder);
+        });
+
+        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(7);
+            matchingPage.steps.switchToPreviewTab();
+            matchingPage.steps.verifyDraggableOptionsBorderColorPreviewTab(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(3);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            matchingPage.steps.switchToPreviewTab();
+            matchingPage.steps.verifyDraggableOptionsBorderColorPreviewTab(modifiedColor);
+        });
+    });
+});

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

@@ -0,0 +1,121 @@
+import { matchingPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+
+const panelPlacement = ['Bottom', 'Top', 'Left', 'Right'];
+const optionAlignment = ['Left', 'Center', 'Right'];
+
+describe('Matching - Style and layout customization', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Style and Layout customization accordion: Draggable options panel placement specify correct answer', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('\'Draggable option panel\' label should be displayed', () => {
+            utilities.verifyInnerText(matchingPage.draggableOptionPanelPlacementLabel(), 'Draggable option panel');
+        });
+
+        it(`\'Panel placement\' label should be displayed along with ${panelPlacement} options should be displayed and by default \'Bottom\' should be selected`, () => {
+            utilities.verifyInnerText(matchingPage.panelPlacementLabel(), 'Panel placement');
+            panelPlacement.forEach((option) => {
+                utilities.verifyElementVisibilityState(matchingPage.panelPlacementOptions(option), 'exist');
+            });
+            matchingPage.steps.verifyPanelPlacementOptionSelected('Bottom');
+        });
+
+        it('By default the option panel placement should be at the bottom', () => {
+            matchingPage.steps.verifyPanelPlacementSpecifyCorrectAnswerSection('Bottom');
+        });
+
+        //Need to remove skip once https://redmine.zeuslearning.com/issues/574098 is resolved
+        panelPlacement.forEach((option) => {
+            it.skip(`When user selects ${option} option from the Panel placement options then panel placement should be at the ${option} in specify correct answer section`, () => {
+                matchingPage.steps.selectPanelPlacementOption(option)
+                matchingPage.steps.verifyPanelPlacementSpecifyCorrectAnswerSection(option);
+            });
+        });
+    });
+
+    describe('Style and Layout customization accordion: Draggable options panel placement preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            matchingPage.steps.switchToPreviewTab();
+        });
+
+        it('By default the option panel placement should be at the bottom', () => {
+            matchingPage.steps.verifyPanelPlacementPreviewTab('Bottom');
+        });
+
+        panelPlacement.forEach((option) => {
+            it(`When user selects ${option} option from the Panel placement options then panel placement should be at the ${option} in preview tab`, () => {
+                matchingPage.steps.switchToEditTab();
+                matchingPage.steps.selectPanelPlacementOption(option)
+                matchingPage.steps.switchToPreviewTab();
+                matchingPage.steps.verifyPanelPlacementPreviewTab(option);
+            });
+        });
+    });
+
+    describe('Style and Layout customization accordion: Draggable Option alignment in panel specify correct answer', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it(`\'Option alignment in panel\' label should be displayed along with ${optionAlignment} options should be displayed and by default \'Left\' should be selected`, () => {
+            utilities.verifyInnerText(utilities.getNthElement(matchingPage.optionAlignmentInPanelLabel(), 2), 'Option alignment in panel');
+            optionAlignment.forEach((option) => {
+                utilities.verifyElementVisibilityState(matchingPage.optionAlignmentInPanelOptions(option.toLowerCase()), 'exist');
+            });
+            matchingPage.steps.verifyOptionAlignmentInPanelOptionSelected('left');
+        });
+
+        //Need to remove skip once https://redmine.zeuslearning.com/issues/574098 is resolved
+        it.skip('By default the option alignment in panel placement should be at the left', () => {
+            matchingPage.steps.verifyOptionAlignmentInPanelInSpecifyCorrectAnswer('Left');
+        });
+
+        //Need to remove skip once https://redmine.zeuslearning.com/issues/574098 is resolved
+        optionAlignment.forEach((option) => {
+            it.skip(`When user selects ${option} option from the option alignment in panel placement options then option alignment placement should be at the ${option} in specify correct answer section`, () => {
+                matchingPage.steps.selectOptionAlignmentInPanelOption(option.toLowerCase());
+                matchingPage.steps.verifyOptionAlignmentInPanelInSpecifyCorrectAnswer(option);
+            });
+        });
+    });
+
+    describe('Style and Layout customization accordion: Draggable Option alignment in panel preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            matchingPage.steps.switchToPreviewTab();
+        });
+
+        it('By default the option alignment in panel placement should be at the left', () => {
+            matchingPage.steps.verifyOptionAlignmentInPanelInPreviewTab('Left');
+        });
+
+        optionAlignment.forEach((option) => {
+            it(`When user selects ${option} option from the option alignment in panel placement options then option alignment placement should be at the ${option} in preview tab`, () => {
+                matchingPage.steps.switchToEditTab();
+                matchingPage.steps.selectOptionAlignmentInPanelOption(option.toLowerCase());
+                matchingPage.steps.switchToPreviewTab();
+                matchingPage.steps.verifyOptionAlignmentInPanelInPreviewTab(option);
+            });
+        });
+    });
+});

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

@@ -0,0 +1,68 @@
+import { matchingPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const connectorStyles = ["simpleLink", "mingleLink", "leftArrow", "rightArrow", "doubleArrow", "line", "dashed"];
+
+
+describe('Dropzone connector style contents', () => {
+    abortEarlySetup();
+    before(() => {
+        matchingPage.steps.navigateToCreateQuestion('matching');
+        cy.barsPreLoaderWait();
+        matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+    });
+
+    it('"Dropzone connector style" label should be displayed', () => {
+        utilities.verifyInnerText(matchingPage.dropzoneConnectorStyleLabel(), 'Dropzone connector style');
+    });
+
+    it('"Set connector line type" label along with seven icon buttons should be displayed. By default, "SimpleLink" option should be in selected state', () => {
+        utilities.verifyInnerText(matchingPage.connectorLineTypeLabel(), 'Set connector line type');
+        connectorStyles.forEach((option) => {
+            utilities.verifyElementVisibilityState(matchingPage.connectorEndPointShapeOptions(option), 'exist');
+        });
+        matchingPage.steps.verifyConnectorStyleOptionSelected('simpleLink')
+    });
+});
+
+describe('Dropzone connector style - Edit tab', () => {
+    abortEarlySetup();
+    before(() => {
+        matchingPage.steps.navigateToCreateQuestion('matching');
+        cy.barsPreLoaderWait();
+        matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+    });
+
+    it('When the "SimpleLink" connector style is in selected state, then the connector style of the text containers should be "SimpleLink"', () => {
+        matchingPage.steps.verifyConnectorStyles('simpleLink');
+    });
+
+    connectorStyles.forEach((button) => {
+        it(`When the user selects ${button}, then the connector style of the text containers should update to ${button}`, () => {
+            matchingPage.steps.selectConnectorLineType(button);
+            matchingPage.steps.verifyConnectorStyles(button);
+        });
+    })
+});
+
+describe('Dropzone connector style - Preview tab', () => {
+    abortEarlySetup();
+    before(() => {
+        matchingPage.steps.navigateToCreateQuestion('matching');
+        cy.barsPreLoaderWait();
+        matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+    });
+
+    it('When the "SimpleLink" connector style is in selected state, then the connector style of the text containers should be "SimpleLink"', () => {
+        matchingPage.steps.verifyConnectorStyles('simpleLink');
+    });
+
+    connectorStyles.forEach((button) => {
+        it(`When the user selects ${button}, then the connector style of the text containers should update to ${button}`, () => {
+            matchingPage.steps.switchToEditTab();
+            matchingPage.steps.selectConnectorLineType(button);
+            matchingPage.steps.switchToPreviewTab();
+            matchingPage.steps.verifyConnectorStyles(button);
+        });
+    })
+});

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

@@ -0,0 +1,71 @@
+import { matchingPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const optionAlignment = ['Left', 'Center', 'Right'];
+
+describe('Matching - Style and layout customization accordion', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Option alignment in dropzone - Edit tab contents and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            matchingPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            matchingPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('2');
+            matchingPage.steps.enterTextInOptionInputField(['Leaves', 'Flower']);
+        });
+
+        it('Option alignment in dropzone label should be displayed', () => {
+            utilities.verifyInnerText(matchingPage.optionAlignmentInDropzoneLabel(), 'Option alignment in dropzone');
+        });
+
+        it('\'Left, Right, Center\' buttons should be displayed and by default \'Left\' alignment option should be selected', () => {
+            optionAlignment.forEach((option) => {
+                utilities.verifyElementVisibilityState(matchingPage.optionAlignmentInDropzoneOptions(option.toLowerCase()), 'exist');
+            });
+            matchingPage.steps.verifyOptionAlignmentInDropzoneOptionSelected('left');
+        });
+
+        it('By default, the options in the dropzone should be left aligned', () => {
+            matchingPage.steps.verifyOptionAlignmentInDropzoneInSpecifyCorrectAnswer('Left');
+        });
+
+        optionAlignment.forEach((option) => {
+            it(`When user selects ${option} then the options should be ${option} aligned in the specify correct answer section`, () => {
+                matchingPage.steps.selectOptionAlignmentInDropzoneOption(option)
+                matchingPage.steps.verifyOptionAlignmentInDropzoneInSpecifyCorrectAnswer(option);
+            });
+        });
+    });
+
+    describe('Option alignment in dropzone - Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            matchingPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            matchingPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('2');
+            matchingPage.steps.enterTextInOptionInputField(['Leaves', 'Flower']);
+            matchingPage.steps.switchToPreviewTab();
+        });
+
+        it('By default, the options in the dropzone should be left aligned', () => {
+            matchingPage.steps.verifyOptionAlignmentInDropzoneInPreviewTab('Left');
+        });
+
+        optionAlignment.forEach((option) => {
+            it(`When user selects ${option} then the options should be ${option} aligned in the preview tab`, () => {
+                matchingPage.steps.switchToEditTab();
+                matchingPage.steps.selectOptionAlignmentInDropzoneOption(option);
+                matchingPage.steps.switchToPreviewTab();
+                matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Leaves', dropzoneIndex: 0 }, { optionText: 'Flower', dropzoneIndex: 0 }]);
+                matchingPage.steps.verifyOptionAlignmentInDropzoneInPreviewTab(option);
+            });
+        });
+    });
+});

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

@@ -0,0 +1,64 @@
+import { matchingPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+
+describe('Option placement in dropzone - Edit tab contents and functionality', () => {
+    abortEarlySetup();
+    before(() => {
+        matchingPage.steps.navigateToCreateQuestion('matching');
+        cy.barsPreLoaderWait();
+        matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        matchingPage.steps.expandMaxCapacityPerDropzoneDropdown();
+        matchingPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('2');
+        matchingPage.steps.enterTextInOptionInputField(['Leaves', 'Flower']);
+    });
+
+    it('Option placement in dropzone label should be displayed', () => {
+        utilities.verifyInnerText(matchingPage.optionAlignmentInPanelLabel(), 'Option placement in dropzone if maximum capacity per dropzone is more than 1');
+        utilities.verifyElementVisibilityState(matchingPage.optionAlignmentInPanelLabel(), 'visible');
+    });
+
+    it('Inline and Block labels and radio buttons should be displayed and by default, inline should be selected', () => {
+        utilities.verifyInnerText(matchingPage.inlineLabel(), 'Inline');
+        utilities.verifyElementVisibilityState(matchingPage.inlineRadioButton(), 'exist');
+        utilities.verifyInnerText(matchingPage.blockLabel(), 'Block');
+        utilities.verifyElementVisibilityState(matchingPage.blockRadioButton(), 'exist');
+        matchingPage.steps.verifyInlineRadioButtonChecked();
+    });
+
+    it('When user drops options in the dropzone when \'Inline\' radio button is checked, the options should be displayed inline to each other', () => {
+        matchingPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection([{ optionText: 'Leaves', dropzoneIndex: 0 }, { optionText: 'Flower', dropzoneIndex: 0 }]);
+        matchingPage.steps.verifyInlineOptionPlacementSpecifyCorrectAnswer();
+    });
+
+    it('When the user selects \'Block\' radio button, then the options should be displayed under each other', () => {
+        matchingPage.steps.checkBlockRadioButton();
+        matchingPage.steps.verifyBlockOptionPlacementSpecifyCorrectAnswer();
+    });
+});
+
+describe('Option placement in dropzone - Preview tab functionality', () => {
+    abortEarlySetup();
+    before(() => {
+        matchingPage.steps.navigateToCreateQuestion('matching');
+        cy.barsPreLoaderWait();
+        matchingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        matchingPage.steps.expandMaxCapacityPerDropzoneDropdown();
+        matchingPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('2');
+        matchingPage.steps.enterTextInOptionInputField(['Leaves', 'Flower']);
+        matchingPage.steps.switchToPreviewTab();
+    });
+
+    it('When user drops options in the dropzone when \'Inline\' radio button is checked, the options should be displayed inline to each other', () => {
+        matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Leaves', dropzoneIndex: 0 }, { optionText: 'Flower', dropzoneIndex: 0 }]);
+        matchingPage.steps.verifyInlineOptionPlacementPreviewTab();
+    });
+
+    it('When the user selects \'Block\' radio button, then the options should be displayed under each other', () => {
+        matchingPage.steps.switchToEditTab();
+        matchingPage.steps.checkBlockRadioButton();
+        matchingPage.steps.switchToPreviewTab();
+        matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Leaves', dropzoneIndex: 0 }, { optionText: 'Flower', dropzoneIndex: 0 }]);
+        matchingPage.steps.verifyBlockOptionPlacementPreviewTab();
+    });
+});