itemengine-cypress-automation 1.0.2

package/cypress/pages/feedbackScalePage.js

@@ -0,0 +1,698 @@
+import constants from "../fixtures/constants";
+import { additionalSettingsPanel, ckEditorToolbar, colorPopupComponent, commonComponents, createQuestionBasePage, questionInstructionsComponent } from "./components"
+import { dialogBoxBase } from "./dialogBoxBase";
+import utilities from "../support/helpers/utilities";
+import { selectQuestionResourceToolPage } from "./selectQuestionResourceToolPage";
+const css = Cypress.env('css');
+
+const selectors = {
+    ...questionInstructionsComponent,
+    ...commonComponents,
+    ...ckEditorToolbar,
+    ...additionalSettingsPanel,
+    ...dialogBoxBase,
+    ...createQuestionBasePage,
+    feedbackLayoutStyleLabel: () => cy.get('#feedback-layout-style-dropdown-label'),
+    feedbackLayoutStyleDropdown: () => cy.get('#feedback-layout-style-select'),
+    feedbackLayoutStyleDropdownOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="feedback-layout-style-dropdown-label"] [role="option"][aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('[aria-labelledby*="feedback-layout-style-dropdown-label"] [role="option"]')
+        }
+    },
+    feedbackScaleLabel: () => cy.get('.feedback-scale-panel-heading'),
+    optionAccordion: () => cy.get('.feedback-scale-panel .ngie-accordion-summary'),
+    optionAccordionLabel: () => cy.get('.feedback-scale-panel-label'),
+    deleteOptionAccordionButton: () => cy.get('[aria-label*="Delete Option"]'),
+    labelsLabel: () => cy.get('[class*="InlineTextFieldWithDebouncestyles__PropertyLabel"]'),
+    labelsInputField: () => cy.get('input[aria-label="Label"]'),
+    colorLabel: () => cy.get('[class*="FeedbackScalePanelstyle__ColorPickerWrapper"][class*="text-label"]'),
+    tooltipLabel: () => cy.get('[class*="FeedbackScalePanelstyle__FeedbackScaleOptionWrapper"] [class*="InlineRichTextComponentstyles__LabelWarpper"]').eq(0),
+    tooltipInputField: () => cy.get('[role="textbox"][aria-label*="tooltip"]'),
+    descriptionLabel: () => cy.get('[class*="FeedbackScalePanelstyle__FeedbackScaleOptionWrapper"] [class*="InlineRichTextComponentstyles__LabelWarpper"]').eq(1),
+    descriptionInputField: () => cy.get('[role="textbox"][aria-label*="description"]'),
+    addOptionButton: () => cy.get('.feedback-scale-add-option button'),
+    optionAccordionPanel: () => cy.get('.feedback-scale-panel'),
+    //Preview tab
+    feedbackButton: () => cy.get('.feedback-scale-label-btn'),
+    previewTabColorBlock: () => cy.get('[class*="ColorDiv"]'),
+    moreInfoOptionsList: () => cy.get('.options-list-item'),
+    moreInfoButton: () => cy.get('.feedback-layout-accordion .ngie-accordion-summary'),
+    moreInfoFeedbackLabel: () => cy.get('[class*="MoreInfostyles__LabelDiv"]'),
+    moreInfoTooltipText: () => cy.get('.tooltip-text'),
+    moreInfoDescriptionText: () => cy.get('.description-text'),
+    feedbackStarButton: () => cy.get('.feedback-scale-label-star-btn'),
+    moreInfoStarIcon: () => cy.get('[class*="MoreInfostyles__IconWrapper"] svg'),
+    studentResponseAreaAndLayoutLabel: () => cy.get('[class*="AdditionalOptionstyles__LayoutText"]'),
+    displayAdditionalInformationCheckboxLabel: () => cy.get('[data-ngie-testid="display-additional-information-checkbox"] .MuiFormControlLabel-label'),
+    displayAdditionalInformationCheckbox: () => cy.get('[data-ngie-testid="display-additional-information-checkbox"] input'),
+    allowStudentsToAddCommentCheckboxLabel: () => cy.get('[data-ngie-testid="allow-students-to-add-comment-checkbox"] .MuiFormControlLabel-label'),
+    allowStudentsToAddCommentCheckbox: () => cy.get('[data-ngie-testid="allow-students-to-add-comment-checkbox"] input'),
+    describeYourExperienceLabel: () => cy.get('.describe-your-experience .inline-text-property-label'),
+    describeYourExperienceInputField: () => cy.get('.describe-your-experience input')
+}
+
+const steps = {
+    ...createQuestionBasePage.steps,
+    ...questionInstructionsComponent.steps,
+    ...commonComponents.steps,
+    ...additionalSettingsPanel.steps,
+    ...ckEditorToolbar.steps,
+    ...additionalSettingsPanel.steps,
+    ...dialogBoxBase.steps,
+    clickOnFeedbackStyleLayoutDropdown: () => {
+        feedbackScalePage.feedbackLayoutStyleDropdown()
+            .click();
+    },
+
+    /**
+     * @param {string} dropdownOptionName option from the feedback layout style dropdown. Should be one of 'Button' or 'Star'
+     * @description this function selects an option from the feedback layout style dropdown
+     */
+    selectFeedbackStyleLayoutDropdown: (dropdownOptionName) => {
+        feedbackScalePage.feedbackLayoutStyleDropdownOptions(dropdownOptionName)
+            .click();
+    },
+
+    /**
+     * @param {string[]} dropdownOptions array of options of the feedback layout style dropdown
+     * @description this function verifies the list options of the feedback layout style dropdown
+     */
+    verifyFeedbackStyleLayoutOptions: (dropdownOptions) => {
+        dropdownOptions.forEach((option, count) => {
+            feedbackScalePage.feedbackLayoutStyleDropdownOptions()
+                .eq(count)
+                .verifyInnerText(option);
+        });
+    },
+
+    /**
+     * @param {number} optionAccordionIndex index of the option accordion
+     * @description this function verifies if an option accordion is in expanded state
+     */
+    verifyOptionAccordionInExpandedState: (optionAccordionIndex) => {
+        feedbackScalePage.optionAccordion()
+            .eq(optionAccordionIndex)
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    /**
+     * @param {number} optionAccordionIndex index of the option accordion
+     * @description this function verifies if an option accordion is in collapsed state
+     */
+    verifyOptionAccordionInCollapsedState: (optionAccordionIndex) => {
+        feedbackScalePage.optionAccordion()
+            .eq(optionAccordionIndex)
+            .should('have.attr', 'aria-expanded', 'false');
+    },
+
+    /**
+     * @param {number} optionAccordionIndex index of the option accordion
+     * @param {string} optionAccordionLabelText label of the option accordion. for example: Option 1
+     * @description this function verifies the contents that appear on an option accordion
+     */
+    verifyOptionAccordionPanelContents: (optionAccordionIndex, optionAccordionLabelText) => {
+        feedbackScalePage.optionAccordion()
+            .eq(optionAccordionIndex)
+            .within(($element) => {
+                feedbackScalePage.optionAccordionLabel()
+                    .verifyInnerText(optionAccordionLabelText);
+                feedbackScalePage.deleteOptionAccordionButton()
+                    .should('be.visible');
+                cy.wrap($element)
+                    .find('svg')
+                    .should('be.visible');
+            });
+    },
+
+    /**
+     * @param {number} optionAccordionIndex index of the option accordion
+     * @description this function expands an option accordion
+     */
+    expandOptionAccordion: (optionAccordionIndex) => {
+        feedbackScalePage.optionAccordion()
+            .eq(optionAccordionIndex)
+            .click()
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    /**
+     * @param {number} optionAccordionIndex index of the option accordion
+     * @description this function collapses an option accordion
+     */
+    collapseOptionAccordion: (optionAccordionIndex) => {
+        feedbackScalePage.optionAccordion()
+            .eq(optionAccordionIndex)
+            .click()
+            .should('have.attr', 'aria-expanded', 'false');
+    },
+
+    /**
+     * @param {number} optionAccordionIndex index of the option accordion
+     * @param {string[]} contents array of labels, color, tooltip and description of an option accordion
+     * @description this function verifies the contents in the input fields of an option accordion
+     * @example verifyOptionAccordionInputFieldContents(0, {'labels': 'Comfortable', 'color': 'rgba(9, 179, 33, 1)', 'tooltip': 'I\'m feeling confident.', 'description': 'I am comfortable with the learning target.'})
+     */
+    verifyOptionAccordionInputFieldContents: (optionAccordionIndex, contents) => {
+        feedbackScalePage.optionAccordionPanel()
+            .eq(optionAccordionIndex)
+            .within(() => {
+                feedbackScalePage.labelsInputField()
+                    .should('have.value', contents['labels']);
+                utilities.verifyCSS(colorPopupComponent.colorBlock(), {
+                    'background-color': contents['color']
+                });
+                feedbackScalePage.tooltipInputField()
+                    .should('have.text', contents['tooltip']);
+                feedbackScalePage.descriptionInputField()
+                    .should('have.text', contents['description']);
+            });
+    },
+
+    /**
+     * @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) => {
+        feedbackScalePage.feedbackButton()
+            .eq(buttonIndex)
+            .should('have.text', buttonText)
+            .and('be.visible');
+    },
+
+    /**
+     * @param {number} buttonIndex index of the feedback button
+     * @param {string} tooltipText text that appears on tooltip of the feedback button
+     * @description this function verifies the tooltip text of a feedback button in the preview tab
+     */
+    verifyTooltipFeedbackButton: (buttonIndex, tooltipText) => {
+        feedbackScalePage.feedbackButton()
+            .eq(buttonIndex)
+            .trigger('mouseover')
+        commonComponents.tooltipText()
+            .should('have.text', tooltipText)
+            .and('be.visible')
+            .within(() => {
+                feedbackScalePage.previewTabColorBlock()
+                    .should('be.visible');
+            });
+        feedbackScalePage.feedbackButton()
+            .eq(buttonIndex)
+            .trigger('mouseout')
+        commonComponents.tooltipText()
+            .should('not.exist')
+    },
+
+    verifyMoreInfoAccordionInCollapsedState: () => {
+        feedbackScalePage.moreInfoButton()
+            .should('have.attr', 'aria-expanded', 'false');
+    },
+
+    verifyMoreInfoAccordionInExpandedState: () => {
+        feedbackScalePage.moreInfoButton()
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    expandMoreInfoAccordion: () => {
+        feedbackScalePage.moreInfoButton()
+            .click()
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    /**
+     * @param {number} itemIndex index of the more info list of a feedback button
+     * @param {string[]} contents array of labels, tooltip and description of the more info list of a feedback button
+     * @description this function verifies the label, tooltip and description texts of the more info accordion option list for a feedback button
+     */
+    verifyMoreInfoAccordionOptionsListLabelTooltipAndDescription: (itemIndex, contentsArray) => {
+        feedbackScalePage.moreInfoOptionsList()
+            .eq(itemIndex)
+            .within(() => {
+                feedbackScalePage.moreInfoFeedbackLabel()
+                    .should('have.text', contentsArray[0]);
+                feedbackScalePage.moreInfoTooltipText()
+                    .should('have.text', contentsArray[1]);
+                feedbackScalePage.moreInfoDescriptionText()
+                    .should('have.text', contentsArray[2]);
+            });
+    },
+
+    /**
+     * @param {number} buttonIndex index of the feedback button
+     * @description this function is used to click on a feedback button
+     */
+    clickOnFeedbackButton: (buttonIndex) => {
+        feedbackScalePage.feedbackButton()
+            .eq(buttonIndex)
+            .click();
+    },
+
+    /**
+     * @param {number} buttonIndex index of the feedback button
+     * @description this function verifies the selected state of a feedback button
+     */
+    verifyFeedbackButtonSelectedState: (buttonIndex) => {
+        feedbackScalePage.feedbackButton()
+            .eq(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) => {
+        feedbackScalePage.feedbackButton()
+            .eq(buttonIndex)
+            .should('not.have.class', 'selected-button');
+    },
+
+    /**
+     * @param {number} itemIndex index of the more info list of a feedback button/star
+     * @description this function verifies the highlighted state of the more info list of a feedback button/star
+     */
+    verifyMoreInfoOptionListHighlightedState: (itemIndex) => {
+        feedbackScalePage.moreInfoOptionsList()
+            .eq(itemIndex)
+            .should('have.css', 'border', `1px solid ${css.color.activeComponentBorder}`);
+    },
+
+    /**
+     * @param {number} itemIndex index of the more info list of a feedback button/star
+     * @description this function verifies that the more info list of a feedback button/star is not in the highlighted state
+     */
+    verifyMoreInfoOptionListHighlightedStateNotExists: (itemIndex) => {
+        feedbackScalePage.moreInfoOptionsList()
+            .eq(itemIndex)
+            .should('not.have.css', 'border', `1px solid ${css.color.activeComponentBorder}`);
+    },
+
+    /**
+     * @param {number} buttonIndex index of the feedback star button
+     * @param {string} tooltipText text that appears on tooltip of the feedback button
+     * @description this function verifies the tooltip text of a feedback star button in the preview tab
+     */
+    verifyTooltipFeedbackStarButton: (buttonIndex, tooltipText) => {
+        feedbackScalePage.feedbackStarButton()
+            .eq(buttonIndex)
+            .trigger('mouseover')
+        commonComponents.tooltipText()
+            .should('have.text', tooltipText)
+            .and('be.visible')
+            .within(() => {
+                utilities.verifyElementVisibilityState(feedbackScalePage.previewTabColorBlock(), 'notExist');
+            });
+        feedbackScalePage.feedbackStarButton()
+            .eq(buttonIndex)
+            .trigger('mouseout')
+        utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'notExist');
+    },
+
+    /**
+     * @param {number} buttonIndex index of the feedback star button
+     * @description this function is used to click on a feedback star button
+     */
+    clickOnFeedbackStarButton: (buttonIndex) => {
+        feedbackScalePage.feedbackStarButton()
+            .eq(buttonIndex)
+            .click();
+    },
+
+    /**
+     * @param {number} buttonIndex index of the feedback button
+     * @description this function verifies the selected state of a feedback star button
+     */
+    verifyFeedbackStarButtonSelectedState: (buttonIndexArray, color) => {
+        buttonIndexArray.forEach((button) => {
+            feedbackScalePage.feedbackStarButton()
+                .eq(button)
+                .find('svg')
+                .should('have.css', 'fill', color);
+        });
+    },
+
+    /**
+     * @param {number} buttonIndex index of the feedback button
+     * @description this function verifies the unselected state of a feedback star button
+     */
+    verifyFeedbackStarButtonUnselectedState: (buttonIndexArray) => {
+        buttonIndexArray.forEach((button) => {
+            feedbackScalePage.feedbackStarButton()
+                .eq(button)
+                .find('svg')
+                .should('have.css', 'fill', css.color.defaultBackground);
+        });
+    },
+
+    addOption: () => {
+        feedbackScalePage.addOptionButton()
+            .click();
+    },
+
+    /**
+     * @param {number} optionAccordionIndex index of the option accordion
+     * @description this function is used to delete an option accordion
+     */
+    deleteOptionAccordion: (optionAccordionIndex) => {
+        feedbackScalePage.deleteOptionAccordionButton()
+            .eq(optionAccordionIndex)
+            .click();
+    },
+
+    /**
+     * @param {number} optionAccordionIndex index of the option accordion
+     * @description this function is used to focus in a tooltip input field of an option accordion
+     */
+    focusInTooltipInputField: (optionAccordionIndex) => {
+        feedbackScalePage.optionAccordionPanel()
+            .eq(optionAccordionIndex)
+            .within(() => {
+                feedbackScalePage.tooltipInputField()
+                    .focus();
+            });
+    },
+
+    /**
+     * @param {number} optionAccordionIndex index of the option accordion
+     * @description this function is used to focus in a description input field of an option accordion
+     */
+    focusInDescriptionInputField: (optionAccordionIndex) => {
+        feedbackScalePage.optionAccordionPanel()
+            .eq(optionAccordionIndex)
+            .within(() => {
+                feedbackScalePage.descriptionInputField()
+                    .focus();
+            });
+    },
+
+    /**
+     * @param {number} optionAccordionIndex index of the option accordion
+     * @description this function is used to add input to the tooltip input field of an option accordion
+     */
+    addInputToTooltipInputField: (optionAccordionIndex, textContent) => {
+        feedbackScalePage.optionAccordionPanel()
+            .eq(optionAccordionIndex)
+            .within(() => {
+                feedbackScalePage.tooltipInputField()
+                    .type(textContent);
+            });
+    },
+
+    /**
+     * @param {number} optionAccordionIndex index of the option accordion
+     * @description this function is used to add input to the labels input field of an option accordion
+     */
+    addInputToLabelsInputField: (optionAccordionIndex, textContent) => {
+        feedbackScalePage.optionAccordionPanel()
+            .eq(optionAccordionIndex)
+            .within(() => {
+                feedbackScalePage.labelsInputField()
+                    .type(textContent)
+                    .blur();
+            });
+    },
+
+    /**
+     * @param {number} optionAccordionIndex index of the option accordion
+     * @description this function verifies image in tooltip input field of an option accordion
+     */
+    verifyImageAndAltTextInTooltipInputField: (optionAccordionIndex) => {
+        feedbackScalePage.optionAccordionPanel()
+            .eq(optionAccordionIndex)
+            .within(() => {
+                feedbackScalePage.tooltipInputField()
+                    .find('img')
+                    .should('have.attr', 'src', constants.foxImageLink)
+                    .and('have.attr', 'alt', constants.foxImageAltText);
+            });
+    },
+
+    /**
+     * @param {number} optionAccordionIndex index of the option accordion
+     * @description this function is used to add bold text to the description input field of an option accordion
+     */
+    addInputToDescriptionInputField: (optionAccordionIndex, textContent) => {
+        feedbackScalePage.optionAccordionPanel()
+            .eq(optionAccordionIndex)
+            .within(() => {
+                feedbackScalePage.descriptionInputField()
+                    .type(textContent);
+            });
+    },
+
+    /**
+     * @param {number} optionAccordionIndex index of the option accordion
+     * @description this function is used to clear the tooltip input field of an option accordion
+     */
+    clearTooltipInputField: (optionAccordionIndex) => {
+        feedbackScalePage.optionAccordionPanel()
+            .eq(optionAccordionIndex)
+            .within(() => {
+                feedbackScalePage.tooltipInputField()
+                    .clear();
+            });
+    },
+
+    /**
+     * @param {number} optionAccordionIndex index of the option accordion
+     * @description this function is used to clear the description input field of an option accordion
+     */
+    clearDescriptionInputField: (optionAccordionIndex) => {
+        feedbackScalePage.optionAccordionPanel()
+            .eq(optionAccordionIndex)
+            .within(() => {
+                feedbackScalePage.descriptionInputField()
+                    .clear();
+            });
+    },
+
+    /**
+     * @param {number} optionAccordionIndex index of the option accordion
+     * @description this function is used to verify bold text in the description input field of an option accordion
+     */
+    verifyBoldTextInDescriptionInputField: (optionAccordionIndex, textContent) => {
+        feedbackScalePage.optionAccordionPanel()
+            .eq(optionAccordionIndex)
+            .within(() => {
+                feedbackScalePage.descriptionInputField()
+                    .find('strong')
+                    .should('exist')
+                    .should('have.text', textContent);
+            });
+    },
+
+    /**
+     * @param {number} buttonIndex index of the feedback button
+     * @description this function is used to verify an image in tooltip of a feedback button
+     */
+    verifyTooltipImageFeedbackButton: (buttonIndex) => {
+        feedbackScalePage.feedbackButton()
+            .eq(buttonIndex)
+            .trigger('mouseover');
+        commonComponents.tooltipText()
+            .and('be.visible')
+            .find('img')
+            .should('have.attr', 'src', constants.foxImageLink)
+            .and('have.attr', 'alt', constants.foxImageAltText);
+        feedbackScalePage.feedbackButton()
+            .eq(buttonIndex)
+            .trigger('mouseout')
+        commonComponents.tooltipText()
+            .should('not.exist');
+    },
+
+    /**
+     * @param {number} buttonIndex index of the feedback star button
+     * @param {string} textContent is the text that appears on the tooltip
+     * @description this function is used to verify bold text on a tooltip of a feedback star button
+     */
+    verifyTooltipBoldTextFeedbackStarButton: (buttonIndex, textContent) => {
+        feedbackScalePage.feedbackStarButton()
+            .eq(buttonIndex)
+            .trigger('mouseover');
+        commonComponents.tooltipText()
+            .and('be.visible')
+            .find('strong')
+            .should('exist')
+            .should('have.text', textContent);
+        feedbackScalePage.feedbackStarButton()
+            .eq(buttonIndex)
+            .trigger('mouseout')
+        commonComponents.tooltipText()
+            .should('not.exist');
+    },
+
+    /**
+     * @param {number} itemIndex index of the more info list item
+     * @description this function is used to verify color block in more info list item for button layout
+     */
+    verifyMoreInfoAccordionColorBlock: (itemIndex, color) => {
+        feedbackScalePage.moreInfoOptionsList()
+            .eq(itemIndex)
+            .within(() => {
+                feedbackScalePage.previewTabColorBlock()
+                    .should('have.css', 'background-color', color);
+            });
+    },
+
+    /**
+     * @param {number} itemIndex index of the more info list item
+     * @description this function is used to verify the number of stars in more info list item for star layout
+     */
+    verifyMoreInfoAccordionStarIcons: (itemIndex) => {
+        feedbackScalePage.moreInfoOptionsList()
+            .eq(itemIndex)
+            .within(() => {
+                feedbackScalePage.moreInfoStarIcon()
+                    .should('have.length', itemIndex + 1);
+            });
+    },
+
+    /**
+     * @param {number} itemIndex index of the more info list item
+     * @description this function is used to verify the label, image tooltip and bold description text in more info list item
+     */
+    verifyMoreInfoOptionListLabelTooltipAndDescriptionForImageTooltipAndBoldDescription: (itemIndex) => {
+        feedbackScalePage.moreInfoOptionsList()
+            .eq(itemIndex)
+            .within(() => {
+                feedbackScalePage.moreInfoFeedbackLabel()
+                    .should('have.text', 'Comfortable');
+                feedbackScalePage.moreInfoTooltipText()
+                    .find('img')
+                    .should('have.attr', 'src', constants.foxImageLink)
+                    .and('have.attr', 'alt', constants.foxImageAltText);
+                feedbackScalePage.moreInfoDescriptionText()
+                    .find('strong')
+                    .should('exist')
+                    .should('have.text', 'I\'m very comfortable with the learning target');
+            });
+    },
+
+    /**
+     * @param {number} itemIndex index of the more info list item
+     * @description this function is used to verify the label, bold tooltip text and image description in more info list item
+     */
+    verifyMoreInfoOptionListLabelTooltipAndDescriptionForBoldTooltipAndImageDescription: (itemIndex) => {
+        feedbackScalePage.moreInfoOptionsList()
+            .eq(itemIndex)
+            .within(() => {
+                feedbackScalePage.moreInfoFeedbackLabel()
+                    .should('have.text', '100%');
+                feedbackScalePage.moreInfoTooltipText()
+                    .find('strong')
+                    .should('exist')
+                    .should('have.text', 'Keep up the good work!');
+                feedbackScalePage.moreInfoDescriptionText()
+                    .find('img')
+                    .should('have.attr', 'src', constants.foxImageLink)
+                    .and('have.attr', 'alt', constants.foxImageAltText);
+            });
+    },
+
+    verifyDisplayAdditionalInformationCheckboxCheckedState: () => {
+        feedbackScalePage.displayAdditionalInformationCheckbox()
+            .should('be.checked');
+    },
+
+    verifyDisplayAdditionalInformationCheckboxUncheckedState: () => {
+        feedbackScalePage.displayAdditionalInformationCheckbox()
+            .should('not.be.checked');
+    },
+
+    verifyAllowStudentsToAddCommentCheckboxCheckedState: () => {
+        feedbackScalePage.allowStudentsToAddCommentCheckbox()
+            .should('be.checked');
+    },
+
+    verifyAllowStudentsToAddCommentCheckboxUncheckedState: () => {
+        feedbackScalePage.allowStudentsToAddCommentCheckbox()
+            .should('not.be.checked');
+    },
+
+    uncheckDisplayAdditionalInformationCheckbox: () => {
+        feedbackScalePage.displayAdditionalInformationCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    checkAllowStudentsToAddCommentCheckbox: () => {
+        feedbackScalePage.allowStudentsToAddCommentCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    /**
+     * @param {string} textContent text to be entered in describe your experience input field
+     * @description this function is used to add input to the describe your experience input field
+     */
+    addInputToDescribeYourExperienceInputField: (textContent) => {
+        feedbackScalePage.describeYourExperienceInputField()
+            .type(textContent, { delay: 0 })
+            .blur()
+            .focus()
+            .should('have.value', textContent)
+    },
+
+    hoverOnFeedBackButton: () => {
+        feedbackScalePage.feedbackButton().eq(0)
+            .trigger('mouseover')
+    },
+
+    hoverAwayFromFeedbackButton: () => {
+        feedbackScalePage.feedbackButton().eq(0)
+            .trigger('mouseout')
+    },
+
+    /**
+     * @param {number} buttonIndex index of the feedback button
+     * @param {string} color to be verified present on the tooltip of a feedback button in rgb format
+     */
+    verifyColorBlockOnFeedbackButtonTooltip: (buttonIndex, color) => {
+        feedbackScalePage.feedbackButton()
+            .eq(buttonIndex)
+            .trigger('mouseover')
+        commonComponents.tooltipText()
+            .and('be.visible')
+            .within(() => {
+                utilities.verifyCSS(feedbackScalePage.previewTabColorBlock(), {
+                    'background-color': color
+                });
+            });
+        feedbackScalePage.feedbackButton()
+            .eq(buttonIndex)
+            .trigger('mouseout')
+        commonComponents.tooltipText()
+            .should('not.exist')
+    },
+
+    /**
+     * @param {number} itemIndex index of the more info list item
+     * @param {string} color to be verified present in more info list item in rgb format
+     * @description this function is used to verify the color of stars in more info list item for star layout
+     */
+    verifyMoreInfoAccordionStarIconsColor: (itemIndex, color) => {
+        feedbackScalePage.moreInfoOptionsList()
+            .eq(itemIndex)
+            .within(() => {
+                utilities.verifyCSS(feedbackScalePage.moreInfoStarIcon(), {
+                    'fill': color
+                });
+            });
+    },
+}
+
+const tests = {
+    ...questionInstructionsComponent.tests,
+    ...additionalSettingsPanel.tests,
+    ...createQuestionBasePage.tests,
+    ...commonComponents.tests
+}
+
+export const feedbackScalePage = {
+    ...selectors,
+    steps,
+    tests
+}