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

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

@@ -0,0 +1,792 @@
+import { audioPlayerPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Standard audio player style: Edit tab contents and preview tab functionality', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('\'Audio player style\' section - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+        });
+
+        it('\'Audio player style\' label should be displayed', () => {
+            utilities.verifyInnerText(audioPlayerPage.audioPlayerStyleLabel(), 'Audio player style');
+            utilities.verifyElementVisibilityState(audioPlayerPage.audioPlayerStyleLabel(), 'visible');
+        });
+
+        it('Three toggle buttons \'Standard\', \'Bar\' and \'Compact\' should be displayed and \'Bar\' toggle button should be displayed', () => {
+            utilities.verifyInnerText(audioPlayerPage.standardStyleToggleButtonLabel(), 'Standard');
+            utilities.verifyElementVisibilityState(audioPlayerPage.standardStyleToggleButton(), 'visible');
+            utilities.verifyInnerText(audioPlayerPage.barStyleToggleButtonLabel(), 'Bar');
+            utilities.verifyElementVisibilityState(audioPlayerPage.barStyleToggleButton(), 'visible');
+            utilities.verifyInnerText(audioPlayerPage.compactStyleToggleButtonLabel(), 'Compact');
+            utilities.verifyElementVisibilityState(audioPlayerPage.compactStyleToggleButton(), 'visible');
+            audioPlayerPage.steps.verifyaudioPlayerStyleLabelToggleButtonIsNotSelected('Standard');
+            audioPlayerPage.steps.verifyaudioPlayerStyleLabelToggleButtonIsSelected('Bar');
+            audioPlayerPage.steps.verifyaudioPlayerStyleLabelToggleButtonIsNotSelected('Compact');
+        });
+
+        it('User should be able to select \'Standard\' toggle button', () => {
+            audioPlayerPage.steps.selectaudioPlayerStyleLabelToggleButton('Standard');
+            audioPlayerPage.steps.verifyaudioPlayerStyleLabelToggleButtonIsNotSelected('Bar');
+            audioPlayerPage.steps.verifyaudioPlayerStyleLabelToggleButtonIsNotSelected('Compact');
+        });
+
+        it('User should be able to select \'Bar\' toggle button', () => {
+            audioPlayerPage.steps.selectaudioPlayerStyleLabelToggleButton('Bar');
+            audioPlayerPage.steps.verifyaudioPlayerStyleLabelToggleButtonIsNotSelected('Standard');
+            audioPlayerPage.steps.verifyaudioPlayerStyleLabelToggleButtonIsNotSelected('Compact');
+        });
+
+        it('User should be able to select \'Compact\' toggle button', () => {
+            audioPlayerPage.steps.selectaudioPlayerStyleLabelToggleButton('Compact');
+            audioPlayerPage.steps.verifyaudioPlayerStyleLabelToggleButtonIsNotSelected('Standard');
+            audioPlayerPage.steps.verifyaudioPlayerStyleLabelToggleButtonIsNotSelected('Bar');
+        });
+
+        it('When user has selected \'Compact\' toggle button, then \'Compact player options\' label and options - \'Default\', \'Text\', \'Image\' and \'Icon\' should be displayed and default should be selected by default', () => {
+            utilities.verifyInnerText(audioPlayerPage.compactPlayerOptionsLabel(), 'Compact player options');
+            utilities.verifyElementVisibilityState(audioPlayerPage.compactPlayerOptionsLabel(), 'visible');
+            utilities.verifyInnerText(audioPlayerPage.defaultPlayerOptionButton(), 'Default');
+            utilities.verifyElementVisibilityState(audioPlayerPage.defaultPlayerOptionButton(), 'visible');
+            utilities.verifyInnerText(audioPlayerPage.textPlayerOptionButton(), 'Text');
+            utilities.verifyElementVisibilityState(audioPlayerPage.textPlayerOptionButton(), 'visible');
+            utilities.verifyInnerText(audioPlayerPage.imagePlayerOptionButton(), 'Image');
+            utilities.verifyElementVisibilityState(audioPlayerPage.imagePlayerOptionButton(), 'visible');
+            utilities.verifyInnerText(audioPlayerPage.iconPlayerOptionButton(), 'Icon');
+            utilities.verifyElementVisibilityState(audioPlayerPage.iconPlayerOptionButton(), 'visible');
+            audioPlayerPage.steps.verifyCompactPlayerOptionButtonIsSelected('Default');
+            audioPlayerPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Text');
+            audioPlayerPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Image');
+            audioPlayerPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Icon');
+        });
+
+        it('User should be able to select \'Default\' toggle button', () => {
+            audioPlayerPage.steps.selectCompactPlayerOptionButton('Default');
+            audioPlayerPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Text');
+            audioPlayerPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Image');
+            audioPlayerPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Icon');
+        });
+
+        it('User should be able to select \'Text\' toggle button', () => {
+            audioPlayerPage.steps.selectCompactPlayerOptionButton('Text');
+            audioPlayerPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Default');
+            audioPlayerPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Image');
+            audioPlayerPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Icon');
+        });
+
+        it('User should be able to select \'Image\' toggle button', () => {
+            audioPlayerPage.steps.selectCompactPlayerOptionButton('Image');
+            audioPlayerPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Default');
+            audioPlayerPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Text');
+            audioPlayerPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Icon');
+        });
+
+        it('User should be able to select \'Icon\' toggle button', () => {
+            audioPlayerPage.steps.selectCompactPlayerOptionButton('Icon');
+            audioPlayerPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Default');
+            audioPlayerPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Text');
+            audioPlayerPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Image');
+        });
+
+        it('CSS of audio player style section', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioPlayerPage.audioPlayerStyleLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(audioPlayerPage.compactStyleToggleButton(), {
+                'color': css.color.defaultBackground,
+                'background-color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(audioPlayerPage.standardStyleToggleButton(), {
+                'color': css.color.secondaryBtn,
+                'background-color': css.color.secondaryBtnBg,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(audioPlayerPage.compactPlayerOptionsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(audioPlayerPage.iconPlayerOptionButton(), {
+                'background-color': css.color.secondaryBtnBg,
+                'border': `2px solid ${css.color.activeButtons}`
+            });
+            utilities.verifyCSS(audioPlayerPage.iconPlayerOptionButton().find('.ngie-toggle-button-label'), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(audioPlayerPage.defaultPlayerOptionButton(), {
+                'background-color': css.color.secondaryBtnBg,
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`
+            });
+            utilities.verifyCSS(audioPlayerPage.defaultPlayerOptionButton().find('.ngie-toggle-button-label'), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of audio player style section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioPlayerPage.audioPlayerStyleLabel().parents('.audio-player-resource'));
+        });
+    });
+
+    describe('Standard playback player : Play, pause and seek', () => {
+        let actualAudioSeekedInPercent = 50
+        abortEarlySetup();
+        before(() => {
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+            audioPlayerPage.steps.uploadFile('uploads/sample.mp3');
+            audioPlayerPage.steps.selectAudioPlayerStyleToggleButton('Standard');
+            audioPlayerPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user switches to preview tab, then the standard playback player preview with \'Backward\', \'Play\', \'Forward\', \'Volume control\', \'Elapsed time\', \'Progress bar\', \'Total time\', \'Playback speed\' and \'Add pin\' buttons should be displayed', () => {
+            utilities.verifyElementVisibilityState(audioPlayerPage.standardPreviewPlayerWrapper(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.audioPlayerToolbar(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.backwardButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.playbackPlayButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.forwardButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.volumeControlButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.playbackElapsedTime(), 'visible');
+            utilities.verifyInnerText(audioPlayerPage.playbackElapsedTime(), '00:00');
+            utilities.verifyElementVisibilityState(audioPlayerPage.progressBar(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.playbackTotalTime(), 'visible');
+            utilities.verifyInnerText(audioPlayerPage.playbackTotalTime(), '00:00');
+            utilities.verifyElementVisibilityState(audioPlayerPage.playbackSpeedButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.addPinButton(), 'visible');
+        });
+
+        it('Accessibility of standard playback player in default state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioPlayerPage.playbackPlayButton().parents('.audio-resource-preview-wrapper'));
+        });
+
+        it('When the user hovers over the \'Play\' button, a tooltip \'Play\' should be displayed and on moving away the focus, the tooltip should disappear', () => {
+            audioPlayerPage.playbackPlayButton()
+                .verifyTooltip('Play');
+        });
+
+        it('When the user clicks on \'Play\' button, then the audio file should load and the user should be able to play the audio. Timer should display the amount of audio that has been played and the total audio length in (mm:ss)/(mm:ss) format.', () => {
+            audioPlayerPage.steps.startPlayback();
+            audioPlayerPage.steps.waitForPlaybackToBegin();
+            audioPlayerPage.steps.verifyAudioPlaybackTimer('00:03', '00:45');
+        });
+
+        it('When the user hovers over the \'Pause\' button, a tooltip \'Pause\' should be displayed and on moving away the focus, the tooltip should disappear', () => {
+            audioPlayerPage.playbackPauseButton()
+                .verifyTooltip('Pause');
+        });
+
+        it('CSS of \'Preview\' section if playback is initiated', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioPlayerPage.standardPreviewPlayerWrapper(), {
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`
+            });
+            utilities.verifyCSS(audioPlayerPage.standardPreviewPlayerWrapper().find('#Icon_awesome-microphone'), {
+                'fill': css.color.microphoneIcon
+            });
+            utilities.verifyCSS(audioPlayerPage.playbackPauseButton().find('#pause'), {
+                'stroke': css.color.secondaryBtnActive,
+            });
+            utilities.verifyCSS(audioPlayerPage.playbackElapsedTime(), {
+                'color': css.color.playbackTime,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(audioPlayerPage.playbackTotalTime(), {
+                'color': css.color.playbackTime,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(audioPlayerPage.progressBar().find('.MuiSlider-rail'), {
+                'background-color': css.color.progressBarRemainingFill
+            });
+            utilities.verifyCSS(audioPlayerPage.progressBar().find('.MuiSlider-track'), {
+                'background-color': css.color.progressBarElapsedFill
+            });
+        });
+
+        it('Accessibility of \'Preview\' section if playback is initiated', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioPlayerPage.playbackPauseButton().parents('.audio-resource-preview-wrapper'));
+        });
+
+        it('When the audio player is in playback state and the user clicks on \'Pause\' button, then playback should get paused. Progress bar and timer should not update further and the \'Pause\' button should get replaced with \'Play\' button', () => {
+            audioPlayerPage.steps.resetQuestionPreview();
+            audioPlayerPage.steps.startPlayback();
+            audioPlayerPage.steps.waitForPlaybackToBegin();
+            audioPlayerPage.steps.verifyAudioPlaybackTimer('00:10', '00:45');
+            audioPlayerPage.steps.pauseAndVerifyProgressBarSliderPosition();
+            audioPlayerPage.steps.verifyAudioPlaybackTimer('00:10', '00:45');
+            utilities.verifyElementVisibilityState(audioPlayerPage.playbackPlayButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.playbackPauseButton(), 'notExist');
+        });
+
+        it('Accessibility of \'Preview\' section if if playback is paused', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioPlayerPage.playbackPlayButton().parents('.audio-resource-preview-wrapper'));
+        });
+
+        it('When audio player is in paused state and user clicks on \'Play\' button, then playback should get resumed and \'Play\' button should get replaced with \'Pause\' button.', () => {
+            audioPlayerPage.steps.startPlayback();
+            utilities.verifyElementVisibilityState(audioPlayerPage.playbackPauseButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.playbackPlayButton(), 'notExist');
+        });
+
+        it('When the user seeks the progress bar slider while the audio is playing, then the audio should continue to play from the position where the slider is seeked', () => {
+            audioPlayerPage.steps.seekProgressBarSliderToCenter();
+            audioPlayerPage.steps.addWaitToPlayAudio(1000);
+            audioPlayerPage.steps.verifyProgressBarSliderPosition(actualAudioSeekedInPercent);
+        });
+
+        it('When the user seeks the progress bar slider while the audio is paused, then the audio playback should be in paused state and on playing the audio, then the audio should play from the position where the slider is seeked', () => {
+            audioPlayerPage.steps.pausePlayback();
+            audioPlayerPage.steps.seekProgressBarSliderToCenter();
+            audioPlayerPage.steps.startPlayback();
+            audioPlayerPage.steps.addWaitToPlayAudio(3000);
+            audioPlayerPage.steps.verifyProgressBarSliderPosition(actualAudioSeekedInPercent);
+        });
+
+        it('When the audio playback is completed, the \'Pause\' button should get replaced with \'Play\' button', () => {
+            audioPlayerPage.steps.verifyAudioPlaybackTimer('00:45', '00:45');
+            utilities.verifyElementVisibilityState(audioPlayerPage.playbackPlayButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.playbackPauseButton(), 'notExist');
+            audioPlayerPage.steps.verifyProgressBarSliderPosition(99);
+        });
+
+        it('CSS of progress bar in hover state', { tags: 'css' }, () => {
+            audioPlayerPage.steps.hoverOnProgressBarSlider();
+            utilities.verifyCSS(audioPlayerPage.progressBarSlider().parents('span[class*="MuiSlider-thumb"]'), {
+                'box-shadow': `${css.color.progressBarSliderHoverBackground} 0px 0px 0px 8px`
+            });
+        });
+    });
+
+    describe('Standard playback player : Volume control', () => {
+        abortEarlySetup();
+        before(() => {
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+            audioPlayerPage.steps.uploadFile('uploads/sample.mp3');
+            audioPlayerPage.steps.selectAudioPlayerStyleToggleButton('Standard');
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.startPlayback();
+            audioPlayerPage.steps.waitForPlaybackToBegin();
+        });
+
+        it('When the user hovers over \'Volume control\' button, volume control settings should open and by default it should be set to full volume and on hovering away from the button, the volume slider should disappear', () => {
+            audioPlayerPage.steps.hoverOnVolumeControlButton();
+            utilities.verifyElementVisibilityState(audioPlayerPage.volumeControlSlider(), 'visible');
+            audioPlayerPage.steps.verifyVolumeOfPlaybackPlayer('100');
+            utilities.hoverAwayFromElement();
+            utilities.verifyElementVisibilityState(audioPlayerPage.volumeControlSlider(), 'notExist');
+        });
+
+        it('When volume is not set as 0 and user hovers on \'Volume control\' button, then \'Mute\' text should be displayed in a tooltip and on hovering away from the button, the tooltip should disappear', () => {
+            audioPlayerPage.steps.hoverOnVolumeControlButton();
+            utilities.verifyElementVisibilityState(audioPlayerPage.tooltipText(), 'visible');
+            utilities.verifyInnerText(audioPlayerPage.tooltipText(), 'Mute');
+            utilities.hoverAwayFromElement();
+            utilities.verifyElementVisibilityState(audioPlayerPage.tooltipText(), 'notExist');
+        });
+
+        it('When the user hovers over \'Volume control slider\', then \'Volume control\' text should be displayed in a tooltip and on hovering away from the button, the tooltip should disappear', () => {
+            audioPlayerPage.steps.hoverOnVolumeControlButton();
+            audioPlayerPage.steps.hoverOnVolumeControlSlider();
+            audioPlayerPage.steps.hoverAwayFromVolumeControlButton();
+            utilities.verifyElementVisibilityState(audioPlayerPage.tooltipText(), 'visible');
+            utilities.verifyInnerText(audioPlayerPage.tooltipText(), 'Volume control');
+            utilities.hoverAwayFromElement();
+            utilities.verifyElementVisibilityState(audioPlayerPage.volumeControlSlider(), 'notExist');
+            utilities.verifyElementVisibilityState(audioPlayerPage.tooltipText(), 'notExist');
+        });
+
+        it('When volume is not set as 0 and user clicks on volume control button, then the audio should be muted and the volume control button should change to a muted state', () => {
+            audioPlayerPage.steps.clickOnVolumeButton();
+            audioPlayerPage.steps.hoverOnVolumeControlButton();
+            audioPlayerPage.steps.verifyVolumeOfPlaybackPlayer('0');
+            utilities.hoverAwayFromElement();
+            utilities.verifyElementVisibilityState(audioPlayerPage.volumeControlSlider(), 'notExist');
+            utilities.verifyElementVisibilityState(audioPlayerPage.muteVolumeIcon(), 'visible');
+            utilities.hoverAwayFromElement();
+        });
+
+        it('When the user hovers on muted \'Volume control\' button, \'Unmute\' text should be displayed in tooltip', () => {
+            audioPlayerPage.steps.hoverOnVolumeControlButton();
+            utilities.verifyElementVisibilityState(audioPlayerPage.tooltipText(), 'visible');
+            utilities.verifyInnerText(audioPlayerPage.tooltipText(), 'Unmute');
+            utilities.hoverAwayFromElement();
+            utilities.verifyElementVisibilityState(audioPlayerPage.tooltipText(), 'notExist');
+        });
+
+        it('When the user clicks on the muted volume control button then the volume setting slider should return to full volume and the volume control button should change to an unmuted state', () => {
+            audioPlayerPage.steps.clickOnVolumeButton();
+            audioPlayerPage.steps.hoverOnVolumeControlButton();
+            audioPlayerPage.steps.verifyVolumeOfPlaybackPlayer('100');
+            audioPlayerPage.steps.verifyUnmutedVolumeIconIsDisplayedInPreviewTab();
+        });
+
+        it('CSS of volume control section', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioPlayerPage.volumeControlSlider(), {
+                'background': `${css.color.transparent} linear-gradient(to right, ${css.color.progressBarElapsedFill} 0%, ${css.color.progressBarElapsedFill} 100%, ${css.color.defaultBackground} 0%, ${css.color.defaultBackground} 100%) repeat scroll 0% 0% / auto padding-box border-box`
+            });
+            audioPlayerPage.unmutedVolumeIcon()
+                .verifyPseudoClassBeforeProperty('color', css.color.activeButtons);
+        });
+
+        it('Accessibility of volume control section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioPlayerPage.volumeControlSlider());
+            cy.checkAccessibility(audioPlayerPage.playbackPauseButton().parents('.audio-resource-preview-wrapper'));
+        });
+
+        it('When the user drags the volume control all the way down, audio should be muted and the button should update to a muted state', () => {
+            audioPlayerPage.steps.setVolumeSliderForPlayback(0);
+            audioPlayerPage.steps.verifyVolumeOfPlaybackPlayer('0');
+            utilities.verifyElementVisibilityState(audioPlayerPage.muteVolumeIcon(), 'visible');
+        });
+
+        it('CSS of volume control section in muted state', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioPlayerPage.volumeControlSlider(), {
+                'background': `${css.color.transparent} linear-gradient(to right, ${css.color.progressBarElapsedFill} 0%, ${css.color.progressBarElapsedFill} 0%, ${css.color.defaultBackground} -100%, ${css.color.defaultBackground} 100%) repeat scroll 0% 0% / auto padding-box border-box`
+            });
+            audioPlayerPage.muteVolumeIcon()
+                .verifyPseudoClassBeforeProperty('color', css.color.activeButtons);
+        });
+
+        it('Accessibility of volume control section in muted state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioPlayerPage.volumeControlSlider());
+            cy.checkAccessibility(audioPlayerPage.playbackPauseButton().parents('.audio-resource-preview-wrapper'));
+        });
+
+        it('User should be able to unmute the audio by dragging the volume control higher again', () => {
+            audioPlayerPage.steps.setVolumeSliderForPlayback(99);
+            audioPlayerPage.steps.verifyVolumeOfPlaybackPlayer('100');
+            audioPlayerPage.steps.verifyUnmutedVolumeIconIsDisplayedInPreviewTab();
+        });
+    });
+
+    describe('Standard playback player : Playback speed', () => {
+        const playbackSpeedOptions = ['0.5', '1', '1.25', '1.5', '1.75', '2'];
+        abortEarlySetup();
+        before(() => {
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+            audioPlayerPage.steps.uploadFile('uploads/sample.mp3');
+            audioPlayerPage.steps.selectAudioPlayerStyleToggleButton('Standard');
+            audioPlayerPage.steps.switchToPreviewTab();
+        });
+
+        audioPlayerPage.tests.verifyPlaybackSpeedContents(playbackSpeedOptions);
+
+        for (let index = 0; index < playbackSpeedOptions.length; index++) {
+            it(`When the user selects playback speed option ${playbackSpeedOptions[index]}x, the audio playback speed should be changed accordingly`, () => {
+                audioPlayerPage.steps.resetQuestionPreview();
+                audioPlayerPage.steps.hoverOnPlaybackSpeedButton();
+                audioPlayerPage.steps.selectPlaybackSpeed(`${playbackSpeedOptions[index]}x`);
+                utilities.verifyElementVisibilityState(audioPlayerPage.playbackSpeedOption(), 'notExist');
+                audioPlayerPage.steps.startPlayback();
+                audioPlayerPage.steps.waitForPlaybackToBegin();
+                audioPlayerPage.steps.addWaitToPlayAudio(4000);
+                audioPlayerPage.steps.pausePlayback();
+                utilities.verifyInnerText(audioPlayerPage.playbackElapsedTime(), `00:0${1 + (2 * playbackSpeedOptions[index])}`);
+            });
+        };
+    });
+
+    describe('Standard playback player : Backward and Forward buttons', () => {
+        abortEarlySetup();
+        before(() => {
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+            audioPlayerPage.steps.uploadFile('uploads/sample.mp3');
+            audioPlayerPage.steps.selectAudioPlayerStyleToggleButton('Standard');
+            audioPlayerPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user hovers over the \'Backward\' button, a tooltip \'Backward Button\' should be displayed and on moving away the focus, the tooltip should disappear', () => {
+            audioPlayerPage.backwardButton()
+                .verifyTooltip('Backward Button');
+        });
+
+        it('When the user hovers over the \'Forward\' button, a tooltip \'Forward Button\' should be displayed and on moving away the focus, the tooltip should disappear', () => {
+            audioPlayerPage.forwardButton()
+                .verifyTooltip('Forward Button');
+        });
+
+        it('CSS of \'Backward\' and \'Forward\' button in default and hover state', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioPlayerPage.backwardButton().find('path').eq(1), {
+                'stroke': css.color.activeButtons
+            });
+            utilities.verifyCSS(audioPlayerPage.forwardButton().find('path').eq(1), {
+                'stroke': css.color.activeButtons
+            });
+            utilities.triggerMouseover(audioPlayerPage.backwardButton());
+            utilities.verifyCSS(audioPlayerPage.backwardButton(), {
+                'background-color': css.color.selectToolbarOptionBg
+            });
+            utilities.triggerMouseout(audioPlayerPage.backwardButton());
+            utilities.triggerMouseover(audioPlayerPage.forwardButton());
+            utilities.verifyCSS(audioPlayerPage.forwardButton(), {
+                'background-color': css.color.selectToolbarOptionBg
+            });
+            utilities.triggerMouseout(audioPlayerPage.forwardButton());
+        });
+
+        it('When playback is not initiated and user clicks on forward or backward button, then there should not be any changes', () => {
+            audioPlayerPage.steps.clickOnForwardButton();
+            audioPlayerPage.steps.verifyProgressBarSliderPosition(0);
+            audioPlayerPage.steps.verifyAudioPlaybackTimer('00:00', '00:00');
+            audioPlayerPage.steps.clickOnBackwardButton();
+            audioPlayerPage.steps.verifyProgressBarSliderPosition(0);
+            audioPlayerPage.steps.verifyAudioPlaybackTimer('00:00', '00:00');
+        });
+
+        it('When the audio player is in playback state and the user clicks on \'Forward\' button, then playback should get forwarded by 10 seconds and both the progress bar and elapsed time should be updated accordingly', () => {
+            audioPlayerPage.steps.startPlayback();
+            audioPlayerPage.steps.waitForPlaybackToBegin();
+            audioPlayerPage.steps.addWaitToPlayAudio(4000);
+            audioPlayerPage.steps.clickOnForwardButton();
+            audioPlayerPage.steps.verifyAudioPlaybackTimer('00:15', '00:45');
+        });
+
+        it('When audio player is in paused state and the user clicks on \'Forward\' button, then playback should get forwarded by 10 seconds and both the progress bar and elapsed time should be updated accordingly', () => {
+            audioPlayerPage.steps.pausePlayback();
+            audioPlayerPage.steps.clickOnForwardButton();
+            audioPlayerPage.steps.verifyAudioPlaybackTimer('00:25', '00:45');
+        });
+
+        it('When the audio player is in playback state and the user clicks on \'Backward\' button, then playback should get backtracked by 10 seconds and both the progress bar and elapsed time should be updated accordingly', () => {
+            audioPlayerPage.steps.startPlayback();
+            audioPlayerPage.steps.addWaitToPlayAudio(3000);
+            audioPlayerPage.steps.clickOnBackwardButton();
+            audioPlayerPage.steps.verifyAudioPlaybackTimer('00:18', '00:45');
+        });
+
+        it('When audio player is in paused state and the user clicks on \'Backward\' button, then playback should get backtracked by 10 seconds and both the progress bar and elapsed time should be updated accordingly', () => {
+            audioPlayerPage.steps.pausePlayback();
+            audioPlayerPage.steps.clickOnBackwardButton();
+            audioPlayerPage.steps.verifyAudioPlaybackTimer('00:09', '00:45');
+        });
+
+        it('When the elapsed time is less than 10 seconds and user clicks on backward button, then the playback should be backtracked to 0 and both the progress bar and elapsed time should be updated accordingly', () => {
+            audioPlayerPage.steps.clickOnBackwardButton();
+            audioPlayerPage.steps.verifyAudioPlaybackTimer('00:00', '00:45');
+        });
+
+        it('When the difference between total time and elapsed time is less than 10 seconds and user clicks on forward button, then the playback should be forwarded to its completed state and both the progress bar and elapsed time should be updated accordingly', () => {
+            audioPlayerPage.steps.seekProgressBarSliderToCenter();
+            audioPlayerPage.steps.startPlayback();
+            audioPlayerPage.steps.addWaitToPlayAudio(15000);
+            audioPlayerPage.steps.clickOnForwardButton();
+            audioPlayerPage.steps.verifyAudioPlaybackTimer('00:45', '00:45');
+        });
+    });
+
+    describe('Standard playback player : Add pin', () => {
+        abortEarlySetup();
+        before(() => {
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+            audioPlayerPage.steps.uploadFile('uploads/sample.mp3');
+            audioPlayerPage.steps.selectAudioPlayerStyleToggleButton('Standard');
+            audioPlayerPage.steps.switchToPreviewTab();
+        });
+
+        it('When playback is not initiated and user clicks on add pin button, then there should not be any changes and pins panel should not be displayed', () => {
+            audioPlayerPage.steps.clickOnAddPinButton();
+            utilities.verifyElementVisibilityState(audioPlayerPage.pinsPanel(), 'notExist');
+        });
+
+        it('When the audio player is in playback state and the user clicks on \'Add pin\' button, pins panel should be displayed', () => {
+            audioPlayerPage.steps.startPlayback();
+            audioPlayerPage.steps.waitForPlaybackToBegin();
+            audioPlayerPage.steps.clickOnAddPinButton();
+            utilities.verifyElementVisibilityState(audioPlayerPage.pinsPanel(), 'visible');
+        });
+
+        it('By default in the pins panel \'Pins\' title, close \'X\' button, \'+Add pin\' button and \'No pins added\' help text should be displayed', () => {
+            utilities.verifyInnerText(audioPlayerPage.pinsTitle(), 'Pins');
+            utilities.verifyElementVisibilityState(audioPlayerPage.pinsTitle(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.pinsPanelCloseButton(), 'visible');
+            utilities.verifyInnerText(audioPlayerPage.pinsPanelAddPinButton(), 'Add pin');
+            utilities.verifyElementVisibilityState(audioPlayerPage.pinsPanelAddPinButton(), 'visible');
+            utilities.verifyInnerText(audioPlayerPage.noPinsAddedHelpText(), 'No pins added');
+            utilities.verifyElementVisibilityState(audioPlayerPage.noPinsAddedHelpText(), 'visible');
+        });
+
+        it('When the user clicks on add pin button in the pins panel, then add pin button should be displayed in active state, \'Time\' label, input field with the text \'00:00\', \'Cancel\' button and \'Save\' button should be displayed in the pins panel', () => {
+            audioPlayerPage.steps.clickOnPinsPanelAddPinButton();
+            audioPlayerPage.steps.verifyPinsPanelAddPinButtonActiveState();
+            utilities.verifyInnerText(audioPlayerPage.pinsPanelTimeLabel(), 'Time');
+            utilities.verifyElementVisibilityState(audioPlayerPage.pinsPanelTimeLabel(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.pinsPanelTimeInputFieldWrapper(), 'visible');
+            utilities.verifyInputFieldValue(audioPlayerPage.pinsPanelTimeInputFieldMinutes(), '00');
+            utilities.verifyInnerText(audioPlayerPage.pinsPanelTimeInputFieldWrapper(), ':');
+            utilities.verifyInputFieldValue(audioPlayerPage.pinsPanelTimeInputFieldSeconds(), '00');
+            utilities.verifyInnerText(audioPlayerPage.addPinSectionCancelButton(), 'Cancel');
+            utilities.verifyElementVisibilityState(audioPlayerPage.addPinSectionCancelButton(), 'visible');
+            utilities.verifyInnerText(audioPlayerPage.addPinSectionSaveButton(), 'Save');
+            utilities.verifyElementVisibilityState(audioPlayerPage.addPinSectionSaveButton(), 'visible');
+        });
+
+        it('CSS of selected add pin button and add pin section', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioPlayerPage.pinsPanelAddPinButton(), {
+                'background-color': css.color.selectToolbarOptionBg
+            });
+            utilities.verifyCSS(audioPlayerPage.pinsPanelAddPinButton().find('span'), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            audioPlayerPage.pinsPanelAddPinButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.activeButtons);
+            utilities.verifyCSS(audioPlayerPage.pinsPanelTimeLabel().find('span'), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(audioPlayerPage.pinsPanelTimeInputFieldMinutes(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(audioPlayerPage.pinsPanelTimeInputFieldSeconds(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(audioPlayerPage.addPinSectionCancelButton(), {
+                'text-decoration': 'underline'
+            });
+            utilities.verifyCSS(audioPlayerPage.addPinSectionCancelButton().find('span'), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(audioPlayerPage.addPinSectionSaveButton(), {
+                'background-color': css.color.activeButtons
+            });
+            utilities.verifyCSS(audioPlayerPage.addPinSectionSaveButton().find('p'), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(audioPlayerPage.noPinsAddedHelpText().find('span'), {
+                'color': css.color.text,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of add pin section and add pin button in selected state', () => {
+            cy.checkAccessibility(audioPlayerPage.pinsPanelAddPinButton().parents('[class*="AddPinstyles__PinsCollectionWrapper"]'));
+        });
+
+        it('No pins added help text should still be displayed', () => {
+            utilities.verifyElementVisibilityState(audioPlayerPage.noPinsAddedHelpText(), 'visible');
+        });
+
+        it('User should be able to give a timestamp input in the time input field', () => {
+            audioPlayerPage.steps.addInputToTimeInputFieldInPinsPanel('00:30');
+            utilities.verifyInputFieldValue(audioPlayerPage.pinsPanelTimeInputFieldMinutes(), '00');
+            utilities.verifyInputFieldValue(audioPlayerPage.pinsPanelTimeInputFieldSeconds(), '30');
+        });
+
+        it('The minute and seconds input field should have the maximum and minimum value as per the uploaded audio and the values should update accordingly', () => {
+            audioPlayerPage.steps.verifyMaximumAndMinimumValueOfMinutesTimeInputField(0, 0);
+            audioPlayerPage.steps.verifyMaximumAndMinimumValueOfSecondsTimeInputField(0, 45);
+            audioPlayerPage.steps.switchToEditTab();
+            audioPlayerPage.steps.uploadFile('uploads/sample1.mp3');
+            utilities.verifyTextContent(audioPlayerPage.uploadedFileNameLabel(), 'sample1.mp3');
+            audioPlayerPage.steps.switchToPreviewTab();
+            audioPlayerPage.steps.resetQuestionPreview();   //Added as audio does not load when quickly switched to preview tab
+            utilities.verifyElementVisibilityState(audioPlayerPage.playbackPlayButton(), 'visible');
+            audioPlayerPage.steps.startPlayback();
+            audioPlayerPage.steps.waitForPlaybackToBegin();
+            audioPlayerPage.steps.clickOnAddPinButton();
+            audioPlayerPage.steps.clickOnPinsPanelAddPinButton();
+            audioPlayerPage.steps.verifyMaximumAndMinimumValueOfMinutesTimeInputField(0, 0);
+            audioPlayerPage.steps.verifyMaximumAndMinimumValueOfSecondsTimeInputField(0, 58);
+        });
+
+        it('When the user add inputs a value greater than the maximum value in time input fields then it should be reset to the maximum value', () => {
+            audioPlayerPage.steps.addInputToTimeInputFieldInPinsPanel('10:59');
+            utilities.verifyInputFieldValue(audioPlayerPage.pinsPanelTimeInputFieldMinutes(), '00');
+            utilities.verifyInputFieldValue(audioPlayerPage.pinsPanelTimeInputFieldSeconds(), '58');
+        });
+
+        it('User should only be able to give real numbers input in  the time input field', () => {
+            audioPlayerPage.steps.addInputToTimeInputFieldInPinsPanel('a0b0:3.#0');
+            utilities.verifyInputFieldValue(audioPlayerPage.pinsPanelTimeInputFieldMinutes(), '00');
+            utilities.verifyInputFieldValue(audioPlayerPage.pinsPanelTimeInputFieldSeconds(), '30');
+        });
+
+        it('When user clicks on cancel button, then the add pin section should not be displayed', () => {
+            audioPlayerPage.steps.clickOnAddPinSectionCancelButton();
+            utilities.verifyElementVisibilityState(audioPlayerPage.addPinContainer(), 'notExist');
+        });
+
+        it('When the user clicks on pins panel add pin button again, then the time input field, cancel button and save button should be displayed in their default state', () => {
+            audioPlayerPage.steps.clickOnPinsPanelAddPinButton();
+            utilities.verifyInnerText(audioPlayerPage.pinsPanelTimeLabel(), 'Time');
+            utilities.verifyElementVisibilityState(audioPlayerPage.pinsPanelTimeLabel(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.pinsPanelTimeInputFieldWrapper(), 'visible');
+            utilities.verifyInputFieldValue(audioPlayerPage.pinsPanelTimeInputFieldMinutes(), '00');
+            utilities.verifyInnerText(audioPlayerPage.pinsPanelTimeInputFieldWrapper(), ':');
+            utilities.verifyInputFieldValue(audioPlayerPage.pinsPanelTimeInputFieldSeconds(), '00');
+            utilities.verifyInnerText(audioPlayerPage.addPinSectionCancelButton(), 'Cancel');
+            utilities.verifyElementVisibilityState(audioPlayerPage.addPinSectionCancelButton(), 'visible');
+            utilities.verifyInnerText(audioPlayerPage.addPinSectionSaveButton(), 'Save');
+            utilities.verifyElementVisibilityState(audioPlayerPage.addPinSectionSaveButton(), 'visible');
+        });
+
+        it('When user gives an input in time input field and clicks on save button, then add pin section should not be displayed and the pin should be saved', () => {
+            audioPlayerPage.steps.addInputToTimeInputFieldInPinsPanel('00:29');
+            audioPlayerPage.steps.clickOnAddPinSectionSaveButton();
+            utilities.verifyElementVisibilityState(audioPlayerPage.addPinContainer(), 'notExist');
+            utilities.verifyElementVisibilityState(audioPlayerPage.pinsPanelAddedPinWrapper(), 'visible');
+        });
+
+        it('The added pin time should be displayed in the pins panel along with a delete button', () => {
+            audioPlayerPage.steps.verifyAddedPinTimeStampAndDeleteButton(0, '00:29');
+        });
+
+        it('No pins added help text should not be displayed', () => {
+            utilities.verifyElementVisibilityState(audioPlayerPage.noPinsAddedHelpText(), 'notExist');
+        });
+
+        it('User should be able to add multiple pins', () => {
+            audioPlayerPage.steps.clickOnPinsPanelAddPinButton();
+            audioPlayerPage.steps.addInputToTimeInputFieldInPinsPanel('00:15');
+            audioPlayerPage.steps.clickOnAddPinSectionSaveButton();
+            audioPlayerPage.steps.verifyAddedPinTimeStampAndDeleteButton(1, '00:15');
+            audioPlayerPage.steps.clickOnPinsPanelAddPinButton();
+            audioPlayerPage.steps.addInputToTimeInputFieldInPinsPanel('00:43');
+            audioPlayerPage.steps.clickOnAddPinSectionSaveButton();
+            audioPlayerPage.steps.verifyAddedPinTimeStampAndDeleteButton(2, '00:43');
+        });
+
+        it('The added pins should be displayed on the progress bar', () => {
+            audioPlayerPage.steps.verifyProgressBarPin(0, '00:29');
+            audioPlayerPage.steps.verifyProgressBarPin(1, '00:15');
+            audioPlayerPage.steps.verifyProgressBarPin(2, '00:43');
+        });
+
+        it('When the player is in play state and the user clicks on a pin, then the progress bar slider should be set to the clicked pin bookmark', () => {
+            audioPlayerPage.steps.clickOnProgressBarPin('00:29');
+            audioPlayerPage.steps.verifyProgressBarSliderPosition(50);
+            audioPlayerPage.steps.clickOnProgressBarPin('00:43');
+            audioPlayerPage.steps.verifyProgressBarSliderPosition(75);
+        });
+
+        it('When the player is in paused state and the user clicks on a pin, then the progress bar slider should be set to the clicked pin bookmark', () => {
+            audioPlayerPage.steps.pausePlayback();
+            audioPlayerPage.steps.clickOnProgressBarPin('00:15');
+            audioPlayerPage.steps.verifyProgressBarSliderPosition(25);
+        });
+
+        it('When the user clicks on the pin delete button, then the pin should be deleted from the pins panel and the progress bar', () => {
+            audioPlayerPage.steps.clickOnAddedPinDeleteButton(1);
+            audioPlayerPage.steps.verifyAddedPinTimeStampAndDeleteButton(0, '00:29');
+            audioPlayerPage.steps.verifyAddedPinTimeStampAndDeleteButton(1, '00:43');
+            utilities.verifyElementCount(audioPlayerPage.pinsPanelAddedPinWrapper(), 2);
+            audioPlayerPage.steps.verifyProgressBarPin(0, '00:29');
+            audioPlayerPage.steps.verifyProgressBarPin(1, '00:43');
+            utilities.verifyElementCount(audioPlayerPage.progressBarPin(), 2);
+        });
+
+        it('When no pins are present, then the no pins added help text should be displayed again', () => {
+            audioPlayerPage.steps.clickOnAddedPinDeleteButton(0);
+            audioPlayerPage.steps.clickOnAddedPinDeleteButton(0);
+            utilities.verifyElementVisibilityState(audioPlayerPage.pinsPanelAddedPinWrapper(), 'notExist');
+            utilities.verifyElementVisibilityState(audioPlayerPage.noPinsAddedHelpText(), 'visible');
+        });
+
+        it('When the user clicks on pins panel close button, then the pins panel should not be displayed', () => {
+            cy.log('Pre-step: Add pins before closing pins panel');
+            audioPlayerPage.steps.clickOnPinsPanelAddPinButton();
+            audioPlayerPage.steps.addInputToTimeInputFieldInPinsPanel('00:29');
+            audioPlayerPage.steps.clickOnAddPinSectionSaveButton();
+            audioPlayerPage.steps.verifyAddedPinTimeStampAndDeleteButton(0, '00:29');
+            audioPlayerPage.steps.clickOnPinsPanelAddPinButton();
+            audioPlayerPage.steps.addInputToTimeInputFieldInPinsPanel('00:15');
+            audioPlayerPage.steps.clickOnAddPinSectionSaveButton();
+            audioPlayerPage.steps.verifyAddedPinTimeStampAndDeleteButton(1, '00:15');
+            audioPlayerPage.steps.clickOnPinsPanelCloseButton();
+            utilities.verifyElementVisibilityState(audioPlayerPage.pinsPanel(), 'notExist');
+        });
+
+        it('When user has added pins and closed the pins panel, then the added pins should be displayed on the progress bar', () => {
+            audioPlayerPage.steps.verifyProgressBarPin(0, '00:29');
+            audioPlayerPage.steps.verifyProgressBarPin(1, '00:15');
+        });
+
+        it('When the user clicks on the add pin button in the toolbar, then the pins panel should be displayed again and the previously added pins should be displayed', () => {
+            audioPlayerPage.steps.clickOnAddPinButton()
+            utilities.verifyElementVisibilityState(audioPlayerPage.pinsPanel(), 'visible');
+            audioPlayerPage.steps.verifyAddedPinTimeStampAndDeleteButton(0, '00:29');
+            audioPlayerPage.steps.verifyAddedPinTimeStampAndDeleteButton(1, '00:15');
+        });
+
+        it('CSS of toolbar \'Add pin\' button and pins panel', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioPlayerPage.addPinButton().find('path'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.triggerMouseover(audioPlayerPage.addPinButton());
+            utilities.verifyCSS(audioPlayerPage.addPinButton(), {
+                'background-color': css.color.selectToolbarOptionBg
+            });
+            utilities.triggerMouseout(audioPlayerPage.addPinButton());
+            utilities.verifyCSS(audioPlayerPage.pinsPanelAddPinButton(), {
+                'background-color': css.color.transparent
+            });
+            utilities.verifyCSS(audioPlayerPage.pinsPanelAddPinButton().find('span'), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            audioPlayerPage.pinsPanelAddPinButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.activeButtons);
+            utilities.verifyCSS(audioPlayerPage.pinsPanelTimeLabel().find('span'), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(audioPlayerPage.pinsTitle(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(audioPlayerPage.pinsPanelCloseButton().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(audioPlayerPage.pinsPanelTimeInputFieldSeconds(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(audioPlayerPage.pinsPanelAddedPinTimeStamp(), {
+                'color': css.color.playbackTime,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.getNthElement(audioPlayerPage.pinsPanelAddedPinDeleteButton(), 0)
+                .verifyPseudoClassBeforeProperty('color', css.color.activeButtons);
+            utilities.getNthElement(audioPlayerPage.progressBar(), 0)
+                .verifyPseudoClassBeforeProperty('background-color', css.color.progressBarPin);
+        });
+
+        it('Accessibility of pins panel', () => {
+            cy.checkAccessibility(audioPlayerPage.pinsPanelAddPinButton().parents('.resource-and-tool-preview-wrapper'));
+        })
+
+        it('When the user clicks on the add pin button in the toolbar, then the pins panel should not be displayed', () => {
+            audioPlayerPage.steps.clickOnAddPinButton()
+            utilities.verifyElementVisibilityState(audioPlayerPage.pinsPanel(), 'notExist');
+        });
+    });
+});