itemengine-cypress-automation 1.0.252 → 1.0.253

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

@@ -0,0 +1,249 @@
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { multipleSelectionPage } from "../../../pages";
+import constants from "../../../fixtures/constants";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const customizeUIControlButtons = [multipleSelectionPage.customizeControlPauseButton, multipleSelectionPage.customizeControlSeekButton, multipleSelectionPage.customizeControlPlayBackSpeedButton, multipleSelectionPage.customizeControlAddPinButton, multipleSelectionPage.customizeControlForwardBackwardButton];
+const customizeUIControlButtonsLabel = ['Pause', 'Seek', 'Playback speed', 'Add pin', 'Forward/ backward'];
+
+describe('Audio player: Edit tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Student view settings section', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.focusInQuestionInstructionsInputField();
+            multipleSelectionPage.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+        });
+
+        it('\'Student View Settings\' label, \'Customize player layout settings\' dropdown along with \'Allow students to download the audio\' and \'Limit play attempts\' check box should be displayed. By default, checkboxes should be unselected', () => {
+            utilities.verifyElementVisibilityState(multipleSelectionPage.studentViewSettingLabel(), 'visible');
+            utilities.verifyInnerText(multipleSelectionPage.studentViewSettingLabel(), 'Student view settings');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.customizePlayerLayoutSettings(), 'visible');
+            utilities.verifyInnerText(multipleSelectionPage.customizePlayerLayoutSettings(), 'Customize player layout settings');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.allowStudentsToDownloadAudioLabel(), 'visible');
+            utilities.verifyInnerText(multipleSelectionPage.allowStudentsToDownloadAudioLabel(), 'Allow students to download the audio');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.limitPlayAttemptsLabel(), 'visible');
+            utilities.verifyInnerText(multipleSelectionPage.limitPlayAttemptsLabel(), 'Limit play attempts');
+        });
+
+        it('CSS of Student view settings section', { tags: 'css' }, () => {
+            utilities.verifyCSS(multipleSelectionPage.studentViewSettingLabel(), {
+                'color': 'rgb(72, 72, 72)',
+                'font-size': '12px',
+                'font-weight': '700'
+            });
+            utilities.verifyCSS(multipleSelectionPage.customizePlayerLayoutSettings(), {
+                'color': 'rgb(0, 0, 0)',
+                'font-size': '12px',
+                'font-weight': '400'
+            });
+            utilities.verifyCSS(multipleSelectionPage.allowStudentsToDownloadAudioLabel(), {
+                'color': 'rgba(0, 0, 0, 0.87)',
+                'font-size': '12px',
+                'font-weight': '400'
+            });
+            utilities.verifyCSS(multipleSelectionPage.limitPlayAttemptsLabel(), {
+                'color': 'rgba(0, 0, 0, 0.87)',
+                'font-size': '12px',
+                'font-weight': '400'
+            });
+        });
+    });
+
+    describe('\'Customize player layout settings\' accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.focusInQuestionInstructionsInputField();
+            multipleSelectionPage.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+        });
+
+        it('\'Customize player layout settings\' label should be displayed along with chevron. The accordion should be displayed in collapsed state by default.', () => {
+            utilities.verifyInnerText(multipleSelectionPage.customizeUIControlAccordionLabel(), 'Customize player layout settings');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.customizeUIControlAccordionLabel(), 'visible');
+            multipleSelectionPage.steps.verifyCustomizeUIControlAccordionChevronIcon();
+            multipleSelectionPage.steps.verifyCustomizeUIControlAccordionCollapsedState();
+        });
+
+        it('CSS of \'Customize player layout settings\' section if accordion is in collapse state', { tags: 'css' }, () => {
+            utilities.verifyCSS(multipleSelectionPage.customizeUIControlAccordionLabel(), {
+                'color': 'rgb(0, 0, 0)',
+                'font-size': '12px',
+                'font-weight': '400'
+            });
+            utilities.verifyCSS(multipleSelectionPage.customizeUIControlsForPlaybackChevronIcon(), {
+                'fill': 'rgb(0, 0, 0)',
+            });
+        });
+
+        it('User should be able to expand \'Customize player layout settings\' accordion and Pause, Seek, Play back speed, Add Pin and Forward/Backward option should be displayed in \'Customize player layout settings\' accordion. By default all options should be selected and \'Uncheck all\' button should be present in active state', () => {
+            multipleSelectionPage.steps.clickOnCustomizeUIControlAccordion();
+            multipleSelectionPage.steps.verifyCustomizeUIControlAccordionExpandedState();
+            utilities.verifyElementVisibilityState(multipleSelectionPage.unCheckAllButton(), 'visible');
+            utilities.verifyInnerText(multipleSelectionPage.unCheckAllButton(), 'Uncheck all');
+            utilities.verifyElementNotDisabled(multipleSelectionPage.unCheckAllButton());
+            utilities.verifyInnerText(multipleSelectionPage.customizeUIControlAccordion(), 'Customize player layout settings');
+            customizeUIControlButtons.forEach((button, index) => {
+                utilities.verifyInnerText(button(), customizeUIControlButtonsLabel[index]);
+                utilities.verifyElementVisibilityState(button(), 'visible');
+            });
+            multipleSelectionPage.steps.verifyCustomizeControlPauseButtonSelectedState();
+            multipleSelectionPage.steps.verifyCustomizeControlSeekButtonSelectedState();
+            multipleSelectionPage.steps.verifyCustomizeControlPlayBackSpeedButtonSelectedState();
+            multipleSelectionPage.steps.verifyCustomizeControlAddPinButtonSelectedState();
+            multipleSelectionPage.steps.verifyCustomizeControlForwardBackwardButtonSelectedState();
+        });
+
+        it('CSS of options in \'Customize player layout settings\' section', { tags: 'css' }, () => {
+            customizeUIControlButtons.forEach((button) => {
+                utilities.verifyCSS(button(), {
+                    'color': 'rgb(0, 0, 0)',
+                    'font-size': '14px',
+                    'font-weight': '500'
+                });
+                utilities.verifyCSS(button().find('svg'), {
+                    'fill': 'rgb(0, 0, 0)'
+                });
+                utilities.verifyCSS(button()
+                    .find('div[class*="SelectionButtonstyles__SelectedWrapper"] svg'), {
+                    'fill': 'rgb(0, 117, 255)'
+                });
+            });
+        });
+
+        it('Accessibility of options in \'Customize player layout settings\' section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(multipleSelectionPage.customizeUIControlAccordion().parent('div'));
+        });
+
+        it('User should be able to deselect all options from \'Customize player layout settings\' accordion and \'Uncheck all\' button will become disabled', () => {
+            multipleSelectionPage.steps.clickOnCustomizeControlPauseButton();
+            multipleSelectionPage.steps.clickOnCustomizeControlSeekButton();
+            multipleSelectionPage.steps.clickOnCustomizeControlPlayBackSpeedButton();
+            multipleSelectionPage.steps.clickOnCustomizeControlAddPinButton();
+            multipleSelectionPage.steps.clickOnCustomizeControlForwardBackwardButton();
+            multipleSelectionPage.steps.verifyCustomizeControlPauseButtonDeselectedState();
+            multipleSelectionPage.steps.verifyCustomizeControlSeekButtonDeselectedState();
+            multipleSelectionPage.steps.verifyCustomizeControlPlayBackSpeedButtonDeselectedState();
+            multipleSelectionPage.steps.verifyCustomizeControlAddPinButtonDeselectedState();
+            multipleSelectionPage.steps.verifyCustomizeControlForwardBackwardButtonDeselectedState();
+            multipleSelectionPage.steps.verifyUnCheckAllButtonInDisabledState();
+        });
+
+        it('User should be able to deselect all options from \'Customize player layout settings\' accordion using the \'Uncheck all\' button', () => {
+            multipleSelectionPage.steps.clickOnCustomizeControlPauseButton();
+            multipleSelectionPage.steps.clickOnCustomizeControlSeekButton();
+            multipleSelectionPage.steps.clickOnCustomizeControlPlayBackSpeedButton();
+            multipleSelectionPage.steps.clickOnCustomizeControlAddPinButton();
+            multipleSelectionPage.steps.clickOnCustomizeControlForwardBackwardButton();
+            utilities.verifyElementNotDisabled(multipleSelectionPage.unCheckAllButton());
+            multipleSelectionPage.steps.clickOnUnCheckAllButton();
+            multipleSelectionPage.steps.verifyCustomizeControlPauseButtonDeselectedState();
+            multipleSelectionPage.steps.verifyCustomizeControlSeekButtonDeselectedState();
+            multipleSelectionPage.steps.verifyCustomizeControlPlayBackSpeedButtonDeselectedState();
+            multipleSelectionPage.steps.verifyCustomizeControlAddPinButtonDeselectedState();
+            multipleSelectionPage.steps.verifyCustomizeControlForwardBackwardButtonDeselectedState();
+            multipleSelectionPage.steps.verifyUnCheckAllButtonInDisabledState();
+        });
+
+        it('CSS of deselected options in \'Customize player layout settings\' accordion', { tags: 'css' }, () => {
+            customizeUIControlButtons.forEach((button) => {
+                utilities.verifyCSS(button(), {
+                    'color': 'rgb(0, 0, 0)',
+                    'font-size': '14px',
+                    'font-weight': '500'
+                });
+            });
+        });
+
+        it('Accessibility of deselected options in \'Customize player layout settings\' accordion', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(multipleSelectionPage.customizeUIControlAccordion().parents('div'));
+        });
+
+        it('User should be able to collapse \'Customize player layout settings\' accordion.', () => {
+            multipleSelectionPage.steps.clickOnCustomizeUIControlAccordion();
+            multipleSelectionPage.steps.verifyCustomizeUIControlAccordionCollapsedState();
+        });
+    });
+
+    describe('Playback Limit Section', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.focusInQuestionInstructionsInputField();
+            multipleSelectionPage.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+            multipleSelectionPage.steps.clickOnLimitPlayAttempts();
+        });
+
+        it('\'Playback Limit\' label and empty input field should be displayed', () => {
+            utilities.verifyInnerText(multipleSelectionPage.playbackLimitLabel(), 'Playback Limit');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.playbackLimitLabel(), 'visible');
+            utilities.verifyInnerText(multipleSelectionPage.playbackLimitInputField(), '');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.playbackLimitInputField(), 'visible');
+        });
+
+        it('When the user focuses in and out of the \'Playback Limit\' input field, no error message should be displayed', () => {
+            multipleSelectionPage.steps.focusInAndFocusOutOfPlaybackLimitInputField();
+            utilities.verifyElementVisibilityState(multipleSelectionPage.uploadFileSectionErrorMessage(), 'hidden');
+        })
+
+        it('CSS of Playback Limit section', { tags: 'css' }, () => {
+            utilities.verifyCSS(multipleSelectionPage.playbackLimitLabel(), {
+                'color': 'rgb(0, 0, 0)',
+                'font-size': '12px',
+                'font-weight': '400'
+            });
+            utilities.verifyCSS(multipleSelectionPage.playbackLimitInputField(), {
+                'color': 'rgba(0, 0, 0, 0.87)',
+                'font-size': '12px',
+                'font-weight': '400'
+            });
+        });
+
+        //Note: Accessibility is already covered in header file
+
+        it('When user adds decimal values or alphanumeric values then only numeric values should be displayed in the \'Playback Limit\' input field', () => {
+            multipleSelectionPage.steps.setPlaybackLimit('.1!@#ab0.e0');
+            multipleSelectionPage.steps.verifyPlaybackLimitInputFieldValue('100');
+        });
+
+        it('Accessibility of Playback Limit section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(multipleSelectionPage.playbackLimitLabel().parents('[class*="AudioPlayerFormstyles__PlaybackLimit"]'));
+        });
+    });
+
+    describe('\'Allow students to download the audio\' checkbox', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.focusInQuestionInstructionsInputField();
+            multipleSelectionPage.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+        });
+
+        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(multipleSelectionPage.allowStudentsToDownloadAudioLabel(), 'Allow students to download the audio');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.allowStudentsToDownloadAudioLabel(), 'visible');
+            multipleSelectionPage.steps.verifyAllowStudentsToDownloadAudioCheckboxNotChecked();
+        });
+
+        it('CSS of \'Allow students to download the audio\' section - unchecked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(multipleSelectionPage.allowStudentsToDownloadAudioLabel().parent().find('svg'), {
+                'color': 'rgb(13, 71, 161)'
+            });
+        });
+
+        //Note: Accessibility is already covered in header file
+
+        it('The user should be able to check the \'Allow students to download the audio\' checkbox', () => {
+            multipleSelectionPage.steps.checkUncheckAllowStudentsToDownloadAudioCheckbox();
+            multipleSelectionPage.steps.verifyAllowStudentsToDownloadAudioCheckboxChecked();
+        });
+    });
+});

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

