itemengine-cypress-automation 1.0.2

package/cypress/pages/components/figOverImageCommonComponent.js

@@ -0,0 +1,924 @@
+import utilities from "../../support/helpers/utilities";
+import { commonComponents } from "./commonComponents";
+import { createQuestionBasePage } from "./createQuestionBasePage";
+import { scoringSectionBase } from "./scoringSectionBase";
+const css = Cypress.env('css');
+
+const selectors = {
+    addResponseContainerButton: () => cy.get('[class*="ResponseOnImagestyles"] .ngie-icon-with-label-btn').eq(0),
+    //Change selectors after https://redmine.zeuslearning.com/issues/518498 is fixed
+    responseContainer: () => cy.get('.react-draggable'),
+    responseContainerCloseButton: () => cy.get('.remove-button'),
+    responseContainerNumeration: () => cy.get('marker'),
+    responseContainerPointer: () => cy.get('[class*="PointerDiv"]'),
+    responseContainerChevronDownArrow: () => cy.get('.icon-chevron-down'),
+    imageHoverTextLabel: () => cy.get('[class*="Imagestyles__RowContainer"] .text-label').eq(0),
+    imageHoverTextInputField: () => cy.get('input[aria-label="Image hover text"]'),
+    imageAlternativeTextLabel: () => cy.get('[class*="Imagestyles__RowContainer"] .text-label').eq(1),
+    imageAlternativeTextInputField: () => cy.get('input[aria-label="Image alternative text"]'),
+    heightLabel: () => cy.get('[class*="AddTextResponseOnImagestyles__RowContainer"] [aria-labelledby*="Height (px)"]'),
+    heightInputField: () => cy.get('[class*="AddTextResponseOnImagestyles__RowContainer"] input[aria-label="Height (px)"]'),
+    widthLabel: () => cy.get('[class*="AddTextResponseOnImagestyles__RowContainer"] [aria-labelledby="Width (px)"]'),
+    widthInputField: () => cy.get('[class*="AddTextResponseOnImagestyles__RowContainer"] input[aria-label="Width (px)"]'),
+    editAriaLabelForResponseContainersLabel: () => cy.get('[data-ngie-testid*="edit-aria-labels-for-response"] .MuiFormControlLabel-label'),
+    editAriaLabelForResponseContainersCheckbox: () => cy.get('[data-ngie-testid*="edit-aria-labels-for-response"] input'),
+    ariaLabelsLabel: () => cy.get('[class*="OnImagestyles__LabelWrapper"]'),
+    ariaLabelsInputField: () => cy.get('[class*="AriaLabelOptionComponent"] input'),
+    ariaLabelsInputFieldNumeration: () => cy.get('.start-adornment'),
+    pleaseAddResponseTokenHelpText: () => cy.get('[class*="ClozeWithTextResponsestyles__AddResponseLabel"]'),
+    setCorrectAnswerResponseFieldLabel: () => cy.get('.cloze-with-text-form-control-wrapper .input-field-label'),
+    imageSectionImageLabel: () => cy.get('[class*="LabelImageWithDropDownstyles__LabelWrapper"]'),
+    imageSectionImage: () => cy.get('.image-container img'),
+    imagePreviewTab: () => cy.get('.edit-question-preview-wrapper .image-container img'),
+    imagePropertiesContainer: () => cy.get('[class*="AddTextResponseOnImagestyles__DimensionsContainer"]'),
+    responseNumeration: () => cy.get('.response-input-adornment'),
+    // Additional setting accordion
+    advanceSettingsforAllResponseAreasLabel: () => cy.get('.additional-settings-heading-label').eq(0),
+    placeholderTextLabel: () => cy.get('.additional-settings-container .text-label'),
+    placeholderTextInputField: () => cy.get('.additional-option-placeholder-input [aria-label="Placeholder Text"]'),
+    responseFieldHeightLabel: () => cy.get('[class*="style__DimensionsContainer"] [aria-labelledby*="Height (px)"]'),
+    responseFieldHeightInputField: () => cy.get('[class*="style__DimensionsContainer"] input[aria-label="Height (px)"]'),
+    responseFieldWidthLabel: () => cy.get('[class*="style__DimensionsContainer"] [aria-labelledby*="Width (px)"]'),
+    responseFieldWidthInputField: () => cy.get('[class*="style__DimensionsContainer"] input[aria-label="Width (px)"]'),
+    pointerLabel: () => cy.get('[id*="Pointer"][id*="dropdown-label"]'),
+    pointerDropdown: () => cy.get('[id*="Pointer"][id*="select"]'),
+    pointerDropdownListOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="Pointer-dropdown-label"] li[role="option"][aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('[aria-labelledby*="Pointer-dropdown-label"] li[role="option"]')
+        }
+    },
+    fixPositionOnImageLabel: () => cy.get('[data-ngie-testid="fix-position-on-image-checkbox"] .MuiFormControlLabel-label'),
+    fixPositionOnImageCheckbox: () => cy.get('[data-ngie-testid="fix-position-on-image-checkbox"] input'),
+    studentResponseAreaAndLayoutLabel: () => cy.get('[class*="StudentResponseLabel"]'),
+    displayAnswerNumerationToStudentsLabel: () => cy.get('[data-ngie-testid="display-answer-numeration-to-students-checkbox"] .MuiFormControlLabel-label'),
+    displayAnswerNumerationToStudentsCheckbox: () => cy.get('[data-ngie-testid="display-answer-numeration-to-students-checkbox"] input'),
+    //Response accordion
+    placeholderTextLabelResponseAccordion: () => cy.get('.dropdown-wrapper .text-label'),
+    advanceSettingForIndividualResponsesLabel: () => cy.get('.additional-settings-heading-label').eq(1),
+    responseAccordionWrapper: () => cy.get('.response-setting-container'),
+    responseAccordion: () => cy.get('.response-setting-container [role="button"]'),
+    responseAccordionLabel: () => cy.get('.response-settings-label'),
+    responseAccordionCustomLabel: () => cy.get('.custom-label-container'),
+}
+
+const steps = {
+    /**
+     * @param {number} responseContainerIndex 
+     * @returns coordinatesArray - Array of the coordinates of the response container's position
+     * @description Get coordinates of the response container's position
+     */
+    getResponseContainerPositionCoordinates: (responseContainerIndex) => {
+        const coordinatesArray = [];
+        figOverImageCommonComponent.responseContainer()
+            .eq(responseContainerIndex)
+            .invoke('attr', 'style')
+            .then(($styleAttribute) => {
+                let transformValue = $styleAttribute;
+                let position = transformValue.split('(')[1]
+                    .split(')')[0]
+                    .split(',');
+                let horizontalCoordinate = position[0].trim();
+                let verticalCoordinate = position[1].trim();
+                coordinatesArray.push(horizontalCoordinate)
+                coordinatesArray.push(verticalCoordinate)
+            });
+        return coordinatesArray;
+    },
+
+    /**
+     * @param {number} responseContainerIndex Index of the response container
+     * @param {number} responseContainerPositionCoordinates Position coordinates of the response container
+     * @description Verify the position coordinates of the response container
+     */
+    verifyResponseContainerPositionCoordinates: (responseContainerIndex, responseContainerPositionCoordinates) => {
+        figOverImageCommonComponent.responseContainer()
+            .eq(responseContainerIndex)
+            .invoke('attr', 'style')
+            .then(($styleAttribute) => {
+                let transformValue = $styleAttribute;
+                let position = transformValue.split('(')[1]
+                    .split(')')[0]
+                    .split(',');
+                let horizontalCoordinate = position[0].trim();
+                let verticalCoordinate = position[1].trim();
+                expect(horizontalCoordinate).to.be.eq(responseContainerPositionCoordinates[0]);
+                expect(verticalCoordinate).to.be.eq(responseContainerPositionCoordinates[1]);
+            });
+    },
+
+    addResponseContainer: () => {
+        figOverImageCommonComponent.addResponseContainerButton()
+            .click();
+    },
+
+    /**
+     * @param {number} responseContainerIndex Index of response container
+     * @description Verify  response container is displayed in image section
+     */
+    verifyResponseContainerIsDisplayedInImageSection: (responseContainerIndex) => {
+        utilities.verifyElementVisibilityState(figOverImageCommonComponent.responseContainer().eq(responseContainerIndex), 'visible');
+    },
+
+    /**
+     * @param {number} responseContainerIndex Index of response container
+     * @description Verify pointer of response container is displayed in image section
+     */
+    verifyResponseContainerPointerInImageSection: (responseContainerIndex) => {
+        figOverImageCommonComponent.responseContainer()
+            .eq(responseContainerIndex)
+            .within(() => {
+                utilities.verifyElementVisibilityState(figOverImageCommonComponent.responseContainerPointer(), 'visible');
+            });
+    },
+
+    /**
+     * @param {number} responseContainerIndex Index of response container
+     * @description Verify numeration of response container is displayed in image section
+     */
+    verifyResponseContainerNumerationInImageSection: (responseContainerIndex) => {
+        figOverImageCommonComponent.responseContainer()
+            .eq(responseContainerIndex)
+            .within(() => {
+                utilities.verifyInnerText(figOverImageCommonComponent.responseContainerNumeration(), `${responseContainerIndex + 1}`);
+            });
+    },
+
+    /**
+    * @param {number} responseContainerIndex Index of response container
+    * @description Verify chevron down arrow of response container is displayed in image section
+    */
+    verifyResponseContainerChevronDownArrowInImageSection: (responseContainerIndex) => {
+        figOverImageCommonComponent.responseContainer()
+            .eq(responseContainerIndex)
+            .within(() => {
+                utilities.verifyElementVisibilityState(figOverImageCommonComponent.responseContainerChevronDownArrow(), 'visible');
+            });
+    },
+
+    /**
+    * @param {number} responseContainerIndex Index of response container
+    * @description Verify close button of response container is displayed in image section
+    */
+    verifyResponseContainerCloseButtonInImageSection: (responseContainerIndex) => {
+        figOverImageCommonComponent.responseContainer()
+            .eq(responseContainerIndex)
+            .within(() => {
+                utilities.verifyElementVisibilityState(figOverImageCommonComponent.responseContainerCloseButton(), 'visible');
+            });
+    },
+
+    /**
+    * @param {number} responseContainerIndex Index of response container
+    * @description Click on close button of response container
+    */
+    clickOnResponseContainerCloseButton: (responseContainerIndex) => {
+        figOverImageCommonComponent.responseContainer()
+            .eq(responseContainerIndex)
+            .within(() => {
+                figOverImageCommonComponent.responseContainerCloseButton()
+                    .click();
+            });
+    },
+
+    /**
+     * @param {string} imageHoverText Text to be displayed as tooltip when user hovers on image
+     * @description Add input to image hover text input field
+     */
+    enterTextInImageHoverTextInputField: (imageHoverText) => {
+        figOverImageCommonComponent.imageHoverTextInputField()
+            .clear()
+            .type(imageHoverText)
+            .should('have.value', imageHoverText);
+    },
+
+    /**
+     * @param {string} imageAlternativeText Text to be displayed as alternative text for the image
+     * @description Add input to image alternative text input field
+     */
+    enterTextInImageAlternativeTextInputField: (imageAlternativeText) => {
+        figOverImageCommonComponent.imageAlternativeTextInputField()
+            .clear()
+            .type(imageAlternativeText)
+            .should('have.value', imageAlternativeText);
+    },
+
+    clearTextFromImageAlternativeTextInputField: () => {
+        figOverImageCommonComponent.imageAlternativeTextInputField()
+            .clear();
+    },
+
+    /**
+     * @param {number} imageHeight Height of the displayed image
+     * @description Add input to height input field
+     */
+    enterTextInHeightInputField: (imageHeight) => {
+        figOverImageCommonComponent.heightInputField()
+            .clear()
+            .type(`${imageHeight}`)
+            .should('have.value', imageHeight);
+    },
+
+    /**
+     * @param {number} imageWidth Width of the displayed image
+     * @description Add input to width input field
+     */
+    enterTextInWidthInputField: (imageWidth) => {
+        figOverImageCommonComponent.widthInputField()
+            .clear()
+            .type(`${imageWidth}`)
+            .should('have.value', imageWidth);
+    },
+
+    clearTextFromImageHoverTextInputField: () => {
+        figOverImageCommonComponent.imageHoverTextInputField()
+            .clear();
+    },
+
+    /**
+     * @param {number} imageWidth Width of the displayed image
+     * @description verify width input field value
+     */
+    verifyWidthInputFieldValue: (imageWidth) => {
+        figOverImageCommonComponent.widthInputField()
+            .should('have.value', imageWidth);
+    },
+
+    /**
+     * @param {number} imageHeight Height of the displayed image
+     * @description verify height input field value
+     */
+    verifyHeightInputFieldValue: (imageHeight) => {
+        figOverImageCommonComponent.heightInputField()
+            .should('have.value', imageHeight);
+    },
+
+    /**
+     * @param {number} responseFieldIndex Index of response field
+     * @description Verify set correct answer response field label
+     */
+    verifyResponseFieldLabelInSetCorrectAnswerSection: (responseFieldIndex) => {
+        utilities.verifyInnerText(figOverImageCommonComponent.setCorrectAnswerResponseFieldLabel().eq(responseFieldIndex), `Response ${responseFieldIndex + 1}`);
+        utilities.verifyElementVisibilityState(figOverImageCommonComponent.setCorrectAnswerResponseFieldLabel().eq(responseFieldIndex), 'visible');
+    },
+
+    /**
+     * Verifies the points input field in an alternate tab when the "Match from All Responses" option is checked.
+     * @param {number} count - The index of the points input field to verify.
+     * @param {string} points - The expected points value to check for.
+     */
+    verifyPointsInAlternateTabWhenMatchFromAllResponsesIsChecked: (count, points) => {
+        scoringSectionBase.pointsInputField()
+            .eq(count)
+            .should('have.value', points)
+            .and('be.disabled');
+    },
+
+    /**
+     * @param {string} altTextValue alternative text of the added image in image section
+     * @description this function verifies the alternative text of the added image in image section
+     */
+    verifyImageAltTextAttributeImageSection: (altTextValue) => {
+        figOverImageCommonComponent.imageSectionImage()
+            .should('have.attr', 'alt', altTextValue);
+    },
+
+    /**
+     * @param {string} altTextValue alternative text of the added image in preview tab
+     * @description this function verifies the alternative text of the added image in preview tab
+     */
+    verifyImageAltTextAttributePreviewTab: (altTextValue) => {
+        figOverImageCommonComponent.imagePreviewTab()
+            .should('have.attr', 'alt', altTextValue);
+    },
+
+    /**
+     * @param {number} imageWidth width of image in image section
+     * @description this function verifies the width of image in image section
+     */
+    verifyImageWidthInImageSection: (imageWidth) => {
+        figOverImageCommonComponent.imageSectionImage()
+            .should('be.visible')
+            .and('have.css', 'width', `${imageWidth}px`)
+    },
+
+    /**
+     * @param {number} imageWidth width of image in preview tab
+     * @description this function verifies the width of image in preview tab
+     */
+    verifyImageWidthInPreviewTab: (imageWidth) => {
+        figOverImageCommonComponent.imagePreviewTab()
+            .should('be.visible')
+            .and('have.css', 'width', `${imageWidth}px`)
+    },
+
+    /**
+     * @param {number} imageHeight height of image in image section
+     * @description this function verifies the height of image in image section
+     */
+    verifyImageHeightInImageSection: (imageHeight) => {
+        figOverImageCommonComponent.imageSectionImage()
+            .should('be.visible')
+            .and('have.css', 'height', `${imageHeight}px`)
+    },
+
+    /**
+     * @param {number} imageHeight height of image in preview tab
+     * @description this function verifies the height of image in preview tab
+     */
+    verifyImageHeightInPreviewTab: (imageHeight) => {
+        figOverImageCommonComponent.imagePreviewTab()
+            .should('be.visible')
+            .and('have.css', 'height', `${imageHeight}px`)
+    },
+
+    /**
+     * Verifies the value of a placeholder text input field.
+     * @param {string} value - The expected value to match the placeholder text input field.
+     */
+    verifyPlaceholderTextInputFieldValue: (value) => {
+        figOverImageCommonComponent.placeholderTextInputField()
+            .should('have.value', value)
+    },
+
+    /**
+     * Verifies the value of an input field for additional settings' height.
+     * @param {string} value - The expected value to match the input field.
+     */
+    verifyAdditionalSettingsHeightInputFieldValue: (value) => {
+        figOverImageCommonComponent.responseFieldHeightInputField()
+            .should('have.attr', 'value', value)
+    },
+
+    /**
+     * Verifies the value of an input field for additional settings' width.
+     * @param {string} value - The expected value to match the input field.
+     */
+    verifyAdditionalSettingsWidthInputFieldValue: (value) => {
+        figOverImageCommonComponent.responseFieldWidthInputField()
+            .should('have.attr', 'value', value)
+    },
+
+    verifyFixPositionOnImageCheckboxUnchecked: () => {
+        figOverImageCommonComponent.fixPositionOnImageCheckbox()
+            .should('not.be.checked');
+    },
+
+    /**
+     * Sets the placeholder text for a response field.
+     * @param {string} placeholderText - The placeholder text to set in the response field.
+     */
+    setResponseFieldPlaceholderTextGlobal: (placeholderText) => {
+        figOverImageCommonComponent.placeholderTextInputField()
+            .eq(0)
+            .type(placeholderText, { delay: 0 })
+            .should('have.value', placeholderText)
+    },
+
+    clearPlaceholderTextInputFieldGlobal: () => {
+        figOverImageCommonComponent.placeholderTextInputField()
+            .eq(0)
+            .clear();
+    },
+
+    /**
+     * Set the width of a response field in the additional settings for all response areas.
+     * @param {string} width - The width value to set for the response field.
+     */
+    setResponseFieldWidthGlobal: (width) => {
+        figOverImageCommonComponent.responseFieldWidthInputField()
+            .eq(0)
+            .clear()
+            .type(width, { delay: 0 })
+            .should('have.value', width)
+            .blur();
+    },
+
+    /**
+     * Set the height of a response field in the additional settings for all response areas.
+     * @param {string} height - The height value to set for the response field.
+     */
+    setResponseFieldHeightGlobal: (height) => {
+        figOverImageCommonComponent.responseFieldHeightInputField()
+            .eq(0)
+            .clear()
+            .type(height, { delay: 0 })
+            .should('have.value', height)
+            .blur();
+    },
+
+    /**
+     * Verify the label and input field for a placeholder text in a response accordion.
+     * @param {number} responseAccordionIndex - The index of the response accordion to verify.
+     */
+    verifyPlaceholderTextLabelAndInputFieldResponseAccordion: (responseAccordionIndex) => {
+        figOverImageCommonComponent.responseAccordionWrapper()
+            .eq(responseAccordionIndex)
+            .within(() => {
+                utilities.verifyInnerText(figOverImageCommonComponent.placeholderTextLabelResponseAccordion(), 'Placeholder text');
+                utilities.verifyElementVisibilityState(figOverImageCommonComponent.placeholderTextLabelResponseAccordion(), 'visible');
+                utilities.verifyElementVisibilityState(figOverImageCommonComponent.placeholderTextInputField(), 'visible');
+                figOverImageCommonComponent.steps.verifyPlaceholderTextInputFieldValue('');
+            });
+    },
+
+    /**
+     * Verify the label and dropdown for a pointer in a response accordion.
+     * @param {number} responseAccordionIndex - The index of the response accordion to verify.
+     */
+    verifyPointerLabelAndDropdownResponseAccordion: (responseAccordionIndex) => {
+        figOverImageCommonComponent.responseAccordionWrapper()
+            .eq(responseAccordionIndex)
+            .within(() => {
+                utilities.verifyInnerText(figOverImageCommonComponent.pointerLabel(), 'Pointer');
+                utilities.verifyElementVisibilityState(figOverImageCommonComponent.pointerLabel(), 'visible');
+                utilities.verifyElementVisibilityState(figOverImageCommonComponent.pointerDropdown(), 'visible');
+                utilities.verifyInnerText(figOverImageCommonComponent.pointerDropdown(), 'Left');
+            });
+    },
+
+    /**
+     * Verify the label and input fields for height and width in a response accordion.
+     * @param {number} responseAccordionIndex - The index of the response accordion to verify.
+     */
+    verifyHeightAndWidthLabelAndInputFieldResponseAccordion: (responseAccordionIndex) => {
+        figOverImageCommonComponent.responseAccordionWrapper()
+            .eq(responseAccordionIndex)
+            .within(() => {
+                utilities.verifyInnerText(figOverImageCommonComponent.responseFieldHeightLabel(), 'Height (px)');
+                utilities.verifyElementVisibilityState(figOverImageCommonComponent.responseFieldHeightLabel(), 'visible');
+                utilities.verifyElementVisibilityState(figOverImageCommonComponent.responseFieldHeightInputField(), 'visible');
+                figOverImageCommonComponent.steps.verifyAdditionalSettingsHeightInputFieldValue('');
+                utilities.verifyInnerText(figOverImageCommonComponent.responseFieldWidthLabel(), 'Width (px)');
+                utilities.verifyElementVisibilityState(figOverImageCommonComponent.responseFieldWidthLabel(), 'visible');
+                utilities.verifyElementVisibilityState(figOverImageCommonComponent.responseFieldWidthInputField(), 'visible');
+                figOverImageCommonComponent.steps.verifyAdditionalSettingsWidthInputFieldValue('');
+            });
+    },
+
+    /**
+     * Verify the collapsed state of a response accordion.
+     * @param {number} responseAccordionIndex - The index of the response accordion to verify.
+     */
+    verifyResponseAccordionCollapsedState: (responseAccordionIndex) => {
+        figOverImageCommonComponent.responseAccordion()
+            .eq(responseAccordionIndex)
+            .should('have.attr', 'aria-expanded', 'false')
+    },
+
+    /**
+     * Expand a response accordion.
+     * @param {number} responseAccordionIndex - The index of the response accordion to expand.
+     */
+    expandResponseAccordion: (responseAccordionIndex) => {
+        figOverImageCommonComponent.responseAccordion()
+            .eq(responseAccordionIndex)
+            .click()
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    /**
+     * Collapse a response accordion.
+     * @param {number} responseAccordionIndex - The index of the response accordion to collapse.
+     */
+    collapseResponseAccordion: (responseAccordionIndex) => {
+        figOverImageCommonComponent.responseAccordionWrapper()
+            .eq(responseAccordionIndex)
+            .click()
+            .should('have.attr', 'aria-expanded', 'false');
+    },
+
+    /**
+     * Set placeholder text in a response accordion.
+     * @param {number} responseAccordionIndex - The index of the response accordion to set placeholder text in.
+     * @param {string} textContent - The placeholder text to set.
+     */
+    setPlaceholderTextInResponseAccordion: (responseAccordionIndex, textContent) => {
+        figOverImageCommonComponent.responseAccordionWrapper()
+            .eq(responseAccordionIndex)
+            .within(() => {
+                figOverImageCommonComponent.placeholderTextInputField()
+                    .type(textContent)
+                    .should('have.value', textContent);
+            });
+    },
+
+    /**
+     * Clear placeholder text in a response accordion.
+     * @param {number} responseAccordionIndex - The index of the response accordion to clear placeholder text in.
+     */
+    clearPlaceholderTextInResponseAccordion: (responseAccordionIndex) => {
+        figOverImageCommonComponent.responseAccordionWrapper()
+            .eq(responseAccordionIndex)
+            .within(() => {
+                figOverImageCommonComponent.placeholderTextInputField()
+                    .clear();
+            });
+    },
+
+    /**
+     * Set the width value in a response accordion.
+     * @param {number} responseAccordionIndex - The index of the response accordion to set width value in.
+     * @param {string} value - The width value to set.
+     */
+    setWidthInResponseAccordion: (responseAccordionIndex, value) => {
+        figOverImageCommonComponent.responseAccordionWrapper()
+            .eq(responseAccordionIndex)
+            .within(() => {
+                figOverImageCommonComponent.responseFieldWidthInputField()
+                    .clear()
+                    .type(value)
+                    .should('have.value', value);
+            });
+    },
+
+    /**
+     * Set the height value in a response accordion.
+     * @param {number} responseAccordionIndex - The index of the response accordion to set height value in.
+     * @param {string} value - The height value to set.
+     */
+    setHeightInResponseAccordion: (responseAccordionIndex, value) => {
+        figOverImageCommonComponent.responseAccordionWrapper()
+            .eq(responseAccordionIndex)
+            .within(() => {
+                figOverImageCommonComponent.responseFieldHeightInputField()
+                    .clear()
+                    .type(value)
+                    .should('have.value', value);
+            });
+    },
+
+    verifyDisabledStateOfEditAriaLabelsForResponseContainersCheckbox: () => {
+        utilities.verifyElementVisibilityState(figOverImageCommonComponent.editAriaLabelForResponseContainersLabel(), 'visible');
+        figOverImageCommonComponent.editAriaLabelForResponseContainersCheckbox()
+            .should('be.disabled');
+    },
+
+    verifyDefaultEnabledStateOfEditAriaLabelsForResponseContainersCheckbox: () => {
+        figOverImageCommonComponent.editAriaLabelForResponseContainersCheckbox()
+            .should('be.enabled');
+        figOverImageCommonComponent.editAriaLabelForResponseContainersCheckbox()
+            .should('not.be.checked');
+    },
+
+    checkEditAriaLabelCheckbox: () => {
+        figOverImageCommonComponent.editAriaLabelForResponseContainersCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    uncheckEditAriaLabelCheckbox: () => {
+        figOverImageCommonComponent.editAriaLabelForResponseContainersCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    /**
+     * @param {number} numberOfAriaLabelInputFields Total number of edit aria label input fields
+     * @description Verify contents of edit aria label input fields
+     */
+    verifyEditAriaLabelInputFieldContents: (numberOfAriaLabelInputFields) => {
+        utilities.verifyElementVisibilityState(figOverImageCommonComponent.ariaLabelsInputField(), 'visible');
+        figOverImageCommonComponent.ariaLabelsInputField()
+            .each(($el) => {
+                cy.wrap($el)
+                    .should('have.attr', 'placeholder', 'Enter label');
+            });
+        for (let index = 0; index < numberOfAriaLabelInputFields; index++) {
+            utilities.verifyTextContent(figOverImageCommonComponent.ariaLabelsInputFieldNumeration().eq(index), `${index + 1}`);
+        }
+        utilities.verifyElementCount(figOverImageCommonComponent.ariaLabelsInputFieldNumeration(), `${numberOfAriaLabelInputFields}`);
+    },
+
+    /**
+     * @param {number} index Index of aria-label input field
+     * @param {string} responseContainerAriaLabel Text to be given as aria-label for response container/dropdown
+     * @description Enter text in edit aria-label input field
+     */
+    enterTextInEditAriaLabelInputField: (index, responseContainerAriaLabel) => {
+        figOverImageCommonComponent.ariaLabelsInputField()
+            .eq(index)
+            .clear()
+            .type(responseContainerAriaLabel)
+            .should('have.value', responseContainerAriaLabel);
+    },
+
+    /**
+     * @param {number} index Index of aria-label input field
+     * @description Clear aria-label input field
+     */
+    clearEditAriaLabelInputField: (index) => {
+        figOverImageCommonComponent.ariaLabelsInputField()
+            .eq(index)
+            .clear();
+    },
+
+    /**
+     * @param {number} index Index of response container
+     * @param {string} ariaLabel Aria-label of response container
+     * @description Verify aria-label of response container
+     */
+    verifyResponseContainerAriaLabelAttribute: (index, ariaLabel) => {
+        figOverImageCommonComponent.responseContainer()
+            .eq(index)
+            .find('.draggable-input')
+            .should('have.attr', 'aria-label', ariaLabel);
+    },
+
+    verifyResponseAccordionLabel: (responseAccordionIndex) => {
+        utilities.verifyInnerText(figOverImageCommonComponent.responseAccordionLabel().eq(responseAccordionIndex), `Response ${responseAccordionIndex + 1}`);
+        utilities.verifyElementVisibilityState(figOverImageCommonComponent.responseAccordionLabel().eq(responseFieldIndex), 'visible');
+    },
+
+    /**
+    * @param {string} fileFormat format of the uploaded file in the image section
+    * @description this function verifies the attribute of the image has the expected file format
+    */
+    verifyUploadedImageFormatInImageSection: (fileFormat) => {
+        figOverImageCommonComponent.imageSectionImage()
+            .should(($element) => {
+                const srcAttributeValue = $element.attr('src');
+                expect(srcAttributeValue).to.include(fileFormat);
+            });
+    },
+
+    /**
+    * @param {string} fileFormat format of the uploaded file in the image section
+    * @description this function verifies the attribute of the image has the expected file format
+    */
+    verifyUploadedImageFormatInPreviewTab: (fileFormat) => {
+        figOverImageCommonComponent.imagePreviewTab()
+            .should(($element) => {
+                const srcAttributeValue = $element.attr('src');
+                expect(srcAttributeValue).to.include(fileFormat);
+            });
+    },
+
+
+    verifyDisplayAnswerNumerationToStudentsCheckboxNotChecked: () => {
+        figOverImageCommonComponent.displayAnswerNumerationToStudentsCheckbox()
+            .should('not.be.checked');
+    },
+
+    checkDisplayAnswerNumerationToStudentsCheckbox: () => {
+        figOverImageCommonComponent.displayAnswerNumerationToStudentsCheckbox()
+            .click()
+            .should('be.checked');
+    }
+}
+
+const tests = {
+    verifyMaximumNumberOfTokensSnackbarCSSandA11y: () => {
+        it('CSS of maximum number of tokens snackbar', { tags: 'css' }, () => {
+            utilities.verifyCSS(commonComponents.snackbar(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+        it('Accessibility of maximum number of tokens snackbar', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.snackbar());
+        });
+    },
+
+    verifyDisabledStateOfAddResponseContainerButton: () => {
+        it('When user has added 15 response containers in the image section, then the \'Add response container\' button should be disabled', () => {
+            figOverImageCommonComponent.addResponseContainerButton()
+                .should('be.disabled');
+        });
+
+        it('CSS of disabled \'Add response container\' button', { tags: 'css' }, () => {
+            utilities.verifyCSS(figOverImageCommonComponent.addResponseContainerButton(), {
+                'color': css.color.secondaryBtnDisabled
+            })
+        });
+
+        it('Accessibility of disabled \'Add response container\' button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(figOverImageCommonComponent.addResponseContainerButton());
+        });
+    },
+
+    verifySetCorrectAnswerSectionDefaultState: () => {
+        it('When the user has not added any response containers over an image, A help text \'Please add response tokens\' should be displayed in the set correct answer section', () => {
+            utilities.verifyInnerText(figOverImageCommonComponent.pleaseAddResponseTokenHelpText(), 'Please add response tokens');
+            utilities.verifyElementVisibilityState(figOverImageCommonComponent.pleaseAddResponseTokenHelpText(), 'visible');
+        });
+
+        it(`CSS of \'Please add response tokens\' help text`, { tags: 'css' }, () => {
+            utilities.verifyCSS(figOverImageCommonComponent.pleaseAddResponseTokenHelpText(), {
+                'color': css.color.helperText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular,
+                'font-style': 'italic'
+            });
+        });
+    },
+
+    verifyCustomLabelNotVisibleOnResponseAccordion: (advancedSetting) => {
+        it(`When user has not set ${advancedSetting} in the input field then Custom label should not be displayed on the response accordion`, () => {
+            figOverImageCommonComponent.responseAccordionCustomLabel()
+                .should('not.exist');
+        });
+    },
+
+    verifyCustomLabelVisibleOnResponseAccordion: (advancedSetting) => {
+        it(`When the user sets ${advancedSetting} for a response then Custom label should be displayed on that response accordion and the other accordion should remain the same`, () => {
+            figOverImageCommonComponent.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    figOverImageCommonComponent.responseAccordionCustomLabel()
+                        .verifyInnerText('Custom')
+                        .should('be.visible');
+                });
+            figOverImageCommonComponent.responseAccordionWrapper()
+                .eq(1)
+                .within(() => {
+                    figOverImageCommonComponent.responseAccordionCustomLabel()
+                        .should('not.exist');
+                });
+        });
+    },
+
+    verifyImagePropertiesSectionContents: () => {
+        it('When the user has not added an image, the image properties section and it\'s contents should not be displayed', () => {
+            utilities.verifyElementVisibilityState(figOverImageCommonComponent.imageSectionImage(), 'notExist');
+            utilities.verifyElementVisibilityState(figOverImageCommonComponent.imagePropertiesContainer(), 'notExist');
+        });
+
+        it('When the user adds an image, \'Image hover text\' label and empty input field, \'Image alternative text\' label and empty input field should be displayed', () => {
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            figOverImageCommonComponent.steps.clickOnImagePopupOkButton();
+            utilities.verifyElementVisibilityState(figOverImageCommonComponent.imageSectionImage(), 'visible');
+            utilities.verifyElementVisibilityState(figOverImageCommonComponent.imageHoverTextLabel(), 'visible');
+            utilities.verifyElementVisibilityState(figOverImageCommonComponent.imageHoverTextInputField(), 'visible');
+            utilities.verifyElementVisibilityState(figOverImageCommonComponent.imageAlternativeTextLabel(), 'visible');
+            utilities.verifyElementVisibilityState(figOverImageCommonComponent.imageAlternativeTextInputField(), 'visible');
+        });
+
+        it('When the user has added an image, \'Height (px)\' label and input field, \'Width (px)\' label and input field with prefilled values of the image height and width should be displayed', () => {
+            utilities.verifyInnerText(figOverImageCommonComponent.heightLabel(), 'Height (px)');
+            utilities.verifyElementVisibilityState(figOverImageCommonComponent.heightLabel(), 'visible');
+            utilities.verifyElementVisibilityState(figOverImageCommonComponent.heightInputField(), 'visible');
+            utilities.verifyInnerText(figOverImageCommonComponent.widthLabel(), 'Width (px)');
+            utilities.verifyElementVisibilityState(figOverImageCommonComponent.widthLabel(), 'visible');
+            utilities.verifyElementVisibilityState(figOverImageCommonComponent.widthInputField(), 'visible');
+            figOverImageCommonComponent.steps.verifyHeightInputFieldValue(500);
+            figOverImageCommonComponent.steps.verifyWidthInputFieldValue(500);
+        });
+
+        it('CSS of image properties section', { tags: 'css' }, () => {
+            const labelCSS = {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            }
+            const inputFieldCSS = {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            }
+            utilities.verifyCSS(figOverImageCommonComponent.imageHoverTextLabel(), labelCSS);
+            utilities.verifyCSS(figOverImageCommonComponent.imageAlternativeTextLabel(), labelCSS);
+            utilities.verifyCSS(figOverImageCommonComponent.widthLabel(), labelCSS);
+            utilities.verifyCSS(figOverImageCommonComponent.heightLabel(), labelCSS);
+            utilities.verifyCSS(figOverImageCommonComponent.imageHoverTextInputField(), inputFieldCSS);
+            utilities.verifyCSS(figOverImageCommonComponent.imageAlternativeTextInputField(), inputFieldCSS);
+            utilities.verifyCSS(figOverImageCommonComponent.widthInputField(), inputFieldCSS);
+            utilities.verifyCSS(figOverImageCommonComponent.heightInputField(), inputFieldCSS);
+        });
+
+        it('Accessibility of image properties section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(figOverImageCommonComponent.imageHoverTextLabel().parents('.common-text-wrapper'));
+        });
+    },
+
+    verifyImageHoverAndAlternativeTextFunctionalityInEditTab: () => {
+        it('The user should be able to enter text in the \'Image hover text\' input field, on hovering over the image, the entered text should appear on a tooltip and on hovering away from the image, the tooltip should disappear', () => {
+            figOverImageCommonComponent.steps.enterTextInImageHoverTextInputField('Flower');
+            figOverImageCommonComponent.imageSectionImage()
+                .verifyTooltip('Flower');
+        });
+
+        it('CSS of the image tooltip', { tags: 'css' }, () => {
+            utilities.hoverOverElement(figOverImageCommonComponent.imageSectionImage());
+            utilities.verifyCSS(commonComponents.tooltipText(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.hoverAwayFromElement(figOverImageCommonComponent.imageSectionImage());
+        });
+
+        it('Accessibility of the image tooltip', { tags: 'a11y' }, () => {
+            utilities.hoverOverElement(figOverImageCommonComponent.imageSectionImage());
+            cy.checkAccessibility(commonComponents.tooltipText());
+            utilities.hoverAwayFromElement(figOverImageCommonComponent.imageSectionImage());
+        });
+
+        it('When the user clears the text from the \'Image hover text\' input field, on hovering over the image, no tooltip should appear', () => {
+            figOverImageCommonComponent.steps.clearTextFromImageHoverTextInputField();
+            utilities.hoverOverElement(figOverImageCommonComponent.imageSectionImage());
+            utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'notExist');
+        });
+
+        //Update after https://redmine.zeuslearning.com/issues/546992 is resolved
+        it('When the user has not added any alternative text in the \'Image alternative text\' input field, the \'alt\' attribute of the added image should be blank', () => {
+            figOverImageCommonComponent.steps.verifyImageAltTextAttributeImageSection('');
+        });
+
+        it('When the user enters text in the \'Image alternative text\' input field, the added text should appear as the \'alt\' attribute of the added image', () => {
+            figOverImageCommonComponent.steps.enterTextInImageAlternativeTextInputField(constants.flowerImageAltText);
+            figOverImageCommonComponent.steps.verifyImageAltTextAttributeImageSection(constants.flowerImageAltText);
+        });
+
+        it('When the user clears the text in the \'Image alternative text\' input field, the \'alt\' attribute of the added image should again appear as blank', () => {
+            figOverImageCommonComponent.steps.clearTextFromImageAlternativeTextInputField();
+            figOverImageCommonComponent.steps.verifyImageAltTextAttributeImageSection('');
+        });
+    },
+
+    verifyImageHoverAndAlternativeTextFunctionalityInPreviewTab: () => {
+        it('When the user adds text in the \'Image hover text\' input field and switches to the preview tab, on hovering over the image, the entered text should appear on a tooltip and on hovering away from the image, the tooltip should disappear', () => {
+            figOverImageCommonComponent.steps.enterTextInImageHoverTextInputField('Flower');
+            createQuestionBasePage.steps.switchToPreviewTab();
+            figOverImageCommonComponent.imagePreviewTab()
+                .verifyTooltip('Flower');
+        });
+
+        it('CSS of the image tooltip', { tags: 'css' }, () => {
+            utilities.hoverOverElement(figOverImageCommonComponent.imagePreviewTab());
+            utilities.verifyCSS(commonComponents.tooltipText(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.hoverAwayFromElement(figOverImageCommonComponent.imagePreviewTab());
+        });
+
+        it('Accessibility of the image tooltip', { tags: 'a11y' }, () => {
+            utilities.hoverOverElement(figOverImageCommonComponent.imagePreviewTab());
+            cy.checkAccessibility(commonComponents.tooltipText());
+            utilities.hoverAwayFromElement(figOverImageCommonComponent.imagePreviewTab());
+        });
+
+        it('When the user clears the text from the \'Image hover text\' input field and switches to the preview tab, on hovering over the image, no tooltip should appear', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            figOverImageCommonComponent.steps.clearTextFromImageHoverTextInputField();
+            createQuestionBasePage.steps.switchToPreviewTab();
+            utilities.hoverOverElement(figOverImageCommonComponent.imagePreviewTab());
+            utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'notExist');
+        });
+
+        it('When the user has not added any alternative text in the \'Image alternative text\' input field, the \'alt\' attribute of the added image in the preview tab should be blank', () => {
+            figOverImageCommonComponent.steps.verifyImageAltTextAttributePreviewTab('');
+        });
+
+        it('When the user enters text in the \'Image alternative text\' input field, the added text should appear as the \'alt\' attribute of the added image in the preview tab', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            figOverImageCommonComponent.steps.enterTextInImageAlternativeTextInputField(constants.flowerImageAltText);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            figOverImageCommonComponent.steps.verifyImageAltTextAttributePreviewTab(constants.flowerImageAltText);
+        });
+
+        it('When the user clears the text in the \'Image alternative text\' input field, the \'alt\' attribute of the added image should again appear as blank', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            figOverImageCommonComponent.steps.clearTextFromImageAlternativeTextInputField();
+            createQuestionBasePage.steps.switchToPreviewTab();
+            figOverImageCommonComponent.steps.verifyImageAltTextAttributePreviewTab('');
+        });
+    },
+
+    verifyImagePropertiesHeightAndWidthInputFieldInEditTab: () => {
+        it('When the user updates the value in the height input field, the height of the added image should update accordingly', () => {
+            figOverImageCommonComponent.steps.enterTextInHeightInputField(250);
+            figOverImageCommonComponent.steps.verifyImageHeightInImageSection(250);
+        });
+
+        it('When the user updates the value in the width input field, the width of the added image should update accordingly', () => {
+            figOverImageCommonComponent.steps.enterTextInWidthInputField(250);
+            figOverImageCommonComponent.steps.verifyImageWidthInImageSection(250);
+        });
+    },
+
+    verifyImagePropertiesHeightAndWidthInputFieldInPreviewTab: () => {
+        it('When the user updates the value in the height input field, the height of the added image should update accordingly', () => {
+            figOverImageCommonComponent.steps.enterTextInHeightInputField(250);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            figOverImageCommonComponent.steps.verifyImageHeightInPreviewTab(250);
+        });
+
+        it('When the user updates the value in the width input field, the width of the added image should update accordingly', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            figOverImageCommonComponent.steps.enterTextInWidthInputField(250);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            figOverImageCommonComponent.steps.verifyImageWidthInPreviewTab(250);
+        });
+    }
+}
+
+export const figOverImageCommonComponent = {
+    ...selectors,
+    steps,
+    tests
+}