itemengine-cypress-automation 1.0.105 → 1.0.106

package/cypress/pages/audioResponsePage.js

@@ -1,105 +1,62 @@
-import { createQuestionBasePage, questionInstructionsComponent, additionalSettingsPanel, commonComponents, scoringSectionBase, previewScoringAndShowCorrectAnswerComponent, maximumRecorderLengthComponent } from "../pages/components";
 import utilities from "../support/helpers/utilities";
+import { createQuestionBasePage, questionInstructionsComponent, scoringSectionBaseEditTab, maximumRecorderLengthComponent, commonComponents, playbackControlsBaseComponent } from "./components"
 import { dialogBoxBase } from "./dialogBoxBase";
+const css = Cypress.env('css');
 
 const selectors = {
-    ...additionalSettingsPanel,
     ...createQuestionBasePage,
     ...commonComponents,
-    ...dialogBoxBase,
-    ...scoringSectionBase,
+    ...scoringSectionBaseEditTab,
     ...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-accordion [class*="expandIconWrapper"]'),
-    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('.customize-accordion .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('.customize-accordion .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
+    ...maximumRecorderLengthComponent,
+    ...playbackControlsBaseComponent,
+    recordedResponseHelpText: () => cy.get('[class*="preview-help-text"]'),
+    playbackWaveform: () => cy.get('.audio-wave-form'),
     //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'),
+    standardPreviewStartRecordingButton: () => cy.get('.standard-audio-recorder-mic [role="button"]'),
+    standardPreviewStopRecordingButton: () => cy.get('.standard-recorder-stop-btn'),
+    standardPreviewPauseRecordingButton: () => cy.get('.standard-recorder-pause-btn'),
     standardPreviewRecorderHelpText: () => cy.get('.standard-click-record-to-begin'),
-    standardPreviewRecordTime: () => cy.get('.standard-record-timer-wrapper'),
-    standardPreviewResumeRecordingButton: () => cy.get('.standardRecorderResume-btn'),
+    standardPreviewRecordTime: () => cy.get('.standard-record-timer'),
+    standardPreviewResumeRecordingButton: () => cy.get('.standard-recorder-resume-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'),
+    standardPreviewPlaybackTime: () => cy.get('.standard-record-timer-wrapper'),
+    allowMicrophoneAccessHelpText: () => cy.get('.microphone-access .microphone-label'),
+    microphoneIcon: () => cy.get('.microphone-access svg'),
+    startRecordingCountDown: () => cy.get('.count-down-number'),
+    recordingStatusText: () => cy.get('.indicator-label'),
+    recordingStatusIcon: () => cy.get('.red-circle'),
+    previewMaxRecordTime: () => cy.get('.standard-record-timer'),
+    savingStatusText: () => cy.get('.uploading-status .indicator-label'),
+    hourGlassIcon: () => cy.get('.saving-icon'),
+    previewVolumeMeter: () => cy.get('.volume-meter'),
+    playbackProgressBar: () => cy.get('.audio-playback-slider-wrapper'),
+    previewPlaybackSlider: () => cy.get('input[aria-label="Slider bar"]'),
+    previewPausePlaybackButton: () => cy.get('.standard-recorder-play-pause-btn[aria-label="Pause"]'),
+    downloadAudioButton: () => cy.get('.download-btn'),
+    micGlowAnimation: () => cy.get('.blur-wrapper'),
+    recordingMicIcon: () => cy.get('[data-name="Icon awesome-microphone"]'),
+    pauseIcon: () => cy.get('.pause-icon-block'),
+    waveformCursor: () => cy.get('.audio-wave-form-cursor-div'),
+    standardRecorderStyleButton: () => cy.get('[data-ngie-testid="standard-toggle-button"]'),
+    barRecorderStyleButton: () => cy.get('[data-ngie-testid="bar-toggle-button"]'),
+    minimalRecorderStyleButton: () => cy.get('[data-ngie-testid="minimal-toggle-button"]'),
     //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'),
+    minimalPreviewRecordButton: () => cy.get('.recorder-buttons-wrapper .record-button'),
+    minimalPreviewPauseRecordingButton: () => cy.get('.recorder-buttons-wrapper .pause-button'),
+    minimalPreviewStopRecordingButton: () => cy.get('.recorder-buttons-wrapper .stop-button'),
+    minimalPreviewResumeRecordingButton: () => cy.get('.recorder-buttons-wrapper .record-button'),
+    minimalPreviewRetakeButton: () => cy.get('.play-back-btn-wrapper .record-button'),
+    minimalPreviewPlayPlaybackButton: () => cy.get('.play-back-btn-wrapper .play-back-button'),
+    minimalPreviewPausePlaybackButton: () => cy.get('.play-back-btn-wrapper .play-back-button'),
+    minimalPreviewRecordingHelpText: () => 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'),
+    minimalPreviewVolumeMeter: () => cy.get('.audio-volume-meter-wrapper'),
+    minimalPreviewPlaybackPlayButton: () => cy.get('.play-back-button'),
+    minimalPreviewPlaybackTime: () => cy.get('.minimal-playback-timer'),
     //Retake dialogue box
     confirmRetakeButton: () => cy.get('.action-btn-wrapper button').eq(1),
     cancelRetakeButton: () => cy.get('.action-btn-wrapper button').eq(0),
@@ -109,91 +66,83 @@ const selectors = {
 const steps = {
     ...createQuestionBasePage.steps,
     ...questionInstructionsComponent.steps,
-    ...additionalSettingsPanel.steps,
-    ...scoringSectionBase.steps,
+    ...scoringSectionBaseEditTab.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();
-    },
-
+    ...playbackControlsBaseComponent.steps,
     startRecordingStandardPreview: () => {
         audioResponsePage.standardPreviewStartRecordingButton()
             .click();
     },
 
+    verifyRecordingCountDownNotExists: () => {
+        utilities.verifyElementVisibilityState(audioResponsePage.startRecordingCountDown(), 'notExist');
+    },
+
     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.
+     * Verifies the recorded time displayed in the standard preview player on the audio response page.
+     * @param {string} recordingTime - The current recorded time in the format 'mm:ss'.
+     * @param {string} totalTime - The total duration of the audio in the format 'mm:ss'.
+     * @returns {undefined}
      */
-    verifyRecordingTimeStandardPreview: (time) => {
-        audioResponsePage.previewMaxRecordTime()
-            .should('have.text', time)
+    verifyRecordingTimeStandardPreview: (recordingTime, totalTime) => {
+        utilities.verifyTextContent(audioResponsePage.previewMaxRecordTime(), `${recordingTime} / ${totalTime}`)
     },
 
-    resumeRecordingStandardPreview: () => {
-        audioResponsePage.standardPreviewResumeRecordingButton()
+    stopRecordingStandardPreview: () => {
+        audioResponsePage.standardPreviewStopRecordingButton()
             .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.
+     * Verifies the playback time displayed in the standard preview player on the audio response page.
+     * @param {string} playbackTime - The current playback time in the format 'mm:ss'.
+     * @param {string} totalTime - The total duration of the audio in the format 'mm:ss'.
+     * @returns {undefined}
      */
-    verifyRecordingStatusStandardPreview: (recordingStatus) => {
-        utilities.verifyInnerText(audioResponsePage.standardPreviewRecorderHelpText(), recordingStatus);
-        utilities.verifyElementVisibilityState(audioResponsePage.standardPreviewRecorderHelpText(), 'visible');
+    verifyPlaybackTimeStandardPreview: (playbackTime, totalTime) => {
+        utilities.verifyTextContent(audioResponsePage.standardPreviewPlaybackTime(), `${playbackTime}/${totalTime}`);
     },
 
+    /**
+     * 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)
+    },
+
+    /**
+     * Verifies the displayed volume meter value in decibels (dB).
+     * @param {string} valueInDb - The expected value of the volume meter in decibels (dB).
+     */
     verifyVolumeMeterInDb: (valueInDb) => {
         audioResponsePage.previewVolumeMeter()
             .should('have.text', valueInDb);
     },
 
-    waitForRecordingToStartMinimalPreview: () => {
-        audioResponsePage.minimalPreviewRecordingTimer()
-            .should('contain', '00:01 /')
+    pauseRecordingStandardPreview: () => {
+        audioResponsePage.standardPreviewPauseRecordingButton()
+            .click();
     },
 
-    stopRecordingStandardPreview: () => {
-        audioResponsePage.standardPreviewStopRecordingButton()
+    resumeRecordingStandardPreview: () => {
+        audioResponsePage.standardPreviewResumeRecordingButton()
             .click();
     },
 
+    verifyMicGlowAnimationNotVisible: () => {
+        audioResponsePage.micGlowAnimation()
+            .should('not.have.css', 'background-color', css.color.micGlowAnimation)
+            .and('have.css', 'background-color', css.color.transparent);
+    },
+
     /**
      * Records and saves audio during the standard preview recording process.
      * @param {number} time - The duration (in milliseconds) to record audio before saving.
@@ -206,6 +155,85 @@ const steps = {
         audioResponsePage.steps.stopRecordingStandardPreview();
     },
 
+    startPlayback: () => {
+        audioResponsePage.playbackPlayButton()
+            .click();
+    },
+
+    waitForPlaybackToBegin: () => {
+        audioResponsePage.standardPreviewPlaybackTime()
+            .should('contain', '00:01/')
+    },
+
+    pausePlayback: () => {
+        audioResponsePage.playbackPauseButton()
+            .click();
+    },
+
+    /**
+     * 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.
+     */
+    addWaitToPlayAudio: (time) => {
+        cy.wait(time)
+    },
+
+    /**
+     * Verifies the playback elapsed time displayed on the audio response page.
+     * @param {number} time - The expected elapsed time in seconds.
+     * @param {("Standard" | "Minimal")} recorderStyle - The style of the recorder ('Standard' or 'Minimal').
+     * @throws {Error} Will throw an error if the provided recorder style is invalid.
+     * @returns {void}
+     */
+    verifyPlaybackElapsedTime: (time, recorderStyle) => {
+        let playbackTimeElement;
+
+        if (recorderStyle === 'Standard') {
+            playbackTimeElement = audioResponsePage.standardPreviewPlaybackTime();
+        } else if (recorderStyle === 'Minimal') {
+            playbackTimeElement = audioResponsePage.minimalPreviewPlaybackTime();
+        } else {
+            throw new Error('Invalid recorder style');
+        }
+
+        playbackTimeElement
+            .invoke('text')
+            .then(text => {
+                let elapsedTime = text.split('/')[0];
+                let currentElapsedTimerMinutes = Number(elapsedTime.split(':')[0]);
+                let currentElapsedTimerSeconds = Number(elapsedTime.split(':')[1]);
+                let currentTotalElapsedTimerSeconds = currentElapsedTimerMinutes * 60 + currentElapsedTimerSeconds;
+                expect(currentTotalElapsedTimerSeconds).to.equal(time);
+            });
+    },
+
+    /**
+     * Selects the audio recorder style based on the provided style.
+     * @param {('Standard' | 'Bar' | 'Minimal')} recorderStyle - The style of the audio recorder to select. 
+     * @throws {Error} Will throw an error if an invalid recorder style is provided.
+     */
+    selectAudioRecorderStyle: (recorderStyle) => {
+        switch (recorderStyle) {
+            case 'Standard':
+                audioResponsePage.standardRecorderStyleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Bar':
+                audioResponsePage.barRecorderStyleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            case 'Minimal':
+                audioResponsePage.minimalRecorderStyleButton()
+                    .click()
+                    .should('have.class', 'ngie-toggle-button-selected');
+                break;
+            default:
+                throw new Error('Invalid recorder style');
+        }
+    },
+
     startRecordingMinimalPreview: () => {
         audioResponsePage.minimalPreviewRecordButton()
             .click();
@@ -216,49 +244,182 @@ const steps = {
             .click();
     },
 
-    waitForPlaybackToBeginStandardPreview: () => {
-        audioResponsePage.standardPreviewRecordTime()
-            .find('.standard-recorder-time-wrapper')
-            .should('have.text', '00:01')
+    waitForRecordingToStartMinimalPreview: () => {
+        audioResponsePage.minimalPreviewRecordingTimer()
+            .should('contain', '00:01 /')
     },
 
-    waitForPlaybackToBeginMinimalPreview: () => {
-        audioResponsePage.minimalPreviewPlaybackTimer()
-            .find('[class*="MinimalAudioPlayerstyles__TimeWrapper"]')
-            .should('have.text', '00:01')
+    verifyRecordingLengthAfterResumingStandardPreview: () => {
+        audioResponsePage.previewMaxRecordTime()
+            .invoke('text')
+            .then(($timer) => {
+                const currentTimer = $timer.split(' / ')[0];
+                const currentSeconds = parseInt(currentTimer.split(':')[1], 10);
+                expect(currentSeconds).to.be.gte(3);
+            });
     },
 
     /**
-     * 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}
+     * Verifies the recorded time displayed in the minimal preview player on the audio response page.
+     * @param {string} recordingTime - The current recorded time in the format 'mm:ss'.
+     * @param {string} totalTime - The total duration of the audio in the format 'mm:ss'.
+     * @returns {undefined}
      */
-    addWaitForPlayback: (time) => {
-        cy.wait(time)
+    verifyRecordingTimeMinimalPreview: (recordingTime, totalTime) => {
+        utilities.verifyTextContent(audioResponsePage.minimalPreviewRecordingTimer(), `${recordingTime} / ${totalTime}`)
     },
 
     /**
-     * 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}
+     * Verifies the playback time displayed in the minimal preview player on the audio response page.
+     * @param {string} playbackTime - The current playback time in the format 'mm:ss'.
+     * @param {string} totalTime - The total duration of the audio in the format 'mm:ss'.
+     * @returns {undefined}
      */
-    addWaitToRecordAudio: (time) => {
-        cy.wait(time)
-    }
+    verifyPlaybackTimeMinimalPreview: (playbackTime, totalTime) => {
+        utilities.verifyTextContent(audioResponsePage.minimalPreviewPlaybackTime(), `${playbackTime}/${totalTime}`);
+    },
+
+    pauseRecordingMinimalPreview: () => {
+        audioResponsePage.minimalPreviewPauseRecordingButton()
+            .click();
+    },
+
+    resumeRecordingMinimalPreview: () => {
+        audioResponsePage.minimalPreviewResumeRecordingButton()
+            .click();
+    },
+
+    verifyRecordingLengthAfterResumingMinimalPreview: () => {
+        audioResponsePage.minimalPreviewRecordingTimer()
+            .invoke('text')
+            .then(($timer) => {
+                const currentTimer = $timer.split(' / ')[0];
+                const currentSeconds = parseInt(currentTimer.split(':')[1], 10);
+                expect(currentSeconds).to.be.gte(6);
+            });
+    },
+
+    stopRecordingMinimalPreview: () => {
+        audioResponsePage.minimalPreviewStopRecordingButton()
+            .click();
+    },
+
+    retakeRecordingStandardPreview: () => {
+        audioResponsePage.standardPreviewRetakeButton()
+            .click();
+    },
+
+    /**
+     * Records and saves audio during the minimal 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.
+     */
+    recordAndSaveAudioMinimalPreview: (time) => {
+        audioResponsePage.steps.startRecordingMinimalPreview();
+        audioResponsePage.steps.waitForRecordingToStartMinimalPreview();
+        audioResponsePage.steps.addWaitToRecordAudio(time - 1000);
+        audioResponsePage.steps.stopRecordingMinimalPreview();
+    },
+
+    cancelRetake: () => {
+        audioResponsePage.cancelRetakeButton()
+            .click();
+    },
+
+    confirmRetake: () => {
+        audioResponsePage.confirmRetakeButton()
+            .click();
+    },
+
+    startPlaybackMinimalPreview: () => {
+        audioResponsePage.minimalPreviewPlayPlaybackButton()
+            .click();
+    },
+
+    waitForPlaybackToBeginMinimalPreview: () => {
+        audioResponsePage.minimalPreviewPlaybackTime()
+            .should('contain', '00:01/')
+    },
+
+    pausePlaybackMinimalPreview: () => {
+        audioResponsePage.minimalPreviewPausePlaybackButton()
+            .click();
+    },
+
+    verifyRetakePopupContents: () => {
+        utilities.verifyInnerText(audioResponsePage.retakePopupContent(), 'Are you sure you want to overwrite the existing audio recording?');
+        utilities.verifyInnerText(audioResponsePage.confirmRetakeButton(), 'Confirm');
+        utilities.verifyElementVisibilityState(audioResponsePage.confirmRetakeButton(), 'visible');
+        utilities.verifyInnerText(audioResponsePage.cancelRetakeButton(), 'Cancel');
+        utilities.verifyElementVisibilityState(audioResponsePage.cancelRetakeButton(), 'visible');
+    },
+
+    retakeRecordingMinimalPreview: () => {
+        audioResponsePage.minimalPreviewRetakeButton()
+            .click();
+    },
+
+    pauseAndVerifyProgressBarSliderPositionMinimalPreview: () => {
+        let initialWidthProgressBar
+        playbackControlsBaseComponent.progressBarSlider()
+            .then(($currWidth) => {
+                initialWidthProgressBar = $currWidth[0].valueAsNumber
+            });
+        audioResponsePage.steps.pausePlaybackMinimalPreview();
+        playbackControlsBaseComponent.progressBarSlider()
+            .then(($finalWidth) => {
+                cy.log('The assertion is verifying the value synchronously i.e in real time')
+                const finalWidth = $finalWidth[0].valueAsNumber
+                expect(finalWidth).to.closeTo(initialWidthProgressBar, 5)
+            });
+    },
 }
 
 const tests = {
     ...createQuestionBasePage.tests,
     ...questionInstructionsComponent.tests,
-    ...additionalSettingsPanel.tests,
-    ...scoringSectionBase.tests,
-    ...questionInstructionsComponent.tests,
-    ...previewScoringAndShowCorrectAnswerComponent.tests,
-    ...maximumRecorderLengthComponent.tests
+    ...scoringSectionBaseEditTab.tests,
+    ...maximumRecorderLengthComponent.tests,
+    ...playbackControlsBaseComponent.tests,
+    verifyRetakePopupCSSAndA11y: () => {
+        it('CSS of \'Retake\' popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(dialogBoxBase.dialogBox(), {
+                'border': `1px solid ${css.color.defaultDropdownBorder}`,
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(dialogBoxBase.dialogBoxTitle(), {
+                'color': css.color.questionHeading,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(dialogBoxBase.dialogBoxContent().find('.retake-popup-content'), {
+                'border-top': `1px solid ${css.color.secondaryBtnBorder}`,
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(audioResponsePage.confirmRetakeButton(), {
+                'background-color': css.color.deleteBtn,
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(audioResponsePage.cancelRetakeButton(), {
+                'background-color': css.color.secondaryBtnBg,
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('Accessibility of \'Retake\' popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dialogBoxBase.dialogBox());
+        });
+    }
 }
 
 export const audioResponsePage = {
     ...selectors,
-    tests,
-    steps
+    steps,
+    tests
 }

package/cypress/pages/components/additionalSettingsPanel.js

@@ -11,7 +11,7 @@ const selectors = {
     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 & references"]'),
+    additionalSettingsAcknowledgementsInputField: () => cy.get('[title="acknowledgements and references"]'),
     //Font-size dropdown
     fontSizeLabel: () => cy.get('#Font-Size-dropdown-label'),
     fontSizeDropdown: () => cy.get('#Font-Size-select'),

package/cypress/pages/components/autoScoredSpecifyCorrectAnswerSection.js

@@ -8,7 +8,7 @@ const selectors = {
     specifyCorrectAnswerLabel: () => cy.get('.set-correct-answer-label'),
     specifyCorrectAnswerHelpText: () => cy.get('.edit-set-correct-answer-help-text'),
     specifyCorrectAnswerSectionWrapper: () => cy.get('.edit-question-auto-scored-set-correct-answer-wrapper'),
-    alternativeAnswerButton: () => cy.get('[class*="AddAlternateAnswer"] button'),
+    alternativeAnswerButton: () => cy.get('[class*="AlternateAnswer"] button'),
     //TODO: Need to update the selector of correct answer accordion once a unique selector is made available
     correctAnswerAccordion: () => cy.get('.correct-answer-accordion [role="button"]').eq(0),
     alternativeAnswerAccordion: () => cy.get('.correct-answer-accordion .ngie-accordion-summary'),