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

package/cypress/pages/feedbackScalePage copy.js

@@ -0,0 +1,716 @@
+import { additionalSettingsPanel, commonComponents, createQuestionBasePage, questionInstructionsComponent, autoScoredScoringPreviewTab } from "./components"
+import utilities from "../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const selectors = {
+    ...questionInstructionsComponent,
+    ...commonComponents,
+    specifyFeedbackScaleOptionsLabel: () => cy.get('[class*="FeedbackScalestyles__SpecifyFeedbackLabel"]'),
+    feedbackScaleStyleDropdownLabel: () => cy.get('#feedback-scale-style-dropdown-label'),
+    feedbackScaleStyleDropdown: () => cy.get('#feedback-scale-style-select'),
+    feedbackScaleStyleDropdownListOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="feedback-scale-style-dropdown-label"] [role="option"][aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('[aria-labelledby*="feedback-scale-style-dropdown-label"] [role="option"]')
+        }
+    },
+    optionsLabel: () => cy.get('.input-stepper-label'),
+    optionsStepperInputField: () => cy.get('.input-stepper-textfield'),
+    optionsStepperDecreaseButton: () => cy.get('.input-stepper-button[aria-label="Decrease count"]'),
+    optionsStepperIncreaseButton: () => cy.get('.input-stepper-button[aria-label="Increase count"]'),
+    defaultTextDropdownLabel: () => cy.get('#Default-text-dropdown-label'),
+    defaultTextDropdown: () => cy.get('#Default-text-select'),
+    defaultTextDropdownListOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="Default-text-dropdown-label"] [role="option"][aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('[aria-labelledby*="Default-text-dropdown-label"] [role="option"]')
+        }
+    },
+    colorSectionLabel: () => cy.get('[class*="FeedbackScalestyles__ColorLabelWrapper"]'),
+    defaultColorSchemeRadioButton: () => cy.get('[type="radio"][aria-label="Default color scheme"]'),
+    defaultColorSchemeRadioButtonLabel: () => cy.get('label[aria-label="Default color scheme"]'),
+    customColorsRadioButton: () => cy.get('[type="radio"][aria-label="Custom colors"]'),
+    customColorsRadioButtonLabel: () => cy.get('label[aria-label="Custom colors"]'),
+    colorLabel: () => cy.get('[class*="FeedbackScalestyles__RightHeader"]'),
+    optionLabel: () => cy.get('[class*="FeedbackScalestyles__LeftHeader"]'),
+    colorItemLabel: () => cy.get('.feedback-left-wrapper'),
+    colorSectionListItem: () => cy.get('.feedback-color-row'),
+    feedbackButton: () => cy.get('.feedback-scale-label-btn'),
+    feedbackButtonLabelText: () => cy.get('[class*="FeedbackScalestyles__LabelText"]'),
+    feedbackButtonNumberText: () => cy.get('[class*="FeedbackScalestyles__NumberBox"]'),
+    optionAccordion: () => cy.get('.feedback-scale-panel .ngie-accordion-summary'),
+    optionAccordionWrapper: () => cy.get('.feedback-scale-panel'),
+    optionAccordionLabel: () => cy.get('.feedback-scale-panel-label'),
+    optionAccordionPointsLabel: () => cy.get('.feedback-scale-points'),
+    deleteOptionAccordionButton: () => cy.get('[aria-label*="Delete Option"]'),
+    legendTextLabel: () => cy.get('.legend-wrapper [class*="LabelWrapper"]'),
+    legendTextInputField: () => cy.get('.legend-wrapper input'),
+    optionsTextLabel: () => cy.get('[class*="FeedbackScaleOptionWrapper"] [class*="LabelWrapper"]'),
+    optionTextInputField: () => cy.get('input[aria-label="Option text"]'),
+    addOptionButton: () => cy.get('.feedback-scale-add-option button'),
+    colorPickerBlock: () => cy.get('.color-picker-block'),
+    feedbackButtonColorBlock: () => cy.get('[class*="FeedbackScalestyles__ColorBlock"]'),
+    legendTextOptionsList: () => cy.get('.more-info-wrapper .options-list-item'),
+    legendAccordion: () => cy.get('.more-info-wrapper .ngie-accordion-summary'),
+    legendTextFeedbackButtonLabel: () => cy.get('[class*="MoreInfostyles__OptionText"]'),
+    legendTextColorBlock: () => cy.get('[class*="ColorDiv"]'),
+    legendTextPreviewTab: () => cy.get('[class*="MoreInfostyles__LegendText"]'),
+    legendTextNumberBlock: () => cy.get('[class*="MoreInfostyles__NumberBox"]'),
+    legendTextStarIcon: () => cy.get('[class*="MoreInfostyles__StarWrapper"] svg'),
+    legendTextHeartIcon: () => cy.get('[class*="MoreInfostyles__StarWrapper"] svg'),
+    editColorButton: () => cy.get('.icon-pencil'),
+    thumbsUpFeedbackButton: () => cy.get('[role="button"][aria-label="Thumbs-Up"]'),
+    thumbsDownFeedbackButton: () => cy.get('[role="button"][aria-label="Thumbs-Down"]'),
+    thumbsUpButtonIcon: () => cy.get('[data-name="Thumbs up button"]'),
+    thumbsDownButtonIcon: () => cy.get('[data-name="Thumbs down button"]'),
+    feedbackScaleUILabel: () => cy.get('.feedback-scale-ui .options-label'),
+    starsFeedbackScaleUIButton: () => cy.get('[data-ngie-testid="stars-toggle-button"]'),
+    heartsFeedbackScaleUIButton: () => cy.get('[data-ngie-testid="hearts-toggle-button"]'),
+    feedbackStarButton: () => cy.get('.feedback-scale-label-star-btn'),
+    feedbackHeartButton: () => cy.get('.feedback-scale-label-star-btn'),
+}
+
+const steps = {
+    ...createQuestionBasePage.steps,
+    ...questionInstructionsComponent.steps,
+    ...commonComponents.steps,
+    ...additionalSettingsPanel.steps,
+    ...questionInstructionsComponent.steps,
+    ...autoScoredScoringPreviewTab.steps,
+    /**
+     * Adds legend text to a specific option in the Legend Text accordion.
+     * @param {number} optionIndex - The index of the option in the Legend Text accordion.
+     * @param {string} text - The legend text to be added.
+     */
+    addLegendText: (optionIndex, text) => {
+        utilities.getNthElement(feedbackScalePage.legendTextInputField(), optionIndex)
+            .type(text)
+            .blur();
+    },
+
+    clearLegendTextInputField: (optionIndex) => {
+        utilities.getNthElement(feedbackScalePage.legendTextInputField(), optionIndex)
+            .clear();
+    },
+
+    /**
+     * @param {number} buttonIndex index of the feedback button
+     * @param {string} buttonText text content of the feedback button
+     * @description this function verifies the visibility and text content of a feedback button in the preview tab
+     */
+    verifyFeedbackButtonInPreviewTab: (buttonIndex, buttonText) => {
+        utilities.verifyInnerText(utilities.getNthElement(feedbackScalePage.feedbackButton(), buttonIndex), buttonText);
+        utilities.verifyElementVisibilityState(utilities.getNthElement(feedbackScalePage.feedbackButton(), buttonIndex), 'visible');
+    },
+
+    /**
+     * Verifies the color block of a feedback button in the preview tab.
+     * @param {number} buttonIndex - The index of the feedback button.
+     * @param {string} colorBlock - The expected background color of the color block.
+     */
+    verifyFeedbackButtonColorBlockPreviewTab: (buttonIndex, colorBlock) => {
+        utilities.getNthElement(feedbackScalePage.feedbackButtonColorBlock(), buttonIndex)
+            .should('have.css', 'background-color', colorBlock);
+    },
+
+    /**
+     * @param {number} optionAccordionIndex index of the option accordion
+     * @description this function expands an option accordion
+     */
+    expandOptionAccordion: (optionAccordionIndex) => {
+        utilities.getNthElement(feedbackScalePage.optionAccordion(), optionAccordionIndex)
+            .click()
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    verifyLegendTextAccordionExpandedState: () => {
+        feedbackScalePage.legendAccordion()
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    verifyLegendTextAccordionCollapsedState: () => {
+        feedbackScalePage.legendAccordion()
+            .should('have.attr', 'aria-expanded', 'false');
+    },
+
+    /**
+     * @param {number} buttonIndex index of the feedback button
+     * @description this function is used to click on a feedback button
+     */
+    clickOnFeedbackButton: (buttonIndex) => {
+        utilities.getNthElement(feedbackScalePage.feedbackButton(), buttonIndex)
+            .click();
+    },
+
+    /**
+     * @param {number} buttonIndex index of the feedback button
+     * @description this function verifies the selected state of a feedback button
+     */
+    verifyFeedbackButtonSelectedState: (buttonIndex) => {
+        utilities.getNthElement(feedbackScalePage.feedbackButton(), buttonIndex)
+            .should('have.class', 'selected-button');
+    },
+
+    /**
+     * @param {number} buttonIndex index of the feedback button
+     * @description this function verifies the unselected state of a feedback button
+     */
+    verifyFeedbackButtonUnselectedState: (buttonIndex) => {
+        utilities.getNthElement(feedbackScalePage.feedbackButton(), buttonIndex)
+            .should('not.have.class', 'selected-button');
+    },
+
+    /**
+     * Verifies the disabled state of a feedback button.
+     * @param {number} buttonIndex - The index of the feedback button.
+     */
+    verifyFeedbackButtonDisabledState: (buttonIndex) => {
+        utilities.verifyElementDisabledClass(utilities.getNthElement(feedbackScalePage.feedbackButton(), buttonIndex));
+    },
+
+    /**
+     * Verifies the color block, feedback button label, and legend text in the Legend Text accordion.
+     * @param {number} itemIndex - The index of the item in the Legend Text accordion.
+     * @param {Object} options - An object containing properties for colorBlock, buttonText, and legendText.
+     * @param {string} options.colorBlock - The expected background color of the color block.
+     * @param {string} options.buttonText - The expected text of the feedback button label.
+     * @param {string} options.legendText - The expected text of the legend text.
+     */
+    verifyColorBlockFeedbackButtonLabelLegendTextInLegendTextAccordion: (itemIndex, { colorBlock, buttonText, legendText }) => {
+        utilities.getNthElement(feedbackScalePage.legendTextOptionsList(), itemIndex)
+            .within(() => {
+                feedbackScalePage.legendTextColorBlock()
+                    .should('have.css', 'background-color', colorBlock);
+                utilities.verifyInnerText(feedbackScalePage.legendTextFeedbackButtonLabel(), `${buttonText}:`);
+                utilities.verifyInnerText(feedbackScalePage.legendTextPreviewTab(), legendText);
+            });
+    },
+
+    expandFeedbackScaleStyleDropdown: () => {
+        feedbackScalePage.feedbackScaleStyleDropdown()
+            .click();
+    },
+
+    /**
+     * @param {("Text" | "Numbers" | "Thumbs"| "Stars / Hearts")} dropdownOption aria-label of dropdown options
+     * @description this function selects dropdown option from feedback scale style dropdown
+     */
+    selectOptionFromFeedbackScaleStyleDropdown: (dropdownOption) => {
+        feedbackScalePage.feedbackScaleStyleDropdownListOptions(dropdownOption)
+            .click();
+    },
+
+    expandDefaultTextDropdown: () => {
+        feedbackScalePage.defaultTextDropdown()
+            .click();
+    },
+
+    /**
+     * Selects an option from the default text dropdown list.
+     * @param {string} dropdownOption - The option to be selected from the dropdown list.
+     * @example - selectOptionFromDefaultTextDropdown('Uncomfortable / Need some support / Comfortable');
+     */
+    selectOptionFromDefaultTextDropdown: (dropdownOption) => {
+        feedbackScalePage.defaultTextDropdownListOptions(dropdownOption)
+            .click();
+    },
+
+    /**
+     * Verifies the count displayed in the options stepper input field.
+     * @param {number} value - The expected value to be displayed in the input field.
+     */
+    verifyCountInOptionsStepperInputField: (value) => {
+        utilities.verifyInputFieldValue(feedbackScalePage.optionsStepperInputField(), value)
+    },
+
+    /**
+    * @description Decrease option input stepper count
+    * @param {number} increaseValue The value by which the option input stepper count is to be decreased
+    */
+    decreaseOptionsInputStepperCount: (increaseValue) => {
+        for (let index = 0; index < increaseValue; index++) {
+            feedbackScalePage.optionsStepperDecreaseButton()
+                .click();
+        };
+    },
+
+    /**
+     * @description Increase option input stepper count
+     * @param {number} increaseValue The value by which the option input stepper count is to be increased
+     */
+    increaseOptionsInputStepperCount: (increaseValue) => {
+        for (let index = 0; index < increaseValue; index++) {
+            feedbackScalePage.optionsStepperIncreaseButton()
+                .click();
+        };
+    },
+
+    addInputToOptionStepperInputField: (value) => {
+        feedbackScalePage.optionsStepperInputField()
+            .clear()
+            .type(value)
+            .blur();
+    },
+
+    /**
+     * Verifies the properties of an options accordion.
+     * @param {number} optionAccordionIndex - The index of the options accordion.
+     * @param {Object} properties - An object containing properties for the options accordion.
+     * @param {string} properties.optionLabel - The expected label of the options accordion.
+     * @param {number} properties.Points - The expected points associated with the options accordion.
+     */
+    verifyOptionsAccordionProperties: (optionAccordionIndex, { optionLabel, Points }) => {
+        utilities.getNthElement(feedbackScalePage.optionAccordion(), optionAccordionIndex)
+            .within(() => {
+                utilities.verifyInnerText(feedbackScalePage.optionAccordionLabel(), optionLabel);
+                utilities.verifyInnerText(feedbackScalePage.optionAccordionPointsLabel(), `Points:\n${Points}`);
+                utilities.verifyElementVisibilityState(feedbackScalePage.deleteOptionAccordionButton(), 'visible');
+            });
+    },
+
+    /**
+     * Verifies the collapsed state of an options accordion.
+     * @param {number} optionAccordionIndex - The index of the options accordion.
+     */
+    verifyOptionAccordionCollapsedState: (optionAccordionIndex) => {
+        utilities.getNthElement(feedbackScalePage.optionAccordion(), optionAccordionIndex)
+            .should('have.attr', 'aria-expanded', 'false');
+    },
+
+    /**
+     * Verifies the expanded state of an options accordion.
+     * @param {number} optionAccordionIndex - The index of the options accordion.
+     */
+    verifyOptionAccordionExpandedState: (optionAccordionIndex) => {
+        utilities.getNthElement(feedbackScalePage.optionAccordion(), optionAccordionIndex)
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    /**
+     * Verifies the placeholder of the legend text input field in an options accordion.
+     * @param {number} optionAccordionIndex - The index of the options accordion.
+     */
+    verifyLegendTextInputFieldPlaceholder: (optionAccordionIndex) => {
+        utilities.getNthElement(feedbackScalePage.legendTextInputField(), optionAccordionIndex)
+            .should('have.attr', 'placeholder', 'Enter legend text');
+    },
+
+    /**
+     * Verifies that the placeholder of the legend text input field in an options accordion does not exist.
+     * @param {number} optionAccordionIndex - The index of the options accordion.
+     */
+    verifyLegendTextInputFieldPlaceholderNotExists: (optionAccordionIndex) => {
+        utilities.getNthElement(feedbackScalePage.legendTextInputField(), optionAccordionIndex)
+            .should('not.have.attr', 'placeholder');
+    },
+
+    /**
+     * Verifies the count of options accordions.
+     * @param {number} count - The expected count of options accordions.
+     */
+    verifyOptionsAccordionCount: (count) => {
+        utilities.verifyElementCount(feedbackScalePage.optionAccordion(), count);
+    },
+
+    addOption: () => {
+        feedbackScalePage.addOptionButton()
+            .click();
+    },
+
+    /**
+     * @param {number} optionAccordionIndex index of the option accordion
+     * @description this function is used to delete an option accordion
+     */
+    deleteOptionAccordion: (optionAccordionIndex) => {
+        utilities.getNthElement(feedbackScalePage.deleteOptionAccordionButton(), optionAccordionIndex)
+            .click();
+    },
+
+    /**
+     * Verifies the color of a color picker block.
+     * 
+     * @param {number} blockIndex - The index of the color picker block.
+     * @param {string} color - The expected background color of the color picker block.
+     */
+    verifyColorPickerBlockColor: (blockIndex, color) => {
+        utilities.verifyCSS(utilities.getNthElement(feedbackScalePage.colorPickerBlock(), blockIndex), {
+            'background-color': color
+        });
+    },
+
+    /**
+     * Verifies the number block, feedback button label, and legend text in the Legend Text accordion.
+     * 
+     * @param {number} buttonIndex - The index of the button in the Legend Text accordion.
+     * @param {string} legendText - The expected text of the legend text.
+     */
+    verifyNumberBlockFeedbackButtonLabelLegendTextInLegendTextAccordion: (buttonIndex, legendText) => {
+        utilities.getNthElement(feedbackScalePage.legendTextOptionsList(), buttonIndex)
+            .within(() => {
+                utilities.verifyInnerText(feedbackScalePage.legendTextNumberBlock(), `${buttonIndex + 1}`);
+                utilities.verifyInnerText(feedbackScalePage.legendTextPreviewTab(), legendText);
+            });
+    },
+
+    /**
+     * Clicks on the edit color button.
+     * @param {number} buttonIndex - The index of the edit color button.
+     */
+    editColor: (buttonIndex) => {
+        utilities.getNthElement(feedbackScalePage.editColorButton(), buttonIndex)
+            .click();
+    },
+
+    /**
+     * Verifies the selected state color of a feedback button.
+     * @param {number} buttonIndex - The index of the feedback button.
+     * @param {string} colorBlock - The expected background color of the feedback button.
+     */
+    verifyFeedbackButtonSelectedStateColor: (buttonIndex, colorBlock) => {
+        utilities.getNthElement(feedbackScalePage.feedbackButton(), buttonIndex)
+            .should('have.css', 'background-color', colorBlock);
+    },
+
+    /**
+     * Verifies the number blocks in the Legend Text accordion.
+     * @param {number} itemIndex - The index of the item in the Legend Text accordion.
+     */
+    verifyNumberBlocksInLegendTextAccordion: (itemIndex) => {
+        utilities.getNthElement(feedbackScalePage.legendTextOptionsList(), itemIndex)
+            .within(() => {
+                utilities.verifyInnerText(feedbackScalePage.legendTextNumberBlock(), `${itemIndex + 1}`);
+            });
+    },
+
+    /**
+     * Verifies the text label of an option in the feedback scale options accordion.
+     * @param {number} optionAccordionIndex - The index of the option accordion.
+     * @returns {void}
+     */
+    verifyOptionsTextLabel: (optionAccordionIndex) => {
+        utilities.getNthElement(feedbackScalePage.optionAccordionWrapper(), optionAccordionIndex)
+            .within(() => {
+                utilities.verifyInnerText(utilities.getNthElement(feedbackScalePage.optionsTextLabel(), 0), 'Option text');
+            });
+    },
+
+    /**
+     * Verifies the text label of the legend in the feedback scale options accordion.
+     * @param {number} optionAccordionIndex - The index of the option accordion.
+     * @returns {void}
+     */
+    verifyLegendTextLabel: (optionAccordionIndex) => {
+        utilities.getNthElement(feedbackScalePage.optionAccordionWrapper(), optionAccordionIndex)
+            .within(() => {
+                utilities.verifyInnerText(feedbackScalePage.legendTextLabel(), 'Legend text');
+            });
+    },
+
+    /**
+     * Verifies the input field text value of an option in the feedback scale options accordion.
+     * @param {number} optionAccordionIndex - The index of the option accordion.
+     * @param {string} text - The expected text value of the input field.
+     * @returns {void}
+     */
+    verifyOptionInputFieldText: (optionAccordionIndex, text) => {
+        utilities.getNthElement(feedbackScalePage.optionAccordionWrapper(), optionAccordionIndex)
+            .within(() => {
+                utilities.verifyInputFieldValue(feedbackScalePage.optionTextInputField(), text)
+            });
+    },
+
+    /**
+     * Verifies the properties of an options accordion for thumbs feedback scale style.
+     * @param {number} optionAccordionIndex - The index of the options accordion.
+     * @param {Object} properties - An object containing properties for the options accordion.
+     * @param {string} properties.optionLabel - The expected label of the options accordion.
+     * @param {number} properties.Points - The expected points associated with the options accordion.
+     */
+    verifyOptionsAccordionPropertiesForThumbsScale: (optionAccordionIndex, { optionLabel, Points }) => {
+        utilities.getNthElement(feedbackScalePage.optionAccordion(), optionAccordionIndex)
+            .within(() => {
+                utilities.verifyInnerText(feedbackScalePage.optionAccordionLabel(), optionLabel);
+                utilities.verifyInnerText(feedbackScalePage.optionAccordionPointsLabel(), `Points:\n${Points}`);
+                utilities.verifyElementVisibilityState(feedbackScalePage.deleteOptionAccordionButton(), 'notExist');
+            });
+    },
+
+    /**
+     * Verifies the thumbs down button in the legend text accordion.
+     * @param {string} buttonText - The expected text of the thumbs down button.
+     * @returns {void}
+     */
+    verifyThumbsDownButtonInLegendTextAccordion: (buttonText) => {
+        utilities.getNthElement(feedbackScalePage.legendTextOptionsList(), 0)
+            .within(() => {
+                utilities.verifyElementVisibilityState(feedbackScalePage.thumbsDownButtonIcon(), 'visible')
+                utilities.verifyInnerText(feedbackScalePage.legendTextFeedbackButtonLabel(), buttonText);
+            });
+    },
+
+    /**
+     * Verifies the thumbs up button in the legend text accordion.
+     * @param {string} buttonText - The expected text of the thumbs up button.
+     * @returns {void}
+     */
+    verifyThumbsUpButtonInLegendTextAccordion: (buttonText) => {
+        utilities.getNthElement(feedbackScalePage.legendTextOptionsList(), 1)
+            .within(() => {
+                utilities.verifyElementVisibilityState(feedbackScalePage.thumbsUpButtonIcon(), 'visible')
+                utilities.verifyInnerText(feedbackScalePage.legendTextFeedbackButtonLabel(), buttonText);
+            });
+    },
+
+    /**
+     * Verifies the legend text in the legend text accordion.
+     * @param {number} buttonIndex - The index of the legend text accordion.
+     * @param {string} legendText - The expected text of the legend text.
+     * @returns {void}
+     */
+    verifyLegendTextInLegendTextAccordion: (buttonIndex, legendText) => {
+        utilities.getNthElement(feedbackScalePage.legendTextOptionsList(), buttonIndex)
+            .within(() => {
+                utilities.verifyInnerText(feedbackScalePage.legendTextPreviewTab(), legendText);
+            });
+    },
+
+    clickOnThumbsUpButton: () => {
+        feedbackScalePage.thumbsUpFeedbackButton()
+            .click();
+    },
+
+    verifyThumbsUpButtonSelectedState: () => {
+        feedbackScalePage.thumbsUpFeedbackButton()
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+     * Verifies the selected state color of the thumbs up button.
+     * @param {string} color - The expected color of the selected state of the thumbs up button.
+     * @returns {void}
+     */
+    verifyThumbsUpButtonSelectedStateColor: (color) => {
+        feedbackScalePage.thumbsUpFeedbackButton().find('circle').eq(1)
+            .should('have.css', 'fill', color);
+    },
+
+    verifyStarsFeedbackScaleUIButtonSelectedState: () => {
+        feedbackScalePage.starsFeedbackScaleUIButton()
+            .should('have.attr', 'aria-pressed', 'true');
+    },
+
+    /**
+     * Selects a feedback scale UI button.
+     * @param {('Stars' | 'Hearts')} button - The type of feedback scale UI button to select .
+     * @throws {Error} Thrown if an invalid feedback scale style is provided.
+     */
+    selectFeedbackScaleUIButton: (button) => {
+        switch (button) {
+            case 'Stars':
+                feedbackScalePage.starsFeedbackScaleUIButton()
+                    .click()
+                    .should('have.attr', 'aria-pressed', 'true');
+                break;
+            case 'Hearts':
+                feedbackScalePage.heartsFeedbackScaleUIButton()
+                    .click()
+                    .should('have.attr', 'aria-pressed', 'true');
+                break;
+            default:
+                throw new Error('Invalid feedback scale style');
+        }
+    },
+
+    /**
+     * Verifies the highlighted stars and un-highlighted stars in the legend text item specified by buttonIndex.
+     * @param {number} buttonIndex - The index of the legend text item in the list.
+     * @returns {void}
+     */
+    verifyHighlightedStarsInLegendTextListItem: (buttonIndex) => {
+        utilities.getNthElement(feedbackScalePage.legendTextOptionsList(), buttonIndex)
+            .within(() => {
+                feedbackScalePage.legendTextStarIcon()
+                    .then(($stars) => {
+                        const totalStars = $stars.length;
+                        for (let index = 0; index < buttonIndex + 1; index++) {
+                            expect($stars.eq(index)).to.have.css('fill', 'rgb(102, 102, 102)');
+                        }
+                        for (let index = buttonIndex + 1; index < totalStars; index++) {
+                            expect($stars.eq(index)).to.have.css('fill', 'none');
+                        }
+                    });
+            });
+    },
+
+    /**
+     * @param {number} buttonIndex index of the feedback star button
+     * @description this function is used to click on a feedback star button
+     */
+    clickOnFeedbackStarButton: (buttonIndex) => {
+        utilities.getNthElement(feedbackScalePage.feedbackStarButton(), buttonIndex)
+            .click();
+    },
+
+    /**
+     * Verifies the highlighted stars and un-highlighted stars in the feedback scale up to the specified buttonIndex.
+     * @param {number} buttonIndex - The index of the last highlighted star in the feedback scale.
+     * @param {string} fillColor - The expected fill color of the highlighted stars.
+     * @returns {void}
+     */
+    verifyHighlightedStarsInFeedbackScale: (buttonIndex, fillColor) => {
+        feedbackScalePage.feedbackStarButton()
+            .then(($stars) => {
+                const totalStars = $stars.length;
+                for (let index = 0; index <= buttonIndex; index++) {
+                    expect($stars.find('g g g').eq(index)).to.have.css('fill', fillColor);
+                }
+                for (let index = buttonIndex + 1; index < totalStars; index++) {
+                    expect($stars.find('g g g').eq(index)).to.have.css('fill', 'none');
+                }
+            });
+    },
+
+    /**
+     * Verifies the highlighted hearts and un-highlighted hearts in the legend text item specified by buttonIndex.
+     * @param {number} buttonIndex - The index of the legend text item in the list.
+     * @returns {void}
+     */
+    verifyHighlightedHeartsInLegendTextListItem: (buttonIndex) => {
+        utilities.getNthElement(feedbackScalePage.legendTextOptionsList(), buttonIndex)
+            .within(() => {
+                feedbackScalePage.legendTextHeartIcon()
+                    .then(($hearts) => {
+                        const totalHearts = $hearts.length;
+                        for (let index = 0; index < buttonIndex + 1; index++) {
+                            expect($hearts.find('g').eq(index)).to.have.css('fill', 'rgb(102, 102, 102)');
+                        }
+                        for (let index = buttonIndex + 1; index < totalHearts; index++) {
+                            expect($hearts.find('g').eq(index)).to.have.css('fill', 'none');
+                        }
+                    });
+            });
+    },
+
+    /**
+     * @param {number} buttonIndex index of the feedback star button
+     * @description this function is used to click on a feedback star button
+     */
+    clickOnFeedbackHeartButton: (buttonIndex) => {
+        utilities.getNthElement(feedbackScalePage.feedbackHeartButton(), buttonIndex)
+            .click();
+    },
+
+    /**
+     * Verifies the highlighted hearts and un-highlighted hearts in the feedback scale up to the specified buttonIndex.
+     * @param {number} buttonIndex - The index of the last highlighted heart in the feedback scale.
+     * @param {string} fillColor - The expected fill color of the highlighted hearts.
+     * @returns {void}
+     */
+    verifyHighlightedHeartsInFeedbackScale: (buttonIndex, fillColor) => {
+        feedbackScalePage.feedbackHeartButton()
+            .then(($hearts) => {
+                const totalHearts = $hearts.length;
+                for (let index = 0; index <= buttonIndex; index++) {
+                    expect($hearts.find('g').eq(index)).to.have.css('fill', fillColor);
+                }
+                for (let index = buttonIndex + 1; index < totalHearts; index++) {
+                    expect($hearts.find('g').eq(index)).to.have.css('fill', 'none');
+                }
+            });
+    },
+
+    enterTextInOptionTextInputField: (optionIndex, text) => {
+        utilities.getNthElement(feedbackScalePage.optionTextInputField(), optionIndex)
+            .type(text)
+            .blur();
+    },
+
+    clearOptionTextInputField: (optionIndex) => {
+        utilities.getNthElement(feedbackScalePage.optionTextInputField(), optionIndex)
+            .clear()
+    },
+
+    verifyTextInOptionTextInputField: (optionIndex, text) => {
+        utilities.verifyInputFieldValue(utilities.getNthElement(feedbackScalePage.optionTextInputField(), optionIndex), text)
+    },
+
+    /**
+     * Verifies the placeholder of the option text input field in an options accordion.
+     * @param {number} optionAccordionIndex - The index of the options accordion.
+     */
+    verifyOptionTextInputFieldPlaceholder: (optionAccordionIndex) => {
+        utilities.getNthElement(feedbackScalePage.optionTextInputField(), optionAccordionIndex)
+            .should('have.attr', 'placeholder', 'Enter option text');
+    },
+
+    /**
+     * Verifies that the placeholder of the option text input field in an options accordion does not exist.
+     * @param {number} optionAccordionIndex - The index of the options accordion.
+     */
+    verifyOptionTextInputFieldPlaceholderNotExists: (optionAccordionIndex) => {
+        utilities.getNthElement(feedbackScalePage.optionTextInputField(), optionAccordionIndex)
+            .should('not.have.attr', 'placeholder');
+    },
+
+    verifyDefaultColorSchemeRadioButtonCheckedState: () => {
+        feedbackScalePage.defaultColorSchemeRadioButton()
+            .should('be.checked');
+    },
+
+    verifyCustomColorsRadioButtonCheckedState: () => {
+        feedbackScalePage.customColorsRadioButton()
+            .should('be.checked');
+    },
+
+    /**
+     * Selects a color section button.
+     * @param {('Default color scheme' | 'Custom colors')} option - The type of color scheme to select .
+     * @throws {Error} Thrown if an invalid radio button is provided.
+     */
+    selectColorSectionRadioButton: (option) => {
+        switch (option) {
+            case 'Default color scheme':
+                feedbackScalePage.defaultColorSchemeRadioButton()
+                    .click()
+                    .should('be.checked');
+                break;
+            case 'Custom colors':
+                feedbackScalePage.customColorsRadioButton()
+                    .click()
+                    .should('be.checked');
+                break;
+            default:
+                throw new Error('Invalid radio button');
+        }
+    },
+
+    verifyColorSectionListItemContents: (itemIndex, { label, colorBlock }) => {
+        utilities.getNthElement(feedbackScalePage.colorSectionListItem(), itemIndex)
+            .within(() => {
+                utilities.verifyInnerText(feedbackScalePage.colorItemLabel(), label);
+                utilities.verifyElementVisibilityState(feedbackScalePage.editColorButton(), 'visible');
+            })
+        steps.verifyColorPickerBlockColor(itemIndex, colorBlock);
+    },
+}
+
+const tests = {
+    ...questionInstructionsComponent.tests,
+    ...additionalSettingsPanel.tests,
+    ...createQuestionBasePage.tests,
+    ...commonComponents.tests,
+    verifyLegendTextAccordionDefaultState: () => {
+        it('A \'Legend\' accordion should be present and by default it should be in expanded state', () => {
+            utilities.verifyInnerText(feedbackScalePage.legendAccordion(), 'Legend');
+            feedbackScalePage.steps.verifyLegendTextAccordionExpandedState();
+        });
+    }
+}
+
+export const feedbackScalePage = {
+    ...selectors,
+    steps,
+    tests
+}