itemengine-cypress-automation 1.0.166-migrationScripts-b8c79a0.0 → 1.0.167-repoUpdate10April-1465c8c.0

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

@@ -0,0 +1,570 @@
+import { feedbackScalePage } from "../../../pages";
+import { colorPopupComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const optionsTextArray = ['Uncomfortable', 'Need some support', 'Comfortable'];
+const optionsTextArray2 = ['Uncomfortable', 'Somewhat comfortable', 'Comfortable'];
+const optionsTextArray3 = ['Below expectations', 'Meets expectations', 'Exceeds expectations'];
+const optionsTextArray4 = ['Low', 'Medium', 'High', 'Very high'];
+const optionsTextArray5 = ['Strongly disagree', 'Disagree', 'Neither agree nor disagree', 'Agree', 'Strongly agree'];
+const defaultTextDropdownArray = [['Uncomfortable / Need some support / Comfortable', 'Uncomfortable / Somewhat comfortable / Comfortable', 'Below expectations / Meets expectations / Exceeds expectations', 'Custom'], ['Low / Medium / High / Very high', 'Custom'], ['Strongly disagree / Disagree / Neither agree nor disagree / Agree / Strongly agree', 'Custom']];
+const defaultColorBlocks = ['rgb(255, 133, 165)', 'rgb(236, 216, 19)', 'rgb(77, 188, 147)'];
+const defaultColorBlocks2 = ['rgb(255, 133, 165)', 'rgb(236, 216, 19)', 'rgb(77, 188, 147)', 'rgb(0, 111, 111)'];
+const defaultColorBlocks3 = ['rgb(196, 56, 56)', 'rgb(255, 133, 165)', 'rgb(236, 216, 19)', 'rgb(77, 188, 147)', 'rgb(0, 111, 111)'];
+describe('Create item page: Feedback scale - Text feedback scale style - Edit and preview tab contents and functionality ', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Specify feedback scale options section - Text feedback scale style : Edit tab contents', () => {
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+        });
+
+        it('Specify feedback scale options label should be displayed', () => {
+            utilities.verifyInnerText(feedbackScalePage.specifyFeedbackScaleOptionsLabel(), 'Specify feedback scale options');
+        });
+
+        it('Feedback scale style label and dropdown should be displayed. By default "Text" option should be selected in the dropdown', () => {
+            utilities.verifyInnerText(feedbackScalePage.feedbackScaleStyleDropdownLabel(), 'Feedback scale style');
+            utilities.verifyInnerText(feedbackScalePage.feedbackScaleStyleDropdown(), 'Text');
+        });
+
+        it('Options label and stepper input field should be displayed. By default "3" should be the set value in the stepper input field', () => {
+            feedbackScalePage.steps.verifyCountInOptionsStepperInputField(3);
+        });
+
+        it('Default text label and and dropdown should be displayed. By default "Uncomfortable / Need some support / Comfortable" option should be selected in the dropdown', () => {
+            utilities.verifyInnerText(feedbackScalePage.defaultTextDropdownLabel(), 'Default text');
+            utilities.verifyInnerText(feedbackScalePage.defaultTextDropdown(), 'Uncomfortable / Need some support / Comfortable');
+        });
+
+        it(`When 3 options are present, then on expanding the default text dropdown, ${defaultTextDropdownArray[0].length} options - ${defaultTextDropdownArray[0].join(' , ')} should be displayed`, () => {
+            feedbackScalePage.steps.expandDefaultTextDropdown();
+            defaultTextDropdownArray[0].forEach((option, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(feedbackScalePage.defaultTextDropdownListOptions(), index), option)
+            });
+            feedbackScalePage.steps.selectOptionFromDefaultTextDropdown('Uncomfortable / Need some support / Comfortable');
+        });
+
+        it(`3 option accordions should be displayed with label "Option #" (# being a number from 1 to 3), Options text, Points and "Delete option" icon button, by default all option accordions should be in collapsed state`, () => {
+            for (let index = 0; index < optionsTextArray.length; index++) {
+                feedbackScalePage.steps.verifyOptionsAccordionProperties(index, { optionLabel: `Option ${index + 1}\n:\n${optionsTextArray[index]}`, Points: `${index + 1}` });
+                feedbackScalePage.steps.verifyOptionAccordionCollapsedState(index);
+            }
+        });
+
+        it(`The user should be able to expand option accordions, an "Options text" label and input field and "Legend text" label and empty input field with placeholder text, "Enter legend text" should be displayed. For the Option 1 accordion, the options text input field should be pre-populated with ${optionsTextArray[0]}`, () => {
+            feedbackScalePage.steps.expandOptionAccordion(0);
+            feedbackScalePage.steps.verifyOptionTextLabel(0);
+            feedbackScalePage.steps.verifyOptionInputFieldText(0, `${optionsTextArray[0]}`);
+            utilities.verifyInnerText(utilities.getNthElement(feedbackScalePage.legendTextLabel(), 0), 'Legend text');
+            feedbackScalePage.steps.verifyLegendTextInputFieldPlaceholder(0);
+        });
+
+        it(`On expanding the "Option 2" accordion, the previously expanded accordion should continue to stay in expanded state. For Option 2 accordion, the options text input field should be pre-populated with ${optionsTextArray[1]}`, () => {
+            feedbackScalePage.steps.expandOptionAccordion(1);
+            feedbackScalePage.steps.verifyOptionAccordionExpandedState(0);
+            feedbackScalePage.steps.verifyOptionAccordionExpandedState(1);
+            feedbackScalePage.steps.verifyOptionTextLabel(1);
+            feedbackScalePage.steps.verifyOptionInputFieldText(1, `${optionsTextArray[1]}`);
+            utilities.verifyInnerText(utilities.getNthElement(feedbackScalePage.legendTextLabel(), 1), 'Legend text');
+            feedbackScalePage.steps.verifyLegendTextInputFieldPlaceholder(1);
+        });
+
+        it(`For Option 3 accordion, the options text input field should be pre-populated with ${optionsTextArray[2]}`, () => {
+            feedbackScalePage.steps.expandOptionAccordion(2);
+            feedbackScalePage.steps.verifyOptionInputFieldText(2, `${optionsTextArray[2]}`);
+        });
+
+        it('CSS of Specify feedback scale options section', { tags: 'css' }, () => {
+            utilities.verifyCSS(feedbackScalePage.specifyFeedbackScaleOptionsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(feedbackScalePage.feedbackScaleStyleDropdownLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(feedbackScalePage.feedbackScaleStyleDropdown().find('.dropdown-label-text'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(feedbackScalePage.optionsStepperInputFieldLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(feedbackScalePage.optionsStepperInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(feedbackScalePage.defaultTextDropdownLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(feedbackScalePage.defaultTextDropdown().find('.dropdown-label-text'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(feedbackScalePage.optionAccordionLabel().find('[class*="OptionWrapper"]'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+    });
+
+    describe('Text feedback scale style - Default text dropdown : Impact on option accordions', () => {
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+        });
+
+        it(`When the user selects ${defaultTextDropdownArray[0][1]} option from the default text dropdown, then the option accordion labels and the pre-populated texts of the options text input fields should update accordingly`, () => {
+            feedbackScalePage.steps.expandDefaultTextDropdown();
+            feedbackScalePage.steps.selectOptionFromDefaultTextDropdown(defaultTextDropdownArray[0][1]);
+            for (let index = 0; index < optionsTextArray2.length; index++) {
+                feedbackScalePage.steps.verifyOptionsAccordionProperties(index, { optionLabel: `Option ${index + 1}\n:\n${optionsTextArray2[index]}`, Points: `${index + 1}` });
+                feedbackScalePage.steps.verifyOptionInputFieldText(index, `${optionsTextArray2[index]}`);
+            };
+        });
+
+        it('When the user modifies any of the options text input field, then the default text dropdown should set to "Custom"', () => {
+            feedbackScalePage.steps.expandOptionAccordion(0);
+            feedbackScalePage.steps.enterTextInOptionTextInputField(0, ' to the user');
+            feedbackScalePage.steps.verifyTextInOptionTextInputField(0, 'Uncomfortable to the user');
+            utilities.verifyInnerText(feedbackScalePage.defaultTextDropdown(), 'Custom');
+        });
+
+        it(`On selecting ${defaultTextDropdownArray[0][2]} option from the default text dropdown, then the option accordion labels and the pre-populated texts of the options text input fields should update accordingly`, () => {
+            feedbackScalePage.steps.expandDefaultTextDropdown();
+            feedbackScalePage.steps.selectOptionFromDefaultTextDropdown(defaultTextDropdownArray[0][2]);
+            for (let index = 0; index < optionsTextArray.length; index++) {
+                feedbackScalePage.steps.verifyOptionsAccordionProperties(index, { optionLabel: `Option ${index + 1}\n:\n${optionsTextArray3[index]}`, Points: `${index + 1}` });
+                feedbackScalePage.steps.verifyOptionInputFieldText(index, `${optionsTextArray3[index]}`);
+            };
+        });
+
+        it(`When the user selects ${defaultTextDropdownArray[0][3]} option from the default text dropdown, then the option accordion labels and the pre-populated texts of the options text input fields should get removed`, () => {
+            feedbackScalePage.steps.expandDefaultTextDropdown();
+            feedbackScalePage.steps.selectOptionFromDefaultTextDropdown(defaultTextDropdownArray[0][3]);
+            for (let index = 0; index < optionsTextArray.length; index++) {
+                feedbackScalePage.steps.verifyOptionsAccordionProperties(index, { optionLabel: `Option ${index + 1}`, Points: `${index + 1}` });
+                feedbackScalePage.steps.verifyOptionInputFieldText(index, '');
+            };
+        });
+
+        it(`Pre-step: Resetting the default text dropdown to ${defaultTextDropdownArray[0][0]}`, () => {
+            feedbackScalePage.steps.expandDefaultTextDropdown();
+            feedbackScalePage.steps.selectOptionFromDefaultTextDropdown(defaultTextDropdownArray[0][0]);
+        });
+
+        it('When the user increases the stepper count of the options input field, the default text dropdown should set to "Custom". In this case, the option accordion labels and the pre-populated texts of the options text input fields should persist', () => {
+            feedbackScalePage.steps.increaseOptionsInputStepperCount(1);
+            feedbackScalePage.steps.verifyOptionsAccordionCount(4);
+            for (let index = 0; index < optionsTextArray.length; index++) {
+                feedbackScalePage.steps.verifyOptionsAccordionProperties(index, { optionLabel: `Option ${index + 1}\n:\n${optionsTextArray[index]}`, Points: `${index + 1}` });
+                feedbackScalePage.steps.verifyOptionInputFieldText(index, `${optionsTextArray[index]}`);
+            };
+            feedbackScalePage.steps.verifyOptionsAccordionProperties(3, { optionLabel: 'Option 4', Points: '4' });
+            feedbackScalePage.steps.verifyOptionInputFieldText(3, '');
+        });
+
+        it(`On expanding the default text dropdown, ${defaultTextDropdownArray[1].length} options - ${defaultTextDropdownArray[1].join(' , ')} should be displayed`, () => {
+            feedbackScalePage.steps.expandDefaultTextDropdown();
+            defaultTextDropdownArray[1].forEach((option, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(feedbackScalePage.defaultTextDropdownListOptions(), index), option)
+            });
+        });
+
+        it(`On selecting ${defaultTextDropdownArray[1][0]} option from the default text dropdown, then the option accordion labels and the pre-populated texts of the options text input fields should update accordingly`, () => {
+            feedbackScalePage.steps.selectOptionFromDefaultTextDropdown(defaultTextDropdownArray[1][0]);
+            for (let index = 0; index < optionsTextArray4.length; index++) {
+                feedbackScalePage.steps.verifyOptionsAccordionProperties(index, { optionLabel: `Option ${index + 1}\n:\n${optionsTextArray4[index]}`, Points: `${index + 1}` });
+                feedbackScalePage.steps.verifyOptionInputFieldText(index, `${optionsTextArray4[index]}`);
+            };
+        });
+
+        it(`When the user increases the stepper count of the options input field, then on expanding the default text dropdown, ${defaultTextDropdownArray[2].length} options - ${defaultTextDropdownArray[2].join(' , ')} should be displayed`, () => {
+            feedbackScalePage.steps.increaseOptionsInputStepperCount(1);
+            feedbackScalePage.steps.expandDefaultTextDropdown();
+            defaultTextDropdownArray[2].forEach((option, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(feedbackScalePage.defaultTextDropdownListOptions(), index), option)
+            });
+        });
+
+        it(`On selecting ${defaultTextDropdownArray[2][0]} option from the default text dropdown, then the option accordion labels and the pre-populated texts of the options text input fields should update accordingly`, () => {
+            feedbackScalePage.steps.selectOptionFromDefaultTextDropdown(defaultTextDropdownArray[2][0]);
+            for (let index = 0; index < optionsTextArray5.length; index++) {
+                feedbackScalePage.steps.verifyOptionsAccordionProperties(index, { optionLabel: `Option ${index + 1}\n:\n${optionsTextArray5[index]}`, Points: `${index + 1}` });
+                feedbackScalePage.steps.verifyOptionInputFieldText(index, `${optionsTextArray5[index]}`);
+            };
+        });
+
+        it('On increasing the stepper count further (option count = 6), the default text dropdown should get removed', () => {
+            feedbackScalePage.steps.increaseOptionsInputStepperCount(1);
+            utilities.verifyElementVisibilityState(feedbackScalePage.defaultTextDropdown(), 'notExist');
+        });
+
+        it('When the user decreases the option stepper count, then the default text dropdown should appear again', () => {
+            feedbackScalePage.steps.decreaseOptionsInputStepperCount(1);
+            utilities.verifyElementVisibilityState(feedbackScalePage.defaultTextDropdown(), 'visible');
+        });
+
+        it('When the user reduces the option count to 2, then the default text dropdown should get removed', () => {
+            feedbackScalePage.steps.addInputToOptionStepperInputField(2);
+            utilities.verifyElementVisibilityState(feedbackScalePage.defaultTextDropdown(), 'notExist');
+        });
+    });
+
+    describe('Text feedback scale style - Default text dropdown : Impact in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+        });
+
+        it(`When the user selects ${defaultTextDropdownArray[0][1]} option from the default text dropdown, then the feedback buttons should update accordingly in the preview tab`, () => {
+            feedbackScalePage.steps.expandDefaultTextDropdown();
+            feedbackScalePage.steps.selectOptionFromDefaultTextDropdown(defaultTextDropdownArray[0][1]);
+            feedbackScalePage.steps.switchToPreviewTab();
+            optionsTextArray2.forEach((buttonContent, buttonIndex) => {
+                feedbackScalePage.steps.verifyFeedbackButtonInPreviewTab(buttonIndex, buttonContent);
+                feedbackScalePage.steps.verifyFeedbackButtonColorBlockPreviewTab(buttonIndex, defaultColorBlocks[buttonIndex]);
+            });
+        });
+
+        it(`When the user selects ${defaultTextDropdownArray[0][3]} option from the default text dropdown, then the feedback buttons should update accordingly in the preview tab`, () => {
+            cy.log('Switching to edit tab and setting default text dropdown to "Custom"')
+            feedbackScalePage.steps.switchToEditTab();
+            feedbackScalePage.steps.expandDefaultTextDropdown();
+            feedbackScalePage.steps.selectOptionFromDefaultTextDropdown(defaultTextDropdownArray[0][3]);
+            feedbackScalePage.steps.switchToPreviewTab();
+            for (let buttonIndex = 0; buttonIndex < 3; buttonIndex++) {
+                feedbackScalePage.steps.verifyFeedbackButtonInPreviewTab(buttonIndex, '');
+                feedbackScalePage.steps.verifyFeedbackButtonColorBlockPreviewTab(buttonIndex, defaultColorBlocks[buttonIndex]);
+            };
+        });
+
+        it(`When the user increases the stepper count of the options input field, selects ${defaultTextDropdownArray[1][0]} option from the default text dropdown, then the feedback buttons should update accordingly in the preview tab`, () => {
+            cy.log(`Switching to edit tab increasing stepper count to 4 and setting default text dropdown to ${defaultTextDropdownArray[1][0]}`)
+            feedbackScalePage.steps.switchToEditTab();
+            feedbackScalePage.steps.increaseOptionsInputStepperCount(1);
+            feedbackScalePage.steps.expandDefaultTextDropdown();
+            feedbackScalePage.steps.selectOptionFromDefaultTextDropdown(defaultTextDropdownArray[1][0]);
+            feedbackScalePage.steps.switchToPreviewTab();
+            optionsTextArray4.forEach((buttonContent, buttonIndex) => {
+                feedbackScalePage.steps.verifyFeedbackButtonInPreviewTab(buttonIndex, buttonContent);
+                feedbackScalePage.steps.verifyFeedbackButtonColorBlockPreviewTab(buttonIndex, defaultColorBlocks2[buttonIndex]);
+            });
+        });
+
+        it(`When the user increases the stepper count of the options input field, selects ${defaultTextDropdownArray[2][0]} option from the default text dropdown, then the feedback buttons should update accordingly in the preview tab`, () => {
+            cy.log(`Switching to edit tab increasing stepper count to 5 and setting default text dropdown to ${defaultTextDropdownArray[2][0]}`)
+            feedbackScalePage.steps.switchToEditTab();
+            feedbackScalePage.steps.increaseOptionsInputStepperCount(1);
+            feedbackScalePage.steps.expandDefaultTextDropdown();
+            feedbackScalePage.steps.selectOptionFromDefaultTextDropdown(defaultTextDropdownArray[2][0]);
+            feedbackScalePage.steps.switchToPreviewTab();
+            optionsTextArray5.forEach((buttonContent, buttonIndex) => {
+                feedbackScalePage.steps.verifyFeedbackButtonInPreviewTab(buttonIndex, buttonContent);
+                feedbackScalePage.steps.verifyFeedbackButtonColorBlockPreviewTab(buttonIndex, defaultColorBlocks3[buttonIndex]);
+            });
+        });
+    });
+
+    describe('Text feedback scale style - Add and delete options : Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+        });
+
+        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(4);
+        });
+
+        it('The newly added option should be displayed with label "Option 4", Points and "Delete option" icon button, by default the accordion should be in collapsed state', () => {
+            feedbackScalePage.steps.verifyOptionsAccordionProperties(3, { optionLabel: 'Option 4', Points: '4' });
+            feedbackScalePage.steps.verifyOptionAccordionCollapsedState(3);
+        });
+
+        it('The newly added option should be displayed with label "Option 4", Points and "Delete option" icon button, by default the accordion should be in collapsed state', () => {
+            feedbackScalePage.steps.verifyOptionsAccordionProperties(3, { optionLabel: 'Option 4', Points: '4' });
+            feedbackScalePage.steps.verifyOptionAccordionCollapsedState(3);
+        });
+
+        it('On expanding the newly added option accordion, "Option text" empty input field with placeholder text, "Enter option text" should be displayed', () => {
+            feedbackScalePage.steps.expandOptionAccordion(3);
+            feedbackScalePage.steps.verifyOptionTextInputFieldPlaceholder(3);
+        });
+
+        it('The user should be able to enter text in the option text input field, the placeholder text should disappear on entering the text', () => {
+            feedbackScalePage.steps.enterTextInOptionTextInputField(3, 'Super comfortable');
+            feedbackScalePage.steps.verifyOptionTextInputFieldPlaceholderNotExists(3);
+        });
+
+        it('When the user removes the added text from the option input field, the placeholder text should appear again', () => {
+            feedbackScalePage.steps.clearOptionTextInputField(3);
+            feedbackScalePage.steps.verifyOptionTextInputFieldPlaceholder(3);
+        });
+
+        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(5);
+            feedbackScalePage.steps.verifyOptionsAccordionCount(5);
+            feedbackScalePage.steps.verifyOptionsAccordionProperties(4, { optionLabel: 'Option 5', Points: '5' });
+        });
+
+        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(4);
+            for (let index = 0; index < optionsTextArray.length; index++) {
+                feedbackScalePage.steps.verifyOptionsAccordionProperties(index, { optionLabel: `Option ${index + 1}\n:\n${optionsTextArray[index]}`, Points: `${index + 1}` });
+            };
+            feedbackScalePage.steps.verifyOptionsAccordionProperties(3, { optionLabel: 'Option 4', Points: '4' });
+            feedbackScalePage.steps.verifyCountInOptionsStepperInputField(4);
+        });
+
+        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(3);
+            utilities.verifyElementCount(feedbackScalePage.optionAccordion(), 3);
+            for (let index = 0; index < optionsTextArray.length; index++) {
+                feedbackScalePage.steps.verifyOptionsAccordionProperties(index, { optionLabel: `Option ${index + 1}\n:\n${optionsTextArray[index]}`, Points: `${index + 1}` });
+            };
+        });
+
+        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(4);
+            for (let index = 0; index < optionsTextArray.length; index++) {
+                feedbackScalePage.steps.verifyOptionsAccordionProperties(index, { optionLabel: `Option ${index + 1}\n:\n${optionsTextArray[index]}`, Points: `${index + 1}` });
+            };
+            feedbackScalePage.steps.verifyCountInOptionsStepperInputField(4);
+        });
+
+        it('When the user only keeps two option accordions and deletes all the other options, the decrease stepper count button in the option stepper input field should get disabled and the delete icon buttons on the two option accordions should also get disabled', () => {
+            feedbackScalePage.steps.deleteOptionAccordion(3);
+            feedbackScalePage.steps.deleteOptionAccordion(2);
+            utilities.verifyElementDisabled(feedbackScalePage.optionsStepperDecreaseButton());
+            utilities.verifyElementDisabled(feedbackScalePage.deleteOptionAccordionButton());
+        });
+
+        it('When the user adds upto 12 options, the increase stepper count button in the option stepper input field should get disabled', () => {
+            feedbackScalePage.steps.addInputToOptionStepperInputField(12);
+            utilities.verifyElementDisabled(feedbackScalePage.optionsStepperIncreaseButton());
+        });
+    });
+
+    describe('Text feedback scale style - Add and delete options : Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+        });
+
+        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.verifyFeedbackButtonCountPreviewTab(4);
+            feedbackScalePage.steps.verifyLegendItemCountPreviewTab(4);
+            feedbackScalePage.steps.verifyFeedbackButtonInPreviewTab(3, '');
+        });
+
+        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.verifyFeedbackButtonCountPreviewTab(5);
+            feedbackScalePage.steps.verifyLegendItemCountPreviewTab(5);
+            feedbackScalePage.steps.verifyFeedbackButtonInPreviewTab(4, '');
+        });
+
+        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(4);
+            feedbackScalePage.steps.switchToPreviewTab();
+            feedbackScalePage.steps.verifyFeedbackButtonCountPreviewTab(4);
+            feedbackScalePage.steps.verifyLegendItemCountPreviewTab(4);
+            optionsTextArray.forEach((buttonContent, buttonIndex) => {
+                feedbackScalePage.steps.verifyFeedbackButtonInPreviewTab(buttonIndex, buttonContent);
+            });
+            feedbackScalePage.steps.verifyFeedbackButtonInPreviewTab(3, '');
+        });
+
+        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();
+            feedbackScalePage.steps.verifyFeedbackButtonCountPreviewTab(3);
+            feedbackScalePage.steps.verifyLegendItemCountPreviewTab(3);
+            optionsTextArray.forEach((buttonContent, buttonIndex) => {
+                feedbackScalePage.steps.verifyFeedbackButtonInPreviewTab(buttonIndex, buttonContent);
+            });
+        });
+    });
+
+    describe('Text feedback scale style - Color section - Edit tab contents and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+        });
+
+        it('Color label and two radio buttons, "Default color scheme" and "Custom colors" should be displayed. By default, "Default color scheme" radio button should be checked', () => {
+            utilities.verifyInnerText(feedbackScalePage.colorSectionLabel(), 'Color');
+            feedbackScalePage.steps.verifyDefaultColorSchemeRadioButtonCheckedState();
+        });
+
+        it('The user should be able to switch to "Custom colors" option', () => {
+            feedbackScalePage.steps.selectColorSectionRadioButton('Custom colors');
+        });
+
+        it('On switching to "Custom colors", Option label and Color label along with a list of feedback buttons and their respective color blocks should be displayed. Edit color icon should be displayed next to each color block', () => {
+            utilities.verifyInnerText(feedbackScalePage.colorLabel(), 'Color');
+            utilities.verifyInnerText(feedbackScalePage.optionLabel(), 'Option');
+            for (let index = 0; index < optionsTextArray.length; index++) {
+                feedbackScalePage.steps.verifyColorSectionListItemContents(index, { label: `${index + 1}. ${optionsTextArray[index]}`, colorBlock: defaultColorBlocks[index] });
+            }
+        });
+
+        it('CSS of "Color section"', { tags: 'css' }, () => {
+            utilities.verifyCSS(feedbackScalePage.colorSectionLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(feedbackScalePage.defaultColorSchemeRadioButtonLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(feedbackScalePage.customColorsRadioButtonLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(feedbackScalePage.optionLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(feedbackScalePage.colorLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(feedbackScalePage.colorItemLabel(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            feedbackScalePage.editColorButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.activeButtons);
+        });
+
+        it('Accessibility of Colors section', {tags: 'a11y'}, () => {
+            cy.checkAccessibility(feedbackScalePage.colorSectionLabel().parents('.feedback-color-wrapper'));
+        });
+    });
+
+    describe('Text feedback scale style - Custom colors - Effect of adding/deleting options, default text dropdown', () => {
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+            feedbackScalePage.steps.selectColorSectionRadioButton('Custom colors');
+        });
+
+        it('When the user adds a new option, a new list item should get added with a color block of color - "rgb(0, 111, 111)"', () => {
+            feedbackScalePage.steps.addOption();
+            feedbackScalePage.steps.verifyColorSectionListItemContents(3, { label: '4.', colorBlock: 'rgb(0, 111, 111)' });
+        });
+
+        it(`When the user selects ${defaultTextDropdownArray[1][0]} option from the default text dropdown, then the option labels in the colors list should update accordingly`, () => {
+            feedbackScalePage.steps.expandDefaultTextDropdown();
+            feedbackScalePage.steps.selectOptionFromDefaultTextDropdown(defaultTextDropdownArray[1][0]);
+            optionsTextArray4.forEach((optionLabel, index) => {
+                feedbackScalePage.steps.verifyColorSectionListItemContents(index, { label: `${index + 1}. ${optionLabel}`, colorBlock: defaultColorBlocks2[index] });
+            });
+        });
+
+        it(`When the user selects ${defaultTextDropdownArray[1][1]} option from the default text dropdown, then the option labels in the colors list should get removed`, () => {
+            feedbackScalePage.steps.expandDefaultTextDropdown();
+            feedbackScalePage.steps.selectOptionFromDefaultTextDropdown(defaultTextDropdownArray[1][1]);
+            for (let index = 0; index < 4; index++) {
+                feedbackScalePage.steps.verifyColorSectionListItemContents(index, { label: `${index + 1}.`, colorBlock: defaultColorBlocks[index] });
+            };
+        });
+
+        it(`When the user increments the option count, selects ${defaultTextDropdownArray[2][0]} option from the default text dropdown, then the option labels in the colors list should update accordingly`, () => {
+            feedbackScalePage.steps.increaseOptionsInputStepperCount(1);
+            feedbackScalePage.steps.expandDefaultTextDropdown();
+            feedbackScalePage.steps.selectOptionFromDefaultTextDropdown(defaultTextDropdownArray[2][0]);
+            optionsTextArray5.forEach((optionLabel, index) => {
+                feedbackScalePage.steps.verifyColorSectionListItemContents(index, { label: `${index + 1}. ${optionLabel}`, colorBlock: defaultColorBlocks3[index] });
+            });
+        });
+
+        it('When the user deletes an option, the deleted item should get removed from the Colors list. The color scheme for 4 options should get applied to the available options', () => {
+            feedbackScalePage.steps.deleteOptionAccordion(4);
+            utilities.verifyElementCount(feedbackScalePage.colorSectionListItem(), 4);
+            for (let index = 0; index < 4; index++) {
+                feedbackScalePage.steps.verifyColorSectionListItemContents(index, { label: `${index + 1}. ${optionsTextArray5[index]}`, colorBlock: defaultColorBlocks2[index] });
+            }
+        });
+    });
+
+    describe('Text feedback scale style - Custom colors - Preview tab functionality', () => {
+        const modifiedColor = 'rgba(255, 0, 0, 0.7)'
+        abortEarlySetup();
+        before(() => {
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+            feedbackScalePage.steps.selectColorSectionRadioButton('Custom colors');
+        });
+
+        it(`When the user increments the option count, then the color blocks of the feedback button in the preview tab should update accordingly for 4 options`, () => {
+            feedbackScalePage.steps.increaseOptionsInputStepperCount(1);
+            feedbackScalePage.steps.switchToPreviewTab();
+            defaultColorBlocks2.forEach((colorBlock, index) => {
+                feedbackScalePage.steps.verifyFeedbackButtonColorBlockPreviewTab(index, colorBlock);
+                feedbackScalePage.steps.verifyColorBlockLegendAccordion(index, colorBlock);
+            });
+        });
+
+        it(`When the user increments the option count, then the color blocks of the feedback button in the preview tab should update accordingly for 5 options`, () => {
+            feedbackScalePage.steps.switchToEditTab();
+            feedbackScalePage.steps.increaseOptionsInputStepperCount(1);
+            feedbackScalePage.steps.switchToPreviewTab();
+            defaultColorBlocks3.forEach((colorBlock, index) => {
+                feedbackScalePage.steps.verifyFeedbackButtonColorBlockPreviewTab(index, colorBlock);
+                feedbackScalePage.steps.verifyColorBlockLegendAccordion(index, colorBlock);
+            });
+        });
+
+        it('When the user modifies the selected color for a feedback button, then the color blocks of the feedback button in the preview tab should update accordingly in the preview tab and on marking the feedback, the feedback button should get highlighted with the modified color', () => {
+            feedbackScalePage.steps.switchToEditTab();
+            feedbackScalePage.steps.editColor(0);
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.addInputToOpacityInputField('70');
+            colorPopupComponent.steps.clickOnOkButton();
+            feedbackScalePage.steps.switchToPreviewTab();
+            feedbackScalePage.steps.verifyFeedbackButtonColorBlockPreviewTab(0, modifiedColor);
+            feedbackScalePage.steps.verifyColorBlockLegendAccordion(0, modifiedColor);
+            feedbackScalePage.steps.clickOnFeedbackButton(0);
+            feedbackScalePage.steps.verifyFeedbackButtonSelectedStateColor(0, 'rgba(255, 0, 0, 0.1)');
+        });
+    });
+});