itemengine-cypress-automation 1.0.20 → 1.0.22

package/cypress/e2e/ILC/AudioResponse/audioResponseStandardPreviewSection.js

@@ -0,0 +1,862 @@
+import { audioResponsePage } from "../../../pages/audioResponsePage";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+describe('Preview tab of Audio Response', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Preview of standard audio recorder style', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Audio Response question type');
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+            audioResponsePage.steps.setMaximumRecorderLength(10);
+            audioResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('CSS of \'Preview\' section', { tags: 'css' }, () => {
+            audioResponsePage.previewMicIcon()
+                .should('have.css', 'fill', css.color.audioResponsePreviewComponentsFill);
+            audioResponsePage.standardPreviewRecorderHelpText()
+                .verifyCSS(css.color.text, css.fontSize.small, css.fontWeight.regular);
+            audioResponsePage.standardPreviewStartRecordingButton()
+                .find('svg')
+                .should('have.css', 'fill', css.color.startRecordingIconFill);
+            audioResponsePage.previewMaxRecordTime()
+                .verifyCSS(css.color.text, css.fontSize.small, css.fontWeight.regular);
+            audioResponsePage.standardPreviewRecorderWrapper()
+                .should('have.css', 'border-color', css.color.audioResponsePreviewComponentsFill);
+            audioResponsePage.previewRecordProgressBar()
+                .should('have.css', '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`);
+            audioResponsePage.standardPreviewDisabledPlayButton()
+                .should('have.css', 'opacity', '0.38')
+                .find('svg')
+                .should('have.css', 'fill', css.color.secondaryBtnActive);
+        });
+
+        it('Accessibility of \'Preview\' section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioResponsePage.previewTabQuestionWrapper());
+        });
+
+        it('By default: \'Click record to begin\' help text message, mic icon, progress bar and Start recording should be displayed in \'Standard audio recorder\'. Maximum recording length should be displayed in minutes(mm:ss) format. Play button should be displayed in disabled state', () => {
+            audioResponsePage.standardPreviewRecorderHelpText()
+                .verifyInnerText('Click record to begin');
+            audioResponsePage.previewMicIcon()
+                .should('be.visible');
+            audioResponsePage.previewRecordProgressBar()
+                .should('be.visible');
+            audioResponsePage.standardPreviewStartRecordingButton()
+                .should('be.enabled')
+                .and('be.visible');
+            audioResponsePage.standardPreviewDisabledPlayButton()
+                .should('be.disabled')
+                .and('be.visible');
+            audioResponsePage.previewMicGlowAnimation()
+                .should('not.exist');
+            audioResponsePage.previewMaxRecordTime()
+                .should('be.visible')
+                .verifyInnerText('00:10');
+        });
+
+        it('When the user hovers on \'Start recording\' icon button, \'Start recording\' text should be displayed in tooltip', () => {
+            audioResponsePage.standardPreviewStartRecordingButton()
+                .trigger('mouseover');
+            audioResponsePage.tooltipText()
+                .should('be.visible')
+                .verifyInnerText('Start recording');
+            audioResponsePage.standardPreviewStartRecordingButton()
+                .trigger('mouseout');
+            audioResponsePage.tooltipText()
+                .should('not.exist');
+        });
+
+        //Comment : Unable to detect recording cue in cypress, added to manual sheet
+        //TODO : Change script as per new implementation after ticket is marked TL - https://redmine.zeuslearning.com/issues/525600
+        it('When the user clicks on the \'Start recording\' icon, the recording should start, a beep sound should play and the help text should change to "Recording..." while the glow animation should play behind the mic icon. While recording, the user should be able to view the progress bar, which displays the elapsed time and the remaining time until the recording is inprogress. 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 should be displayed in record player. Start recording icon should not be displayed.', () => {
+            audioResponsePage.steps.startRecordingStandardPreview();
+            audioResponsePage.previewMicGlowAnimation()
+                .should('be.visible');
+            cy.log('Waiting 3 seconds so as to fill 30% of the progress bar');
+            audioResponsePage.steps.waitForRecordingToStartStandardPreview();
+            audioResponsePage.steps.addWaitToRecordAudio(2000);
+            audioResponsePage.steps.verifyRecordingTimeStandardPreview('00:03 / 00:10');
+            cy.log('Verifying whether the progress bar is 30% filled')
+            audioResponsePage.previewRecordProgressBar()
+                .should('be.visible')
+                .and('have.css', 'background', `${css.color.transparent} linear-gradient(to right, ${css.color.progressBarElapsedFill} 0%, ${css.color.progressBarElapsedFill} 30%, ${css.color.progressBarRemainingFill} -70%, ${css.color.progressBarRemainingFill} 100%) repeat scroll 0% 0% / auto padding-box border-box`);
+            audioResponsePage.standardPreviewPauseRecordingButton()
+                .should('be.visible');
+            audioResponsePage.standardPreviewStopRecordingButton()
+                .should('be.visible');
+            audioResponsePage.steps.verifyRecordingStatusStandardPreview('Recording...');
+            audioResponsePage.previewVolumeMeter()
+                .should('be.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.switchToEditTab();
+            audioResponsePage.steps.switchToPreviewTab();
+            audioResponsePage.standardPreviewStartRecordingButton()
+                .click();
+            audioResponsePage.previewRecordProgressBar()
+                .should('have.css', '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`);
+            audioResponsePage.standardPreviewPauseRecordingButton()
+                .find('svg')
+                .should('have.css', 'fill', css.color.activeButtons);
+            audioResponsePage.standardPreviewStopRecordingButton()
+                .find('svg')
+                .should('have.css', 'fill', css.color.activeButtons);
+            audioResponsePage.previewMicGlowAnimation()
+                .should('have.css', 'background-color', css.color.micGlowAnimation);
+            audioResponsePage.previewMaxRecordTime()
+                .verifyCSS(css.color.text, css.fontSize.small, css.fontWeight.regular);
+            audioResponsePage.standardPreviewRecorderHelpText()
+                .verifyCSS(css.color.text, css.fontSize.small, css.fontWeight.regular);
+        });
+
+        it('Accessibility of \'Preview\' section once recording starts', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioResponsePage.previewTabQuestionWrapper());
+        });
+
+        //Comment : not checking tooltips for pause buttons as the state of the page keeps changing
+        it('When the user hovers on \'Pause recording\' icon 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\'. Also the progress bar on the control panel should display the amount of audio recorded in relation to the total length of the recording. User should be able to view the duration of their recorded speech in minutes, displayed as \'(min:secs / min:sec)\'. \'Pause recording\' icon button should get replaced with \'Resume recording\' icon button. \'Stop recording\' icon should be displayed beside resume recording icon', () => {
+            audioResponsePage.steps.resetQuestionPreview();
+            audioResponsePage.steps.startRecordingStandardPreview();
+            cy.log('Waiting 2 seconds so as to fill 20% of the progress bar and pausing the recording');
+            audioResponsePage.steps.waitForRecordingToStartStandardPreview();
+            audioResponsePage.steps.addWaitToRecordAudio(1000);
+            audioResponsePage.steps.pauseRecordingStandardPreview()
+            audioResponsePage.steps.verifyRecordingStatusStandardPreview('Recording paused');
+            audioResponsePage.previewMicIcon()
+                .should('be.visible');
+            audioResponsePage.previewMicGlowAnimation()
+                .should('not.exist');
+            cy.log('Verifying whether the progress bar is 20% filled')
+            //TODO : Change script as per new implementation after ticket is marked TL - https://redmine.zeuslearning.com/issues/525600
+            audioResponsePage.previewRecordProgressBar()
+                .should('have.css', 'background', `${css.color.transparent} linear-gradient(to right, ${css.color.progressBarElapsedFill} 0%, ${css.color.progressBarElapsedFill} 20%, ${css.color.progressBarRemainingFill} -80%, ${css.color.progressBarRemainingFill} 100%) repeat scroll 0% 0% / auto padding-box border-box`);
+            audioResponsePage.steps.verifyRecordingTimeStandardPreview('00:02 / 00:10');
+            audioResponsePage.standardPreviewPauseRecordingButton()
+                .should('not.exist');
+            audioResponsePage.standardPreviewResumeRecordingButton()
+                .should('be.visible');
+            audioResponsePage.standardPreviewStopRecordingButton()
+                .should('be.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');
+            audioResponsePage.standardPreviewResumeRecordingButton()
+                .find('svg')
+                .should('have.css', 'fill', css.color.startRecordingIconFill);
+            audioResponsePage.standardPreviewRecorderHelpText()
+                .verifyCSS(css.color.text, css.fontSize.small, css.fontWeight.regular);
+            cy.log('CSS of tooltip of Resume recording button');
+            audioResponsePage.standardPreviewResumeRecordingButton()
+                .trigger('mouseover');
+            audioResponsePage.tooltipText()
+                .should('be.visible')
+                .verifyCSS(css.color.whiteText, css.fontSize.small, css.fontWeight.regular);
+            audioResponsePage.standardPreviewResumeRecordingButton()
+                .trigger('mouseout');
+            audioResponsePage.tooltipText()
+                .should('not.exist');
+            cy.log('CSS of tooltip of Stop recording button');
+            audioResponsePage.standardPreviewStopRecordingButton()
+                .trigger('mouseover');
+            audioResponsePage.tooltipText()
+                .should('be.visible')
+                .verifyCSS(css.color.whiteText, css.fontSize.small, css.fontWeight.regular);
+            audioResponsePage.standardPreviewStopRecordingButton()
+                .trigger('mouseout');
+            audioResponsePage.tooltipText()
+                .should('not.exist');
+        });
+
+        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\' icon 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();
+            audioResponsePage.standardPreviewStartRecordingButton()
+                .should('not.exist');
+            audioResponsePage.previewMicGlowAnimation()
+                .should('be.visible');
+            audioResponsePage.standardPreviewRecorderHelpText()
+                .verifyInnerText('Recording...');
+            audioResponsePage.previewVolumeMeter()
+                .should('be.visible');
+            audioResponsePage.standardPreviewPauseRecordingButton()
+                .should('be.visible');
+            audioResponsePage.standardPreviewStopRecordingButton()
+                .should('be.visible');
+            audioResponsePage.previewVolumeMeter()
+                .should('have.text', '0dB');
+            audioResponsePage.previewMaxRecordTime()
+                .invoke('text')
+                .then(($timer) => {
+                    const currentTimer = $timer.split(' / ')[0];
+                    const currentSeconds = parseInt(currentTimer.split(':')[1], 10);
+                    expect(currentSeconds).to.be.gte(1);
+                });
+        });
+
+        it('When the user hovers on \'Stop recording\' button, \'Stop recording\' text should be displayed in tooltip', () => {
+            audioResponsePage.standardPreviewStopRecordingButton()
+                .trigger('mouseover');
+            audioResponsePage.tooltipText()
+                .should('be.visible')
+                .verifyInnerText('Stop recording');
+            audioResponsePage.standardPreviewStopRecordingButton()
+                .trigger('mouseout');
+            audioResponsePage.tooltipText()
+                .should('not.exist');
+        });
+
+        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, progress bar and retake recording icon should be displayed. Play icon should be enabled. User should be able to view the duration of their recorded speech in minutes, displayed as \'(min:secs)\'. Volume meter should not be displayed', () => {
+            audioResponsePage.steps.resetQuestionPreview();
+            audioResponsePage.steps.startRecordingStandardPreview();
+            audioResponsePage.steps.waitForRecordingToStartStandardPreview();
+            audioResponsePage.steps.addWaitToRecordAudio(3000);
+            audioResponsePage.steps.stopRecordingStandardPreview();
+            audioResponsePage.standardPreviewPlayerHelpText()
+                .verifyInnerText('Your response has been recorded');
+            audioResponsePage.previewPlayPlaybackButton()
+                .should('be.visible')
+                .and('be.enabled');
+            audioResponsePage.previewVolumeMeter()
+                .should('not.exist');
+            audioResponsePage.standardPreviewRecordTime()
+                .should('be.visible');
+            audioResponsePage.previewVolumeControlButton()
+                .should('not.exist');
+            audioResponsePage.standardPreviewRecordTime()
+                .should('be.visible')
+                .verifyInnerText('00:04');
+        });
+
+        it('CSS of \'Preview\' section if recording is stopped', { tags: 'css' }, () => {
+            audioResponsePage.standardPreviewPlayerHelpText()
+                .verifyCSS(css.color.text, css.fontSize.small, css.fontWeight.regular);
+            audioResponsePage.standardPreviewRecordTime()
+                .verifyCSS(css.color.text, css.fontSize.small, css.fontWeight.regular);
+            audioResponsePage.standardPreviewRecordingCompletedProgressBar()
+                .should('have.css', 'background-color', css.color.progressBarElapsedFill);
+            audioResponsePage.standardPreviewRetakeButton()
+                .find('svg')
+                .should('have.css', 'fill', css.color.startRecordingIconFill)
+        });
+
+        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 icon should be displayed on standard player. User should be able to view the duration of their recorded speech in minutes, displayed as \'(min:secs)\'. Play icon should be displayed in enabled state. Volume meter and stop recording icon should not be displayed', () => {
+            audioResponsePage.steps.resetQuestionPreview();
+            audioResponsePage.steps.startRecordingStandardPreview();
+            audioResponsePage.steps.waitForRecordingToStartStandardPreview();
+            audioResponsePage.steps.addWaitToRecordAudio(3000);
+            audioResponsePage.steps.pauseRecordingStandardPreview();
+            audioResponsePage.steps.stopRecordingStandardPreview();
+            audioResponsePage.standardPreviewPlayerHelpText()
+                .verifyInnerText('Your response has been recorded');
+            audioResponsePage.previewPlayPlaybackButton()
+                .should('be.visible')
+                .and('be.enabled');
+            audioResponsePage.previewVolumeMeter()
+                .should('not.exist');
+            audioResponsePage.standardPreviewRecordTime()
+                .should('be.visible');
+            audioResponsePage.previewVolumeControlButton()
+                .should('not.exist');
+            audioResponsePage.standardPreviewRecordTime()
+                .should('be.visible')
+                .verifyInnerText('00:04');
+        });
+
+        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.resetQuestionPreview();
+            audioResponsePage.steps.startRecordingStandardPreview();
+            audioResponsePage.steps.waitForRecordingToStartStandardPreview();
+            cy.log('Response will keep recording until maximum recoring length of 10 seconds is reached');
+            audioResponsePage.standardPreviewRecorderHelpText()
+                .should('have.text', 'Recording...');
+            audioResponsePage.standardPreviewPlayerHelpText()
+                .verifyInnerText('Your response has been recorded');
+            audioResponsePage.standardPreviewRetakeButton()
+                .should('be.visible')
+                .and('be.enabled');
+            audioResponsePage.previewPlayPlaybackButton()
+                .should('be.visible')
+                .and('be.enabled');
+            audioResponsePage.standardPreviewRecordingCompletedProgressBar()
+                .should('be.visible');
+            audioResponsePage.standardPreviewRecordTime()
+                .should('be.visible')
+                .verifyInnerText('00:10');
+            audioResponsePage.previewVolumeMeter()
+                .should('not.exist');
+        });
+    });
+
+    describe('Standard audio recorder style- Playback player', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Audio Response question type');
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+            cy.log('Switching to Preview tab');
+            audioResponsePage.steps.switchToPreviewTab();
+            audioResponsePage.steps.recordAndSaveAudioStandardPreview(10000);
+        });
+
+        it('When the user hovers on \'Play\' icon, \'Play\' text should be displayed in tooltip', () => {
+            audioResponsePage.previewPlayPlaybackButton()
+                .trigger('mouseover');
+            audioResponsePage.tooltipText()
+                .should('be.visible')
+                .verifyInnerText('Play');
+            audioResponsePage.previewPlayPlaybackButton()
+                .trigger('mouseout');
+            audioResponsePage.tooltipText()
+                .should('not.exist');
+        });
+
+        it('When the user clicks on \'Play\' icon, then user should be able to playback the recording and helptext should be updated to \'Playback...\'. Waveform, volume meter, progress bar, volume control,\'Retake\' icon and \'Pause\' icon should be displayed in playback player. Timer should displays the amount of audio 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 playback player', () => {
+            audioResponsePage.previewPlayPlaybackButton()
+                .click();
+            audioResponsePage.steps.waitForPlaybackToBeginStandardPreview();
+            audioResponsePage.steps.addWaitForPlayback(3000);
+            audioResponsePage.standardPreviewPlayerHelpText()
+                .verifyInnerText('Playback...');
+            audioResponsePage.standardPreviewRecordTime()
+                .invoke('text')
+                .then(($timer) => {
+                    const timerText = $timer.split('/')[0];
+                    const maxTimer = $timer.split('/')[1];
+                    const currentSeconds = parseInt(timerText.split(':')[1], 10);
+                    const maxSeconds = parseInt(maxTimer.split(':')[1], 10);
+                    expect(currentSeconds).to.be.gte(3);
+                    expect(maxSeconds).to.equal(10);
+                });
+            //TODO : remove below line after https://redmine.zeuslearning.com/issues/525475 has been marked TL
+            audioResponsePage.previewPausePlaybackButton()
+                .trigger('mouseout');
+            audioResponsePage.previewPlaybackProgressBar()
+                .should('be.visible');
+            audioResponsePage.previewPlaybackWaveform()
+                .should('be.visible');
+            audioResponsePage.previewPausePlaybackButton()
+                .should('be.visible')
+                .and('be.enabled');
+            audioResponsePage.previewVolumeControlButton()
+                .should('be.visible');
+            audioResponsePage.previewVolumeMeter()
+                .should('be.visible')
+                .and('have.text', '0dB');
+            audioResponsePage.standardPreviewRecordTime()
+                .should('be.visible');
+            audioResponsePage.standardPreviewRetakeButton()
+                .should('be.visible')
+                .and('be.enabled');
+            audioResponsePage.standardPreviewHelpTextOutsideContainer()
+                .verifyInnerText('Your response has been recorded');
+        });
+
+        //Comment : Unable to check volume meter go high/low (css) in cypress when playback is in progress, added to manual sheet
+        //Comment : Unable to check waveform css in cypress, added to manual sheet
+        it('CSS of \'Preview\' section if playback is initiated', { tags: 'css' }, () => {
+            audioResponsePage.steps.resetQuestionPreview();
+            audioResponsePage.steps.recordAndSaveAudioStandardPreview(10000);
+            audioResponsePage.previewPlayPlaybackButton()
+                .click()
+            audioResponsePage.previewPausePlaybackButton()
+                .trigger('mouseout');
+            audioResponsePage.standardPreviewPlayerHelpText()
+                .verifyCSS(css.color.text, css.fontSize.small, css.fontWeight.regular);
+            audioResponsePage.previewVolumeMeter()
+                .find('text')
+                .should('have.css', 'fill', css.color.text);
+            audioResponsePage.standardPreviewRecordTime()
+                .verifyCSS(css.color.text, css.fontSize.small, css.fontWeight.regular);
+            audioResponsePage.previewPausePlaybackButton()
+                .find('svg')
+                .should('have.css', 'fill', css.color.activeButtons)
+            audioResponsePage.standardPreviewHelpTextOutsideContainer()
+                .verifyCSS(css.color.text, css.fontSize.normal, css.fontWeight.semibold);
+            //TODO : Change selectors after https://redmine.zeuslearning.com/issues/518498 is marked TL
+            audioResponsePage.previewPlaybackProgressBar()
+                .find('span[class*="MuiSlider-track"]')
+                .should('have.css', 'background-color', css.color.progressBarElapsedFill);
+            audioResponsePage.previewPlaybackProgressBar()
+                .find('span[class*="MuiSlider-rail"]')
+                .should('have.css', 'background-color', css.color.progressBarRemainingFill);
+        });
+
+        it('Accessibility of \'Preview\' section if playback is initiated', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioResponsePage.previewTabQuestionWrapper());
+        });
+
+        it('When the user hover over \'Volume control\' icon present in playback overlay, volume control settings should open and by default it should be set to full volume', () => {
+            audioResponsePage.previewVolumeControlButton()
+                .realHover();
+            audioResponsePage.previewVolumeControlSlider()
+                .should('be.visible')
+                .and('have.attr', 'value', '100');
+            cy.get('body')
+                .realHover({ position: 'right' });
+            audioResponsePage.previewVolumeControlSlider()
+                .should('not.exist');
+        });
+
+        it('When volume control settings is not 0 and user hovers on \'Volume control\' icon, then \'Mute\' text should be displayed in a tooltip', () => {
+            audioResponsePage.previewVolumeControlButton()
+                .trigger('mouseover');
+            audioResponsePage.tooltipText()
+                .should('be.visible')
+                .verifyInnerText('Mute');
+            audioResponsePage.previewVolumeControlButton()
+                .trigger('mouseout');
+            audioResponsePage.tooltipText()
+                .should('not.exist');
+        });
+
+        it('When the user hover over \'Volume control slider\',then \'Volume control\' text should be displayed in a tooltip', () => {
+            cy.log('Pre-step: Hovering on volume control icon to make volume control slider visible')
+            audioResponsePage.previewVolumeControlButton()
+                .realHover();
+            audioResponsePage.previewVolumeControlSlider()
+                .trigger('mouseover');
+            cy.get('body')
+                .realHover();
+            audioResponsePage.tooltipText()
+                .should('be.visible')
+                .and('have.text', 'Volume control');
+            audioResponsePage.previewVolumeControlSlider()
+                .trigger('mouseout');
+            audioResponsePage.tooltipText()
+                .should('not.exist');
+            cy.get('body')
+                .realHover({ position: "topRight" });
+        });
+
+        it('When volume control setting is not 0 and user clicks on volume control icon, then the audio should be muted and the icon should change to a muted state', () => {
+            audioResponsePage.previewVolumeControlButton()
+                .realClick();
+            audioResponsePage.previewVolumeControlButton()
+                .trigger('mouseover');
+            audioResponsePage.previewVolumeControlSlider()
+                .should('have.attr', 'value', '0');
+            audioResponsePage.previewVolumeControlButton()
+                .within(() => {
+                    audioResponsePage.previewMutedVolumeControlIcon()
+                        .should('be.visible');
+                });
+            audioResponsePage.previewVolumeControlButton()
+                .trigger('mouseout');
+        });
+
+        it('When the user hovers on muted \'Volume control\' icon, \'Unmute\' text should be displayed in tooltip', () => {
+            audioResponsePage.previewVolumeControlButton()
+                .trigger('mouseover');
+            audioResponsePage.tooltipText()
+                .should('be.visible')
+                .verifyInnerText('Unmute');
+            audioResponsePage.previewVolumeControlSlider()
+                .should('have.attr', 'value', '0');
+            audioResponsePage.previewVolumeControlButton()
+                .trigger('mouseout');
+            audioResponsePage.tooltipText()
+                .should('not.exist');
+            cy.get('body')
+                .realHover({ position: "topRight" });
+        });
+
+        it('When the user clicks on the muted volume control icon then the volume setting slider should return to full volume and the icon should change to a unmuted state', () => {
+            audioResponsePage.previewVolumeControlButton()
+                .realClick();
+            audioResponsePage.previewVolumeControlSlider()
+                .should('have.attr', 'value', '100');
+            audioResponsePage.previewVolumeControlButton()
+                .within(() => {
+                    audioResponsePage.previewUnmutedVolumeControlIcon()
+                        .should('be.visible');
+                });
+        });
+
+        it('CSS of volume control section', { tags: 'css' }, () => {
+            audioResponsePage.previewVolumeControlSlider()
+                .should('have.css', '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`);
+            audioResponsePage.previewVolumeControlButton()
+                .find('g path')
+                .should('have.css', 'fill', css.color.activeButtons);
+        });
+
+        it('Accessibility of volume control section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioResponsePage.previewVolumeControlButton());
+            cy.checkAccessibility(audioResponsePage.previewVolumeControlSlider().parents('.audio-volume-slider-wrapper'));
+        });
+
+        it('When the user drags the volume control all the way down, audio should be muted and the icon should update to a muted state', () => {
+            cy.log('Clicking at the bottom of the volume slider');
+            audioResponsePage.previewVolumeControlSlider()
+                .realClick({ position: "bottom" });
+            audioResponsePage.previewVolumeControlSlider()
+                .should('have.attr', 'value', '0');
+            audioResponsePage.previewVolumeControlButton()
+                .within(() => {
+                    audioResponsePage.previewMutedVolumeControlIcon()
+                        .should('be.visible');
+                });
+        });
+
+        it('CSS of volume control section in muted state', { tags: 'css' }, () => {
+            audioResponsePage.previewVolumeControlSlider()
+                .should('have.css', '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`);
+            audioResponsePage.previewMutedVolumeControlIcon()
+                .find('g g path')
+                .should('have.css', 'fill', css.color.activeButtons);
+        });
+
+        it('Accessibility of volume control section in muted state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioResponsePage.previewVolumeControlButton());
+            cy.checkAccessibility(audioResponsePage.previewVolumeControlSlider().parents('.audio-volume-slider-wrapper'));
+        });
+
+        it('User should be able to unmute the audio by dragging the volume control higher again', () => {
+            cy.log('Clicking at the top of the volume slider');
+            audioResponsePage.previewVolumeControlSlider()
+                .realClick({ position: "top" })
+                .should('have.attr', 'value', '100');
+            audioResponsePage.previewVolumeControlButton()
+                .find('.audio-volume-icon-wr')
+                .should('be.visible');
+            cy.get('body')
+                .realHover({ position: "topRight" });
+        });
+
+        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', () => {
+            audioResponsePage.steps.resetQuestionPreview();
+            audioResponsePage.steps.recordAndSaveAudioStandardPreview(5000);
+            audioResponsePage.previewPlayPlaybackButton()
+                .click();
+            audioResponsePage.steps.waitForPlaybackToBeginStandardPreview();
+            audioResponsePage.previewPlaybackSlider()
+                .should('be.visible');
+            audioResponsePage.previewPlaybackWaveform()
+                .realHover();
+            audioResponsePage.waveformCursor()
+                .should('be.visible');
+            cy.get("body")
+                .realHover({ position: "topLeft" });
+            audioResponsePage.waveformCursor()
+                .should('not.be.visible');
+        });
+
+        it('CSS of waveform and progress bar in hover state', { tags: 'css' }, () => {
+            audioResponsePage.previewPlaybackWaveform()
+                .realHover();
+            audioResponsePage.waveformCursor()
+                .should('have.css', 'background-color', css.color.waveformCursorColor);
+            cy.log('Hovering out from the waveform');
+            cy.get("body")
+                .realHover({ position: "topLeft" });
+            audioResponsePage.previewPlaybackSlider()
+                .realHover()
+                .parents('span[class*="MuiSlider-thumb"]')
+                .should('have.css', 'box-shadow', `${css.color.progressBarSliderHoverBackground} 0px 0px 0px 8px`);
+            cy.log('Hovering out from the playback progress bar slider');
+            cy.get("body")
+                .realHover({ position: "topLeft" });
+        });
+
+        it('When the user seeks the audio playback by clicking on progress bar and waveform, audio response should be played from the seeked position', () => {
+            let actualAudioSeekedInPercent = 49
+            audioResponsePage.steps.resetQuestionPreview();
+            audioResponsePage.steps.recordAndSaveAudioStandardPreview(10000);
+            audioResponsePage.previewPlayPlaybackButton()
+                .click();
+            cy.log('Clicking at the middle of the progress bar to seek till 5 seconds of the recording');
+            audioResponsePage.previewPlaybackProgressBar()
+                .click();
+            audioResponsePage.previewPlaybackSlider()
+                .then(($value) => {
+                    const value = $value[0].valueAsNumber
+                    expect(value).to.be.gte(actualAudioSeekedInPercent);
+                });
+            audioResponsePage.previewWaveformTotalWidth()
+                .then(($totalWidth) => {
+                    const totalWidth = $totalWidth[0].clientWidth
+                    audioResponsePage.previewWaveformCurrentPositionWidth()
+                        .then(($currWidth) => {
+                            const currentWaveFormWidth = $currWidth[0].clientWidth
+                            const currentWaveFormWidthInPercent = (currentWaveFormWidth / totalWidth) * 100
+                            expect(currentWaveFormWidthInPercent).to.be.gte(actualAudioSeekedInPercent)
+                        });
+                });
+            cy.log('Clicking on the waveform to seek till 25% of the recording');
+            audioResponsePage.previewPlaybackWaveform()
+                .then(($waveformDimensions) => {
+                    const x = ($waveformDimensions[0].clientWidth) / 4
+                    const y = ($waveformDimensions[0].clientHeight) / 2
+                    audioResponsePage.previewPlaybackWaveform()
+                        .click(x, y);
+                });
+            cy.log('Checking value of progress bar after seeking on waveform');
+            audioResponsePage.previewPlaybackSlider()
+                .then(($val) => {
+                    actualAudioSeekedInPercent = 24
+                    const value = $val[0].value
+                    expect(Number(value)).to.be.gte(actualAudioSeekedInPercent)
+                });
+            audioResponsePage.previewWaveformTotalWidth()
+                .then(($totalWidth) => {
+                    const totalWidth = $totalWidth[0].clientWidth
+                    audioResponsePage.previewWaveformCurrentPositionWidth()
+                        .then(($currWidth) => {
+                            const currentWaveFormWidth = $currWidth[0].clientWidth
+                            const currentWaveFormWidthInPercent = (currentWaveFormWidth / totalWidth) * 100
+                            expect(currentWaveFormWidthInPercent).to.be.gte(actualAudioSeekedInPercent)
+                        });
+                });
+        });
+
+        //Comment : not checking tooltips for pause buttons as the state of the page keeps changing
+        it('When the user hovers on \'Pause\' button, \'Pause\' text should be displayed in tooltip', () => {
+            audioResponsePage.previewPausePlaybackButton()
+                .verifyTooltip('Pause');
+        });
+
+        it('When the playback player is in playback state and the user clicks on \'Pause\' button, the playback should get paused. Also waveform, progress bar and timer should not update further. Pause icon should get replaced with Play icon', () => {
+            let initialWidthWaveform
+            let initialWidthProgressBar
+            audioResponsePage.steps.resetQuestionPreview();
+            audioResponsePage.steps.recordAndSaveAudioStandardPreview(10000);
+            audioResponsePage.previewPlayPlaybackButton()
+                .click();
+            cy.log('Pausing playback after 3 seconds to fill 30% of the waveform and progress bar');
+            audioResponsePage.steps.waitForPlaybackToBeginStandardPreview();
+            audioResponsePage.steps.addWaitForPlayback(2000);
+            audioResponsePage.previewPausePlaybackButton()
+                .click();
+            //TODO : remove below line after https://redmine.zeuslearning.com/issues/525475 has been marked TL
+            audioResponsePage.previewPlayPlaybackButton()
+                .trigger('mouseout')
+                .should('be.visible');
+            cy.log('Checking the current position of waveform cursor');
+            audioResponsePage.previewWaveformCurrentPositionWidth()
+                .then(($currWidth) => {
+                    initialWidthWaveform = $currWidth[0].clientWidth
+                });
+            cy.log('Checking the current position of progress bar slider');
+            audioResponsePage.previewPlaybackSlider()
+                .then(($currWidth) => {
+                    initialWidthProgressBar = $currWidth[0].valueAsNumber
+                });
+            cy.wait(4000);
+            cy.log('Checking the position of waveform cursor after 3 seconds');
+            audioResponsePage.previewWaveformCurrentPositionWidth()
+                .then(($finalWidth) => {
+                    const finalWidth = $finalWidth[0].clientWidth
+                    expect(finalWidth).to.equal(initialWidthWaveform)
+                });
+            cy.log('Checking the  position of progress bar slider after 3 seconds');
+            audioResponsePage.previewPlaybackSlider()
+                .then(($finalWidth) => {
+                    const finalWidth = $finalWidth[0].valueAsNumber
+                    expect(finalWidth).to.equal(initialWidthProgressBar)
+                });
+            audioResponsePage.standardPreviewPlayerHelpText()
+                .verifyInnerText('Playback paused');
+            audioResponsePage.standardPreviewRecordTime()
+                .invoke('text')
+                .then(($timer) => {
+                    const currentTimer = $timer.split(' / ')[0];
+                    const currentSeconds = parseInt(currentTimer.split(':')[1], 10);
+                    expect(currentSeconds).to.be.gte(2);
+                });
+            audioResponsePage.previewVolumeMeter()
+                .should('have.text', '0dB');
+        });
+
+        //TODO : Change selectors after https://redmine.zeuslearning.com/issues/518498 is marked TL
+        it('CSS of \'Preview\' section if playback is paused', { tags: 'css' }, () => {
+            audioResponsePage.previewPlaybackProgressBar()
+                .find('span[class*="MuiSlider-track"]')
+                .should('have.css', 'background-color', css.color.progressBarElapsedFill);
+            audioResponsePage.previewPlaybackProgressBar()
+                .find('span[class*="MuiSlider-rail"]')
+                .should('have.css', 'background-color', css.color.progressBarRemainingFill);
+            audioResponsePage.standardPreviewPlayerHelpText()
+                .verifyCSS(css.color.text, css.fontSize.small, css.fontWeight.regular);
+        });
+
+        it('Accessibility of \'Preview\' section if if playback is paused', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioResponsePage.previewTabQuestionWrapper());
+        });
+
+        it('When playback player is in paused state and user clicks on play icon, playback should get resumed and helptext should be updated to \'Playback...\'. Waveform, volume meter, progress bar and timer should again be getting updated. Play icon should get replaced with Pause icon.', () => {
+            let initialWidthWaveform
+            let initialWidthProgressBar
+            audioResponsePage.previewPlayPlaybackButton()
+                .click();
+            audioResponsePage.standardPreviewPlayerHelpText()
+                .verifyInnerText('Playback...');
+            audioResponsePage.previewPlaybackWaveform()
+                .should('be.visible');
+            audioResponsePage.previewVolumeMeter()
+                .should('be.visible');
+            audioResponsePage.previewVolumeControlButton()
+                .should('be.visible');
+            audioResponsePage.previewPausePlaybackButton()
+                .should('be.visible');
+            audioResponsePage.standardPreviewRetakeButton()
+                .should('be.visible');
+            audioResponsePage.standardPreviewRecordTime()
+                .should('be.visible');
+            audioResponsePage.standardPreviewRecordTime()
+                .invoke('text')
+                .then(($timer) => {
+                    const currentTimer = $timer.split(' / ')[0];
+                    const currentSeconds = parseInt(currentTimer.split(':')[1], 10);
+                    expect(currentSeconds).to.be.gte(2);
+                });
+            cy.log('Checking the current position of waveform cursor');
+            audioResponsePage.previewWaveformCurrentPositionWidth()
+                .then(($currWidth) => {
+                    initialWidthWaveform = $currWidth[0].clientWidth
+                });
+            cy.log('Checking the current position of progress bar slider');
+            audioResponsePage.previewPlaybackSlider()
+                .then(($currWidth) => {
+                    initialWidthProgressBar = $currWidth[0].valueAsNumber
+                });
+            cy.log('Waiting a second before checking updated positions')
+            cy.wait(2000);
+            cy.log('Checking the position of waveform cursor after 1 seconds');
+            audioResponsePage.previewWaveformCurrentPositionWidth()
+                .then(($finalWidth) => {
+                    const finalWidth = $finalWidth[0].clientWidth
+                    expect(finalWidth).to.be.gt(initialWidthWaveform)
+                });
+            cy.log('Checking the  position of progress bar slider after 1 seconds');
+            audioResponsePage.previewPlaybackSlider()
+                .then(($finalWidth) => {
+                    const finalWidth = $finalWidth[0].valueAsNumber
+                    expect(finalWidth).to.be.gt(initialWidthProgressBar)
+                });
+        });
+    });
+
+    describe('Preview tab of Standard recorder style- Retake my audio response', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Audio Response question type');
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+            cy.log('Setting Maximum recording length to 5 seconds');
+            audioResponsePage.steps.setMaximumRecorderLength(5);
+            cy.log('Switching to Preview tab');
+            audioResponsePage.steps.switchToPreviewTab();
+            audioResponsePage.standardPreviewStartRecordingButton()
+                .click();
+            cy.log('Starting a recording and letting it record until Maximum recording length is reached');
+            audioResponsePage.standardPreviewPlayerHelpText()
+                .verifyInnerText('Your response has been recorded');
+        });
+
+        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.standardPreviewRetakeButton()
+                .should('be.visible')
+                .and('be.enabled')
+                .click();
+            audioResponsePage.dialogBoxTitle()
+                .verifyInnerText('Retake');
+            audioResponsePage.retakePopupContent()
+                .verifyInnerText('Are you sure you want to overwrite the existing audio recording?');
+            audioResponsePage.confirmRetakeButton()
+                .should('be.visible')
+                .and('be.enabled')
+                .verifyInnerText('Confirm');
+            audioResponsePage.cancelRetakeButton()
+                .should('be.visible')
+                .and('be.enabled')
+                .verifyInnerText('Cancel');
+        });
+
+        it('CSS of \'Retake\' popup', { tags: 'css' }, () => {
+            audioResponsePage.dialogBox()
+                .should('have.css', 'border', `1px solid ${css.color.defaultDropdownBorder}`)
+                .and('have.css', 'background-color', css.color.defaultBackground);
+            audioResponsePage.dialogBoxTitle()
+                .verifyCSS(css.color.questionHeading, css.fontSize.heading, css.fontWeight.semibold);
+            audioResponsePage.dialogBoxContent()
+                .find('.retake-popup-content')
+                .should('have.css', 'border-top', `1px solid ${css.color.secondaryBtnBorder}`)
+                .verifyCSS(css.color.labels, css.fontSize.default, css.fontWeight.regular);
+            audioResponsePage.confirmRetakeButton()
+                .should('have.css', 'background-color', css.color.deleteBtn);
+            audioResponsePage.cancelRetakeButton()
+                .should('have.css', 'background-color', css.color.transparent);
+        });
+
+        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.cancelRetakeButton()
+                .click();
+            audioResponsePage.dialogBox()
+                .should('not.exist');
+            audioResponsePage.standardPreviewRetakeButton()
+                .should('be.visible');
+            audioResponsePage.previewPlayPlaybackButton()
+                .should('be.visible');
+            audioResponsePage.standardPreviewPlayerHelpText()
+                .should('be.visible')
+                .verifyInnerText('Your response has been recorded');
+            audioResponsePage.previewMicIcon()
+                .should('be.visible');
+            audioResponsePage.standardPreviewRecordingCompletedProgressBar()
+                .should('be.visible');
+            audioResponsePage.standardPreviewRecordTime()
+                .should('be.visible')
+                .verifyInnerText('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.standardPreviewRetakeButton()
+                .click();
+            audioResponsePage.confirmRetakeButton()
+                .click();
+            audioResponsePage.dialogBox()
+                .should('not.exist');
+            audioResponsePage.standardPreviewRecorderHelpText()
+                .verifyInnerText('Recording...');
+            audioResponsePage.previewMaxRecordTime()
+                .should('be.visible');
+            audioResponsePage.standardPreviewPlayerHelpText()
+                .should('not.exist');
+            audioResponsePage.standardPreviewHelpTextOutsideContainer()
+                .should('not.exist');
+            audioResponsePage.standardPreviewPlayerHelpText()
+                .verifyInnerText('Your response has been recorded');
+        });
+    });
+});