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

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

@@ -0,0 +1,231 @@
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { multipleSelectionPage } from "../../../pages";
+import constants from "../../../fixtures/constants";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Audio player: Edit tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('\'Add\' feature radio buttons', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.focusInQuestionInstructionsInputField();
+            multipleSelectionPage.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+        });
+
+        it('\'Upload audio file\' and \'Add audio URL\' radio buttons should be displayed. By default \'Add audio URL\' button should be selected', () => {
+            utilities.verifyInnerText(multipleSelectionPage.addUrlButton(), 'Add audio URL');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.addUrlButton(), 'visible');
+            multipleSelectionPage.steps.verifyAddAudioURLUncheckedState();
+            utilities.verifyInnerText(multipleSelectionPage.addAudioButton(), 'Upload audio file');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.addAudioButton(), 'visible');
+            multipleSelectionPage.steps.verifyUploadAudioFileCheckedState();
+        });
+
+        it('CSS of Add feature radio buttons', { tags: 'css' }, () => {
+            utilities.verifyCSS(multipleSelectionPage.addAudioURLRadioButton().parent().find('svg'), {
+                'fill': 'rgb(118, 118, 118)'
+            });
+            utilities.verifyCSS(multipleSelectionPage.uploadAudioFileRadioButton().parent().find('svg'), {
+                'fill': 'rgb(0, 117, 255)'
+            });
+            utilities.verifyCSS(multipleSelectionPage.addUrlButton(), {
+                'color': 'rgb(0, 0, 0)',
+                'font-size': '12px',
+                'font-weight': '400'
+            });
+            utilities.verifyCSS(multipleSelectionPage.addAudioButton(), {
+                'color': 'rgb(0, 0, 0)',
+                'font-size': '12px',
+                'font-weight': '400'
+            });
+        });
+
+        //Note: Accessibility is already covered in header file
+    });
+
+    describe('\'Add Audio URL\' section', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.focusInQuestionInstructionsInputField();
+            multipleSelectionPage.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+            multipleSelectionPage.steps.clickOnAddUrlRadioButton();
+        });
+
+        it('\'Source URL\' label and input field should be displayed. By default, the source url input field should be empty', () => {
+            utilities.verifyInnerText(multipleSelectionPage.sourceUrlLabel(), 'Source URL');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.sourceUrlLabel(), 'visible');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.sourceUrlInputField(), 'visible');
+            utilities.verifyInnerText(multipleSelectionPage.sourceUrlInputField(), '');
+        });
+
+        it('CSS of \'Add audio URL\' Section', { tags: 'css' }, () => {
+            utilities.verifyCSS(multipleSelectionPage.sourceUrlLabel(), {
+                'color': 'rgb(0, 0, 0)',
+                'font-size': '12px',
+                'font-weight': '400'
+            });
+            utilities.verifyCSS(multipleSelectionPage.sourceUrlInputField(), {
+                'color': 'rgba(0, 0, 0, 0.87)',
+                'font-size': '12px',
+                'font-weight': '400'
+            });
+        });
+
+        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.', () => {
+            multipleSelectionPage.steps.focusInAndFocusOutOfSourceURLInputField();
+            utilities.verifyInnerText(multipleSelectionPage.sourceUrlInputFieldErrorMessage(), 'Error: Source URL is required.');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.sourceUrlInputFieldErrorMessage(), 'visible');
+        });
+
+        multipleSelectionPage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When user adds a MP3 file in \'Source URL\' input field, \'Error: Source URL is required.\' validation message should disappear', () => {
+            multipleSelectionPage.steps.enterTextInSourceURLInputField(constants.sampleMp3Link);
+            utilities.verifyElementVisibilityState(multipleSelectionPage.sourceUrlInputFieldErrorMessage(), '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', () => {
+            multipleSelectionPage.steps.clearTextInSourceURLInputField();
+            multipleSelectionPage.steps.enterTextInSourceURLInputField(constants.foxImageLink);
+            utilities.verifyElementVisibilityState(multipleSelectionPage.sourceUrlInputFieldErrorMessage(), 'visible');
+            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.');
+        });
+
+        multipleSelectionPage.tests.verifyErrorMessageCSSAndA11y();
+
+        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', () => {
+            multipleSelectionPage.steps.clearTextInSourceURLInputField();
+            multipleSelectionPage.steps.enterTextInSourceURLInputField(constants.sampleMp3Link);
+            utilities.verifyElementVisibilityState(multipleSelectionPage.sourceUrlInputFieldErrorMessage(), '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', () => {
+            multipleSelectionPage.steps.clearTextInSourceURLInputField();
+            multipleSelectionPage.steps.enterTextInSourceURLInputField('Invalid text');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.sourceUrlInputFieldErrorMessage(), 'visible');
+            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.');
+        });
+    });
+
+    describe('\'Upload audio file\' section', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.focusInQuestionInstructionsInputField();
+            multipleSelectionPage.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+        });
+
+        it('On selecting \'Upload audio file\' radio button, the \'Add Audio URL\' radio button should get unchecked', () => {
+            multipleSelectionPage.steps.clickOnUploadAudioFileRadioButton();
+            multipleSelectionPage.steps.verifyUploadAudioFileCheckedState();
+            multipleSelectionPage.steps.verifyAddAudioURLUncheckedState();
+        });
+
+        it('\'Source URL\' label and input field should not be displayed', () => {
+            utilities.verifyElementVisibilityState(multipleSelectionPage.sourceUrlLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.sourceUrlInputField(), 'notExist');
+        });
+
+        it('\'Upload\' label should be displayed', () => {
+            utilities.verifyInnerText(multipleSelectionPage.uploadLabel(), 'Upload');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.uploadLabel(), 'visible');
+        });
+
+        it('\'File name\' label should be displayed', () => {
+            utilities.verifyInnerText(multipleSelectionPage.fileNameLabel(), 'File name');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.fileNameLabel(), 'visible');
+        });
+
+        it('\'Choose File\' button should be displayed', () => {
+            utilities.verifyInnerText(multipleSelectionPage.chooseFileButton(), 'Choose File');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.chooseFileButton(), 'visible');
+        });
+
+        it('By default \'No file chosen\' text should be displayed below the \'File name\' label.', () => {
+            utilities.verifyInnerText(multipleSelectionPage.noFileChosenLabel(), 'No file chosen');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.noFileChosenLabel(), 'visible');
+        });
+
+        it('CSS of \'Upload audio file\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(multipleSelectionPage.uploadLabel(), {
+                'color': 'rgb(0, 0, 0)',
+                'font-size': '12px',
+                'font-weight': '400'
+            });
+            utilities.verifyCSS(multipleSelectionPage.fileNameLabel(), {
+                'color': 'rgb(72, 72, 72)',
+                'font-size': '12px',
+                'font-weight': '400'
+            });
+            utilities.verifyCSS(multipleSelectionPage.noFileChosenLabel(), {
+                'color': 'rgb(0, 0, 0)',
+                'font-size': '12px',
+                'font-weight': '400'
+            });
+            utilities.verifyCSS(multipleSelectionPage.chooseFileButton(), {
+                'background-color': 'rgb(248, 248, 248)',
+                'border': '1px solid rgb(188, 188, 188)',
+                'color': 'rgb(72, 72, 72)',
+                'font-size': '12px',
+                'font-weight': '700'
+            });
+        });
+
+        it('Accessibility of \'Upload audio file\' section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(multipleSelectionPage.uploadAudioFileRadioButton().parents('[class*="AddAudioPopupstyles__FormContentWrapper"]'));
+        });
+
+        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', () => {
+            multipleSelectionPage.steps.uploadFile('sample.mp3');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.fileUploadProgressBar(), 'visible');
+            utilities.verifyInnerText(multipleSelectionPage.uploadedFileNameLabel(), 'sample.mp3');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.uploadedFileNameLabel(), 'visible');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.fileUploadProgressBar(), 'hidden');
+        });
+
+        it('CSS of progress bar and file name when file upload is in progress', { tags: 'css' }, () => {
+            multipleSelectionPage.steps.uploadFile('sample1.mp3');
+            multipleSelectionPage.fileUploadProgressBar()
+                .verifyPseudoClassBeforeProperty('background-color', 'rgb(74, 147, 224)')
+        });
+
+        it('Accessibility of progress bar and file name when file upload is in progress', { tags: 'a11y' }, () => {
+            multipleSelectionPage.steps.uploadFile('sample.mp3');
+            cy.checkAccessibility(multipleSelectionPage.uploadAudioFileRadioButton().parents('[class*="AddAudioPopupstyles__FormContentWrapper"]'));
+        });
+
+        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', () => {
+            multipleSelectionPage.steps.uploadFile('sample2.mp3');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.fileUploadProgressBar(), 'hidden');
+            utilities.verifyInnerText(multipleSelectionPage.uploadedFileNameLabel(), 'sample2.mp3');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.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.\'', () => {
+            multipleSelectionPage.steps.uploadFile('sample.mp4');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.uploadFileSectionErrorMessage(), 'visible');
+            utilities.verifyInnerText(multipleSelectionPage.uploadFileSectionErrorMessage(), 'Error: The file type is not supported. Please upload a file with the following supported formats: MP3, WAV, AAC.');
+        });
+
+        multipleSelectionPage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When user upload supported format of audio file, error message should disappear', () => {
+            multipleSelectionPage.steps.uploadFile('sample2.mp3');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.fileUploadProgressBar(), 'hidden');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.uploadFileSectionErrorMessage(), 'hidden');
+        });
+
+        it('Accessibility of \'Upload audio file\' section once file is uploaded', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(multipleSelectionPage.uploadAudioFileRadioButton().parents('[class*="AddAudioPopupstyles__FormContentWrapper"]'));
+        });
+    });
+});

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

