itemengine-cypress-automation 1.0.165-migrationScripts-e27d6f2.0 → 1.0.166

package/cypress/e2e/ILC/EssayResponse/essayResponseAdditionalSettingsBasic.js

@@ -0,0 +1,134 @@
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { essayResponsePage } from "../../../pages";
+import { ckEditorToolbar } from "../../../pages/components";
+const css = Cypress.env('css');
+
+let specialCharacters = [':', ')', '`']
+describe('Create question page - Essay Response: Additional Settings basic', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional Settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+        });
+
+        essayResponsePage.tests.verifyAdditionalSettingsAccordionProperties();
+    });
+
+    describe('\'Student response area and layout\' section', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            essayResponsePage.steps.expandAdditionalSettings();
+        });
+
+        it('\'Student response area and layout\' label should be displayed', () => {
+            essayResponsePage.studentResponseAndLayoutLabel()
+                .verifyInnerText('Student response area and layout')
+                .should('be.visible');
+        });
+
+        it('CSS of \'Student response area and layout\' section', { tags: 'css' }, () => {
+            essayResponsePage.studentResponseAndLayoutLabel()
+                .verifyCSS(css.color.labels, css.fontSize.default, css.fontWeight.semibold);
+        });
+
+        it('Accessibility of \'Student response area and layout\' section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponsePage.studentResponseAndLayoutLabel())
+        });
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/551117
+    describe('Additional Settings: Custom special characters section', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            essayResponsePage.steps.expandAdditionalSettings();
+        });
+
+        it('\'Custom special characters\' label and \'Custom special characters\' input field should be displayed, by default the input field should be empty and user should be able to enter \'Custom special characters', () => {
+            essayResponsePage.customSpecialCharacterLabel()
+                .verifyInnerText('Custom special characters');
+            essayResponsePage.customSpecialCharacterInputField()
+                .should('have.value', '');
+            essayResponsePage.customSpecialCharacterInputField()
+                .type(':)`')
+                .should('have.value', ':)`');
+        });
+
+        it('When the user has added the \'Custom special characters\' then in the preview tab, on clicking on the special character toolbar option, only the custom special characters should appear in the dialog box and the user should be able to enter custom special characters in the response field', () => {
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.previewTabToolbarOption('Special characters')
+                .click();
+            ckEditorToolbar.ckeDialogbox()
+                .should('be.visible');
+            specialCharacters.forEach((character, count) => {
+                essayResponsePage.specialCharacterFlyoutIcon(count)
+                    .should('have.text', character);
+            });
+        });
+
+        it('User should be able to add all special characters in the response field and word count should update accordingly.', () => {
+            for (let index = 0; index < specialCharacters.length; index++) {
+                essayResponsePage.specialCharacterFlyoutIcon(index)
+                    .click();
+            };
+            essayResponsePage.responseField()
+                .should('have.text', ':)`');
+            essayResponsePage.responseFieldWordCount()
+                .should('have.text', '1/10000');
+        });
+    });
+
+    describe('Additional Settings: Font Size dropdown', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            essayResponsePage.steps.expandAdditionalSettings();
+            essayResponsePage.steps.setWordLimit(2);
+        });
+        const fontsizes = ['Tiny', 'Small', 'Default', 'Normal', 'Big', 'Huge'];
+        const font = ['16px', '12px', '14px', '17px', '20px', '24px'];
+
+        essayResponsePage.tests.verifyFontSizeSectionContents();
+
+        fontsizes.forEach((option, count) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size for the entire question in the student player should be changed to ${option} in the \'Preview\' tab`, () => {
+                essayResponsePage.fontSizeDropdown()
+                    .click();
+                essayResponsePage.fontSizeListOptions(count)
+                    .click();
+                essayResponsePage.fontSizeDropdown()
+                    .verifyInnerText(`${option}`);
+                cy.log('Switching to Preview tab.');
+                essayResponsePage.steps.switchToPreviewTab();
+                essayResponsePage.previewTabToolbarOption('Special characters')
+                    .should('have.css', 'font-size', font[count]);
+                essayResponsePage.responseField()
+                    .should('have.css', 'font-size', font[count]);
+                essayResponsePage.responseFieldWordCount()
+                    .should('have.css', 'font-size', font[count]);
+                cy.log('Reaching word limit to verify font size of warning message');
+                essayResponsePage.responseField()
+                    .type('Lorem Ipsum')
+                    .should('have.text', 'Lorem Ipsum');
+                essayResponsePage.wordLimitReachedWarningMessage()
+                    .should('have.css', 'font-size', font[count]);
+                essayResponsePage.steps.switchToEditTab()
+            });
+        });
+    });
+
+    describe('Additional Settings: Details section', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            essayResponsePage.steps.expandAdditionalSettings();
+        });
+
+        essayResponsePage.tests.verifyDetailsSection();
+    });
+});

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

