itemengine-cypress-automation 1.0.105 → 1.0.107

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

@@ -0,0 +1,554 @@
+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 standard audio recorder style', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Preview of standard audio recorder style', () => {
+        abortEarlySetup();
+        before(() => {
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+            cy.barsPreLoaderWait();
+            audioResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('By default: \'Click the button to start recording...\' help text message, rec button, mic icon, \'Allow microphone access\' help text should be displayed in \'Standard audio recorder\'. Maximum recording length should be displayed in minutes(mm:ss) format.', () => {
+            utilities.verifyInnerText(audioResponsePage.standardPreviewRecorderHelpText(), 'Click the button to start recording...');
+            utilities.verifyElementVisibilityState(audioResponsePage.standardPreviewRecorderHelpText(), 'visible');
+            utilities.verifyInnerText(audioResponsePage.standardPreviewStartRecordingButton(), 'REC');
+            utilities.verifyElementVisibilityState(audioResponsePage.standardPreviewStartRecordingButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.microphoneIcon(), 'visible');
+            utilities.verifyInnerText(audioResponsePage.allowMicrophoneAccessHelpText(), 'Allow microphone access');
+            utilities.verifyElementVisibilityState(audioResponsePage.allowMicrophoneAccessHelpText(), 'visible');
+            utilities.verifyInnerText(audioResponsePage.standardPreviewRecordTime(), '15:00');
+            utilities.verifyElementVisibilityState(audioResponsePage.standardPreviewRecordTime(), 'visible');
+        });
+
+        it('CSS of \'Preview\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioResponsePage.standardPreviewStartRecordingButton(), {
+                'color': css.color.defaultBackground,
+                'font-size': css.fontSize.extraLarge,
+                'font-weight': css.fontWeight.semibold,
+                'border': `2px solid ${css.color.defaultBackground}`,
+                'background-color': css.color.recordingIcon
+            });
+            utilities.verifyCSS(audioResponsePage.standardPreviewRecorderHelpText(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            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.standardPreviewRecordTime(), {
+                '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..." while the glow animation should be displayed behind the mic icon. User should be able to view the duration of their recorded speech in minutes, displayed as \'(min:secs / min:sec)\'. Volume meter, Pause recording and Stop recording buttons should be displayed in record player. Start recording button should not be displayed.', () => {
+            audioResponsePage.steps.startRecordingStandardPreview();
+            utilities.verifyElementVisibilityState(audioResponsePage.startRecordingCountDown(), 'visible');
+            utilities.verifyInnerText(audioResponsePage.recordingStatusText(), 'Preparing to record');
+            utilities.verifyElementVisibilityState(audioResponsePage.recordingStatusIcon(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.standardPreviewPauseRecordingButton(), 'visible');
+            utilities.verifyElementDisabled(audioResponsePage.standardPreviewPauseRecordingButton());
+            utilities.verifyElementVisibilityState(audioResponsePage.micGlowAnimation(), 'visible');
+            audioResponsePage.steps.waitForRecordingToStartStandardPreview();
+            audioResponsePage.steps.addWaitToRecordAudio(2000);
+            audioResponsePage.steps.verifyRecordingTimeStandardPreview('00:03', '15:00');
+            utilities.verifyElementVisibilityState(audioResponsePage.standardPreviewPauseRecordingButton(), 'visible');
+            utilities.verifyElementNotDisabled(audioResponsePage.standardPreviewPauseRecordingButton());
+            utilities.verifyElementVisibilityState(audioResponsePage.standardPreviewStopRecordingButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.recordingStatusIcon(), 'visible');
+            utilities.verifyInnerText(audioResponsePage.recordingStatusText(), 'Recording...');
+            utilities.verifyElementVisibilityState(audioResponsePage.previewVolumeMeter(), 'visible');
+            audioResponsePage.steps.verifyVolumeMeterInDb('0dB');
+        });
+
+        //Comment : Unable to check volume meter go high/low (css) in cypress when recording is in progress, added to manual sheet
+        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.startRecordingStandardPreview();
+            audioResponsePage.steps.waitForRecordingToStartStandardPreview();
+            utilities.verifyCSS(audioResponsePage.recordingMicIcon().find('svg path').eq(1), {
+                'fill': css.color.microphoneIcon
+            });
+            utilities.verifyCSS(audioResponsePage.recordingStatusText(), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(audioResponsePage.standardPreviewPauseRecordingButton(), {
+                'border': `1px solid ${css.color.secondaryBtnActive}`
+            });
+            utilities.verifyCSS(audioResponsePage.standardPreviewPauseRecordingButton().find('svg rect'), {
+                'fill': css.color.secondaryBtnBg
+            });
+            utilities.verifyCSS(audioResponsePage.standardPreviewPauseRecordingButton().find('svg path'), {
+                'stroke': css.color.secondaryBtnActive
+            });
+            utilities.verifyCSS(audioResponsePage.standardPreviewStopRecordingButton(), {
+                'border': `1px solid ${css.color.secondaryBtnActive}`
+            });
+            utilities.verifyCSS(audioResponsePage.standardPreviewStopRecordingButton().find('svg rect').eq(0), {
+                'fill': css.color.secondaryBtnBg
+            });
+            utilities.verifyCSS(audioResponsePage.standardPreviewStopRecordingButton().find('svg rect').eq(1), {
+                'fill': css.color.secondaryBtnActive
+            });
+            utilities.verifyCSS(audioResponsePage.micGlowAnimation(), {
+                'background-color': css.color.micGlowAnimation
+            });
+            utilities.verifyCSS(audioResponsePage.standardPreviewRecordTime(), {
+                '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.standardPreviewPauseRecordingButton()
+                .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\'. The mic icon\'s glow animation should disappear and the volume meter should drop to \'0dB\'. 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.startRecordingStandardPreview();
+            audioResponsePage.steps.waitForRecordingToStartStandardPreview();
+            audioResponsePage.steps.addWaitToRecordAudio(1000);
+            audioResponsePage.steps.pauseRecordingStandardPreview();
+            utilities.verifyInnerText(audioResponsePage.recordingStatusText(), 'Recording paused');
+            utilities.verifyElementVisibilityState(audioResponsePage.pauseIcon(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.recordingMicIcon(), 'visible');
+            audioResponsePage.steps.verifyMicGlowAnimationNotVisible();
+            audioResponsePage.steps.verifyRecordingTimeStandardPreview('00:02', '15:00');
+            utilities.verifyElementVisibilityState(audioResponsePage.standardPreviewPauseRecordingButton(), 'notExist');
+            utilities.verifyElementVisibilityState(audioResponsePage.standardPreviewResumeRecordingButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.standardPreviewStopRecordingButton(), 'visible');
+            audioResponsePage.steps.verifyVolumeMeterInDb('0dB');
+        });
+
+        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.standardPreviewResumeRecordingButton()
+                .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.standardPreviewResumeRecordingButton().find('circle'), {
+                'fill': css.color.defaultBackground
+            });
+            utilities.verifyCSS(audioResponsePage.standardPreviewResumeRecordingButton().find('path'), {
+                'fill': css.color.recordingIcon
+            });
+            cy.log('CSS of tooltip of Resume recording button');
+            utilities.triggerMouseover(audioResponsePage.standardPreviewResumeRecordingButton());
+            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.standardPreviewResumeRecordingButton());
+            utilities.verifyElementVisibilityState(audioResponsePage.tooltipText(), 'notExist');
+            cy.log('CSS of tooltip of Stop recording button');
+            utilities.triggerMouseover(audioResponsePage.standardPreviewStopRecordingButton());
+            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.standardPreviewStopRecordingButton());
+            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 glow animation behind the mic icon should start again, and the help text should update to "Recording...". The volume meter should also detect the sound levels during 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.resumeRecordingStandardPreview();
+            utilities.verifyElementVisibilityState(audioResponsePage.standardPreviewStartRecordingButton(), 'notExist');
+            utilities.verifyElementVisibilityState(audioResponsePage.micGlowAnimation(), 'visible');
+            utilities.verifyInnerText(audioResponsePage.recordingStatusText(), 'Recording...');
+            utilities.verifyElementVisibilityState(audioResponsePage.previewVolumeMeter(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.standardPreviewPauseRecordingButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.standardPreviewStopRecordingButton(), 'visible');
+            audioResponsePage.steps.verifyVolumeMeterInDb('0dB');
+            audioResponsePage.steps.verifyRecordingLengthAfterResumingStandardPreview();
+        });
+
+        it('When the user hovers on \'Stop recording\' button, \'Stop recording\' text should be displayed in tooltip', () => {
+            audioResponsePage.standardPreviewStopRecordingButton()
+                .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 and \'Your response has been recorded.\' help text message, 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)\'. Volume meter should be displayed', () => {
+            audioResponsePage.steps.resetQuestionPreview();
+            audioResponsePage.steps.startRecordingStandardPreview();
+            audioResponsePage.steps.waitForRecordingToStartStandardPreview();
+            audioResponsePage.steps.addWaitToRecordAudio(3000);
+            audioResponsePage.steps.stopRecordingStandardPreview();
+            audioResponsePage.steps.verifyPlaybackTimeStandardPreview('00:00', '00:04');
+            utilities.verifyInnerText(audioResponsePage.recordedResponseHelpText(), 'Your response has been recorded.');
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackPlayButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.standardPreviewRetakeButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackWaveform(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.previewVolumeMeter(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackProgressBar(), 'visible');
+        });
+
+        it('CSS of \'Preview\' section if recording is stopped', { tags: 'css' }, () => {
+            audioResponsePage.steps.resetQuestionPreview();
+            audioResponsePage.steps.startRecordingStandardPreview();
+            audioResponsePage.steps.waitForRecordingToStartStandardPreview();
+            audioResponsePage.steps.addWaitToRecordAudio(3000);
+            audioResponsePage.steps.stopRecordingStandardPreview();
+            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 and \'Your response has been recorded\' help text message, progress bar and start recording button should be displayed on standard player. User should be able to view the duration of their recorded speech in minutes, displayed as \'(min:secs)\'. Volume meter and Play button should be displayed. Stop recording button should not be displayed', () => {
+            audioResponsePage.steps.resetQuestionPreview();
+            audioResponsePage.steps.startRecordingStandardPreview();
+            audioResponsePage.steps.waitForRecordingToStartStandardPreview();
+            audioResponsePage.steps.addWaitToRecordAudio(3000);
+            audioResponsePage.steps.pauseRecordingStandardPreview();
+            audioResponsePage.steps.stopRecordingStandardPreview();
+            utilities.verifyInnerText(audioResponsePage.recordedResponseHelpText(), 'Your response has been recorded.');
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackPlayButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.previewVolumeMeter(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.standardPreviewPlaybackTime(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackProgressBar(), 'visible');
+            audioResponsePage.steps.verifyPlaybackTimeStandardPreview('00:00', '00:04');
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/560794
+        it('When recording is inprogress and user has reached maximum recorder length, \'Your response has been recorded\' message should be displayed below mic icon. 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)\'. Volume meter should not be displayed in player', () => {
+            audioResponsePage.steps.switchToEditTab();
+            audioResponsePage.steps.setMaximumRecorderLength(10);
+            audioResponsePage.steps.switchToPreviewTab();
+            audioResponsePage.steps.startRecordingStandardPreview();
+            audioResponsePage.steps.waitForRecordingToStartStandardPreview();
+            cy.log('Response will keep recording until maximum recording length of 10 seconds is reached');
+            utilities.verifyInnerText(audioResponsePage.standardPreviewRecorderHelpText(), 'Recording...');
+            utilities.verifyInnerText(audioResponsePage.recordedResponseHelpText(), 'Your response has been recorded.');
+            utilities.verifyElementVisibilityState(audioResponsePage.standardPreviewRetakeButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackPlayButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.previewVolumeMeter(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.standardPreviewPlaybackTime(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackProgressBar(), 'visible');
+            audioResponsePage.steps.verifyPlaybackTimeStandardPreview('00:10', '00:10');
+        });
+    });
+
+    describe('Playback player : Default state', () => {
+        abortEarlySetup();
+        before(() => {
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+            cy.barsPreLoaderWait();
+            audioResponsePage.steps.switchToPreviewTab();
+            audioResponsePage.steps.recordAndSaveAudioStandardPreview(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.playbackWaveform(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.standardPreviewRetakeButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackPlayButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.volumeControlButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackSpeedButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackProgressBar(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.standardPreviewPlaybackTime(), 'visible');
+            audioResponsePage.steps.verifyPlaybackTimeStandardPreview('00:00', '00:05');
+        });
+
+        it('The progress bar should have a slider so that user can click/drag to seek the audio. When the user hovers on the waveform, a black cursor should be display on the waveform', () => {
+            utilities.verifyElementVisibilityState(audioResponsePage.progressBarSlider(), 'visible');
+            utilities.hoverOverElement(audioResponsePage.playbackWaveform());
+            utilities.verifyElementVisibilityState(audioResponsePage.waveformCursor(), 'visible');
+            utilities.hoverAwayFromElement();
+            utilities.verifyElementVisibilityState(audioResponsePage.waveformCursor(), 'hidden');
+        });
+
+        it('CSS of standard recorder style playback player', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioResponsePage.standardPreviewRetakeButton().find('circle'), {
+                'fill': css.color.defaultBackground
+            });
+            utilities.verifyCSS(audioResponsePage.standardPreviewRetakeButton().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.standardPreviewPlaybackTime(), {
+                '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.standardPreviewPlaybackWrapper());
+        });
+    });
+
+    //Note: Need to add cases of seeking using waveform
+    describe('Playback player : Play, pause and seek', () => {
+        let actualAudioSeekedInPercent = 50
+        abortEarlySetup();
+        before(() => {
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+            cy.barsPreLoaderWait();
+            audioResponsePage.steps.switchToPreviewTab();
+            audioResponsePage.steps.recordAndSaveAudioStandardPreview(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.waitForPlaybackToBegin();
+            audioResponsePage.steps.verifyPlaybackTimeStandardPreview('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.standardPreviewPlaybackTime(), {
+                '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.standardPreviewPlaybackWrapper());
+        });
+
+        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.recordAndSaveAudioStandardPreview(10000);
+            audioResponsePage.steps.startPlayback();
+            audioResponsePage.steps.waitForPlaybackToBegin();
+            audioResponsePage.steps.verifyPlaybackTimeStandardPreview('00:05', '00:10');
+            audioResponsePage.steps.pauseAndVerifyProgressBarSliderPosition();
+            audioResponsePage.steps.verifyPlaybackTimeStandardPreview('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.standardPreviewPlaybackWrapper());
+        });
+
+        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.verifyPlaybackTimeStandardPreview('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.switchToPreviewTab();
+            audioResponsePage.steps.recordAndSaveAudioStandardPreview(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.switchToPreviewTab();
+            audioResponsePage.steps.recordAndSaveAudioStandardPreview(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.recordAndSaveAudioStandardPreview(12000);
+                utilities.hoverOverElement(audioResponsePage.playbackSpeedButton());
+                audioResponsePage.steps.selectPlaybackSpeed(`${playbackSpeedOptions[index]}x`);
+                audioResponsePage.steps.startPlayback();
+                audioResponsePage.steps.waitForPlaybackToBegin();
+                audioResponsePage.steps.addWaitToPlayAudio(4000);
+                audioResponsePage.steps.pausePlayback();
+                audioResponsePage.steps.verifyPlaybackElapsedTime(1 + (4 * playbackSpeedOptions[index]), 'Standard');
+            });
+        };
+    });
+
+    describe('Playback player : Retake my audio response', () => {
+        abortEarlySetup();
+        before(() => {
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+            cy.barsPreLoaderWait();
+            audioResponsePage.steps.setMaximumRecorderLength(10);
+            audioResponsePage.steps.switchToPreviewTab();
+            audioResponsePage.steps.recordAndSaveAudioStandardPreview(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.retakeRecordingStandardPreview();
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'Retake');
+            audioResponsePage.steps.verifyRetakePopupContents();
+        });
+
+        it('CSS of \'Retake\' popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(dialogBoxBase.dialogBox(), {
+                'border': `1px solid ${css.color.defaultDropdownBorder}`,
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(dialogBoxBase.dialogBoxTitle(), {
+                'color': css.color.questionHeading,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(audioResponsePage.dialogBoxContent().find('.retake-popup-content'), {
+                'border-top': `1px solid ${css.color.secondaryBtnBorder}`,
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(audioResponsePage.confirmRetakeButton(), {
+                'background-color': css.color.deleteBtn,
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(audioResponsePage.cancelRetakeButton(), {
+                'background-color': css.color.secondaryBtnBg,
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('Accessibility of \'Retake\' popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioResponsePage.dialogBox());
+        });
+
+        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.standardPreviewRetakeButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioResponsePage.playbackPlayButton(), 'visible');
+            utilities.verifyInnerText(audioResponsePage.recordedResponseHelpText(), 'Your response has been recorded.');
+            audioResponsePage.steps.verifyPlaybackTimeStandardPreview('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.retakeRecordingStandardPreview();
+            audioResponsePage.steps.confirmRetake();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            utilities.verifyInnerText(audioResponsePage.recordingStatusText(), 'Recording...');
+            utilities.verifyInnerText(audioResponsePage.recordedResponseHelpText(), 'Your response has been recorded.');
+            audioResponsePage.steps.verifyPlaybackTimeStandardPreview('00:00', '00:10');
+        });
+    });
+});

package/cypress/e2e/ILC/DrawingResponse/drawingResponseCustomizeAdditionalOptions.js

@@ -26,46 +26,7 @@ describe('Create item page - Drawing response: Customize special characters, Cus
             drawingResponsePage.steps.selectOptionsTiles([`${drawingToolbarOptionsAndAdditionalOptions.additionalOptions[0]}`]);
         });
 
-        it('When the user checks the \'Customize special characters\' checkbox, \'Group by language\' and \'Show only custom special characters\' labels and radio buttons should be displayed. By default \'Group by language\' radio button should be checked', () => {
-            drawingResponsePage.steps.checkCustomizeSpecialCharactersCheckbox();
-            utilities.verifyElementVisibilityState(drawingResponsePage.groupByLanguageRadioButton(), 'exist');
-            utilities.verifyElementVisibilityState(drawingResponsePage.groupByLanguageLabel(), 'visible');
-            utilities.verifyElementVisibilityState(drawingResponsePage.showOnlyCustomSpecialCharactersRadioButton(), 'exist');
-            utilities.verifyElementVisibilityState(drawingResponsePage.showOnlyCustomSpecialCharactersLabel(), 'visible');
-            drawingResponsePage.steps.verifyGroupedByLanguageRadioButtonIsSelected();
-        });
-
-        it('\'Select special character languages\' label should be displayed. A \'Preview\' hyperlink should be displayed next to the label', () => {
-            utilities.verifyElementVisibilityState(drawingResponsePage.selectSpecialCharacterLanguagesLabel(), 'visible');
-            utilities.verifyInnerText(drawingResponsePage.selectSpecialCharacterLanguagesLabel(), 'Select special character languages');
-            utilities.verifyElementVisibilityState(drawingResponsePage.customizeSpecialCharactersPreviewButton(), 'visible');
-            utilities.verifyInnerText(drawingResponsePage.customizeSpecialCharactersPreviewButton(), 'Preview');
-        });
-
-        it(`A total of ${specialCharactersCategories.length} options should be displayed - ${specialCharactersCategories.join('')}. By default all language options should be in selected state`, () => {
-            drawingResponsePage.steps.verifyCustomizeSpecialCharactersCategoryTiles(specialCharactersCategories);
-            drawingResponsePage.steps.verifySelectedCustomizeSpecialCharactersCategoryTiles(specialCharactersCategories);
-        });
-
-        it('When the user clicks on the \'Preview\' hyperlink, a special characters popup should be displayed with all the special characters segregated according to all the language options. The user should be able to close the popup by clicking on the \'Close[X]\' button', () => {
-            drawingResponsePage.steps.clickOnCustomizeSpecialCharactersPreviewButton();
-            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
-            //drawingResponsePage.steps.verifySpecialCharactersPreviewPopupInEditTab(specialCharacters);
-            //Add this verification once https://redmine.zeuslearning.com/issues/555008 is resolved
-            cy.log('Post-step: Closing preview popup')
-            drawingResponsePage.steps.closeWarningPopup();
-        });
-
-        it('When the user deselects any language option and opens the special characters popup by clicking on the \'Preview\' hyperlink, then the popup contents should get updated accordingly', () => {
-            let newSelectedCategoryList = specialCharacters.slice(1);
-            drawingResponsePage.steps.clickOnSpecialCharactersCategoryTile(specialCharacters[0].categoryName);
-            drawingResponsePage.steps.verifySpecialCharacterCategoryTileIsNotSelected(specialCharacters[0].categoryName);
-            drawingResponsePage.steps.clickOnCustomizeSpecialCharactersPreviewButton();
-            //drawingResponsePage.steps.verifySpecialCharactersPreviewPopupInEditTab(specialCharacters);
-            //Add this verification once https://redmine.zeuslearning.com/issues/555008 is resolved
-            cy.log('Post-step: Closing preview popup')
-            drawingResponsePage.steps.closeWarningPopup();
-        });
+        drawingResponsePage.tests.verifyCustomSpecialCharactersEditTabContent();
 
         it('When the user has deselected any language option and opens the special characters popup in the preview tab, then the popup contents should get updated accordingly', () => {
             let newSelectedCategoryList = specialCharacters.slice(1);
@@ -101,7 +62,6 @@ describe('Create item page - Drawing response: Customize special characters, Cus
             drawingResponsePage.steps.verifyCustomSpecialCharactersDisplayedInPreviewTab(customSpecialCharacters);
             cy.log('Post-step: Switching to edit tab');
             drawingResponsePage.steps.switchToEditTab();
-
         });
 
         it('CSS of Customize special characters', { tags: 'css' }, () => {

package/cypress/e2e/ILC/EditTabSettingPage/ItemPreviewSettingsTabContent.js

@@ -47,18 +47,20 @@ describe('Item preview: Settings tab - Contents', () => {
                 'color': css.color.secondaryBtn,
                 'font-size': css.fontSize.default,
                 'font-weight': css.fontWeight.regular,
-                'background-color': css.color.transparent
+                'background-color': css.color.whiteText
             });
             utilities.verifyCSS(itemPreviewSettingsPage.applyChangesLabel(), {
                 'color': css.color.successBtn,
                 'font-size': css.fontSize.default,
                 'font-weight': css.fontWeight.regular,
-                'background-color': css.color.successBtnBg
+                'background-color': css.color.successBtnBg,
+                'border': `1px solid ${css.color.correctAnswer}`
             });
         });
 
+        //Failed due to https://redmine.zeuslearning.com/issues/561262
         it('Accessibility of the header', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(itemPreviewSettingsPage.headerWrapper().parents('.settings'));
+            cy.checkAccessibility(itemPreviewSettingsPage.headerWrapper());
         });
     });