itemengine-cypress-automation 1.0.253-TEMSmokeTestUpdates-82559a5.0 → 1.0.254-UpdatedRepo4thNov-c5b0050.0

package/cypress/e2e/ILC/CkEditorAudioPlayer/audioPlayerPreviewTab.js

@@ -0,0 +1,444 @@
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { multipleSelectionPage } from "../../../pages";
+import constants from "../../../fixtures/constants";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Audio player: Edit tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Playback limit : Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.focusInQuestionInstructionsInputField();
+            multipleSelectionPage.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+            multipleSelectionPage.steps.clickOnUploadAudioFileRadioButton();
+            multipleSelectionPage.steps.uploadFile('sampleAudio.mp3');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.fileUploadProgressBar(), 'hidden');
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not set any playback limit, no help text should be displayed in the preview tab', () => {
+            utilities.verifyElementVisibilityState(multipleSelectionPage.playbackLimitHelpText(), 'notExist');
+        });
+
+        it('When the user sets a playback limit, then a help text \'You have # plays remaining.\' should be displayed beside the audio player in preview tab. (# being the playback limit set by the user in the edit tab)', () => {
+            multipleSelectionPage.steps.switchToEditTab();
+            multipleSelectionPage.steps.clickOnAudioPlayerBlock();
+            multipleSelectionPage.steps.clickOnLimitPlayAttempts();
+            multipleSelectionPage.steps.setPlaybackLimit(2);
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(multipleSelectionPage.playbackLimitHelpText(), 'You have 2 plays remaining.');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.playbackLimitHelpText(), 'visible');
+        });
+
+        it('When user plays the audio in preview tab, play count displayed in the help text message should get updated.', () => {
+            multipleSelectionPage.steps.startPlayback();
+            multipleSelectionPage.steps.waitForPlaybackToBegin();
+            //Waiting for the playback to complete
+            utilities.verifyInnerText(multipleSelectionPage.playbackLimitHelpText(), 'You have 1 play remaining.');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.playbackLimitHelpText(), 'visible');
+        });
+
+        it('CSS of message displayed below audio player and play button in preview tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(multipleSelectionPage.playbackLimitHelpText(), {
+                'color': 'rgb(0, 0, 46)',
+                'font-size': '12px',
+                'font-weight': '400'
+            });
+            multipleSelectionPage.playbackPlayButton()
+                .find('.audio-play-icon-wr')
+                .verifyPseudoClassBeforeProperty('color', 'rgb(255, 255, 255)');
+        });
+
+        it('Accessibility of message displayed below audio player in preview tab', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(multipleSelectionPage.playbackPlayer());
+        });
+
+        it('When user reaches maximum playback limit in preview tab, message displayed below audio player should be updated to \'You\'ve reached the playback limit for this audio clip.\' and play button should get disabled.', () => {
+            multipleSelectionPage.steps.startPlayback();
+            multipleSelectionPage.steps.waitForPlaybackToBegin();
+            //Waiting for the playback to complete
+            utilities.verifyInnerText(multipleSelectionPage.playbackLimitHelpText(), 'You\'ve reached the playback limit for this audio clip.');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.playbackLimitHelpText(), 'visible');
+            multipleSelectionPage.steps.verifyPlaybackPlayButtonDisabledState();
+        });
+
+        it('CSS of \'You\'ve reached the playback limit for this audio clip.\' message', { tags: 'css' }, () => {
+            utilities.verifyCSS(multipleSelectionPage.playbackLimitHelpText(), {
+                'color': 'rgb(0, 0, 46)',
+                'font-size': '12px',
+                'font-weight': '400'
+            });
+        });
+
+        it('Accessibility of \'You\'ve reached the playback limit for this audio clip.\' message and play button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(multipleSelectionPage.playbackPlayer());
+        });
+
+        it('The playback limit should reset if the user revisits preview tab', () => {
+            multipleSelectionPage.steps.resetQuestionPreview();
+            utilities.verifyInnerText(multipleSelectionPage.playbackLimitHelpText(), 'You have 2 plays remaining.');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.playbackLimitHelpText(), 'visible');
+        });
+    });
+
+    describe('Allow students to download the audio : Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.focusInQuestionInstructionsInputField();
+            multipleSelectionPage.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+            multipleSelectionPage.steps.clickOnUploadAudioFileRadioButton();
+            multipleSelectionPage.steps.uploadFile('sample.mp3');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.fileUploadProgressBar(), 'hidden');
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+        });
+
+        it('When the \'Allow students to download the audio\' checkbox is in unchecked state, the download button should not be displayed for the audio present in the preview tab.', () => {
+            utilities.verifyElementVisibilityState(multipleSelectionPage.playbackDownloadButton(), 'notExist');
+        });
+
+        it('When user checks the \'Allow students to download the audio\' checkbox, download button should be displayed for the audio present in the preview tab.', () => {
+            multipleSelectionPage.steps.switchToEditTab();
+            multipleSelectionPage.steps.clickOnAudioPlayerBlock();
+            multipleSelectionPage.steps.checkUncheckAllowStudentsToDownloadAudioCheckbox();
+            multipleSelectionPage.steps.verifyAllowStudentsToDownloadAudioCheckboxChecked();
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(multipleSelectionPage.playbackDownloadButton(), 'visible');
+        });
+
+        it('When the user hovers over the \'Download\' button, a tooltip \'Download\' should be displayed and on moving away the focus, the tooltip should disappear', () => {
+            multipleSelectionPage.playbackDownloadButton()
+                .verifyTooltip('Download audio');
+        });
+
+        it('When the user clicks on \'Download\' button, window open method should be called with target blank', () => {
+            multipleSelectionPage.steps.verifyWindowOpenMethodAfterClickingOnDownloadAudioButton();
+        });
+
+        it('When the user unchecks the \'Allow students to download the audio\' checkbox, the download button should not be displayed for the audio present in the preview tab.', () => {
+            multipleSelectionPage.steps.switchToEditTab();
+            multipleSelectionPage.steps.clickOnAudioPlayerBlock();
+            multipleSelectionPage.steps.checkUncheckAllowStudentsToDownloadAudioCheckbox();
+            multipleSelectionPage.steps.verifyAllowStudentsToDownloadAudioCheckboxNotChecked();
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(multipleSelectionPage.playbackDownloadButton(), 'notExist');
+        });
+    });
+
+    describe('Customize UI Controls for Playback : Pause', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.focusInQuestionInstructionsInputField();
+            multipleSelectionPage.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+            multipleSelectionPage.steps.clickOnUploadAudioFileRadioButton();
+            multipleSelectionPage.steps.uploadFile('sample.mp3');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.fileUploadProgressBar(), 'hidden');
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+        });
+
+        it('When the \'Pause\' option is in selected state in the customize UI controls for playback accordion, on starting the playback the pause button should be displayed in enabled state in the preview tab', () => {
+            multipleSelectionPage.steps.startPlayback();
+            multipleSelectionPage.steps.waitForPlaybackToBegin();
+            utilities.verifyElementVisibilityState(multipleSelectionPage.playbackPauseButton(), 'visible');
+            multipleSelectionPage.steps.verifyPlaybackPauseButtonEnabledState();
+        });
+
+        it('When the \'Pause\' option is deselected, then the pause button should be disabled for audio player displayed in the preview tab and user should not able to paused audio file', () => {
+            multipleSelectionPage.steps.switchToEditTab();
+            multipleSelectionPage.steps.clickOnAudioPlayerBlock();
+            multipleSelectionPage.steps.clickOnCustomizeUIControlAccordion();
+            multipleSelectionPage.steps.clickOnCustomizeControlPauseButton();
+            multipleSelectionPage.steps.verifyCustomizeControlPauseButtonDeselectedState();
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+            multipleSelectionPage.steps.startPlayback();
+            multipleSelectionPage.steps.waitForPlaybackToBegin();
+            utilities.verifyElementVisibilityState(multipleSelectionPage.playbackPauseButton(), 'notExist');
+        });
+
+        it('Accessibility of audio player in preview tab if \'Pause\' option is deselected', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(multipleSelectionPage.playbackPlayer());
+        });
+    });
+
+    describe('Customize UI Controls for Playback : Seek', () => {
+        let actualAudioSeekedInPercent = 50
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.focusInQuestionInstructionsInputField();
+            multipleSelectionPage.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+            multipleSelectionPage.steps.clickOnUploadAudioFileRadioButton();
+            multipleSelectionPage.steps.uploadFile('sample.mp3');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.fileUploadProgressBar(), 'hidden');
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+        });
+
+        it('When the \'Seek\' option is in selected state in the customize UI controls for playback accordion, the progress bar slider should be displayed and user should be able to seek the audio', () => {
+            multipleSelectionPage.steps.startPlayback();
+            multipleSelectionPage.steps.waitForPlaybackToBegin();
+            utilities.verifyElementVisibilityState(multipleSelectionPage.playbackSlider(), 'visible');
+            multipleSelectionPage.steps.verifyPlaybackProgressBarSliderEnabledState();
+            multipleSelectionPage.steps.seekProgressBarSliderToCenter();
+            multipleSelectionPage.steps.addWaitToPlayAudio(1000);
+            multipleSelectionPage.steps.verifyProgressBarSliderPosition(actualAudioSeekedInPercent);
+        });
+
+        it('When \'Seek\' option is deselected, the progress bar should not have a slider handle and user should not be able to seek the progress bar', () => {
+            multipleSelectionPage.steps.switchToEditTab();
+            multipleSelectionPage.steps.clickOnAudioPlayerBlock();
+            multipleSelectionPage.steps.clickOnCustomizeUIControlAccordion();
+            multipleSelectionPage.steps.clickOnCustomizeControlSeekButton();
+            multipleSelectionPage.steps.verifyCustomizeControlSeekButtonDeselectedState();
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+            multipleSelectionPage.steps.startPlayback();
+            multipleSelectionPage.steps.waitForPlaybackToBegin();
+            utilities.verifyElementVisibilityState(multipleSelectionPage.playbackSlider(), 'hidden');
+            multipleSelectionPage.steps.verifyPlaybackProgressBarSliderDisabledState();
+            multipleSelectionPage.steps.verifyProgressBarSliderWhenSeekIsDisabled();
+        });
+
+        it('Accessibility of audio player in preview tab if seek button is disabled', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(multipleSelectionPage.playbackPlayer());
+        });
+    });
+
+    describe('Controls for playback - Playback speed', () => {
+        const playbackSpeedOptions = ['0.5', '1', '1.25', '1.5', '1.75', '2'];
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.focusInQuestionInstructionsInputField();
+            multipleSelectionPage.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+            multipleSelectionPage.steps.clickOnUploadAudioFileRadioButton();
+            multipleSelectionPage.steps.uploadFile('sample.mp3');
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+        });
+
+        it('When the \'Playback speed\' option is selected, then in preview tab the playback speed button should be displayed and upon hovering the playback speed options should be displayed', () => {
+            utilities.verifyElementVisibilityState(multipleSelectionPage.playbackSpeedButton(), 'visible');
+            multipleSelectionPage.steps.realHoverOnPlaybackSpeedButton();
+            utilities.verifyElementVisibilityState(multipleSelectionPage.playbackSpeedOption(), 'visible');
+            utilities.verifyElementCount(multipleSelectionPage.playbackSpeedOption(), playbackSpeedOptions.length);
+            multipleSelectionPage.steps.verifyPlaybackSpeedListOptions(playbackSpeedOptions);
+            utilities.hoverAwayFromElement();
+        });
+
+        it('When the \'Playback speed\' option is not selected, then in preview tab the playback speed button should be should not be displayed', () => {
+            multipleSelectionPage.steps.switchToEditTab();
+            multipleSelectionPage.steps.clickOnAudioPlayerBlock();
+            multipleSelectionPage.steps.clickOnCustomizeUIControlAccordion();
+            multipleSelectionPage.steps.clickOnCustomizeControlPlayBackSpeedButton();
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(multipleSelectionPage.playbackSpeedButton(), 'notExist');
+        });
+    });
+
+    describe('Controls for playback - Add pin', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.focusInQuestionInstructionsInputField();
+            multipleSelectionPage.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+            multipleSelectionPage.steps.clickOnUploadAudioFileRadioButton();
+            multipleSelectionPage.steps.uploadFile('sample.mp3');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.fileUploadProgressBar(), 'hidden');
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+        });
+
+        it('When the \'Add pin\' option is selected, then in preview tab the add pin button should be displayed and upon hovering tooltip \'Add pin\' should be displayed', () => {
+            utilities.verifyElementVisibilityState(multipleSelectionPage.addPinButton(), 'visible');
+            multipleSelectionPage.addPinButton()
+                .verifyTooltip('Add pin');
+        });
+
+        it('When the \'Add pin\' option is not selected, then in preview tab the add pin button should be should not be displayed', () => {
+            cy.log('Pre-step: Switching to Edit tab, deselecting \'Add pin\' button, switching back to Preview tab');
+            multipleSelectionPage.steps.switchToEditTab();
+            multipleSelectionPage.steps.clickOnAudioPlayerBlock();
+            multipleSelectionPage.steps.clickOnCustomizeUIControlAccordion();
+            multipleSelectionPage.steps.clickOnCustomizeControlAddPinButton();
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(multipleSelectionPage.addPinButton(), 'notExist');
+        });
+    });
+
+    describe('Controls for playback - Forward and Backward buttons', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.focusInQuestionInstructionsInputField();
+            multipleSelectionPage.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+            multipleSelectionPage.steps.clickOnUploadAudioFileRadioButton();
+            multipleSelectionPage.steps.uploadFile('sample.mp3');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.fileUploadProgressBar(), 'hidden');
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+        });
+
+        it('When the \'Forward/ backward\' option is selected, then in preview tab the forward and backward button should be displayed and upon hovering tooltip \'Forward/ backward\' should be displayed', () => {
+            utilities.verifyElementVisibilityState(multipleSelectionPage.forwardButton(), 'visible');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.backwardButton(), 'visible');
+        });
+
+        it('When the \'Forward/ backward\' option is not selected, then in preview tab the forward and backward button should be should not be displayed', () => {
+            cy.log('Pre-step: Switching to Edit tab, deselecting \'Forward/ backward\' button, switching back to Preview tab');
+            multipleSelectionPage.steps.switchToEditTab();
+            multipleSelectionPage.steps.clickOnAudioPlayerBlock();
+            multipleSelectionPage.steps.clickOnCustomizeUIControlAccordion();
+            multipleSelectionPage.steps.clickOnCustomizeControlForwardBackwardButton();
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(multipleSelectionPage.forwardButton(), 'notExist');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.backwardButton(), 'notExist');
+        });
+    });
+
+    describe('Controls for playback - Volume', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.focusInQuestionInstructionsInputField();
+            multipleSelectionPage.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+            multipleSelectionPage.steps.clickOnUploadAudioFileRadioButton();
+            multipleSelectionPage.steps.uploadFile('sample.mp3');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.fileUploadProgressBar(), 'hidden');
+            multipleSelectionPage.steps.selectAudioPlayerStyleToggleButton('Compact');
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+        });
+
+        it('In compact mode, when the \'Volume\' option is selected, then in preview tab the volume button should be displayed', () => {
+            multipleSelectionPage.steps.clickOnPlayButton();
+            utilities.verifyElementVisibilityState(multipleSelectionPage.volumeControlButton(), 'visible');
+        });
+
+        it('In compact mode, when the \'Volume\' option is not selected, then in preview tab the volume button should not be displayed', () => {
+            cy.log('Pre-step: Switching to Edit tab, deselecting \'Volume\' button, switching back to Preview tab');
+            multipleSelectionPage.steps.switchToEditTab();
+            multipleSelectionPage.steps.clickOnAudioPlayerBlock();
+            multipleSelectionPage.steps.selectAudioPlayerStyleToggleButton('Compact');
+            multipleSelectionPage.steps.clickOnCustomizeUIControlAccordion();
+            multipleSelectionPage.steps.clickOnCustomizeControlVolumeButton();
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+            multipleSelectionPage.steps.clickOnPlayButton();
+            utilities.verifyElementVisibilityState(multipleSelectionPage.volumeControlButton(), 'notExist');
+        });
+    });
+
+    describe('Controls for playback - Timer', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.focusInQuestionInstructionsInputField();
+            multipleSelectionPage.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+            multipleSelectionPage.steps.clickOnUploadAudioFileRadioButton();
+            multipleSelectionPage.steps.uploadFile('sample.mp3');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.fileUploadProgressBar(), 'hidden');
+            multipleSelectionPage.steps.selectAudioPlayerStyleToggleButton('Compact');
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+        });
+
+        it('In compact mode, when the \'Timer\' option is selected, then in preview tab the elapsed and total time should be displayed', () => {
+            multipleSelectionPage.steps.clickOnPlayButton();
+            utilities.verifyElementVisibilityState(multipleSelectionPage.playbackElapsedTime(), 'visible');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.playbackTotalTime(), 'visible');
+        });
+
+        it('In compact mode, when the \'Volume\' option is not selected, then in preview tab the elapsed and total time should not be displayed', () => {
+            cy.log('Pre-step: Switching to Edit tab, deselecting \'Volume\' button, switching back to Preview tab');
+            multipleSelectionPage.steps.switchToEditTab();
+            multipleSelectionPage.steps.clickOnAudioPlayerBlock();
+            multipleSelectionPage.steps.selectAudioPlayerStyleToggleButton('Compact');
+            multipleSelectionPage.steps.clickOnCustomizeUIControlAccordion();
+            multipleSelectionPage.steps.clickOnCustomizeControlTimerButton();
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+            multipleSelectionPage.steps.clickOnPlayButton();
+            utilities.verifyElementVisibilityState(multipleSelectionPage.playbackTime(), 'notExist');
+        });
+    });
+
+    describe('Controls for playback - Progress indicator', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.focusInQuestionInstructionsInputField();
+            multipleSelectionPage.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+            multipleSelectionPage.steps.clickOnUploadAudioFileRadioButton();
+            multipleSelectionPage.steps.uploadFile('sample.mp3');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.fileUploadProgressBar(), 'hidden');
+            multipleSelectionPage.steps.selectAudioPlayerStyleToggleButton('Compact');
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+        });
+
+        it('In compact mode, when the \'Timer\' option is selected, then in preview tab the progress bar should be displayed', () => {
+            multipleSelectionPage.steps.clickOnPlayButton();
+            utilities.verifyElementVisibilityState(multipleSelectionPage.progressBar(), 'visible');
+        });
+
+        it('In compact mode, when the \'Volume\' option is not selected, then in preview tab the progress bar should not be displayed', () => {
+            multipleSelectionPage.steps.switchToEditTab();
+            multipleSelectionPage.steps.clickOnAudioPlayerBlock();
+            multipleSelectionPage.steps.selectAudioPlayerStyleToggleButton('Compact');
+            multipleSelectionPage.steps.clickOnCustomizeUIControlAccordion();
+            multipleSelectionPage.steps.clickOnCustomizeControlProgressBarButton();
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+            multipleSelectionPage.steps.clickOnPlayButton();
+            utilities.verifyElementVisibilityState(multipleSelectionPage.progressBar(), 'notExist');
+        });
+    });
+});