@@ -0,0 +1,161 @@
+describe('Create item page: Feedback scale: Preview tab: \'Button\' and \'Star\' layouts, add, delete option accordion', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Feedback scale - \'Numbers\' layout style in the preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+        });
+
+        it('By default 5 number buttons with text "#"(# being a number from 1 to 5) should be displayed in the preview tab', () => {
+
+        });
+
+        it('A \'Legend text\' accordion should be present and by default it should be in expanded state', () => {
+
+        });
+
+        it('The legend text accordion should display the number button, no legend text should be displayed for the number buttons', () => {
+        });
+
+        it('When the user switches to edit tab and adds legend text, then the added legend text should be displayed besides the respective number button in the legend text accordion', () => {
+
+        });
+
+        it('CSS of number buttons - unselected state', { tags: 'css' }, () => {
+        });
+
+        it('Accessibility of number buttons - unselected state', { tags: 'a11y' }, () => {
+        });
+
+        it('The user should be able to mark feedback by clicking on any number button', () => {
+
+        });
+
+        it('CSS of number buttons - selected state', { tags: 'css' }, () => {
+        });
+
+        it('Accessibility of number buttons - selected state', { tags: 'a11y' }, () => {
+        });
+    });
+
+    describe('Feedback scale - \'Thumbs\' layout style in the preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+        });
+
+        it('By default two buttons, "Thumbs up" and "Thumbs down" should be displayed in the preview tab', () => {
+
+        });
+
+        it('A \'Legend text\' accordion should be present and by default it should be in expanded state', () => {
+
+        });
+
+        it('The legend text accordion should display the two buttons with button labels - "Thumbs up" and "Thumbs down", no legend text should be displayed for the two buttons', () => {
+        });
+
+        it('When the user switches to edit tab and adds legend text, then the added legend text should be displayed besides the respective button in the legend text accordion', () => {
+
+        });
+
+        it('CSS of Thumb buttons - unselected state', { tags: 'css' }, () => {
+        });
+
+        it('Accessibility of Thumb buttons - unselected state', { tags: 'a11y' }, () => {
+        });
+
+        it('The user should be able to mark feedback by clicking on any Thumb button', () => {
+
+        });
+
+        it('CSS of Thumb buttons - selected state', { tags: 'css' }, () => {
+        });
+
+        it('Accessibility of Thumb buttons - selected state', { tags: 'a11y' }, () => {
+        });
+    });
+
+    describe('Feedback scale - \'Stars/Hearts\' layout style in the preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+        });
+
+        it('By default 5 star buttons should be displayed in the preview tab', () => {
+
+        });
+
+        it('A \'Legend text\' accordion should be present and by default it should be in expanded state', () => {
+
+        });
+
+        it('The legend text accordion should display the stars in a list with all 5 stars present and the respective number of stars in highlighted state, no legend text should be displayed for the star buttons', () => {
+        });
+
+        it('When the user switches to edit tab and adds legend text, then the added legend text should be displayed besides the respective star button in the legend text accordion', () => {
+
+        });
+
+        it('CSS of star buttons - unselected state', { tags: 'css' }, () => {
+        });
+
+        it('Accessibility of star buttons - unselected state', { tags: 'a11y' }, () => {
+        });
+
+        it('The user should be able to mark feedback by clicking on any star button', () => {
+
+        });
+
+        it('CSS of star buttons - selected state', { tags: 'css' }, () => {
+        });
+
+        it('Accessibility of star buttons - selected state', { tags: 'a11y' }, () => {
+        });
+
+        it('By default 5 heart buttons should be displayed in the preview tab', () => {
+            // Verify that there are 5 heart buttons by default
+            // You can use assertions to check the presence of heart buttons in the preview tab
+        });
+        
+        it('A \'Legend text\' accordion should be present and by default it should be in expanded state', () => {
+            // Verify that a 'Legend text' accordion is present and expanded by default
+        });
+        
+        it('The legend text accordion should display the hearts in a list with all 5 hearts present and the respective number of hearts in highlighted state, no legend text should be displayed for the heart buttons', () => {
+            // Verify that the legend text accordion displays hearts in a list with all 5 hearts present
+            // Check that the respective number of hearts is highlighted
+            // Ensure that no legend text is displayed for the heart buttons
+        });
+        
+        it('When the user switches to edit tab and adds legend text, then the added legend text should be displayed besides the respective heart button in the legend text accordion', () => {
+            // Switch to the edit tab
+            // Add legend text for each heart button
+            // Verify that the added legend text is displayed beside the respective heart button in the legend text accordion
+        });
+        
+        it('CSS of heart buttons - unselected state', { tags: 'css' }, () => {
+            // Verify the CSS of heart buttons in their unselected state
+        });
+        
+        it('Accessibility of heart buttons - unselected state', { tags: 'a11y' }, () => {
+            // Verify the accessibility of heart buttons in their unselected state
+        });
+        
+        it('The user should be able to mark feedback by clicking on any heart button', () => {
+            // Verify that the user can mark feedback by clicking on any heart button
+        });
+        
+        it('CSS of heart buttons - selected state', { tags: 'css' }, () => {
+            // Verify the CSS of heart buttons in their selected state
+        });
+        
+        it('Accessibility of heart buttons - selected state', { tags: 'a11y' }, () => {
+            // Verify the accessibility of heart buttons in their selected state
+        });
+    });
+});
+
+//edit tab - 
+//different files for all scale styles
+//include all possible cases, default, add/delete edit tab and preview

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