@@ -0,0 +1,164 @@
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { multipleSelectionPage } from "../../../pages";
+import constants from "../../../fixtures/constants";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Audio player: Header section, buttons and saving item', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Header section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.focusInQuestionInstructionsInputField();
+        });
+
+        multipleSelectionPage.tests.verifyCkEditorToolHeader('Audio Player');
+    });
+
+    describe('Audio player popup: OK button', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.focusInQuestionInstructionsInputField();
+            multipleSelectionPage.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+        });
+
+        describe('OK button Contents', () => {
+            it('\'OK\' button should be displayed in popup.', () => {
+                utilities.verifyInnerText(multipleSelectionPage.okButton(), 'OK');
+                utilities.verifyElementVisibilityState(multipleSelectionPage.okButton(), 'visible');
+            });
+
+            it('CSS of \'OK\' button', { tags: 'css' }, () => {
+                utilities.verifyCSS(multipleSelectionPage.okButton(), {
+                    'background-color': 'rgb(13, 71, 161)'
+                });
+                utilities.verifyCSS(multipleSelectionPage.okButton().find('p'), {
+                    'color': 'rgb(255, 255, 255)',
+                    'font-size': '12px',
+                    'font-weight': '700'
+                });
+            });
+        });
+
+        describe('Validation error messages', () => {
+            it('When user switches to \'Add Audio URL\' and has made no edits and clicks on \'OK\' button, user should get \'Error: Source URL is required.\' error message below \'Source URL\' input field and audio player popup should not close', () => {
+                multipleSelectionPage.steps.clickOnAddUrlRadioButton();
+                multipleSelectionPage.steps.clickOnOKButton();
+                utilities.verifyElementVisibilityState(multipleSelectionPage.sourceUrlInputFieldErrorMessage(), 'visible');
+                utilities.verifyInnerText(multipleSelectionPage.sourceUrlInputFieldErrorMessage(), 'Error: Source URL is required.');
+                utilities.verifyElementVisibilityState(multipleSelectionPage.ckEditorToolDialogBox(), 'visible');
+            });
+
+            it('\'Error: Source URL is required.\' validation error message should disappear when required input field is filled', () => {
+                multipleSelectionPage.steps.enterTextInSourceURLInputField(constants.sampleMp3Link);
+                utilities.verifyElementVisibilityState(multipleSelectionPage.sourceUrlInputFieldErrorMessage(), 'hidden');
+            });
+
+            it('When user adds invalid source URL in \'Source URL\' input field and clicks on \'OK\' button, validation error message should be displayed below source URL input field and popup should not close', () => {
+                multipleSelectionPage.steps.clearTextInSourceURLInputField();
+                multipleSelectionPage.steps.enterTextInSourceURLInputField(constants.sampleJPEGLink);
+                multipleSelectionPage.steps.clickOnOKButton();
+                utilities.verifyInnerText(multipleSelectionPage.sourceUrlInputFieldErrorMessage(), 'Error: The provided URL does not link to a supported audio file. Please enter a URL for a MP3, WAV, AAC file.');
+                utilities.verifyElementVisibilityState(multipleSelectionPage.ckEditorToolDialogBox(), 'visible');
+            });
+
+            it('When user adds valid source URL in \'Source URL\' input field and clicks on \'OK\' button, validation error message should disappear, audio player popup should close and audio player should be displayed in prompt field', () => {
+                multipleSelectionPage.steps.clearTextInSourceURLInputField();
+                multipleSelectionPage.steps.enterTextInSourceURLInputField(constants.sampleMp3Link);
+                utilities.verifyElementVisibilityState(multipleSelectionPage.sourceUrlInputFieldErrorMessage(), 'hidden');
+                multipleSelectionPage.steps.clickOnOKButton();
+                utilities.verifyElementVisibilityState(multipleSelectionPage.ckEditorToolDialogBox(), 'notExist');
+                utilities.verifyElementVisibilityState(multipleSelectionPage.ckEditorToolAudioPlayerBlock(), 'visible');
+            });
+
+            it('When user selects \'Upload audio file\' radio button and clicks on \'OK\' button without uploading an audio file, validation error message should be displayed below \'Upload\' section and audio player popup should not close', () => {
+                multipleSelectionPage.steps.clearInPromptInputField();
+                multipleSelectionPage.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+                multipleSelectionPage.steps.clickOnAddAudioRadioButton();
+                multipleSelectionPage.steps.clickOnOKButton();
+                utilities.verifyInnerText(multipleSelectionPage.uploadFileSectionErrorMessage(), 'Error: Audio file is required.');
+                utilities.verifyElementVisibilityState(multipleSelectionPage.ckEditorToolDialogBox(), 'visible');
+            });
+
+            it('When user uploads valid audio file in \'Upload\' section, \'Error: Audio file is required.\' validation error message should disappear', () => {
+                multipleSelectionPage.steps.uploadFile('sample.mp3');
+                utilities.verifyElementVisibilityState(multipleSelectionPage.uploadFileSectionErrorMessage(), 'hidden');
+            });
+
+            it('When the user uploads an audio and transcript file that is not supported and clicks on \'OK\' button, validation error message should be displayed and popup should not close', () => {
+                multipleSelectionPage.steps.uploadFile('sample.mp4');
+                multipleSelectionPage.steps.uploadTranscriptFile('sample.doc');
+                multipleSelectionPage.steps.clickOnOKButton();
+                utilities.verifyInnerText(multipleSelectionPage.uploadFileSectionErrorMessage(), 'Error: The file type is not supported. Please upload a file with the following supported formats: MP3, WAV, AAC.');
+                utilities.verifyInnerText(multipleSelectionPage.uploadTranscriptFileSectionErrorMessage(), 'Error: The file type is not supported. Please upload a file with the following supported formats: TXT.');
+                utilities.verifyElementVisibilityState(multipleSelectionPage.ckEditorToolDialogBox(), 'visible');
+            });
+
+            it('When user uploads valid audio file in \'Upload\' section and clicks on \'OK\' button, audio player popup should close and audio player should be displayed in prompt field', () => {
+                multipleSelectionPage.steps.uploadFile('sample.mp3');
+                utilities.verifyElementVisibilityState(multipleSelectionPage.fileUploadProgressBar(), 'hidden');
+                multipleSelectionPage.steps.uploadTranscriptFile('sample.txt');
+                multipleSelectionPage.steps.clickOnOKButton();
+                utilities.verifyElementVisibilityState(multipleSelectionPage.ckEditorToolDialogBox(), 'notExist');
+                utilities.verifyElementVisibilityState(multipleSelectionPage.ckEditorToolAudioPlayerBlock(), 'visible');
+            });
+    
+            it('Placeholder block should be displayed for audio player along with placeholder text \'Audio Player - Bar Style\' and icon. On hovering over audio player block, drag handle should be displayed for each audio player present in prompt field.', () => {
+                utilities.verifyInnerText(multipleSelectionPage.ckEditorToolAudioPlayerBlock(), 'Audio Player - Bar Style');
+                utilities.verifyElementVisibilityState(multipleSelectionPage.ckEditorToolAudioPlayerBlock().find('.audioplayer-icon'), 'visible');
+                utilities.hoverOverElement(multipleSelectionPage.ckEditorToolAudioPlayerBlock());
+                utilities.verifyElementVisibilityState(multipleSelectionPage.ckEditorToolAudioPlayerDragHandle(), 'visible');
+            });
+    
+            it('CSS of audio player block displayed in prompt field', { tags: 'css' }, () => {
+                utilities.verifyCSS(multipleSelectionPage.ckEditorToolAudioPlayerBlock().find('.audioplayer-type'), {
+                    'background-color': 'rgb(148, 148, 148)',
+                    'color': 'rgb(0, 0, 46)',
+                    'font-size': '12px',
+                    'font-weight': '400'
+                });
+                utilities.verifyCSS(multipleSelectionPage.ckEditorToolAudioPlayerBlock().find('.audioplayer-icon'), {
+                    'background-color': 'rgb(148, 148, 148)',
+                    'color': 'rgb(0, 0, 46)',
+                    'font-size': '16px',
+                    'font-weight': '400'
+                });
+            });
+        });
+    });
+
+    describe('Audio player popup: Cancel button', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.focusInQuestionInstructionsInputField();
+            multipleSelectionPage.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+        });
+        it('\'Cancel\' button should be displayed in popup.', () => {
+            utilities.verifyInnerText(multipleSelectionPage.cancelButton(), 'Cancel');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.cancelButton(), 'visible');
+        });
+
+        it('CSS of \'Cancel\' button', { tags: 'css' }, () => {
+            utilities.verifyCSS(multipleSelectionPage.cancelButton(), {
+                'background-color': 'rgb(248, 248, 248)',
+                'color': 'rgb(72, 72, 72)',
+                'font-size': '12px',
+                'font-weight': '700'
+            });
+        });
+
+        it(`When user clicks on cancel present in popup, 'Audio Player' popup should close.`, () => {
+            multipleSelectionPage.steps.clickOnCancelButton();
+            utilities.verifyElementVisibilityState(multipleSelectionPage.ckEditorToolDialogBox(), 'notExist');
+        });
+    });
+});