itemengine-cypress-automation 1.0.113 → 1.0.114

package/cypress/e2e/ILC/AudioResponseNew/barRecorderStyle.js

@@ -0,0 +1,489 @@
+import { dialogBoxBase } from "../../../pages";
+import { audioResponsePage } from "../../../pages/audioResponsePage";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+describe('Preview of Audio response for bar audio recorder style', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Preview of bar audio recorder style', () => {
+        abortEarlySetup();
+        before(() => {
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+            cy.barsPreLoaderWait();
+            audioResponsePage.steps.selectAudioRecorderStyle('Bar');
+            audioResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('By default: Mic icon, \'Allow microphone access\' help text should be displayed in \'bar audio recorder\'. Maximum recording length should be displayed in minutes(mm:ss) format.', () => {
+            utilities.verifyInnerText(audioResponsePage.barPreviewStartRecordingButton(), 'REC');
+            utilities.verifyElementVisibilityState(audioResponsePage.barPreviewStartRecordingButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.microphoneIcon(), 'visible');
+            utilities.verifyInnerText(audioResponsePage.allowMicrophoneAccessHelpText(), 'Allow microphone access');
+            utilities.verifyElementVisibilityState(audioResponsePage.allowMicrophoneAccessHelpText(), 'visible');
+            utilities.verifyInnerText(audioResponsePage.barPreviewRecordTime(), '15:00');
+            utilities.verifyElementVisibilityState(audioResponsePage.barPreviewRecordTime(), 'visible');
+        });
+
+        it('CSS of \'Preview\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioResponsePage.barPreviewStartRecordingButton(), {
+                'color': css.color.defaultBackground,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.semibold,
+                'border': `2px solid ${css.color.defaultBackground}`,
+                'background-color': css.color.recordingIcon
+            });
+            utilities.verifyCSS(audioResponsePage.microphoneIcon().find('path').eq(1), {
+                'fill': css.color.microphoneIcon
+            });
+            utilities.verifyCSS(audioResponsePage.allowMicrophoneAccessHelpText(), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(audioResponsePage.barPreviewRecordTime(), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.bold
+            });
+        });
+
+        it('When the user clicks on the \'Start recording\' button, a countdown should begin and help text "Preparing to record" should be displayed. The recording should start after the countdown, a beep sound should play and the help text should change to "Recording...". User should be able to view the duration of their recorded speech in minutes, displayed as \'(min:secs / min:sec)\'. Pause recording and Stop recording buttons should be displayed in record player. Start recording button should not be displayed.', () => {
+            audioResponsePage.steps.startRecordingBarPreview();
+            utilities.verifyInnerText(audioResponsePage.recordingStatusText(), 'Preparing to record 3');
+            utilities.verifyElementVisibilityState(audioResponsePage.recordingStatusIcon(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.barPreviewPauseRecordingButton(), 'visible');
+            utilities.verifyElementDisabled(audioResponsePage.barPreviewPauseRecordingButton());
+            audioResponsePage.steps.waitForRecordingToStartBarPreview();
+            audioResponsePage.steps.addWaitToRecordAudio(2000);
+            audioResponsePage.steps.verifyRecordingTimeBarPreview('00:03', '15:00');
+            utilities.verifyElementVisibilityState(audioResponsePage.barPreviewPauseRecordingButton(), 'visible');
+            utilities.verifyElementNotDisabled(audioResponsePage.barPreviewPauseRecordingButton());
+            utilities.verifyElementVisibilityState(audioResponsePage.barPreviewStopRecordingButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.recordingStatusIcon(), 'visible');
+            utilities.verifyInnerText(audioResponsePage.recordingStatusText(), 'Recording...');
+        });
+
+        it('CSS of \'Preview\' section once recording starts', { tags: 'css' }, () => {
+            cy.log('Pre-step : Switching to edit tab and back to preview tab to reset the recorder, then recording a response');
+            audioResponsePage.steps.resetQuestionPreview();
+            audioResponsePage.steps.startRecordingBarPreview();
+            audioResponsePage.steps.waitForRecordingToStartBarPreview();
+            utilities.verifyCSS(audioResponsePage.recordingStatusText(), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(audioResponsePage.barPreviewPauseRecordingButton(), {
+                'border': `1px solid ${css.color.secondaryBtnActive}`
+            });
+            utilities.verifyCSS(audioResponsePage.barPreviewPauseRecordingButton().find('svg rect'), {
+                'fill': css.color.secondaryBtnBg
+            });
+            utilities.verifyCSS(audioResponsePage.barPreviewPauseRecordingButton().find('svg path'), {
+                'stroke': css.color.secondaryBtnActive
+            });
+            utilities.verifyCSS(audioResponsePage.barPreviewStopRecordingButton(), {
+                'border': `1px solid ${css.color.secondaryBtnActive}`
+            });
+            utilities.verifyCSS(audioResponsePage.barPreviewStopRecordingButton().find('svg rect').eq(0), {
+                'fill': css.color.secondaryBtnBg
+            });
+            utilities.verifyCSS(audioResponsePage.barPreviewStopRecordingButton().find('svg rect').eq(1), {
+                'fill': css.color.secondaryBtnActive
+            });
+            utilities.verifyCSS(audioResponsePage.barPreviewRecordTime(), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.bold
+            });
+        });
+
+        it('Accessibility of \'Preview\' section once recording starts', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioResponsePage.previewTabQuestionWrapper());
+        });
+
+        it('When the user hovers on \'Pause recording\' button, \'Pause recording\' text should be displayed in tooltip', () => {
+            audioResponsePage.barPreviewPauseRecordingButton()
+                .verifyTooltip('Pause recording');
+        });
+
+        it('When recording is inprogress and the user clicks on \'Pause recording\' icon, recording should pause and the help text should update to \'Recording paused\'. User should be able to view the duration of their recorded speech in minutes, displayed as \'(min:secs / min:sec)\'. \'Pause recording\' button should get replaced with \'Resume recording\' button. \'Stop recording\' button should be displayed beside resume recording icon', () => {
+            audioResponsePage.steps.resetQuestionPreview();
+            audioResponsePage.steps.startRecordingBarPreview();
+            audioResponsePage.steps.waitForRecordingToStartBarPreview();
+            audioResponsePage.steps.addWaitToRecordAudio(2000);
+            audioResponsePage.steps.pauseRecordingBarPreview();
+            utilities.verifyInnerText(audioResponsePage.recordingStatusText(), 'Recording paused');
+            utilities.verifyElementVisibilityState(audioResponsePage.pauseIcon(), 'visible');
+            audioResponsePage.steps.verifyRecordingTimeBarPreview('00:03', '15:00');
+            utilities.verifyElementVisibilityState(audioResponsePage.barPreviewPauseRecordingButton(), 'notExist');
+            utilities.verifyElementVisibilityState(audioResponsePage.barPreviewResumeRecordingButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.barPreviewStopRecordingButton(), 'visible');
+        });
+
+        it('When the user hovers over the \'Resume\' button, a tooltip \'Resume recording\' should be displayed and on moving away the focus, the tooltip should disappear', () => {
+            audioResponsePage.barPreviewResumeRecordingButton()
+                .verifyTooltip('Resume recording');
+        });
+
+        it('CSS of \'Preview\' section if recording is paused', { tags: 'css' }, () => {
+            cy.log('CSS of Resume recording button and help text');
+            utilities.verifyCSS(audioResponsePage.recordingStatusText(), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(audioResponsePage.barPreviewResumeRecordingButton().find('circle'), {
+                'fill': css.color.defaultBackground
+            });
+            utilities.verifyCSS(audioResponsePage.barPreviewResumeRecordingButton().find('path'), {
+                'fill': css.color.recordingIcon
+            });
+            cy.log('CSS of tooltip of Resume recording button');
+            utilities.triggerMouseover(audioResponsePage.barPreviewResumeRecordingButton());
+            utilities.verifyCSS(audioResponsePage.tooltipText(), {
+                'color': css.color.helperText,
+                'background-color': css.color.defaultBackground,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.triggerMouseout(audioResponsePage.barPreviewResumeRecordingButton());
+            utilities.verifyElementVisibilityState(audioResponsePage.tooltipText(), 'notExist');
+            cy.log('CSS of tooltip of Stop recording button');
+            utilities.triggerMouseover(audioResponsePage.barPreviewStopRecordingButton());
+            utilities.verifyCSS(audioResponsePage.tooltipText(), {
+                'color': css.color.helperText,
+                'background-color': css.color.defaultBackground,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.triggerMouseout(audioResponsePage.barPreviewStopRecordingButton());
+            utilities.verifyElementVisibilityState(audioResponsePage.tooltipText(), 'notExist');
+        });
+
+        it('Accessibility of \'Preview\' section if recording is paused', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioResponsePage.previewTabQuestionWrapper());
+        });
+
+        it('When the recorder is in paused state and the user clicks on the \'Resume recording\' button, recording should get resumed. The help text should update to "Recording...". Progress bar should display the elapsed time and the remaining time until recording is in progress. User should be able to view the duration of their recorded speech in minutes, displayed as \'(min:secs / min:sec)\'. Pause recording and stop recording icon should be displayed. Start recording button should not be displayed', () => {
+            audioResponsePage.steps.resumeRecordingBarPreview();
+            utilities.verifyElementVisibilityState(audioResponsePage.barPreviewStartRecordingButton(), 'notExist');
+            utilities.verifyInnerText(audioResponsePage.recordingStatusText(), 'Recording...');
+            utilities.verifyElementVisibilityState(audioResponsePage.barPreviewPauseRecordingButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.barPreviewStopRecordingButton(), 'visible');
+            audioResponsePage.steps.verifyRecordingLengthAfterResumingBarPreview();
+        });
+
+        it('When the user hovers on \'Stop recording\' button, \'Stop recording\' text should be displayed in tooltip', () => {
+            audioResponsePage.barPreviewStopRecordingButton()
+                .verifyTooltip('Stop recording');
+        });
+
+        it('When the recording is in-progress and the user clicks on \'Stop recording\' icon, recording should stop, recorded audio response should be saved. Retake recording button, Play recording button should be displayed. User should be able to view the duration of their recorded speech in minutes, displayed as \'(min:secs)\'.', () => {
+            audioResponsePage.steps.resetQuestionPreview();
+            audioResponsePage.steps.startRecordingBarPreview();
+            audioResponsePage.steps.waitForRecordingToStartBarPreview();
+            audioResponsePage.steps.addWaitToRecordAudio(3000);
+            audioResponsePage.steps.stopRecordingBarPreview();
+            audioResponsePage.steps.verifyPlaybackTimeBarPreview('00:00', '00:04');
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackPlayButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.barPreviewRetakeButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackProgressBar(), 'visible');
+        });
+
+        it('CSS of \'Preview\' section if recording is stopped', { tags: 'css' }, () => {
+            audioResponsePage.steps.resetQuestionPreview();
+            audioResponsePage.steps.startRecordingBarPreview();
+            audioResponsePage.steps.waitForRecordingToStartBarPreview();
+            audioResponsePage.steps.addWaitToRecordAudio(3000);
+            audioResponsePage.steps.stopRecordingBarPreview();
+            utilities.verifyCSS(audioResponsePage.recordingStatusText(), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'Preview\' section if recording is stopped', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioResponsePage.previewTabQuestionWrapper());
+        });
+
+        it('When the user stops paused recording, recording should stop, recorded audio response should be saved. Progress bar and start recording button should be displayed on bar player. User should be able to view the duration of their recorded speech in minutes, displayed as \'(min:secs)\'. Play button should be displayed. Stop recording button should not be displayed', () => {
+            audioResponsePage.steps.resetQuestionPreview();
+            audioResponsePage.steps.startRecordingBarPreview();
+            audioResponsePage.steps.waitForRecordingToStartBarPreview();
+            audioResponsePage.steps.addWaitToRecordAudio(3000);
+            audioResponsePage.steps.pauseRecordingBarPreview();
+            audioResponsePage.steps.stopRecordingBarPreview();
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackPlayButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.barPreviewPlaybackTime(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackProgressBar(), 'visible');
+            audioResponsePage.steps.verifyPlaybackTimeBarPreview('00:00', '00:04');
+        });
+
+        it('When recording is inprogress and user has reached maximum recorder length, Retake and Play icon should be displayed along with progress bar. User should be able to view the duration of their recorded speech in minutes, displayed as \'(min:secs)\'.', () => {
+            audioResponsePage.steps.switchToEditTab();
+            audioResponsePage.steps.setMaximumRecorderLength(10);
+            audioResponsePage.steps.switchToPreviewTab();
+            audioResponsePage.steps.startRecordingBarPreview();
+            audioResponsePage.steps.waitForRecordingToStartBarPreview();
+            cy.log('Response will keep recording until maximum recording length of 10 seconds is reached');
+            utilities.verifyInnerText(audioResponsePage.recordingStatusText(), 'Recording...');
+            utilities.verifyElementVisibilityState(audioResponsePage.barPreviewRetakeButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackPlayButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.previewVolumeMeter(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.barPreviewPlaybackTime(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackProgressBar(), 'visible');
+            audioResponsePage.steps.verifyPlaybackTimeBarPreview('00:10', '00:10');
+        });
+    });
+
+    describe('Playback player : Default state', () => {
+        abortEarlySetup();
+        before(() => {
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+            cy.barsPreLoaderWait();
+            audioResponsePage.steps.selectAudioRecorderStyle('Bar');
+            audioResponsePage.steps.switchToPreviewTab();
+            audioResponsePage.steps.recordAndSaveAudioBarPreview(5000);
+        });
+
+        it('A playback player with audio wave form, Volume meter, Retake recording and Play buttons, Volume control and playback speed buttons, Progress bar and time in (mm:ss / mm:ss) format should be displayed', () => {
+            utilities.verifyElementVisibilityState(audioResponsePage.barPreviewRetakeButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackPlayButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.volumeControlButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackSpeedButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackProgressBar(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.barPreviewPlaybackTime(), 'visible');
+            audioResponsePage.steps.verifyPlaybackTimeBarPreview('00:00', '00:05');
+        });
+
+        it('The progress bar should have a slider so that user can click/drag to seek the audio.', () => {
+            utilities.verifyElementVisibilityState(audioResponsePage.progressBarSlider(), 'visible');
+        });
+
+        it('CSS of bar recorder style playback player', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioResponsePage.barPreviewRetakeButton().find('circle'), {
+                'fill': css.color.defaultBackground
+            });
+            utilities.verifyCSS(audioResponsePage.barPreviewRetakeButton().find('path'), {
+                'fill': css.color.recordingIcon
+            });
+            utilities.verifyCSS(audioResponsePage.playbackPlayButton(), {
+                'border': `1px solid ${css.color.secondaryBtnActive}`
+            });
+            utilities.verifyCSS(audioResponsePage.playbackPlayButton().find('svg rect'), {
+                'fill': css.color.secondaryBtnBg
+            });
+            utilities.verifyCSS(audioResponsePage.playbackPlayButton().find('svg path'), {
+                'stroke': css.color.secondaryBtnActive
+            });
+            utilities.verifyCSS(audioResponsePage.barPreviewPlaybackTime(), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(audioResponsePage.playbackProgressBar().find('.MuiSlider-thumbSizeMedium'), {
+                'background-color': css.color.activeButtons
+            });
+            utilities.verifyCSS(audioResponsePage.playbackProgressBar().find('.MuiSlider-rail'), {
+                'border': `1px solid ${css.color.activeButtons}`
+            });
+            utilities.verifyCSS(audioResponsePage.volumeControlButton().find('[data-name="minimal-volume-icon"]'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(audioResponsePage.playbackSpeedButton().find('[id="playback-speed"] path'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of playback player - default state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioResponsePage.barPreviewPlaybackWrapper());
+        });
+    });
+
+    describe('Playback player : Play, pause and seek', () => {
+        let actualAudioSeekedInPercent = 50
+        abortEarlySetup();
+        before(() => {
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+            cy.barsPreLoaderWait();
+            audioResponsePage.steps.selectAudioRecorderStyle('Bar');
+            audioResponsePage.steps.switchToPreviewTab();
+            audioResponsePage.steps.recordAndSaveAudioBarPreview(10000);
+        });
+
+        it('When the user hovers over the \'Play\' button, a tooltip \'Play\' should be displayed and on moving away the focus, the tooltip should disappear', () => {
+            audioResponsePage.playbackPlayButton()
+                .verifyTooltip('Play');
+        });
+
+        it('When the user clicks on \'Play\' button, then the audio should start playing. Timer should display the amount of audio that has been played and the total audio length in (mm:ss)/(mm:ss) format.', () => {
+            audioResponsePage.steps.startPlayback();
+            audioResponsePage.steps.waitForPlaybackToBeginBarPreview();
+            audioResponsePage.steps.verifyPlaybackTimeBarPreview('00:03', '00:10');
+        });
+
+        it('When the user hovers over the \'Pause\' button, a tooltip \'Pause\' should be displayed and on moving away the focus, the tooltip should disappear', () => {
+            audioResponsePage.playbackPauseButton()
+                .verifyTooltip('Pause');
+        });
+
+        it('CSS of \'Preview\' section if playback is initiated', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioResponsePage.barPreviewPlaybackTime(), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(audioResponsePage.playbackPauseButton().find('svg rect'), {
+                'fill': css.color.secondaryBtnBg
+            });
+            utilities.verifyCSS(audioResponsePage.playbackPauseButton().find('svg path'), {
+                'stroke': css.color.secondaryBtnActive
+            });
+        });
+
+        it('Accessibility of \'Preview\' section if playback is initiated', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioResponsePage.barPreviewPlaybackWrapper());
+        });
+
+        it('When the audio player is in playback state and the user clicks on \'Pause\' button, then playback should get paused. Progress bar and timer should not update further and the \'Pause\' button should get replaced with \'Play\' button', () => {
+            audioResponsePage.steps.resetQuestionPreview();
+            audioResponsePage.steps.recordAndSaveAudioBarPreview(10000);
+            audioResponsePage.steps.startPlayback();
+            audioResponsePage.steps.waitForPlaybackToBeginBarPreview();
+            audioResponsePage.steps.verifyPlaybackTimeBarPreview('00:05', '00:10');
+            audioResponsePage.steps.pauseAndVerifyProgressBarSliderPosition();
+            audioResponsePage.steps.verifyPlaybackTimeBarPreview('00:05', '00:10');
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackPlayButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackPauseButton(), 'notExist');
+        });
+
+        it('CSS of \'Preview\' section if playback is paused', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioResponsePage.playbackPlayButton().find('svg rect'), {
+                'fill': css.color.secondaryBtnBg
+            });
+            utilities.verifyCSS(audioResponsePage.playbackPlayButton().find('svg path'), {
+                'stroke': css.color.secondaryBtnActive
+            });
+        });
+
+        it('Accessibility of \'Preview\' section if if playback is paused', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioResponsePage.barPreviewPlaybackWrapper());
+        });
+
+        it('When audio player is in paused state and user clicks on \'Play\' button, then playback should get resumed and \'Play\' button should get replaced with \'Pause\' button.', () => {
+            audioResponsePage.steps.startPlayback();
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackPauseButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackPlayButton(), 'notExist');
+        });
+
+        it('When the user seeks the progress bar slider while the audio is playing, then the audio should continue to play from the position where the slider is seeked', () => {
+            audioResponsePage.steps.seekProgressBarSliderToCenter();
+            audioResponsePage.steps.addWaitToPlayAudio(1000);
+            audioResponsePage.steps.verifyProgressBarSliderPosition(actualAudioSeekedInPercent);
+        });
+
+        it('When the user seeks the progress bar slider while the audio is paused, then the audio playback should be in paused state and on playing the audio, then the audio should play from the position where the slider is seeked', () => {
+            audioResponsePage.steps.pausePlayback();
+            audioResponsePage.steps.seekProgressBarSliderToCenter();
+            audioResponsePage.steps.startPlayback();
+            audioResponsePage.steps.addWaitToPlayAudio(5000);
+            audioResponsePage.steps.verifyProgressBarSliderPosition(actualAudioSeekedInPercent);
+        });
+
+        it('When the audio playback is completed, the \'Pause\' button should get replaced with \'Play\' button', () => {
+            audioResponsePage.steps.verifyPlaybackTimeBarPreview('00:45', '00:45');
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackPlayButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackPauseButton(), 'notExist');
+            audioResponsePage.steps.verifyProgressBarSliderPosition(99);
+        });
+
+        it('CSS of progress bar in hover state', { tags: 'css' }, () => {
+            audioResponsePage.steps.hoverOnProgressBarSlider();
+            utilities.verifyCSS(audioResponsePage.progressBarSlider().parents('span[class*="MuiSlider-thumb"]'), {
+                'box-shadow': `${css.color.progressBarSliderHoverBackground} 0px 0px 0px 8px`
+            });
+        });
+    });
+
+    describe('Playback player : Volume control', () => {
+        abortEarlySetup();
+        before(() => {
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+            cy.barsPreLoaderWait();
+            audioResponsePage.steps.selectAudioRecorderStyle('Bar');
+            audioResponsePage.steps.switchToPreviewTab();
+            audioResponsePage.steps.recordAndSaveAudioBarPreview(10000);
+        });
+
+        audioResponsePage.tests.verifyVolumeControlFunctionality();
+    });
+
+    describe('Playback player : Playback speed', () => {
+        const playbackSpeedOptions = ['1', '1.25', '1.5', '2'];
+        abortEarlySetup();
+        before(() => {
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+            cy.barsPreLoaderWait();
+            audioResponsePage.steps.selectAudioRecorderStyle('Bar');
+            audioResponsePage.steps.switchToPreviewTab();
+            audioResponsePage.steps.recordAndSaveAudioBarPreview(10000);
+        });
+
+        audioResponsePage.tests.verifyPlaybackSpeedContents();
+
+        for (let index = 0; index < playbackSpeedOptions.length; index++) {
+            it(`When the user selects playback speed option ${playbackSpeedOptions[index]}x, the audio playback speed should be changed accordingly`, () => {
+                audioResponsePage.steps.resetQuestionPreview();
+                audioResponsePage.steps.recordAndSaveAudioBarPreview(12000);
+                utilities.hoverOverElement(audioResponsePage.playbackSpeedButton());
+                audioResponsePage.steps.selectPlaybackSpeed(`${playbackSpeedOptions[index]}x`);
+                audioResponsePage.steps.startPlayback();
+                audioResponsePage.steps.waitForPlaybackToBeginBarPreview();
+                audioResponsePage.steps.addWaitToPlayAudio(4000);
+                audioResponsePage.steps.pausePlayback();
+                audioResponsePage.steps.verifyPlaybackElapsedTime(1 + (4 * playbackSpeedOptions[index]), 'Bar');
+            });
+        };
+    });
+
+    describe('Playback player : Retake my audio response', () => {
+        abortEarlySetup();
+        before(() => {
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+            cy.barsPreLoaderWait();
+            audioResponsePage.steps.selectAudioRecorderStyle('Bar');
+            audioResponsePage.steps.setMaximumRecorderLength(10);
+            audioResponsePage.steps.switchToPreviewTab();
+            audioResponsePage.steps.recordAndSaveAudioBarPreview(5000);
+        });
+
+        it('When the user clicks on \'Retake\' icon button, \'Retake\' popup should be displayed along with \'Are you sure you want to overwrite the existing audio recording?\' message', () => {
+            audioResponsePage.steps.retakeRecordingBarPreview();
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'Retake');
+            audioResponsePage.steps.verifyRetakePopupContents();
+        });
+
+        audioResponsePage.tests.verifyRetakePopupCSSAndA11y();
+
+        it('When the user clicks on \'Cancel\' button, \'Retake\' popup should close and previous state of playback player should persist', () => {
+            audioResponsePage.steps.cancelRetake();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            utilities.verifyElementVisibilityState(audioResponsePage.barPreviewRetakeButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackPlayButton(), 'visible');
+            audioResponsePage.steps.verifyPlaybackTimeBarPreview('00:00', '00:05');
+        });
+
+        it('When the user clicks on Confirm button of the retake popup, the previous recording should get deleted and a new recording should begin', () => {
+            audioResponsePage.steps.retakeRecordingBarPreview();
+            audioResponsePage.steps.confirmRetake();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            utilities.verifyInnerText(audioResponsePage.recordingStatusText(), 'Recording...');
+            audioResponsePage.steps.verifyPlaybackTimeBarPreview('00:00', '00:10');
+        });
+    });
+});