@@ -0,0 +1,213 @@
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { multipleSelectionPage } from "../../../pages";
+import constants from "../../../fixtures/constants";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Audio player: Edit tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('\'Transcript\' feature radio buttons', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.focusInQuestionInstructionsInputField();
+            multipleSelectionPage.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+            multipleSelectionPage.steps.clickOnAddUrlRadioButton();
+        });
+
+        it('\'Upload transcript file\' and \'Type in transcript\' radio buttons should be displayed along with \'Transcript\' label. By default \'Upload transcript file\' button should be selected', () => {
+            utilities.verifyInnerText(multipleSelectionPage.transcriptLabel(), 'Transcript');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.transcriptLabel(), 'visible');
+            utilities.verifyInnerText(multipleSelectionPage.uploadTranscriptFileLabel(), 'Upload transcript file');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.uploadTranscriptFileLabel(), 'visible');
+            multipleSelectionPage.steps.verifyUploadTranscriptFileCheckedState();
+            utilities.verifyInnerText(multipleSelectionPage.typeInTranscriptLabel(), 'Type in transcript');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.typeInTranscriptLabel(), 'visible');
+            multipleSelectionPage.steps.verifyUploadAudioFileUncheckedState();
+        });
+
+        it('CSS of Transcript section', { tags: 'css' }, () => {
+            multipleSelectionPage.transcriptLabel()
+            utilities.verifyCSS(multipleSelectionPage.transcriptLabel(), {
+                'color': 'rgb(72, 72, 72)',
+                'font-size': '12px',
+                'font-weight': '700'
+            });
+            utilities.verifyCSS(multipleSelectionPage.uploadTranscriptFileRadioButton().parent().find('svg'), {
+                'fill': 'rgb(0, 117, 255)'
+            });
+            utilities.verifyCSS(multipleSelectionPage.typeInTranscriptRadioButton().parent().find('svg'), {
+                'fill': 'rgb(118, 118, 118)'
+            });
+            utilities.verifyCSS(multipleSelectionPage.uploadTranscriptFileLabel(), {
+                'color': 'rgb(0, 0, 0)',
+                'font-size': '12px',
+                'font-weight': '400'
+            });
+            utilities.verifyCSS(multipleSelectionPage.typeInTranscriptLabel(), {
+                'color': 'rgb(0, 0, 0)',
+                'font-size': '12px',
+                'font-weight': '400'
+            });
+        });
+
+        //Note: Accessibility is already covered in header file
+    });
+
+    describe('\'Upload transcript file\' section', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.focusInQuestionInstructionsInputField();
+            multipleSelectionPage.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+            multipleSelectionPage.steps.clickOnAddUrlRadioButton();
+        });
+
+        it('\'Upload\' label should be displayed', () => {
+            utilities.verifyInnerText(multipleSelectionPage.uploadTranscriptLabel(), 'Upload');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.uploadTranscriptLabel(), 'visible');
+        });
+
+        it('\'File name\' label should be displayed', () => {
+            utilities.verifyInnerText(multipleSelectionPage.transcriptFileNameLabel(), 'File name');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.transcriptFileNameLabel(), 'visible');
+        });
+
+        it('\'Choose File\' button should be displayed', () => {
+            utilities.verifyInnerText(multipleSelectionPage.chooseTranscriptFileButton(), 'Choose File');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.chooseTranscriptFileButton(), 'visible');
+        });
+
+        it('By default \'No file chosen\' text should be displayed below the \'File name\' label.', () => {
+            utilities.verifyInnerText(multipleSelectionPage.noFileChosenLabel(), 'No file chosen');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.noFileChosenLabel(), 'visible');
+        });
+
+        it('CSS of \'Upload transcript file\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(multipleSelectionPage.uploadTranscriptLabel(), {
+                'color': 'rgb(0, 0, 0)',
+                'font-size': '12px',
+                'font-weight': '400'
+            });
+            utilities.verifyCSS(multipleSelectionPage.transcriptFileNameLabel(), {
+                'color': 'rgb(72, 72, 72)',
+                'font-size': '12px',
+                'font-weight': '400'
+            });
+            utilities.verifyCSS(multipleSelectionPage.noFileChosenLabel(), {
+                'color': 'rgb(0, 0, 0)',
+                'font-size': '12px',
+                'font-weight': '400'
+            });
+            utilities.verifyCSS(multipleSelectionPage.chooseTranscriptFileButton(), {
+                'background-color': 'rgb(248, 248, 248)',
+                'border': '1px solid rgb(188, 188, 188)',
+                'color': 'rgb(72, 72, 72)',
+                'font-size': '12px',
+                'font-weight': '700'
+            });
+        });
+
+        //Note: Accessibility is already covered in header file
+
+        it('When the user adds the transcript 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', () => {
+            multipleSelectionPage.steps.uploadTranscriptFile('sample.txt');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.transcriptFileUploadProgressBar(), 'visible');
+            utilities.verifyInnerText(multipleSelectionPage.uploadedFileNameLabel(), 'sample.txt');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.uploadedFileNameLabel(), 'visible');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.transcriptFileUploadProgressBar(), 'hidden');
+        });
+
+        it('CSS of progress bar and file name when file upload is in progress', { tags: 'css' }, () => {
+            multipleSelectionPage.steps.uploadTranscriptFile('sample1.txt');
+            multipleSelectionPage.transcriptFileUploadProgressBar()
+                .verifyPseudoClassBeforeProperty('background-color', 'rgb(74, 147, 224)')
+        });
+
+        it('Accessibility of progress bar and file name when file upload is in progress', { tags: 'a11y' }, () => {
+            multipleSelectionPage.steps.uploadTranscriptFile('sample.txt');
+            cy.checkAccessibility(multipleSelectionPage.uploadedFileNameLabel().parents('.upload-transcript-file'));
+        });
+
+        it('When user clicks on \'Choose file\' button again and upload another transcript file, previously uploaded transcript file should get replaced with new transcript file', () => {
+            multipleSelectionPage.steps.uploadTranscriptFile('sample1.txt');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.transcriptFileUploadProgressBar(), 'hidden');
+            utilities.verifyInnerText(multipleSelectionPage.uploadedFileNameLabel(), 'sample1.txt');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.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: TXT.\'', () => {
+            multipleSelectionPage.steps.uploadTranscriptFile('sample.doc');
+            utilities.verifyInnerText(multipleSelectionPage.uploadTranscriptFileSectionErrorMessage(), 'Error: The file type is not supported. Please upload a file with the following supported formats: TXT.');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.uploadTranscriptFileSectionErrorMessage(), 'visible');
+        });
+
+        multipleSelectionPage.tests.verifyErrorMessageCSSAndA11y(multipleSelectionPage.uploadTranscriptFileSectionErrorMessage);
+
+        it('When user upload supported format of audio file, error message should disappear', () => {
+            multipleSelectionPage.steps.uploadTranscriptFile('sample.txt');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.transcriptFileUploadProgressBar(), 'hidden');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.uploadTranscriptFileSectionErrorMessage(), 'hidden');
+        });
+
+        it('Accessibility of \'Upload transcript file\' section once file is uploaded', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(multipleSelectionPage.uploadTranscriptLabel().parents('[class*="AddAudioPopupstyles__FormContentWrapper"]'));
+        });
+    });
+
+    describe('\'Type in transcript\' section', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.focusInQuestionInstructionsInputField();
+            multipleSelectionPage.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+            multipleSelectionPage.steps.clickOnAddUrlRadioButton();
+        });
+
+        it('On selecting \'Type in transcript\' radio button, the \'Upload transcript file\' radio button should get unchecked', () => {
+            multipleSelectionPage.steps.clickOnTypeInTranscriptRadioButton();
+            multipleSelectionPage.steps.verifyTypeInTranscriptCheckedState();
+            multipleSelectionPage.steps.verifyUploadTranscriptFileUncheckedState();
+        });
+
+        it('\'Upload\' label and \'Choose file\' button should not be displayed', () => {
+            utilities.verifyElementVisibilityState(multipleSelectionPage.uploadTranscriptLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.chooseTranscriptFileButton(), 'notExist');
+        });
+
+        it('\'Type in transcript\' label and input field should be displayed. By default, the type in transcript input field should be empty', () => {
+            utilities.verifyInnerText(multipleSelectionPage.typeInTranscriptInputFieldLabel(), 'Type in transcript');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.typeInTranscriptInputFieldLabel(), 'visible');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.typeInTranscriptInputField(), 'visible');
+            utilities.verifyInnerText(multipleSelectionPage.typeInTranscriptInputField(), '');
+        });
+
+        it('The user should be able to enter text in the \'Transcript\' input field', () => {
+            multipleSelectionPage.steps.enterTextInTranscriptInputField('This is a transcript text');
+            utilities.verifyTextContent(multipleSelectionPage.typeInTranscriptInputField(), 'This is a transcript text');
+        });
+
+        it('CSS of \'Type in transcript\' Section', { tags: 'css' }, () => {
+            utilities.verifyCSS(multipleSelectionPage.typeInTranscriptInputFieldLabel(), {
+                'color': 'rgb(0, 0, 0)',
+                'font-size': '12px',
+                'font-weight': '400'
+            });
+            utilities.verifyCSS(multipleSelectionPage.typeInTranscriptInputField(), {
+                'color': 'rgb(0, 0, 46)',
+                'font-size': '12px',
+                'font-weight': '400'
+            });
+        });
+
+        it('Accessibility of \'Type in transcript\' section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(multipleSelectionPage.typeInTranscriptInputFieldLabel().parents('.freeResponseAudioFormTextInput'));
+        });
+    });
+});

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

