itemengine-cypress-automation 1.0.173 → 1.0.174

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

@@ -349,8 +349,6 @@ describe('Create item page - Drawing response: Customize special characters, Cus
             utilities.verifyElementVisibilityState(colorPopupComponent.hexLabel(), 'visible');
             utilities.verifyInnerText(colorPopupComponent.hexLabel(), 'Hex');
             utilities.verifyElementVisibilityState(colorPopupComponent.hexInputField(), 'visible');
-            utilities.verifyElementVisibilityState(drawingResponsePage.editTabColorPickerPopupSetToNoColorButton(), 'visible');
-            utilities.verifyInnerText(drawingResponsePage.editTabColorPickerPopupSetToNoColorButton(), 'Set to no color');
             utilities.verifyElementVisibilityState(drawingResponsePage.editTabColorPickerPopupCancelButton(), 'visible');
             utilities.verifyInnerText(drawingResponsePage.editTabColorPickerPopupCancelButton(), 'Cancel');
             utilities.verifyElementVisibilityState(drawingResponsePage.editTabColorPickerPopupOkButton(), 'visible');
@@ -469,13 +467,6 @@ describe('Create item page - Drawing response: Customize special characters, Cus
                 'font-size': css.fontSize.default,
                 'font-weight': css.fontWeight.regular
             });
