itemengine-cypress-automation 1.0.189-e2e-execution-crash-83cdbd4.0 → 1.0.190-repoUpdate3May-f180558.0

package/cypress/e2e/ILC/AudioPlayerNew/customizePlayerLayoutSettings.js

@@ -0,0 +1,596 @@
+import { audioPlayerPage } from '../../../pages/audioPlayerPage';
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from '../../../support/helpers/utilities';
+const css = Cypress.env('css');
+
+const standardPlayerLayoutSettings = ['Pause', 'Seek', 'Playback speed', 'Add pin', 'Forward/ backward'];
+const barPlayerLayoutSettings = ['Pause', 'Seek', 'Playback speed', 'Add pin', 'Forward/ backward'];
+const compactPlayerLayoutSettings = ['Pause', 'Seek', 'Playback speed', 'Forward/ backward', 'Volume', 'Timer', 'Progress indicator'];
+
+describe('Create Item page - Audio player: Customize player layout settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('\'Customize player layout settings\' accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+        });
+
+        it('\'Customize player layout settings\' accordion should be displayed and by default it should be in collapsed state', () => {
+            utilities.verifyInnerText(audioPlayerPage.customizePlayerLayoutSettingsAccordion(), 'Customize player layout settings');
+            audioPlayerPage.steps.verifyCustomizePlayerLayoutSettingsAccordionCollapsedState();
+        });
+
+        it('User should be able to expand and collapse \'Customize player layout settings\' accordion', () => {
+            audioPlayerPage.steps.expandCustomizePlayerLayoutSettingsAccordion();
+            audioPlayerPage.steps.collapseCustomizePlayerLayoutSettingsAccordion();
+        });
+
+        it('Controls for bar audio player style - "Pause", "Seek", "Playback speed", "Add pin" and "Forward/ backward" should be displayed. By default, all options should be in selected state', () => {
+            audioPlayerPage.steps.expandCustomizePlayerLayoutSettingsAccordion();
+            utilities.verifyElementVisibilityState(audioPlayerPage.customizePlayerLayoutPauseButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.customizePlayerLayoutSeekButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.customizePlayerLayoutPlaybackSpeedButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.customizePlayerLayoutAddPinButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.customizePlayerLayoutForwardBackwardButton(), 'visible');
+            barPlayerLayoutSettings.forEach((buttonLabel, index) => {
+                utilities.verifyElementVisibilityState(utilities.getNthElement(audioPlayerPage.customizePlayerLayoutToggleButtonLabel(), index), 'visible');
+                utilities.verifyInnerText(utilities.getNthElement(audioPlayerPage.customizePlayerLayoutToggleButtonLabel(), index), buttonLabel);
+                audioPlayerPage.steps.verifyPlayerLayoutSettingButtonIsSelected(buttonLabel);
+            });
+            utilities.verifyElementCount(audioPlayerPage.customizePlayerLayoutSettingsToggleButtons(), barPlayerLayoutSettings.length);
+        });
+
+        it('Uncheck all button should be displayed', () => {
+            utilities.verifyElementVisibilityState(audioPlayerPage.uncheckAllButton(), 'visible');
+            utilities.verifyInnerText(audioPlayerPage.uncheckAllButton(), 'Uncheck all');
+        });
+
+        it('User should be able to deselect a player layout setting toggle button by clicking on it', () => {
+            audioPlayerPage.steps.deselectPlayerLayoutSettingButton('Seek');
+        });
+
+        it('CSS of \'Customize player layout settings\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioPlayerPage.customizePlayerLayoutSettingsAccordion().find('.accordion_label'), {
+                'color': css.color.accordionLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(audioPlayerPage.customizePlayerLayoutPauseButton(), {
+                'color': css.color.whiteText,
+                'background-color': css.color.activeButtons,
+                'border': `1px solid ${css.color.activeButtons}`
+            });
+            utilities.verifyCSS(audioPlayerPage.customizePlayerLayoutSeekButton(), {
+                'color': css.color.secondaryBtn,
+                'background-color': css.color.defaultBackground,
+                'border': `1px solid ${css.color.secondaryBtnBorder}`
+            });
+            utilities.verifyCSS(audioPlayerPage.tickIconForOptionButtons(), {
+                'background-color': css.color.transparent,
+            });
+            utilities.verifyCSS(audioPlayerPage.tickIconForOptionButtons().find('[data-name="Icon feather-check"]'), {
+                'fill': css.color.activeButtons,
+            });
+            utilities.verifyCSS(audioPlayerPage.customizePlayerLayoutToggleButtonLabel(), {
+                'color': css.color.UnselectedToggleButton,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(audioPlayerPage.uncheckAllButton(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(audioPlayerPage.uncheckAllButton().find('rect').eq(0), {
+                'color': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Customize player layout settings\' section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioPlayerPage.customizePlayerLayoutSettingsAccordion().parents('.audio-player-resource'));
+        });
+
+        it('When user clicks on uncheck all button then all the player layout setting toggle buttons should be unchecked', () => {
+            audioPlayerPage.steps.clickOnUncheckAllButton();
+            barPlayerLayoutSettings.forEach((buttonLabel) => {
+                audioPlayerPage.steps.verifyPlayerLayoutSettingButtonIsNotSelected(buttonLabel);
+            });
+        });
+
+        it('When user collapses and expands the accordion, then the previously made changes should persist', () => {
+            audioPlayerPage.steps.collapseCustomizePlayerLayoutSettingsAccordion();
+            audioPlayerPage.steps.expandCustomizePlayerLayoutSettingsAccordion();
+            barPlayerLayoutSettings.forEach((buttonLabel) => {
+                audioPlayerPage.steps.verifyPlayerLayoutSettingButtonIsNotSelected(buttonLabel);
+            });
+        });
+
+        it('User should be able to select a deselected player layout setting toggle buttons by clicking on it', () => {
+            barPlayerLayoutSettings.forEach((buttonLabel) => {
+                audioPlayerPage.steps.selectPlayerLayoutSettingButton(buttonLabel);
+            });
+        });
+
+        it('When user selects standard audio player style, then controls - "Pause", "Seek", "Playback speed", "Add pin" and "Forward/ backward" should be displayed.', () => {
+            audioPlayerPage.steps.selectAudioPlayerStyleToggleButton('Standard');
+            utilities.verifyElementVisibilityState(audioPlayerPage.customizePlayerLayoutPauseButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.customizePlayerLayoutSeekButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.customizePlayerLayoutPlaybackSpeedButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.customizePlayerLayoutAddPinButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.customizePlayerLayoutForwardBackwardButton(), 'visible');
+            standardPlayerLayoutSettings.forEach((buttonLabel, index) => {
+                utilities.verifyElementVisibilityState(utilities.getNthElement(audioPlayerPage.customizePlayerLayoutToggleButtonLabel(), index), 'visible');
+                utilities.verifyInnerText(utilities.getNthElement(audioPlayerPage.customizePlayerLayoutToggleButtonLabel(), index), buttonLabel);
+                audioPlayerPage.steps.verifyPlayerLayoutSettingButtonIsSelected(buttonLabel);
+            });
+            utilities.verifyElementCount(audioPlayerPage.customizePlayerLayoutSettingsToggleButtons(), standardPlayerLayoutSettings.length);
+        });
+
+        it('When user selects compact audio player style, then controls - "Pause", "Seek", "Playback speed", "Forward/ backward", "Volume", "Timer" and "Progress indicator" should be displayed.', () => {
+            audioPlayerPage.steps.selectAudioPlayerStyleToggleButton('Compact');
+            utilities.verifyElementVisibilityState(audioPlayerPage.customizePlayerLayoutPauseButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.customizePlayerLayoutSeekButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.customizePlayerLayoutPlaybackSpeedButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.customizePlayerLayoutForwardBackwardButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.customizePlayerLayoutVolumeButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.customizePlayerLayoutTimerButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.customizePlayerLayoutProgressIndicatorButton(), 'visible');
+            compactPlayerLayoutSettings.forEach((buttonLabel, index) => {
+                utilities.verifyElementVisibilityState(utilities.getNthElement(audioPlayerPage.customizePlayerLayoutToggleButtonLabel(), index), 'visible');
+                utilities.verifyInnerText(utilities.getNthElement(audioPlayerPage.customizePlayerLayoutToggleButtonLabel(), index), buttonLabel);
+                audioPlayerPage.steps.verifyPlayerLayoutSettingButtonIsSelected(buttonLabel);
+            });
+            utilities.verifyElementCount(audioPlayerPage.customizePlayerLayoutSettingsToggleButtons(), compactPlayerLayoutSettings.length);
+        });
+
+        it('When user deselects progress indicator toggle button, then seek toggle button should be deselected and disabled', () => {
+            audioPlayerPage.steps.deselectPlayerLayoutSettingButton('Progress indicator');
+            audioPlayerPage.steps.verifyPlayerLayoutSettingButtonIsNotSelected('Seek');
+            utilities.verifyElementDisabled(audioPlayerPage.customizePlayerLayoutSeekButton());
+        });
+    });
+
+    describe('Controls for playback - Pause', () => {
+        abortEarlySetup();
+        before(() => {
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+            audioPlayerPage.steps.uploadFile('uploads/sample10sec.mp3');
+            audioPlayerPage.steps.expandCustomizePlayerLayoutSettingsAccordion();
+            audioPlayerPage.steps.selectAudioPlayerStyleToggleButton('Standard');
+        });
+
+        it('In standard mode, when the \'Pause\' option is selected the pause button should be enabled in the preview tab', () => {
+            cy.log('Pre-step: Switching to Preview tab');
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.startPlayback();
+            audioPlayerPage.steps.waitForPlaybackToBegin();
+            audioPlayerPage.steps.addWaitToPlayAudio(3000);
+            utilities.verifyElementNotDisabled(audioPlayerPage.playbackPauseButton());
+            audioPlayerPage.steps.pausePlayback();
+            audioPlayerPage.steps.verifyAudioPlaybackTimer('00:04', '00:10');
+        });
+
+        it('In standard mode, when the pause option is deselected the pause button should be disabled in the preview tab', () => {
+            cy.log('Pre-step: Switching to Edit tab');
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.deselectPlayerLayoutSettingButton('Pause');
+            cy.log('Switching to Preview tab');
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.startPlayback();
+            audioPlayerPage.steps.waitForPlaybackToBegin();
+            audioPlayerPage.steps.addWaitToPlayAudio(3000);
+            utilities.verifyElementDisabled(audioPlayerPage.playbackPauseButton());
+        });
+
+        it('In bar mode, when the \'Pause\' option is selected the pause button should be enabled in the preview tab', () => {
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.selectAudioPlayerStyleToggleButton('Bar');
+            audioPlayerPage.steps.selectPlayerLayoutSettingButton('Pause');
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.startPlayback();
+            audioPlayerPage.steps.waitForPlaybackToBegin();
+            audioPlayerPage.steps.addWaitToPlayAudio(3000);
+            utilities.verifyElementNotDisabled(audioPlayerPage.playbackPauseButton());
+            audioPlayerPage.steps.pausePlayback();
+            audioPlayerPage.steps.verifyAudioPlaybackTimer('00:04', '00:10');
+        });
+
+        it('In bar mode, when the pause option is deselected the pause button should be disabled in the preview tab', () => {
+            cy.log('Pre-step: Switching to Edit tab');
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.deselectPlayerLayoutSettingButton('Pause');
+            cy.log('Switching to Preview tab');
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.startPlayback();
+            audioPlayerPage.steps.waitForPlaybackToBegin();
+            audioPlayerPage.steps.addWaitToPlayAudio(3000);
+            utilities.verifyElementDisabled(audioPlayerPage.playbackPauseButton());
+        });
+
+        it('In compact mode, when the pause option is selected the pause button should be enabled in the preview tab', () => {
+            cy.log('Pre-step: Switching to Edit tab and selecting compact audio player style option');
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.selectAudioPlayerStyleToggleButton('Compact');
+            audioPlayerPage.steps.selectPlayerLayoutSettingButton('Pause');
+            cy.log('Switching to Preview tab');
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.clickOnPlayButton();
+            audioPlayerPage.steps.waitForPlaybackToBegin();
+            audioPlayerPage.steps.addWaitToPlayAudio(3000);
+            utilities.verifyElementNotDisabled(audioPlayerPage.playbackPauseButton());
+            audioPlayerPage.steps.pausePlayback();
+            audioPlayerPage.steps.verifyAudioPlaybackTimer('00:04', '00:10');
+        });
+
+        it('In compact mode, when the pause option is deselected the pause button should be disabled in the preview tab', () => {
+            cy.log('Pre-step: Switching to Edit tab');
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.deselectPlayerLayoutSettingButton('Pause');
+            cy.log('Switching to Preview tab');
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.clickOnPlayButton();
+            audioPlayerPage.steps.waitForPlaybackToBegin();
+            audioPlayerPage.steps.addWaitToPlayAudio(3000);
+            utilities.verifyElementDisabled(audioPlayerPage.playbackPauseButton());
+        });
+    });
+
+    describe('Controls for playback - Seek', () => {
+        abortEarlySetup();
+        before(() => {
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+            audioPlayerPage.steps.uploadFile('uploads/sample10sec.mp3');
+            audioPlayerPage.steps.expandCustomizePlayerLayoutSettingsAccordion();
+            audioPlayerPage.steps.selectAudioPlayerStyleToggleButton('Standard');
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.startPlayback();
+            audioPlayerPage.steps.waitForPlaybackToBegin();
+            audioPlayerPage.steps.addWaitToPlayAudio(2000);
+            audioPlayerPage.steps.pausePlayback();
+        });
+
+        it('In standard mode, when the \'Seek\' option is selected the seek functionality should be enabled in the preview tab, progress bar slider should be displayed and user should be able to seek the audio from the progress bar', () => {
+            let actualAudioSeekedInPercent = 50
+            cy.log('Clicking at the middle of the progress bar to seek till 50% of the audio');
+            audioPlayerPage.steps.seekProgressBarSliderToCenter();
+            audioPlayerPage.steps.addWaitToPlayAudio(1000);
+            audioPlayerPage.steps.verifyProgressBarSliderPosition(actualAudioSeekedInPercent);
+            utilities.verifyElementVisibilityState(audioPlayerPage.progressBarSlider(), 'visible');
+        });
+
+        it('In standard mode, when the \'Seek\' option is deselected, the progress bar should not have a slider and user should not be able to seek the audio from the progress bar', () => {
+            let actualAudioSeekedInPercent = 25
+            cy.log('Pre-step: Switching to Edit tab, deselecting \'Seek\' button, switching back to Preview tab');
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.deselectPlayerLayoutSettingButton('Seek');
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.startPlayback();
+            audioPlayerPage.steps.waitForPlaybackToBegin();
+            audioPlayerPage.steps.addWaitToPlayAudio(2000);
+            audioPlayerPage.steps.pausePlayback();
+            cy.log('Clicking at the middle of the progress bar to seek till 50% of the audio');
+            audioPlayerPage.steps.seekProgressBarSliderToCenter();
+            audioPlayerPage.steps.verifyProgressBarSliderPosition(actualAudioSeekedInPercent);
+            utilities.verifyElementVisibilityState(audioPlayerPage.progressBarSlider(), 'hidden');
+        });
+
+        it('In bar mode, when the \'Seek\' option is selected the seek functionality should be enabled in the preview tab, progress bar slider should be displayed and user should be able to seek the audio from the progress bar', () => {
+            let actualAudioSeekedInPercent = 50
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.selectAudioPlayerStyleToggleButton('Bar');
+            audioPlayerPage.steps.selectPlayerLayoutSettingButton('Seek');
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.startPlayback();
+            audioPlayerPage.steps.waitForPlaybackToBegin();
+            audioPlayerPage.steps.addWaitToPlayAudio(2000);
+            audioPlayerPage.steps.pausePlayback();
+            cy.log('Clicking at the middle of the progress bar to seek till 50% of the audio');
+            audioPlayerPage.steps.seekProgressBarSliderToCenter();
+            audioPlayerPage.steps.verifyProgressBarSliderPosition(actualAudioSeekedInPercent);
+            utilities.verifyElementVisibilityState(audioPlayerPage.progressBarSlider(), 'visible');
+        });
+
+        it('In bar mode, when the \'Seek\' option is deselected, the progress bar should not have a slider and user should not be able to seek the audio from the progress bar', () => {
+            let actualAudioSeekedInPercent = 25
+            cy.log('Pre-step: Switching to Edit tab, deselecting \'Seek\' button, switching back to Preview tab');
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.deselectPlayerLayoutSettingButton('Seek');
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.startPlayback();
+            audioPlayerPage.steps.waitForPlaybackToBegin();
+            audioPlayerPage.steps.addWaitToPlayAudio(2000);
+            audioPlayerPage.steps.pausePlayback();
+            cy.log('Clicking at the middle of the progress bar to seek till 50% of the audio');
+            audioPlayerPage.steps.seekProgressBarSliderToCenter();
+            audioPlayerPage.steps.verifyProgressBarSliderPosition(actualAudioSeekedInPercent);
+            utilities.verifyElementVisibilityState(audioPlayerPage.progressBarSlider(), 'hidden');
+        });
+
+        it('In compact mode, when \'Seek\' option is selected user should be able to seek the audio from the progress bar', () => {
+            let actualAudioSeekedInPercent = 50
+            cy.log('Pre-step: Switching to Edit tab and selecting compact audio player style option and switching back to preview tab');
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.selectAudioPlayerStyleToggleButton('Compact');
+            audioPlayerPage.steps.selectPlayerLayoutSettingButton('Seek');
+            audioPlayerPage.steps.switchToPreviewTab();
+            cy.log('Clicking on start playback and letting it play until a certain time');
+            audioPlayerPage.steps.clickOnPlayButton();
+            audioPlayerPage.steps.waitForPlaybackToBegin();
+            audioPlayerPage.steps.addWaitToPlayAudio(2000);
+            audioPlayerPage.steps.pausePlayback();
+            cy.log('Clicking at the middle of the progress bar to seek till 50% of the audio');
+            audioPlayerPage.steps.seekProgressBarSliderToCenter();
+            audioPlayerPage.steps.verifyProgressBarSliderPosition(actualAudioSeekedInPercent);
+            utilities.verifyElementVisibilityState(audioPlayerPage.progressBarSlider(), 'visible');
+        });
+
+        it('In compact mode, when \'Seek\' option is deselected, the progress bar should not have a slider and user should not able to seek on the progress bar', () => {
+            let actualAudioSeekedInPercent = 25
+            cy.log('Pre-step : Switching to Edit tab, deselecting \'Seek\' and switching back to Preview tab');
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.deselectPlayerLayoutSettingButton('Seek');
+            audioPlayerPage.steps.switchToPreviewTab();
+            cy.log('Clicking on start playback and letting it play until a certain time');
+            audioPlayerPage.steps.clickOnPlayButton();
+            audioPlayerPage.steps.waitForPlaybackToBegin();
+            audioPlayerPage.steps.addWaitToPlayAudio(2000);
+            audioPlayerPage.steps.pausePlayback();
+            cy.log('Clicking at the middle of the progress bar to seek till 50% of the audio');
+            audioPlayerPage.steps.seekProgressBarSliderToCenter();
+            audioPlayerPage.steps.verifyProgressBarSliderPosition(actualAudioSeekedInPercent);
+            utilities.verifyElementVisibilityState(audioPlayerPage.progressBarSlider(), 'hidden');
+        });
+    });
+
+    describe('Controls for playback - Playback speed', () => {
+        const playbackSpeedOptions = ['0.5', '1', '1.25', '1.5', '1.75', '2'];
+        abortEarlySetup();
+        before(() => {
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+            audioPlayerPage.steps.selectAudioPlayerStyleToggleButton('Standard');
+            audioPlayerPage.steps.switchToPreviewTab();
+        });
+
+        it('In standard mode, 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(audioPlayerPage.addPinButton(), 'visible');
+            utilities.triggerMouseover(audioPlayerPage.addPinButton());
+            utilities.verifyElementVisibilityState(audioPlayerPage.playbackSpeedOption(), 'visible');
+            utilities.verifyElementCount(audioPlayerPage.playbackSpeedOption(), playbackSpeedOptions.length);
+            audioPlayerPage.steps.verifyPlaybackSpeedListOptions(playbackSpeedOptions);
+            utilities.hoverAwayFromElement();
+        });
+
+        it('In standard mode, when the \'Playback speed\' option is not selected, then in preview tab the playback speed button should be should not be displayed', () => {
+            cy.log('Pre-step: Switching to Edit tab, deselecting \'Playback speed\' button, switching back to Preview tab');
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.expandCustomizePlayerLayoutSettingsAccordion();
+            audioPlayerPage.steps.deselectPlayerLayoutSettingButton('Playback speed');
+            audioPlayerPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(audioPlayerPage.addPinButton(), 'notExist');
+        });
+
+        it('In bar mode, 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', () => {
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.selectAudioPlayerStyleToggleButton('Bar');
+            audioPlayerPage.steps.selectPlayerLayoutSettingButton('Playback speed');
+            audioPlayerPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(audioPlayerPage.addPinButton(), 'visible');
+            utilities.triggerMouseover(audioPlayerPage.addPinButton());
+            utilities.verifyElementVisibilityState(audioPlayerPage.playbackSpeedOption(), 'visible');
+            utilities.verifyElementCount(audioPlayerPage.playbackSpeedOption(), playbackSpeedOptions.length);
+            audioPlayerPage.steps.verifyPlaybackSpeedListOptions(playbackSpeedOptions);
+            utilities.hoverAwayFromElement();
+        });
+
+        it('In bar mode, when the \'Playback speed\' option is not selected, then in preview tab the playback speed button should be should not be displayed', () => {
+            cy.log('Pre-step: Switching to Edit tab, deselecting \'Playback speed\' button, switching back to Preview tab');
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.deselectPlayerLayoutSettingButton('Playback speed');
+            audioPlayerPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(audioPlayerPage.addPinButton(), 'notExist');
+        });
+
+        it('In compact mode, 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', () => {
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.selectAudioPlayerStyleToggleButton('Compact');
+            audioPlayerPage.steps.selectPlayerLayoutSettingButton('Playback speed');
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.clickOnPlayButton();
+            utilities.verifyElementVisibilityState(audioPlayerPage.addPinButton(), 'visible');
+            utilities.triggerMouseover(audioPlayerPage.addPinButton());
+            utilities.verifyElementVisibilityState(audioPlayerPage.playbackSpeedOption(), 'visible');
+            utilities.verifyElementCount(audioPlayerPage.playbackSpeedOption(), playbackSpeedOptions.length);
+            audioPlayerPage.steps.verifyPlaybackSpeedListOptions(playbackSpeedOptions);
+            utilities.hoverAwayFromElement();
+        });
+
+        it('In bar mode, when the \'Playback speed\' option is not selected, then in preview tab the playback speed button should be should not be displayed', () => {
+            cy.log('Pre-step: Switching to Edit tab, deselecting \'Playback speed\' button, switching back to Preview tab');
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.deselectPlayerLayoutSettingButton('Playback speed');
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.clickOnPlayButton();
+            utilities.verifyElementVisibilityState(audioPlayerPage.addPinButton(), 'notExist');
+        });
+    });
+
+    describe('Controls for playback - Add pin', () => {
+        abortEarlySetup();
+        before(() => {
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+            audioPlayerPage.steps.selectAudioPlayerStyleToggleButton('Standard');
+            audioPlayerPage.steps.switchToPreviewTab();
+        });
+
+        it('In standard mode, 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(audioPlayerPage.addPinButton(), 'visible');
+            audioPlayerPage.addPinButton()
+                .verifyTooltip('Add pin');
+        });
+
+        it('In standard mode, 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');
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.expandCustomizePlayerLayoutSettingsAccordion();
+            audioPlayerPage.steps.deselectPlayerLayoutSettingButton('Add pin');
+            audioPlayerPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(audioPlayerPage.addPinButton(), 'notExist');
+        });
+
+        it('In bar mode, 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', () => {
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.selectAudioPlayerStyleToggleButton('Bar');
+            audioPlayerPage.steps.selectPlayerLayoutSettingButton('Add pin');
+            audioPlayerPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(audioPlayerPage.addPinButton(), 'visible');
+            audioPlayerPage.addPinButton()
+                .verifyTooltip('Add pin');
+        });
+
+        it('In bar mode, 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');
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.deselectPlayerLayoutSettingButton('Add pin');
+            audioPlayerPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(audioPlayerPage.addPinButton(), 'notExist');
+        });
+    });
+
+    describe('Controls for playback - Forward and Backward buttons', () => {
+        abortEarlySetup();
+        before(() => {
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+            audioPlayerPage.steps.selectAudioPlayerStyleToggleButton('Standard');
+            audioPlayerPage.steps.switchToPreviewTab();
+        });
+
+        it('In standard mode, 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(audioPlayerPage.forwardButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.backwardButton(), 'visible');
+        });
+
+        it('In standard mode, 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');
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.expandCustomizePlayerLayoutSettingsAccordion();
+            audioPlayerPage.steps.deselectPlayerLayoutSettingButton('Forward/ backward');
+            audioPlayerPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(audioPlayerPage.forwardButton(), 'notExist');
+            utilities.verifyElementVisibilityState(audioPlayerPage.backwardButton(), 'notExist');
+        });
+
+        it('In bar mode, 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', () => {
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.selectAudioPlayerStyleToggleButton('Bar');
+            audioPlayerPage.steps.selectPlayerLayoutSettingButton('Forward/ backward');
+            audioPlayerPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(audioPlayerPage.forwardButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.backwardButton(), 'visible');
+        });
+
+        it('In bar mode, 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');
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.deselectPlayerLayoutSettingButton('Forward/ backward');
+            audioPlayerPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(audioPlayerPage.forwardButton(), 'notExist');
+            utilities.verifyElementVisibilityState(audioPlayerPage.backwardButton(), 'notExist');
+        });
+
+        it('In compact mode, 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', () => {
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.selectAudioPlayerStyleToggleButton('Compact');
+            audioPlayerPage.steps.selectPlayerLayoutSettingButton('Forward/ backward');
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.clickOnPlayButton();
+            utilities.verifyElementVisibilityState(audioPlayerPage.forwardButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.backwardButton(), 'visible');
+        });
+
+        it('In compact mode, 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');
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.deselectPlayerLayoutSettingButton('Forward/ backward');
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.clickOnPlayButton();
+            utilities.verifyElementVisibilityState(audioPlayerPage.forwardButton(), 'notExist');
+            utilities.verifyElementVisibilityState(audioPlayerPage.backwardButton(), 'notExist');
+        });
+    });
+
+    describe('Controls for playback - Volume', () => {
+        abortEarlySetup();
+        before(() => {
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+            audioPlayerPage.steps.selectAudioPlayerStyleToggleButton('Compact');
+            audioPlayerPage.steps.expandCustomizePlayerLayoutSettingsAccordion();
+            audioPlayerPage.steps.switchToPreviewTab();
+        });
+
+        it('In compact mode, when the \'Volume\' option is selected, then in preview tab the volume button should be displayed', () => {
+            audioPlayerPage.steps.clickOnPlayButton();
+            utilities.verifyElementVisibilityState(audioPlayerPage.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');
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.deselectPlayerLayoutSettingButton('Volume');
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.clickOnPlayButton();
+            utilities.verifyElementVisibilityState(audioPlayerPage.volumeControlButton(), 'notExist');
+        });
+    });
+
+    describe('Controls for playback - Timer', () => {
+        abortEarlySetup();
+        before(() => {
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+            audioPlayerPage.steps.selectAudioPlayerStyleToggleButton('Compact');
+            audioPlayerPage.steps.expandCustomizePlayerLayoutSettingsAccordion();
+            audioPlayerPage.steps.switchToPreviewTab();
+        });
+
+        it('In compact mode, when the \'Timer\' option is selected, then in preview tab the elapsed and total time should be displayed', () => {
+            audioPlayerPage.steps.clickOnPlayButton();
+            utilities.verifyElementVisibilityState(audioPlayerPage.playbackElapsedTime(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.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');
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.deselectPlayerLayoutSettingButton('Timer');
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.clickOnPlayButton();
+            utilities.verifyElementVisibilityState(audioPlayerPage.playbackTime(), 'notExist');
+        });
+    });
+
+    describe('Controls for playback - Progress indicator', () => {
+        abortEarlySetup();
+        before(() => {
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+            audioPlayerPage.steps.selectAudioPlayerStyleToggleButton('Compact');
+            audioPlayerPage.steps.expandCustomizePlayerLayoutSettingsAccordion();
+            audioPlayerPage.steps.switchToPreviewTab();
+        });
+
+        it('In compact mode, when the \'Timer\' option is selected, then in preview tab the progress bar should be displayed', () => {
+            audioPlayerPage.steps.clickOnPlayButton();
+            utilities.verifyElementVisibilityState(audioPlayerPage.progressBar(), 'visible');
+        });
+
+        it('In compact mode, when the \'Volume\' option is not selected, then in preview tab the progress bar should not be displayed', () => {
+            cy.log('Pre-step: Switching to Edit tab, deselecting \'Volume\' button, switching back to Preview tab');
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.deselectPlayerLayoutSettingButton('Progress indicator');
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.clickOnPlayButton();
+            utilities.verifyElementVisibilityState(audioPlayerPage.progressBar(), 'notExist');
+        });
+    });
+});