itemengine-cypress-automation 1.0.51 → 1.0.63

package/cypress/e2e/ILC/AudioPlayer/audioPlayerEditTab.js

@@ -0,0 +1,342 @@
+import { audioPlayerPage } from "../../../pages";
+import utilities from "../../../support/helpers/utilities";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+describe('Audio player: Edit tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('\'Player type\' dropdown section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to audio player tool');
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+        });
+
+        it('\'Player type\' label and dropdown should be displayed. By default, \'Bar\' option should be selected in \'Player type\' dropdown and it should be disabled', () => {
+            utilities.verifyInnerText(audioPlayerPage.playerTypeLabel(), 'Player type');
+            utilities.verifyElementVisibilityState(audioPlayerPage.playerTypeLabel(), 'visible');
+            utilities.verifyInnerText(audioPlayerPage.playerTypeDropdown(), 'Bar');
+            utilities.verifyElementVisibilityState(audioPlayerPage.playerTypeDropdown(), 'visible');
+            audioPlayerPage.steps.verifyPlayerTypeDropdownDisabledState();
+        });
+
+        it('CSS of Player type dropdown section', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioPlayerPage.playerTypeLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(audioPlayerPage.playerTypeDropdown(), {
+                'background-color': css.color.defaultBackground,
+                'border': `1px solid ${css.color.defaultDropdownBorder}`,
+            });
+            utilities.verifyCSS(audioPlayerPage.playerTypeDropdown().find('.dropdown-label-text'), {
+                'color': css.color.secondaryBtnDisabled,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            audioPlayerPage.playerTypeDropdown()
+                .verifyPseudoClassBeforeProperty('color', css.color.secondaryBtnDisabled);
+        });
+
+        //Note: a11y covered in header file
+    });
+
+    describe('Playback limit section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to audio player tool');
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+        });
+
+        it('\'Playback limit\' label and empty input field should be displayed', () => {
+            utilities.verifyInnerText(audioPlayerPage.playbackLimitLabel(), 'Playback limit');
+            utilities.verifyElementVisibilityState(audioPlayerPage.playbackLimitLabel(), 'visible');
+            utilities.verifyInnerText(audioPlayerPage.playbackLimitInputField(), '');
+            utilities.verifyElementVisibilityState(audioPlayerPage.playbackLimitInputField(), 'visible');
+        });
+
+        it('When the user focuses in and out of the \'Playback limit\' input field, no error message should be displayed', () => {
+            audioPlayerPage.steps.focusInAndFocusOutOfPlaybackLimitInputField()
+            utilities.verifyElementVisibilityState(audioPlayerPage.errorMessage(), 'hidden');
+        })
+
+        it('CSS of Playback limit section', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioPlayerPage.playbackLimitLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(audioPlayerPage.playbackLimitInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        //Note: a11y covered in header file
+        //https://redmine.zeuslearning.com/issues/542861
+        it('When user adds decimal values or alphanumeric values then only numeric values should be displayed in the \'Playback limit\' input field', () => {
+            audioPlayerPage.steps.setPlaybackLimit('.10.0');
+            audioPlayerPage.steps.verifyPlaybackLimitInputFieldValue('100');
+            audioPlayerPage.steps.setPlaybackLimit('!@#ab5cd8e4');
+            audioPlayerPage.steps.verifyPlaybackLimitInputFieldValue('584');
+        });
+    });
+
+    describe('\'Customize UI controls for playback\' accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to audio player tool');
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+        });
+
+        it('\'Customize UI controls for playback\' label should be displayed along with chevron. \'Customize UI controls for playback\' accordion should be displayed in collapsed state by default.', () => {
+            utilities.verifyInnerText(audioPlayerPage.customizeUIControlAccordion(), 'Customize UI controls for playback');
+            utilities.verifyElementVisibilityState(audioPlayerPage.customizeUIControlAccordion(), 'visible');
+            audioPlayerPage.steps.verifyCustomizeUIControlAccordionChevronIcon();
+            audioPlayerPage.steps.verifyCustomizeUIControlAccordionCollapsedState();
+        });
+
+        it('User should be able to expand \'Customize UI controls for playback\' accordion and Play, Pause and Seek option should be displayed in \'Customize UI controls for playback\' accordion. By default all options should be selected', () => {
+            audioPlayerPage.steps.clickOnCustomizeUIControlAccordion();
+            audioPlayerPage.steps.verifyCustomizeUIControlAccordionExpandedState();
+            utilities.verifyInnerText(audioPlayerPage.customizeUIControlAccordion(), 'Customize UI controls for playback');
+            utilities.verifyInnerText(audioPlayerPage.customizeControlPlayButton(), 'Play');
+            utilities.verifyInnerText(audioPlayerPage.customizeControlPauseButton(), 'Pause');
+            utilities.verifyInnerText(audioPlayerPage.customizeControlSeekButton(), 'Seek');
+            utilities.verifyElementVisibilityState(audioPlayerPage.customizeControlPlayButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.customizeControlPauseButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.customizeControlSeekButton(), 'visible');
+            audioPlayerPage.steps.verifyCustomizeControlPlayButtonSelectedState();
+            audioPlayerPage.steps.verifyCustomizeControlPauseButtonSelectedState();
+            audioPlayerPage.steps.verifyCustomizeControlSeekButtonSelectedState();
+        });
+
+        it('CSS of \'Customize UI controls for playback\' accordion', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioPlayerPage.customizeUIControlAccordion().find('.accordion_label'), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            const optionButtons = [audioPlayerPage.customizeControlPlayButton(), audioPlayerPage.customizeControlPauseButton(), audioPlayerPage.customizeControlSeekButton()];
+            optionButtons.forEach(button => {
+                utilities.verifyCSS(button, {
+                    'background-color': css.color.activeButtons,
+                    'border': `1px solid ${css.color.activeButtons}`
+                });
+            });
+            utilities.verifyCSS(audioPlayerPage.customizeControlPlayButton().find('.ngie-toggle-button-icon svg'), {
+                'fill': css.color.secondaryBtnBg
+            });
+            utilities.verifyCSS(audioPlayerPage.customizeControlPauseButton().find('.ngie-toggle-button-icon svg'), {
+                'fill': css.color.secondaryBtnBg
+            });
+            utilities.verifyCSS(audioPlayerPage.customizeControlSeekButton().find('.ngie-toggle-button-icon svg'), {
+                'fill': css.color.secondaryBtnBg
+            });
+            utilities.verifyCSS(audioPlayerPage.customizeControlButtonLabel(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(audioPlayerPage.selectedButtonIcon().find('[data-name="Icon feather-check"]'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Customize UI controls for playback\' in expanded state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioPlayerPage.addAudioFileRadioButton().parents('.audio-player-resource'));
+        });
+
+        it('User should be able to deselect all options from \'Customize UI controls for playback\' accordion', () => {
+            audioPlayerPage.steps.clickOnCustomizeControlPlayButton();
+            audioPlayerPage.steps.clickOnCustomizeControlPauseButton();
+            audioPlayerPage.steps.clickOnCustomizeControlSeekButton();
+            audioPlayerPage.steps.verifyCustomizeControlPlayButtonDeselectedState();
+            audioPlayerPage.steps.verifyCustomizeControlPauseButtonDeselectedState();
+            audioPlayerPage.steps.verifyCustomizeControlSeekButtonDeselectedState();
+        });
+
+        it('CSS of deselected options in \'Customize UI controls for playback\' accordion', { tags: 'css' }, () => {
+            const optionButtons = [audioPlayerPage.customizeControlPlayButton(), audioPlayerPage.customizeControlPauseButton(), audioPlayerPage.customizeControlSeekButton()];
+            optionButtons.forEach(button => {
+                utilities.verifyCSS(button, {
+                    'background-color': css.color.defaultBackground,
+                    'border': `1px solid ${css.color.defaultDropdownBorder}`
+                });
+            });
+            utilities.verifyCSS(audioPlayerPage.customizeControlPlayButton().find('.ngie-toggle-button-icon svg'), {
+                'fill': css.color.secondaryBtn
+            });
+            utilities.verifyCSS(audioPlayerPage.customizeControlPauseButton().find('.ngie-toggle-button-icon svg'), {
+                'fill': css.color.secondaryBtn
+            });
+            utilities.verifyCSS(audioPlayerPage.customizeControlSeekButton().find('.ngie-toggle-button-icon svg'), {
+                'fill': css.color.secondaryBtn
+            });
+            utilities.verifyCSS(audioPlayerPage.customizeControlButtonLabel(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of deselected options in \'Customize UI controls for playback\' accordion', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioPlayerPage.addAudioFileRadioButton().parents('.audio-player-resource'));
+        });
+
+        it('User should be able to collapse \'Customize UI controls for playback\' accordion', () => {
+            audioPlayerPage.steps.clickOnCustomizeUIControlAccordion();
+            audioPlayerPage.steps.verifyCustomizeUIControlAccordionCollapsedState();
+        });
+    });
+
+    describe('\'Advanced player layout settings\' accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to audio player tool');
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+        });
+
+        it('\'Advanced player layout settings\' label should be displayed along with chevron. \'Advanced player layout settings\' accordion should be displayed in collapsed state by default.', () => {
+            utilities.verifyInnerText(audioPlayerPage.advancedPlayerSettingsAccordion(), 'Advanced player layout settings');
+            utilities.verifyElementVisibilityState(audioPlayerPage.advancedPlayerSettingsAccordion(), 'visible');
+            audioPlayerPage.steps.verifyAdvancedPlayerAccordionChevronIcon();
+            audioPlayerPage.steps.verifyAdvancedPlayerSettingsAccordionCollapsedState();
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/547232
+        it('User should be able to expand \'Advanced player layout settings\' accordion and \'Timer\', \'Progress bar\' and \'Volume control\' option should be displayed in \'Advanced player layout settings\' accordion. By default all options should be selected', () => {
+            audioPlayerPage.steps.clickOnAdvancedPlayerSettingsAccordion();
+            audioPlayerPage.steps.verifyAdvancedPlayerSettingsAccordionExpandedState();
+            utilities.verifyInnerText(audioPlayerPage.advancedPlayerTimerButton(), 'Timer');
+            utilities.verifyInnerText(audioPlayerPage.advancedPlayerProgressBarButton(), 'Progress bar');
+            utilities.verifyInnerText(audioPlayerPage.advancedPlayerVolumeControlButton(), 'Volume control');
+            utilities.verifyElementVisibilityState(audioPlayerPage.advancedPlayerTimerButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.advancedPlayerProgressBarButton(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.advancedPlayerVolumeControlButton(), 'visible');
+            audioPlayerPage.steps.verifyAdvancedPlayerTimerButtonSelectedState();
+            audioPlayerPage.steps.verifyAdvancedPlayerProgressBarButtonSelectedState();
+            audioPlayerPage.steps.verifyAdvancedPlayerVolumeControlButtonSelectedState();
+        });
+
+        it('CSS of \'Advanced player layout settings\' accordion', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioPlayerPage.advancedPlayerSettingsAccordion().find('.accordion_label'), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            const optionButtons = [audioPlayerPage.advancedPlayerTimerButton(), audioPlayerPage.advancedPlayerProgressBarButton(), audioPlayerPage.advancedPlayerVolumeControlButton()];
+            optionButtons.forEach(button => {
+                utilities.verifyCSS(button, {
+                    'background-color': css.color.activeButtons,
+                    'border': `1px solid ${css.color.activeButtons}`
+                });
+            });
+            utilities.verifyCSS(audioPlayerPage.advancedPlayerTimerButton().find('.ngie-toggle-button-icon svg'), {
+                'fill': css.color.secondaryBtnBg
+            });
+            utilities.verifyCSS(audioPlayerPage.advancedPlayerProgressBarButton().find('.ngie-toggle-button-icon svg'), {
+                'fill': css.color.secondaryBtnBg
+            });
+            utilities.verifyCSS(audioPlayerPage.advancedPlayerVolumeControlButton().find('.ngie-toggle-button-icon svg'), {
+                'fill': css.color.secondaryBtnBg
+            });
+            utilities.verifyCSS(audioPlayerPage.selectedButtonIcon().find('[data-name="Icon feather-check"]'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(audioPlayerPage.advancedPlayerButtonLabel(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'Advanced player layout settings\' in expanded state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioPlayerPage.addUrlRadioButton().parents('.audio-player-resource'));
+        });
+
+        it('User should be able to deselect all options from \'Advanced player layout settings\' accordion', () => {
+            audioPlayerPage.steps.clickOnAdvancedPlayerTimerButton();
+            audioPlayerPage.steps.clickOnAdvancedPlayerProgressBarButton();
+            audioPlayerPage.steps.clickOnAdvancedPlayerVolumeControlButton();
+            audioPlayerPage.steps.verifyAdvancedPlayerTimerButtonDeselectedState();
+            audioPlayerPage.steps.verifyAdvancedPlayerProgressBarButtonDeselectedState();
+            audioPlayerPage.steps.verifyAdvancedPlayerVolumeControlButtonDeselectedState();
+        });
+
+        it('CSS of deselected options in \'Advanced player layout settings\' accordion', { tags: 'css' }, () => {
+            const optionButtons = [audioPlayerPage.advancedPlayerTimerButton(), audioPlayerPage.advancedPlayerProgressBarButton(), audioPlayerPage.advancedPlayerVolumeControlButton()];
+            optionButtons.forEach(button => {
+                utilities.verifyCSS(button, {
+                    'background-color': css.color.defaultBackground,
+                    'border': `1px solid ${css.color.defaultDropdownBorder}`
+                });
+            });
+            utilities.verifyCSS(audioPlayerPage.advancedPlayerButtonLabel(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(audioPlayerPage.advancedPlayerTimerButton().find('.ngie-toggle-button-icon svg'), {
+                'fill': css.color.secondaryBtn
+            });
+            utilities.verifyCSS(audioPlayerPage.advancedPlayerProgressBarButton().find('.ngie-toggle-button-icon svg'), {
+                'fill': css.color.secondaryBtn
+            });
+            utilities.verifyCSS(audioPlayerPage.advancedPlayerVolumeControlButton().find('.ngie-toggle-button-icon svg'), {
+                'fill': css.color.secondaryBtn
+            });
+        });
+
+        it('Accessibility of deselected options in \'Advanced player layout settings\' accordion', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioPlayerPage.addAudioFileRadioButton().parents('.audio-player-resource'));
+        });
+
+        it('User should be able to collapse \'Advanced player layout settings\' accordion', () => {
+            audioPlayerPage.steps.clickOnAdvancedPlayerSettingsAccordion();
+            audioPlayerPage.steps.verifyAdvancedPlayerSettingsAccordionCollapsedState();
+        });
+    });
+
+    describe('\'Allow students to download the audio\' checkbox', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to audio player tool');
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+        });
+
+        it('\'Allow students to download the audio\' label and checkbox should be displayed. By default the \'Allow students to download the audio\' checkbox should be unchecked.', () => {
+            utilities.verifyInnerText(audioPlayerPage.allowStudentsToDownloadAudioLabel(), 'Allow students to download the audio');
+            utilities.verifyElementVisibilityState(audioPlayerPage.allowStudentsToDownloadAudioLabel(), 'visible');
+            audioPlayerPage.steps.verifyAllowStudentsToDownloadAudioCheckboxNotChecked();
+        });
+
+        it('CSS of \'Allow students to download the audio\' section - unchecked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioPlayerPage.allowStudentsToDownloadAudioCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        //Note: a11y covered in header file
+
+        it('The user should be able to check the \'Allow students to download the audio\' checkbox', () => {
+            audioPlayerPage.steps.checkUncheckAllowStudentsToDownloadAudioCheckbox();
+            audioPlayerPage.steps.verifyAllowStudentsToDownloadAudioCheckboxChecked();
+        });
+
+        it('CSS of \'Allow students to download the audio\' section - checked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioPlayerPage.allowStudentsToDownloadAudioCheckbox().parent('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Allow students to download the audio\' section - checked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioPlayerPage.addUrlRadioButton().parents('.audio-player-resource'));
+        });
+    });
+});