-            utilities.verifyCSS(drawingResponsePage.editTabColorPickerPopupSetToNoColorButton(), {
-                'color': css.color.activeButtons,
-                'font-weight': css.fontWeight.regular
-            });
-            utilities.verifyCSS(drawingResponsePage.editTabColorPickerPopupSetToNoColorButton().find('svg'), {
-                'color': css.color.activeButtons
-            });
             utilities.verifyCSS(drawingResponsePage.editTabColorPickerPopupCancelButton().find('p'), {
                 'color': css.color.secondaryBtn,
                 'font-size': css.fontSize.default,
@@ -532,8 +523,6 @@ describe('Create item page - Drawing response: Customize special characters, Cus
             utilities.verifyElementVisibilityState(colorPopupComponent.hexLabel(), 'visible');
             utilities.verifyInnerText(colorPopupComponent.hexLabel(), 'Hex');
             utilities.verifyElementVisibilityState(colorPopupComponent.hexInputField(), 'visible');
-            utilities.verifyElementVisibilityState(drawingResponsePage.editTabColorPickerPopupSetToNoColorButton(), 'visible');
-            utilities.verifyInnerText(drawingResponsePage.editTabColorPickerPopupSetToNoColorButton(), 'Set to no color');
             utilities.verifyElementVisibilityState(drawingResponsePage.editTabColorPickerPopupCancelButton(), 'visible');
             utilities.verifyInnerText(drawingResponsePage.editTabColorPickerPopupCancelButton(), 'Cancel');
             utilities.verifyElementVisibilityState(drawingResponsePage.editTabColorPickerPopupOkButton(), 'visible');
@@ -650,13 +639,6 @@ describe('Create item page - Drawing response: Customize special characters, Cus
                 'font-size': css.fontSize.default,
                 'font-weight': css.fontWeight.regular
             });
-            utilities.verifyCSS(drawingResponsePage.editTabColorPickerPopupSetToNoColorButton(), {
-                'color': css.color.activeButtons,
-                'font-weight': css.fontWeight.regular
-            });
-            utilities.verifyCSS(drawingResponsePage.editTabColorPickerPopupSetToNoColorButton().find('svg'), {
-                'color': css.color.activeButtons
-            });
             utilities.verifyCSS(drawingResponsePage.editTabColorPickerPopupCancelButton().find('p'), {
                 'color': css.color.secondaryBtn,
                 'font-size': css.fontSize.default,

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

@@ -26,7 +26,7 @@ describe('Create item page - Drawing response: Question instructions, Customize
         drawingResponsePage.tests.verifyQuestionInstructionsInputFieldEditTab();
     });
 
-    //Failing due to https://redmine.zeuslearning.com/issues/555576
+    //Failing due to https://redmine.zeuslearning.com/issues/567593
     describe('Question instructions input field - Preview tab', () => {
         abortEarlySetup();
         before(() => {

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

@@ -189,13 +189,14 @@ describe('Create question page - Essay Response: Create custom category', () =>
             utilities.verifyInnerText(createCustomCategoryFlyout.selectSymbolsToDisplayLabel(), 'Select the symbols to display to the students.');
         });
 
-        it(`${allCategories} accordions should be displayed with their respective labels and unchecked checkboxes. `, () => {
+        //Failing due to https://redmine.zeuslearning.com/issues/566948
+        it(`${allCategories} accordions expect ${equationEditorCategoriesAndSymbols['numPad'].displayName} should be displayed with their respective labels and unchecked checkboxes.`, () => {
             createCustomCategoryFlyout.steps.verifyCreateCustomCategoryAccordionLabelsAndDefaultCheckbox();
         });
 
-        it(`By default, the ${equationEditorCategoriesAndSymbols['numPad'].displayName} category accordion should be expanded and other all accordions should be in collapsed state`, () => {
-            for (let index = 0; index < allCategories.length; index++) {
-                if (allCategories[index] === 'numPad') {
+        it(`By default, the ${equationEditorCategoriesAndSymbols['intermediate'].displayName} category accordion should be expanded and other all accordions should be in collapsed state`, () => {
+            for (let index = 1; index < allCategories.length; index++) {
+                if (allCategories[index] === 'intermediate') {
                     createCustomCategoryFlyout.steps.verifyCategoryAccordionIsExpanded(`${equationEditorCategoriesAndSymbols[allCategories[index]].displayName}`);
                 } else {
                     createCustomCategoryFlyout.steps.verifyCategoryAccordionIsCollapsed(`${equationEditorCategoriesAndSymbols[allCategories[index]].displayName}`);
@@ -208,12 +209,14 @@ describe('Create question page - Essay Response: Create custom category', () =>
             utilities.verifyElementVisibilityState(createCustomCategoryFlyout.buttonSave(), 'visible');
         });
 
-        allCategories.forEach((categoryName) => {
+        allCategories.slice(1).forEach((categoryName) => {
             it(`On clicking the ${equationEditorCategoriesAndSymbols[categoryName].displayName} category accordion the category should be expanded`, () => {
-                createCustomCategoryFlyout.steps.expandCategoryAccordion(`${equationEditorCategoriesAndSymbols[categoryName].displayName}`)
+                if (categoryName != 'Intermediate') {
+                    createCustomCategoryFlyout.steps.expandCategoryAccordion(`${equationEditorCategoriesAndSymbols[categoryName].displayName}`)
+                }
             });
 
-            it(`The ${equationEditorCategoriesAndSymbols[categoryName].displayName} category accordian should display all the ${equationEditorCategoriesAndSymbols[categoryName].displayName} category Symbols. By default, all the symbols should be deselected`, () => {
+            it(`The ${equationEditorCategoriesAndSymbols[categoryName].displayName} category accordion should display all the ${equationEditorCategoriesAndSymbols[categoryName].displayName} category Symbols. By default, all the symbols should be deselected`, () => {
                 const symbolsArray = Object.values(equationEditorCategoriesAndSymbols[categoryName].symbols)
                 createCustomCategoryFlyout.steps.verifySymbolsDisplayedInCustomCategoryFlyoutCategoryAccordion(`${equationEditorCategoriesAndSymbols[categoryName].displayName}`, symbolsArray)
             });

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

@@ -0,0 +1,111 @@
+import { feedbackScalePage } from "../../../pages/feedbackScalePage";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const fontSizes = { 'Tiny': '12px', 'Small': '14px', 'Default': '16px', 'Normal': '18px', 'Big': '22px', 'Huge': '26px' };
+
+describe('Create item page: Feedback scale: Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+        });
+
+        feedbackScalePage.tests.verifyAdditionalSettingsAccordionProperties();
+    });
+
+    describe('Additional settings: Font size contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            feedbackScalePage.steps.expandAdditionalSettings();
+        });
+
+        feedbackScalePage.tests.verifyFontSizeSectionContents();
+    });
+
+    describe('Additional settings: Font size contents preview tab section', () => {
+        const moreInfoFontSizes = { 'Default': '14px', 'Small': '12px', 'Normal': '14px', 'Large': '17px', 'Extra large': '20px', 'Huge': '24px' };
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            feedbackScalePage.steps.addTextInQuestionInstructionsInputField('Reflect on your progress toward the learning target by rating your comfort level.');
+            feedbackScalePage.steps.expandOptionAccordion(0);
+            feedbackScalePage.steps.addLegendText(0, 'I am uncomfortable with the learning target.');
+            feedbackScalePage.steps.expandAdditionalSettings();
+            feedbackScalePage.steps.checkAllowStudentsToAddCommentCheckbox();
+        });
+
+        Object.keys(fontSizes).forEach((option, fontsIndex) => {
+            it(`When the user selects \'${option}\' option from the Font size dropdown, then font size of the preview contents should be changed to ${fontSizes[option]} in the preview tab`, () => {
+                feedbackScalePage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex)
+                utilities.verifyInnerText(feedbackScalePage.fontSizeDropdown(), `${option}`);
+                feedbackScalePage.steps.switchToPreviewTab();
+                utilities.verifyCSS(feedbackScalePage.questionInstructionsText(), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(feedbackScalePage.feedbackButton(), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(feedbackScalePage.legendAccordion().find('.customize_info_label'), {
+                    'font-size': moreInfoFontSizes[option]
+                });
+                utilities.verifyCSS(feedbackScalePage.legendTextFeedbackButtonLabel(), {
+                    'font-size': moreInfoFontSizes[option]
+                });
+                utilities.verifyCSS(feedbackScalePage.legendTextPreviewTab(), {
+                    'font-size': moreInfoFontSizes[option]
+                });
+                utilities.verifyCSS(feedbackScalePage.commentLabel(), {
+                    'font-size': fontSizes[option]
+                });
+                utilities.verifyCSS(feedbackScalePage.commentInputField(), {
+                    'font-size': fontSizes[option]
+                });
+                feedbackScalePage.steps.switchToEditTab();
+            });
+        });
+    });
+
+    describe('Additional Settings: Details section', () => {
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            feedbackScalePage.steps.expandAdditionalSettings();
+        });
+
+        it('\'Details\' label should be displayed', () => {
+            utilities.verifyInnerText(feedbackScalePage.additionalSettingsDetailsLabel(), 'Details');
+        });
+
+        it('\'Acknowledgements & reference\' label and input field should be displayed and user should be able to enter \'Acknowledgements & reference\'', () => {
+            utilities.verifyInnerText(feedbackScalePage.additionalSettingsAcknowledgementsLabel(), 'Acknowledgements and references');
+            feedbackScalePage.steps.enterTextInAcknowledgementsInputField('Acknowledgements');
+            utilities.verifyTextContent(feedbackScalePage.additionalSettingsAcknowledgementsInputField(), 'Acknowledgements');
+        });
+
+        it('CSS of \'Details\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(additionalSettingsPanel.additionalSettingsDetailsLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(additionalSettingsPanel.additionalSettingsAcknowledgementsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(additionalSettingsPanel.additionalSettingsAcknowledgementsInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+    });
+});

package/cypress/e2e/ILC/FeedbackScaleNew/colorPopup.js

@@ -0,0 +1,206 @@
+import { dialogBoxBase } from "../../../pages";
+import { colorPopupComponent } from "../../../pages/components";
+import { feedbackScalePage } from "../../../pages/feedbackScalePage";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const recommendedColors = ['rgb(255, 133, 165)', 'rgb(236, 216, 19)', 'rgb(77, 188, 147)', 'rgb(196, 56, 56)', 'rgb(184, 88, 48)', 'rgb(41, 121, 175)', 'rgb(0, 111, 111)', 'rgb(42, 183, 58)', 'rgb(107, 139, 255)', 'rgb(0, 0, 0)', 'rgb(226, 121, 0)', 'rgb(255, 56, 0)'];
+describe('Create item page: Feedback scale: Color popup', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Color popup contents', () => {
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+            feedbackScalePage.steps.selectColorSectionRadioButton('Custom colors');
+        });
+
+        it('When the user clicks on the color block present in an option accordion, a color popup should be displayed', () => {
+            feedbackScalePage.steps.editColor(0);
+            colorPopupComponent.steps.verifyColorPopupIsDisplayed();
+        });
+
+        it('A title \'Select color\' should be displayed on the color popup', () => {
+            colorPopupComponent.steps.verifyColorPopupSelectColorTitle();
+        });
+
+        it('A \'Color saturation palette\' should be displayed on the color popup along with a color picker and the color picker should be set on the selected color', () => {
+            colorPopupComponent.steps.verifyColorSaturationPaletteAndPicker();
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(255, 133, 165)');
+        });
+
+        it('A \'Color hue palette\' should be displayed on the color popup along with a color picker and the color picker should be set on the selected color', () => {
+            colorPopupComponent.steps.verifyColorHuePaletteAndPicker();
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 68)');
+        });
+
+        it('A \'Selected color\' label and color block displaying the selected color should be displayed', () => {
+            colorPopupComponent.steps.verifySelectedColorLabelAndSelectedColorBlock();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(255, 133, 165)');
+        });
+
+        it('A \'Hex\' label and input field with pre-filled hex code value of the selected color should be displayed', () => {
+            colorPopupComponent.steps.verifyHexLabelAndInputField();
+            colorPopupComponent.steps.verifyHexValue('#FF85A5');
+        });
+
+        it('A \'Opacity\' label, a slider at 100% and an input field with pre-filled value - 100% should be displayed', () => {
+            colorPopupComponent.steps.verifyOpacityLabelSliderAndInputField();
+            colorPopupComponent.steps.verifyOpacityInputFieldValue('100');
+            colorPopupComponent.steps.verifyOpacitySliderValue('100');
+        });
+
+        it('A \'Recommended colors\' label along with recommended color blocks - Red, Yellow, Green, Black should be displayed', () => {
+            colorPopupComponent.steps.verifyRecommendedColorsLabel();
+            utilities.verifyElementCount(colorPopupComponent.recommendedColorBlock(), 12);
+            recommendedColors.forEach((color, blockIndex) => {
+                colorPopupComponent.steps.verifyRecommendedColorBlockValue(blockIndex, color);
+            });
+        });
+
+        it('When the selected color is one of the recommended color, then a \'selected\' icon should appear on the respective recommended color block', () => {
+            colorPopupComponent.steps.verifyRecommendedColorBlockSelectedState(0);
+        });
+
+        it('\'Cancel\' and \'Ok\' buttons should be displayed', () => {
+            colorPopupComponent.steps.verifyColorPopupCancelButton();
+            colorPopupComponent.steps.verifyColorPopupOkButton();
+        });
+
+        it('CSS of color popup contents', { tags: 'css' }, () => {
+            const labels = [colorPopupComponent.selectedColorLabel, colorPopupComponent.hexLabel]
+            labels.forEach(label => {
+                utilities.verifyCSS(label(), {
+                    'color': css.color.labels,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.semibold
+                });
+            });
+            utilities.verifyCSS(colorPopupComponent.hexInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(colorPopupComponent.okButton(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.primaryBtnBg
+            });
+            utilities.verifyCSS(colorPopupComponent.cancelButton(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessibility of color popup contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dialogBoxBase.dialogBoxContent());
+        });
+    });
+
+    describe('Color popup - Updating the selected color', () => {
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+            feedbackScalePage.steps.selectColorSectionRadioButton('Custom colors');
+        });
+
+        it('When the user moves the color picker in the color saturation palette, color in the selected color block and the hex code should change, color in the hue color palette and the opacity value should not change', () => {
+            feedbackScalePage.steps.editColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(121, 61, 77)');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(122, 62, 78)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 68)');
+            colorPopupComponent.steps.verifyHexValue('#793d4d');
+            colorPopupComponent.steps.verifyOpacityInputFieldValue('100');
+            colorPopupComponent.steps.verifyOpacitySliderValue('100');
+        });
+
+        it('When the user has set a custom color apart from the recommended colors, then the selected icon from the recommended color block should get removed', () => {
+            utilities.verifyElementVisibilityState(colorPopupComponent.recommendedColorBlockSelectedIcon(), 'notExist');
+        });
+
+        it('When the user moves the color picker in the color hue palette, color in the selected color block, the hex code and the saturation color palette should change and the opacity value should not change', () => {
+            colorPopupComponent.steps.clickInColorHuePalette();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(61, 121, 121)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(0, 255, 255)');
+            colorPopupComponent.steps.verifyHexValue('#3d7979');
+            colorPopupComponent.steps.verifyOpacityInputFieldValue('100');
+            colorPopupComponent.steps.verifyOpacitySliderValue('100');
+        });
+
+        it('When the user changes the color using hex code, the color in color saturation palette and color hue palette should change and the opacity value should not change', () => {
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.verifyHexValue('#ff0000');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyOpacityInputFieldValue('100');
+            colorPopupComponent.steps.verifyOpacitySliderValue('100');
+        });
+
+        it('When the user changes the opacity slider value, value in the opacity input field and the opacity of the selected color should change and the color in color saturation palette and color hue palette should not change', () => {
+            colorPopupComponent.steps.clickOnOpacitySlider();
+            colorPopupComponent.steps.verifyOpacityInputFieldValue('50');
+            colorPopupComponent.steps.verifyOpacitySliderValue('50');
+            colorPopupComponent.steps.verifyHexValue('#ff0000');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifySelectedColorBlock('rgba(255, 0, 0, 0.5)')
+        });
+
+        it('When the user changes value in the opacity input field, the slider value and the opacity of the selected color should change and the color in color saturation palette and color hue palette should not change', () => {
+            colorPopupComponent.steps.addInputToOpacityInputField('20');
+            colorPopupComponent.steps.verifyOpacityInputFieldValue('20');
+            colorPopupComponent.steps.verifyOpacitySliderValue('20');
+            colorPopupComponent.steps.verifyHexValue('#ff0000');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifySelectedColorBlock('rgba(255, 0, 0, 0.2)');
+        });
+
+        it('When the user selects a color block from the recommended colors, the selected color should change, the opacity values should not change and the selected icon should be displayed on the newly selected recommended color', () => {
+            colorPopupComponent.steps.selectRecommendedColorBlock(1);
+            colorPopupComponent.steps.verifyRecommendedColorBlockSelectedState(1);
+            colorPopupComponent.steps.verifyOpacityInputFieldValue('20');
+            colorPopupComponent.steps.verifyOpacitySliderValue('20');
+            colorPopupComponent.steps.verifyHexValue('#ECD813');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(237, 215, 18)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 230, 0)');
+            colorPopupComponent.steps.verifySelectedColorBlock('rgba(236, 216, 19, 0.2)')
+        });
+    });
+
+    describe('Color popup - \'Cancel\' and \'Ok\' buttons', () => {
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+            feedbackScalePage.steps.selectColorSectionRadioButton('Custom colors');
+        });
+
+        it('When the user modifies the selected color in the color popup and clicks on \'Cancel\' button, then the popup should close, the color block should not change and the modifications in the color popup should not persist', () => {
+            feedbackScalePage.steps.editColor(0);
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.addInputToOpacityInputField('20');
+            colorPopupComponent.steps.clickOnCancelButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            colorPopupComponent.steps.verifyColorBlockInOptionAccordion(0, 'rgb(255, 133, 165)');
+        });
+
+        it('When the user modifies the selected color in the color popup and clicks on \'Ok\' button, then the popup should close, the color block should change to the new selected color and the modifications in the color popup should persist', () => {
+            cy.log('Pre-step: clicking on the edit color button')
+            feedbackScalePage.steps.editColor(0);
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.addInputToOpacityInputField('20');
+            colorPopupComponent.steps.clickOnOkButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            colorPopupComponent.steps.verifyColorBlockInOptionAccordion(0, 'rgba(255, 0, 0, 0.2)');
+        });
+    });
+});