itemengine-cypress-automation 1.0.78 → 1.0.80

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

@@ -0,0 +1,718 @@
+import { dialogBoxBase, drawingResponsePage } from "../../../pages";
+import utilities from "../../../support/helpers/utilities";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { colorPopupComponent } from "../../../pages/components";
+import { mathCharacters } from "../../../fixtures/drawingToolbarOptionsAdditionalOptionsAndSpecialAndMathCharacters";
+import { specialCharacters } from "../../../fixtures/drawingToolbarOptionsAdditionalOptionsAndSpecialAndMathCharacters";
+import { drawingToolbarOptionsAndAdditionalOptions } from "../../../fixtures/drawingToolbarOptionsAdditionalOptionsAndSpecialAndMathCharacters";
+const css = Cypress.env('css');
+
+const mathCharacterCategories = Object.values(mathCharacters.map((icon) => icon.categoryName));
+const specialCharactersCategories = Object.values(specialCharacters.map((icon) => icon.categoryName));
+const customSpecialCharacters = ['A', '1', '#'];
+
+describe('Create item page - Drawing response: Customize special characters, Customize math characters, Customize stroke/font color, Customize Fill color', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+    
+    describe('Customize special characters', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+            drawingResponsePage.steps.expandCustomizeToolbarOptionsAndControlsAccordion();
+            drawingResponsePage.steps.selectOptionsTiles([`${drawingToolbarOptionsAndAdditionalOptions.additionalOptions[0]}`]);
+        });
+
+        it('When the user checks the \'Customize special characters\' checkbox, \'Group by language\' and \'Show only custom special characters\' labels and radio buttons should be displayed. By default \'Group by language\' radio button should be checked', () => {
+            drawingResponsePage.steps.checkCustomizeSpecialCharactersCheckbox();
+            utilities.verifyElementVisibilityState(drawingResponsePage.groupByLanguageRadioButton(), 'exist');
+            utilities.verifyElementVisibilityState(drawingResponsePage.groupByLanguageLabel(), 'visible');
+            utilities.verifyElementVisibilityState(drawingResponsePage.showOnlyCustomSpecialCharactersRadioButton(), 'exist');
+            utilities.verifyElementVisibilityState(drawingResponsePage.showOnlyCustomSpecialCharactersLabel(), 'visible');
+            drawingResponsePage.steps.verifyGroupedByLanguageRadioButtonIsSelected();
+        });
+
+        it('\'Select special character languages\' label should be displayed. A \'Preview\' hyperlink should be displayed next to the label', () => {
+            utilities.verifyElementVisibilityState(drawingResponsePage.selectSpecialCharacterLanguagesLabel(), 'visible');
+            utilities.verifyInnerText(drawingResponsePage.selectSpecialCharacterLanguagesLabel(), 'Select special character languages');
+            utilities.verifyElementVisibilityState(drawingResponsePage.customizeSpecialCharactersPreviewButton(), 'visible');
+            utilities.verifyInnerText(drawingResponsePage.customizeSpecialCharactersPreviewButton(), 'Preview');
+        });
+
+        it(`A total of ${specialCharactersCategories.length} options should be displayed - ${specialCharactersCategories.join('')}. By default all language options should be in selected state`, () => {
+            drawingResponsePage.steps.verifyCustomizeSpecialOrMathCharactersCategoryTiles(specialCharactersCategories);
+            drawingResponsePage.steps.verifySelectedCustomizeSpecialOrMathCharactersCategoryTiles(specialCharactersCategories);
+        });
+
+        it('When the user clicks on the \'Preview\' hyperlink, a special characters popup should be displayed with all the special characters segregated according to all the language options. The user should be able to close the popup by clicking on the \'Close[X]\' button', () => {
+            drawingResponsePage.steps.clickOnCustomizeSpecialCharactersPreviewButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+            //drawingResponsePage.steps.verifySpecialCharactersPreviewPopupInEditTab(specialCharacters);
+            //Add this verification once https://redmine.zeuslearning.com/issues/555008 is resolved
+            cy.log('Post-step: Closing preview popup')
+            drawingResponsePage.steps.closeWarningPopup();
+        });
+
+        it('When the user deselects any language option and opens the special characters popup by clicking on the \'Preview\' hyperlink, then the popup contents should get updated accordingly', () => {
+            let newSelectedCategoryList = specialCharacters.slice(1);
+            drawingResponsePage.steps.clickOnSpecialOrMathCharactersCategoryTile(specialCharacters[0].categoryName);
+            drawingResponsePage.steps.verifySpecialOrMathCharacterCategoryTileIsNotSelected(specialCharacters[0].categoryName);
+            drawingResponsePage.steps.clickOnCustomizeSpecialCharactersPreviewButton();
+            //drawingResponsePage.steps.verifySpecialCharactersPreviewPopupInEditTab(specialCharacters);
+            //Add this verification once https://redmine.zeuslearning.com/issues/555008 is resolved
+            cy.log('Post-step: Closing preview popup')
+            drawingResponsePage.steps.closeWarningPopup();
+        });
+
+        it('When the user has deselected any language option and opens the special characters popup in the preview tab, then the popup contents should get updated accordingly', () => {
+            let newSelectedCategoryList = specialCharacters.slice(1);
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption('Text');
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption('Special characters');
+            //drawingResponsePage.steps.verifySpecialCharactersPopupCategorySymbols(specialCharacters);
+            //Add this verification once https://redmine.zeuslearning.com/issues/555008 is resolved
+            cy.log('Post-step: Switching to edit tab');
+            drawingResponsePage.steps.switchToEditTab();
+        });
+
+        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', () => {
+            drawingResponsePage.steps.selectShowOnlyCustomSpecialCharactersRadioButton();
+            utilities.verifyElementVisibilityState(drawingResponsePage.customSpecialCharactersInputField(), 'visible');
+            utilities.verifyInnerText(drawingResponsePage.customSpecialCharactersLabel(), 'Custom special characters');
+            utilities.verifyElementVisibilityState(drawingResponsePage.customSpecialCharactersLabel(), 'visible');
+            utilities.verifyElementVisibilityState(drawingResponsePage.customizeSpecialCharactersPreviewButton(), 'visible');
+        });
+
+        it('When the user specifies custom special characters, then on clicking on the \'Preview\' hyperlink, only the specified custom special characters should be displayed in the popup', () => {
+            drawingResponsePage.steps.addInputToCustomSpecialCharactersInputField(`${customSpecialCharacters.join('')}`);
+            drawingResponsePage.steps.clickOnCustomizeSpecialCharactersPreviewButton();
+            drawingResponsePage.steps.verifyCustomSpecialCharactersDisplayedInPreviewPopupEditTab(customSpecialCharacters);
+            cy.log('Post-step: Closing preview popup')
+            drawingResponsePage.steps.closeWarningPopup();
+        });
+
+        it('When the user has specified custom special characters and opens the special characters popup in the preview tab, then only the specified custom special characters should be displayed in the popup', () => {
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption('Text');
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption('Special characters');
+            drawingResponsePage.steps.verifyCustomSpecialCharactersDisplayedInPreviewTab(customSpecialCharacters);
+            cy.log('Post-step: Switching to edit tab');
+            drawingResponsePage.steps.switchToEditTab();
+
+        });
+
+        it('CSS of Customize special characters', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.customizeSpecialCharactersLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            //checked state of customize special characters checkbox
+            utilities.verifyCSS(drawingResponsePage.customizeSpecialCharactersCheckbox().find('rect').eq(1), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(drawingResponsePage.groupByLanguageLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            //selected state of radio button
+            utilities.verifyCSS(drawingResponsePage.showOnlyCustomSpecialCharactersRadioButton().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(drawingResponsePage.customSpecialCharactersLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(drawingResponsePage.customSpecialCharactersInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(drawingResponsePage.customSpecialCharactersInputField().find('fieldset'), {
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`
+            });
+            utilities.verifyCSS(drawingResponsePage.customizeSpecialCharactersPreviewButton(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            cy.log('Selecting group by language radio button');
+            drawingResponsePage.steps.selectGroupByLanguageRadioButton();
+            utilities.verifyCSS(drawingResponsePage.selectSpecialCharacterLanguagesLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            //Category tiles in selected state
+            utilities.verifyCSS(drawingResponsePage.specialAndMathCharacterTileIcon().eq(1).find('svg'), {
+                'fill': css.color.defaultBackground
+            });
+            utilities.verifyCSS(drawingResponsePage.customizeToolbarOptionsAndControlsSectionTickIcon().last().find('path[data-name*="Rectangle"]'), {
+                'fill': css.color.defaultBackground
+            });
+            utilities.verifyCSS(drawingResponsePage.customizeToolbarOptionsAndControlsSectionTickIcon().last().find('path[data-name*="feather-check"]'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(drawingResponsePage.specialAndMathCharacterTileSectionCategoriesDragIcon().eq(1).find('path'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(drawingResponsePage.specialAndMathCharacterTileSectionCategoriesDragIcon().eq(1).parent(), {
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(drawingResponsePage.specialAndMathCharacterTileCategoryName().eq(1), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(drawingResponsePage.specialAndMathCharacterTiles().eq(1), {
+                'background-color': css.color.primaryBtnBg
+            });
+            //Category tiles in de-selected state
+            utilities.verifyCSS(drawingResponsePage.specialAndMathCharacterTileIcon().eq(0).find('svg'), {
+                'fill': css.color.secondaryBtn
+            });
+            utilities.verifyCSS(drawingResponsePage.specialAndMathCharacterTileSectionCategoriesDragIcon().eq(0).parent(), {
+                'fill': css.color.secondaryBtn
+            });
+            utilities.verifyCSS(drawingResponsePage.specialAndMathCharacterTileSectionCategoriesDragIcon().eq(0).parent(), {
+                'fill': css.color.defaultBackground
+            });
+            utilities.verifyCSS(drawingResponsePage.specialAndMathCharacterTileCategoryName().eq(0), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(drawingResponsePage.specialAndMathCharacterTiles().eq(0), {
+                'background-color': css.color.defaultBackground
+            });
+            cy.log('Opening preview popup and expanding one category accordion');
+            drawingResponsePage.steps.clickOnCustomizeSpecialCharactersPreviewButton();
+            drawingResponsePage.steps.clickOnSpecialCharactersPreviewPopupCategoryAccordionExpandIcon(0);
+            utilities.verifyCSS(drawingResponsePage.dialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(drawingResponsePage.specialCharactersPreviewPopupCategoryLabel().eq(0), {
+                'color': css.color.text,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(drawingResponsePage.specialCharactersPreviewPopupCategoryAccordionExpandIcon().last().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(drawingResponsePage.charactersPreviewPopupSymbol().eq(0).find('svg'), {
+                'fill': css.color.defaultBackground
+            });
+        });
+
+        it('Accessibility of Customize special characters', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.dialogBox());
+            cy.log('Closing preview popup');
+            drawingResponsePage.steps.closeWarningPopup();
+            cy.checkAccessibility(drawingResponsePage.customizeSpecialCharactersLabel().parent().parent());
+            cy.log('Selecting show only custom special characters radio button');
+            drawingResponsePage.steps.selectShowOnlyCustomSpecialCharactersRadioButton();
+            cy.checkAccessibility(drawingResponsePage.customizeSpecialCharactersLabel().parent().parent());
+        });
+    });
+
+    describe('Customize math characters', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+            drawingResponsePage.steps.expandCustomizeToolbarOptionsAndControlsAccordion();
+            drawingResponsePage.steps.selectOptionsTiles([`${drawingToolbarOptionsAndAdditionalOptions.additionalOptions[1]}`]);
+        });
+
+        it('When user checks the \'Customize math characters\' checkbox, then \'Select math character languages\' label should be displayed. A \'Preview\' hyperlink should be displayed next to the label', () => {
+            drawingResponsePage.steps.checkCustomizeMathCharactersCheckbox();
+            utilities.verifyElementVisibilityState(drawingResponsePage.selectMathCharacterCategoryLabel(), 'visible');
+            utilities.verifyInnerText(drawingResponsePage.selectMathCharacterCategoryLabel(), 'Select math character languages');
+            utilities.verifyElementVisibilityState(drawingResponsePage.customizeMathCharactersPreviewButton(), 'visible');
+            utilities.verifyInnerText(drawingResponsePage.customizeMathCharactersPreviewButton(), 'Preview');
+        });
+
+        it(`A total of ${mathCharacterCategories.length} options should be displayed - ${mathCharacterCategories.join('')}. By default all language options should be in selected state`, () => {
+            drawingResponsePage.steps.verifyCustomizeSpecialOrMathCharactersCategoryTiles(mathCharacterCategories);
+            drawingResponsePage.steps.verifySelectedCustomizeSpecialOrMathCharactersCategoryTiles(mathCharacterCategories);
+        });
+
+        it('When the user clicks on the \'Preview\' hyperlink, a math characters popup should be displayed with all the math characters segregated according to all the language options. The user should be able to close the popup by clicking on the \'Close[X]\' button', () => {
+            drawingResponsePage.steps.clickOnCustomizeMathCharactersPreviewButton();
+            //Add this verification once https://redmine.zeuslearning.com/issues/555008 is resolved
+            // drawingResponsePage.steps.verifyMathCharactersPreviewPopupInEditTab(mathCharacters);
+            cy.log('Post-step: Closing preview popup')
+            drawingResponsePage.steps.closeWarningPopup();
+        });
+
+        it('When the user deselects any language option and opens the math characters popup by clicking on the \'Preview\' hyperlink, then the popup contents should get updated accordingly', () => {
+            let newSelectedCategoryList = mathCharacters.slice(1);
+            drawingResponsePage.steps.clickOnSpecialOrMathCharactersCategoryTile(mathCharacters[0].categoryName);
+            drawingResponsePage.steps.verifySpecialOrMathCharacterCategoryTileIsNotSelected(mathCharacters[0].categoryName);
+            drawingResponsePage.steps.clickOnCustomizeMathCharactersPreviewButton();
+            //Add this verification once https://redmine.zeuslearning.com/issues/555008 is resolved
+            // drawingResponsePage.steps.verifyMathCharactersPreviewPopupInEditTab(newSelectedCategoryList);
+            cy.log('Post-step: Closing preview popup');
+            drawingResponsePage.steps.closeWarningPopup();
+        });
+
+        it('When the user has deselected any language option and opens the math characters popup in the preview tab, then the popup contents should get updated accordingly', () => {
+            let newSelectedCategoryList = mathCharacters.slice(1);
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption('Text');
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption('Math characters');
+            drawingResponsePage.steps.verifyMathCharactersPopupCategoriesAndSymbols(newSelectedCategoryList);
+            cy.log('Post-step: Switching to edit tab');
+            drawingResponsePage.steps.switchToEditTab();
+        });
+
+        it('CSS of Customize math characters', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.customizeMathCharactersLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            //checked state of customize math characters checkbox
+            utilities.verifyCSS(drawingResponsePage.customizeMathCharactersCheckbox().find('rect').eq(1), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(drawingResponsePage.selectSpecialCharacterLanguagesLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            //Category tiles in selected state
+            utilities.verifyCSS(drawingResponsePage.specialAndMathCharacterTileIcon().eq(1).find('svg'), {
+                'fill': css.color.defaultBackground
+            });
+            utilities.verifyCSS(drawingResponsePage.customizeToolbarOptionsAndControlsSectionTickIcon().last().find('path[data-name*="Rectangle"]'), {
+                'fill': css.color.defaultBackground
+            });
+            utilities.verifyCSS(drawingResponsePage.customizeToolbarOptionsAndControlsSectionTickIcon().last().find('path[data-name*="feather-check"]'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(drawingResponsePage.specialAndMathCharacterTileSectionCategoriesDragIcon().eq(1).find('path'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(drawingResponsePage.specialAndMathCharacterTileSectionCategoriesDragIcon().eq(1).parent(), {
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(drawingResponsePage.specialAndMathCharacterTileCategoryName().eq(1), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(drawingResponsePage.specialAndMathCharacterTiles().eq(1), {
+                'background-color': css.color.primaryBtnBg
+            });
+            //Category tiles in de-selected state
+            utilities.verifyCSS(drawingResponsePage.specialAndMathCharacterTileIcon().eq(0).find('svg'), {
+                'fill': css.color.secondaryBtn
+            });
+            utilities.verifyCSS(drawingResponsePage.specialAndMathCharacterTileSectionCategoriesDragIcon().eq(0).parent(), {
+                'fill': css.color.secondaryBtn
+            });
+            utilities.verifyCSS(drawingResponsePage.specialAndMathCharacterTileSectionCategoriesDragIcon().eq(0).parent(), {
+                'fill': css.color.defaultBackground
+            });
+            utilities.verifyCSS(drawingResponsePage.specialAndMathCharacterTileCategoryName().eq(0), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(drawingResponsePage.specialAndMathCharacterTiles().eq(0), {
+                'background-color': css.color.defaultBackground
+            });
+            cy.log('Opening preview popup');
+            drawingResponsePage.steps.clickOnCustomizeMathCharactersPreviewButton();
+            utilities.verifyCSS(drawingResponsePage.dialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(drawingResponsePage.mathCharactersPreviewPopupCategoryLabel().eq(0), {
+                'color': css.color.text,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(drawingResponsePage.charactersPreviewPopupSymbol().eq(0).find('svg'), {
+                'fill': css.color.defaultBackground
+            });
+        });
+
+        it('Accessibility of Customize special characters', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.dialogBox());
+            cy.log('Closing preview popup');
+            drawingResponsePage.steps.closeWarningPopup();
+            cy.checkAccessibility(drawingResponsePage.customizeMathCharactersLabel().parent());
+        });
+    });
+
+    describe('Customize Stroke/font color - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+            drawingResponsePage.steps.expandCustomizeToolbarOptionsAndControlsAccordion();
+        });
+
+        it('When the \'Stroke/font color\' is not selected in the additional options section, \'Default stroke/font colors\' label should be displayed along with a color block with color - \'#007080\'', () => {
+            utilities.verifyInnerText(drawingResponsePage.defaultStrokeFontColorLabel(), 'Default stroke/font colors');
+            utilities.verifyElementVisibilityState(drawingResponsePage.defaultStrokeFontColorLabel(), 'visible');
+            utilities.verifyElementVisibilityState(drawingResponsePage.colorPickerBlock(), 'visible');
+            drawingResponsePage.steps.verifyCSSOfDefaultFontStrokeFillColorBlockInEditTab(0, 'rgb(0, 112, 128)');
+        });
+
+        it('When the user clicks on the color block, a popup should appear. A color palette (Saturation picker, hue picker, opacity picker), selected color block, hex input field, set to no color, ok and cancel buttons should be displayed', () => {
+            drawingResponsePage.steps.clickOnFontStrokeFillColorBlockInEditTab(0);
+            utilities.verifyElementVisibilityState(colorPopupComponent.dialogBox(), 'visible');
+            utilities.verifyInnerText(colorPopupComponent.dialogBoxTitle(), 'Select color');
+            utilities.verifyElementVisibilityState(colorPopupComponent.colorHuePalette(), 'visible');
+            utilities.verifyElementVisibilityState(colorPopupComponent.colorHuePicker(), 'visible');
+            utilities.verifyElementVisibilityState(colorPopupComponent.colorSaturationPalette(), 'visible');
+            utilities.verifyElementVisibilityState(colorPopupComponent.colorSaturationPicker(), 'visible');
+            utilities.verifyElementVisibilityState(drawingResponsePage.editTabColorPickerPopupOpacityPalette(), 'visible');
+            utilities.verifyElementVisibilityState(drawingResponsePage.editTabColorPickerPopupOpacityPicker(), 'visible');
+            utilities.verifyElementVisibilityState(colorPopupComponent.selectedColorLabel(), 'visible');
+            utilities.verifyInnerText(colorPopupComponent.selectedColorLabel(), 'Selected color');
+            utilities.verifyElementVisibilityState(colorPopupComponent.selectedColorBlock(), 'visible');
+            utilities.verifyElementVisibilityState(colorPopupComponent.hexLabel(), 'visible');
+            utilities.verifyInnerText(colorPopupComponent.hexLabel(), 'Hex');
+            utilities.verifyElementVisibilityState(colorPopupComponent.hexInputField(), 'visible');
+            utilities.verifyElementVisibilityState(drawingResponsePage.editTabColorPickerPopupSetToNoColorButton(), 'visible');
+            utilities.verifyInnerText(drawingResponsePage.editTabColorPickerPopupSetToNoColorButton(), 'Set to no color');
+            utilities.verifyElementVisibilityState(drawingResponsePage.editTabColorPickerPopupCancelButton(), 'visible');
+            utilities.verifyInnerText(drawingResponsePage.editTabColorPickerPopupCancelButton(), 'Cancel');
+            utilities.verifyElementVisibilityState(drawingResponsePage.editTabColorPickerPopupOkButton(), 'visible');
+            utilities.verifyInnerText(drawingResponsePage.editTabColorPickerPopupOkButton(), 'OK');
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(0, 112, 128)');
+            colorPopupComponent.steps.verifyHexValue('#007080');
+        });
+
+        it('The user can modify the color using the color palette. The modified color should be displayed in the \'Default stroke/font colors\' section', () => {
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(61, 114, 122)');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(62, 114, 122)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(0, 221, 255)');
+            drawingResponsePage.steps.clickOnEditTabColorPaletteOkButton();
+            drawingResponsePage.steps.verifyCSSOfDefaultFontStrokeFillColorBlockInEditTab(0, 'rgb(61, 114, 122)');
+        });
+
+        it('The user should be able to modify the color using the hex input field. The modified color should be displayed in the \'Default stroke/font colors\' section', () => {
+            drawingResponsePage.steps.clickOnFontStrokeFillColorBlockInEditTab(0);
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.verifyHexValue('#ff0000');
+            drawingResponsePage.steps.clickOnEditTabColorPaletteOkButton();
+            drawingResponsePage.steps.verifyCSSOfDefaultFontStrokeFillColorBlockInEditTab(0, 'rgb(255, 0, 0)');
+        });
+
+        it('When the user selects the \'Stroke/font color\' option, then four color blocks: the previously updated color block, \'#008559\', \'#801900\' and \'No fill\' color along with and an add[+] color block should be displayed. \'Close[X] icon\' should be displayed over the new color blocks', () => {
+            drawingResponsePage.steps.selectOptionsTiles([`${drawingToolbarOptionsAndAdditionalOptions.additionalOptions[3]}`]);
+            drawingResponsePage.steps.verifyCSSOfDefaultFontStrokeFillColorBlockInEditTab(0, 'rgb(255, 0, 0)');
+            drawingResponsePage.steps.verifyCSSOfDefaultFontStrokeFillColorBlockInEditTab(1, 'rgb(0, 133, 89)');
+            drawingResponsePage.steps.verifyCSSOfDefaultFontStrokeFillColorBlockInEditTab(2, 'rgb(128, 25, 0)');
+            drawingResponsePage.steps.verifyNoColorBlockInDefaultFontStrokeColorBlockSection(3);
+            for (let index = 1; index < 4; index++) {
+                drawingResponsePage.steps.verifyCloseIconOnColorBlockInDefaultFontStrokeColorBlockSection(index);
+            };
+        });
+
+        it('When the user clicks on the add[+] color block, the color palette should appear and the user should be able to add a new color', () => {
+            drawingResponsePage.steps.clickOnFontStrokeFillColorBlockInEditTab(4);
+            utilities.verifyElementVisibilityState(colorPopupComponent.dialogBox(), 'visible');
+            utilities.verifyInnerText(colorPopupComponent.dialogBoxTitle(), 'Select color');
+            drawingResponsePage.steps.clickOnEditTabColorPaletteOkButton();
+            utilities.verifyElementCount(drawingResponsePage.colorPickerBlock(), 6);
+            drawingResponsePage.steps.verifyCSSOfDefaultFontStrokeFillColorBlockInEditTab(3, 'rgb(255, 255, 255)');
+        });
+
+        it('When the user clicks on the \'Close[X] icon\' button, then the color block should get removed', () => {
+            drawingResponsePage.steps.clickOnColorBlockCloseButtonInDefaultFontStrokeColorBlockSection(2);
+            utilities.verifyElementCount(drawingResponsePage.colorPickerBlock(), 5);
+            drawingResponsePage.steps.verifyNoColorBlockInDefaultFontStrokeColorBlockSection(3);
+        });
+
+        it('When the user has modified contents in the \'Stroke/font color\' section in the edit tab, the updates should be displayed in the \'Stroke/font color\' popup in the preview tab', () => {
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption(`${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[1].displayName}`);
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption('Stroke Color');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(0, 'rgb(255, 0, 0)');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(1, 'rgb(0, 133, 89)');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(2, 'rgb(128, 25, 0)');
+            drawingResponsePage.steps.verifyNoColorOptionFromSecondaryOptionPopup(3);
+            cy.log('Post-step: Closing stroke color color popup and switching to edit tab');
+            drawingResponsePage.steps.closeSecondaryPopup();
+            drawingResponsePage.steps.switchToEditTab();
+        });
+
+        it('When the user adds upto 10 color blocks, then the add[+] color block should get disabled when 10 blocks have been added.', () => {
+            for (let i = 0; i < 6; i++) {
+                drawingResponsePage.steps.clickOnAddColorBlockInDefaultFontStrokeColorBlockSection();
+                drawingResponsePage.steps.clickOnEditTabColorPaletteOkButton();
+            }
+            drawingResponsePage.steps.verifyAddColorBlockIsDisabledInDefaultFontStrokeColorBlockSection();
+        });
+
+        it('When the user hovers over the disabled add[+] color block, A tooltip \'Maximum ten colors can be added.\' should be displayed. On hovering away, the tooltip should disappear', () => {
+            drawingResponsePage.steps.verifyTooltipForDisabledAddColorButton('Maximum ten colors can be added.');
+        });
+
+        it('CSS of Customize Stroke/font color section', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.defaultStrokeFontColorLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            drawingResponsePage.colorPickerBlockCloseIcon()
+                .eq(0)
+                .verifyPseudoClassBeforeProperty('color', css.color.activeButtons);
+            utilities.verifyCSS(drawingResponsePage.colorPickerBlock().find('.no-color-icon [data-name*="Ellipse"]'), {
+                'stroke': css.color.activeButtons
+            });
+            cy.log('Removing one color block to enable add color');
+            drawingResponsePage.steps.clickOnColorBlockCloseButtonInDefaultFontStrokeColorBlockSection(1);
+            utilities.verifyCSS(drawingResponsePage.colorPickerBlock().find('[data-name="Add color"]'), {
+                'stroke': css.color.activeButtons
+            });
+            cy.log('Clicking on one color block to open color picker');
+            drawingResponsePage.steps.clickOnFontStrokeFillColorBlockInEditTab(0);
+            utilities.verifyCSS(colorPopupComponent.dialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(colorPopupComponent.selectedColorLabel().find('.selected-color-text-wrapper'), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(colorPopupComponent.hexLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(colorPopupComponent.hexInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(drawingResponsePage.editTabColorPickerPopupSetToNoColorButton(), {
+                'color': css.color.activeButtons,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(drawingResponsePage.editTabColorPickerPopupSetToNoColorButton().find('svg'), {
+                'color': css.color.activeButtons
+            });
+            utilities.verifyCSS(drawingResponsePage.editTabColorPickerPopupCancelButton().find('p'), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(drawingResponsePage.editTabColorPickerPopupOkButton().find('p'), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(drawingResponsePage.editTabColorPickerPopupOkButton(), {
+                'background-color': css.color.primaryBtnBg
+            });
+        });
+
+        it('Accessibility of Stroke/font color section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.dialogBox());
+            cy.log('Closing preview popup');
+            drawingResponsePage.steps.clickOnEditTabColorPaletteCancelButton();
+            cy.checkAccessibility(drawingResponsePage.defaultStrokeFontColorLabel().parent());
+        });
+    });
+
+    describe('Customize Fill color', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+            drawingResponsePage.steps.expandCustomizeToolbarOptionsAndControlsAccordion();
+            drawingResponsePage.steps.selectToolbarOptionsAndControlsFormattingOptionsTiles([`${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[11].displayName}}`]);
+        });
+
+        it('When the \'Fill color\' is not selected in the additional options section, \'Default fill colors\' label should be displayed along with a color block with color - \'#00E0FF\'', () => {
+            utilities.verifyElementVisibilityState(drawingResponsePage.defaultFillColorsLabel(), 'visible');
+            utilities.verifyInnerText(drawingResponsePage.defaultFillColorsLabel(), 'Default fill colors');
+            utilities.verifyElementVisibilityState(drawingResponsePage.defaultFillColorsWrapper(), 'visible');
+            drawingResponsePage.steps.verifyCSSOfDefaultFontStrokeFillColorBlockInEditTab(1, 'rgb(0, 224, 255)');
+        });
+
+        it('When the user clicks on the color block, a popup should appear. A color palette (Saturation picker, hue picker, opacity picker), selected color block, hex input field, set to no color, ok and cancel buttons should be displayed', () => {
+            drawingResponsePage.steps.clickOnFontStrokeFillColorBlockInEditTab(1);
+            utilities.verifyElementVisibilityState(colorPopupComponent.dialogBox(), 'visible');
+            utilities.verifyInnerText(colorPopupComponent.dialogBoxTitle(), 'Select color');
+            utilities.verifyElementVisibilityState(colorPopupComponent.colorHuePalette(), 'visible');
+            utilities.verifyElementVisibilityState(colorPopupComponent.colorHuePicker(), 'visible');
+            utilities.verifyElementVisibilityState(colorPopupComponent.colorSaturationPalette(), 'visible');
+            utilities.verifyElementVisibilityState(colorPopupComponent.colorSaturationPicker(), 'visible');
+            utilities.verifyElementVisibilityState(drawingResponsePage.editTabColorPickerPopupOpacityPalette(), 'visible');
+            utilities.verifyElementVisibilityState(drawingResponsePage.editTabColorPickerPopupOpacityPicker(), 'visible');
+            utilities.verifyElementVisibilityState(colorPopupComponent.selectedColorLabel(), 'visible');
+            utilities.verifyInnerText(colorPopupComponent.selectedColorLabel(), 'Selected color');
+            utilities.verifyElementVisibilityState(colorPopupComponent.selectedColorBlock(), 'visible');
+            utilities.verifyElementVisibilityState(colorPopupComponent.hexLabel(), 'visible');
+            utilities.verifyInnerText(colorPopupComponent.hexLabel(), 'Hex');
+            utilities.verifyElementVisibilityState(colorPopupComponent.hexInputField(), 'visible');
+            utilities.verifyElementVisibilityState(drawingResponsePage.editTabColorPickerPopupSetToNoColorButton(), 'visible');
+            utilities.verifyInnerText(drawingResponsePage.editTabColorPickerPopupSetToNoColorButton(), 'Set to no color');
+            utilities.verifyElementVisibilityState(drawingResponsePage.editTabColorPickerPopupCancelButton(), 'visible');
+            utilities.verifyInnerText(drawingResponsePage.editTabColorPickerPopupCancelButton(), 'Cancel');
+            utilities.verifyElementVisibilityState(drawingResponsePage.editTabColorPickerPopupOkButton(), 'visible');
+            utilities.verifyInnerText(drawingResponsePage.editTabColorPickerPopupOkButton(), 'OK');
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(0, 224, 255)');
+            colorPopupComponent.steps.verifyHexValue('#00E0FF');
+        });
+
+        it('The user can modify the color using the color palette. The modified color should be displayed in the \'Default Fill colors\' section', () => {
+            drawingResponsePage.steps.clickOnFontStrokeFillColorBlockInEditTab(1);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(61, 115, 122)');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(62, 115, 122)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(0, 225, 255)');
+            drawingResponsePage.steps.clickOnEditTabColorPaletteOkButton();
+            drawingResponsePage.steps.verifyCSSOfDefaultFontStrokeFillColorBlockInEditTab(1, 'rgb(61, 115, 122)');
+        });
+
+        it('The user should be able to modify the color using the hex input field. The modified color should be displayed in the \'Default Fill colors\' section', () => {
+            drawingResponsePage.steps.clickOnFontStrokeFillColorBlockInEditTab(1);
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.verifyHexValue('#ff0000');
+            drawingResponsePage.steps.clickOnEditTabColorPaletteOkButton();
+            drawingResponsePage.steps.verifyCSSOfDefaultFontStrokeFillColorBlockInEditTab(1, 'rgb(255, 0, 0)');
+        });
+
+        it('When the user selects the \'Fill color\' option, then four new color blocks: \'#06FFAC\', \'#FF5A33\' and \'No fill\' color along with and an add[+] color block should be displayed. \'Close[X] icon\' should be displayed over the new color blocks', () => {
+            drawingResponsePage.steps.selectOptionsTiles([`${drawingToolbarOptionsAndAdditionalOptions.additionalOptions[5]}`]);
+            drawingResponsePage.steps.verifyCSSOfDefaultFontStrokeFillColorBlockInEditTab(1, 'rgb(255, 0, 0)');
+            drawingResponsePage.steps.verifyCSSOfDefaultFontStrokeFillColorBlockInEditTab(2, 'rgb(6, 255, 172)');
+            drawingResponsePage.steps.verifyCSSOfDefaultFontStrokeFillColorBlockInEditTab(3, 'rgb(255, 90, 51)');
+            drawingResponsePage.steps.verifyNoColorBlockInDefaultFontStrokeColorBlockSection(4);
+            for (let index = 2; index < 5; index++) {
+                drawingResponsePage.steps.verifyCloseIconOnColorBlockInDefaultFontStrokeColorBlockSection(index);
+            };
+        });
+
+        it('When the user clicks on the add[+] color block, the color palette should appear and the user should be able to add a new color', () => {
+            drawingResponsePage.steps.clickOnFontStrokeFillColorBlockInEditTab(5);
+            utilities.verifyElementVisibilityState(colorPopupComponent.dialogBox(), 'visible');
+            utilities.verifyInnerText(colorPopupComponent.dialogBoxTitle(), 'Select color');
+            drawingResponsePage.steps.clickOnEditTabColorPaletteOkButton();
+            utilities.verifyElementCount(drawingResponsePage.colorPickerBlock(), 7);
+            drawingResponsePage.steps.verifyCSSOfDefaultFontStrokeFillColorBlockInEditTab(4, 'rgb(255, 255, 255)');
+        });
+
+        it('When the user clicks on the \'Close[X] icon\' button, then the color block should get removed', () => {
+            drawingResponsePage.steps.clickOnColorBlockCloseButtonInDefaultFontStrokeColorBlockSection(2);
+            utilities.verifyElementCount(drawingResponsePage.colorPickerBlock(), 6);
+            drawingResponsePage.steps.verifyNoColorBlockInDefaultFontStrokeColorBlockSection(4);
+        });
+
+        it('When the user has modified contents in the \'Fill color\' section in the edit tab, the updates should be displayed in the \'Fill color\' popup in the preview tab', () => {
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption(`${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[11].displayName}`);
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption('Fill Color');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(0, 'rgb(255, 0, 0)');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(1, 'rgb(6, 255, 172)');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(2, 'rgb(255, 90, 51)');
+            drawingResponsePage.steps.verifyNoColorOptionFromSecondaryOptionPopup(3);
+            cy.log('Post-step: Closing fill color popup and switching to edit tab');
+            drawingResponsePage.steps.closeSecondaryPopup();
+            drawingResponsePage.steps.switchToEditTab();
+        });
+
+        it('When the user adds upto 10 color blocks, then the add[+] color block should get disabled when 10 blocks have been added.', () => {
+            for (let i = 0; i < 6; i++) {
+                drawingResponsePage.steps.clickOnAddColorBlockInDefaultFontStrokeColorBlockSection();
+                drawingResponsePage.steps.clickOnEditTabColorPaletteOkButton();
+            }
+            drawingResponsePage.steps.verifyAddColorBlockIsDisabledInDefaultFontStrokeColorBlockSection();
+        });
+
+        it('When the user hovers over the disabled add[+] color block, A tooltip \'Maximum ten colors can be added.\' should be displayed. On hovering away, the tooltip should disappear', () => {
+            drawingResponsePage.steps.verifyTooltipForDisabledAddColorButton('Maximum ten colors can be added.');
+        });
+
+        it('CSS of Customize fill color section', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.defaultFillColorsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            drawingResponsePage.colorPickerBlockCloseIcon()
+                .eq(0)
+                .verifyPseudoClassBeforeProperty('color', css.color.activeButtons);
+            utilities.verifyCSS(drawingResponsePage.colorPickerBlock().find('.no-color-icon [data-name*="Ellipse"]'), {
+                'stroke': css.color.activeButtons
+            });
+            cy.log('Removing one color block to enable add color');
+            drawingResponsePage.steps.clickOnColorBlockCloseButtonInDefaultFontStrokeColorBlockSection(1);
+            utilities.verifyCSS(drawingResponsePage.colorPickerBlock().find('[data-name="Add color"]'), {
+                'stroke': css.color.activeButtons
+            });
+            cy.log('Clicking on one color block to open color picker');
+            drawingResponsePage.steps.clickOnFontStrokeFillColorBlockInEditTab(2);
+            utilities.verifyCSS(colorPopupComponent.dialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(colorPopupComponent.selectedColorLabel().find('.selected-color-text-wrapper'), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(colorPopupComponent.hexLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(colorPopupComponent.hexInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(drawingResponsePage.editTabColorPickerPopupSetToNoColorButton(), {
+                'color': css.color.activeButtons,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(drawingResponsePage.editTabColorPickerPopupSetToNoColorButton().find('svg'), {
+                'color': css.color.activeButtons
+            });
+            utilities.verifyCSS(drawingResponsePage.editTabColorPickerPopupCancelButton().find('p'), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(drawingResponsePage.editTabColorPickerPopupOkButton().find('p'), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(drawingResponsePage.editTabColorPickerPopupOkButton(), {
+                'background-color': css.color.primaryBtnBg
+            });
+        });
+
+        it('Accessibility of fill color section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.dialogBox());
+            cy.log('Closing preview popup');
+            drawingResponsePage.steps.clickOnEditTabColorPaletteCancelButton();
+            cy.checkAccessibility(drawingResponsePage.defaultFillColorsLabel().parent());
+        });
+    });
+});