package/cypress/e2e/ILC/CkEditorAudioPlayer/audioPlayerPreviewTabSupportedFileTypes.js

@@ -0,0 +1,102 @@
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { multipleSelectionPage } from "../../../pages";
+import constants from "../../../fixtures/constants";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Audio player: Edit tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Uploading all supported files via \'Source URL\' field', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.focusInQuestionInstructionsInputField();
+            multipleSelectionPage.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+            multipleSelectionPage.steps.clickOnAddUrlRadioButton();
+        });
+
+        it('When user adds link of MP3 audio file, audio player should be displayed in preview tab and user should be able to play MP3 audio file.', () => {
+            multipleSelectionPage.steps.enterTextInSourceURLInputField(constants.sampleMp3Link);
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+            multipleSelectionPage.steps.startPlayback();
+            multipleSelectionPage.steps.waitForPlaybackToBegin();
+        });
+
+        it('When user adds link of WAV audio file, audio player should be displayed in preview tab and user should be able to play WAV audio file.', () => {
+            multipleSelectionPage.steps.switchToEditTab();
+            multipleSelectionPage.steps.clickOnAudioPlayerBlock();
+            multipleSelectionPage.steps.clearTextInSourceURLInputField();
+            multipleSelectionPage.steps.enterTextInSourceURLInputField(constants.sampleWAVLink);
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+            multipleSelectionPage.steps.startPlayback();
+            multipleSelectionPage.steps.waitForPlaybackToBegin();
+        });
+
+        it('When user adds link of AAC audio file, audio player should be displayed in preview tab and user should be able to play AAC audio file.', () => {
+            multipleSelectionPage.steps.switchToEditTab();
+            multipleSelectionPage.steps.clickOnAudioPlayerBlock();
+            multipleSelectionPage.steps.clearTextInSourceURLInputField();
+            multipleSelectionPage.steps.enterTextInSourceURLInputField(constants.sampleAACLink);
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+            multipleSelectionPage.steps.startPlayback();
+            multipleSelectionPage.steps.waitForPlaybackToBegin();
+        });
+    });
+
+    describe('Uploading all supported files via \'Upload\' field', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.focusInQuestionInstructionsInputField();
+            multipleSelectionPage.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+            multipleSelectionPage.steps.clickOnUploadAudioFileRadioButton();
+        });
+
+        it('When user uploads MP3 audio file, audio player should be displayed in preview tab and user should be able to play MP3 audio file.', () => {
+            multipleSelectionPage.steps.uploadFile('sample.mp3');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.fileUploadProgressBar(), 'hidden');
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+            multipleSelectionPage.steps.startPlayback();
+            multipleSelectionPage.steps.waitForPlaybackToBegin();
+        });
+
+        it('When user uploads WAV audio file, audio player should be displayed in preview tab and user should be able to play WAV audio file.', () => {
+            multipleSelectionPage.steps.switchToEditTab();
+            multipleSelectionPage.steps.clickOnAudioPlayerBlock();
+            multipleSelectionPage.steps.clickOnUploadAudioFileRadioButton();
+            multipleSelectionPage.steps.uploadFile('sample.wav');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.fileUploadProgressBar(), 'hidden');
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+            multipleSelectionPage.steps.startPlayback();
+            multipleSelectionPage.steps.waitForPlaybackToBegin();
+        });
+
+        it('When user uploads AAC audio file, audio player should be displayed in preview tab and user should be able to play AAC audio file.', () => {
+            multipleSelectionPage.steps.switchToEditTab();
+            multipleSelectionPage.steps.clickOnAudioPlayerBlock();
+            multipleSelectionPage.steps.clickOnUploadAudioFileRadioButton();
+            multipleSelectionPage.steps.uploadFile('sample.aac');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.fileUploadProgressBar(), 'hidden');
+            multipleSelectionPage.steps.clickOnOKButton();
+            multipleSelectionPage.steps.focusInAndFocusOutOfQuestionInstructionsInputField();
+            multipleSelectionPage.steps.switchToPreviewTab();
+            multipleSelectionPage.steps.startPlayback();
+            multipleSelectionPage.steps.waitForPlaybackToBegin();
+        });
+    });
+});