@@ -0,0 +1,148 @@
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { multipleSelectionPage } from "../../../pages";
+import constants from "../../../fixtures/constants";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Audio player: Edit tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('\'Audio player style\' section - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+            cy.barsPreLoaderWait();
+            multipleSelectionPage.steps.focusInQuestionInstructionsInputField();
+            multipleSelectionPage.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+        });
+
+        it('\'Audio player style\' label should be displayed', () => {
+            utilities.verifyInnerText(multipleSelectionPage.audioPlayerStyleLabel(), 'Audio player style');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.audioPlayerStyleLabel(), 'visible');
+        });
+
+        it('Three toggle buttons \'Standard\', \'Bar\' and \'Compact\' should be displayed and \'Bar\' toggle button should be displayed', () => {
+            utilities.verifyInnerText(multipleSelectionPage.standardStyleToggleButtonLabel(), 'Standard');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.standardStyleToggleButton(), 'visible');
+            utilities.verifyInnerText(multipleSelectionPage.barStyleToggleButtonLabel(), 'Bar');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.barStyleToggleButton(), 'visible');
+            utilities.verifyInnerText(multipleSelectionPage.compactStyleToggleButtonLabel(), 'Compact');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.compactStyleToggleButton(), 'visible');
+            multipleSelectionPage.steps.verifyAudioPlayerStyleToggleButtonIsNotSelected('Standard');
+            multipleSelectionPage.steps.verifyAudioPlayerStyleToggleButtonIsSelected('Bar');
+            multipleSelectionPage.steps.verifyAudioPlayerStyleToggleButtonIsNotSelected('Compact');
+        });
+
+        it('User should be able to select \'Standard\' toggle button', () => {
+            multipleSelectionPage.steps.selectAudioPlayerStyleToggleButton('Standard');
+            multipleSelectionPage.steps.verifyAudioPlayerStyleToggleButtonIsNotSelected('Bar');
+            multipleSelectionPage.steps.verifyAudioPlayerStyleToggleButtonIsNotSelected('Compact');
+        });
+
+        it('User should be able to select \'Bar\' toggle button', () => {
+            multipleSelectionPage.steps.selectAudioPlayerStyleToggleButton('Bar');
+            multipleSelectionPage.steps.verifyAudioPlayerStyleToggleButtonIsNotSelected('Standard');
+            multipleSelectionPage.steps.verifyAudioPlayerStyleToggleButtonIsNotSelected('Compact');
+        });
+
+        it('User should be able to select \'Compact\' toggle button', () => {
+            multipleSelectionPage.steps.selectAudioPlayerStyleToggleButton('Compact');
+            multipleSelectionPage.steps.verifyAudioPlayerStyleToggleButtonIsNotSelected('Standard');
+            multipleSelectionPage.steps.verifyAudioPlayerStyleToggleButtonIsNotSelected('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(multipleSelectionPage.compactPlayerOptionsLabel(), 'Compact player options');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.compactPlayerOptionsLabel(), 'visible');
+            utilities.verifyInnerText(multipleSelectionPage.defaultPlayerOptionButton(), 'Default');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.defaultPlayerOptionButton(), 'visible');
+            utilities.verifyInnerText(multipleSelectionPage.textPlayerOptionButton(), 'Text');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.textPlayerOptionButton(), 'visible');
+            utilities.verifyInnerText(multipleSelectionPage.imagePlayerOptionButton(), 'Image');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.imagePlayerOptionButton(), 'visible');
+            utilities.verifyInnerText(multipleSelectionPage.iconPlayerOptionButton(), 'Icon');
+            utilities.verifyElementVisibilityState(multipleSelectionPage.iconPlayerOptionButton(), 'visible');
+            multipleSelectionPage.steps.verifyCompactPlayerOptionButtonIsSelected('Default');
+            multipleSelectionPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Text');
+            multipleSelectionPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Image');
+            multipleSelectionPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Icon');
+        });
+
+        it('User should be able to select \'Default\' toggle button', () => {
+            multipleSelectionPage.steps.selectCompactPlayerOptionButton('Default');
+            multipleSelectionPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Text');
+            multipleSelectionPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Image');
+            multipleSelectionPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Icon');
+        });
+
+        it('User should be able to select \'Text\' toggle button', () => {
+            multipleSelectionPage.steps.selectCompactPlayerOptionButton('Text');
+            multipleSelectionPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Default');
+            multipleSelectionPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Image');
+            multipleSelectionPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Icon');
+        });
+
+        it('User should be able to select \'Image\' toggle button', () => {
+            multipleSelectionPage.steps.selectCompactPlayerOptionButton('Image');
+            multipleSelectionPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Default');
+            multipleSelectionPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Text');
+            multipleSelectionPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Icon');
+        });
+
+        it('User should be able to select \'Icon\' toggle button', () => {
+            multipleSelectionPage.steps.selectCompactPlayerOptionButton('Icon');
+            multipleSelectionPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Default');
+            multipleSelectionPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Text');
+            multipleSelectionPage.steps.verifyCompactPlayerOptionButtonIsNotSelected('Image');
+        });
+
+        it('CSS of audio player style section', { tags: 'css' }, () => {
+            utilities.verifyCSS(multipleSelectionPage.audioPlayerStyleLabel(), {
+                'color': 'rgb(72, 72, 72)',
+                'font-size': '12px',
+                'font-weight': '400'
+            });
+            utilities.verifyCSS(multipleSelectionPage.compactStyleToggleButton(), {
+                'color': 'rgba(0, 0, 0, 0.38)',
+                'background-color': 'rgb(72, 72, 72)',
+                'font-size': '14px',
+                'font-weight': '500'
+            });
+            utilities.verifyCSS(multipleSelectionPage.standardStyleToggleButton(), {
+                'color': 'rgba(0, 0, 0, 0.38)',
+                'background-color': 'rgba(0, 0, 0, 0)',
+                'font-size': '14px',
+                'font-weight': '500'
+            });
+            utilities.verifyCSS(multipleSelectionPage.compactPlayerOptionsLabel(), {
+                'color': 'rgb(72, 72, 72)',
+                'font-size': '12px',
+                'font-weight': '400'
+            });
+            utilities.verifyCSS(multipleSelectionPage.iconPlayerOptionButton(), {
+                'background-color': 'rgba(0, 0, 0, 0)',
+                'border': '2px solid rgb(72, 72, 72)'
+            });
+            utilities.verifyCSS(multipleSelectionPage.iconPlayerOptionButton().find('.ngie-toggle-button-label'), {
+                'color': 'rgb(72, 72, 72)',
+                'font-size': '12px',
+                'font-weight': '400'
+            });
+            utilities.verifyCSS(multipleSelectionPage.defaultPlayerOptionButton(), {
+                'background-color': 'rgba(0, 0, 0, 0)',
+                'border': '1px solid rgb(188, 188, 188)'
+            });
+            utilities.verifyCSS(multipleSelectionPage.defaultPlayerOptionButton().find('.ngie-toggle-button-label'), {
+                'color': 'rgb(72, 72, 72)',
+                'font-size': '12px',
+                'font-weight': '400'
+            });
+        });
+
+        it('Accessibility of audio player style section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(multipleSelectionPage.audioPlayerStyleWrapper());
+        });
+    });
+});