itemengine-cypress-automation 1.0.78 → 1.0.80

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

@@ -0,0 +1,1335 @@
+import { drawingResponsePage, itemPreviewPage } from "../../../pages";
+import { colorPopupComponent } from "../../../pages/components";
+import { drawingToolbarOptionsAndAdditionalOptions } from "../../../fixtures/drawingToolbarOptionsAdditionalOptionsAndSpecialAndMathCharacters";
+import { specialCharacters } from "../../../fixtures/drawingToolbarOptionsAdditionalOptionsAndSpecialAndMathCharacters";
+import { mathCharacters } from "../../../fixtures/drawingToolbarOptionsAdditionalOptionsAndSpecialAndMathCharacters";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const previewContentsViews = ['Question preview', 'Item view', 'Item preview', 'Student view'];
+const views = utilities.getViews(previewContentsViews);
+var itemReferenceID = "";
+
+const thickness = ['5', '10', '15', '20', '25'];
+const fontSizePopupOptions = { 'Tiny': '12px', 'Small': '14px', 'Default': '16px', 'Normal': '18px', 'Big': '22px', 'Huge': '26px' };
+const defaultUnselectedEditTabCustomizeOptionTiles = ['Item eraser', 'Rectangle', 'Ellipse', 'Polygon', 'Compass'];
+const lineTypeOptions = ['Line', 'Dashed Line', 'Dotted Line', 'Single Arrow', 'Double Arrow'];
+
+describe('Preview tab contents - primary toolbar options, secondary toolbar options', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        describe('Primary toolbar options', { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        cy.log('Navigating to drawing response question type');
+                        drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+                        cy.barsPreLoaderWait();
+                        drawingResponsePage.steps.addQuestionInstructions();
+                        drawingResponsePage.steps.expandCustomizeToolbarOptionsAndControlsAccordion();
+                        drawingResponsePage.steps.selectToolbarOptionsAndControlsFormattingOptionsTiles(defaultUnselectedEditTabCustomizeOptionTiles);
+                        drawingResponsePage.steps.selectOptionsTiles(drawingToolbarOptionsAndAdditionalOptions.additionalOptions);
+                        drawingResponsePage.steps.allotPoints(2);
+                        drawingResponsePage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item view':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID[0])}`);
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID[0])}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID[0])}`);
+                        break;
+                };
+            });
+
+            if (view === 'Question preview') {
+                after(() => {
+                    drawingResponsePage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it(`By default the ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[1].displayName} toolbar option should be in selected state and all other toolbar options should not be in selected state`, () => {
+                let defaultUnselectedPreviewTabToolbarOptionsArray = Object.values(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions.map((icon) => icon.displayName));
+                defaultUnselectedPreviewTabToolbarOptionsArray = defaultUnselectedPreviewTabToolbarOptionsArray.slice(0, 1).concat(defaultUnselectedPreviewTabToolbarOptionsArray.slice(2, 19))
+                drawingResponsePage.steps.verifyToolbarOptionIsNotSelectedInPreviewTab(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[0].displayName);
+                drawingResponsePage.steps.verifyToolbarOptionIsSelectedInPreviewTab(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[1].displayName);
+                defaultUnselectedPreviewTabToolbarOptionsArray.forEach((toolbarOption) => {
+                    drawingResponsePage.steps.verifyToolbarOptionIsNotSelectedInPreviewTab(toolbarOption);
+                });
+            });
+
+            //Browser level tooltips are implemented here, will not be able to check till https://redmine.zeuslearning.com/issues/555441 is resolved
+            it.skip('All the options in the toolbar should be visible to the user and when user hovers over the toolbar options, their names should be displayed in a tooltip', () => {
+                drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions.forEach((toolbarOption) => {
+                    utilities.hoverOverElement(drawingResponsePage.previewTabDrawingToolbarOption(toolbarOption.displayName));
+                    utilities.verifyTextContent(drawingResponsePage.previewTabToolbarOptionTooltip(), `${toolbarOption.tooltipText}`);
+                    utilities.hoverAwayFromElement(drawingResponsePage.previewTabDrawingToolbarOption(toolbarOption.displayName));
+                });
+            });
+
+            //Will not be able to cover image options as they will open the windows explorer popup and closing the popup is not possible
+            it('When user clicks on the drawing toolbar options, then the option name and its respective secondary toolbar options should be displayed in the secondary toolbar', () => {
+                drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions.forEach((toolbarOption) => {
+                    if (toolbarOption.secondaryToolbarOptions !== undefined) {
+                        drawingResponsePage.steps.selectPreviewTabToolbarOption(toolbarOption.displayName);
+                        utilities.verifyInnerText(drawingResponsePage.previewTabToolbarOptionName(), toolbarOption.displayName);
+                        drawingResponsePage.steps.verifyDisplayedSecondaryToolbarOptionsInPreviewTab(toolbarOption.secondaryToolbarOptions);
+                    }
+                    //Verifying that secondary toolbar options are not displayed for other toolbar options
+                    else if (toolbarOption.toolType === 'action' || toolbarOption.toolType === 'tool') {
+                        drawingResponsePage.steps.selectPreviewTabToolbarOption(toolbarOption.displayName);
+                        utilities.verifyElementVisibilityState(drawingResponsePage.previewTabSecondaryToolbarOption(), 'notExist');
+                    };
+                });
+            });
+
+            it('CSS of selected and deselected toolbar option and tooltip', { tags: 'css' }, () => {
+                //Selected state
+                utilities.verifyCSS(drawingResponsePage.previewTabDrawingToolbarOption('Item eraser'), {
+                    'background-color': css.color.selectToolbarOptionBg
+                });
+                utilities.verifyCSS(drawingResponsePage.previewTabDrawingToolbarOption('Item eraser').find('path'), {
+                    'fill': css.color.activeButtons
+                });
+                //Unselected state
+                utilities.verifyCSS(drawingResponsePage.previewTabDrawingToolbarOption('Text'), {
+                    'background-color': css.color.defaultToolbarOptionBg
+                });
+                utilities.verifyCSS(drawingResponsePage.previewTabDrawingToolbarOption('Text').find('path'), {
+                    'fill': css.color.activeButtons
+                });
+                //Hover state will fail as browser level tooltips are applied
+                cy.log('Pre-step: Hover on element to get tooltip');
+                utilities.hoverOverElement(drawingResponsePage.previewTabDrawingToolbarOption('Select'));
+                utilities.verifyCSS(drawingResponsePage.previewTabDrawingToolbarOption('Pencil'), {
+                    'background-color': css.color.selectToolbarOptionBg
+                });
+                utilities.verifyCSS(drawingResponsePage.previewTabToolbarOptionTooltip(), {
+                    'background-color': css.color.tooltipBg
+                });
+                utilities.verifyCSS(drawingResponsePage.previewTabToolbarOptionTooltip().find('p').eq(0), {
+                    'color': css.color.whiteText,
+                    'font-size': css.fontSize.small,
+                    'font-weight': css.fontWeight.semibold
+                });
+                utilities.verifyCSS(drawingResponsePage.previewTabToolbarOptionTooltip().find('p').eq(1), {
+                    'color': css.color.whiteText,
+                    'font-size': css.fontSize.small,
+                    'font-weight': css.fontWeight.regular
+                });
+                cy.log('Post-step: Hover away from element to get tooltip');
+                utilities.hoverAwayFromElement(drawingResponsePage.previewTabDrawingToolbarOption('Select'));
+                utilities.verifyCSS(drawingResponsePage.previewTabToolbarOptionName(), {
+                    'color': css.color.labels,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.semibold
+                });
+            });
+
+            it('Accessibility of toolbar options', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(drawingResponsePage.previewTabDrawingToolbarWrapper().parents('drawing-tool'));
+            });
+        });
+    });
+
+    describe('Preview tab - \'Insert image\'', { tags: 'smoke' }, () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+            drawingResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('When user selects \'Insert image\' option then the canvas should have text \'Upload, or drag and drop, an image from your device.\' should be displayed', () => {
+            drawingResponsePage.steps.selectPreviewTabToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[5].displayName);
+            drawingResponsePage.steps.verifyInsertImageContainerIsVisible();
+            utilities.verifyInnerText(drawingResponsePage.insertImageContainerTitle(), 'Upload, or drag and drop, an image from your device.');
+            utilities.verifyElementVisibilityState(drawingResponsePage.insertImageContainerTitle(), 'visible');
+        });
+
+        it('\'Only JPEG, PNG and GIF file formats will be accepted. Maximum file size - 5MB\' helptext should be displayed on the canvas', () => {
+            utilities.verifyInnerText(drawingResponsePage.insertImageContainerHelptext(), 'Only JPEG, PNG and GIF file formats will be accepted.\nMaximum file size - 5MB');
+            utilities.verifyElementVisibilityState(drawingResponsePage.insertImageContainerHelptext(), 'visible');
+        });
+
+        it('\'Select image\' button and a \'Close\' button should be displayed', () => {
+            utilities.verifyInnerText(drawingResponsePage.insertImageContainerSelectButton(), 'Select image');
+            utilities.verifyElementVisibilityState(drawingResponsePage.insertImageContainerSelectButton(), 'visible');
+            utilities.verifyElementVisibilityState(drawingResponsePage.insertImageContainerCloseButton(), 'visible');
+        });
+
+        it('User should be able to upload an image', () => {
+            drawingResponsePage.steps.uploadFile('uploads/image.png');
+        });
+
+        it('\'Uploading files. Please wait...\' should be displayed along with the file name when the image is being uploaded', () => {
+            drawingResponsePage.steps.verifyUploadingFilesMessage('image.png', '104KB');
+            drawingResponsePage.steps.verifyInsertImageContainerNotExist();
+        });
+
+        it('User should be able to attach multiple files at once among the supported file types', () => {
+            drawingResponsePage.steps.selectPreviewTabToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[5].displayName);
+            drawingResponsePage.steps.uploadFile(['uploads/sample.jpg', 'uploads/sample.gif']);
+            drawingResponsePage.steps.verifyInsertImageContainerNotExist();
+        });
+
+        it('When the user tries to upload an image an image more than 5mb then an error should be displayed \'The following files were rejected *filename* is too large. The maximum file size is 5MB\'', () => {
+            drawingResponsePage.steps.selectPreviewTabToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[5].displayName);
+            drawingResponsePage.steps.uploadFile('uploads/20mbFile.png');
+            drawingResponsePage.steps.verifyImageContainerErrorMessage('20mbFile.png');
+            drawingResponsePage.steps.verifyInsertImageContainerIsVisible();
+        });
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/555008
+    describe('Preview tab - secondary toolbar option - \'Special characters\' - content and functionality', { tags: 'smoke' }, () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+
+        });
+
+        it(`When ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[0]} additional option is not selected in edit tab, then in preview tab the ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[0]} secondary toolbar option should not be displayed`, () => {
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].displayName);
+            utilities.verifyElementVisibilityState(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[0]), 'notExist');
+        });
+
+        it(`When ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[0]} additional option is selected in edit tab, then in preview tab the ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[0]} secondary toolbar option should be displayed`, () => {
+            drawingResponsePage.steps.switchToEditTab();
+            drawingResponsePage.steps.expandCustomizeToolbarOptionsAndControlsAccordion();
+            drawingResponsePage.steps.selectOptionsTiles([`${drawingToolbarOptionsAndAdditionalOptions.additionalOptions[0]}`]);
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].displayName);
+            utilities.verifyElementVisibilityState(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[0]), 'visible');
+        });
+
+        it('By default the \'Special characters\' secondary toolbar option should be in deselected state', () => {
+            //Add here once https://redmine.zeuslearning.com/issues/554508 is resolved
+        });
+
+        it('CSS of \'Special characters\' secondary toolbar option in deselected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[1]), {
+                'background-color': css.color.defaultToolbarOptionBg
+            });
+        });
+
+        it('When user clicks on \'Special characters\' secondary toolbar option, then the \'Special characters\' popup should be displayed with \'Special characters\' title and a \'Close\' button', () => {
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[0]);
+            drawingResponsePage.steps.verifySecondaryPopupExist();
+            drawingResponsePage.steps.verifySecondaryOptionCharactersPopupTitle(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[0]);
+            utilities.verifyElementVisibilityState(drawingResponsePage.charactersPopupCloseButton(), 'visible');
+        });
+
+        it('CSS of \'Special characters\' secondary toolbar option in selected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[0]), {
+                'background-color': css.color.secondaryBtnBorder
+            });
+        });
+
+        it('All categories and accordions should be displayed in the popup', () => {
+            drawingResponsePage.steps.verifySpecialCharactersPopupCategoryTitlesAndAccordions(specialCharacters);
+        });
+
+        it('By default the \'Spanish\' category accordion should be in expanded state and all other accordions should be in collapsed state.', () => {
+            drawingResponsePage.steps.verifySpecialCharactersPopupCategoryAccordionIsExpanded(0);
+            for (let index = 1; index < specialCharacters.length; index++) {
+                drawingResponsePage.steps.verifySpecialCharactersPopupCategoryAccordionIsCollapsed(index);
+            };
+        });
+
+        it('The \'Spanish\' category accordion should display all its symbols', () => {
+            drawingResponsePage.steps.verifySpecialCharactersPopupCategorySymbols(0, specialCharacters[0].symbols);
+        });
+
+        it('When user clicks on the expanded \'Spanish\' category accordion, then the accordion should be collapsed.', () => {
+            drawingResponsePage.steps.clickOnSpecialCharactersCategoryAccordion(0);
+            drawingResponsePage.steps.verifySpecialCharactersPopupCategoryAccordionIsCollapsed(0);
+        });
+
+        it('When user clicks on the rest of the special character categories, then their category accordions should expand and display all the symbols', () => {
+            for (let index = 1; index < specialCharacters.length; index++) {
+                drawingResponsePage.steps.clickOnSpecialCharactersCategoryAccordion(index);
+                drawingResponsePage.steps.verifySpecialCharactersPopupCategoryAccordionIsExpanded(index);
+                drawingResponsePage.steps.verifySpecialCharactersPopupCategorySymbols(index, specialCharacters[index].symbols);
+            };
+        });
+
+        it('User should be able to view two expanded category accordions simultaneously', () => {
+            drawingResponsePage.steps.verifySpecialCharactersPopupCategoryAccordionIsExpanded(1);
+            drawingResponsePage.steps.verifySpecialCharactersPopupCategoryAccordionIsExpanded(2);
+        });
+
+        it('When user clicks on any category icon, then the category flyout should stay open', () => {
+            drawingResponsePage.steps.clickOnCharacterPopupSymbol(specialCharacter[0].symbols[0]);
+            drawingResponsePage.steps.verifySecondaryPopupExist();
+        });
+
+        it('CSS of \'Special characters\' popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.charactersPopupTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.bold,
+            });
+            utilities.verifyCSS(drawingResponsePage.specialCharactersPopupCategoryTitle(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold,
+            });
+            utilities.verifyCSS(drawingResponsePage.specialCharactersPopupCategoryAccordionIcon(), {
+                'color': css.color.activeButtons
+            });
+            utilities.verifyCSS(drawingResponsePage.charactersPopupCharacterSymbol(), {
+                'color': css.color.activeButtons
+            });
+        });
+
+        drawingResponsePage.tests.checkAccessibilityForSecondaryToolbarOptionPopup();
+
+        it('When user clicks on the \'Close\' button then the \'Special characters\' popup should be closed', () => {
+            drawingResponsePage.steps.clickOnCharactersPopupCloseButton();
+            drawingResponsePage.steps.verifySecondaryPopupDoesNotExist();
+        });
+    });
+
+    describe('Preview tab - secondary toolbar option - \'Math characters\' - content and functionality', { tags: 'smoke' }, () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+        });
+
+        it(`When ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[1]} additional option is not selected in edit tab, then in preview tab the ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[1]} secondary toolbar option should not be displayed`, () => {
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].displayName);
+            utilities.verifyElementVisibilityState(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[1]), 'notExist');
+        });
+
+        it(`When ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[1]} additional option is selected in edit tab, then in preview tab the ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[1]} secondary toolbar option should be displayed`, () => {
+            drawingResponsePage.steps.switchToEditTab();
+            drawingResponsePage.steps.expandCustomizeToolbarOptionsAndControlsAccordion();
+            drawingResponsePage.steps.selectOptionsTiles([`${drawingToolbarOptionsAndAdditionalOptions.additionalOptions[1]}`]);
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].displayName);
+            utilities.verifyElementVisibilityState(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[1]), 'visible');
+        });
+
+        it('By default the \'Math characters\' secondary toolbar option should be in deselected state', () => {
+            //Add here once https://redmine.zeuslearning.com/issues/554508 is resolved
+        });
+
+        it('CSS of \'Math characters\' secondary toolbar option in deselected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[1]), {
+                'background-color': css.color.defaultToolbarOptionBg
+            });
+        });
+
+        it('When user clicks on \'Math characters\' secondary toolbar option, then the \'Math characters\' popup should be displayed with \'Math characters\' title and a \'Close\' button', () => {
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[1]);
+            drawingResponsePage.steps.verifySecondaryPopupExist();
+            drawingResponsePage.steps.verifySecondaryOptionCharactersPopupTitle(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[1]);
+            utilities.verifyElementVisibilityState(drawingResponsePage.charactersPopupCloseButton(), 'visible');
+        });
+
+        it('CSS of \'Math characters\' secondary toolbar option in selected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[1]), {
+                'background-color': css.color.secondaryBtnBorder
+            });
+        });
+
+        it('All categories and their respective title and symbols should be displayed in the popup', () => {
+            drawingResponsePage.steps.verifyMathCharactersPopupCategoriesAndSymbols(mathCharacters);
+        });
+
+        it('When user clicks on any category icon, then the category flyout should stay open', () => {
+            drawingResponsePage.steps.clickOnCharacterPopupSymbol(mathCharacters[0].symbols[0]);
+            drawingResponsePage.steps.verifySecondaryPopupExist();
+        });
+
+        it('CSS of \'Math characters\' popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.charactersPopupTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.bold,
+            });
+            utilities.verifyCSS(drawingResponsePage.mathCharactersPopupCategoryTitle(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold,
+            });
+            utilities.verifyCSS(drawingResponsePage.charactersPopupCharacterSymbol(), {
+                'color': css.color.activeButtons
+            });
+        });
+
+        drawingResponsePage.tests.checkAccessibilityForSecondaryToolbarOptionPopup();
+
+        it('When user clicks on the \'Close\' button then the \'Math characters\' popup should be closed', () => {
+            drawingResponsePage.steps.clickOnCharactersPopupCloseButton();
+            drawingResponsePage.steps.verifySecondaryPopupDoesNotExist();
+        });
+    });
+
+    describe('Preview tab - secondary toolbar option - \'Font size\' - content and functionality', { tags: 'smoke' }, () => {
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+        });
+
+
+        it(`When ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[2]} additional option is not selected in edit tab, then in preview tab the ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[2]} secondary toolbar option should not be displayed`, () => {
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].displayName);
+            utilities.verifyElementVisibilityState(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[2]), 'notExist');
+        });
+
+        it(`When ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[2]} additional option is selected in edit tab, then in preview tab the ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[2]} secondary toolbar option should be displayed`, () => {
+            drawingResponsePage.steps.switchToEditTab();
+            drawingResponsePage.steps.expandCustomizeToolbarOptionsAndControlsAccordion();
+            drawingResponsePage.steps.selectOptionsTiles([`${drawingToolbarOptionsAndAdditionalOptions.additionalOptions[2]}`]);
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].displayName);
+            utilities.verifyElementVisibilityState(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[2]), 'visible');
+        });
+
+        it('By default the \'Font size\' secondary toolbar option should be in deselected state', () => {
+            //Add here once https://redmine.zeuslearning.com/issues/554508 is resolved
+        });
+
+        it('CSS of \'Font size\' secondary toolbar option in deselected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[2]), {
+                'background-color': css.color.defaultToolbarOptionBg
+            });
+        });
+
+        it('Accessibility of secondary toolbar options', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[2]));
+        });
+
+        it('When user clicks on \'Font size\' secondary toolbar option, then the \'Font size\' popup should be displayed', () => {
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[2]);
+        });
+
+        it('CSS of \'Font size\' secondary toolbar option in selected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[2]), {
+                'background-color': css.color.secondaryBtnBorder
+            });
+        });
+
+        it(`All the ${Object.keys(fontSizePopupOptions).length} font sizes - ${Object.keys(fontSizePopupOptions)} and their respective font sizes should be displayed in the popup`, () => {
+            drawingResponsePage.steps.verifySecondaryToolbarOptionFontSizePopup();
+        });
+
+        it(`By default the ${fontSizePopupOptions.Default} font size should be in selected state`, () => {
+            drawingResponsePage.steps.verifyFontSizePopupSelectedOption(2);
+        });
+
+        it('When user selects any font size in the popup, then the font size should be selected and font size popup should be closed', () => {
+            drawingResponsePage.steps.selectOptionFromFontSizePopup(1);
+            drawingResponsePage.steps.verifySecondaryPopupDoesNotExist();
+        });
+
+        it('When user reopens the \'Font size\' flyout, then the previously updated font size should be displayed in the selected state', () => {
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[2]);
+            drawingResponsePage.steps.verifyFontSizePopupSelectedOption(1);
+
+        });
+
+        it('CSS of \'Font size\' popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.fontSizeOption().eq(1), {
+                'background-color': css.color.liTextSelectedBg
+            });
+            utilities.verifyCSS(drawingResponsePage.fontSizeOptionLabels(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(drawingResponsePage.fontSizesLabels(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        drawingResponsePage.tests.checkAccessibilityForSecondaryToolbarOptionPopup();
+    });
+
+    describe('Preview tab - secondary toolbar options - \'Opacity\' - content and functionality', { tags: 'smoke' }, () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+            drawingResponsePage.steps.expandCustomizeToolbarOptionsAndControlsAccordion();
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[1].displayName);
+        });
+
+        it('By default the \'Opacity\' secondary toolbar option should be in deselected state', () => {
+            //Add here once https://redmine.zeuslearning.com/issues/554508 is resolved
+        });
+
+        it('CSS of \'Opacity\' secondary toolbar option in deselected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[1].secondaryToolbarOptions[2]), {
+                'background-color': css.color.defaultToolbarOptionBg
+            });
+        });
+
+        it('Accessibility of secondary toolbar options', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[1].secondaryToolbarOptions[2]));
+        });
+
+        it('When user clicks on \'Opacity\' secondary toolbar option, then the \'Opacity\' popup should be displayed and \'Opacity\' secondary toolbar option should be in selected state', () => {
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[1].secondaryToolbarOptions[2]);
+            drawingResponsePage.steps.verifySecondaryPopupExist();
+            //Add here once https://redmine.zeuslearning.com/issues/554508 is resolved
+        });
+
+        it('\'Opacity\' label and input field with the value 100 should be displayed', () => {
+            drawingResponsePage.steps.verifySecondaryOptionPopupTitle('Opacity');
+            drawingResponsePage.steps.verifySecondaryPopupOpacityInputFieldValue(100);
+            utilities.verifyInnerText(drawingResponsePage.previewTabSecondaryPopupOpacityPercentageLabel(), '%');
+            utilities.verifyElementVisibilityState(drawingResponsePage.previewTabSecondaryPopupOpacityPercentageLabel(), 'visible');
+        });
+
+        it('Opacity slider should be displayed and by default the slider of \'Opacity\' should be set to 100 percent', () => {
+            utilities.verifyElementVisibilityState(drawingResponsePage.previewTabSecondaryPopupOpacitySlider(), 'exist');
+            drawingResponsePage.steps.verifySecondaryPopupOpacitySliderValue(100);
+        });
+
+        it('When the user changes value in the opacity input field, the slider value should also change accordingly', () => {
+            drawingResponsePage.steps.enterValueInOpacityInputFieldValue(10);
+            drawingResponsePage.steps.verifySecondaryPopupOpacitySliderValue(10);
+        });
+
+        it('When the user changes the opacity slider value, value in the opacity input field should also change', () => {
+            drawingResponsePage.steps.clickOnSecondaryPopupSlider();
+            drawingResponsePage.steps.verifySecondaryPopupOpacitySliderValue(50);
+            drawingResponsePage.steps.verifySecondaryPopupOpacityInputFieldValue(50);
+        });
+
+        it('CSS of \'Opacity\' secondary toolbar option in selected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[1].secondaryToolbarOptions[2]), {
+                'background-color': css.color.secondaryBtnBorder
+            });
+        });
+
+        it('Accessibility of secondary toolbar options', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[1].secondaryToolbarOptions[2]));
+        });
+
+        it('When user makes some changes in the \'Opacity\' popup and clicks anywhere outside the popup, then the popup should closed.', () => {
+            drawingResponsePage.steps.enterValueInOpacityInputFieldValue(10);
+            drawingResponsePage.steps.closeSecondaryPopup();
+            drawingResponsePage.steps.verifySecondaryPopupDoesNotExist();
+        });
+
+        it('When user reopens the \'Opacity\' popup by clicking on the toolbar option, the popup should reopen and all its previously made changes should be retained/present', () => {
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[1].secondaryToolbarOptions[2]);
+            drawingResponsePage.steps.verifySecondaryPopupOpacitySliderValue(10);
+            drawingResponsePage.steps.verifySecondaryPopupOpacityInputFieldValue(10);
+        });
+
+        it('CSS of \'Opacity\' popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryOptionPopupTitle(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+            });
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryPopupOpacityInputField(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryPopupOpacityPercentageLabel(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+            });
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryPopupOpacitySlider(), {
+                'color': css.color.activeButtons
+            });
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryPopupOpacityInputField().parents('.drawing-tool-options__options__number-wrapper'), {
+                'border': `1px solid ${css.color.titleContainerBorder})`
+            });
+        });
+
+        drawingResponsePage.tests.checkAccessibilityForSecondaryToolbarOptionPopup();
+    });
+
+    describe('Preview tab - secondary toolbar options - \'Stroke thickness\' - content and functionality', { tags: 'smoke' }, () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+            drawingResponsePage.steps.expandCustomizeToolbarOptionsAndControlsAccordion();
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption(drawingToolbarOptionsAndSpecialAndMathCharacters.drawingToolbarOptions[1].displayName);
+        });
+
+        it('By default the \'Stroke thickness\' secondary toolbar option should be in deselected state', () => {
+            //Add here once https://redmine.zeuslearning.com/issues/554508 is resolved
+        });
+
+        it('CSS of \'Stroke thickness\' secondary toolbar option in deselected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[1].secondaryToolbarOptions[1]), {
+                'background-color': css.color.defaultToolbarOptionBg
+            });
+        });
+
+        it('Accessibility of secondary toolbar options', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[1].secondaryToolbarOptions[1]));
+        });
+
+        it('When user clicks on \'Stroke thickness\' secondary toolbar option, then the \'Stroke thickness\' popup should be displayed and \'Stroke thickness\' secondary toolbar option should be in selected state', () => {
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[1].secondaryToolbarOptions[1]);
+            drawingResponsePage.steps.verifySecondaryPopupExist();
+            //Add here once https://redmine.zeuslearning.com/issues/554508 is resolved
+        });
+
+        it(`A \'Stroke thickness\' title along with the five stroke thickness options - ${thickness}px should be displayed`, () => {
+            drawingResponsePage.steps.verifySecondaryOptionPopupTitle(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[1].secondaryToolbarOptions[1]);
+            thickness.forEach((thickness, index) => {
+                drawingResponsePage.steps.verifySecondaryPopupStrokeThickness(thickness, index)
+            });
+        });
+
+        it('5px stroke thickness option should be selected by default', () => {
+            drawingResponsePage.steps.verifySelectedOptionFromSecondaryOptionPopup(0);
+        });
+
+        it('User should be able to select a different stroke thickness option from the provided thickness options inside the \'Stroke thickness\' popup', () => {
+            drawingResponsePage.steps.selectOptionFromSecondaryOptionPopup(2);
+            drawingResponsePage.steps.verifySecondaryPopupDoesNotExist();
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[1].secondaryToolbarOptions[1]);
+            drawingResponsePage.steps.verifySelectedOptionFromSecondaryOptionPopup(2);
+        });
+
+        it('CSS of \'Stroke thickness\' secondary toolbar option in selected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[1].secondaryToolbarOptions[1]), {
+                'background-color': css.color.secondaryBtnBorder
+            });
+        });
+
+        it('Accessibility of secondary toolbar options', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[1].secondaryToolbarOptions[1]));
+        });
+
+        it('When user makes some changes in the \'Stroke thickness\' popup and clicks anywhere outside the popup, then the popup should close.', () => {
+            drawingResponsePage.steps.selectOptionFromSecondaryOptionPopup(1);
+            drawingResponsePage.steps.closeSecondaryPopup();
+            drawingResponsePage.steps.verifySecondaryPopupDoesNotExist();
+        });
+
+        it('When user reopens the \'Stroke thickness\' popup by clicking on the toolbar option, the popup should reopen and all its previously made changes should be retained/present', () => {
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[1].secondaryToolbarOptions[1]);
+            drawingResponsePage.steps.verifySelectedOptionFromSecondaryOptionPopup(1);
+        });
+
+        it('CSS of \'Stroke thickness\' popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryOptionPopupTitle(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+            });
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryOptionPopupStrokeImage(), {
+                'color': css.color.labels
+            });
+        });
+
+        drawingResponsePage.tests.checkAccessibilityForSecondaryToolbarOptionPopup();
+    });
+
+    describe('Preview tab - secondary toolbar options - \'Text color\' - content and functionality', { tags: 'smoke' }, () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+        });
+
+        it(`When ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[3]} additional option is not selected in edit tab, then in preview tab the ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[3]} secondary toolbar option should not be displayed`, () => {
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].displayName);
+            utilities.verifyElementVisibilityState(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[3]), 'notExist');
+        });
+
+        it(`When ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[3]} additional option is selected in edit tab, then in preview tab the ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[3]} secondary toolbar option should be displayed`, () => {
+            drawingResponsePage.steps.switchToEditTab();
+            drawingResponsePage.steps.expandCustomizeToolbarOptionsAndControlsAccordion();
+            drawingResponsePage.steps.selectOptionsTiles([`${drawingToolbarOptionsAndAdditionalOptions.additionalOptions[3]}`]);
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].displayName);
+            utilities.verifyElementVisibilityState(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[3]), 'visible');
+        });
+
+        it('By default the \'Text color\' secondary toolbar option should be in deselected state', () => {
+            //Add here once https://redmine.zeuslearning.com/issues/554508 is resolved
+        });
+
+        it('The default text color should be displayed under the \'Text color\' secondary toolbar option', () => {
+            drawingResponsePage.steps.verifySelectedTextColorUnderTextColorOptionInPreviewTab('rgb(0, 112, 128)');
+        });
+
+        it('CSS of \'Text color\' secondary toolbar option in deselected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[3]), {
+                'background-color': css.color.defaultToolbarOptionBg
+            });
+        });
+
+        it('Accessibility of secondary toolbar options', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[3]));
+        });
+
+        it('When user clicks on \'Text color\' secondary toolbar option, then the \'Text color\' popup should be displayed with \'Text color\' title', () => {
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[3]);
+            drawingResponsePage.steps.verifySecondaryPopupExist();
+            drawingResponsePage.steps.verifySecondaryOptionPopupTitle(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[3]);
+            //Selected state of secondary toolbar option. Add here once https://redmine.zeuslearning.com/issues/554508 is resolved
+        });
+
+        it('The \'Text color\' popup should contain 4 default color options for the author to choose from and the first color option should be selected by default', () => {
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(0, 'rgb(0, 112, 128)');
+            drawingResponsePage.steps.verifySelectedOptionFromSecondaryOptionPopup(0);
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(1, 'rgb(0, 133, 89)');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(2, 'rgb(128, 25, 0)');
+            drawingResponsePage.steps.verifyNoColorOptionFromSecondaryOptionPopup(3);
+            utilities.verifyElementCount(drawingResponsePage.previewTabSecondaryOptionPopupOptions(), '4');
+        });
+
+        it('The \'Selected color\' heading, color picker pallette and the default selected color should be displayed in the popup in their default states', () => {
+            drawingResponsePage.steps.verifyPreviewTabColorPickerLabel();
+            drawingResponsePage.steps.verifySelectedColorLabelAndSelectedColorBlock();
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(255, 255, 255)');
+            colorPopupComponent.steps.verifyColorSaturationPaletteAndPicker();
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 255, 255)');
+            colorPopupComponent.steps.verifyColorHuePaletteAndPicker();
+        });
+
+        it('\'Ok\' and \'Cancel\' button should be displayed in the popup', () => {
+            drawingResponsePage.steps.verifyColorPopupCancelButton();
+            drawingResponsePage.steps.verifyColorPopupOkButton();
+        });
+
+        it('User should be able to select a different color from the provided default color options inside the \'Text color\' popup', () => {
+            drawingResponsePage.steps.selectOptionFromSecondaryOptionPopup(3);
+            drawingResponsePage.steps.verifySecondaryPopupDoesNotExist();
+            drawingResponsePage.steps.verifySecondaryOptionStrokeColor(0, 'rgb(255, 255, 255)');
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[0]);
+            drawingResponsePage.steps.verifySelectedOptionFromSecondaryOptionPopup(3);
+            drawingResponsePage.steps.selectOptionFromSecondaryOptionPopup(1);
+            drawingResponsePage.steps.verifySecondaryPopupDoesNotExist();
+            drawingResponsePage.steps.verifySecondaryOptionStrokeColor(0, 'rgb(6, 255, 172)');
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[0]);
+            drawingResponsePage.steps.verifySelectedOptionFromSecondaryOptionPopup(1);
+        });
+
+        it('User should be able to make changes in the color picker pallette and the changes should be reflected in the selected color box', () => {
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            drawingResponsePage.steps.verifySelectedColorBlock('rgb(120, 60, 60)');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgba(255, 255, 255, 0.23)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgba(255, 255, 255, 0.23)');
+        });
+
+        it('When user clicks on the \'Cancel\' button, then the popup should be closed.', () => {
+            drawingResponsePage.steps.clickOnCancelButton();
+            drawingResponsePage.steps.verifySecondaryPopupDoesNotExist();
+        });
+
+        it('When user reopens the \'Text color\' popup by clicking on the toolbar option, the popup should reopen and all its settings should be in their default states', () => {
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[3]);
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(0, 'rgb(0, 112, 128)');
+            drawingResponsePage.steps.verifySelectedOptionFromSecondaryOptionPopup(0);
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(1, 'rgb(0, 133, 89)');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(2, 'rgb(128, 25, 0)');
+            drawingResponsePage.steps.verifyNoColorOptionFromSecondaryOptionPopup(3);
+            drawingResponsePage.steps.verifySelectedColorBlock('rgb(255, 255, 255)');
+        });
+
+        it('When user makes some changes in the \'Text color\' popup and clicks on the \'Ok\' button, then the popup should be closed.', () => {
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            drawingResponsePage.steps.verifySelectedColorBlock('rgb(120, 60, 60)');
+            drawingResponsePage.steps.clickOnOkButton();
+            drawingResponsePage.steps.verifySecondaryPopupDoesNotExist();
+        });
+
+        it('The updated text color should be displayed under the \'Text color\' secondary toolbar option', () => {
+            drawingResponsePage.steps.verifySecondaryOptionStrokeColor(3, 'rgb(120, 60, 60)');
+        });
+
+        it('When user reopens the \'Text color\' popup by clicking on the toolbar option, the popup should reopen and all its previously made changes should be retained/present', () => {
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].secondaryToolbarOptions[3]);
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(0, 'rgb(0, 112, 128)');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(1, 'rgb(0, 133, 89)');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(2, 'rgb(128, 25, 0)');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(3, 'rgb(120, 60, 60)');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(4, 'rgb(255, 255, 255)');
+            drawingResponsePage.steps.verifyNoColorOptionFromSecondaryOptionPopup(3);
+            drawingResponsePage.steps.verifySelectedColorBlock('rgb(120, 60, 60)');
+        });
+
+        it('CSS of color popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryOptionPopupTitle(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+            });
+            utilities.verifyCSS(drawingResponsePage.previewTabColorPickerLabel(), {
+                'color': css.color.normal,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+            });
+            utilities.verifyCSS(colorPopupComponent.selectedColorLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(drawingResponsePage.colorPalleteOkButton(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.successBtnBg
+            });
+            utilities.verifyCSS(drawingResponsePage.colorPalleteCancelButton(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.secondaryBtnBg
+            });
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/539391
+        drawingResponsePage.tests.checkAccessibilityForSecondaryToolbarOptionPopup();
+    });
+
+    describe('Preview tab - secondary toolbar options - \'Fill color\' - content and functionality', { tags: 'smoke' }, () => {
+        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[9].displayName]);
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].displayName);
+        });
+
+        it(`When ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[0]} additional option is not selected in edit tab, then in preview tab the ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[0]} secondary toolbar option should not be displayed`, () => {
+            utilities.verifyElementVisibilityState(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[0]), 'notExist');
+        });
+
+        it(`When ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[0]} additional option is selected in edit tab, then in preview tab the ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[0]} secondary toolbar option \'Fill color\' popup should be displayed`, () => {
+            drawingResponsePage.steps.switchToEditTab();
+            drawingResponsePage.steps.selectOptionsTiles([`${drawingToolbarOptionsAndAdditionalOptions.additionalOptions[5]}`]);
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].displayName);
+            utilities.verifyElementVisibilityState(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[0]), 'visible');
+        });
+
+        it('The \'Stroke color\' secondary toolbar option should be in deselected state', () => {
+            //Add here once https://redmine.zeuslearning.com/issues/554508 is resolved
+        });
+
+        it('The default fill color should be displayed under the \'Fill color\' secondary toolbar option', () => {
+            drawingResponsePage.steps.verifySecondaryOptionStrokeColor(0, 'rgb(0, 224, 255)');
+        });
+
+        it('CSS of \'Fill color\' secondary toolbar option in deselected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[0]), {
+                'background-color': css.color.defaultToolbarOptionBg
+            });
+        });
+
+        it('Accessibility of secondary toolbar options', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[1]));
+        });
+
+        it(`In preview tab the ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[0]} secondary toolbar option \'Fill color\' popup should contain three default color options and a \'No color\' option for the author to choose from and the first color option should be selected by default`, () => {
+            drawingResponsePage.steps.switchToEditTab();
+            drawingResponsePage.steps.selectOptionsTiles([`${drawingToolbarOptionsAndAdditionalOptions.additionalOptions[5]}`]);
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].displayName);
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[0]);
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[0]);
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(0, 'rgb(0, 224, 255)');
+            drawingResponsePage.steps.verifySelectedOptionFromSecondaryOptionPopup(0);
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(1, 'rgb(6, 255, 172)');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(2, 'rgb(255, 90, 51)');
+            drawingResponsePage.steps.verifyNoColorOptionFromSecondaryOptionPopup(3);
+            utilities.verifyElementCount(drawingResponsePage.previewTabSecondaryOptionPopupOptions(), '4');
+        });
+
+        it(`When \'Fill color picker\'additional option is not selected in edit tab, then in preview tab the ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[0]} secondary toolbar option popup should not display color picker and its related components`, () => {
+            utilities.verifyElementVisibilityState(drawingResponsePage.previewTabColorPickerLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(colorPopupComponent.colorHuePalette(), 'notExist');
+            utilities.verifyElementVisibilityState(colorPopupComponent.colorHuePicker(), 'notExist');
+        });
+
+        it(`When \'Fill color picker\' additional option is selected in edit tab, then in preview tab the ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[0]} secondary toolbar option popup should display color picker and its related components`, () => {
+            drawingResponsePage.steps.switchToEditTab();
+            drawingResponsePage.steps.selectOptionsTiles([`${drawingToolbarOptionsAndAdditionalOptions.additionalOptions[6]}`]);
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].displayName);
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[0]);
+            drawingResponsePage.steps.verifySecondaryOptionPopupTitle(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[0]);
+            utilities.verifyElementVisibilityState(colorPopupComponent.colorHuePalette(), 'visible');
+            utilities.verifyElementVisibilityState(colorPopupComponent.colorHuePicker(), 'visible');
+        });
+
+        it('The \'Select color\' heading, color picker pallette, \'Selected color\' heading and the default selected color should be displayed in the popup in their default states', () => {
+            drawingResponsePage.steps.verifyPreviewTabColorPickerLabel();
+            drawingResponsePage.steps.verifySelectedColorLabelAndSelectedColorBlock();
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgba(255, 255, 255, 0.23)');
+            colorPopupComponent.steps.verifyColorSaturationPaletteAndPicker();
+            colorPopupComponent.steps.verifyHuePaletteColor('rgba(255, 255, 255, 0.23)');
+            colorPopupComponent.steps.verifyColorHuePaletteAndPicker();
+        });
+
+        it('User should be able to select a different color from the provided default color options inside the \'Fill color\' popup', () => {
+            drawingResponsePage.steps.selectOptionFromSecondaryOptionPopup(3);
+            drawingResponsePage.steps.verifySecondaryPopupDoesNotExist();
+            drawingResponsePage.steps.verifySecondaryOptionStrokeColor(0, 'rgb(255, 255, 255)');
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[0]);
+            drawingResponsePage.steps.verifySelectedOptionFromSecondaryOptionPopup(3);
+            drawingResponsePage.steps.selectOptionFromSecondaryOptionPopup(1);
+            drawingResponsePage.steps.verifySecondaryPopupDoesNotExist();
+            drawingResponsePage.steps.verifySecondaryOptionStrokeColor(0, 'rgb(6, 255, 172)');
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[0]);
+            drawingResponsePage.steps.verifySelectedOptionFromSecondaryOptionPopup(1);
+        });
+
+        it('User should be able to make changes in the color picker pallette and the changes should be reflected in the selected color box', () => {
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            drawingResponsePage.steps.verifySelectedColorBlock('rgb(120, 60, 60)');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgba(255, 255, 255, 0.23)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgba(255, 255, 255, 0.23)');
+        });
+
+        it('\'Ok\' and \'Cancel\' button should be displayed in the popup', () => {
+            drawingResponsePage.steps.verifyColorPopupCancelButton();
+            drawingResponsePage.steps.verifyColorPopupOkButton();
+        });
+
+        it('When user clicks on the \'Cancel\' button, then the popup should be closed.', () => {
+            drawingResponsePage.steps.clickOnCancelButton();
+            drawingResponsePage.steps.verifySecondaryPopupDoesNotExist();
+        });
+
+        it('When user reopens the \'Fill color\' popup, the popup should be displayed with all its default settings', () => {
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[0]);
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(0, 'rgb(0, 224, 255)');
+            drawingResponsePage.steps.verifySelectedOptionFromSecondaryOptionPopup(0);
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(1, 'rgb(6, 255, 172)');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(2, 'rgb(255, 90, 51)');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(3, 'rgb(255, 255, 255)');
+            drawingResponsePage.steps.verifyNoColorOptionFromSecondaryOptionPopup(3);
+            drawingResponsePage.steps.verifySelectedColorBlock('rgb(255, 255, 255)');
+        });
+
+        it('When user makes some changes in the \'Fill color\' popup and clicks on the \'Ok\' button, then the popup should be closed.', () => {
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            drawingResponsePage.steps.verifySelectedColorBlock('rgb(120, 60, 60)');
+            drawingResponsePage.steps.clickOnOkButton();
+            drawingResponsePage.steps.verifySecondaryPopupDoesNotExist();
+        });
+
+        it('The updated fill color should be displayed under the \'Fill color\' secondary toolbar option', () => {
+            drawingResponsePage.steps.verifySecondaryOptionStrokeColor(0, 'rgb(120, 60, 60)');
+        });
+
+        it('When user reopens the \'Fill color\' popup, the popup should reopen and all its previous changes should be retained', () => {
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[0]);
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(0, 'rgb(0, 224, 255)');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(1, 'rgb(6, 255, 172)');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(2, 'rgb(255, 90, 51)');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(3, 'rgb(120, 60, 60)');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(4, 'rgb(255, 255, 255)');
+            drawingResponsePage.steps.verifyNoColorOptionFromSecondaryOptionPopup(4);
+            drawingResponsePage.steps.verifySelectedColorBlock('rgb(120, 60, 60)');
+        });
+
+        it('CSS of color popup contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryOptionPopupTitle(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(drawingResponsePage.colorPalleteSelectedColorLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(drawingResponsePage.colorPalleteOkButton(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.primaryBtnBg
+            });
+            utilities.verifyCSS(drawingResponsePage.colorPalleteCancelButton(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.defaultBackground
+            });
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/539391
+        drawingResponsePage.tests.checkAccessibilityForSecondaryToolbarOptionPopup();
+    });
+
+    describe('Preview tab - secondary toolbar options - \'Stroke color\' - content and functionality', { tags: 'smoke' }, () => {
+        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[9].displayName]);
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].displayName);
+        });
+
+        it(`When ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[1]} additional option is not selected in edit tab, then in preview tab the ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[1]} secondary toolbar option should not be displayed`, () => {
+            utilities.verifyElementVisibilityState(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[1]), 'notExist');
+        });
+
+        it(`When ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[1]} additional option is selected in edit tab, then in preview tab the ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[1]} secondary toolbar option should be displayed`, () => {
+            drawingResponsePage.steps.switchToEditTab();
+            drawingResponsePage.steps.selectOptionsTiles([`${drawingToolbarOptionsAndAdditionalOptions.additionalOptions[3]}`]);
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].displayName);
+            utilities.verifyElementVisibilityState(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[1]), 'notExist');
+        });
+
+        it('By default the \'Stroke color\' secondary toolbar option should be in deselected state', () => {
+            //Add here once https://redmine.zeuslearning.com/issues/554508 is resolved
+        });
+
+        it('The default stroke color should be displayed under the \'Stroke color\' secondary toolbar option', () => {
+            drawingResponsePage.steps.verifySecondaryOptionStrokeColor(1, 'rgb(0, 112, 128)');
+        });
+
+        it('CSS of \'Stroke color\' secondary toolbar option in deselected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[1]), {
+                'background-color': css.color.defaultToolbarOptionBg
+            });
+        });
+
+        it('Accessibility of secondary toolbar options', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[1]));
+        });
+
+        it(`In preview tab the ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[1]} secondary toolbar option popup should contain four default color options and a \'No color\' option for the author to choose from and the first color option should be selected by default`, () => {
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[1]);
+            drawingResponsePage.steps.verifySecondaryOptionPopupTitle(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[1]);
+            drawingResponsePage.steps.verifySelectedOptionFromSecondaryOptionPopup(0);
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(0, 'rgb(0, 112, 128)');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(1, 'rgb(0, 133, 89)');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(2, 'rgb(128, 25, 0)');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(3, 'rgb(255, 255, 255)');
+            drawingResponsePage.steps.verifyNoColorOptionFromSecondaryOptionPopup(4);
+            utilities.verifyElementCount(drawingResponsePage.previewTabSecondaryOptionPopupOptions(), '5');
+        });
+
+        it(`When \'Stroke color picker\'additional option is not selected in edit tab, then in preview tab the ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[1]} secondary toolbar option popup should not display color picker and its related components`, () => {
+            utilities.verifyElementVisibilityState(drawingResponsePage.previewTabColorPickerLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(colorPopupComponent.colorHuePalette(), 'notExist');
+            utilities.verifyElementVisibilityState(colorPopupComponent.colorHuePicker(), 'notExist');
+        });
+
+        it(`When \'Stroke color picker\' additional option is selected in edit tab, then in preview tab the ${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[1]} secondary toolbar option popup should display color picker and its related components`, () => {
+            drawingResponsePage.steps.switchToEditTab();
+            drawingResponsePage.steps.selectOptionsTiles([`${drawingToolbarOptionsAndAdditionalOptions.additionalOptions[4]}`]);
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].displayName);
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[1]);
+            drawingResponsePage.steps.verifySecondaryOptionPopupTitle(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[1]);
+            utilities.verifyElementVisibilityState(colorPopupComponent.colorHuePalette(), 'visible');
+            utilities.verifyElementVisibilityState(colorPopupComponent.colorHuePicker(), 'visible');
+        });
+
+        it('CSS of \'Stroke color\' secondary toolbar option in selected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[1]), {
+                'background-color': css.color.secondaryBtnBorder
+            });
+        });
+
+        it('The \'Select color\' heading, color picker pallette, \'Selected color\' heading and the default selected color should be displayed in the popup in their default states', () => {
+            drawingResponsePage.steps.verifyPreviewTabColorPickerLabel();
+            drawingResponsePage.steps.verifySelectedColorLabelAndSelectedColorBlock();
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgba(255, 255, 255, 0.23)');
+            colorPopupComponent.steps.verifyColorSaturationPaletteAndPicker();
+            colorPopupComponent.steps.verifyHuePaletteColor('rgba(255, 255, 255, 0.23)');
+            colorPopupComponent.steps.verifyColorHuePaletteAndPicker();
+        });
+
+        it('User should be able to select a different color from the provided default color options inside the \'Fill color\' popup', () => {
+            drawingResponsePage.steps.selectOptionFromSecondaryOptionPopup(3);
+            drawingResponsePage.steps.verifySecondaryPopupDoesNotExist();
+            drawingResponsePage.steps.verifySecondaryOptionStrokeColor(1, 'rgb(255, 255, 255)');
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[1]);
+            drawingResponsePage.steps.verifySelectedOptionFromSecondaryOptionPopup(3);
+            drawingResponsePage.steps.selectOptionFromSecondaryOptionPopup(1);
+            drawingResponsePage.steps.verifySecondaryPopupDoesNotExist();
+            drawingResponsePage.steps.verifySecondaryOptionStrokeColor(1, 'rgb(0, 133, 89)');
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[1]);
+            drawingResponsePage.steps.verifySelectedOptionFromSecondaryOptionPopup(1);
+        });
+
+        //Update below test case as per https://redmine.zeuslearning.com/issues/550787
+        it('User should be able to make changes in the color picker pallette and the changes should be reflected in the selected color box', () => {
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            drawingResponsePage.steps.verifySelectedColorBlock('rgb(120, 60, 60)');
+        });
+
+        it('\'Ok\' and \'Cancel\' button should be displayed in the popup', () => {
+            drawingResponsePage.steps.verifyColorPopupCancelButton();
+            drawingResponsePage.steps.verifyColorPopupOkButton();
+        });
+
+        it('When user clicks on the \'Cancel\' button, then the popup should be closed.', () => {
+            drawingResponsePage.steps.clickOnCancelButton();
+            drawingResponsePage.steps.verifySecondaryPopupDoesNotExist();
+        });
+
+        it('When user reopens the \'Stroke color\' popup , the popup should be displayed with all its default settings', () => {
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[1]);
+            drawingResponsePage.steps.verifySelectedOptionFromSecondaryOptionPopup(0);
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(0, 'rgb(0, 112, 128)');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(1, 'rgb(0, 133, 89)');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(2, 'rgb(128, 25, 0)');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(3, 'rgb(255, 255, 255)');
+            drawingResponsePage.steps.verifyNoColorOptionFromSecondaryOptionPopup(3);
+        });
+
+        it('When user makes some changes in the \'Stroke color\' popup and clicks on the \'Ok\' button, then the popup should be closed.', () => {
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            drawingResponsePage.steps.verifySelectedColorBlock('rgb(120, 60, 60)');
+            drawingResponsePage.steps.clickOnOkButton();
+            drawingResponsePage.steps.verifySecondaryPopupDoesNotExist();
+        });
+
+        it('The updated stroke color should be displayed under the \'Stroke color\' secondary toolbar option', () => {
+            drawingResponsePage.steps.verifySecondaryOptionStrokeColor(1, 'rgb(120, 60, 60)');
+        });
+
+        it('When user reopens the \'Stroke color\' popup, the popup should reopen and all its previous changes should be retained', () => {
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[9].secondaryToolbarOptions[1]);
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(1, 'rgb(0, 133, 89)');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(2, 'rgb(128, 25, 0)');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(3, 'rgb(120, 60, 60)');
+            drawingResponsePage.steps.verifyCSSOfSecondaryOptionPopupOptions(4, 'rgb(255, 255, 255)');
+            drawingResponsePage.steps.verifyNoColorOptionFromSecondaryOptionPopup(4);
+            drawingResponsePage.steps.verifySelectedColorBlock('rgb(120, 60, 60)');
+        });
+
+        it('CSS of color popup contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryOptionPopupTitle(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(drawingResponsePage.colorPalleteSelectedColorLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(drawingResponsePage.colorPalleteOkButton(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.primaryBtnBg
+            });
+            utilities.verifyCSS(drawingResponsePage.colorPalleteCancelButton(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.defaultBackground
+            });
+        });
+
+        drawingResponsePage.tests.checkAccessibilityForSecondaryToolbarOptionPopup();
+    });
+
+    describe('Preview tab - secondary toolbar options - \'Line type\' - content and functionality', { tags: 'smoke' }, () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[2].displayName);
+        });
+
+        it('By default the \'Line type\' secondary toolbar option should be in deselected state', () => {
+            //Add here once https://redmine.zeuslearning.com/issues/554508 is resolved
+        });
+
+        it('CSS of \'Line type\' secondary toolbar option in deselected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[2].secondaryToolbarOptions[2]), {
+                'background-color': css.color.defaultToolbarOptionBg
+            });
+        });
+
+        it('Accessibility of \'Line type\' secondary toolbar option', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[2].secondaryToolbarOptions[2]));
+        });
+
+        it('When user clicks on \'Line type\' secondary toolbar option, then the \'Line type\' popup should be displayed and \'Line type\' secondary toolbar option should be in selected state', () => {
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[2].secondaryToolbarOptions[2]);
+            drawingResponsePage.steps.verifySecondaryPopupExist();
+            //Selected state of secondary toolbar option. Add here once https://redmine.zeuslearning.com/issues/554508 is resolved
+        });
+
+        it(`A \'Line type\' title along with the five line type options - ${lineTypeOptions.join(', ')} should be displayed`, () => {
+            drawingResponsePage.steps.verifySecondaryOptionPopupTitle(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[1].secondaryToolbarOptions[1]);
+            lineTypeOptions.forEach((thickness, index) => {
+                drawingResponsePage.steps.verifySecondaryPopupLineType(thickness, index);
+            });
+        });
+
+        it('Line option should be selected by default', () => {
+            drawingResponsePage.steps.verifySelectedOptionFromSecondaryOptionPopup(0);
+        });
+
+        it('User should be able to select a different line type option from the provided options inside the \'Line type\' popup', () => {
+            drawingResponsePage.steps.selectOptionFromSecondaryOptionPopup(2);
+            drawingResponsePage.steps.verifySecondaryPopupDoesNotExist();
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[2].secondaryToolbarOptions[2]);
+            drawingResponsePage.steps.verifySelectedOptionFromSecondaryOptionPopup(2);
+        });
+
+        it('CSS of \'Line type\' secondary toolbar option in selected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[2].secondaryToolbarOptions[2]), {
+                'background-color': css.color.background
+            });
+        });
+
+        it('Accessibility of secondary toolbar options', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.previewTabSecondaryToolbarOption());
+        });
+
+        it('When user makes some changes in the \'Line type\' popup, then the popup should close.', () => {
+            drawingResponsePage.steps.selectOptionFromSecondaryOptionPopup(1);
+            drawingResponsePage.steps.verifySecondaryPopupDoesNotExist();
+        });
+
+        it('When user reopens the \'Line type\' popup by clicking on the toolbar option, the popup should reopen and all its previously made changes should be retained/present', () => {
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[2].secondaryToolbarOptions[2]);
+            drawingResponsePage.steps.verifySelectedOptionFromSecondaryOptionPopup(2);
+        });
+
+        it('CSS of \'Line type\' popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryOptionPopupTitle(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+            });
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryOptionPopupTitle().last().find('svg'), {
+                'color': css.color.labels
+            });
+        });
+
+        drawingResponsePage.tests.checkAccessibilityForSecondaryToolbarOptionPopup();
+    });
+
+    describe('Preview tab - secondary toolbar options - \'Eraser thickness\' - content and functionality', { tags: 'smoke' }, () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+            drawingResponsePage.steps.expandCustomizeToolbarOptionsAndControlsAccordion();
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.selectPreviewTabToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[7].displayName);
+        });
+
+        it('By default the \'Eraser thickness\' secondary toolbar option should be in deselected state', () => {
+            //Add here once https://redmine.zeuslearning.com/issues/554508 is resolved
+        });
+
+        it('CSS of \'Eraser thickness\' secondary toolbar option in deselected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[7].secondaryToolbarOptions[0]), {
+                'background-color': css.color.defaultToolbarOptionBg
+            });
+        });
+
+        it('Accessibility of secondary toolbar options', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[7].secondaryToolbarOptions[0]));
+        });
+
+        it('When user clicks on \'Eraser thickness\' secondary toolbar option, then the \'Eraser thickness\' popup should be displayed and \'Eraser thickness\' secondary toolbar option should be in selected state', () => {
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[7].secondaryToolbarOptions[0]);
+            drawingResponsePage.steps.verifySecondaryPopupExist();
+            //Add here once https://redmine.zeuslearning.com/issues/554508 is resolved
+        });
+
+        it(`A \'Eraser thickness\' title along with the five eraser thickness options - ${thickness} should be displayed`, () => {
+            thickness.forEach((thickness, index) => {
+                drawingResponsePage.steps.verifySecondaryPopupEraserThickness(thickness, index)
+            });
+        });
+
+        it('5 pixels option should be selected by default', () => {
+            drawingResponsePage.steps.verifySelectedOptionFromSecondaryOptionPopup(0);
+        });
+
+        it('User should be able to select a different eraser thickness option from the provided options inside the \'Eraser thickness\' popup', () => {
+            drawingResponsePage.steps.selectOptionFromSecondaryOptionPopup(2);
+            drawingResponsePage.steps.verifySecondaryPopupDoesNotExist();
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[7].secondaryToolbarOptions[0]);
+            drawingResponsePage.steps.verifySelectedOptionFromSecondaryOptionPopup(2);
+        });
+
+        it('CSS of \'Eraser thickness\' secondary toolbar option in selected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[7].secondaryToolbarOptions[0]), {
+                'background-color': css.color.secondaryBtnBorder
+            });
+        });
+
+        it('Accessibility of secondary toolbar options', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.previewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[7].secondaryToolbarOptions[0]));
+        });
+
+        it('When user makes some changes in the \'Eraser thickness\' popup and clicks anywhere outside the popup, then the popup should close.', () => {
+            drawingResponsePage.steps.selectOptionFromSecondaryOptionPopup(1);
+            drawingResponsePage.steps.closeSecondaryPopup();
+            drawingResponsePage.steps.verifySecondaryPopupDoesNotExist();
+        });
+
+        it('When user reopens the \'Eraser thickness\' popup by clicking on the toolbar option, the popup should reopen and all its previously made changes should be retained/present', () => {
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[7].secondaryToolbarOptions[0]);
+            drawingResponsePage.steps.verifySelectedOptionFromSecondaryOptionPopup(1);
+        });
+
+        it('CSS of \'Eraser thickness\' popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryOptionPopupTitle(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+            });
+            utilities.verifyCSS(drawingResponsePage.previewTabSecondaryOptionPopupEraserImage(), {
+                'color': css.color.labels
+            });
+        });
+
+        drawingResponsePage.tests.checkAccessibilityForSecondaryToolbarOptionPopup();
+    });
+});