itemengine-cypress-automation 1.0.189-e2e-execution-crash-fbb0d92.0 → 1.0.189

package/cypress/e2e/ILC/VideoResponseNew/standardRecorderStyle.js

@@ -0,0 +1,567 @@
+import { dialogBoxBase, videoResponsePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create item page - Video response: Preview tab - Standard recorder style, recording a video, video playback, playback controls', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    //Note: Default preview of standard recorder style is covered in previewContentsForAllViews.smoke.js
+    describe('Video response: Recording a video', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+            cy.barsPreLoaderWait();
+            videoResponsePage.steps.addTextInQuestionInstructionsInputField('Record a video');
+            videoResponsePage.steps.allotPoints(10);
+            videoResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('When the user clicks anywhere in the recording interface, then the recording should begin with a countdown and a status message: \'Preparing to record\', a disabled \'Pause\' button and an enabled \'Stop\' button should be displayed till the recording has not yet started and the recorder time should not change', () => {
+            videoResponsePage.steps.startRecording();
+            utilities.verifyElementVisibilityState(videoResponsePage.startRecordingCountDown(), 'visible');
+            videoResponsePage.steps.verifyRecordingStatus('Preparing to record');
+            utilities.verifyElementVisibilityState(videoResponsePage.pauseButton(), 'visible');
+            videoResponsePage.steps.verifyPauseButtonDisabledState();
+            utilities.verifyElementVisibilityState(videoResponsePage.stopButton(), 'visible');
+            utilities.verifyInnerText(videoResponsePage.recordingTimer(), '05:00');
+        });
+
+        it('When the recording starts, the countdown should disappear, status message should change to \'Recording...\', the \'Pause\' button should get enabled, user should be able to view the duration of their recorded video in minutes, displayed as \'(min:secs/min:sec)\'. Pause recording and Stop recording should be displayed in record player. Resume recording button should not be displayed.', () => {
+            utilities.verifyElementVisibilityState(videoResponsePage.startRecordingCountDown(), 'notExist');
+            videoResponsePage.steps.verifyRecordingStatus('Recording...');
+            videoResponsePage.steps.verifyPauseButtonEnabledState();
+            videoResponsePage.steps.verifyRecordingTime('00:04', '05:00');
+            utilities.verifyElementVisibilityState(videoResponsePage.pauseButton(), 'visible');
+            utilities.verifyElementVisibilityState(videoResponsePage.stopButton(), 'visible');
+            utilities.verifyElementVisibilityState(videoResponsePage.resumeButton(), 'notExist');
+        });
+
+        it('When the user hovers over the \'Pause\' button, a tooltip \'Pause recording\' should be displayed and on moving away the focus, the tooltip should disappear', () => {
+            videoResponsePage.pauseButton()
+                .verifyTooltip('Pause recording');
+        });
+
+        it('When the user hovers over the \'Stop\' button, a tooltip \'Stop recording\' should be displayed and on moving away the focus, the tooltip should disappear', () => {
+            videoResponsePage.stopButton()
+                .verifyTooltip('Stop recording');
+        });
+
+        it('CSS of \'Preview\' section once recording starts', { tags: 'css' }, () => {
+            //TODO:Need to add hover state and active state CSS of record button once https://redmine.zeuslearning.com/issues/539906 gets resolved
+            utilities.verifyCSS(videoResponsePage.recordingStatusText(), {
+                'color': css.color.defaultBackground,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular,
+            });
+            utilities.verifyCSS(videoResponsePage.recordingTimer(), {
+                'color': css.color.defaultBackground,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular,
+            });
+            utilities.verifyCSS(videoResponsePage.recordingStatusIcon().find('g'), {
+                'fill': css.color.recordingIcon,
+                'stroke': css.color.defaultBackground
+            });
+            utilities.verifyCSS(videoResponsePage.stopButton().find('rect').eq(0), {
+                'fill': css.color.secondaryBtnBg,
+            });
+            utilities.verifyCSS(videoResponsePage.stopButton().find('rect').eq(1), {
+                'fill': css.color.secondaryBtnActive,
+            });
+            utilities.verifyCSS(videoResponsePage.pauseButton().find('rect'), {
+                'fill': css.color.secondaryBtnBg,
+            });
+            utilities.verifyCSS(videoResponsePage.pauseButton().find('path'), {
+                'stroke': css.color.secondaryBtnActive,
+            });
+            videoResponsePage.steps.verifyTooltipCSS(videoResponsePage.pauseButton());
+            videoResponsePage.steps.verifyTooltipCSS(videoResponsePage.stopButton());
+        });
+
+        it('Accessibility of \'Preview\' section once recording starts', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(videoResponsePage.videoRecorderWrapper());
+            videoResponsePage.steps.verifyTooltipAccessibility(videoResponsePage.pauseButton());
+            videoResponsePage.steps.verifyTooltipAccessibility(videoResponsePage.stopButton());
+        });
+
+        it('When a recording is in progress and the user clicks on the \'Pause recording\' button, recording should pause and the status message should update to \'Recording paused\'. User should be able to view the duration of their recorded video 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 button', () => {
+            videoResponsePage.steps.resetQuestionPreview();
+            videoResponsePage.steps.startRecording();
+            videoResponsePage.steps.waitForRecordingToStart();
+            videoResponsePage.steps.addWaitToRecord(3000);
+            videoResponsePage.steps.pauseRecording();
+            videoResponsePage.steps.verifyRecordingTime('00:04', '05:00');
+            videoResponsePage.steps.verifyRecordingStatus('Recording paused');
+            utilities.verifyElementVisibilityState(videoResponsePage.pauseButton(), 'notExist');
+            utilities.verifyElementVisibilityState(videoResponsePage.resumeButton(), 'visible');
+            utilities.verifyElementVisibilityState(videoResponsePage.stopButton(), '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', () => {
+            videoResponsePage.resumeButton()
+                .verifyTooltip('Resume recording');
+        });
+
+        it('CSS of \'Preview\' section if recording is paused', { tags: 'css' }, () => {
+            utilities.verifyCSS(videoResponsePage.recordingStatusText(), {
+                'color': css.color.defaultBackground,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular,
+            });
+            utilities.verifyCSS(videoResponsePage.recordingStatusIcon().find('path'), {
+                'stroke': css.color.defaultBackground
+            });
+            utilities.verifyCSS(videoResponsePage.resumeButton().find('svg'), {
+                'fill': css.color.startRecordingIconFill,
+            });
+            utilities.verifyCSS(videoResponsePage.resumeButton().find('circle'), {
+                'fill': css.color.secondaryBtnBg,
+            });
+            utilities.verifyCSS(videoResponsePage.resumeButton().find('path'), {
+                'fill': css.color.startRecordingIconFill,
+            });
+            videoResponsePage.steps.verifyTooltipCSS(videoResponsePage.resumeButton());
+        });
+
+        it('Accessibility of \'Preview\' section if recording is paused', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(videoResponsePage.videoRecorderWrapper());
+            videoResponsePage.steps.verifyTooltipAccessibility(videoResponsePage.resumeButton());
+        });
+
+        it('When the recorder is in paused state and the user clicks on the \'Resume recording\' button, recording should get resumed. the status message should update to "Recording...". User should be able to view the duration of their recorded video in minutes, displayed as \'(min:secs/min:sec)\'. Pause recording and stop recording buttons should be displayed. Start recording button should not be displayed', () => {
+            videoResponsePage.steps.resumeRecording();
+            videoResponsePage.steps.verifyRecordingStatus('Recording...');
+            videoResponsePage.steps.verifyRecordingTime('00:05', '05:00');
+            utilities.verifyElementVisibilityState(videoResponsePage.pauseButton(), 'visible');
+            utilities.verifyElementVisibilityState(videoResponsePage.stopButton(), 'visible');
+        });
+
+        //Note: Failing due to video getting saved quickly and saving svg not being visible
+        it('When a recording is in progress and the user clicks on \'Stop recording\' button, a status message: \'Saving\' should be displayed, the recording should stop, the recorded video response should be saved and \'Your response has been recorded.\' status message should be displayed', () => {
+            videoResponsePage.steps.resetQuestionPreview();
+            videoResponsePage.steps.startRecording();
+            videoResponsePage.steps.waitForRecordingToStart();
+            videoResponsePage.steps.addWaitToRecord(10000);
+            videoResponsePage.steps.stopAndVerifySavingAndRecordingLength();
+            utilities.verifyInnerText(videoResponsePage.savedResponseText(), 'Your response has been recorded.');
+            utilities.verifyElementVisibilityState(videoResponsePage.savedResponseText(), 'visible');
+        });
+
+        it('When a recording is in progress and the user first pauses the recording and then stops recording, then the recording should stop, recorded video response should be saved. User should be able to view the duration of their recorded video in minutes, displayed as \'(min:secs)\'.', () => {
+            videoResponsePage.steps.resetQuestionPreview();
+            videoResponsePage.steps.startRecording();
+            videoResponsePage.steps.waitForRecordingToStart();
+            videoResponsePage.steps.addWaitToRecord(2000);
+            videoResponsePage.steps.pauseRecording();
+            videoResponsePage.steps.stopAndVerifySavingAndRecordingLength();
+        });
+
+        it('CSS of \'Preview\' section if recording is saved', { tags: 'css' }, () => {
+            videoResponsePage.steps.resetQuestionPreview();
+            videoResponsePage.steps.recordAndSaveVideo(3000);
+            utilities.verifyCSS(videoResponsePage.recordingStatusText(), {
+                'color': css.color.defaultBackground,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular,
+            });
+            utilities.verifyCSS(videoResponsePage.recordingStatusIcon().find('g'), {
+                'color': css.color.defaultBackground,
+            });
+            utilities.verifyCSS(videoResponsePage.fullScreenButton().find('svg'), {
+                'fill': css.color.secondaryBtnBg,
+            });
+        });
+
+        it('Accessibility of \'Preview\' section if recording is saved', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(videoResponsePage.playbackPlayButton().parents('.video-player-wrapper'));
+        });
+
+        it('When a recording is in progress and user has reached maximum recording duration, the recorded video response should be saved and \'Your response has been recorded.\' status message should be displayed. User should be able to view the duration of their recorded video in minutes, displayed as \'(min:secs)\'.', () => {
+            videoResponsePage.steps.switchToEditTab();
+            videoResponsePage.steps.setMaximumRecordingDuration(5);
+            videoResponsePage.steps.switchToPreviewTab();
+            videoResponsePage.steps.startRecording();
+            videoResponsePage.steps.waitForRecordingToStart();
+            videoResponsePage.steps.addWaitToRecord(5000);
+            utilities.verifyInnerText(videoResponsePage.savedResponseText(), 'Your response has been recorded.');
+            videoResponsePage.steps.verifyVideoPlaybackTimer('00:00', '00:05');
+        });
+
+        it('When a recording is saved, A video player with \'Retake recording\' button, \'Play\' button and progress bar should be displayed. User should be able to view the duration of their recorded video in minutes, displayed as \'(min:secs)\'. Volume control, Playback speed and full screen buttons should be displayed', () => {
+            utilities.verifyElementVisibilityState(videoResponsePage.playbackPlayButton(), 'visible');
+            utilities.verifyElementVisibilityState(videoResponsePage.retakeRecordingButton(), 'visible');
+            utilities.verifyElementVisibilityState(videoResponsePage.stopButton(), 'notExist');
+            utilities.verifyElementVisibilityState(videoResponsePage.playerTimer(), 'visible');
+            utilities.verifyElementVisibilityState(videoResponsePage.progressBar(), 'visible');
+            utilities.verifyElementVisibilityState(videoResponsePage.volumeControlButton(), 'visible');
+            utilities.verifyElementVisibilityState(videoResponsePage.playbackSpeedButton(), 'visible');
+            utilities.verifyElementVisibilityState(videoResponsePage.fullScreenButton(), 'visible');
+        });
+
+        //Cannot cover full screen functionality cases in cypress, added in manual sheet
+        it('When the user hovers over the full screen button, a tooltip \'Full screen\' should be displayed', () => {
+            videoResponsePage.fullScreenButton()
+                .verifyTooltip('Full screen');
+        });
+    });
+
+    describe('Video response playback: Play, pause and seek', () => {
+        let actualVideoSeekedInPercent = 50
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+            cy.barsPreLoaderWait();
+            videoResponsePage.steps.switchToPreviewTab();
+            videoResponsePage.steps.recordAndSaveVideo(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', () => {
+            videoResponsePage.playbackPlayButton()
+                .verifyTooltip('Play');
+        });
+
+        it('When the user clicks on \'Play\' button, then user should be able to playback the recording. Timer should display the amount of video that has been played and the total recording length in (mm:ss)/(mm:ss) format. \'Your response has been recorded\' message should be displayed below video player', () => {
+            videoResponsePage.steps.startPlayback();
+            videoResponsePage.steps.waitForPlaybackToBegin();
+            videoResponsePage.steps.verifyVideoPlaybackTimer('00:03', '00:10');
+            utilities.verifyInnerText(videoResponsePage.savedResponseText(), 'Your response has been recorded.');
+        });
+
+        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', () => {
+            videoResponsePage.playbackPauseButton()
+                .verifyTooltip('Pause');
+        });
+
+        it('CSS of \'Preview\' section if playback is initiated', { tags: 'css' }, () => {
+            utilities.verifyCSS(videoResponsePage.retakeRecordingButton().find('circle'), {
+                'fill': css.color.secondaryBtnBg,
+            });
+            utilities.verifyCSS(videoResponsePage.retakeRecordingButton().find('path'), {
+                'fill': css.color.startRecordingIconFill,
+            });
+            utilities.verifyCSS(videoResponsePage.playbackPauseButton().find('rect'), {
+                'fill': css.color.secondaryBtnBg,
+            });
+            utilities.verifyCSS(videoResponsePage.playbackPauseButton().find('path'), {
+                'stroke': css.color.secondaryBtnActive,
+            });
+            utilities.verifyCSS(videoResponsePage.playerTimer(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular,
+            });
+            utilities.verifyCSS(videoResponsePage.progressBar().find('.MuiSlider-rail'), {
+                'background-color': css.color.defaultBackground,
+            });
+            utilities.verifyCSS(videoResponsePage.progressBar().find('.MuiSlider-track'), {
+                'background-color': css.color.videoProgressBarElapsedFill,
+            });
+        });
+
+        it('Accessibility of \'Preview\' section if playback is initiated', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(videoResponsePage.playbackPauseButton().parents('.video-player-wrapper'));
+        });
+
+        it('When the video 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', () => {
+            cy.log('Pre-step: resetting the recording and playing the newly recorded video')
+            videoResponsePage.steps.resetQuestionPreview()
+            videoResponsePage.steps.recordAndSaveVideo(20000);
+            videoResponsePage.steps.startPlayback();
+            videoResponsePage.steps.waitForPlaybackToBegin();
+            videoResponsePage.steps.addWaitToPlayVideo(10000);
+            videoResponsePage.steps.verifyVideoPlaybackTimer('00:11', '00:20');
+            videoResponsePage.steps.pauseAndVerifyProgressBarSliderPosition();
+            utilities.verifyElementVisibilityState(videoResponsePage.playbackPlayButton(), 'visible');
+            utilities.verifyElementVisibilityState(videoResponsePage.playbackPauseButton(), 'notExist');
+        });
+
+        it('CSS of \'Preview\' section if playback is paused', { tags: 'css' }, () => {
+            utilities.verifyCSS(videoResponsePage.playbackPlayButton().find('rect'), {
+                'fill': css.color.secondaryBtnBg,
+            });
+            utilities.verifyCSS(videoResponsePage.playbackPlayButton().find('path'), {
+                'stroke': css.color.secondaryBtnActive,
+            });
+        });
+
+        it('Accessibility of \'Preview\' section if if playback is paused', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(videoResponsePage.playbackPlayButton().parents('.video-player-wrapper'));
+        });
+
+        it('When video 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.', () => {
+            videoResponsePage.steps.startPlayback();
+            utilities.verifyElementVisibilityState(videoResponsePage.playbackPlayButton(), 'notExist');
+            utilities.verifyElementVisibilityState(videoResponsePage.playbackPauseButton(), 'visible');
+        });
+
+        it('When the user seeks the progress bar slider while the video is playing, then the video should continue to play from the position where the slider is seeked', () => {
+            videoResponsePage.steps.seekProgressBarSliderToCenter();
+            videoResponsePage.steps.addWaitToPlayVideo(1000);
+            videoResponsePage.steps.verifyProgressBarSliderPosition(actualVideoSeekedInPercent);
+        });
+
+        it('When the user seeks the progress bar slider while the video is paused, then the video playback should be in paused state and on playing the video, then the video should play from the position where the slider is seeked', () => {
+            videoResponsePage.steps.pausePlayback();
+            videoResponsePage.steps.seekProgressBarSliderToCenter();
+            videoResponsePage.steps.startPlayback();
+            videoResponsePage.steps.verifyProgressBarSliderPosition(actualVideoSeekedInPercent);
+        });
+
+        it('When the video playback is completed, the \'Pause\' button should get replaced with \'Play\' button', () => {
+            videoResponsePage.steps.verifyVideoPlaybackTimer('00:20', '00:20');
+            utilities.verifyElementVisibilityState(videoResponsePage.playbackPlayButton(), 'visible');
+            utilities.verifyElementVisibilityState(videoResponsePage.playbackPauseButton(), 'notExist');
+            videoResponsePage.steps.verifyProgressBarSliderPosition(99);
+        });
+
+        it('CSS of progress bar in hover state', { tags: 'css' }, () => {
+            videoResponsePage.steps.hoverOnProgressBarSlider();
+            utilities.verifyCSS(videoResponsePage.progressBarSlider().parents('span[class*="MuiSlider-thumb"]'), {
+                'box-shadow': `${css.color.progressBarSliderHoverBackground} 0px 0px 0px 8px`
+            });
+        });
+    });
+
+    describe('Video response playback: Volume control', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+            cy.barsPreLoaderWait();
+            videoResponsePage.steps.switchToPreviewTab();
+            videoResponsePage.steps.recordAndSaveVideo(5000);
+        });
+
+        it('When the user hovers over \'Volume control\' button, volume control settings should open and by default it should be set to full volume and on hovering away from the button, the volume sliders should disappear', () => {
+            videoResponsePage.steps.hoverOnVolumeControlButton();
+            utilities.verifyElementVisibilityState(videoResponsePage.volumeControlSlider(), 'visible');
+            videoResponsePage.steps.verifyVolumeOfPlaybackPlayer('100');
+            utilities.hoverAwayFromElement();
+            utilities.verifyElementVisibilityState(videoResponsePage.volumeControlSlider(), 'notExist');
+        });
+
+        it('When volume is not set as 0 and user hovers on \'Volume control\' button, then \'Mute\' text should be displayed in a tooltip and on hovering away from the button, the tooltip should disappear', () => {
+            videoResponsePage.steps.hoverOnVolumeControlButton();
+            utilities.verifyElementVisibilityState(videoResponsePage.tooltipText(), 'visible');
+            utilities.verifyInnerText(videoResponsePage.tooltipText(), 'Mute');
+            utilities.hoverAwayFromElement();
+            utilities.verifyElementVisibilityState(videoResponsePage.tooltipText(), 'notExist');
+        });
+
+        it('When the user hovers over \'Volume control slider\', then \'Volume control\' text should be displayed in a tooltip and on hovering away from the button, the tooltip should disappear', () => {
+            videoResponsePage.steps.hoverOnVolumeControlButton();
+            videoResponsePage.steps.hoverOnVolumeControlSlider();
+            videoResponsePage.steps.hoverAwayFromVolumeControlButton();
+            utilities.verifyElementVisibilityState(videoResponsePage.tooltipText(), 'visible');
+            utilities.verifyInnerText(videoResponsePage.tooltipText(), 'Volume control');
+            utilities.hoverAwayFromElement();
+            utilities.verifyElementVisibilityState(videoResponsePage.volumeControlSlider(), 'notExist');
+            utilities.verifyElementVisibilityState(videoResponsePage.tooltipText(), 'notExist');
+        });
+
+        it('When volume is not set as 0 and user clicks on volume control button, then the video should be muted and the volume control button should change to a muted state', () => {
+            videoResponsePage.steps.clickOnVolumeButton();
+            videoResponsePage.steps.hoverOnVolumeControlButton();
+            videoResponsePage.steps.verifyVolumeOfPlaybackPlayer('0');
+            utilities.hoverAwayFromElement();
+            utilities.verifyElementVisibilityState(videoResponsePage.volumeControlSlider(), 'notExist');
+            utilities.verifyElementVisibilityState(videoResponsePage.muteVolumeIcon(), 'visible');
+            videoResponsePage.steps.focusOutFromVolumeControlButton();
+        });
+
+        it('When the user hovers on muted \'Volume control\' button, \'Unmute\' text should be displayed in tooltip', () => {
+            videoResponsePage.steps.hoverOnVolumeControlButton();
+            utilities.verifyElementVisibilityState(videoResponsePage.tooltipText(), 'visible');
+            utilities.verifyInnerText(videoResponsePage.tooltipText(), 'Unmute');
+            utilities.hoverAwayFromElement();
+            utilities.verifyElementVisibilityState(videoResponsePage.tooltipText(), 'notExist');
+        });
+
+        it('When the user clicks on the muted volume control button then the volume setting slider should return to full volume and the volume control button should change to an unmuted state', () => {
+            videoResponsePage.steps.clickOnVolumeButton();
+            videoResponsePage.steps.hoverOnVolumeControlButton();
+            videoResponsePage.steps.verifyVolumeOfPlaybackPlayer('100');
+            utilities.verifyElementVisibilityState(videoResponsePage.unmutedVolumeIcon(), 'visible');
+        });
+
+        it('CSS of volume control section', { tags: 'css' }, () => {
+            utilities.verifyCSS(videoResponsePage.volumeControlSlider(), {
+                'background': `${css.color.transparent} linear-gradient(to right, ${css.color.progressBarElapsedFill} 0%, ${css.color.progressBarElapsedFill} 100%, ${css.color.progressBarRemainingFill} 0%, ${css.color.progressBarRemainingFill} 100%) repeat scroll 0% 0%, 'auto padding-box border-box`
+            });
+            utilities.verifyCSS(videoResponsePage.volumeControlButton().find('g path'), {
+                'fill': css.color.secondaryBtnBg,
+            });
+        });
+
+        it('Accessibility of volume control section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(videoResponsePage.volumeControlSlider());
+            cy.checkAccessibility(videoResponsePage.playbackPlayButton().parents('.video-player-wrapper'));
+        });
+
+        it('When the user drags the volume control all the way down, video should be muted and the button should update to a muted state', () => {
+            videoResponsePage.steps.setVolumeSliderForPlayback(0);
+            videoResponsePage.steps.verifyVolumeOfPlaybackPlayer('0');
+            utilities.verifyElementVisibilityState(videoResponsePage.muteVolumeIcon(), 'visible');
+        });
+
+        it('CSS of volume control section in muted state', { tags: 'css' }, () => {
+            utilities.verifyCSS(videoResponsePage.volumeControlSlider(), {
+                'background': `${css.color.transparent} linear-gradient(to right, ${css.color.progressBarElapsedFill} 0%, ${css.color.progressBarElapsedFill} 0%, ${css.color.progressBarRemainingFill} -100%, ${css.color.progressBarRemainingFill} 100%) repeat scroll 0% 0%, 'auto padding-box border-box`
+            });
+            utilities.verifyCSS(videoResponsePage.volumeControlButton().find('g g path'), {
+                'fill': css.color.secondaryBtnBg,
+            });
+        });
+
+        it('Accessibility of volume control section in muted state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(videoResponsePage.volumeControlSlider());
+            cy.checkAccessibility(videoResponsePage.playbackPlayButton().parents('.video-player-wrapper'));
+        });
+
+        it('User should be able to unmute the video by dragging the volume control higher again', () => {
+            videoResponsePage.steps.setVolumeSliderForPlayback(99);
+            videoResponsePage.steps.verifyVolumeOfPlaybackPlayer('100');
+            utilities.verifyElementVisibilityState(videoResponsePage.unmutedVolumeIcon(), 'visible');
+        });
+    });
+
+    describe('Video response playback: Playback speed', () => {
+        const playbackSpeedOptions = ['1x', '1.25x', '1.5x', '2x'];
+        const playbackSpeedMultiplier = [1, 1.25, 1.5, 2];
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+            cy.barsPreLoaderWait();
+            videoResponsePage.steps.switchToPreviewTab();
+            videoResponsePage.steps.recordAndSaveVideo(4000);
+        });
+
+        it('When the user hovers overs the playback button, a tooltip \'Playback speed\' should be displayed and on hovering away from the button, the tooltip should disappear', () => {
+            videoResponsePage.playbackSpeedButton()
+                .verifyTooltip('Playback speed');
+        });
+
+        it('When the user hovers overs the playback button, a list of 4 playback speed options - 1x, 1.25x, 1.5x, 2x should be displayed and by default 1x should be in selected state', () => {
+            videoResponsePage.steps.hoverOnPlaybackSpeedButton();
+            utilities.verifyElementVisibilityState(videoResponsePage.playbackSpeedOptionsList(), 'visible');
+            utilities.verifyElementCount(videoResponsePage.playbackSpeedOption(), 4);
+            videoResponsePage.steps.verifyPlaybackSpeedListOptions();
+            //TODO: need to add selected state assertion when https://redmine.zeuslearning.com/issues/540695 gets fixed
+        })
+
+        it('CSS of playback speed options', { tags: 'css' }, () => {
+            utilities.verifyCSS(videoResponsePage.playbackSpeedButton().find('g'), {
+                'stroke': css.color.secondaryBtnBg,
+            });
+            utilities.verifyCSS(videoResponsePage.playbackSpeedOption().eq(0), {
+                'color': css.color.liText,
+                'background-color': css.color.liTextSelectedBg,
+                'font-size': css.fontSize.small
+            });
+            utilities.verifyCSS(videoResponsePage.playbackSpeedOption().eq(1), {
+                'color': css.color.liText,
+                'background-color': css.color.transparent,
+                'font-size': css.fontSize.small
+            });
+        });
+
+        it('Accessibility of playback speed options', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(videoResponsePage.playbackSpeedButton().parents('.video-player-wrapper'));
+            cy.checkAccessibility(videoResponsePage.playbackSpeedOptionsList());
+        });
+
+        for (let index = 0; index < playbackSpeedOptions.length; index++) {
+            it(`When the user selects playback speed option ${playbackSpeedOptions[index]}x, the video playback speed should be changed accordingly`, () => {
+                videoResponsePage.steps.resetQuestionPreview();
+                videoResponsePage.steps.recordAndSaveVideo(12000);
+                videoResponsePage.steps.hoverOnPlaybackSpeedButton();
+                videoResponsePage.steps.selectPlaybackSpeed(playbackSpeedOptions[index])
+                videoResponsePage.steps.startPlayback();
+                videoResponsePage.steps.waitForPlaybackToBegin();
+                videoResponsePage.steps.addWaitToPlayVideo(4000);
+                videoResponsePage.steps.pausePlayback();
+                videoResponsePage.steps.verifyPlaybackElapsedTime(1 + (4 * playbackSpeedMultiplier[index]));
+            });
+        }
+    });
+
+    describe('Video response playback: Retake recording', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+            cy.barsPreLoaderWait();
+            videoResponsePage.steps.switchToPreviewTab();
+            videoResponsePage.steps.recordAndSaveVideo(5000);
+        });
+
+        it('When the user hovers over the \'Retake recording\' button, a tooltip \'Retake recording\' should be displayed and on moving away the focus, the tooltip should disappear', () => {
+            videoResponsePage.retakeRecordingButton()
+                .verifyTooltip('Retake recording');
+        });
+
+        it('When the user clicks on \'Retake recording\' button, \'Retake recording\' popup should be displayed along with \'Are you sure you want to overwrite the existing audio recording?\' message', () => {
+            videoResponsePage.steps.retakeRecording();
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'Retake');
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBoxTitle(), 'visible');
+            utilities.verifyInnerText(videoResponsePage.retakePopupContent(), 'Are you sure you want to overwrite the existing video recording?');
+            utilities.verifyInnerText(videoResponsePage.confirmRetakeButton(), 'Confirm');
+            utilities.verifyElementVisibilityState(videoResponsePage.confirmRetakeButton(), 'visible');
+            utilities.verifyInnerText(videoResponsePage.cancelRetakeButton(), 'Cancel');
+            utilities.verifyElementVisibilityState(videoResponsePage.cancelRetakeButton(), 'visible');
+        });
+
+        it('CSS of \'Retake recording\' 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.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(videoResponsePage.retakePopupContent(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            })
+            utilities.verifyCSS(videoResponsePage.confirmRetakeButton(), {
+                'background-color': css.color.deleteBtn
+            });
+            utilities.verifyCSS(videoResponsePage.confirmRetakeButton().find('span'), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(videoResponsePage.cancelRetakeButton(), {
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(videoResponsePage.cancelRetakeButton().find('span'), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'Retake recording\' popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dialogBoxBase.dialogBox());
+        });
+
+        it('When the user clicks on \'Cancel\' button, \'Retake recording\' popup should close and previous state of playback player should persist', () => {
+            videoResponsePage.steps.cancelRetake();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            utilities.verifyElementVisibilityState(videoResponsePage.retakeRecordingButton(), 'visible');
+            utilities.verifyElementVisibilityState(videoResponsePage.playbackPlayButton(), 'visible');
+            videoResponsePage.steps.verifyVideoPlaybackTimer('00:00', '00:05');
+        });
+
+        it('When the user clicks on Confirm button of the Retake recording popup, the previous recording should get deleted and a new recording should begin', () => {
+            videoResponsePage.steps.retakeRecording();
+            videoResponsePage.steps.confirmRetake();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            videoResponsePage.steps.waitForRecordingToStart();
+            videoResponsePage.steps.verifyRecordingStatus('Recording...')
+        });
+    });
+});