itemengine-cypress-automation 1.0.36 → 1.0.38

package/cypress/e2e/ILC/FeedbackScale/feedbackScaleAdditionalSettings.js

@@ -0,0 +1,272 @@
+import { feedbackScalePage } from "../../../pages/feedbackScalePage";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+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.verifyAdditonalSettingsAccordionProperties();
+    });
+
+    describe('Additional settings: Student response area and layout', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            feedbackScalePage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Student response area and layout\' label should be displayed', () => {
+            utilities.verifyInnerText(feedbackScalePage.studentResponseAreaAndLayoutLabel(), 'Student response area and layout');
+            utilities.verifyElementVisibilityState(feedbackScalePage.studentResponseAreaAndLayoutLabel(), 'visible');
+        });
+
+        it('CSS of \'Student response area and layout\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(feedbackScalePage.studentResponseAreaAndLayoutLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+    });
+
+    describe('Additional settings: \'Display additional information\' - edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            feedbackScalePage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Display additional information\' label and checkbox should be displayed and by default it should be checked', () => {
+            utilities.verifyInnerText(feedbackScalePage.displayAdditionalInformationCheckboxLabel(), 'Display additional information');
+            utilities.verifyElementVisibilityState(feedbackScalePage.displayAdditionalInformationCheckboxLabel(), 'visible');
+            feedbackScalePage.steps.verifyDisplayAdditionalInformationCheckboxCheckedState();
+        });
+
+        it('CSS of \'Display additional information\' label and checkbox - checked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(feedbackScalePage.displayAdditionalInformationCheckboxLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(feedbackScalePage.displayAdditionalInformationCheckbox().parent('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('The user should be able to uncheck \'Display additional information\' checkbox', () => {
+            feedbackScalePage.steps.uncheckDisplayAdditionalInformationCheckbox();
+        });
+
+        it('CSS of \'Display additional information\' checkbox - unchecked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(feedbackScalePage.displayAdditionalInformationCheckboxLabel().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        it('Accessibility of \'Display additional information\' checkbox - unchecked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(feedbackScalePage.displayAdditionalInformationCheckbox().parents('[data-ngie-testid="display-additional-information-checkbox"]'));
+        });
+    });
+
+    describe('Additional settings: \'Display additional information\' - preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            feedbackScalePage.steps.expandAdditonalSettings();
+        });
+
+        it('When the \'Display additional information\' checkbox is in checked state, the more info accordion should be displayed in the preview tab ', () => {
+            feedbackScalePage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(feedbackScalePage.moreInfoButton(), 'visible');
+        });
+
+        it('When the user unchecks the \'Display additional information\' checkbox, the more info accordion should not be displayed in the preview tab ', () => {
+            cy.log('Pre-step: Switching to edit tab')
+            feedbackScalePage.steps.switchToEditTab();
+            feedbackScalePage.steps.uncheckDisplayAdditionalInformationCheckbox();
+            feedbackScalePage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(feedbackScalePage.moreInfoButton(), 'notExist');
+        });
+    });
+
+    describe('Additional settings: \'Allow students to add comment\' - edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            feedbackScalePage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Allow students to add comment\' label and checkbox should be displayed and by default it should be unchecked', () => {
+            utilities.verifyInnerText(feedbackScalePage.allowStudentsToAddCommentCheckboxLabel(), 'Allow students to add comment');
+            utilities.verifyElementVisibilityState(feedbackScalePage.allowStudentsToAddCommentCheckboxLabel(), 'visible');
+            feedbackScalePage.steps.verifyAllowStudentsToAddCommentCheckboxUncheckedState();
+        });
+
+        it('CSS of \'Allow students to add comment\' - unchecked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(feedbackScalePage.studentResponseAreaAndLayoutLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(feedbackScalePage.allowStudentsToAddCommentCheckboxLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(feedbackScalePage.allowStudentsToAddCommentCheckboxLabel().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        it('The user should be able to check \'Allow students to add comment\'checkbox', () => {
+            feedbackScalePage.steps.checkAllowStudentsToAddCommentCheckbox();
+        });
+
+        it('CSS of \'Allow students to add comment\'checkbox - checked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(feedbackScalePage.allowStudentsToAddCommentCheckbox().parent('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Allow students to add comment\' checkbox - checked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(feedbackScalePage.allowStudentsToAddCommentCheckbox().parents('[data-ngie-testid="allow-students-to-add-comment-checkbox"]'));
+        });
+    });
+
+    describe('Additional settings: \'Allow students to add comment\' - preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            feedbackScalePage.steps.expandAdditonalSettings();
+        });
+
+        it('When the \'Allow students to add comment\' checkbox is in unchecked state, the \'Describe your experience\' label and input field should not be displayed in the preview tab', () => {
+            feedbackScalePage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(feedbackScalePage.describeYourExperienceLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(feedbackScalePage.describeYourExperienceInputField(), 'notExist');
+        });
+
+        it('When the user checks the \'Allow students to add comment\' checkbox, the \'Describe your experience\' label and input field should be displayed in the preview tab', () => {
+            feedbackScalePage.steps.switchToEditTab();
+            feedbackScalePage.steps.checkAllowStudentsToAddCommentCheckbox();
+            feedbackScalePage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(feedbackScalePage.describeYourExperienceLabel(), 'Describe your experience');
+            utilities.verifyElementVisibilityState(feedbackScalePage.describeYourExperienceLabel(), 'visible');
+            utilities.verifyElementVisibilityState(feedbackScalePage.describeYourExperienceInputField(), 'visible');
+        });
+
+        it('CSS of \'Describe your experience\' label and input field', { tags: 'css' }, () => {
+            utilities.verifyCSS(feedbackScalePage.describeYourExperienceLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(feedbackScalePage.describeYourExperienceInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'Describe your experience\' label and input field', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(feedbackScalePage.describeYourExperienceLabel().parents('.describe-your-experience'));
+        });
+
+        it('The user should be able to enter text in the \'Describe your experience\' input field', () => {
+            feedbackScalePage.steps.addInputToDescribeYourExperienceInputField('It was a challenging questionnaire')
+        });
+    });
+
+    describe('Additional settings: Font size contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            feedbackScalePage.steps.expandAdditonalSettings();
+        });
+
+        feedbackScalePage.tests.verifyFontSizeSectionContents();
+    });
+
+    describe('Additional settings: Font size contents preview tab section', () => {
+        const fontSizeDropdownOptions = ['Default', 'Small', 'Normal', 'Large', 'Extra large', 'Huge'];
+        const fontSizes = ['16px', '12px', '14px', '17px', '20px', '24px'];
+        const moreInfoFontSizes = { 'Default': '14px', 'Small': '12px', 'Normal': '14px', 'Large': '17px', 'Extra large': '20px', 'Huge': '24px' };
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            feedbackScalePage.steps.addQuestionInstructions();
+            feedbackScalePage.steps.expandAdditonalSettings();
+            feedbackScalePage.steps.checkAllowStudentsToAddCommentCheckbox();
+        });
+
+        fontSizeDropdownOptions.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 ${option} in the preview tab`, () => {
+                feedbackScalePage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex)
+                utilities.verifyInnerText(feedbackScalePage.fontSizeDropdown(), `${option}`);
+                feedbackScalePage.steps.switchToPreviewTab();
+                utilities.verifyCSS(feedbackScalePage.questionInstructionsText(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(feedbackScalePage.feedbackButton(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                feedbackScalePage.steps.hoverOnFeedBackButton();
+                utilities.verifyCSS(feedbackScalePage.tooltipText(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                feedbackScalePage.steps.hoverAwayFromFeedbackButton();
+                utilities.verifyCSS(feedbackScalePage.moreInfoButton().find('.customize_info_label'), {
+                    'font-size': moreInfoFontSizes[option]
+                });
+                feedbackScalePage.steps.expandMoreInfoAccordion();
+                utilities.verifyCSS(feedbackScalePage.moreInfoFeedbackLabel(), {
+                    'font-size': moreInfoFontSizes[option]
+                });
+                utilities.verifyCSS(feedbackScalePage.moreInfoTooltipText(), {
+                    'font-size': moreInfoFontSizes[option]
+                });
+                utilities.verifyCSS(feedbackScalePage.moreInfoDescriptionText(), {
+                    'font-size': moreInfoFontSizes[option]
+                });
+                //TODO: will need to update below assertions after https://redmine.zeuslearning.com/issues/539201 gets resolved
+                utilities.verifyCSS(feedbackScalePage.describeYourExperienceLabel(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                utilities.verifyCSS(feedbackScalePage.describeYourExperienceInputField(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                feedbackScalePage.steps.switchToEditTab();
+            });
+        });
+    });
+
+    describe('Additional Settings: Details section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            feedbackScalePage.steps.expandAdditonalSettings();
+        });
+
+        feedbackScalePage.tests.verifyDetailsSection();
+    });
+});

package/cypress/e2e/ILC/FeedbackScale/feedbackScaleEditTab.js

@@ -0,0 +1,346 @@
+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');
+
+describe('Create item page: Feedback scale: Edit tab - Question instructions, Feedback layout style dropdown, Default state of option accordions, Option accordion contents for \'Button\' and \'Star\' layout styles, Add, delete option accordion', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question instructions input field - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+        });
+
+        feedbackScalePage.tests.verifyQuestionInstructionsInputFieldEditTab();
+    });
+
+    describe('Question instructions input field - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+        });
+
+        feedbackScalePage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
+    });
+
+    describe('Feedback layout style dropdown', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Feedback layout style\' label and dropdown should be displayed and in the \'Feedback layout style\' dropdown, \'Button\' option should be selected by default', () => {
+            utilities.verifyInnerText(feedbackScalePage.feedbackLayoutStyleLabel(), 'Feedback layout style');
+            utilities.verifyElementVisibilityState(feedbackScalePage.feedbackLayoutStyleLabel(), 'visible');
+            utilities.verifyInnerText(feedbackScalePage.feedbackLayoutStyleDropdown(), 'Button');
+            utilities.verifyElementVisibilityState(feedbackScalePage.feedbackLayoutStyleDropdown(), 'visible');
+        });
+
+        it('CSS of \'Feedback layout style\' label and \'Feedback layout style\' dropdown in default state', { tags: 'css' }, () => {
+            utilities.verifyCSS(feedbackScalePage.feedbackLayoutStyleLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(feedbackScalePage.feedbackLayoutStyleDropdown(), {
+                'background-color': css.color.secondaryBtnBg,
+                'border': `1px solid ${css.color.defaultDropdownBorder}`
+            });
+            utilities.verifyCSS(feedbackScalePage.feedbackLayoutStyleDropdown().find('.dropdown-label-text'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'Feedback layout style\' label and \'Feedback layout style\' dropdown in default state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(feedbackScalePage.feedbackLayoutStyleLabel().parents('[arialabel="feedback layout style"]'));
+        });
+
+        it('When the user clicks on \'Feedback layout style\' dropdown, a list of 2 layout options should open - \'Button\', \'Star\'', () => {
+            let dropdownOptions = ['Button', 'Star'];
+            feedbackScalePage.steps.clickOnFeedbackStyleLayoutDropdown();
+            utilities.verifyElementVisibilityState(feedbackScalePage.feedbackLayoutStyleDropdownOptions(), 'visible');
+            feedbackScalePage.steps.verifyFeedbackStyleLayoutOptions(dropdownOptions);
+        });
+
+        it('CSS of \'Feedback layout style\' label and \'Feedback layout style\' dropdown in active state', { tags: 'css' }, () => {
+            utilities.verifyCSS(feedbackScalePage.feedbackLayoutStyleDropdown(), {
+                'background-color': css.color.secondaryBtnBg,
+                'border': `1px solid ${css.color.activeComponentBorder}`,
+            });
+            utilities.verifyCSS(feedbackScalePage.feedbackLayoutStyleDropdownOptions('Button'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg,
+            });
+            utilities.verifyCSS(feedbackScalePage.feedbackLayoutStyleDropdownOptions('Star'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.transparent,
+            });
+        });
+
+        it('Accessibility of \'Feedback layout style\' label and \'Feedback layout style\' dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(feedbackScalePage.feedbackLayoutStyleLabel().parents('[arialabel="feedback layout style"]'));
+            cy.checkAccessibility(feedbackScalePage.feedbackLayoutStyleDropdownOptions().parents('.dropdown-list-ul'));
+        });
+    });
+
+    describe('Feedback scale - Default state of option accordions, add image, bold text in tooltip and description input fields', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Feedback scale\' label should be displayed', () => {
+            utilities.verifyInnerText(feedbackScalePage.feedbackScaleLabel(), 'Feedback scale');
+            utilities.verifyElementVisibilityState(feedbackScalePage.feedbackScaleLabel(), 'visible');
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/531554
+        it('By default, 3 option accordions should be displayed for \'Button\' layout style and \'Option 1\' accordion should be in expanded state and all other accordions should be in collapsed state', () => {
+            utilities.verifyElementCount(feedbackScalePage.optionAccordion(), 3);
+            feedbackScalePage.steps.verifyOptionAccordionInExpandedState(0);
+            feedbackScalePage.steps.verifyOptionAccordionInCollapsedState(1);
+            feedbackScalePage.steps.verifyOptionAccordionInCollapsedState(2);
+        });
+
+        it('All accordions should have an \'Option #\' label, \'delete option\' button and a chevron icon', () => {
+            for (let index = 0; index < 3; index++) {
+                feedbackScalePage.steps.verifyOptionAccordionPanelContents(index, `Option ${index + 1}`);
+            }
+        });
+
+        it('\'Label\' label and input field should be displayed', () => {
+            utilities.verifyInnerText(feedbackScalePage.labelsLabel(), 'Label');
+            utilities.verifyElementVisibilityState(feedbackScalePage.labelsLabel(), 'visible');
+            utilities.verifyElementVisibilityState(feedbackScalePage.labelsInputField(), 'visible');
+        });
+
+        it('\'Color\' label and a color block with pre filled color should be displayed', () => {
+            utilities.verifyInnerText(feedbackScalePage.colorLabel(), 'Color');
+            utilities.verifyElementVisibilityState(feedbackScalePage.colorLabel(), 'visible');
+            utilities.verifyElementVisibilityState(colorPopupComponent.colorBlock(), 'visible');
+        });
+
+        it('\'Tooltip\' label and input field should be displayed', () => {
+            utilities.verifyInnerText(feedbackScalePage.tooltipLabel(), 'Tooltip');
+            utilities.verifyElementVisibilityState(feedbackScalePage.tooltipLabel(), 'visible');
+            utilities.verifyElementVisibilityState(feedbackScalePage.tooltipInputField(), 'visible');
+        });
+
+        it('\'Description\' label and input field should be displayed', () => {
+            utilities.verifyInnerText(feedbackScalePage.descriptionLabel(), 'Description');
+            utilities.verifyElementVisibilityState(feedbackScalePage.descriptionLabel(), 'visible');
+            utilities.verifyElementVisibilityState(feedbackScalePage.descriptionInputField(), 'visible');
+        });
+
+        it('CSS of option accordion contents', { tags: 'css' }, () => {
+            const labels = [feedbackScalePage.labelsLabel, feedbackScalePage.colorLabel, feedbackScalePage.tooltipLabel, feedbackScalePage.descriptionLabel];
+            const inputFields = [feedbackScalePage.labelsInputField, feedbackScalePage.tooltipInputField, feedbackScalePage.descriptionInputField];
+            utilities.verifyCSS(feedbackScalePage.feedbackScaleLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(feedbackScalePage.optionAccordionLabel(), {
+                'color': css.color.panelLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            feedbackScalePage.deleteOptionAccordionButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+            labels.forEach((label) => {
+                utilities.verifyCSS(label(), {
+                    'color': css.color.labels,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.semibold
+                });
+            });
+            inputFields.forEach((inputField) => {
+                utilities.verifyCSS(inputField(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.regular
+                });
+            });
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/541472
+        it('Accessibility of option accordion contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(feedbackScalePage.feedbackScaleLabel());
+            cy.checkAccessibility(feedbackScalePage.optionAccordion().parents('.feedback-scale-panel'));
+        });
+
+        it('When the user expands another option accordion, \'Option 1\' accordion should still be in expanded state', () => {
+            feedbackScalePage.steps.expandOptionAccordion(1);
+            feedbackScalePage.steps.verifyOptionAccordionInExpandedState(0);
+            feedbackScalePage.steps.verifyOptionAccordionInExpandedState(1);
+        });
+
+        it('The user should be able to collapse an option accordion and state of another accordions should not change', () => {
+            feedbackScalePage.steps.collapseOptionAccordion(0);
+            feedbackScalePage.steps.verifyOptionAccordionInCollapsedState(0);
+            feedbackScalePage.steps.verifyOptionAccordionInExpandedState(1);
+            feedbackScalePage.steps.verifyOptionAccordionInCollapsedState(2);
+        });
+
+        it('\'Add option\' button should be present', () => {
+            utilities.verifyInnerText(feedbackScalePage.addOptionButton(), 'Add option');
+            utilities.verifyElementVisibilityState(feedbackScalePage.addOptionButton(), 'visible');
+        });
+
+        it('When user adds an image to the tooltip input field then it should be displayed in the tooltip input field', () => {
+            feedbackScalePage.steps.focusInTooltipInputField(1);
+            feedbackScalePage.steps.selectImageOptionFromCKEditorToolbar();
+            feedbackScalePage.steps.addImageToInputField();
+            feedbackScalePage.steps.verifyImageAndAltTextInTooltipInputField(1);
+        });
+
+        it('When user adds \'Bold\' text to the description input field then it should be displayed in the description input field', () => {
+            feedbackScalePage.steps.expandOptionAccordion(2);
+            feedbackScalePage.steps.focusInDescriptionInputField(1);
+            feedbackScalePage.steps.selectBoldOptionFromCKEditorToolbar();
+            feedbackScalePage.steps.addInputToDescriptionInputField(1, 'I\'m very comfortable with the learning target');
+            feedbackScalePage.steps.verifyBoldTextInDescriptionInputField(1, '​​​​​​​I\'m very comfortable with the learning target');
+        });
+    });
+
+    describe('Feedback scale - Option accordion contents for \'Button\' layout style', () => {
+        const options = ['Option 1', 'Option 2', 'Option 3'];
+        const optionsContent = [
+            {
+                'labels': 'Uncomfortable',
+                'color': 'rgb(229, 76, 25)',
+                'tooltip': 'Made me uneasy and unsettled.',
+                'description': 'I am uncomfortable with the learning target.'
+            },
+            {
+                'labels': 'Somewhat comfortable',
+                'color': 'rgb(255, 240, 25)',
+                'tooltip': 'I would like some help.',
+                'description': 'I am somewhat comfortable with the learning target.'
+            },
+            {
+                'labels': 'Comfortable',
+                'color': 'rgb(9, 179, 33)',
+                'tooltip': 'I\'m feeling confident.',
+                'description': 'I am comfortable with the learning target.'
+            }
+        ];
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+        });
+
+        options.forEach((option, optionIndex) => {
+            it(`Option accordion contents for \'${option}\' - \'Button\' layout style`, () => {
+                feedbackScalePage.steps.verifyOptionAccordionInputFieldContents(optionIndex, optionsContent[optionIndex]);
+            });
+        });
+    });
+
+    describe('Feedback scale - Option accordion contents for \'Star\' layout style', () => {
+        const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'];
+        const optionsContent = [
+            {
+                'labels': '20%',
+                'color': 'rgb(226, 121, 0)',
+                'tooltip': 'Needs improvement',
+                'description': 'Your attempt could be better. Keep practicing!'
+            },
+            {
+                'labels': '40%',
+                'color': 'rgb(226, 121, 0)',
+                'tooltip': 'Getting there',
+                'description': 'You\'ve made progress, but more effort is needed to pass.'
+            },
+            {
+                'labels': '60%',
+                'color': 'rgb(226, 121, 0)',
+                'tooltip': 'Good job',
+                'description': 'You tried well and made a good attempt.'
+            },
+            {
+                'labels': '80%',
+                'color': 'rgb(226, 121, 0)',
+                'tooltip': 'Great work',
+                'description': 'You did an outstanding job and answered all questions correctly!'
+            },
+            {
+                'labels': '100%',
+                'color': 'rgb(226, 121, 0)',
+                'tooltip': 'Excellent',
+                'description': 'Exceptional job! All answers are perfect. You\'re doing amazing!'
+            }
+        ];
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+            feedbackScalePage.steps.clickOnFeedbackStyleLayoutDropdown();
+            feedbackScalePage.steps.selectFeedbackStyleLayoutDropdown('Star');
+        });
+
+        it('By default, 5 option accordions should be displayed for \'Star\' layout style and \'Option 1\' accordion should be in expanded state and all other accordions should be in collapsed state', () => {
+            utilities.verifyElementCount(feedbackScalePage.optionAccordion(), 5);
+            feedbackScalePage.steps.verifyOptionAccordionInExpandedState(0);
+            for (let index = 1; index < 4; index++) {
+                feedbackScalePage.steps.verifyOptionAccordionInCollapsedState(index);
+            };
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/541449
+        options.forEach((option, optionIndex) => {
+            it(`Option accordion contents for \'${option}\' - \'Star\' layout style`, () => {
+                feedbackScalePage.steps.verifyOptionAccordionInputFieldContents(optionIndex, optionsContent[optionIndex]);
+            });
+        });
+    });
+
+    describe('Feedback scale - Add, delete option accordion - edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Feedback scale question type');
+            feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When the user clicks on \'Add option\' button, a new option accordion should get added and the added option accordion should be in collapsed state', () => {
+            feedbackScalePage.steps.addOption();
+            utilities.verifyElementCount(feedbackScalePage.optionAccordion(), 4);
+            utilities.verifyElementVisibilityState(feedbackScalePage.optionAccordion(), 'visible');
+            feedbackScalePage.steps.verifyOptionAccordionInCollapsedState(3);
+        });
+
+        it('By default all input fields of the newly added option should be empty and default color in color block should be #00007C', () => {
+            feedbackScalePage.steps.verifyOptionAccordionInputFieldContents(3, { 'labels': '', 'color': 'rgb(0, 0, 124)', 'tooltip': '', 'description': '' });
+        });
+
+        it('When the user deletes an option accordion, the option accordion should get removed and labels of existing option accordions should get updated accordingly', () => {
+            feedbackScalePage.steps.deleteOptionAccordion(1);
+            utilities.verifyElementCount(feedbackScalePage.optionAccordion(), 3);
+            for (let index = 0; index < 3; index++) {
+                feedbackScalePage.steps.verifyOptionAccordionPanelContents(index, `Option ${index + 1}`);
+            };
+        });
+    });
+});