itemengine-cypress-automation 1.0.205-8thJuneFixes-5ad148f.0 → 1.0.205

package/cypress/e2e/ILC/DragAndDropIntoCategoriesNew/Scoring/perDropzoneCorrectPointsEqualToAlternativePoints.js

@@ -119,7 +119,7 @@ describe('Create item page - Drag and drop into categories: Per dropzone with al
             dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(0);
             dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectIconsForDropzone({ 'correct': 0, 'incorrect': 1, 'correct': 2, 'incorrect': 3, 'incorrect': 4, 'incorrect': 5 });
             dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectStatusMessageNotExists();
-            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount([['Bat'], ['Eagle', 'Parrot'], ['Platypus'], ['Ostrich'], ['Whale']], ['1', '2', '3', '4', '5']);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount([['Flying squirrel'], ['Eagle', 'Peacock'], ['Ostrich'], ['Platypus'], ['Octopus']], ['1', '2', '4', '5', '6']);
             dragAndDropIntoCategoriesPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
             /*cy.log('When the user has attempted the question with partially correct options exclusively from the alternative accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct answer responses, correct icons should be displayed for all correct dropzones, incorrect icon should be displayed for incorrect dropzones, correct/incorrect answer status message and correct answer section should not be displayed')
             dragAndDropIntoCategoriesPage.steps.checkAnswer();

package/cypress/e2e/ILC/DragAndDropIntoCategoriesNew/Scoring/perDropzoneCorrectPointsGreaterThanAlternativePoints.js

@@ -192,7 +192,7 @@ describe('Create item page - Drag and drop into categories: Per dropzone with al
         it('When the user attempts the question partially correct such that equal number of dropzones are correct according to correct accordion and alternative accordion mappings and points achieved from the correct accordion mapping is more than the points achieved from alternative accordion mapping, then the points achieved should be according to the correct accordion mapping and on switching to \'Grading\' view, correct icon should be displayed besides correct accordion responses, incorrect icon should be displayed besides alternative accordion responses, correct icon should be displayed for correct dropzone, incorrect icon should be displayed for incorrect dropzone. correct/incorrect answer status message and correct answer section with all correct answers from the correct accordion along with dropzone numeration should be displayed', () => {
             dragAndDropIntoCategoriesPage.steps.resetQuestionPreview();
             dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Flying squirrel': 0, 'Eagle': 1, 'Parrot': 1, 'Ostrich': 3 });
-            dragAndDropIntoCategoriesPage.steps.verifyPreviewScore(10, 30);
+            dragAndDropIntoCategoriesPage.steps.verifyPreviewScore(15, 30);
             dragAndDropIntoCategoriesPage.steps.switchToGradingView();
             dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(0);
             dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(1);

package/cypress/e2e/ILC/DragAndDropIntoCategoriesNew/Scoring/perDropzoneMinimumAndPenaltyScoring.js

@@ -102,7 +102,7 @@ describe('Create item page - Drag and drop into categories: Per dropzone scoring
             dragAndDropIntoCategoriesPage.steps.addInputToOptionsInputField(['Bat', 'Eagle', 'Parrot', 'Whale', 'Platypus', 'Ostrich', 'Flying squirrel', 'Peacock']);
             dragAndDropIntoCategoriesPage.steps.expandMaxCapacityPerDropzoneDropdown();
             dragAndDropIntoCategoriesPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('2');
-            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Bat': 0, 'Eagle': 1, 'Platypus': 2, 'Ostrich': 3, 'Whale': 4 });
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Bat': 0, 'Eagle': 1, 'Platypus': 2, 'Ostrich': 3, 'Whale': 4, 'Parrot': 5 });
             dragAndDropIntoCategoriesPage.steps.selectAutoScoredScoringSubtype('Per dropzone');
             dragAndDropIntoCategoriesPage.steps.allotPoints(1);
         });
@@ -164,10 +164,10 @@ describe('Create item page - Drag and drop into categories: Per dropzone scoring
             dragAndDropIntoCategoriesPage.steps.addInputToOptionsInputField(['Bat', 'Eagle', 'Parrot', 'Whale', 'Platypus', 'Ostrich', 'Flying squirrel', 'Peacock']);
             dragAndDropIntoCategoriesPage.steps.expandMaxCapacityPerDropzoneDropdown();
             dragAndDropIntoCategoriesPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('2');
-            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Bat': 0, 'Eagle': 1, 'Platypus': 2, 'Ostrich': 3, 'Whale': 4 });
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Bat': 0, 'Eagle': 1, 'Platypus': 2, 'Ostrich': 3, 'Whale': 4, 'Parrot': 5 });
             dragAndDropIntoCategoriesPage.steps.selectAutoScoredScoringSubtype('Per dropzone');
             dragAndDropIntoCategoriesPage.steps.allotPoints(1.65);
-             //dragAndDropIntoCategoriesPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+            //dragAndDropIntoCategoriesPage.steps.checkAllowStudentToCheckAnswerCheckbox();
         });
 
         it('When the user sets \'Rounding\' to \'Round down if <=0.99\', attempts the question partially correct with an option such that points of the correctly attempted options has decimal value greater than 0.5 and less than 0.99, then the points awarded should be rounded down to the nearest integer value', () => {
@@ -227,7 +227,7 @@ describe('Create item page - Drag and drop into categories: Per dropzone scoring
             dragAndDropIntoCategoriesPage.steps.allotPoints(1.65);
             dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
             dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Bat': 0 });
-            dragAndDropIntoCategoriesPage.steps.verifyPreviewScore(2, 9);
+            dragAndDropIntoCategoriesPage.steps.verifyPreviewScore(2, 9.9);
         });
 
         it('When \'Round negative score to zero\' is in checked state and the user attempts the question incorrectly, then the user should be awarded with 0 points', () => {
@@ -238,7 +238,7 @@ describe('Create item page - Drag and drop into categories: Per dropzone scoring
             dragAndDropIntoCategoriesPage.steps.allotPenaltyPoints(4);
             dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
             dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Bat': 2 });
-            dragAndDropIntoCategoriesPage.steps.verifyPreviewScore(0, 9);
+            dragAndDropIntoCategoriesPage.steps.verifyPreviewScore(0, 9.9);
         });
 
         it('When the user unchecks \'Round negative score to zero\' checkbox and the user attempts the question incorrectly, then the user should be awarded with negative points', () => {
@@ -246,7 +246,7 @@ describe('Create item page - Drag and drop into categories: Per dropzone scoring
             dragAndDropIntoCategoriesPage.steps.uncheckRoundNegativeScoresToZeroCheckbox();
             dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
             dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Bat': 2 });
-            dragAndDropIntoCategoriesPage.steps.verifyPreviewScore(-4, 9);
+            dragAndDropIntoCategoriesPage.steps.verifyPreviewScore(-4, 9.9);
         });
     });
 });

package/cypress/e2e/ILC/DragAndDropIntoCategoriesNew/additionalSettings.js

@@ -0,0 +1,169 @@
+import { dragAndDropIntoCategoriesPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const enumerationOptions = {
+    'Numerical': ['1', '2'],
+    'Alphabet (uppercase)': ['A', 'B'],
+    'Alphabet (lowercase)': ['a', 'b'],
+    'Roman numeral (uppercase)': ['I', 'II'],
+    'Roman numeral (lowercase)': ['i', 'ii'],
+};
+
+//Failing due to https://redmine.zeuslearning.com/issues/574098
+describe('Drag and drop into categories - Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional Settings: Grading view - Contents in edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.expandAdditionalSettings();
+        });
+
+        dragAndDropIntoCategoriesPage.tests.verifyGradingViewEnumerationSectionContents('Dropzone');
+
+        it('When the user selects "Without enumeration" radio button, the identifiers section should disappear', () => {
+            dragAndDropIntoCategoriesPage.steps.selectEnumerationType('without enumeration');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.identifiersLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.numericalToggleButton(), 'notExist');
+        });
+
+        it('When the user selects "With enumeration" radio button again, the identifiers section should appear again', () => {
+            dragAndDropIntoCategoriesPage.steps.selectEnumerationType('with enumeration');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.identifiersLabel(), 'visible');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.numericalToggleButton(), 'visible');
+        })
+    });
+
+    describe('Additional settings: Grading view - functionality in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.setRowsAndColumnsForQuestion();
+            dragAndDropIntoCategoriesPage.steps.addMultipleOptionFields(2);
+            dragAndDropIntoCategoriesPage.steps.addInputToOptionsInputField(['Bat', 'Eagle', 'Parrot', 'Whale']);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Bat': 0, 'Eagle': 1, 'Parrot': 1 });
+            dragAndDropIntoCategoriesPage.steps.allotPoints(20);
+            dragAndDropIntoCategoriesPage.steps.expandAdditionalSettings();
+        });
+
+        Object.keys(enumerationOptions).forEach(option => {
+            it(`When "${option}" toggle button is selected in the dropzone identifiers section, then on switching to the preview tab dropzone numeration should not be displayed`, () => {
+                dragAndDropIntoCategoriesPage.steps.selectIdentifierToggleButton(option);
+                dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+                utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.dropzoneCellNumeration(), 'notExist');
+            });
+
+            it(`When the user switches to the "Grading view", then the "${option}" numeration should be displayed in the dropzones as well as correct answer options in the correct answer section`, () => {
+                dragAndDropIntoCategoriesPage.steps.switchToGradingView();
+                dragAndDropIntoCategoriesPage.steps.verifyDropzoneCellNumerationPreviewTab(enumerationOptions[option]);
+                dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerContainerNumeration(enumerationOptions[option]);
+                cy.log('Post step: Switch to Edit tab')
+                dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            });
+        });
+
+        it('When the user selects "without enumeration" radio button, then in the "Grading view", numeration should not be displayed for dropzones and in the correct answer section, the entire question preview should be displayed with correct answers', () => {
+            dragAndDropIntoCategoriesPage.steps.selectEnumerationType('without enumeration');
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.switchToGradingView();
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.dropzoneCellNumeration(), 'notExist');
+        });
+    });
+
+    describe('Additional settings: ARIA label for dropzones - Contents in edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.expandAdditionalSettings();
+        });
+
+        it(`"ARIA label for dropzones" label should be displayed`, () => {
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.ariaLabelSectionLabel(), `ARIA label for dropzones`);
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.ariaLabelSectionLabel(), 'visible');
+        });
+
+        it('Two input fields with numeration and "Enter aria label" placeholder should be displayed by default', () => {
+            utilities.verifyElementCount(dragAndDropIntoCategoriesPage.ariaLabelInputField(), 9);
+            dragAndDropIntoCategoriesPage.steps.verifyAriaLabelTextInputFields(0);
+            dragAndDropIntoCategoriesPage.steps.verifyAriaLabelTextInputFields(1);
+        });
+
+        it(`CSS of "ARIA label for dropzones" section`, { tags: 'css' }, () => {
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.ariaLabelSectionLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.ariaLabelInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('When the users adds a new dropzone, the count of the aria label text input fields should update accordingly', () => {
+            dragAndDropIntoCategoriesPage.steps.increaseColumnInputStepperCount(1);
+            utilities.verifyElementCount(dragAndDropIntoCategoriesPage.ariaLabelInputField(), 12);
+            dragAndDropIntoCategoriesPage.steps.verifyAriaLabelTextInputFields(2);
+        });
+
+        it('When the user deletes any dropzone, the count of the aria label texts input fields should update accordingly', () => {
+            dragAndDropIntoCategoriesPage.steps.decreaseColumnInputStepperCount(1);
+            utilities.verifyElementCount(dragAndDropIntoCategoriesPage.ariaLabelInputField(), 9);
+            dragAndDropIntoCategoriesPage.steps.verifyAriaLabelTextInputFields(0);
+            dragAndDropIntoCategoriesPage.steps.verifyAriaLabelTextInputFields(1);
+        });
+
+        it('When the user has not set \'ARIA label\' input field, then default aria labels should be present for the dropzones of the specify correct answer section', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyDropzoneAriaLabelSpecifyCorrectAnswerSection(0, 'dropzone-cell');
+            dragAndDropIntoCategoriesPage.steps.verifyDropzoneAriaLabelSpecifyCorrectAnswerSection(1, 'dropzone-cell');
+        });
+
+        it('When the user sets aria label, then in the dropzones of the specify correct answer section, the aria labels should also update', () => {
+            dragAndDropIntoCategoriesPage.steps.enterTextInAriaLabelInputField(0, 'Add answer for response 1');
+            dragAndDropIntoCategoriesPage.steps.verifyDropzoneAriaLabelSpecifyCorrectAnswerSection(0, 'Add answer for response 1');
+            dragAndDropIntoCategoriesPage.steps.verifyDropzoneAriaLabelSpecifyCorrectAnswerSection(1, 'dropzone-cell');
+        });
+    });
+
+    describe('Additional settings: ARIA label for dropzones - functionality in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.expandAdditionalSettings();
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not set \'ARIA label\' input field, then default aria labels should be present for the dropzones in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyDropzoneAriaLabelPreviewTab(0, 'dropzone-cell');
+            dragAndDropIntoCategoriesPage.steps.verifyDropzoneAriaLabelPreviewTab(1, 'dropzone-cell');
+        });
+
+        it('When the user has set \'ARIA label\', then it should be present for the dropzones in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.enterTextInAriaLabelInputField(0, 'Correct response 1');
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyDropzoneAriaLabelPreviewTab(0, 'Correct response 1');
+            dragAndDropIntoCategoriesPage.steps.verifyDropzoneAriaLabelPreviewTab(1, 'dropzone-cell');
+        });
+
+        it('Accessibility of input field in preview tab when custom \'ARIA label\' is set', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.previewTabQuestionWrapper());
+        });
+
+        it('When the user clears the set value in the \'ARIA label\' input field, then the default aria labels should be present for the dropzones in the preview tab', () => {
+            dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+            dragAndDropIntoCategoriesPage.steps.clearTextInAriaLabelInputField(0);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyDropzoneAriaLabelPreviewTab(0, 'dropzone-cell');
+            dragAndDropIntoCategoriesPage.steps.verifyDropzoneAriaLabelPreviewTab(1, 'dropzone-cell');
+        });
+    });
+});

package/cypress/e2e/ILC/DragAndDropIntoCategoriesNew/editTabBasicSection.js

@@ -165,7 +165,7 @@ describe('Create item page - Drag and drop into categories: Question instruction
         });
 
         it('When user has navigated to the rightmost column of the table, then the right arrow navigation button should be disabled', () => {
-            for (let index = 9; index < 16; index++) {
+            for (let index = 9; index < 17; index++) {
                 dragAndDropIntoCategoriesPage.steps.clickOnRightArrowNavigationButton();
             }
             utilities.verifyElementDisabled(dragAndDropIntoCategoriesPage.rightArrowNavigationButton());

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

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

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

@@ -0,0 +1,119 @@
+import { dragAndDropIntoCategoriesPage } 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'];
+
+//Failing die to https://redmine.zeuslearning.com/issues/574098
+describe('Drag and drop into categories - Style and layout customization', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Style and Layout customization accordion: Draggable options panel placement specify correct answer', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('\'Draggable option panel\' label should be displayed', () => {
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.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(dragAndDropIntoCategoriesPage.panelPlacementLabel(), 'Panel placement');
+            panelPlacement.forEach((option) => {
+                utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.panelPlacementOptions(option), 'exist');
+            });
+            dragAndDropIntoCategoriesPage.steps.verifyPanelPlacementOptionSelected('Bottom');
+        });
+
+        it('By default the option panel placement should be at the bottom', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyPanelPlacementSpecifyCorrectAnswerSection('Bottom');
+        });
+
+        panelPlacement.forEach((option) => {
+            it(`When user selects ${option} option from the Panel placement options then panel placement should be at the ${option} in specify correct answer section`, () => {
+                dragAndDropIntoCategoriesPage.steps.selectPanelPlacementOption(option)
+                dragAndDropIntoCategoriesPage.steps.verifyPanelPlacementSpecifyCorrectAnswerSection(option);
+            });
+        });
+    });
+
+    describe('Style and Layout customization accordion: Draggable options panel placement preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+        });
+
+        it('By default the option panel placement should be at the bottom', () => {
+            dragAndDropIntoCategoriesPage.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`, () => {
+                dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+                dragAndDropIntoCategoriesPage.steps.selectPanelPlacementOption(option)
+                dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+                dragAndDropIntoCategoriesPage.steps.verifyPanelPlacementPreviewTab(option);
+            });
+        });
+    });
+
+    describe('Style and Layout customization accordion: Draggable Option alignment in panel specify correct answer', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.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(dragAndDropIntoCategoriesPage.optionAlignmentInPanelLabel(), 'Option alignment in panel');
+            optionAlignment.forEach((option) => {
+                utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.optionAlignmentInPanelOptions(option.toLowerCase()), 'exist');
+            });
+            dragAndDropIntoCategoriesPage.steps.verifyOptionAlignmentInPanelOptionSelected('left');
+        });
+
+        it('By default the option alignment in panel placement should be at the left', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyOptionAlignmentInPanelInSpecifyCorrectAnswer('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 specify correct answer section`, () => {
+                dragAndDropIntoCategoriesPage.steps.selectOptionAlignmentInPanelOption(option.toLowerCase());
+                dragAndDropIntoCategoriesPage.steps.verifyOptionAlignmentInPanelInSpecifyCorrectAnswer(option);
+            });
+        });
+    });
+
+    describe('Style and Layout customization accordion: Draggable Option alignment in panel preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+        });
+
+        it('By default the option alignment in panel placement should be at the left', () => {
+            dragAndDropIntoCategoriesPage.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`, () => {
+                dragAndDropIntoCategoriesPage.steps.switchToEditTab();
+                dragAndDropIntoCategoriesPage.steps.selectOptionAlignmentInPanelOption(option.toLowerCase());
+                dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+                dragAndDropIntoCategoriesPage.steps.verifyOptionAlignmentInPanelInPreviewTab(option);
+            });
+        });
+    });
+});