itemengine-cypress-automation 1.0.2

package/cypress/pages/audioResponsePage.js

@@ -0,0 +1,264 @@
+import { createQuestionBasePage, questionInstructionsComponent, additionalSettingsPanel, commonComponents, scoringSectionBase, previewScoringAndShowCorrectAnswerComponent, maximumRecorderLengthComponent } from "../pages/components";
+import utilities from "../support/helpers/utilities";
+import { dialogBoxBase } from "./dialogBoxBase";
+
+const selectors = {
+    ...additionalSettingsPanel,
+    ...createQuestionBasePage,
+    ...commonComponents,
+    ...dialogBoxBase,
+    ...scoringSectionBase,
+    ...questionInstructionsComponent,
+    audioRecorderStyleLabel: () => cy.get('#Audio-Recorder-Style-dropdown-label'),
+    audioRecorderStyleDropdown: () => cy.get('#Audio-Recorder-Style-select'),
+    audioRecorderStyleListOptions: (optionIndex) => cy.get('[aria-labelledby="Audio-Recorder-Style-dropdown-label Audio-Recorder-Style-placeholder"] li[role="option"]').eq(optionIndex),
+    audioRecorderStyleList: () => cy.get('.dropdown-list'),
+    stopRecordingIfSilenceIsDetectedLabel: () => cy.get('.stop-recording-length-label'),
+    stopRecordingIfSilenceIsDetectedInputFieldSecsSuffix: () => cy.get('.audio-stop-recording-suffix'),
+    stopRecordingIfSilenceIsDetectedInputField: () => cy.get('.stop-recording-on-silence-time-input-field input'),
+    recorderAndPlaybackControlsOptionButtonIcon: () => cy.get('.ngie-toggle-button-icon'),
+    //Customize recorder and playback controls (for student player)
+    customizeRecorderAndPlaybackControlsAccordionChevronIcon: () => cy.get('.customize-expand-icon'),
+    customizeRecorderAndPlaybackControlsAccordionLabel: () => cy.get('.customize_recorder_label'),
+    customizeRecorderAndPlaybackControlsAccordion: () => cy.get('.customize-accordion [role="button"]'),
+    customizeRecorderAndPlaybackControlsSection: () => cy.get('.customize-accordion'),
+    recorderAndPlaybackControlsOptionButtonLabel: () => cy.get('.ngie-toggle-button-label'),
+    //Controls for recording response
+    controlsForRecordingResponseLabel: () => cy.get('.audio-response-selection-panel-details .ngie-toggle-button-title').eq(0),
+    startRecordingOptionButton: () => cy.get('[data-ngie-testid="start-recording-toggle-button"]'),
+    pauseRecordingOptionButton: () => cy.get('[data-ngie-testid="pause-recording-toggle-button"]'),
+    stopRecordingOptionButton: () => cy.get('[data-ngie-testid="stop-recording-toggle-button"]'),
+    recordingCueOptionButton: () => cy.get('[data-ngie-testid="recording-cue-toggle-button"]'),
+    recordingOverlayOptionButton: () => cy.get('[value="recorderOverlay"]'),
+    //Controls for response playback
+    controlsForResponsePlaybackLabel: () => cy.get('.audio-response-selection-panel-details .ngie-toggle-button-title').eq(1),
+    playOptionButton: () => cy.get('[data-ngie-testid="play-toggle-button"]'),
+    pauseOptionButton: () => cy.get('[data-ngie-testid="pause-toggle-button"]'),
+    seekOptionButton: () => cy.get('[data-ngie-testid="seek-toggle-button"]'),
+    volumeControlOptionButton: () => cy.get('[data-ngie-testid="volume-control-toggle-button"]'),
+    playbackOverlayOptionButton: () => cy.get('[value="playbackOverlay"]'),
+    //Advanced recorder options
+    playerSettingsLabel: () => cy.get('.accordion_label'),
+    advancedRecorderOptionsLabel: () => cy.get('.advanced-recorder-settings .ngie-toggle-button-title'),
+    advancedRecorderOptionsSection: () => cy.get('[class*="AdditionalOptionstyles__AudioResponseButtonWrapper"]'),
+    timerOptionButton: () => cy.get('[data-ngie-testid="timer-toggle-button"]'),
+    progressBarOptionButton: () => cy.get('[data-ngie-testid="progress-bar-toggle-button"]'),
+    volumeMeterOptionButton: () => cy.get('[data-ngie-testid="volume-meter-toggle-button"]'),
+    waveformOptionButton: () => cy.get('[data-ngie-testid="waveform-toggle-button"]'),
+    waveformCursor: () => cy.get('.audio-wave-form-cursor-div'),
+    //Maximum width for audio recorder
+    maximumWidthForAudioRecorderLabel: () => cy.get('#max-width-audio-label'),
+    maximumWidthForAudioRecorderInputField: () => cy.get('.max-width-audio-recorder-input-field input'),
+    //Allow teachers to download student responses
+    allowTeachersToDownloadStudentResponsesCheckboxLabel: () => cy.get('[data-ngie-testid="allow-teachers-to-download-student-response-checkbox"] .MuiFormControlLabel-label'),
+    allowTeachersToDownloadStudentResponsesCheckbox: () => cy.get('[data-ngie-testid="allow-teachers-to-download-student-response-checkbox"] input'),
+    //Preview tab
+    previewPlaybackProgressBar: () => cy.get('.audio-playback-slider-wrapper'),//same for minimal
+    previewPlaybackSlider: () => cy.get('input[aria-label="Slider bar"]'),//same for minimal
+    previewPlaybackWaveform: () => cy.get('.audio-wave-form'),//same for minimal
+    previewMaxRecordTime: () => cy.get('.standard-record-timer'),
+    previewVolumeControlButton: () => cy.get('.audio-player-icon'),//same for minimal
+    previewMicIcon: () => cy.get('.audio-response-icon'),
+    previewVolumeMeter: () => cy.get('.volume-meter'),
+    previewRecordProgressBar: () => cy.get('.audio-progress-bar-wrapper'),
+    previewVolumeControlSlider: () => cy.get('[class*="VolumeControlstyle__StyledSlider"]'),
+    previewWaveformTotalWidth: () => cy.get('.audio-wave-form wave wave canvas'),
+    previewWaveformCurrentPositionWidth: () => cy.get('.audio-wave-form wave wave'),
+    previewMicGlowAnimation: () => cy.get('.standard-audio-recorder-inprogress'),
+    previewMutedVolumeControlIcon: () => cy.get('.audio-mute-icon-wr'),
+    previewUnmutedVolumeControlIcon: () => cy.get('.audio-volume-icon-wr'),
+    previewPlayPlaybackButton: () => cy.get('.standard-recorder-play-pause-btn[aria-label="Play"]'),//same for minimal
+    previewPausePlaybackButton: () => cy.get('.standard-recorder-play-pause-btn[aria-label="Pause"]'),//same for minimal
+    //standard style
+    standardPreviewStartRecordingButton: () => cy.get('.standardRecorderStart-btn'),
+    standardPreviewStopRecordingButton: () => cy.get('.standardRecorderStop-btn'),
+    standardPreviewPauseRecordingButton: () => cy.get('.standardRecorderPause-btn'),
+    standardPreviewPlayerHelpText: () => cy.get('.standard-recorder-player-text-wrapper'),
+    standardPreviewRecorderHelpText: () => cy.get('.standard-click-record-to-begin'),
+    standardPreviewRecordTime: () => cy.get('.standard-record-timer-wrapper'),
+    standardPreviewResumeRecordingButton: () => cy.get('.standardRecorderResume-btn'),
+    standardPreviewRetakeButton: () => cy.get('.standard-recorder-retake-btn'),
+    standardPreviewDisabledPlayButton: () => cy.get('.standard-recorder-play-btn'),
+    standardPreviewRecordingCompletedProgressBar: () => cy.get('.standard-playback-slider-wrapper'),
+    standardPreviewHelpTextOutsideContainer: () => cy.get('.standard-preview-help-text'),
+    standardPreviewRecorderWrapper: () => cy.get('.standard-recorder-wrapper'),
+    standardPreviewPlaybackWrapper: () => cy.get('.standard-audio-playback-wrapper'),
+    //minimal style
+    minimalPreviewRecordButton: () => cy.get('.record-button[type="button"]'),
+    minimalPreviewRetakeButton: () => cy.get('.retake-button[type="button"]'),
+    minimalPreviewStopRecordingButton: () => cy.get('.stop-button[type="button"]'),
+    minimalPreviewPlaybackButton: () => cy.get('.playback-button[type="button"]'),
+    minimalPreviewPauseRecordingButton: () => cy.get('.minimal-recording-pause-btn'),
+    minimalPreviewStopPlaybackButton: () => cy.get('.playback-stop-button[type="button"]'),
+    minimalPreviewRecorderFlyoutHelpText: () => cy.get('.minimal-recording-text'),
+    minimalPreviewRecorderHelpText: () => cy.get('.minimal-record-helper-text-wrapper'),
+    minimalPreviewRecordingOverlay: () => cy.get('.recorder-flyout-wrapper'),
+    minimalPreviewOverlayArrow: () => cy.get('.flyout-arrow'),
+    minimalPreviewPlaybackOverlay: () => cy.get('.minimal-audio-playback-wrapper'),
+    minimalPreviewResumeRecordingButton: () => cy.get('.minimal-recording-resume-btn'),
+    minimalPreviewRecordingTimer: () => cy.get('.minimal-recording-timer'),
+    minimalPreviewPlaybackTimer: () => cy.get('.minimal-playback-timer'),
+    minimalPreviewPlaybackFlyoutHelpText: () => cy.get('.minimal-playback-text'),
+    minimalPreviewRecorderWrapper: () => cy.get('.minimal-recorder-wrapper'),
+    //Retake dialogue box
+    confirmRetakeButton: () => cy.get('.action-btn-wrapper button').eq(1),
+    cancelRetakeButton: () => cy.get('.action-btn-wrapper button').eq(0),
+    retakePopupContent: () => cy.get('.retake-popup-content')
+}
+
+const steps = {
+    ...createQuestionBasePage.steps,
+    ...questionInstructionsComponent.steps,
+    ...additionalSettingsPanel.steps,
+    ...scoringSectionBase.steps,
+    ...questionInstructionsComponent.steps,
+    ...maximumRecorderLengthComponent.steps,
+    switchToMinimalRecorderStyle: () => {
+        audioResponsePage.audioRecorderStyleDropdown()
+            .click();
+        audioResponsePage.audioRecorderStyleListOptions(1)
+            .click();
+    },
+
+    expandCustomizeRecorderAndPlaybackControlsAccordion: () => {
+        audioResponsePage.customizeRecorderAndPlaybackControlsAccordion()
+            .click()
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    collapseCustomizeRecorderAndPlaybackControlsAccordion: () => {
+        audioResponsePage.customizeRecorderAndPlaybackControlsAccordion()
+            .click()
+            .should('have.attr', 'aria-expanded', 'false');
+    },
+
+    setStopRecordingIfSilenceIsDetectedAfter: (length) => {
+        audioResponsePage.stopRecordingIfSilenceIsDetectedInputField()
+            .clear()
+            .type(length)
+            .blur();
+    },
+
+    startRecordingStandardPreview: () => {
+        audioResponsePage.standardPreviewStartRecordingButton()
+            .click();
+    },
+
+    waitForRecordingToStartStandardPreview: () => {
+        audioResponsePage.previewMaxRecordTime()
+            .should('contain', '00:01 /')
+    },
+
+    pauseRecordingStandardPreview: () => {
+        audioResponsePage.standardPreviewPauseRecordingButton()
+            .click();
+    },
+
+    /**
+     * Verifies the recorded audio preview time against the expected time.
+     * @param {string} time - The expected preview time to verify.
+     * @throws {Error} Throws an error if the preview time does not match the expected time.
+     */
+    verifyRecordingTimeStandardPreview: (time) => {
+        audioResponsePage.previewMaxRecordTime()
+            .should('have.text', time)
+    },
+
+    resumeRecordingStandardPreview: () => {
+        audioResponsePage.standardPreviewResumeRecordingButton()
+            .click();
+    },
+
+    /**
+     * Verifies the recording status against the expected status for the standard preview recorder.
+     * @param {string} recordingStatus - The expected recording status to verify.
+     * @throws {Error} Throws an error if the recording status does not match the expected status.
+     */
+    verifyRecordingStatusStandardPreview: (recordingStatus) => {
+        utilities.verifyInnerText(audioResponsePage.standardPreviewRecorderHelpText(), recordingStatus);
+        utilities.verifyElementVisibilityState(audioResponsePage.standardPreviewRecorderHelpText(), 'visible');
+    },
+
+    verifyVolumeMeterInDb: (valueInDb) => {
+        audioResponsePage.previewVolumeMeter()
+            .should('have.text', valueInDb);
+    },
+
+    waitForRecordingToStartMinimalPreview: () => {
+        audioResponsePage.minimalPreviewRecordingTimer()
+            .should('contain', '00:01 /')
+    },
+
+    stopRecordingStandardPreview: () => {
+        audioResponsePage.standardPreviewStopRecordingButton()
+            .click();
+    },
+
+    /**
+     * Records and saves audio during the standard preview recording process.
+     * @param {number} time - The duration (in milliseconds) to record audio before saving.
+     * @throws {Error} Throws an error if there is an issue during the recording and saving process.
+     */
+    recordAndSaveAudioStandardPreview: (time) => {
+        audioResponsePage.steps.startRecordingStandardPreview();
+        audioResponsePage.steps.waitForRecordingToStartStandardPreview();
+        audioResponsePage.steps.addWaitToRecordAudio(time - 1000);
+        audioResponsePage.steps.stopRecordingStandardPreview();
+    },
+
+    startRecordingMinimalPreview: () => {
+        audioResponsePage.minimalPreviewRecordButton()
+            .click();
+    },
+
+    stopRecordingMinimalPreview: () => {
+        audioResponsePage.minimalPreviewStopRecordingButton()
+            .click();
+    },
+
+    waitForPlaybackToBeginStandardPreview: () => {
+        audioResponsePage.standardPreviewRecordTime()
+            .find('.standard-recorder-time-wrapper')
+            .should('have.text', '00:01')
+    },
+
+    waitForPlaybackToBeginMinimalPreview: () => {
+        audioResponsePage.minimalPreviewPlaybackTimer()
+            .find('[class*="MinimalAudioPlayerstyles__TimeWrapper"]')
+            .should('have.text', '00:01')
+    },
+
+    /**
+     * Adds a wait period to pause test execution, typically used to wait for audio playback to complete.
+     * @param {number} time - The duration (in milliseconds) to wait.
+     * @returns {void}
+     */
+    addWaitForPlayback: (time) => {
+        cy.wait(time)
+    },
+
+    /**
+     * Adds a wait period to pause test execution, typically used to simulate recording audio for a specified duration.
+     * @param {number} time - The duration (in milliseconds) to wait to simulate audio recording.
+     * @returns {void}
+     */
+    addWaitToRecordAudio: (time) => {
+        cy.wait(time)
+    }
+}
+
+const tests = {
+    ...createQuestionBasePage.tests,
+    ...questionInstructionsComponent.tests,
+    ...additionalSettingsPanel.tests,
+    ...scoringSectionBase.tests,
+    ...questionInstructionsComponent.tests,
+    ...previewScoringAndShowCorrectAnswerComponent.tests,
+    ...maximumRecorderLengthComponent.tests
+}
+
+export const audioResponsePage = {
+    ...selectors,
+    tests,
+    steps
+}

package/cypress/pages/components/additionalSettingsPanel.js

@@ -0,0 +1,174 @@
+import { commonComponents } from "./commonComponents";
+const css = Cypress.env('css');
+
+const selectors = {
+    //Comment: added .first() because in fill in the gap questions, multiple accordions are created inside additional settings panel according to number of responses
+    additionalSettingsPanel: () => cy.get('.additional-settings-container .MuiAccordionSummary-root').eq(0),
+    additionalSettingsRegion: () => cy.get('.additional-settings-container [role="region"]'),
+    additionalSettingsDetailsLabel: () => cy.get('.additional-settings-heading-label').last(),
+    additionalSettingsTeacherGuidelinesLabel: () => cy.get('.additional-settings-detail-wrapper .additional-settings-label').eq(0),
+    additionalSettingsSampleAnswerLabel: () => cy.get('.additional-settings-detail-wrapper .additional-settings-label').eq(1),
+    additionalSettingsAcknowledgementsLabel: () => cy.get('.additional-settings-detail-wrapper .additional-settings-label').eq(2),
+    additionalSettingsTeacherGuidelinesInputField: () => cy.get('[title="Teacher Scoring Guidelines"]'),
+    additionalSettingsSampleAnswerInputField: () => cy.get('[title="Sample Answer"]'),
+    additionalSettingsAcknowledgementsInputField: () => cy.get('[title="Acknowledgements"]'),
+    //Font-size dropdown
+    fontSizeLabel: () => cy.get('#Font-Size-dropdown-label'),
+    fontSizeDropdown: () => cy.get('#Font-Size-select'),
+    fontSizeListOptions: (optionIndex) => cy.get('[aria-labelledby="Font-Size-dropdown-label Font-Size-placeholder"] li[role="option"]').eq(optionIndex)
+}
+
+const steps = {
+    expandAdditonalSettings: () => {
+        additionalSettingsPanel.additionalSettingsPanel()
+            .click()
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    //V3 - Need to be updated in all files
+    selectFontSizeOptionFromFontSizeDropdown: (dropdownOptionIndex) => {
+        additionalSettingsPanel.fontSizeDropdown()
+            .click();
+        additionalSettingsPanel.fontSizeListOptions(dropdownOptionIndex)
+            .click();
+    }
+}
+
+const tests = {
+    verifyDetailsSection: () => {
+        it('CSS of \'Details\' section', { tags: 'css' }, () => {
+            additionalSettingsPanel.additionalSettingsDetailsLabel()
+                .verifyCSS(css.color.sectionHeading, css.fontSize.default, css.fontWeight.semibold);
+            additionalSettingsPanel.additionalSettingsTeacherGuidelinesLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            additionalSettingsPanel.additionalSettingsSampleAnswerLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            additionalSettingsPanel.additionalSettingsAcknowledgementsLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+        });
+
+        //Note: a11y is covered for the entire additional settings section
+
+        it('\'Details\' label should be displayed', () => {
+            additionalSettingsPanel.additionalSettingsDetailsLabel()
+                .should('have.text', 'Details');
+        });
+
+        it('\'Teacher scoring guidelines\' label and input field should be displayed and user should be able to enter \'Teacher scoring guidelines\'', () => {
+            additionalSettingsPanel.additionalSettingsTeacherGuidelinesLabel()
+                .verifyInnerText('Teacher scoring guidelines');
+            additionalSettingsPanel.additionalSettingsTeacherGuidelinesInputField()
+                .type('Teacher scoring guidelines')
+                .should('have.text', 'Teacher scoring guidelines');
+        });
+
+        it('\'Sample Answer\' label and input field should be displayed and user should be able to enter \'Sample Answer\'', () => {
+            additionalSettingsPanel.additionalSettingsSampleAnswerLabel()
+                .verifyInnerText('Sample answer');
+            additionalSettingsPanel.additionalSettingsSampleAnswerInputField()
+                .type('Sample Answer')
+                .should('have.text', 'Sample Answer');
+        });
+
+        it('\'Acknowledgements\' label and input field should be displayed and user should be able to enter \'Acknowledgements\'', () => {
+            additionalSettingsPanel.additionalSettingsAcknowledgementsLabel()
+                .should('have.text', 'Acknowledgements');
+            additionalSettingsPanel.additionalSettingsAcknowledgementsInputField()
+                .type('Acknowledgements')
+                .should('have.text', 'Acknowledgements');
+        });
+
+        it('CSS of added text in input field of the Details Section', { tags: 'css' }, () => {
+            additionalSettingsPanel.additionalSettingsTeacherGuidelinesInputField()
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+            additionalSettingsPanel.additionalSettingsSampleAnswerInputField()
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+            additionalSettingsPanel.additionalSettingsAcknowledgementsInputField()
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+        });
+    },
+
+    verifyAdditonalSettingsAccordionProperties: () => {
+        it('CSS of \'Additonal Settings\' accordion', { tags: 'css' }, () => {
+            additionalSettingsPanel.additionalSettingsPanel()
+                .find('.additional-settings')
+                .verifyCSS(css.color.accordionLabel, css.fontSize.default, css.fontWeight.bold);
+            additionalSettingsPanel.additionalSettingsPanel()
+                .find('svg')
+                .should('have.css', 'fill', css.color.activeButtons);
+        });
+
+        it('Accessibility of \'Additional Settings\' accordion', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(additionalSettingsPanel.additionalSettingsPanel().parents('.additional-settings-container'));
+        });
+
+        it('By default \'Additional Settings\' accordion should be collapsed and by clicking on the \'Additional Settings\' accordion, user should be able to expand the accordion', () => {
+            additionalSettingsPanel.additionalSettingsPanel()
+                .should('have.attr', 'aria-expanded', 'false');
+            additionalSettingsPanel.steps.expandAdditonalSettings();
+        });
+    },
+
+    verifyFontSizeSectionContents: () => {
+        const fontsizes = ['Default', 'Small', 'Normal', 'Large', 'Extra large', 'Huge'];
+
+        it('CSS of \'Font Size\' dropdown', { tags: 'css' }, () => {
+            additionalSettingsPanel.fontSizeLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            additionalSettingsPanel.fontSizeDropdown()
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        // Note: a11y is covered for the entire additional settings section
+
+        it('\'Font Size\' label and dropdown should be displayed and in \'Font Size\' dropdown \'Default\' option should be selected by default', () => {
+            additionalSettingsPanel.fontSizeLabel()
+                .verifyInnerText('Font size');
+            additionalSettingsPanel.fontSizeDropdown()
+                .verifyInnerText('Default');
+        });
+
+        it('Clicking on Font Size dropdown should open a list of 6 options - Default, Small, Normal, Large, Extra large, Huge', () => {
+            additionalSettingsPanel.fontSizeDropdown()
+                .click();
+            additionalSettingsPanel.fontSizeListOptions(0)
+                .should('be.visible');
+            fontsizes.forEach((index, count) => {
+                additionalSettingsPanel.fontSizeListOptions(count)
+                    .verifyInnerText(index);
+            });
+            cy.get('body')
+                .click();
+        });
+
+        it('CSS of Font size dropdown in Active state', { tags: 'css' }, () => {
+            cy.log('Pre step: Clicking on Font size dropdown')
+            additionalSettingsPanel.fontSizeDropdown()
+                .click();
+            additionalSettingsPanel.fontSizeListOptions(0)
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
+                .should('have.css', 'background-color', css.color.liTextSelectedBg);
+            additionalSettingsPanel.fontSizeListOptions(1)
+                .should('have.css', 'background-color', css.color.transparent);
+            cy.log('Post step: Closing the Font size dropdown')
+            cy.get('body')
+                .click();
+        });
+
+        it('Accessibility of Font size dropdown in active state', { tags: 'a11y' }, () => {
+            cy.log('Pre step: Clicking on Font size dropdown')
+            additionalSettingsPanel.fontSizeDropdown()
+                .click();
+            cy.checkAccessibility(commonComponents.dropdownList());
+            cy.log('Post step: Closing the Font size dropdown')
+            cy.get('body')
+                .click();
+        });
+    }
+}
+
+export const additionalSettingsPanel = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/components/answerNumerationComponent.js

@@ -0,0 +1,109 @@
+import utilities from "../../support/helpers/utilities";
+import { commonComponents } from "./commonComponents";
+const css = Cypress.env('css');
+
+const selectors = {
+    answerNumerationLabel: () => cy.get('#Answer-numeration-only-while-grading--dropdown-label'),
+    answerNumerationDropdown: () => cy.get('#Answer-numeration-only-while-grading--select'),
+    answerNumerationDropdownListOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="Answer-numeration-only-while-grading--dropdown-label"] li[role="option"][aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('[aria-labelledby*="Answer-numeration-only-while-grading--dropdown-label"] li[role="option"]')
+        }
+    },
+}
+
+const steps = {
+
+    expandAnswerNumerationDropdown: () => {
+        answerNumerationComponent.answerNumerationDropdown()
+            .click();
+        answerNumerationComponent.answerNumerationDropdownListOptions()
+            .eq(0)
+            .should('be.visible');
+    },
+
+    /**
+     * @param {string} dropdownOption string of the dropdown option to be selected
+     */
+    selectAnswerNumerationDropdownOption: (dropdownOption) => {
+        steps.expandAnswerNumerationDropdown()
+        answerNumerationComponent.answerNumerationDropdownListOptions()
+            .contains(dropdownOption)
+            .click();
+        utilities.verifyInnerText(answerNumerationComponent.answerNumerationDropdown(), `${dropdownOption}`);
+    },
+
+    /**
+     * @param {*} dropdownOptionsArray array of answer numeration dropdown options 
+     * @description This function is used to verify the answer numeration dropdown options 
+     */
+    verifyAnswerNumerationDropdownOptions: (dropdownOptionsArray) => {
+        answerNumerationComponent.answerNumerationDropdown()
+            .each(($el, index) => {
+                cy.wrap($el)
+                    .should('have.text', dropdownOptionsArray[index])
+            });
+    }
+}
+
+const tests = {
+    verifyAnswerNumerationContents: () => {
+        const answerNumerationDropdownOptions = ['Numerical', 'Uppercase alphabet', 'Lowercase alphabet'];
+        it(`\'Answer numeration (only while grading)\' label and dropdown should be displayed and by default, ${answerNumerationDropdownOptions[0]} option should be selected in the dropdown`, () => {
+            utilities.verifyInnerText(answerNumerationComponent.answerNumerationLabel(), 'Answer numeration (only while grading)');
+            utilities.verifyElementVisibilityState(answerNumerationComponent.answerNumerationLabel(), 'visible');
+            utilities.verifyInnerText(answerNumerationComponent.answerNumerationDropdown(), `${answerNumerationDropdownOptions[0]}`);
+        });
+
+        it('CSS of Answer Numeration section', { tags: 'css' }, () => {
+            answerNumerationComponent.answerNumerationLabel()
+            utilities.verifyCSS(answerNumerationComponent.answerNumerationLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(answerNumerationComponent.answerNumerationDropdown(), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it(`When user clicks on the Answer Numeration dropdown a list of options - ${answerNumerationDropdownOptions} should be displayed`, () => {
+            answerNumerationComponent.steps.expandAnswerNumerationDropdown();
+            answerNumerationComponent.steps.verifyAnswerNumerationDropdownOptions(answerNumerationDropdownOptions);
+        });
+
+        it('CSS of Answer Numeration dropdown in active state', { tags: 'css' }, () => {
+            utilities.verifyCSS(answerNumerationComponent.answerNumerationDropdownListOptions().eq(0), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            });
+            utilities.verifyCSS(answerNumerationComponent.answerNumerationDropdownListOptions().eq(1), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessbility of Answer Numeration dropdown in active state', { tags: 'a11y' }, () => {
+            it('Accessbility of Option style dropdown in active state', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(commonComponents.dropdownList());
+            });
+            cy.log('Closing the answer numeration dropdown')
+            cy.get('body')
+                .click();
+            utilities.verifyElementVisibilityState(answerNumerationComponent.answerNumerationDropdownListOptions(), 'notExist');
+        });
+    }
+}
+export const answerNumerationComponent = {
+    ...selectors,
+    steps,
+    tests
+}