itemengine-cypress-automation 1.0.248-23rdSeptUpdates-8103a8f.0 → 1.0.248

package/cypress/e2e/ILC/ChartsBar/Scoring/partialEqualWeightsAlternativePointsGreaterThanCorrectPoints.js

@@ -329,7 +329,7 @@ describe('Create item page - Charts - Bar: Partial equal weights scoring with al
             chartsBarPage.steps.setBarValueInPreviewTab({ barIndex: 2, value: 5, range: 10 });
             chartsBarPage.steps.setBarValueInPreviewTab({ barIndex: 3, value: 4, range: 10 });
             chartsBarPage.steps.setBarValueInPreviewTab({ barIndex: 4, value: 6, range: 10 });
-            chartsBarPage.steps.verifyPreviewScore(8, 20);
+            chartsBarPage.steps.verifyPreviewScore(12.5, 20);
             chartsBarPage.steps.switchToGradingView();
             chartsBarPage.steps.verifyBarCorrectIncorrectIconInPreviewTab(0, 'incorrect');
             chartsBarPage.steps.verifyBarCorrectIncorrectIconNotExistsInPreviewTab(1);

package/cypress/e2e/ILC/ChartsBar/Scoring/partialEqualWeightsCorrectPointsGreaterThanAlternativePoints.js

@@ -328,7 +328,7 @@ describe('Create item page - Charts - Bar: Partial equal weights scoring with al
 
             chartsBarPage.steps.setBarValueInPreviewTab({ barIndex: 3, value: 8, range: 10 });
             chartsBarPage.steps.setBarValueInPreviewTab({ barIndex: 4, value: 6, range: 10 });
-            chartsBarPage.steps.verifyPreviewScore(8, 20);
+            chartsBarPage.steps.verifyPreviewScore(12.5, 20);
             chartsBarPage.steps.switchToGradingView();
             chartsBarPage.steps.verifyBarCorrectIncorrectIconInPreviewTab(0, 'correct');
             chartsBarPage.steps.verifyBarCorrectIncorrectIconNotExistsInPreviewTab(1);

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

@@ -123,12 +123,12 @@ describe('Create item page - Drag and drop into categories: All or nothing with
             dragAndDropIntoCategoriesPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Flying squirrel': 0, 'Eagle': 1, 'Peacock': 1, 'Platypus': 4 });
             dragAndDropIntoCategoriesPage.steps.verifyPreviewScore(0, 20);
             dragAndDropIntoCategoriesPage.steps.switchToGradingView();
-            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(0);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(0);
             dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(1);
-            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(2);
-            dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(3);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(2);
+            dragAndDropIntoCategoriesPage.steps.verifyIncorrectOptionIcon(3);
             dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
-            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount([['Flying squirrel'], ['Eagle', 'Peacock'], ['Ostrich'], ['Platypus']], ['1', '2', '4', '5']);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount([['Bat'], ['Eagle', 'Parrot'], ['Platypus'], ['Ostrich'], ['Whale']], ['1', '2', '3', '4', '5']);
             dragAndDropIntoCategoriesPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
             /*cy.log('When the user has attempted the question with partially correct with all the cells correct as per the alternative accordion but one cell incomplete and clicks on \'Check answer\' button, then correct icon should be displayed besides the response from the correct accordion, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
             dragAndDropIntoCategoriesPage.steps.checkAnswer();
@@ -149,7 +149,7 @@ describe('Create item page - Drag and drop into categories: All or nothing with
             dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(1);
             dragAndDropIntoCategoriesPage.steps.verifyCorrectOptionIcon(2);
             dragAndDropIntoCategoriesPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
-            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount([['Flying squirrel'], ['Eagle', 'Peacock'], ['Ostrich'], ['Platypus']], ['1', '2', '4', '5']);
+            dragAndDropIntoCategoriesPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount([['Bat'], ['Eagle', 'Parrot'], ['Platypus'], ['Ostrich'], ['Whale']], ['1', '2', '3', '4', '5']);
             dragAndDropIntoCategoriesPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
             /*cy.log('When the user has attempted the question with partially correct with more number of options exclusively from the alternative accordion but with one option common across both accordion and clicks on \'Check answer\' button, then correct icon should be displayed besides the responses from the alternative accordion response as well as common response, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
             dragAndDropIntoCategoriesPage.steps.checkAnswer();

package/cypress/e2e/ILC/DrawingResponse/drawingResponseCustomizeAdditionalOptions.js

@@ -37,6 +37,8 @@ describe('Create item page - Drawing response: Customize special characters, Cus
             //Add this verification once https://redmine.zeuslearning.com/issues/555008 is resolved
             cy.log('Post-step: Switching to edit tab');
             drawingResponsePage.steps.switchToEditTab();
+            //Need to remove this once https://redmine.zeuslearning.com/issues/577356 is resolved
+            drawingResponsePage.steps.expandCustomizeToolbarOptionsAndControlsAccordion();
         });
 
         it('When the user checks the \'Show only custom special characters\' radio button, \'Custom special characters\' label and input field should be displayed. A \'Preview\' hyperlink should be displayed next to the label', () => {
@@ -62,6 +64,8 @@ describe('Create item page - Drawing response: Customize special characters, Cus
             drawingResponsePage.steps.verifyCustomSpecialCharactersDisplayedInPreviewTab(customSpecialCharacters);
             cy.log('Post-step: Switching to edit tab');
             drawingResponsePage.steps.switchToEditTab();
+            //Need to remove this once https://redmine.zeuslearning.com/issues/577356 is resolved
+            drawingResponsePage.steps.expandCustomizeToolbarOptionsAndControlsAccordion();
         });
 
         it('CSS of Customize special characters', { tags: 'css' }, () => {
@@ -231,6 +235,8 @@ describe('Create item page - Drawing response: Customize special characters, Cus
             drawingResponsePage.steps.verifyMathCharactersPopupCategoriesAndSymbols(newSelectedCategoryList);
             cy.log('Post-step: Switching to edit tab');
             drawingResponsePage.steps.switchToEditTab();
+            //Need to remove this once https://redmine.zeuslearning.com/issues/577356 is resolved
+            drawingResponsePage.steps.expandCustomizeToolbarOptionsAndControlsAccordion();
         });
 
         it('CSS of Customize math characters', { tags: 'css' }, () => {
@@ -412,6 +418,8 @@ describe('Create item page - Drawing response: Customize special characters, Cus
             cy.log('Post-step: Closing stroke color color popup, switching to edit tab and deselecting polygon toolbar option');
             drawingResponsePage.steps.closeSecondaryPopup();
             drawingResponsePage.steps.switchToEditTab();
+            //Need to remove this once https://redmine.zeuslearning.com/issues/577356 is resolved
+            drawingResponsePage.steps.expandCustomizeToolbarOptionsAndControlsAccordion();
             drawingResponsePage.steps.deselectToolbarOptionsAndControlsFormattingOptionsTiles([`${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[11].displayName}`]);
         });
 

package/cypress/e2e/ILC/EssayResponse/equationEditor.smoke.js

@@ -293,6 +293,8 @@ describe('Create question page - Essay Response: Equation Editor functionality',
                 utilities.verifyElementVisibilityState(equationEditorFlyout.categoryCharactersWrapper(), 'notExist');
                 cy.log('Post step: Switching to Edit tab')
                 essayResponsePage.steps.switchToEditTab();
+                //Need to remove this once https://redmine.zeuslearning.com/issues/577356 is resolved
+                essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
             });
 
             //https://redmine.zeuslearning.com/issues/530205

package/cypress/e2e/ILC/FillInTheGapsDragAndDropNew/dropzoneAlternateAnswerPopup.js

@@ -153,7 +153,7 @@ describe('Create item page - Fill in the gaps with text: Dropzone level alternat
 
         it('When user opens the alternate answer popup for another dropzone, then alternate answer popup with the title and options as per the corresponding dropzone should be displayed', () => {
             fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Leaves': 1 });
-            fillInTheGapsDragAndDropPage.steps.clickOnAddAlternateButton(1);
+            fillInTheGapsDragAndDropPage.steps.clickOnAddAlternateButton(2);
             utilities.verifyInnerText(fillInTheGapsDragAndDropPage.alternateAnswerPopupTitle(), 'Dropzone 2 alternate answer(s)');
             utilities.verifyInnerText(fillInTheGapsDragAndDropPage.alternateAnswerPopupHelpText(), 'Select alternate answer(s).');
             fillInTheGapsDragAndDropPage.steps.verifyDropzoneAlternateAnswerPopupOptions(['Petals', 'Roots', 'Stem']);

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

@@ -282,7 +282,6 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
             fillInTheGapsOverImageDropdownPage.steps.verifyTextColorOfTextBoxInPreviewTab('rgb(0, 0, 46)');
             fillInTheGapsOverImageDropdownPage.steps.verifyTextOfTextBoxInPreviewTab('Inserted text');
         });
-        
         //remove the following skips when https://redmine.zeuslearning.com/issues/574944 is resolved.
         it.skip('When the user clicks on the undo button in edit tab, then previous action should be reversed and same should reflect in preview tab', () => {
             fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
@@ -424,4 +423,4 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
 
         fillInTheGapsOverImageDropdownPage.tests.verifyImageNotExistPreviewTab();
     });
-})
+});

package/cypress/e2e/ILC/ListOrderingNew/styleAndLayoutCustomizationDropDown.js

@@ -0,0 +1,166 @@
+import { listOrderingPage } from "../../../pages";
+import { colorPopupComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+
+describe('Create item page - List ordering: Style and layout Component', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Style and layout Component - Options - Fill color, border color, border style', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Dropdown menu');
+        });
+
+        listOrderingPage.tests.verifyStyleAndLayoutCustomizationAccordionProperties();
+
+        listOrderingPage.tests.verifyFillColorSectionContents();
+
+        listOrderingPage.tests.verifyBorderColorSectionContents();
+
+        listOrderingPage.tests.verifyBorderStyleSectionContents('Solid');
+
+        listOrderingPage.tests.verifyFillColorTooltips();
+
+        listOrderingPage.tests.verifyBorderColorTooltips();
+
+        it('When user clicks on edit color then color pop up  panel will be visible', () => {
+            listOrderingPage.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();
+        });
+
+        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', () => {
+            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('Style and Layout customization accordion: Options - Fill color, border color, border style - Edit Tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Dropdown menu');
+            listOrderingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        listOrderingPage.tests.verifyFillColorFunctionalityEditTab('DropDown');
+
+        listOrderingPage.tests.verifyBorderColorFunctionalityEditTab('DropDown');
+
+        listOrderingPage.tests.verifyBorderStyleFunctionalityEditTab('DropDown');
+    });
+
+    describe('Style and Layout customization accordion: Options - Fill color, border color, border style - Preview Tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Dropdown menu');
+            listOrderingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        listOrderingPage.tests.verifyFillColorFunctionalityPreviewTab('DropDown');
+
+        listOrderingPage.tests.verifyBorderColorFunctionalityPreviewTab('DropDown');
+
+        listOrderingPage.tests.verifyBorderStyleFunctionalityPreviewTab('DropDown');
+    });
+
+    describe('Style and Layout customization accordion: Options - Drop Down - Edit Tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Dropdown menu');
+            listOrderingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('\'List container\' label will be displayed', () => {
+            utilities.verifyElementVisibilityState(listOrderingPage.listContainerAndDropDownLabel(), 'visible');
+            utilities.verifyInnerText(listOrderingPage.listContainerAndDropDownLabel(), 'Dropdown');
+        });
+
+        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(listOrderingPage.fillColorLabelListContainerAndDropDown(), 'Fill color');
+            listOrderingPage.steps.verifyColorBlockColor(4, 'rgb(245, 248, 255)');
+            listOrderingPage.steps.verifyColorBlockSelectedState(4);
+            listOrderingPage.steps.verifyColorBlockColor(5, css.color.none);
+            utilities.verifyInnerText(utilities.getNthElement(listOrderingPage.editColorButton(), 2), 'Edit color');
+            utilities.verifyElementVisibilityState(listOrderingPage.editColorButton().eq(2), 'visible');
+            listOrderingPage.steps.selectPositionForAllOptionsSpecifyCorrectAnswerSection([{ optionIndex: 0, position: '2' }, { optionIndex: 1, position: '3' }, { optionIndex: 2, position: '4' }, { optionIndex: 3, position: '1' }])
+        });
+
+        listOrderingPage.tests.verifyFillColorFunctionalityOfListContainerOrDropDownEditTab('DropDown');
+
+        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(listOrderingPage.borderColorLabelListContainerAndDropDown(), 'Border color');
+            utilities.verifyInnerText(utilities.getNthElement(listOrderingPage.editColorButton(), 3), 'Edit color');
+            utilities.verifyElementVisibilityState(listOrderingPage.editColorButton().eq(3), 'visible');
+            listOrderingPage.steps.verifyColorBlockColor(6, 'rgb(82, 0, 255)');
+            listOrderingPage.steps.verifyColorBlockSelectedState(6);
+            listOrderingPage.steps.verifyColorBlockColor(7, css.color.none);
+        });
+
+        listOrderingPage.tests.verifyBorderColorFunctionalityOfListOrDropDownContainerEditTab('DropDown');
+
+        it(`"Border style" label and three toggle buttons should be displayed - "Dotted", "Solid", "None". By default "Solid" button should be in selected state`, () => {
+            utilities.verifyInnerText(listOrderingPage.borderStyleLabel(), 'Border style');
+            utilities.verifyElementVisibilityState(listOrderingPage.dottedBorderStyleToggleButtonListContainerAndDropDown(), 'visible');
+            utilities.verifyInnerText(listOrderingPage.dottedBorderStyleToggleButtonListContainerAndDropDown(), 'Dotted');
+            utilities.verifyElementVisibilityState(listOrderingPage.solidBorderStyleToggleButtonListContainerAndDropDown(), 'visible');
+            utilities.verifyInnerText(listOrderingPage.solidBorderStyleToggleButtonListContainerAndDropDown(), 'Solid');
+            utilities.verifyElementVisibilityState(listOrderingPage.noneBorderStyleToggleButton(), 'visible');
+            utilities.verifyInnerText(listOrderingPage.noneBorderStyleToggleButton(), 'None');
+            listOrderingPage.steps.verifyBorderStyleToggleButtonSelectedStateListContainer('Solid');
+        });
+
+        listOrderingPage.tests.verifyBorderStyleFunctionalityOfListContainerOrDropDownContainerEditTab('DropDown');
+    });
+
+    describe('Style and Layout customization accordion: Options - Drop Down - Preview Tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Dropdown menu');
+            listOrderingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        listOrderingPage.tests.verifyFillColorFunctionalityOfDropDownContainerPreviewTab('DropDown');
+
+        listOrderingPage.tests.verifyBorderColorFunctionalityOfDropDownContainerPreviewTab('DropDown');
+
+        listOrderingPage.tests.verifyBorderStyleFunctionalityOfDropDownPreviewTab('DropDown');
+    });
+});      

package/cypress/e2e/ILC/ListOrderingNew/styleAndLayoutCustomizationSameList.js

@@ -190,6 +190,7 @@ describe('Create item page - List ordering: Style and layout Component', () => {
         it('When user selects \'Without Border\' option style like \'Fill color\', \'Border color\', \'Border style\' and \'Connector settings\' will be removed from style and Layout customization accordion', () => {
             utilities.verifyElementVisibilityState(listOrderingPage.fillAndBorderColorWrapper(), 'notExist');
             utilities.verifyElementVisibilityState(listOrderingPage.borderStyleLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(listOrderingPage.connectorSettingLabel(), 'notExist');
         });
     });
 

package/cypress/e2e/ILC/ListOrderingNew/styleAndLayoutCustomizationSeperateList.js

@@ -0,0 +1,344 @@
+import { listOrderingPage } from "../../../pages";
+import { colorPopupComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+
+describe('Create item page - List ordering: Style and layout Component', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Style and layout Component - Options - Fill color, border color, border style', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Reorder as a separate list');
+        });
+
+        listOrderingPage.tests.verifyStyleAndLayoutCustomizationAccordionProperties();
+
+        listOrderingPage.tests.verifyFillColorSectionContents();
+
+        listOrderingPage.tests.verifyBorderColorSectionContents();
+
+        listOrderingPage.tests.verifyBorderStyleSectionContents('Solid');
+
+        listOrderingPage.tests.verifyFillColorTooltips();
+
+        listOrderingPage.tests.verifyBorderColorTooltips();
+
+        it('When user clicks on edit color then color pop up  panel will be visible', () => {
+            listOrderingPage.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();
+        });
+
+        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', () => {
+            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('Style and Layout customization accordion: Options - Fill color, border color, border style - Edit Tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Reorder as a separate list');
+            listOrderingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        listOrderingPage.tests.verifyFillColorFunctionalityEditTab('SeperateList');
+
+        listOrderingPage.tests.verifyBorderColorFunctionalityEditTab('SeperateList');
+
+        listOrderingPage.tests.verifyBorderStyleFunctionalityEditTab('SeperateList');
+    });
+
+    describe('Style and Layout customization accordion: Options - Fill color, border color, border style - Preview Tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Reorder as a separate list');
+            listOrderingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        listOrderingPage.tests.verifyFillColorFunctionalityPreviewTab('SeperateList');
+
+        listOrderingPage.tests.verifyBorderColorFunctionalityPreviewTab('SeperateList');
+
+        listOrderingPage.tests.verifyBorderStyleFunctionalityPreviewTab('SeperateList');
+    });
+
+    describe('Style and Layout customization accordion: Options - Drag handle icon - Edit Tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Reorder as a separate list');
+            listOrderingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('\'Options\' label will be displayed', () => {
+            utilities.verifyElementVisibilityState(listOrderingPage.optionsLabel(), 'visible');
+            utilities.verifyInnerText(listOrderingPage.optionsLabel(), 'Options');
+        });
+
+        it('Drag handle icon label will be displayed with 3 options and by default the first option will be selected draggable options', () => {
+            utilities.verifyInnerText(listOrderingPage.dragHandleIconLabel(), 'Drag handle icon');
+            utilities.verifyElementCount(listOrderingPage.dragHandleOptions(), 3);
+            listOrderingPage.steps.verifyDragHandleOptionSelected(0);
+        });
+
+        it('By default, the default selected drag handle will be displayed in the specify correct answer section draggable options', () => {
+            listOrderingPage.steps.verifyDragHandleIconSpecifyCorrectAnswer('drag icon', 'SeperateList');
+        });
+
+        it('When user selects arrows drag handle icon then arrow icons will be displayed the specify correct answer section draggable options', () => {
+            listOrderingPage.steps.selectDragHandleOption(1);
+            listOrderingPage.steps.verifyDragHandleIconSpecifyCorrectAnswer('arrow icon', 'SeperateList');
+        });
+
+        it('When user selects none option then drag handles will not be displayed for the specify correct answer section draggable options', () => {
+            listOrderingPage.steps.selectDragHandleOption(2);
+            listOrderingPage.steps.verifyDragHandleIconSpecifyCorrectAnswer('none', 'SeperateList');
+        });
+    });
+
+    describe('Style and Layout customization accordion: Options - Drag handle icon - Preview Tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Reorder as a separate list');
+            listOrderingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('By default, the default selected drag handle will be displayed in the preview tab', () => {
+            listOrderingPage.steps.switchToPreviewTab();
+            listOrderingPage.steps.verifyDragHandleIconSpecifyCorrectAnswer('drag icon', 'SeperateList');
+        });
+
+        it('When user selects arrows drag handle icon then arrow icons will be displayed in preview tab', () => {
+            listOrderingPage.steps.switchToEditTab();
+            listOrderingPage.steps.selectDragHandleOption(1);
+            listOrderingPage.steps.switchToPreviewTab();
+            listOrderingPage.steps.verifyDragHandleIconSpecifyCorrectAnswer('arrow icon', 'SeperateList');
+        });
+
+        it('When user selects none option then drag handles will not be displayed in the preview tab', () => {
+            listOrderingPage.steps.switchToEditTab();
+            listOrderingPage.steps.selectDragHandleOption(2);
+            listOrderingPage.steps.switchToPreviewTab();
+            listOrderingPage.steps.verifyDragHandleIconSpecifyCorrectAnswer('none', 'SeperateList');
+        });
+    });
+
+    describe('Style and Layout customization accordion: Options - Options Style - Edit Tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Reorder as a separate list');
+            listOrderingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('\'Options style\' label will be displayed', () => {
+            utilities.verifyElementVisibilityState(listOrderingPage.optionStyleLabel(), 'visible');
+            utilities.verifyInnerText(listOrderingPage.optionStyleLabel(), 'Option style');
+        });
+
+        it('\'With Border\' and \'Without Border\' option style button will be present', () => {
+            utilities.verifyElementVisibilityState(listOrderingPage.withBorderOptionStyleButton(), 'visible');
+            utilities.verifyInnerText(listOrderingPage.withBorderOptionStyleButton(), 'With border');
+            utilities.verifyElementVisibilityState(listOrderingPage.withoutBorderOptionStyleButton(), 'visible');
+            utilities.verifyInnerText(listOrderingPage.withoutBorderOptionStyleButton(), 'Without border');
+        });
+
+        it('By default, \'With Border\' option style will be selected and the borders will be present in the specify correct answer section', () => {
+            listOrderingPage.steps.verifyWithBorderOptionStyleButtonSelected();
+            listOrderingPage.steps.verifyBorderStyleInSpecifyCorrectAnswerForSeperateList("1px solid rgb(107, 139, 255)");
+        });
+
+        it('When user selects \'Without Border\' option style the borders will not be present in the specify correct answer section', () => {
+            listOrderingPage.steps.selectWithoutBorderOptionStyleButton();
+            listOrderingPage.steps.verifyWithoutBorderOptionStyleButtonSelected();
+            listOrderingPage.steps.verifyBorderStyleInSpecifyCorrectAnswerForSeperateList("0px none rgba(0, 0, 0, 0.87)");
+        });
+
+        it('When user selects \'Without Border\' option style like \'Fill color\', \'Border color\' and \'Border style\' will be removed from style and Layout customization accordion', () => {
+            utilities.verifyElementVisibilityState(listOrderingPage.fillAndBorderColorWrapper(), 'notExist');
+        });
+    });
+
+    describe('Style and Layout customization accordion: Options - Options Style - Preview Tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Reorder as a separate list');
+            listOrderingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('By default, \'With Border\' option style will be selected and the borders will be present in the preview tab', () => {
+            listOrderingPage.steps.verifyWithBorderOptionStyleButtonSelected();
+            listOrderingPage.steps.switchToPreviewTab();
+            listOrderingPage.steps.verifyBorderStyleInSpecifyCorrectAnswerForSeperateList("1px solid rgb(107, 139, 255)");
+        });
+
+        it('When user selects \'Without Border\' option style the borders will not be present in the preview tab', () => {
+            listOrderingPage.steps.switchToEditTab();
+            listOrderingPage.steps.selectWithoutBorderOptionStyleButton();
+            listOrderingPage.steps.verifyWithoutBorderOptionStyleButtonSelected();
+            listOrderingPage.steps.switchToPreviewTab();
+            listOrderingPage.steps.verifyBorderStyleInSpecifyCorrectAnswerForSeperateList("0px none rgb(0, 0, 46)");
+        });
+    });
+
+    describe('Style and Layout customization accordion: Options - List Container - Edit Tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Reorder as a separate list');
+            listOrderingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('\'List container\' label will be displayed', () => {
+            utilities.verifyElementVisibilityState(listOrderingPage.listContainerAndDropDownLabel(), 'visible');
+            utilities.verifyInnerText(listOrderingPage.listContainerAndDropDownLabel(), 'List container');
+        });
+
+        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(listOrderingPage.fillColorLabelListContainerAndDropDown(), 'Fill color');
+            listOrderingPage.steps.verifyColorBlockColor(4, "rgb(245, 248, 255)");
+            listOrderingPage.steps.verifyColorBlockSelectedState(4);
+            listOrderingPage.steps.verifyColorBlockColor(5, css.color.none);
+            utilities.verifyInnerText(utilities.getNthElement(listOrderingPage.editColorButton(), 2), 'Edit color');
+            utilities.verifyElementVisibilityState(listOrderingPage.editColorButton().eq(2), 'visible');
+        });
+
+        listOrderingPage.tests.verifyFillColorFunctionalityOfListContainerOrDropDownEditTab("ListContainer");
+
+        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(listOrderingPage.borderColorLabelListContainerAndDropDown(), 'Border color');
+            utilities.verifyInnerText(utilities.getNthElement(listOrderingPage.editColorButton(), 3), 'Edit color');
+            utilities.verifyElementVisibilityState(listOrderingPage.editColorButton().eq(3), 'visible');
+            listOrderingPage.steps.verifyColorBlockColor(6, "rgb(82, 0, 255)");
+            listOrderingPage.steps.verifyColorBlockSelectedState(6);
+            listOrderingPage.steps.verifyColorBlockColor(7, css.color.none);
+        });
+
+        listOrderingPage.tests.verifyBorderColorFunctionalityOfListOrDropDownContainerEditTab("ListContainer");
+
+        it(`"Border style" label and three toggle buttons should be displayed - "Dotted", "Solid", "None". By default "Dotted" button should be in selected state`, () => {
+            utilities.verifyInnerText(listOrderingPage.borderStyleLabelListContainer(), 'Border style');
+            utilities.verifyElementVisibilityState(listOrderingPage.dottedBorderStyleToggleButtonListContainerAndDropDown(), 'visible');
+            utilities.verifyInnerText(listOrderingPage.dottedBorderStyleToggleButtonListContainerAndDropDown(), 'Dotted');
+            utilities.verifyElementVisibilityState(listOrderingPage.solidBorderStyleToggleButtonListContainerAndDropDown(), 'visible');
+            utilities.verifyInnerText(listOrderingPage.solidBorderStyleToggleButtonListContainerAndDropDown(), 'Solid');
+            utilities.verifyElementVisibilityState(listOrderingPage.noneBorderStyleToggleButton(), 'visible');
+            utilities.verifyInnerText(listOrderingPage.noneBorderStyleToggleButton(), 'None');
+            listOrderingPage.steps.verifyBorderStyleToggleButtonSelectedStateListContainer('Dotted');
+        });
+
+        listOrderingPage.tests.verifyBorderStyleFunctionalityOfListContainerOrDropDownContainerEditTab("ListContainer");
+    });
+
+    describe('Style and Layout customization accordion: Options - List Container - Preview Tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Reorder as a separate list');
+            listOrderingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        listOrderingPage.tests.verifyFillColorFunctionalityOfListContainerPreviewTab("ListContainer");
+
+        listOrderingPage.tests.verifyBorderColorFunctionalityOfListConatinerPreviewTab("ListContainer");
+
+        listOrderingPage.tests.verifyBorderStyleFunctionalityOfListContainerPreviewTab("ListContainer");
+    });
+
+    describe('Style and Layout customization accordion: Options - Draggable Option Panel - Edit Tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Reorder as a separate list');
+            listOrderingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('\'Draggable Option Panel\' label and \'Panel placement\' label will be displayed', () => {
+            utilities.verifyElementVisibilityState(listOrderingPage.draggableOptionPanelLabel(), 'visible');
+            utilities.verifyInnerText(listOrderingPage.draggableOptionPanelLabel(), 'Draggable option panel');
+            utilities.verifyElementVisibilityState(listOrderingPage.panelPlacementLabel(), 'visible');
+            utilities.verifyInnerText(listOrderingPage.panelPlacementLabel(), 'Panel placement');
+        });
+
+        it('\'Left\' toggle button and \'Right\' toggle button should be visible and by default \'Left\' toggle button is selected', () => {
+            utilities.verifyElementVisibilityState(listOrderingPage.leftToggleButton(), 'visible');
+            utilities.verifyElementVisibilityState(listOrderingPage.rightToggleButton(), 'visible');
+            listOrderingPage.steps.verifyLeftToggleButtonSelected();
+            utilities.verifyElementVisibilityState(listOrderingPage.pannelPlacementRightToggle(), 'notExist');
+        });
+
+        it('When \'Right\' toggle button is selected then the options should shift to the right side of the container in specify correct answer section', () => {
+            listOrderingPage.steps.selectRightToggleButton();
+            listOrderingPage.steps.verifyRightToggleButtonSelected();
+            utilities.verifyElementVisibilityState(listOrderingPage.pannelPlacementRightToggle(), 'visible');
+        });
+    });
+
+    describe('Style and Layout customization accordion: Options - Draggable Option Panel - Preview Tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Reorder as a separate list');
+            listOrderingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('By default \'Left\' toggle button is selected and options should be at left side of the container in preview tab', () => {
+            listOrderingPage.steps.verifyLeftToggleButtonSelected();
+            listOrderingPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(listOrderingPage.pannelPlacementRightToggle(), 'notExist');
+        });
+
+        it('When \'Right\' toggle button is selected then the options should shift to the right side of the container in preview tab', () => {
+            listOrderingPage.steps.switchToEditTab();
+            listOrderingPage.steps.selectRightToggleButton();
+            listOrderingPage.steps.verifyRightToggleButtonSelected();
+            listOrderingPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(listOrderingPage.pannelPlacementRightToggle(), 'visible');
+        });
+    });
+});