package/cypress/e2e/ILC/AudioPlayer/audioPlayerEditTabAddFeatureRadioButton.js

@@ -0,0 +1,218 @@
+import { audioPlayerPage } from "../../../pages";
+import utilities from "../../../support/helpers/utilities";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import constants from "../../../fixtures/constants";
+const css = Cypress.env('css');
+
+describe('Audio player: Edit tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('\'Add\' feature radio buttons', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to audio player tool');
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+        });
+
+        it('\'Add URL\' and \'Add audio file\' radio buttons should be displayed. By default \'Add URL\' button should be selected', () => {
+            utilities.verifyInnerText(audioPlayerPage.addUrlLabel(), 'Add URL');
+            utilities.verifyElementVisibilityState(audioPlayerPage.addUrlLabel(), 'visible');
+            audioPlayerPage.steps.verifyAddUrlCheckedState();
+            utilities.verifyInnerText(audioPlayerPage.addAudioFileLabel(), 'Add audio file');
+            utilities.verifyElementVisibilityState(audioPlayerPage.addAudioFileLabel(), 'visible');
+            audioPlayerPage.steps.verifyAddAudioFileUncheckedState();
+        });
+
+        it('CSS of Add feature radio buttons', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioPlayerPage.addUrlRadioButton().parent().find('svg'), {
+                'fill': css.color.secondaryBtnActive
+            });
+            utilities.verifyCSS(audioPlayerPage.addAudioFileRadioButton().parent().find('svg path'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+            utilities.verifyCSS(audioPlayerPage.addUrlLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(audioPlayerPage.addAudioFileLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        //Note: a11y covered in header file
+    });
+
+    describe('\'Add URL\' section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to audio player tool');
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+        });
+
+        it('\'Source URL\' label and input field should be displayed. By default, the source url input field should be empty', () => {
+            utilities.verifyInnerText(audioPlayerPage.sourceUrlLabel(), 'Source URL');
+            utilities.verifyElementVisibilityState(audioPlayerPage.sourceUrlLabel(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.sourceUrlInputField(), 'visible');
+            utilities.verifyInnerText(audioPlayerPage.sourceUrlInputField(), '');
+        });
+
+        it('CSS of \'Add audio URL\' Section', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioPlayerPage.sourceUrlLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(audioPlayerPage.sourceUrlInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('When user focuses in and out of the \'Source URL\' input field, \'Error: Source URL is required.\' error message should be displayed below \'Source URL\' input field.', () => {
+            audioPlayerPage.steps.focusInAndFocusOutOfSourceURLInputField();
+            utilities.verifyInnerText(audioPlayerPage.errorMessage(), 'Error: Source URL is required.');
+            utilities.verifyElementVisibilityState(audioPlayerPage.errorMessage(), 'visible');
+        });
+
+        audioPlayerPage.tests.verifyCSSAnda11yOfErrorMessage();
+
+        //http://redmine.zeuslearning.com/issues/542695
+        it('When user adds a MP3 file in \'Source URL\' input field, \'Error: Source URL is required.\' validation message should disappear', () => {
+            audioPlayerPage.steps.enterTextInSourceURLInputField(constants.sampleMp3Link);
+            utilities.verifyElementVisibilityState(audioPlayerPage.errorMessage(), 'hidden');
+        });
+
+        it('When user adds invalid file format URL in \'Source URL\' input field, \'Error: The provided URL does not link to a supported audio file. Please enter a URL for a MP3, WAV, AAC file.\' validation message should be displayed', () => {
+            audioPlayerPage.steps.clearTextInSourceURLInputField();
+            audioPlayerPage.steps.enterTextInSourceURLInputField(constants.foxImageLink);
+            utilities.verifyInnerText(audioPlayerPage.errorMessage(), 'Error: The provided URL does not link to a supported audio file. Please enter a URL for a MP3, WAV, AAC file.');
+            utilities.verifyElementVisibilityState(audioPlayerPage.errorMessage(), 'visible');
+        });
+
+        audioPlayerPage.tests.verifyCSSAnda11yOfErrorMessage();
+
+        it('When user adds valid file URL in \'Source URL\' input field, \'Error: The provided URL does not link to a supported audio file. Please enter a URL for a MP3, WAV, AAC file.\' validation message should disappear', () => {
+            audioPlayerPage.steps.clearTextInSourceURLInputField();
+            audioPlayerPage.steps.enterTextInSourceURLInputField(constants.sampleMp3Link);
+            utilities.verifyElementVisibilityState(audioPlayerPage.errorMessage(), 'hidden');
+        });
+
+        it('When user adds invalid text in \'Source URL\' input field, \'Error: The provided URL does not link to a supported audio file. Please enter a URL for a MP3, WAV, AAC file.\' validation message should be displayed', () => {
+            audioPlayerPage.steps.clearTextInSourceURLInputField();
+            audioPlayerPage.steps.enterTextInSourceURLInputField('Invalid text');
+            utilities.verifyInnerText(audioPlayerPage.errorMessage(), 'Error: The provided URL does not link to a supported audio file. Please enter a URL for a MP3, WAV, AAC file.');
+            utilities.verifyElementVisibilityState(audioPlayerPage.errorMessage(), 'visible');
+        });
+    });
+
+    describe('\'Add audio file\' section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to audio player tool');
+            audioPlayerPage.steps.navigateToCreateResource('audio player');
+        });
+
+        it('On selecting \'Add audio file\' radio button, the \'Add URL\' radio button should get unchecked', () => {
+            audioPlayerPage.steps.clickOnAddAudioFileRadioButton();
+            audioPlayerPage.steps.verifyAddAudioFileCheckedState();
+            audioPlayerPage.steps.verifyAddUrlUncheckedState();
+        });
+
+        it('\'Source URL\' label and input field should not be displayed', () => {
+            utilities.verifyElementVisibilityState(audioPlayerPage.sourceUrlLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(audioPlayerPage.sourceUrlInputField(), 'notExist');
+        });
+
+        it('\'Upload\' label should be displayed', () => {
+            utilities.verifyInnerText(audioPlayerPage.uploadLabel(), 'Upload');
+            utilities.verifyElementVisibilityState(audioPlayerPage.uploadLabel(), 'visible');
+        });
+
+        it('\'File name\' label should be displayed', () => {
+            utilities.verifyInnerText(audioPlayerPage.fileNameLabel(), 'File name');
+            utilities.verifyElementVisibilityState(audioPlayerPage.fileNameLabel(), 'visible');
+        });
+
+        it('\'Choose file\' button should be displayed', () => {
+            utilities.verifyInnerText(audioPlayerPage.chooseFileButton(), 'Choose file');
+            utilities.verifyElementVisibilityState(audioPlayerPage.chooseFileButton(), 'visible');
+        });
+
+        it('By default \'No file chosen\' text should be displayed below the \'File name\' label.', () => {
+            utilities.verifyInnerText(audioPlayerPage.noFileChosenLabel(), 'No file chosen');
+            utilities.verifyElementVisibilityState(audioPlayerPage.noFileChosenLabel(), 'visible');
+        });
+
+        it('CSS of \'Add audio file\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(audioPlayerPage.uploadLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(audioPlayerPage.fileNameLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(audioPlayerPage.noFileChosenLabel(), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(audioPlayerPage.chooseFileButton(), {
+                'background-color': css.color.transparent,
+                'border': `1px solid ${css.color.secondaryBtnBorder}`,
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'Add audio file\' section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioPlayerPage.addAudioFileRadioButton().parents('.audio-player-resource'));
+        });
+
+        it('When the user adds the audio file and file upload is inprogress, file name and progress bar should be displayed below \'File name\' label. Progress bar should disappear once file is uploaded', () => {
+            audioPlayerPage.steps.uploadFile('uploads/sample.mp3');
+            utilities.verifyElementVisibilityState(audioPlayerPage.fileUploadProgressBar(), 'visible');
+            utilities.verifyInnerText(audioPlayerPage.uploadedFileNameLabel(), 'sample.mp3');
+            utilities.verifyElementVisibilityState(audioPlayerPage.uploadedFileNameLabel(), 'visible');
+            utilities.verifyElementVisibilityState(audioPlayerPage.fileUploadProgressBar(), 'hidden');
+        });
+
+        it('CSS of progress bar and file name when file upload is in progress', { tags: 'css' }, () => {
+            audioPlayerPage.steps.uploadFile('uploads/sample1.mp3');
+            audioPlayerPage.fileUploadProgressBar()
+                .verifyPseudoClassBeforeProperty('background-color', css.color.fileUploadProgressBarFill);
+        });
+
+        it('Accessibility of progress bar and file name when file upload is in progress', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(audioPlayerPage.addAudioFileRadioButton().parents('.audio-player-resource'));
+        });
+
+        it('When user clicks on \'Choose file\' button again and upload another audio file, previously uploaded audio file should get replaced with new audio file', () => {
+            audioPlayerPage.steps.uploadFile('uploads/sample2.mp3');
+            utilities.verifyInnerText(audioPlayerPage.uploadedFileNameLabel(), 'sample2.mp3');
+            utilities.verifyElementVisibilityState(audioPlayerPage.uploadedFileNameLabel(), 'visible');
+        });
+
+        it('When the user uploads a file that is not supported, following error message should be displayed: \'Error: The file type is not supported. Please upload a file with the following supported formats: MP3, WAV, AAC.\'', () => {
+            audioPlayerPage.steps.uploadFile('uploads/sample.mp4')
+            utilities.verifyInnerText(audioPlayerPage.errorMessage(), 'Error: The file type is not supported. Please upload a file with the following supported formats: MP3, WAV, AAC.');
+            utilities.verifyElementVisibilityState(audioPlayerPage.errorMessage(), 'visible');
+        });
+
+        audioPlayerPage.tests.verifyCSSAnda11yOfErrorMessage();
+
+        it('When user upload supported format of audio file, error message should disappear', () => {
+            audioPlayerPage.steps.uploadFile('uploads/sample2.mp3');
+            utilities.verifyElementVisibilityState(audioPlayerPage.errorMessage(), 'hidden');
+        });
+    });
+});