itemengine-cypress-automation 1.0.21 → 1.0.23

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

@@ -0,0 +1,591 @@
+import { audioResponsePage } from '../../../pages/audioResponsePage';
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+describe('Create Item page - Audio response: Controls for response playback', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Controls for response playback- Play', () => {
+        abortEarlySetup();
+        before(() => {
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+            cy.log('Setting \'Maximum record length\' to 5 seconds, so that I can record for a duration of 5 seconds without using cy.wait(5000)');
+            audioResponsePage.steps.setMaximumRecorderLength('5');
+            cy.log('Expand \'Customize recorder and playback controls (for student player)\' accordion')
+            audioResponsePage.steps.expandCustomizeRecorderAndPlaybackControlsAccordion();
+        });
+
+        it('In standard mode, when the \'Play\' option is selected the play icon button should be enabled in the playback player of preview tab', () => {
+            cy.log('Pre-step: Switching to Preview tab');
+            audioResponsePage.steps.switchToPreviewTab();
+            cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
+            audioResponsePage.standardPreviewStartRecordingButton()
+                .click();
+            audioResponsePage.steps.waitForRecordingToStartStandardPreview();
+            audioResponsePage.standardPreviewPlayerHelpText()
+                .should('be.visible');
+            audioResponsePage.previewPlayPlaybackButton()
+                .should('be.enabled');
+        });
+
+        it('In standard mode, when the play option is deselected the play icon button should be disabled in the preview tab and player should not able to playback the recording', () => {
+            cy.log('Pre-step : Switching to Edit tab and deselecting Play button');
+            audioResponsePage.steps.switchToEditTab();
+            audioResponsePage.playOptionButton()
+                .click()
+                .should('have.class', 'ngie-toggle-button-not-selected')
+            cy.log('Switching to Preview tab');
+            audioResponsePage.steps.switchToPreviewTab();
+            audioResponsePage.standardPreviewStartRecordingButton()
+                .click();
+            audioResponsePage.standardPreviewPlayerHelpText()
+                .verifyInnerText('Your response has been recorded');
+            audioResponsePage.previewPlayPlaybackButton()
+                .should('be.visible')
+                .and('be.disabled');
+        });
+
+        it('In minimal mode, when the play option is selected the playback icon button should be enabled in the preview tab', () => {
+            cy.log('Pre-step: Switching to Edit tab and selecting minimal audio recorder style option from audio recorder style dropdown, and switching back to preview tab');
+            audioResponsePage.steps.switchToEditTab();
+            audioResponsePage.steps.switchToMinimalRecorderStyle();
+            audioResponsePage.playOptionButton()
+                .click()
+                .should('have.class', 'ngie-toggle-button-selected')
+            audioResponsePage.steps.switchToPreviewTab();
+            audioResponsePage.minimalPreviewRecordButton()
+                .click();
+            audioResponsePage.minimalPreviewPlaybackButton()
+                .should('be.enabled');
+        });
+
+        it('In minimal mode, when the play option is deselected the playback button should be disabled in the preview tab and user should not able to playback the recording', () => {
+            cy.log('Pre-step: Switching to Edit tab');
+            audioResponsePage.steps.switchToEditTab();
+            audioResponsePage.playOptionButton()
+                .click()
+                .should('have.class', 'ngie-toggle-button-not-selected')
+            cy.log('Switching to Preview tab');
+            audioResponsePage.steps.switchToPreviewTab();
+            cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
+            audioResponsePage.minimalPreviewRecordButton()
+                .click();
+            audioResponsePage.minimalPreviewRecorderHelpText()
+                .should('have.text', 'Your response has been recorded');
+            audioResponsePage.minimalPreviewPlaybackButton()
+                .should('be.visible')
+                .and('be.disabled');
+        });
+    });
+
+    describe('Controls for response playback- Pause', () => {
+        abortEarlySetup();
+        before(() => {
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+            cy.log('Setting \'Maximum record length\' to 5 seconds, so that I can record for a duration of 5 seconds without using cy.wait(5000)');
+            audioResponsePage.steps.setMaximumRecorderLength('5');
+            cy.log('Expand \'Customize recorder and playback controls (for student player)\' accordion');
+            audioResponsePage.steps.expandCustomizeRecorderAndPlaybackControlsAccordion();
+        });
+
+        it('In standard mode, when the \'Pause\' option is selected the pause icon button should be enabled in the preview tab', () => {
+            cy.log('Pre-step: Switching to Preview tab');
+            audioResponsePage.steps.switchToPreviewTab();
+            cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
+            audioResponsePage.standardPreviewStartRecordingButton()
+                .click();
+            audioResponsePage.steps.waitForRecordingToStartStandardPreview();
+            audioResponsePage.standardPreviewPlayerHelpText()
+                .should('be.visible');
+            audioResponsePage.previewPlayPlaybackButton()
+                .click();
+            audioResponsePage.previewPausePlaybackButton()
+                .should('be.enabled');
+        });
+
+        it('In standard mode, when the pause option is deselected the pause icon button should be disabled in the preview tab and player should not able to paused recorded response', () => {
+            cy.log('Pre-step: Switching to Edit tab');
+            audioResponsePage.steps.switchToEditTab();
+            audioResponsePage.pauseOptionButton()
+                .click()
+                .should('have.class', 'ngie-toggle-button-not-selected')
+            cy.log('Switching to Preview tab');
+            audioResponsePage.steps.switchToPreviewTab();
+            cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
+            audioResponsePage.standardPreviewStartRecordingButton()
+                .click();
+            audioResponsePage.previewPlayPlaybackButton()
+                .click();
+            audioResponsePage.previewPausePlaybackButton()
+                .should('be.visible')
+                .and('be.disabled');
+        });
+
+        it('In minimal mode, when the pause option is selected the pause icon button should be enabled in the preview tab', () => {
+            cy.log('Pre-step: Switching to Edit tab and selecting minimal audio recorder style option from audio recorder style dropdown');
+            audioResponsePage.steps.switchToEditTab();
+            audioResponsePage.steps.switchToMinimalRecorderStyle();
+            audioResponsePage.pauseOptionButton()
+                .click()
+                .should('have.class', 'ngie-toggle-button-selected')
+            cy.log('Switching to Preview tab');
+            audioResponsePage.steps.switchToPreviewTab();
+            audioResponsePage.minimalPreviewRecordButton()
+                .click();
+            audioResponsePage.minimalPreviewRecorderHelpText()
+                .should('have.text', 'Your response has been recorded');
+            audioResponsePage.minimalPreviewPlaybackButton()
+                .click();
+            audioResponsePage.previewPausePlaybackButton()
+                .should('be.enabled');
+        });
+
+        it('In minimal mode, when the pause option is deselected the pause icon button should be disabled in the preview tab and player should not able to paused recorded response', () => {
+            cy.log('Pre-step: Switching to Edit tab');
+            audioResponsePage.steps.switchToEditTab();
+            audioResponsePage.pauseOptionButton()
+                .click()
+                .should('have.class', 'ngie-toggle-button-not-selected')
+            cy.log('Switching to Preview tab');
+            audioResponsePage.steps.switchToPreviewTab();
+            audioResponsePage.minimalPreviewRecordButton()
+                .click();
+            audioResponsePage.minimalPreviewRecorderHelpText()
+                .should('have.text', 'Your response has been recorded');
+            audioResponsePage.minimalPreviewPlaybackButton()
+                .click();
+            audioResponsePage.previewPausePlaybackButton()
+                .should('be.visible')
+                .and('be.disabled');
+        });
+    });
+
+    describe('Controls for response playback- Seek', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Audio Response question type');
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+            cy.log('Expand \'Customize recorder and playback controls (for student player)\' accordion');
+            audioResponsePage.steps.expandCustomizeRecorderAndPlaybackControlsAccordion();
+            cy.log('Setting \'Maximum record length\' to 5 seconds, so that I can record for a duration of 5 seconds without using cy.wait(5000)');
+            audioResponsePage.steps.setMaximumRecorderLength('5');
+        });
+
+        //TODO: Verify outer-circle on hover of Progress bar slider
+        it('In standard mode, when the \'Seek\' option is selected the seek functionality should be enabled in the preview tab user should be able to seek the audio from the progress bar and waveform', () => {
+            let actualAudioSeekedInPercent = 50
+            cy.log('Pre-step : Switching to Preview tab');
+            audioResponsePage.steps.switchToPreviewTab();
+            cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
+            audioResponsePage.standardPreviewStartRecordingButton()
+                .click();
+            audioResponsePage.steps.waitForRecordingToStartStandardPreview();
+            audioResponsePage.standardPreviewPlayerHelpText()
+                .should('be.visible');
+            audioResponsePage.previewPlayPlaybackButton()
+                .click();
+            audioResponsePage.steps.waitForPlaybackToBeginStandardPreview();
+            audioResponsePage.previewPausePlaybackButton()
+                .click();
+            cy.log('Clicking at the middle of the progress bar to seek till 50% of the recording');
+            audioResponsePage.previewPlaybackProgressBar()
+                .click();
+            audioResponsePage.previewPlaybackSlider()
+                .should('have.attr', 'value', 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.closeTo(actualAudioSeekedInPercent, 1)
+                        });
+                });
+            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 = 25
+                    const value = $val[0].value
+                    expect(Number(value)).to.be.closeTo(actualAudioSeekedInPercent, 1)
+                });
+            audioResponsePage.previewWaveformTotalWidth()
+                .then(($totalWidth) => {
+                    actualAudioSeekedInPercent = 25
+                    const totalWidth = $totalWidth[0].clientWidth
+                    audioResponsePage.previewWaveformCurrentPositionWidth()
+                        .then(($currWidth) => {
+                            const currentWaveFormWidth = $currWidth[0].clientWidth
+                            const currentWaveFormWidthInPercent = (currentWaveFormWidth / totalWidth) * 100
+                            expect(currentWaveFormWidthInPercent).to.be.closeTo(actualAudioSeekedInPercent, 1)
+                        });
+                });
+            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('In standard mode, when the \'Seek\' option is deselected, the progress bar should not have a slider handle and waveform should not have cursor if user hover on it and user should not be able to seek the audio from the progress bar and waveform', () => {
+            let actualAudioSeekedInPercent = 25
+            cy.log('Pre-step: Switching to Edit tab, deselecting \'Seek\' button, switching back to Preview tab and saving a record response');
+            audioResponsePage.steps.switchToEditTab();
+            audioResponsePage.seekOptionButton()
+                .click()
+                .should('have.class', 'ngie-toggle-button-not-selected')
+            audioResponsePage.steps.switchToPreviewTab();
+            cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
+            audioResponsePage.standardPreviewStartRecordingButton()
+                .click();
+            audioResponsePage.standardPreviewPlayerHelpText()
+                .verifyInnerText('Your response has been recorded');
+            audioResponsePage.previewPlayPlaybackButton()
+                .click();
+            audioResponsePage.steps.waitForPlaybackToBeginStandardPreview();
+            audioResponsePage.previewPausePlaybackButton()
+                .click();
+            cy.log('Clicking at the middle of the progress bar to seek till 50% of the recording');
+            audioResponsePage.previewPlaybackProgressBar()
+                .click();
+            audioResponsePage.previewPlaybackSlider()
+                .then(($val) => {
+                    const value = $val[0].value
+                    expect(Number(value)).to.be.closeTo(actualAudioSeekedInPercent, 5)
+                });
+            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.closeTo(actualAudioSeekedInPercent, 5)
+                        });
+                });
+            cy.log('Clicking on the waveform to seek till 75% of the recording');
+            audioResponsePage.previewPlaybackWaveform()
+                .then(($waveformDimensions) => {
+                    const x = $waveformDimensions[0].clientWidth - ($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) => {
+                    const value = $val[0].value
+                    expect(Number(value)).to.be.closeTo(actualAudioSeekedInPercent, 5)
+                });
+            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.closeTo(actualAudioSeekedInPercent, 5)
+                        });
+                });
+            audioResponsePage.previewPlaybackSlider()
+                .should('not.be.visible');
+            audioResponsePage.previewPlaybackWaveform()
+                .realHover();
+            audioResponsePage.waveformCursor()
+                .should('not.be.visible');
+        });
+
+        it('In minimal mode, when \'Seek\' option is selected user should be able to seek the audio from the progress bar and waveform', () => {
+            let actualAudioSeekedInPercent = 50
+            cy.log('Pre-step: Switching to Edit tab and selecting minimal audio recorder style option from audio recorder style dropdown and switching back to preview tab and saving a recording response');
+            audioResponsePage.steps.switchToEditTab();
+            audioResponsePage.steps.switchToMinimalRecorderStyle();
+            audioResponsePage.seekOptionButton()
+                .click()
+                .should('have.class', 'ngie-toggle-button-selected')
+            audioResponsePage.steps.switchToPreviewTab();
+            cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
+            audioResponsePage.minimalPreviewRecordButton()
+                .click();
+            audioResponsePage.steps.waitForRecordingToStartMinimalPreview();
+            audioResponsePage.minimalPreviewRecorderHelpText()
+                .should('have.text', 'Your response has been recorded');
+            audioResponsePage.minimalPreviewPlaybackButton()
+                .click();
+            audioResponsePage.steps.waitForPlaybackToBeginMinimalPreview();
+            audioResponsePage.previewPausePlaybackButton()
+                .click();
+            cy.log('Clicking at the middle of the progress bar to seek till 50% of the recording');
+            audioResponsePage.previewPlaybackProgressBar()
+                .click();
+            audioResponsePage.previewPlaybackSlider()
+                .should('have.attr', 'value', 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.closeTo(actualAudioSeekedInPercent, 1)
+                        });
+                });
+            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 = 25
+                    const value = $val[0].value
+                    expect(Number(value)).to.be.closeTo(actualAudioSeekedInPercent, 1)
+                });
+            audioResponsePage.previewWaveformTotalWidth()
+                .then(($totalWidth) => {
+                    actualAudioSeekedInPercent = 25
+                    const totalWidth = $totalWidth[0].clientWidth
+                    audioResponsePage.previewWaveformCurrentPositionWidth()
+                        .then(($currWidth) => {
+                            const currentWaveFormWidth = $currWidth[0].clientWidth
+                            const currentWaveFormWidthInPercent = (currentWaveFormWidth / totalWidth) * 100
+                            expect(currentWaveFormWidthInPercent).to.be.closeTo(actualAudioSeekedInPercent, 1)
+                        });
+                });
+            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('In minimal mode, when \'Seek\' option is deselected, on hover the progress bar should not have a slider handle and waveform should not have cursor if user hover on it and user should not able to change the play pointer position on the progress bar and waveform', () => {
+            let actualAudioSeekedInPercent = 25
+            cy.log('Pre-step : Switching to Edit tab, deselecting \'Seek\' and switching back to Preview tab and saving a recording response');
+            audioResponsePage.steps.switchToEditTab();
+            audioResponsePage.seekOptionButton()
+                .click()
+                .should('have.class', 'ngie-toggle-button-not-selected')
+            audioResponsePage.steps.switchToPreviewTab();
+            cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
+            audioResponsePage.minimalPreviewRecordButton()
+                .click();
+            audioResponsePage.minimalPreviewRecorderHelpText()
+                .should('have.text', 'Your response has been recorded');
+            audioResponsePage.minimalPreviewPlaybackButton()
+                .click();
+            audioResponsePage.steps.waitForPlaybackToBeginMinimalPreview();
+            audioResponsePage.previewPausePlaybackButton()
+                .click();
+            audioResponsePage.previewPlaybackSlider()
+                .should('not.be.visible');
+            cy.log('Clicking at the middle of the progress bar to seek till 50% of the recording');
+            audioResponsePage.previewPlaybackProgressBar()
+                .click();
+            audioResponsePage.previewPlaybackSlider()
+                .then(($val) => {
+                    const value = $val[0].value
+                    expect(Number(value)).to.be.closeTo(actualAudioSeekedInPercent, 5)
+                });
+            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.closeTo(actualAudioSeekedInPercent, 5)
+                        });
+                });
+            cy.log('Clicking on the waveform to seek till 75% of the recording');
+            audioResponsePage.previewPlaybackWaveform()
+                .then(($waveformDimensions) => {
+                    const x = $waveformDimensions[0].clientWidth - ($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) => {
+                    const value = $val[0].value
+                    expect(Number(value)).to.be.closeTo(actualAudioSeekedInPercent, 5)
+                });
+            audioResponsePage.previewWaveformTotalWidth()
+                .then(($totalWidth) => {
+                    const actualAudioSeekedInPercent = 25
+                    const totalWidth = $totalWidth[0].clientWidth
+                    audioResponsePage.previewWaveformCurrentPositionWidth()
+                        .then(($currWidth) => {
+                            const currentWaveFormWidth = $currWidth[0].clientWidth
+                            const currentWaveFormWidthInPercent = (currentWaveFormWidth / totalWidth) * 100
+                            expect(currentWaveFormWidthInPercent).to.be.closeTo(actualAudioSeekedInPercent, 5)
+                        });
+                });
+            audioResponsePage.previewPlaybackSlider()
+                .should('not.be.visible');
+            audioResponsePage.previewPlaybackWaveform()
+                .realHover();
+            audioResponsePage.waveformCursor()
+                .should('not.be.visible');
+        });
+    });
+
+    describe('Controls for response playback- Volume Control', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Audio Response question type');
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+            cy.log('Setting \'Maximum record length\' to 5 seconds, so that I can record for a duration of 5 seconds without using cy.wait(5000)');
+            audioResponsePage.steps.setMaximumRecorderLength('5');
+            audioResponsePage.steps.expandCustomizeRecorderAndPlaybackControlsAccordion();
+        });
+
+        it('In standard mode, when the \'Volume Control\' option is selected the volume control icon button should be enabled in the preview tab', () => {
+            cy.log('Pre-step : Switches to Preview tab and saves a recording');
+            audioResponsePage.steps.switchToPreviewTab();
+            cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
+            audioResponsePage.standardPreviewStartRecordingButton()
+                .click();
+            audioResponsePage.steps.waitForRecordingToStartStandardPreview();
+            audioResponsePage.standardPreviewPlayerHelpText()
+                .should('be.visible');
+            audioResponsePage.previewPlayPlaybackButton()
+                .click();
+            audioResponsePage.previewVolumeControlButton()
+                .should('be.visible')
+                .and('be.enabled');
+        });
+
+        it('In standard mode, when the volume control option is deselected \'Volume control\' should not be displayed on the playback player', () => {
+            cy.log('Pre-step : User switches to Edit tab, deselects \'Volume control\' button, switches back to Preview tab and saves a recording');
+            audioResponsePage.steps.switchToEditTab();
+            audioResponsePage.volumeControlOptionButton()
+                .click()
+                .should('have.class', 'ngie-toggle-button-not-selected')
+            cy.log('Switching to Preview tab');
+            audioResponsePage.steps.switchToPreviewTab();
+            cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
+            audioResponsePage.standardPreviewStartRecordingButton()
+                .click();
+            audioResponsePage.standardPreviewPlayerHelpText()
+                .verifyInnerText('Your response has been recorded');
+            audioResponsePage.previewPlayPlaybackButton()
+                .click();
+            audioResponsePage.previewVolumeControlButton()
+                .should('not.exist');
+        });
+
+        it('In minimal mode, when the volume control option is selected the volume control icon button should be enabled in the preview tab', () => {
+            cy.log('Pre-step: Switching to Edit tab and selecting minimal audio recorder style option from audio recorder style dropdown');
+            audioResponsePage.steps.switchToEditTab();
+            audioResponsePage.steps.switchToMinimalRecorderStyle();
+            audioResponsePage.volumeControlOptionButton()
+                .click()
+                .should('have.class', 'ngie-toggle-button-selected')
+            cy.log('Switching to Preview tab');
+            audioResponsePage.steps.switchToPreviewTab();
+            cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
+            audioResponsePage.minimalPreviewRecordButton()
+                .click();
+            audioResponsePage.minimalPreviewRecorderHelpText()
+                .should('have.text', 'Your response has been recorded');
+            audioResponsePage.minimalPreviewPlaybackButton()
+                .click();
+            audioResponsePage.previewVolumeControlButton()
+                .should('be.enabled')
+                .and('be.visible');
+        });
+
+        it('In minimal mode, when the volume control option is deselected the volume control button should not be displayed in the preview tab', () => {
+            cy.log('Pre-step : Switching to Edit tab, deselecting \'Volume control\' button and switching back to Preview tab');
+            audioResponsePage.steps.switchToEditTab();
+            audioResponsePage.volumeControlOptionButton()
+                .click()
+                .should('have.class', 'ngie-toggle-button-not-selected')
+            audioResponsePage.steps.switchToPreviewTab();
+            cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
+            audioResponsePage.minimalPreviewRecordButton()
+                .click();
+            audioResponsePage.minimalPreviewRecorderHelpText()
+                .should('have.text', 'Your response has been recorded');
+            audioResponsePage.minimalPreviewPlaybackButton()
+                .click();
+            audioResponsePage.previewVolumeControlButton()
+                .should('not.exist');
+        });
+    });
+
+    describe('Controls for response playback- Playback overlay', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Audio Response question type');
+            audioResponsePage.steps.navigateToCreateQuestion('audio response');
+            cy.log('Setting \'Maximum record length\' to 5 seconds, so that I can record for a duration of 5 seconds without using cy.wait(5000)');
+            audioResponsePage.steps.setMaximumRecorderLength('5');
+            cy.log('Selecing \'Minimal\' Recorder style and switching to Preview tab');
+            audioResponsePage.steps.switchToMinimalRecorderStyle();
+            cy.log('Expand \'Customize recorder and playback controls (for student player)\' accordion');
+            audioResponsePage.steps.expandCustomizeRecorderAndPlaybackControlsAccordion();
+        });
+
+        it('In minimal mode, when the \'Playback overlay\' option is selected the playback overlay should be displayed in the preview tab', () => {
+            cy.log('Pre-step: Switching to Preview tab and saving a recording response');
+            audioResponsePage.steps.switchToPreviewTab();
+            cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
+            audioResponsePage.minimalPreviewRecordButton()
+                .click();
+            audioResponsePage.steps.waitForRecordingToStartMinimalPreview();
+            audioResponsePage.minimalPreviewRecorderHelpText()
+                .should('be.visible');
+            audioResponsePage.minimalPreviewPlaybackButton()
+                .click();
+            audioResponsePage.minimalPreviewPlaybackOverlay()
+                .should('be.visible');
+        });
+
+        it('In minimal mode, when the \'Playback overlay\' option is deselected overlay should not be displayed in preview tab. User should be able to stop playback by clicking on stop button', () => {
+            cy.log('Pre-step : Switching to Edit tab and deselecting \'Playback overlay\'');
+            audioResponsePage.steps.switchToEditTab();
+            audioResponsePage.playbackOverlayOptionButton()
+                .click()
+                .should('have.class', 'ngie-toggle-button-not-selected')
+            audioResponsePage.steps.switchToPreviewTab();
+            cy.log('Pre-step: Switching to Preview tab');
+            audioResponsePage.steps.switchToPreviewTab();
+            cy.log('Clicking on start recording and letting it record until maximum recorder length of 5 seconds is reached');
+            audioResponsePage.minimalPreviewRecordButton()
+                .click();
+            audioResponsePage.minimalPreviewPlaybackButton()
+                .click();
+            audioResponsePage.minimalPreviewPlaybackOverlay()
+                .should('not.exist')
+            audioResponsePage.minimalPreviewStopPlaybackButton()
+                .should('be.enabled')
+        });
+    });
+});