itemengine-cypress-automation 1.0.78 → 1.0.79

package/cypress/e2e/ILC/AudioResponse/audioResponseMinimalPreviewSection.smoke.js

@@ -1,950 +0,0 @@
-import { audioResponsePage } from "../../../pages/audioResponsePage";
-import abortEarlySetup from "../../../support/helpers/abortEarly";
-const css = Cypress.env('css');
-const grepTags = Cypress.env('grepTags');
-
-describe('Preview tab of Audio Response', () => {
-    before(() => {
-        cy.loginAs('admin');
-    });
-
-    describe('Preview tab of Minimal recorder style with recording overlay', { tags: 'smoke' }, () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Audio Response question type');
-            audioResponsePage.steps.navigateToCreateQuestion('audio response');
-            cy.log('Setting Maximum recording length to 10 seconds');
-            audioResponsePage.steps.setMaximumRecorderLength(10);
-            cy.log('Switching to Minimal recorder style and switching to Preview tab');
-            audioResponsePage.steps.switchToMinimalRecorderStyle();
-            audioResponsePage.steps.switchToPreviewTab();
-        });
-
-        it('If user selects \'Minimal\' option from \'Audio Recorder Style\' dropdown then \'Record\' button, \'Playback\' button and \'Click record to begin\' helptext should be displayed. By default, \'Record\' button should be enabled and \'Playback\' button should be disabled', () => {
-            audioResponsePage.minimalPreviewRecordButton()
-                .should('be.visible')
-                .and('be.enabled')
-                .verifyInnerText('Record');
-            audioResponsePage.minimalPreviewPlaybackButton()
-                .should('be.visible')
-                .should('be.disabled')
-                .verifyInnerText('Playback');
-        });
-
-        it('CSS of Preview section', { tags: 'css' }, () => {
-            audioResponsePage.minimalPreviewRecordButton()
-                .should('have.css', 'background-color', css.color.primaryBtnBg)
-                .verifyCSS(css.color.primaryBtn, css.fontSize.default, css.fontWeight.regular)
-                .find('svg')
-                .should('have.css', 'fill', css.color.primaryBtn);
-            audioResponsePage.minimalPreviewPlaybackButton()
-                .should('have.css', 'background-color', css.color.defaultBackground)
-                .verifyCSS(css.color.secondaryBtnDisabled, css.fontSize.default, css.fontWeight.regular)
-                .find('svg')
-                .should('have.css', 'fill', css.color.secondaryBtnDisabled)
-            audioResponsePage.minimalPreviewRecorderHelpText()
-                .verifyCSS(css.color.text, css.fontSize.normal, css.fontWeight.semibold);
-        });
-
-        it('Accessibility of Preview section', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(audioResponsePage.previewTabQuestionWrapper());
-        });
-
-        it('When the user clicks on the \'Record\' button, the recording should start and \'Record\' button should get replaced with \'Stop\' button. \'Playback\' button should still be displayed in disabled state. In recording overlay, \'Recording...\' help text, volume meter, progress bar, timer and \'Pause\' button should be displayed. User should be able to view the duration of their recorded speech in minutes, displayed as \'(min:secs / min:sec)\'. The volume meter should also detect the sound levels during recording', () => {
-            audioResponsePage.minimalPreviewRecordButton()
-                .click();
-            audioResponsePage.minimalPreviewRecordButton()
-                .should('not.exist');
-            audioResponsePage.steps.waitForRecordingToStartMinimalPreview();
-            audioResponsePage.minimalPreviewStopRecordingButton()
-                .verifyInnerText('Stop')
-                .should('be.visible')
-                .and('be.enabled')
-                .find('svg')
-                .should('be.visible');
-            audioResponsePage.minimalPreviewPlaybackButton()
-                .should('be.disabled')
-                .and('be.visible');
-            audioResponsePage.minimalPreviewRecorderFlyoutHelpText()
-                .verifyInnerText('Recording...')
-            audioResponsePage.previewVolumeMeter()
-                .should('be.visible');
-            cy.log('Waiting 2 seconds to check updated timer');
-            audioResponsePage.steps.addWaitToRecordAudio(2000);
-            audioResponsePage.minimalPreviewRecordingTimer()
-                .should('be.visible')
-                .invoke('text')
-                .then(($timer) => {
-                    const currentTimer = $timer.split(' / ')[0];
-                    const currentSeconds = parseInt(currentTimer.split(':')[1], 10);
-                    expect(currentSeconds).to.be.gte(3);
-                });
-            audioResponsePage.minimalPreviewPauseRecordingButton()
-                .should('be.visible')
-                .and('be.enabled');
-            audioResponsePage.previewRecordProgressBar()
-                .should('be.visible');
-        });
-
-        it('CSS of \'Preview\' section once recording starts', { tags: 'css' }, () => {
-            audioResponsePage.minimalPreviewStopRecordingButton()
-                .should('have.css', 'background-color', css.color.primaryBtnBg)
-                .verifyCSS(css.color.primaryBtn, css.fontSize.default, css.fontWeight.regular)
-                .find('svg')
-                .should('have.css', 'fill', css.color.primaryBtn);
-            audioResponsePage.minimalPreviewPlaybackButton()
-                .should('have.css', 'background-color', css.color.defaultBackground)
-                .verifyCSS(css.color.secondaryBtnDisabled, css.fontSize.default, css.fontWeight.regular)
-                .find('svg')
-                .should('have.css', 'fill', css.color.secondaryBtnDisabled);
-            audioResponsePage.minimalPreviewRecorderFlyoutHelpText()
-                .verifyCSS(css.color.text, css.fontSize.small, css.fontWeight.regular);
-            audioResponsePage.minimalPreviewPauseRecordingButton()
-                .find('svg')
-                .should('have.css', 'fill', css.color.activeButtons);
-            audioResponsePage.minimalPreviewRecordingTimer()
-                .verifyCSS(css.color.lightText, css.fontSize.small, css.fontWeight.regular);
-            audioResponsePage.previewVolumeMeter()
-                .find('text')
-                .verifyCSS(css.color.text, css.fontSize.extraSmall, css.fontWeight.medium)
-        });
-
-        it('Accessibility of Preview section once recording starts', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(audioResponsePage.previewTabQuestionWrapper());
-        });
-
-        it('When the user hovers on \'Pause\' button present in overlay then \'Pause recording\' text should be displayed in tooltip', () => {
-            audioResponsePage.minimalPreviewPauseRecordingButton()
-                .verifyTooltip('Pause recording');
-        });
-
-        it('When the recording is in-progress and user clicks on \'Pause\' icon, recording should pause and the help text in overlay should update to \'Recording paused\'. Volume meter should drop to \'0dB\'. Also the progress bar and timer in overlay should display the amount of audio recorded in relation to the total length of the recording. Format of timer should be \'(min:secs / min:sec)\'. Pause recording button should get replaced with Resume recording button. Stop button should be displayed in preview. Playback button should be displayed in disabled state', () => {
-            audioResponsePage.steps.resetQuestionPreview();
-            audioResponsePage.minimalPreviewRecordButton()
-                .click();
-            cy.log('Waiting 5 seconds so as to fill 50% of the progress bar and pausing the recording');
-            audioResponsePage.steps.waitForRecordingToStartMinimalPreview();
-            audioResponsePage.minimalPreviewRecorderFlyoutHelpText()
-                .verifyInnerText('Recording...')
-            audioResponsePage.steps.addWaitToRecordAudio(4000);
-            audioResponsePage.minimalPreviewPauseRecordingButton()
-                .click();
-            audioResponsePage.minimalPreviewRecorderFlyoutHelpText()
-                .verifyInnerText('Recording paused');
-            cy.log('Verifying whether the progress bar is 50% filled')
-            //TODO : Change script as per new implementation after ticket is marked TL - https://redmine.zeuslearning.com/issues/525600
-            audioResponsePage.previewRecordProgressBar()
-                .should('be.visible')
-                .and('have.css', 'background', `${css.color.transparent} linear-gradient(to right, ${css.color.progressBarElapsedFill} 0%, ${css.color.progressBarElapsedFill} 50%, ${css.color.progressBarRemainingFill} -50%, ${css.color.progressBarRemainingFill} 100%) repeat scroll 0% 0% / auto padding-box border-box`);
-            audioResponsePage.previewVolumeMeter()
-                .should('have.text', '0dB');
-            audioResponsePage.minimalPreviewResumeRecordingButton()
-                .should('be.visible');
-            audioResponsePage.minimalPreviewStopRecordingButton()
-                .should('be.visible');
-            audioResponsePage.minimalPreviewPlaybackButton()
-                .should('be.visible')
-                .and('be.disabled');
-            audioResponsePage.minimalPreviewRecordingTimer()
-                .verifyInnerText('00:05 / 00:10');
-        });
-
-        it('CSS of \'Preview\' section if recording is paused', { tags: 'css' }, () => {
-            audioResponsePage.minimalPreviewResumeRecordingButton()
-                .find('svg')
-                .should('have.css', 'fill', css.color.startRecordingIconFill);
-            audioResponsePage.minimalPreviewRecordingTimer()
-                .verifyCSS(css.color.lightText, css.fontSize.small, css.fontWeight.regular);
-            audioResponsePage.minimalPreviewRecorderFlyoutHelpText()
-                .verifyCSS(css.color.text, css.fontSize.small, css.fontWeight.regular);
-        });
-
-        it('Accessibility of Preview section if recording is paused', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(audioResponsePage.previewTabQuestionWrapper());
-        });
-
-        it('When the user hovers on \'Resume recording\' button present in overlay, \'Resume recording\' text should be displayed in tooltip', () => {
-            audioResponsePage.minimalPreviewResumeRecordingButton()
-                .verifyTooltip('Resume recording');
-        });
-
-        it('When the recorder is in paused state and the user clicks on the \'Resume recording\' icon button the recording should get resumed from where it was paused. Resume recording icon button should update to Pause icon button 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 the recording is complete. User should be able to view the duration of their recorded speech in minutes, displayed as \'(min:secs / min:sec)\'. Stop button should be displayed in preview tab. Playback button should be displayed in disabled state', () => {
-            audioResponsePage.minimalPreviewResumeRecordingButton()
-                .click()
-            audioResponsePage.minimalPreviewResumeRecordingButton()
-                .should('not.exist');
-            audioResponsePage.minimalPreviewPauseRecordingButton()
-                .should('be.visible')
-                .and('be.enabled');
-            audioResponsePage.minimalPreviewRecorderFlyoutHelpText()
-                .verifyInnerText('Recording...');
-            audioResponsePage.steps.addWaitToRecordAudio(1000);
-            cy.log('Waiting to see if timer progresses')
-            audioResponsePage.minimalPreviewRecordingTimer()
-                .invoke('text')
-                .then(($timer) => {
-                    const currentTimer = $timer.split(' / ')[0];
-                    const currentSeconds = parseInt(currentTimer.split(':')[1], 10);
-                    expect(currentSeconds).to.be.gte(6);
-                });
-            audioResponsePage.previewVolumeMeter()
-                .should('be.visible');
-        });
-
-        it('When the recording is inprogress and user clicks on \'Stop\' button, recording should stop and \'Your response has been recorded\' help text message should be displayed in preview. Stop button should get replaced with Retake button and Playback button should be enabled. Overlay should not be displayed in player', () => {
-            audioResponsePage.minimalPreviewStopRecordingButton()
-                .click()
-            audioResponsePage.minimalPreviewStopRecordingButton()
-                .should('not.exist');
-            audioResponsePage.minimalPreviewRecorderHelpText()
-                .should('have.text', 'Your response has been recorded');
-            audioResponsePage.minimalPreviewRetakeButton()
-                .should('be.visible')
-                .and('be.enabled')
-                .verifyInnerText('Retake')
-                .find('svg')
-                .should('be.visible');
-            audioResponsePage.minimalPreviewPlaybackButton()
-                .should('be.enabled')
-                .and('be.visible')
-                .verifyInnerText('Playback')
-                .find('svg')
-                .should('be.visible');
-            audioResponsePage.minimalPreviewPlaybackOverlay()
-                .should('not.exist');
-            audioResponsePage.minimalPreviewRecordingOverlay()
-                .should('not.exist');
-        });
-
-        it('CSS of \'Preview\' section if recording is stopped', { tags: 'css' }, () => {
-            audioResponsePage.minimalPreviewRetakeButton()
-                .should('have.css', 'background-color', css.color.primaryBtnBg)
-                .find('.btn-label')
-                .verifyCSS(css.color.primaryBtn, css.fontSize.default, css.fontWeight.regular);
-            audioResponsePage.minimalPreviewPlaybackButton()
-                .should('have.css', 'background-color', css.color.defaultBackground)
-                .find('.btn-label')
-                .verifyCSS(css.color.secondaryBtn, css.fontSize.default, css.fontWeight.regular);
-            audioResponsePage.minimalPreviewRecorderHelpText()
-                .verifyCSS(css.color.text, css.fontSize.normal, css.fontWeight.semibold);
-        });
-
-        it('Accessibility of Preview section if recording is stopped', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(audioResponsePage.previewTabQuestionWrapper());
-        });
-
-        it('When recording is paused and the user clicks on \'Stop\' button, recording should stop and \'Your response has been recorded\' help text message should be displayed in preview. Stop button should get replaced with Playback button and Playback button should be enabled. Overlay should not be displayed in player', () => {
-            audioResponsePage.steps.resetQuestionPreview();
-            audioResponsePage.minimalPreviewRecordButton()
-                .click();
-            audioResponsePage.steps.waitForRecordingToStartMinimalPreview();
-            audioResponsePage.steps.addWaitToRecordAudio(1000);
-            cy.log('Waiting for 1 second pausing the recording and then clicking Stop')
-            audioResponsePage.minimalPreviewPauseRecordingButton()
-                .click();
-            audioResponsePage.minimalPreviewStopRecordingButton()
-                .click()
-                .should('not.exist');
-            audioResponsePage.minimalPreviewRecorderHelpText()
-                .should('have.text', 'Your response has been recorded');
-            audioResponsePage.minimalPreviewRetakeButton()
-                .should('be.visible')
-                .and('be.enabled')
-                .verifyInnerText('Retake')
-                .find('svg')
-                .should('be.visible');
-            audioResponsePage.minimalPreviewPlaybackButton()
-                .should('be.enabled')
-                .and('be.visible')
-                .verifyInnerText('Playback')
-                .find('svg')
-                .should('be.visible');
-            audioResponsePage.minimalPreviewPlaybackOverlay()
-                .should('not.exist');
-            audioResponsePage.minimalPreviewRecordingOverlay()
-                .should('not.exist');
-        });
-
-        it('When recording is inprogress, recording should stop at recording length and \'Stop\' button should get replaced with Retake button. Playback button should be displayed in enabled state. \Your response has been recorded\' help message should be displayed in preview. Overlay should not be displayed in player', () => {
-            audioResponsePage.steps.resetQuestionPreview();
-            audioResponsePage.minimalPreviewRecordButton()
-                .click();
-            audioResponsePage.steps.waitForRecordingToStartMinimalPreview();
-            cy.log('Starting a recording and letting it record until Maximum recording length is reached');
-            audioResponsePage.minimalPreviewRecorderHelpText()
-                .should('have.text', 'Your response has been recorded');
-            audioResponsePage.minimalPreviewStopRecordingButton()
-                .should('not.exist');
-            audioResponsePage.minimalPreviewRetakeButton()
-                .should('be.visible');
-            audioResponsePage.minimalPreviewPlaybackButton()
-                .should('be.enabled')
-                .and('be.visible');
-            audioResponsePage.minimalPreviewPlaybackOverlay()
-                .should('not.exist');
-            audioResponsePage.minimalPreviewRecordingOverlay()
-                .should('not.exist');
-        });
-
-        it('When the user updates maximum recorder length the recording should stop at the updated recorder length', () => {
-            cy.log('Pre-step : Switching to edit tab, updating maximum recorder length and switching back to preview tab to reset the recording');
-            audioResponsePage.steps.switchToEditTab();
-            audioResponsePage.steps.setMaximumRecorderLength(5);
-            audioResponsePage.steps.switchToPreviewTab();
-            audioResponsePage.minimalPreviewRecordButton()
-                .click();
-            audioResponsePage.minimalPreviewRecorderHelpText()
-                .should('have.text', 'Your response has been recorded');
-            audioResponsePage.minimalPreviewPlaybackButton()
-                .click();
-            audioResponsePage.minimalPreviewPlaybackTimer()
-                .invoke('text')
-                .then(($text) => {
-                    expect($text).to.match(/(?<=\/)00:05/);
-                });
-            cy.log('Switching to Edit tab to prevent browser level alert window from appearing');
-            audioResponsePage.steps.switchToEditTab();
-        });
-    });
-
-    if (!grepTags || !grepTags.includes('smoke')) {
-        describe('Preview tab of Minimal recorder style without recording overlay', () => {
-            abortEarlySetup();
-            before(() => {
-                cy.log('Navigating to Audio Response question type');
-                audioResponsePage.steps.navigateToCreateQuestion('audio response');
-                cy.log('Setting Maximum recording length to 10 seconds');
-                audioResponsePage.steps.setMaximumRecorderLength(10);
-                cy.log('Switching to Minimal recorder style deselect recording overlay option, and switching to Preview tab');
-                audioResponsePage.steps.switchToMinimalRecorderStyle();
-                audioResponsePage.steps.expandCustomizeRecorderAndPlaybackControlsAccordion();
-                audioResponsePage.recordingOverlayOptionButton()
-                    .click();
-                audioResponsePage.steps.switchToPreviewTab();
-            });
-
-            it('When the user clicks on the \'Record\' icon, the recording should start and \'Record\' button should get replaced with Stop button. \'Playback\' button should be disabled. Recording overlay should not be displayed', () => {
-                audioResponsePage.minimalPreviewRecordButton()
-                    .click();
-                cy.log('Starting a recording and letting it record until Maximum recording length is reached');
-                audioResponsePage.minimalPreviewStopRecordingButton()
-                    .verifyInnerText('Stop')
-                    .should('be.visible')
-                    .and('be.enabled')
-                    .find('svg')
-                    .should('be.visible');
-                audioResponsePage.minimalPreviewPlaybackButton()
-                    .should('be.disabled')
-                    .and('be.visible')
-                    .verifyInnerText('Playback')
-                    .find('svg')
-                    .should('be.visible');
-                audioResponsePage.minimalPreviewRecordingOverlay()
-                    .should('not.exist');
-            });
-
-            it('When recording is inprogress, user should not be able to pause the recording as the recording overlay is not displayed', () => {
-                audioResponsePage.minimalPreviewPauseRecordingButton()
-                    .should('not.exist');
-            });
-
-            it('When recording is inprogress and the user clicks on \'Stop\' button, recording should stop and \'Your response has been recorded\' help text message should be displayed in preview. Stop button should get replaced with Retake button and Playback button should be enabled. Overlay should not be displayed in player', () => {
-                audioResponsePage.minimalPreviewStopRecordingButton()
-                    .click();
-                audioResponsePage.minimalPreviewRecorderHelpText()
-                    .should('have.text', 'Your response has been recorded');
-                audioResponsePage.minimalPreviewRetakeButton()
-                    .should('be.enabled')
-                    .and('be.visible')
-                    .verifyInnerText('Retake')
-                    .find('svg')
-                    .should('be.visible');
-                audioResponsePage.minimalPreviewPlaybackButton()
-                    .should('be.enabled')
-                    .and('be.visible')
-                    .verifyInnerText('Playback')
-                    .find('svg')
-                    .should('be.visible');
-                audioResponsePage.minimalPreviewRecordingOverlay()
-                    .should('not.exist');
-                audioResponsePage.minimalPreviewPlaybackOverlay()
-                    .should('not.exist');
-            });
-
-            it('When recording is inprogress, recording should stop at recording length and \'Stop\' button should get replaced with Retake button. Playback button should be displayed in enabled state. \Your response has been recorded\' help message should be displayed in preview. Overlay should not be displayed in player', () => {
-                cy.log('Pre-step : Switching to edit tab and back to preview tab to reset the recording, and then starting a new record response');
-                audioResponsePage.steps.resetQuestionPreview();
-                audioResponsePage.minimalPreviewRecordButton()
-                    .click();
-                cy.log('Starting a recording and letting it record until Maximum recording length is reached');
-                audioResponsePage.minimalPreviewRecorderHelpText()
-                    .should('have.text', 'Your response has been recorded');
-                audioResponsePage.minimalPreviewRetakeButton()
-                    .should('be.visible')
-                    .and('be.enabled');
-                audioResponsePage.minimalPreviewStopRecordingButton()
-                    .should('not.exist');
-                audioResponsePage.minimalPreviewPlaybackButton()
-                    .should('be.visible')
-                    .and('be.enabled');
-                audioResponsePage.minimalPreviewPlaybackOverlay()
-                    .should('not.exist');
-                audioResponsePage.minimalPreviewRecordingOverlay()
-                    .should('not.exist');
-                cy.log('Switching to Edit tab to prevent browser level alert window from appearing');
-                audioResponsePage.steps.switchToEditTab();
-            });
-        });
-    }
-
-    describe('Minimal recorder style- Playback player with playback overlay', { tags: 'smoke' }, () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to Audio Response question type');
-            audioResponsePage.steps.navigateToCreateQuestion('audio response');
-            cy.log('Setting Maximum recording length to 10 seconds and selecting minimal recorder style');
-            audioResponsePage.steps.setMaximumRecorderLength(10);
-            audioResponsePage.steps.switchToMinimalRecorderStyle();
-            cy.log('Switch to Preview tab');
-            audioResponsePage.steps.switchToPreviewTab();
-            audioResponsePage.minimalPreviewRecordButton()
-                .click();
-            cy.log('Starting a recording and letting it record until Maximum recording length is reached');
-            audioResponsePage.minimalPreviewRecorderHelpText()
-                .should('have.text', 'Your response has been recorded');
-        });
-
-        it('When the user clicks on \'Playback\' button, then user should be able to playback the recording and \'Playback...\' help-text, waveform, volume meter, progress bar, timer, volume control button,\'Pause\' button should be displayed in playback overlay. Playback button should get replaced with Stop button', () => {
-            const actualAudioSeekedInPercent = 25
-            audioResponsePage.minimalPreviewPlaybackButton()
-                .click();
-            audioResponsePage.steps.waitForPlaybackToBeginMinimalPreview();
-            audioResponsePage.steps.addWaitForPlayback(3000);
-            cy.log('Waiting 3 seconds so that the progress bar moves forward')
-            audioResponsePage.minimalPreviewPlaybackFlyoutHelpText()
-                .verifyInnerText('Playback...');
-            audioResponsePage.previewPlaybackWaveform()
-                .should('be.visible');
-            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)
-                        });
-                });
-            audioResponsePage.previewVolumeMeter()
-                .should('be.visible');
-            audioResponsePage.previewPlaybackProgressBar()
-                .should('be.visible');
-            audioResponsePage.previewPlaybackSlider()
-                .then(($val) => {
-                    const val = $val[0].valueAsNumber
-                    expect(val).to.be.gte(actualAudioSeekedInPercent)
-                });
-            audioResponsePage.minimalPreviewPlaybackTimer()
-                .should('be.visible')
-                .invoke('text')
-                .then((timerText) => {
-                    const currentTimer = timerText.split('/')[0];
-                    const maxTimer = timerText.split('/')[1];
-                    const currentSeconds = parseInt(currentTimer.split(':')[1], 10);
-                    const maxSeconds = parseInt(maxTimer.split(':')[1], 10);
-                    expect(currentSeconds).to.be.gte(2)
-                    expect(maxSeconds).to.equal(10);
-                });
-            audioResponsePage.previewVolumeControlButton()
-                .should('be.visible');
-            audioResponsePage.previewPausePlaybackButton()
-                .should('be.visible');
-            audioResponsePage.minimalPreviewPlaybackButton()
-                .should('not.exist');
-            audioResponsePage.minimalPreviewStopPlaybackButton()
-                .should('be.visible')
-                .verifyInnerText('Stop')
-                .find('svg')
-                .should('be.visible');
-        });
-
-        it('CSS of \'Preview\' section if playback is initiated', { tags: 'css' }, () => {
-            audioResponsePage.minimalPreviewPlaybackOverlay()
-                .should('have.css', 'border', `1px solid ${css.color.audioResponsePreviewComponentsFill}`);
-            audioResponsePage.minimalPreviewPlaybackFlyoutHelpText()
-                .verifyCSS(css.color.text, css.fontSize.small, css.fontWeight.regular);
-            //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)
-            audioResponsePage.previewVolumeControlButton()
-                .find('[data-name="minimal-volume-icon"]')
-                .should('have.css', 'fill', css.color.activeButtons);
-            audioResponsePage.previewVolumeMeter()
-                .find('text')
-                .verifyCSS(css.color.text, css.fontSize.extraSmall, css.fontWeight.medium)
-        });
-
-        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.waveformCursor()
-                .should('not.be.visible')
-            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" });
-            audioResponsePage.previewPlaybackSlider()
-                .parents('span[class*="MuiSlider-thumb"]')
-                .should('not.have.css', 'box-shadow', `${css.color.progressBarSliderHoverBackground} 0px 0px 0px 8px`);
-        });
-
-        //Failing due to https://redmine.zeuslearning.com/issues/532822
-        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');
-            audioResponsePage.previewVolumeControlButton()
-                .trigger('mouseout');
-            audioResponsePage.tooltipText()
-                .should('have.text', 'Volume control');
-            audioResponsePage.previewVolumeControlSlider()
-                .trigger('mouseout');
-            audioResponsePage.tooltipText()
-                .should('not.exist');
-        });
-
-        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()
-                .click()
-                .realHover();
-            audioResponsePage.previewVolumeControlSlider()
-                .should('have.attr', 'value', '0');
-            audioResponsePage.previewVolumeControlButton()
-                .within(() => {
-                    audioResponsePage.previewMutedVolumeControlIcon()
-                        .should('be.visible');
-                });
-            cy.get('body')
-                .realHover({ position: "topRight" });
-        });
-
-        it('When the user hovers on muted \'Volume control\' icon, \'Unmute\' text should be displayed in tooltip', () => {
-            audioResponsePage.previewVolumeControlButton()
-                .realHover();
-            audioResponsePage.tooltipText()
-                .should('be.visible')
-                .verifyInnerText('Unmute');
-            audioResponsePage.previewVolumeControlSlider()
-                .should('have.attr', 'value', '0');
-            cy.get('body')
-                .realHover({ position: "topRight" });
-            audioResponsePage.tooltipText()
-                .should('not.exist');
-        });
-
-        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('When the user drags the volume control all the way down, then audio should be muted and the icon should change to a muted state. User should be able to unmute the audio by dragging the volume control higher again', () => {
-            cy.log('Clicking at the bottom of the volume slider');
-            audioResponsePage.previewVolumeControlSlider()
-                .realClick({ position: "bottom" })
-                .should('have.attr', 'value', '0');
-            audioResponsePage.previewVolumeControlButton()
-                .within(() => {
-                    audioResponsePage.previewMutedVolumeControlIcon()
-                        .should('be.visible');
-                });
-            audioResponsePage.previewVolumeControlSlider()
-                .realClick({ position: "top" })
-                .should('have.attr', 'value', '100');
-            audioResponsePage.previewVolumeControlButton()
-                .within(() => {
-                    audioResponsePage.previewMutedVolumeControlIcon()
-                        .should('not.exist');
-                });
-            cy.get('body')
-                .realHover({ position: "topRight" });
-        });
-
-        it('When the user clicks on \'Pause\' icon the playback should paused in playback mode. Also progress bar, waveform and timer should not be updated. Volume meter should drop to 0db', () => {
-            let initialWidthProgressBar
-            let initialWidthWaveform
-            audioResponsePage.steps.resetQuestionPreview();
-            audioResponsePage.minimalPreviewRecordButton()
-                .click();
-            cy.log('Letting it record until maximum recorder length of 10 seconds is hit');
-            audioResponsePage.minimalPreviewRecorderHelpText()
-                .should('have.text', 'Your response has been recorded');
-            audioResponsePage.minimalPreviewPlaybackButton()
-                .click();
-            cy.log('Waiting 3 seconds and then pausing');
-            audioResponsePage.steps.waitForPlaybackToBeginMinimalPreview();
-            audioResponsePage.steps.addWaitForPlayback(2000);
-            audioResponsePage.previewPausePlaybackButton()
-                .click();
-            audioResponsePage.previewPlayPlaybackButton()
-                .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].value
-                });
-            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].value
-                    expect(finalWidth).to.equal(initialWidthProgressBar)
-                });
-            audioResponsePage.minimalPreviewPlaybackFlyoutHelpText()
-                .verifyInnerText('Playback paused');
-            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.minimalPreviewPlaybackFlyoutHelpText()
-                .verifyCSS(css.color.text, css.fontSize.small, css.fontWeight.regular);
-            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.previewPlayPlaybackButton()
-                .find('svg')
-                .should('have.css', 'fill', css.color.activeButtons);
-        });
-
-        it('Accessibility of \'Preview\' section if playback is paused', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(audioResponsePage.previewTabQuestionWrapper());
-        });
-
-        it('When user clicks on \'Play\' button, playback should resume and \'Play\' button should get replaced with \'Pause\' button', () => {
-            cy.log('Pre-step : Switching to edit tab and back to preview tab to reset the recorder, then recording a new response')
-            let initialWidthWaveform
-            let initialWidthProgressBar
-            let initialTimer
-            audioResponsePage.steps.resetQuestionPreview();
-            audioResponsePage.minimalPreviewRecordButton()
-                .click();
-            cy.log('Letting it record until maximum recorder lenght of 10 seconds is hit');
-            audioResponsePage.minimalPreviewRecorderHelpText()
-                .should('have.text', 'Your response has been recorded');
-            audioResponsePage.minimalPreviewPlaybackButton()
-                .click();
-            audioResponsePage.steps.waitForPlaybackToBeginMinimalPreview();
-            audioResponsePage.steps.addWaitForPlayback(3000);
-            cy.log('Waiting 3 seconds and then pausing');
-            audioResponsePage.previewPausePlaybackButton()
-                .click();
-            audioResponsePage.minimalPreviewPlaybackTimer()
-                .invoke('text')
-                .then(($timer) => {
-                    const currentTimer = $timer.split('/')[0];
-                    initialTimer = parseInt(currentTimer.split(':')[1], 10);
-                });
-            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
-                });
-            audioResponsePage.previewPlayPlaybackButton()
-                .click();
-            audioResponsePage.minimalPreviewPlaybackFlyoutHelpText()
-                .verifyInnerText('Playback...');
-            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.gte(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)
-                });
-            cy.log('Checking timer value 1 second after resuming')
-            audioResponsePage.minimalPreviewPlaybackTimer()
-                .invoke('text')
-                .then(($timer) => {
-                    const currentTimer = $timer.split('/')[0];
-                    const finalTimer = parseInt(currentTimer.split(':')[1], 10);
-                    expect(finalTimer).to.be.gte(initialTimer);
-                });
-        });
-
-        it('When user clicks on \'Stop\' button, playback should stop and Stop button should get replaced with Playback button and the playback overlay should disappear. When user playbacks again, the slider and waveform and the timer should start from 0', () => {
-            audioResponsePage.minimalPreviewStopPlaybackButton()
-                .click()
-                .should('not.exist');
-            audioResponsePage.minimalPreviewRecorderHelpText()
-                .should('have.text', 'Your response has been recorded');
-            audioResponsePage.minimalPreviewPlaybackButton()
-                .should('be.visible')
-                .and('be.enabled');
-            audioResponsePage.minimalPreviewPlaybackOverlay()
-                .should('not.exist');
-            audioResponsePage.minimalPreviewPlaybackButton()
-                .click();
-            audioResponsePage.minimalPreviewPlaybackTimer()
-                .invoke('text')
-                .then((timerText) => {
-                    const currentTimer = timerText.split('/')[0];
-                    const currentSeconds = parseInt(currentTimer.split(':')[1], 10);
-                    expect(currentSeconds).to.be.closeTo(0, 1);
-                });
-            audioResponsePage.previewWaveformCurrentPositionWidth()
-                .then(($currWidth) => {
-                    const currWidth = $currWidth[0].clientWidth
-                    expect(currWidth).to.be.closeTo(0, 1)
-                });
-            audioResponsePage.previewPlaybackSlider()
-                .then(($val) => {
-                    const val = $val[0].value
-                    expect(Number(val)).to.be.closeTo(0, 1)
-                });
-            cy.log('Switching to Edit tab to prevent browser level alert window from appearing');
-            audioResponsePage.steps.switchToEditTab();
-        });
-    });
-
-    if (!grepTags || !grepTags.includes('smoke')) {
-        describe('Minimal recorder style- Playback player without playback overlay', () => {
-            abortEarlySetup();
-            before(() => {
-                cy.log('Navigating to Audio Response question type');
-                audioResponsePage.steps.navigateToCreateQuestion('audio response');
-                cy.log('Setting Maximum recording length to 10 seconds and selecting minimal recorder style');
-                audioResponsePage.steps.setMaximumRecorderLength(10);
-                audioResponsePage.steps.switchToMinimalRecorderStyle();
-                audioResponsePage.steps.expandCustomizeRecorderAndPlaybackControlsAccordion();
-                audioResponsePage.playbackOverlayOptionButton()
-                    .click();
-                cy.log('Switch to Preview tab');
-                audioResponsePage.steps.switchToPreviewTab();
-                audioResponsePage.minimalPreviewRecordButton()
-                    .click();
-                cy.log('Starting a recording and letting it record until Maximum recording length is reached');
-                audioResponsePage.minimalPreviewRecorderHelpText()
-                    .should('have.text', 'Your response has been recorded');
-            });
-
-
-            it('When the user clicks on \'Playback\' button, playback of saved recording should start and Playback button should get replaced with stop button. Playback overlay should not be displayed', () => {
-                audioResponsePage.minimalPreviewPlaybackButton()
-                    .click()
-                    .should('not.exist');
-                audioResponsePage.minimalPreviewStopPlaybackButton()
-                    .should('be.visible')
-                    .and('be.enabled')
-                    .verifyInnerText('Stop')
-                    .find('svg')
-                    .should('be.visible');
-                audioResponsePage.minimalPreviewPlaybackOverlay()
-                    .should('not.exist');
-            });
-
-            it('When user clicks on \'Stop\' button, playback should stop and Stop button should get replaced with Playback button.', () => {
-                audioResponsePage.minimalPreviewStopPlaybackButton()
-                    .click()
-                    .should('not.exist');
-                audioResponsePage.minimalPreviewPlaybackButton()
-                    .should('be.visible')
-                    .and('be.enabled');
-                audioResponsePage.minimalPreviewPlaybackOverlay()
-                    .should('not.exist');
-                cy.log('Switching to Edit tab to prevent browser level alert window from appearing');
-                audioResponsePage.steps.switchToEditTab();
-            });
-        });
-    }
-
-    if (!grepTags || !grepTags.includes('smoke')) {
-        describe('Preview tab of Minimal recorder style- Retake my audio response with recording overlay', () => {
-            abortEarlySetup();
-            before(() => {
-                cy.log('Navigating to Audio Response question type');
-                audioResponsePage.steps.navigateToCreateQuestion('audio response');
-                cy.log('Setting Maximum recording length to 10 seconds and selecting minimal recorder style');
-                audioResponsePage.steps.setMaximumRecorderLength(10);
-                audioResponsePage.steps.switchToMinimalRecorderStyle();
-                cy.log('Switch to Preview tab');
-                audioResponsePage.steps.switchToPreviewTab();
-                audioResponsePage.minimalPreviewRecordButton()
-                    .click();
-                cy.log('Starting a recording and letting it record until Maximum recording length is reached');
-                audioResponsePage.minimalPreviewRecorderHelpText()
-                    .should('have.text', 'Your response has been recorded');
-            });
-
-            it('When the user clicks on \'Retake\' button, \'Retake\' popup should be displayed along with \'Are you sure you want to overwrite the existing audio recording?\' message', () => {
-                audioResponsePage.minimalPreviewRetakeButton()
-                    .click();
-                audioResponsePage.dialogBox()
-                    .should('be.visible');
-                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('When the user clicks on Cancel button, popup should close and previous state persist', () => {
-                audioResponsePage.cancelRetakeButton()
-                    .click();
-                audioResponsePage.dialogBox()
-                    .should('not.exist');
-                audioResponsePage.minimalPreviewRetakeButton()
-                    .should('be.visible');
-                audioResponsePage.minimalPreviewPlaybackButton()
-                    .should('be.visible');
-                audioResponsePage.minimalPreviewRecorderHelpText()
-                    .should('have.text', 'Your response has been recorded');
-            });
-
-            it('When the user clicks on Confirm button of the retake popup, the previous recording should get deleted and a new recording should begin. When recording is inprogress, recording overlay should be displayed', () => {
-                audioResponsePage.minimalPreviewRetakeButton()
-                    .click();
-                audioResponsePage.confirmRetakeButton()
-                    .click();
-                audioResponsePage.dialogBox()
-                    .should('not.exist');
-                audioResponsePage.minimalPreviewRecordingOverlay()
-                    .should('be.visible');
-                audioResponsePage.minimalPreviewRecorderFlyoutHelpText()
-                    .verifyInnerText('Recording...');
-                audioResponsePage.minimalPreviewStopRecordingButton()
-                    .should('be.visible')
-                    .and('be.enabled');
-                audioResponsePage.minimalPreviewPlaybackButton()
-                    .should('be.visible')
-                    .and('be.disabled');
-                cy.log('Letting it record until Maximum recording length of 10 seconds is reached');
-                audioResponsePage.minimalPreviewRecorderHelpText()
-                    .should('have.text', 'Your response has been recorded');
-                cy.log('Switching to Edit tab to prevent browser level alert window from appearing');
-                audioResponsePage.steps.switchToEditTab();
-            });
-        });
-    }
-
-    if (!grepTags || !grepTags.includes('smoke')) {
-        describe('Preview tab of Minimal recorder style- Retake my audio response without recording overlay', () => {
-            abortEarlySetup();
-            before(() => {
-                cy.log('Navigating to Audio Response question type');
-                audioResponsePage.steps.navigateToCreateQuestion('audio response');
-                cy.log('Setting Maximum recording length to 10 seconds and selecting minimal recorder style');
-                audioResponsePage.steps.setMaximumRecorderLength(10);
-                audioResponsePage.steps.switchToMinimalRecorderStyle();
-                cy.log('Expand \'Customize recorder and playback controls (for student player)\' accordion and deselect recording overlay, then switching to preview tab');
-                audioResponsePage.customizeRecorderAndPlaybackControlsAccordionLabel()
-                    .click();
-                audioResponsePage.recordingOverlayOptionButton()
-                    .click();
-                audioResponsePage.steps.switchToPreviewTab();
-                audioResponsePage.minimalPreviewRecordButton()
-                    .click();
-                cy.log('Starting a recording and letting it record until Maximum recording length of 10 seconds is reached');
-                audioResponsePage.minimalPreviewRecorderHelpText()
-                    .should('have.text', 'Your response has been recorded');
-            });
-
-            it('When the user clicks on Confirm button of the retake popup, the previous recording should get deleted and a new recording should begin. When recording is inprogress, recording overlay should not be displayed', () => {
-                audioResponsePage.minimalPreviewRetakeButton()
-                    .click();
-                audioResponsePage.confirmRetakeButton()
-                    .click();
-                audioResponsePage.dialogBox()
-                    .should('not.exist');
-                audioResponsePage.minimalPreviewStopRecordingButton()
-                    .should('be.visible')
-                    .and('be.enabled');
-                audioResponsePage.minimalPreviewPlaybackButton()
-                    .should('be.visible')
-                    .and('be.disabled');
-                audioResponsePage.minimalPreviewRecordingOverlay()
-                    .should('not.exist');
-                cy.log('Letting it record until Maximum recording length of 10 seconds is reached');
-                audioResponsePage.minimalPreviewRecorderHelpText()
-                    .should('have.text', 'Your response has been recorded');
-            });
-        });
-    }
-});