itemengine-cypress-automation 1.0.113 → 1.0.114

package/cypress/pages/audioResponsePage.js

@@ -1,5 +1,5 @@
 import utilities from "../support/helpers/utilities";
-import { createQuestionBasePage, questionInstructionsComponent, scoringSectionBaseEditTab, maximumRecorderLengthComponent, commonComponents, playbackControlsBaseComponent } from "./components"
+import { createQuestionBasePage, questionInstructionsComponent, scoringSectionBaseEditTab, maximumRecorderLengthComponent, commonComponents, playbackControlsBaseComponent, autoScoredScoringPreviewTab, studentViewSettingsLabelComponent } from "./components"
 import { dialogBoxBase } from "./dialogBoxBase";
 const css = Cypress.env('css');
 
@@ -10,8 +10,11 @@ const selectors = {
     ...questionInstructionsComponent,
     ...maximumRecorderLengthComponent,
     ...playbackControlsBaseComponent,
+    ...studentViewSettingsLabelComponent,
     recordedResponseHelpText: () => cy.get('[class*="preview-help-text"]'),
     playbackWaveform: () => cy.get('.audio-wave-form'),
+    playbackWaveformTotalWidth: () => cy.get('.audio-wave-form wave wave canvas'),
+    playbackWaveformCurrentPositionWidth: () => cy.get('.audio-wave-form wave wave'),
     //standard style
     standardPreviewStartRecordingButton: () => cy.get('.standard-audio-recorder-mic [role="button"]'),
     standardPreviewStopRecordingButton: () => cy.get('.standard-recorder-stop-btn'),
@@ -42,25 +45,68 @@ const selectors = {
     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('.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'),
-    minimalPreviewRecordingTimer: () => cy.get('.minimal-recording-timer'),
-    minimalPreviewVolumeMeter: () => cy.get('.audio-volume-meter-wrapper'),
-    minimalPreviewPlaybackPlayButton: () => cy.get('.play-back-button'),
-    minimalPreviewPlaybackTime: () => cy.get('.minimal-playback-timer'),
+    compactRecorderStyleButton: () => cy.get('[data-ngie-testid="compact-toggle-button"]'),
+    //compact style
+    compactPreviewRecordButton: () => cy.get('.recorder-buttons-wrapper .record-button'),
+    compactPreviewPauseRecordingButton: () => cy.get('.recorder-buttons-wrapper .pause-button'),
+    compactPreviewStopRecordingButton: () => cy.get('.recorder-buttons-wrapper .stop-button'),
+    compactPreviewResumeRecordingButton: () => cy.get('.recorder-buttons-wrapper .record-button'),
+    compactPreviewRetakeButton: () => cy.get('.play-back-btn-wrapper .record-button'),
+    compactPreviewPlayPlaybackButton: () => cy.get('.play-back-btn-wrapper .play-back-button'),
+    compactPreviewPausePlaybackButton: () => cy.get('.play-back-btn-wrapper .play-back-button'),
+    compactPreviewRecordingHelpText: () => cy.get('.minimal-recording-text'),
+    compactPreviewRecorderHelpText: () => cy.get('.response-recorded'),
+    compactPreviewRecordingTimer: () => cy.get('.minimal-recording-timer'),
+    compactPreviewVolumeMeter: () => cy.get('.audio-volume-meter-wrapper'),
+    compactPreviewPlaybackPlayButton: () => cy.get('.play-back-button'),
+    compactPreviewPlaybackTime: () => 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),
-    retakePopupContent: () => cy.get('.retake-popup-content')
+    retakePopupContent: () => cy.get('.retake-popup-content'),
+    customizePlaybackControlsAccordion: () => cy.get('.customize-accordion .ngie-accordion-summary'),
+    controlsForPlaybackLabel: () => cy.get('.response-playback-title').eq(0),
+    controlsForPlaybackPlayButton: () => cy.get('[data-ngie-testid="play-toggle-button"]'),
+    controlsForPlaybackPlayButtonLabel: () => cy.get('.customize-accordion [class*="CustomizeToolbarSelectionstyles__Label"]').eq(0),
+    controlsForPlaybackPauseButton: () => cy.get('[data-ngie-testid="pause-toggle-button"]'),
+    controlsForPlaybackPauseButtonLabel: () => cy.get('.customize-accordion [class*="CustomizeToolbarSelectionstyles__Label"]').eq(1),
+    controlsForPlaybackSeekButton: () => cy.get('[data-ngie-testid="seek-toggle-button"]'),
+    controlsForPlaybackSeekButtonLabel: () => cy.get('.customize-accordion [class*="CustomizeToolbarSelectionstyles__Label"]').eq(2),
+    controlsForPlaybackVolumeButton: () => cy.get('[data-ngie-testid="volume-toggle-button"]'),
+    controlsForPlaybackVolumeButtonLabel: () => cy.get('.customize-accordion [class*="CustomizeToolbarSelectionstyles__Label"]').eq(3),
+    controlsForPlaybackPlaybackSpeedButton: () => cy.get('[data-ngie-testid="playback-speed-toggle-button"]'),
+    controlsForPlaybackPlaybackSpeedButtonLabel: () => cy.get('.customize-accordion [class*="CustomizeToolbarSelectionstyles__Label"]').eq(4),
+    //Audio indicators
+    audioIndicatorsProgressIndicatorButton: () => cy.get('[data-ngie-testid="progress-indicator-toggle-button"]'),
+    audioIndicatorsProgressIndicatorButtonLabel: () => cy.get('.audio-indicator .control-footer').eq(0),
+    audioIndicatorsAudioWaveButton: () => cy.get('[data-ngie-testid="audio-wave-toggle-button"]'),
+    audioIndicatorsAudioWaveButtonLabel: () => cy.get('.audio-indicator .control-footer').eq(1),
+    audioIndicatorsTimerButton: () => cy.get('[data-ngie-testid="timer-toggle-button"]'),
+    audioIndicatorsTimerButtonLabel: () => cy.get('.audio-indicator .control-footer').eq(2),
+    audioIndicatorsVolumeMeterButton: () => cy.get('[data-ngie-testid="volume-meter-toggle-button"]'),
+    audioIndicatorsVolumeMeterButtonLabel: () => cy.get('.audio-indicator .control-footer').eq(3),
+    audioIndicatorsLabel: () => cy.get('.audio-indicator .response-playback-title'),
+    audioRecorderStyleLabel: () => cy.get('.recorder-style-label'),
+    stopRecordingIfSilenceIsDetectedLabel: () => cy.get('.stop-recording-length-label'),
+    stopRecordingIfSilenceIsDetectedInputField: () => cy.get('.stop-recording-input-wrapper input'),
+    stopRecordingIfSilenceIsDetectedSecsToggleButton: () => cy.get('.stop-recording-input-wrapper [data-ngie-testid="secs-toggle-button"]'),
+    stopRecordingIfSilenceIsDetectedMinsToggleButton: () => cy.get('.stop-recording-input-wrapper [data-ngie-testid="mins-toggle-button"]'),
+    limitNumberOfRetakeCheckboxLabel: () => cy.get('[data-ngie-testid="limit-number-of-retake-checkbox"] .MuiFormControlLabel-label'),
+    limitNumberOfRetakeCheckbox: () => cy.get('[data-ngie-testid="limit-number-of-retake-checkbox"] input'),
+    //bar recorder style
+    //Reminder: post a bug for selectors being the same as standard recorder style
+    barPreviewRecordTime: () => cy.get('.standard-record-timer'),
+    barPreviewPlaybackTime: () => cy.get('.standard-record-timer-wrapper'),
+    barPreviewStartRecordingButton: () => cy.get('.rec-button'),
+    barPreviewStopRecordingButton: () => cy.get('.standard-recorder-stop-btn'),
+    barPreviewPauseRecordingButton: () => cy.get('.standard-recorder-pause-btn'),
+    barPreviewResumeRecordingButton: () => cy.get('.standard-recorder-resume-btn'),
+    barPreviewRetakeButton: () => cy.get('.standard-recorder-retake-btn'),
+    showStudentsTheRetakeLimitsOnTooltipCheckbox: () => cy.get('[data-ngie-testid="show-students-the-retake-limits-on-tooltip-checkbox"] input'),
+    showStudentsTheRetakeLimitsOnTooltipCheckboxLabel: () => cy.get('[data-ngie-testid="show-students-the-retake-limits-on-tooltip-checkbox"] .MuiFormControlLabel-label'),
+    retakeLimitLabel: () => cy.get('.retake-limit-label'),
+    retakeLimitInputField: () => cy.get('.retake-limit-wrapper input'),
+    barPreviewPlaybackWrapper: () => cy.get('.audio-response-wrapper')
 }
 
 const steps = {
@@ -160,7 +206,7 @@ const steps = {
             .click();
     },
 
-    waitForPlaybackToBegin: () => {
+    waitForPlaybackToBeginStandardPreview: () => {
         audioResponsePage.standardPreviewPlaybackTime()
             .should('contain', '00:01/')
     },
@@ -181,21 +227,26 @@ const steps = {
     /**
      * 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').
+     * @param {("Standard" | "Compact")} recorderStyle - The style of the recorder ('Standard' or 'Compact').
      * @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');
-        }
-
+        switch (recorderStyle) {
+            case 'Standard':
+                playbackTimeElement = audioResponsePage.standardPreviewPlaybackTime();
+                break;
+            case 'Bar':
+                playbackTimeElement = audioResponsePage.barPreviewPlaybackTime();
+                break;
+            case 'Compact':
+                playbackTimeElement = audioResponsePage.compactPreviewPlaybackTime();
+                break;
+            default:
+                throw new Error('Invalid recorder style');
+        };
         playbackTimeElement
             .invoke('text')
             .then(text => {
@@ -203,13 +254,13 @@ const steps = {
                 let currentElapsedTimerMinutes = Number(elapsedTime.split(':')[0]);
                 let currentElapsedTimerSeconds = Number(elapsedTime.split(':')[1]);
                 let currentTotalElapsedTimerSeconds = currentElapsedTimerMinutes * 60 + currentElapsedTimerSeconds;
-                expect(currentTotalElapsedTimerSeconds).to.equal(time);
+                expect(currentTotalElapsedTimerSeconds).to.closeTo(time, 1);
             });
     },
 
     /**
      * Selects the audio recorder style based on the provided style.
-     * @param {('Standard' | 'Bar' | 'Minimal')} recorderStyle - The style of the audio recorder to select. 
+     * @param {('Standard' | 'Bar' | 'Compact')} recorderStyle - The style of the audio recorder to select. 
      * @throws {Error} Will throw an error if an invalid recorder style is provided.
      */
     selectAudioRecorderStyle: (recorderStyle) => {
@@ -224,8 +275,8 @@ const steps = {
                     .click()
                     .should('have.class', 'ngie-toggle-button-selected');
                 break;
-            case 'Minimal':
-                audioResponsePage.minimalRecorderStyleButton()
+            case 'Compact':
+                audioResponsePage.compactRecorderStyleButton()
                     .click()
                     .should('have.class', 'ngie-toggle-button-selected');
                 break;
@@ -234,18 +285,18 @@ const steps = {
         }
     },
 
-    startRecordingMinimalPreview: () => {
-        audioResponsePage.minimalPreviewRecordButton()
+    startRecordingCompactPreview: () => {
+        audioResponsePage.compactPreviewRecordButton()
             .click();
     },
 
-    stopRecordingMinimalPreview: () => {
-        audioResponsePage.minimalPreviewStopRecordingButton()
+    stopRecordingCompactPreview: () => {
+        audioResponsePage.compactPreviewStopRecordingButton()
             .click();
     },
 
-    waitForRecordingToStartMinimalPreview: () => {
-        audioResponsePage.minimalPreviewRecordingTimer()
+    waitForRecordingToStartCompactPreview: () => {
+        audioResponsePage.compactPreviewRecordingTimer()
             .should('contain', '00:01 /')
     },
 
@@ -260,37 +311,37 @@ const steps = {
     },
 
     /**
-     * Verifies the recorded time displayed in the minimal preview player on the audio response page.
+     * Verifies the recorded time displayed in the compact 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}
      */
-    verifyRecordingTimeMinimalPreview: (recordingTime, totalTime) => {
-        utilities.verifyTextContent(audioResponsePage.minimalPreviewRecordingTimer(), `${recordingTime} / ${totalTime}`)
+    verifyRecordingTimeCompactPreview: (recordingTime, totalTime) => {
+        utilities.verifyTextContent(audioResponsePage.compactPreviewRecordingTimer(), `${recordingTime} / ${totalTime}`)
     },
 
     /**
-     * Verifies the playback time displayed in the minimal preview player on the audio response page.
+     * Verifies the playback time displayed in the compact 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}
      */
-    verifyPlaybackTimeMinimalPreview: (playbackTime, totalTime) => {
-        utilities.verifyTextContent(audioResponsePage.minimalPreviewPlaybackTime(), `${playbackTime}/${totalTime}`);
+    verifyPlaybackTimeCompactPreview: (playbackTime, totalTime) => {
+        utilities.verifyTextContent(audioResponsePage.compactPreviewPlaybackTime(), `${playbackTime}/${totalTime}`);
     },
 
-    pauseRecordingMinimalPreview: () => {
-        audioResponsePage.minimalPreviewPauseRecordingButton()
+    pauseRecordingCompactPreview: () => {
+        audioResponsePage.compactPreviewPauseRecordingButton()
             .click();
     },
 
-    resumeRecordingMinimalPreview: () => {
-        audioResponsePage.minimalPreviewResumeRecordingButton()
+    resumeRecordingCompactPreview: () => {
+        audioResponsePage.compactPreviewResumeRecordingButton()
             .click();
     },
 
-    verifyRecordingLengthAfterResumingMinimalPreview: () => {
-        audioResponsePage.minimalPreviewRecordingTimer()
+    verifyRecordingLengthAfterResumingCompactPreview: () => {
+        audioResponsePage.compactPreviewRecordingTimer()
             .invoke('text')
             .then(($timer) => {
                 const currentTimer = $timer.split(' / ')[0];
@@ -299,8 +350,8 @@ const steps = {
             });
     },
 
-    stopRecordingMinimalPreview: () => {
-        audioResponsePage.minimalPreviewStopRecordingButton()
+    stopRecordingCompactPreview: () => {
+        audioResponsePage.compactPreviewStopRecordingButton()
             .click();
     },
 
@@ -310,15 +361,15 @@ const steps = {
     },
 
     /**
-     * Records and saves audio during the minimal preview recording process.
+     * Records and saves audio during the compact 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();
+    recordAndSaveAudioCompactPreview: (time) => {
+        audioResponsePage.steps.startRecordingCompactPreview();
+        audioResponsePage.steps.waitForRecordingToStartCompactPreview();
         audioResponsePage.steps.addWaitToRecordAudio(time - 1000);
-        audioResponsePage.steps.stopRecordingMinimalPreview();
+        audioResponsePage.steps.stopRecordingCompactPreview();
     },
 
     cancelRetake: () => {
@@ -331,18 +382,18 @@ const steps = {
             .click();
     },
 
-    startPlaybackMinimalPreview: () => {
-        audioResponsePage.minimalPreviewPlayPlaybackButton()
+    startPlaybackCompactPreview: () => {
+        audioResponsePage.compactPreviewPlayPlaybackButton()
             .click();
     },
 
-    waitForPlaybackToBeginMinimalPreview: () => {
-        audioResponsePage.minimalPreviewPlaybackTime()
+    waitForPlaybackToBeginCompactPreview: () => {
+        audioResponsePage.compactPreviewPlaybackTime()
             .should('contain', '00:01/')
     },
 
-    pausePlaybackMinimalPreview: () => {
-        audioResponsePage.minimalPreviewPausePlaybackButton()
+    pausePlaybackCompactPreview: () => {
+        audioResponsePage.compactPreviewPausePlaybackButton()
             .click();
     },
 
@@ -354,18 +405,18 @@ const steps = {
         utilities.verifyElementVisibilityState(audioResponsePage.cancelRetakeButton(), 'visible');
     },
 
-    retakeRecordingMinimalPreview: () => {
-        audioResponsePage.minimalPreviewRetakeButton()
+    retakeRecordingCompactPreview: () => {
+        audioResponsePage.compactPreviewRetakeButton()
             .click();
     },
 
-    pauseAndVerifyProgressBarSliderPositionMinimalPreview: () => {
+    pauseAndVerifyProgressBarSliderPositionCompactPreview: () => {
         let initialWidthProgressBar
         playbackControlsBaseComponent.progressBarSlider()
             .then(($currWidth) => {
                 initialWidthProgressBar = $currWidth[0].valueAsNumber
             });
-        audioResponsePage.steps.pausePlaybackMinimalPreview();
+        audioResponsePage.steps.pausePlaybackCompactPreview();
         playbackControlsBaseComponent.progressBarSlider()
             .then(($finalWidth) => {
                 cy.log('The assertion is verifying the value synchronously i.e in real time')
@@ -373,6 +424,410 @@ const steps = {
                 expect(finalWidth).to.closeTo(initialWidthProgressBar, 5)
             });
     },
+
+    verifyCustomizePlaybackControlsAccordionCollapsedState: () => {
+        audioResponsePage.customizePlaybackControlsAccordion()
+            .should('have.attr', 'aria-expanded', 'false');
+    },
+
+    expandCustomizePlaybackControlsAccordion: () => {
+        audioResponsePage.customizePlaybackControlsAccordion()
+            .click()
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    collapseCustomizePlaybackControlsAccordion: () => {
+        audioResponsePage.customizePlaybackControlsAccordion()
+            .click()
+            .should('have.attr', 'aria-expanded', 'false');
+    },
+
+    verifyControlsForPlaybackPlayButtonSelectedState: () => {
+        audioResponsePage.controlsForPlaybackPlayButton()
+            .within(() => {
+                utilities.verifyElementVisibilityState(commonComponents.tickIconForOptionButtons(), 'visible');
+            });
+    },
+
+    verifyControlsForPlaybackPauseButtonSelectedState: () => {
+        audioResponsePage.controlsForPlaybackPauseButton()
+            .within(() => {
+                utilities.verifyElementVisibilityState(commonComponents.tickIconForOptionButtons(), 'visible');
+            });
+    },
+
+    verifyControlsForPlaybackSeekButtonSelectedState: () => {
+        audioResponsePage.controlsForPlaybackSeekButton()
+            .within(() => {
+                utilities.verifyElementVisibilityState(commonComponents.tickIconForOptionButtons(), 'visible');
+            });
+    },
+
+    verifyControlsForPlaybackVolumeButtonSelectedState: () => {
+        audioResponsePage.controlsForPlaybackVolumeButton()
+            .within(() => {
+                utilities.verifyElementVisibilityState(commonComponents.tickIconForOptionButtons(), 'visible');
+            });
+    },
+
+    verifyControlsForPlaybackPlaybackSpeedButtonSelectedState: () => {
+        audioResponsePage.controlsForPlaybackPlaybackSpeedButton()
+            .within(() => {
+                utilities.verifyElementVisibilityState(commonComponents.tickIconForOptionButtons(), 'visible');
+            });
+    },
+
+    deselectControlsForPlaybackPlayButton: () => {
+        audioResponsePage.controlsForPlaybackPlayButton()
+            .click()
+            .should('have.class', 'ngie-toggle-button-not-selected')
+    },
+
+    selectControlsForPlaybackPlayButton: () => {
+        audioResponsePage.controlsForPlaybackPlayButton()
+            .click()
+            .should('have.class', 'ngie-toggle-button-selected')
+    },
+
+    deselectControlsForPlaybackPauseButton: () => {
+        audioResponsePage.controlsForPlaybackPauseButton()
+            .click()
+            .should('have.class', 'ngie-toggle-button-not-selected')
+    },
+
+    deselectControlsForPlaybackSeekButton: () => {
+        audioResponsePage.controlsForPlaybackSeekButton()
+            .click()
+            .should('have.class', 'ngie-toggle-button-not-selected')
+    },
+
+    selectControlsForPlaybackSeekButton: () => {
+        audioResponsePage.controlsForPlaybackSeekButton()
+            .click()
+            .should('have.class', 'ngie-toggle-button-selected')
+    },
+
+    selectControlsForPlaybackPauseButton: () => {
+        audioResponsePage.controlsForPlaybackPauseButton()
+            .click()
+            .should('have.class', 'ngie-toggle-button-selected')
+    },
+
+    verifyPausePlaybackButtonEnabledState: () => {
+        utilities.verifyElementNotDisabled(audioResponsePage.previewPausePlaybackButton())
+    },
+
+    verifyPausePlaybackButtonEnabledStateCompactPreview: () => {
+        utilities.verifyElementNotDisabled(audioResponsePage.compactPreviewPausePlaybackButton())
+    },
+
+    selectControlsForPlaybackVolumeButton: () => {
+        audioResponsePage.controlsForPlaybackVolumeButton()
+            .click()
+            .should('have.class', 'ngie-toggle-button-selected')
+    },
+
+    deselectControlsForPlaybackVolumeButton: () => {
+        audioResponsePage.controlsForPlaybackVolumeButton()
+            .click()
+            .should('have.class', 'ngie-toggle-button-not-selected')
+    },
+
+    deselectControlsForPlaybackPlaybackSpeedButton: () => {
+        audioResponsePage.controlsForPlaybackPlaybackSpeedButton()
+            .click()
+            .should('have.class', 'ngie-toggle-button-not-selected')
+    },
+
+    selectControlsForPlaybackPlaybackSpeedButton: () => {
+        audioResponsePage.controlsForPlaybackPlaybackSpeedButton()
+            .click()
+            .should('have.class', 'ngie-toggle-button-selected')
+    },
+
+    verifyAudioIndicatorsProgressIndicatorButtonDeselectedState: () => {
+        audioResponsePage.audioIndicatorsProgressIndicatorButton()
+            .should('have.class', 'ngie-toggle-button-not-selected');
+    },
+
+    verifyAudioIndicatorsAudioWaveformButtonDeselectedState: () => {
+        audioResponsePage.audioIndicatorsAudioWaveButton()
+            .should('have.class', 'ngie-toggle-button-not-selected');
+    },
+
+    selectAudioIndicatorsProgressIndicatorButton: () => {
+        audioResponsePage.audioIndicatorsProgressIndicatorButton()
+            .click()
+            .should('have.class', 'ngie-toggle-button-selected');
+    },
+
+    verifyAudioWaveformProgressPosition: (actualAudioSeekedInPercent) => {
+        audioResponsePage.playbackWaveform()
+            .then(($totalWidth) => {
+                const totalWidth = $totalWidth[0].clientWidth
+                audioResponsePage.playbackWaveformCurrentPositionWidth()
+                    .then(($currWidth) => {
+                        const currentWaveFormWidth = $currWidth[0].clientWidth
+                        const currentWaveFormWidthInPercent = (currentWaveFormWidth / totalWidth) * 100
+                        expect(currentWaveFormWidthInPercent).to.be.closeTo(actualAudioSeekedInPercent, 5)
+                    });
+            });
+
+    },
+
+    seekPlaybackWaveformTo75Percent: () => {
+        audioResponsePage.playbackWaveform()
+            .then(($waveformDimensions) => {
+                const x = $waveformDimensions[0].clientWidth - ($waveformDimensions[0].clientWidth) / 4
+                const y = ($waveformDimensions[0].clientHeight) / 2
+                audioResponsePage.playbackWaveform()
+                    .click(x, y);
+            });
+    },
+
+    verifyStandardRecorderStyleToggleButtonSelectedState: () => {
+        audioResponsePage.standardRecorderStyleButton()
+            .should('have.class', 'ngie-toggle-button-selected');
+    },
+
+    verifyAudioIndicatorsTimeButtonSelectedState: () => {
+        audioResponsePage.audioIndicatorsTimerButton()
+            .should('have.class', 'ngie-toggle-button-selected');
+    },
+
+    verifyAudioIndicatorsProgressIndicatorButtonSelectedState: () => {
+        audioResponsePage.audioIndicatorsProgressIndicatorButton()
+            .should('have.class', 'ngie-toggle-button-selected');
+    },
+
+    verifyAudioIndicatorsAudioWaveButtonSelectedState: () => {
+        audioResponsePage.audioIndicatorsAudioWaveButton()
+            .should('have.class', 'ngie-toggle-button-selected');
+    },
+
+    verifyAudioIndicatorsVolumeMeterButtonSelectedState: () => {
+        audioResponsePage.audioIndicatorsVolumeMeterButton()
+            .should('have.class', 'ngie-toggle-button-selected');
+    },
+
+    verifyAudioIndicatorsAudioWaveButtonSelectedState: () => {
+        audioResponsePage.audioIndicatorsAudioWaveButton()
+            .should('have.class', 'ngie-toggle-button-selected');
+    },
+
+    /**
+     * Verifies the value of the input field for stopping recording if silence is detected.
+     * @param {string} value - The expected value of the input field.
+     */
+    verifyStopRecordingIfSilenceIsDetectedInputFieldValue: (value) => {
+        audioResponsePage.stopRecordingIfSilenceIsDetectedInputField()
+            .should('have.attr', 'value', value)
+    },
+
+    verifyStopRecordingIfSilenceIsDetectedSecsToggleButtonSelectedState: () => {
+        audioResponsePage.stopRecordingIfSilenceIsDetectedSecsToggleButton()
+            .should('have.class', 'ngie-toggle-button-selected');
+    },
+
+    /**
+     * Sets the duration after which recording should stop if silence is detected.
+     * @param {string} value - The duration after which recording should stop if silence is detected.
+     */
+    setStopRecordingIfSilenceIsDetectedAfter: (value) => {
+        audioResponsePage.stopRecordingIfSilenceIsDetectedInputField()
+            .type(value)
+    },
+
+    focusInStopRecordingIfSilenceIsDetectedInputField: () => {
+        audioResponsePage.stopRecordingIfSilenceIsDetectedInputField()
+            .clear()
+            .blur();
+    },
+
+    limitNumberOfRetakeCheckboxUncheckedState: () => {
+        audioResponsePage.limitNumberOfRetakeCheckbox()
+            .should('not.be.checked');
+    },
+
+    deselectAudioIndicatorsTimerButton: () => {
+        audioResponsePage.audioIndicatorsTimerButton()
+            .click()
+            .should('have.class', 'ngie-toggle-button-not-selected');
+        audioResponsePage.audioIndicatorsTimerButton()
+            .within(() => {
+                utilities.verifyElementVisibilityState(commonComponents.tickIconForOptionButtons(), 'hidden');
+            });
+    },
+
+    startRecordingBarPreview: () => {
+        audioResponsePage.barPreviewStartRecordingButton()
+            .click();
+    },
+
+    waitForRecordingToStartBarPreview: () => {
+        audioResponsePage.barPreviewRecordTime()
+            .should('contain', '00:01 /')
+    },
+
+    stopRecordingBarPreview: () => {
+        audioResponsePage.barPreviewStopRecordingButton()
+            .click();
+    },
+
+    selectAudioIndicatorsTimerButton: () => {
+        audioResponsePage.audioIndicatorsTimerButton()
+            .click()
+            .should('have.class', 'ngie-toggle-button-selected');
+    },
+
+    deselectAudioIndicatorsPlaybackIndicatorButton: () => {
+        audioResponsePage.audioIndicatorsProgressIndicatorButton()
+            .click()
+            .should('have.class', 'ngie-toggle-button-not-selected');
+        audioResponsePage.audioIndicatorsProgressIndicatorButton()
+            .within(() => {
+                utilities.verifyElementVisibilityState(commonComponents.tickIconForOptionButtons(), 'hidden');
+            });
+    },
+
+    deselectAudioIndicatorsAudioWaveButton: () => {
+        audioResponsePage.audioIndicatorsAudioWaveButton()
+            .click()
+            .should('have.class', 'ngie-toggle-button-not-selected');
+        audioResponsePage.audioIndicatorsAudioWaveButton()
+            .within(() => {
+                utilities.verifyElementVisibilityState(commonComponents.tickIconForOptionButtons(), 'hidden');
+            });
+    },
+
+    deselectAudioIndicatorsVolumeMeterButton: () => {
+        audioResponsePage.audioIndicatorsVolumeMeterButton()
+            .click()
+            .should('have.class', 'ngie-toggle-button-not-selected');
+        audioResponsePage.audioIndicatorsVolumeMeterButton()
+            .within(() => {
+                utilities.verifyElementVisibilityState(commonComponents.tickIconForOptionButtons(), 'hidden');
+            });
+    },
+
+    selectAudioIndicatorsVolumeMeterButton: () => {
+        audioResponsePage.audioIndicatorsVolumeMeterButton()
+            .click()
+            .should('have.class', 'ngie-toggle-button-selected');
+    },
+
+    verifyShowStudentsTheRetakeLimitsOnTooltipCheckboxUncheckedState: () => {
+        audioResponsePage.showStudentsTheRetakeLimitsOnTooltipCheckbox()
+            .should('not.be.checked');
+    },
+
+    checkLimitNumberOfRetakeCheckbox: () => {
+        audioResponsePage.limitNumberOfRetakeCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    /**
+     * Verifies the value of the retake limit input field.
+     * @param {string} value - The expected value of the retake limit input field.
+     */
+    verifyRetakeLimitInputFieldValue: (value) => {
+        audioResponsePage.retakeLimitInputField()
+            .should('have.attr', 'value', value)
+    },
+
+    /**
+     * Sets the retake limit value.
+     * @param {string} value - The value to set as the retake limit.
+     */
+    setRetakeLimit: (value) => {
+        audioResponsePage.retakeLimitInputField()
+            .clear()
+            .type(value)
+            .should('have.attr', 'value', value)
+    },
+
+    /**
+     * Verifies the recorded time displayed in the bar 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'.
+     */
+    verifyRecordingTimeBarPreview: (recordingTime, totalTime) => {
+        utilities.verifyTextContent(audioResponsePage.barPreviewRecordTime(), `${recordingTime} / ${totalTime}`)
+    },
+
+    pauseRecordingBarPreview: () => {
+        audioResponsePage.barPreviewPauseRecordingButton()
+            .click();
+    },
+
+    resumeRecordingBarPreview: () => {
+        audioResponsePage.barPreviewResumeRecordingButton()
+            .click();
+    },
+
+    /**
+     * Verifies the playback time displayed in the bar 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}
+     */
+    verifyPlaybackTimeBarPreview: (playbackTime, totalTime) => {
+        utilities.verifyTextContent(audioResponsePage.barPreviewPlaybackTime(), `${playbackTime}/${totalTime}`);
+    },
+
+    /**
+     * Records and saves audio during the bar 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.
+     */
+    recordAndSaveAudioBarPreview: (time) => {
+        audioResponsePage.steps.startRecordingBarPreview();
+        audioResponsePage.steps.waitForRecordingToStartBarPreview();
+        audioResponsePage.steps.addWaitToRecordAudio(time - 1000);
+        audioResponsePage.steps.stopRecordingBarPreview();
+    },
+
+    waitForPlaybackToBeginBarPreview: () => {
+        audioResponsePage.barPreviewPlaybackTime()
+            .should('contain', '00:01/')
+    },
+
+    verifyRecordingLengthAfterResumingBarPreview: () => {
+        audioResponsePage.barPreviewRecordTime()
+            .invoke('text')
+            .then(($timer) => {
+                const currentTimer = $timer.split(' / ')[0];
+                const currentSeconds = parseInt(currentTimer.split(':')[1], 10);
+                expect(currentSeconds).to.be.gte(3);
+            });
+    },
+
+    retakeRecordingBarPreview: () => {
+        audioResponsePage.barPreviewRetakeButton()
+            .click();
+    },
+
+    verifyResponseIsRecordedHelpText: () => {
+        utilities.verifyInnerText(audioResponsePage.recordedResponseHelpText(), 'Your response has been recorded.');
+    },
+
+    checkShowStudentsTheRetakeLimitsOnTooltipCheckbox: () => {
+        audioResponsePage.showStudentsTheRetakeLimitsOnTooltipCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    uncheckShowStudentsTheRetakeLimitsOnTooltipCheckbox: () => {
+        audioResponsePage.showStudentsTheRetakeLimitsOnTooltipCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    clearRetakeLimitInputField: () => {
+        audioResponsePage.retakeLimitInputField()
+            .clear();
+    }
 }
 
 const tests = {
@@ -381,6 +836,8 @@ const tests = {
     ...scoringSectionBaseEditTab.tests,
     ...maximumRecorderLengthComponent.tests,
     ...playbackControlsBaseComponent.tests,
+    ...autoScoredScoringPreviewTab.tests,
+    ...studentViewSettingsLabelComponent.tests,
     verifyRetakePopupCSSAndA11y: () => {
         it('CSS of \'Retake\' popup', { tags: 'css' }, () => {
             utilities.verifyCSS(dialogBoxBase.dialogBox(), {