@@ -0,0 +1,308 @@
+import { feedbackScalePage } from "../../../pages";
+import { colorPopupComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const numbersDefaultColor = "rgb(107, 139, 255)";
+const css = Cypress.env('css');
+
+describe('Create item page: Feedback scale - Numbers feedback scale style - Edit and preview tab contents and functionality ', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Numbers feedback scale style - Edit tab contents', () => {
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+        });
+
+        it('The user should be able to select "Numbers" feedback scale style from the feedback scale style dropdown', () => {
+            feedbackScalePage.steps.expandFeedbackScaleStyleDropdown();
+            feedbackScalePage.steps.selectOptionFromFeedbackScaleStyleDropdown('Numbers');
+        });
+
+        it('By default in the options stepper count input field, "5" should be displayed', () => {
+            feedbackScalePage.steps.verifyCountInOptionsStepperInputField(5);
+        });
+
+        it('5 option accordions should be displayed with label "Option #" (# being a number from 1 to 5), Points and "Delete option" icon button, by default all option accordions should be in collapsed state', () => {
+            for (let index = 0; index < 5; index++) {
+                feedbackScalePage.steps.verifyOptionsAccordionProperties(index, { optionLabel: `Option ${index + 1}`, Points: `${index + 1}` });
+                feedbackScalePage.steps.verifyOptionAccordionCollapsedState(index);
+            };
+        });
+
+        it('The user should be able to expand any option accordion, on expanding the option accordion, a "Legend text" label and empty input field with placeholder text, "Enter legend text" should be displayed', () => {
+            feedbackScalePage.steps.expandOptionAccordion(0);
+            utilities.verifyInnerText(utilities.getNthElement(feedbackScalePage.legendTextLabel(), 0), 'Legend text');
+            feedbackScalePage.steps.verifyLegendTextInputFieldPlaceholder(0);
+        });
+
+        it('The user should be able to enter text in the legend text input field, the placeholder text should disappear on entering the text', () => {
+            feedbackScalePage.steps.addLegendText(0, 'I am uncomfortable with the learning target.');
+            feedbackScalePage.steps.verifyLegendTextInputFieldPlaceholderNotExists(0);
+        });
+
+        it('When the user removes the added text from the legend input field, the placeholder text should appear again', () => {
+            feedbackScalePage.steps.clearLegendTextInputField(0);
+            feedbackScalePage.steps.verifyLegendTextInputFieldPlaceholder(0);
+        });
+
+        it('On expanding any other option accordion, the previously expanded accordion should continue to stay in expanded state', () => {
+            feedbackScalePage.steps.expandOptionAccordion(1);
+            feedbackScalePage.steps.verifyOptionAccordionExpandedState(0);
+            feedbackScalePage.steps.verifyOptionAccordionExpandedState(1);
+        });
+    });
+
+    describe('Numbers feedback scale style - Preview tab contents', () => {
+        const legendTexts = ['Poor', 'Okay', 'Can do better', 'Good', 'Excellent'];
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+            feedbackScalePage.steps.expandFeedbackScaleStyleDropdown();
+            feedbackScalePage.steps.selectOptionFromFeedbackScaleStyleDropdown('Numbers');
+            feedbackScalePage.steps.switchToPreviewTab();
+        });
+
+        it('By default 5 number buttons with text "#" (# being a number from 1 to 5) should be displayed in the preview tab', () => {
+            utilities.verifyElementCount(feedbackScalePage.feedbackButton(), 5);
+            for (let index = 0; index < 5; index++) {
+                feedbackScalePage.steps.verifyFeedbackButtonInPreviewTab(index, `${index + 1}`)
+            };
+        });
+
+        feedbackScalePage.tests.verifyLegendAccordionDefaultState();
+
+        feedbackScalePage.tests.verifyLegendAccordionCollapsedAndExpandedState();
+
+        it('The legend accordion should display the number button, no legend text should be displayed for the number buttons', () => {
+            for (let index = 0; index < 5; index++) {
+                feedbackScalePage.steps.verifyNumberBlocksInLegendAccordion(index);
+            };
+            utilities.verifyElementVisibilityState(feedbackScalePage.legendTextPreviewTab(), 'notExist');
+        });
+
+        it('When the user switches to edit tab and adds legend text, then the added legend text should be displayed besides the respective number button in the legend accordion', () => {
+            feedbackScalePage.steps.switchToEditTab();
+            legendTexts.forEach((legendText, index) => {
+                feedbackScalePage.steps.expandOptionAccordion(index);
+                feedbackScalePage.steps.addLegendText(index, legendText);
+            });
+            feedbackScalePage.steps.switchToPreviewTab();
+            legendTexts.forEach((legendText, buttonIndex) => {
+                feedbackScalePage.steps.verifyNumberBlockFeedbackButtonLabelLegendTextInLegendAccordion(buttonIndex, legendText);
+            });
+        });
+
+        it('CSS of number buttons - unselected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(feedbackScalePage.feedbackButtonNumberText(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.extraLarge,
+                'font-weight': css.fontWeight.regular,
+            });
+            utilities.verifyCSS(feedbackScalePage.feedbackButton(), {
+                'background-color': css.color.transparent,
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`
+            });
+            cy.log('Hover state CSS')
+            utilities.hoverOverElement(utilities.getNthElement(feedbackScalePage.feedbackButton(), 0));
+            utilities.verifyCSS(utilities.getNthElement(feedbackScalePage.feedbackButton(), 0), {
+                'background-color': css.color.transparent,
+                'border': `2px solid ${css.color.figDefaultComponentBorder}`
+            });
+            utilities.hoverAwayFromElement();
+        });
+
+        it('Accessibility of number buttons - unselected state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(feedbackScalePage.feedbackButton().parents('[class*="question-preview-wrapper"]'));
+        });
+
+        it('The user should be able to mark feedback by clicking on any number button', () => {
+            feedbackScalePage.steps.clickOnFeedbackButton(0);
+            feedbackScalePage.steps.verifyFeedbackButtonSelectedState(0);
+        });
+
+        it('The user should be able to update the feedback by selecting other button, previously selected button should get unselected', () => {
+            feedbackScalePage.steps.clickOnFeedbackButton(1);
+            feedbackScalePage.steps.verifyFeedbackButtonSelectedState(1);
+            feedbackScalePage.steps.verifyFeedbackButtonUnselectedState(0);
+        });
+
+        it('CSS of number buttons - selected state', { tags: 'css' }, () => {
+            utilities.verifyCSS(utilities.getNthElement(feedbackScalePage.feedbackButtonNumberText(), 1), {
+                'color': css.color.text,
+                'font-size': css.fontSize.extraLarge,
+                'font-weight': css.fontWeight.bold,
+            });
+            utilities.verifyCSS(utilities.getNthElement(feedbackScalePage.feedbackButton(), 1), {
+                'background-color': "rgba(107, 139, 255, 0.1)",
+                'border': `2px solid ${css.color.figDefaultComponentBorder}`
+            });
+            utilities.verifyCSS(feedbackScalePage.legendAccordion().find('.customize_info_label'), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(feedbackScalePage.legendTextPreviewTab(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of number buttons - selected state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(feedbackScalePage.feedbackButton().parents('[class*="question-preview-wrapper"]'));
+        });
+    });
+
+    describe('Numbers feedback scale style - Add and delete options : Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+            feedbackScalePage.steps.expandFeedbackScaleStyleDropdown();
+            feedbackScalePage.steps.selectOptionFromFeedbackScaleStyleDropdown('Numbers');
+        });
+
+        it('The user should be able to add a new option by increasing the stepper count in the options input field', () => {
+            feedbackScalePage.steps.increaseOptionsInputStepperCount(1);
+            feedbackScalePage.steps.verifyOptionsAccordionCount(6);
+        });
+
+        it('The newly added option should be displayed with label "Option 6", Points and "Delete option" icon button, by default the accordion should be in collapsed state', () => {
+            feedbackScalePage.steps.verifyOptionsAccordionProperties(5, { optionLabel: 'Option 6', Points: '6' });
+            feedbackScalePage.steps.verifyOptionAccordionCollapsedState(5);
+        });
+
+        it('The user should also be able to add a new option using the "+Add option" button, the count in the options stepper input field should also update accordingly', () => {
+            feedbackScalePage.steps.addOption();
+            feedbackScalePage.steps.verifyCountInOptionsStepperInputField(7);
+            feedbackScalePage.steps.verifyOptionsAccordionCount(7);
+            feedbackScalePage.steps.verifyOptionsAccordionProperties(6, { optionLabel: 'Option 7', Points: '7' });
+        });
+
+        it('When the user deletes an option accordion, then the remaining options should get updated accordingly, the count in the options stepper input field should also update accordingly', () => {
+            feedbackScalePage.steps.deleteOptionAccordion(5);
+            for (let index = 0; index < 6; index++) {
+                feedbackScalePage.steps.verifyOptionsAccordionProperties(index, { optionLabel: `Option ${index + 1}`, Points: `${index + 1}` });
+            };
+            feedbackScalePage.steps.verifyCountInOptionsStepperInputField(6);
+        });
+
+        it('When the user decreases the options stepper count, the last option should get removed and the remaining options should get updated accordingly', () => {
+            feedbackScalePage.steps.decreaseOptionsInputStepperCount(1);
+            feedbackScalePage.steps.verifyCountInOptionsStepperInputField(5);
+            for (let index = 0; index < 5; index++) {
+                feedbackScalePage.steps.verifyOptionsAccordionProperties(index, { optionLabel: `Option ${index + 1}`, Points: `${index + 1}` });
+            };
+            feedbackScalePage.steps.verifyCountInOptionsStepperInputField(5);
+        });
+    });
+
+    describe('Numbers feedback scale style - Add and delete options : Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+            feedbackScalePage.steps.expandFeedbackScaleStyleDropdown();
+            feedbackScalePage.steps.selectOptionFromFeedbackScaleStyleDropdown('Numbers');
+        });
+
+        it('When the increases the stepper count in the options input field, the newly added feedback buttons should be displayed in the preview tab', () => {
+            feedbackScalePage.steps.increaseOptionsInputStepperCount(1);
+            feedbackScalePage.steps.switchToPreviewTab();
+            feedbackScalePage.steps.verifyFeedbackButtonInPreviewTab(5, '6');
+            feedbackScalePage.steps.verifyNumberBlocksInLegendAccordion(5);
+        });
+
+        it('When the user adds a new option using the "+Add option" button, the newly added feedback buttons should be displayed in the preview tab', () => {
+            feedbackScalePage.steps.switchToEditTab();
+            feedbackScalePage.steps.addOption();
+            feedbackScalePage.steps.switchToPreviewTab();
+            feedbackScalePage.steps.verifyFeedbackButtonInPreviewTab(6, '7');
+            feedbackScalePage.steps.verifyNumberBlocksInLegendAccordion(6);
+        });
+
+        it('When the user deletes an option accordion, then the remaining feedback buttons should get updated accordingly in the preview tab', () => {
+            feedbackScalePage.steps.switchToEditTab();
+            feedbackScalePage.steps.deleteOptionAccordion(5);
+            feedbackScalePage.steps.switchToPreviewTab();
+            utilities.verifyElementCount(feedbackScalePage.feedbackButton(), 6);
+            for (let index = 0; index < 6; index++) {
+                feedbackScalePage.steps.verifyFeedbackButtonInPreviewTab(index, `${index + 1}`);
+                feedbackScalePage.steps.verifyNumberBlocksInLegendAccordion(index);
+            };
+        });
+
+        it('When the user decreases the options stepper count, then the last feedback button should get removed and the remaining options should get updated accordingly', () => {
+            feedbackScalePage.steps.switchToEditTab();
+            feedbackScalePage.steps.decreaseOptionsInputStepperCount(1);
+            feedbackScalePage.steps.switchToPreviewTab();
+            utilities.verifyElementCount(feedbackScalePage.feedbackButton(), 5);
+            for (let index = 0; index < 5; index++) {
+                feedbackScalePage.steps.verifyFeedbackButtonInPreviewTab(index, `${index + 1}`);
+                feedbackScalePage.steps.verifyNumberBlocksInLegendAccordion(index);
+            };
+        });
+    });
+
+    describe('Numbers feedback scale style - Colors section contents', () => {
+        const modifiedColor = 'rgba(255, 0, 0, 0.7)'
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+            feedbackScalePage.steps.expandFeedbackScaleStyleDropdown();
+            feedbackScalePage.steps.selectOptionFromFeedbackScaleStyleDropdown('Numbers');
+        });
+
+        it('For "Numbers" feedback scale style, in the color section, a color block with "rgb(107, 139, 255)" color should be displayed. An edit icon and "Edit color" label should be displayed besides the color block"', () => {
+            feedbackScalePage.steps.verifyColorPickerBlockColor(0, numbersDefaultColor);
+            utilities.verifyInnerText(feedbackScalePage.editColorButton(), 'Edit color');
+            utilities.verifyElementVisibilityState(feedbackScalePage.editColorButton(), 'visible');
+        });
+
+        it('When the user clicks on the "Edit color" button, a "Select color" popup should be displayed and the default selected color block should be in the selected state in the color popup', () => {
+            feedbackScalePage.steps.editColor(0);
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(107, 139, 255)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(0, 55, 255)');
+            colorPopupComponent.steps.verifyHexValue('#6B8BFF');
+            colorPopupComponent.steps.verifyOpacityInputFieldValue('100');
+            colorPopupComponent.steps.verifyOpacitySliderValue('100');
+            colorPopupComponent.steps.verifySelectedColorBlock(numbersDefaultColor);
+            colorPopupComponent.steps.verifyRecommendedColorBlockSelectedState(8);
+        });
+
+        it('When the user modifies the selected color, the updated color should be displayed in the color block of the "Colors" section', () => {
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.addInputToOpacityInputField('70');
+            colorPopupComponent.steps.clickOnOkButton();
+            feedbackScalePage.steps.verifyColorPickerBlockColor(0, modifiedColor);
+        })
+    });
+
+    describe('Numbers feedback scale style - Colors : Preview tab functionality', () => {
+        const modifiedColor = 'rgba(255, 0, 0, 0.1)'
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+            feedbackScalePage.steps.expandFeedbackScaleStyleDropdown();
+            feedbackScalePage.steps.selectOptionFromFeedbackScaleStyleDropdown('Numbers');
+        });
+
+        it('When the user modifies the selected color for number buttons, then on marking the feedback in the preview tab, the feedback button should get highlighted with the modified color', () => {
+            feedbackScalePage.steps.editColor(0);
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.addInputToOpacityInputField('70');
+            colorPopupComponent.steps.clickOnOkButton();
+            feedbackScalePage.steps.switchToPreviewTab();
+            feedbackScalePage.steps.clickOnFeedbackButton(1);
+            feedbackScalePage.steps.verifyFeedbackButtonSelectedState(1);
+            feedbackScalePage.steps.verifyFeedbackButtonSelectedStateColor(1, modifiedColor);
+        });
+    });
+});