itemengine-cypress-automation 1.0.185-repoUpdate26April-b17eb46.0 → 1.0.186-packageUpdate-5632086.0

package/cypress/pages/audioPlayerPage.js

@@ -1,136 +1,103 @@
+import constants from "../fixtures/constants";
 import utilities from "../support/helpers/utilities";
-import { commonComponents, createQuestionBasePage, playbackControlsBaseComponent } from "./components";
 import { dialogBoxBase } from "./dialogBoxBase";
+import { selectQuestionResourceToolPage } from "./selectQuestionResourceToolPage";
+import { createQuestionBasePage, commonComponents, ckEditorToolbar, equationEditorFlyout, playbackControlsBaseComponent } from "./components"
 
 const selectors = {
-    ...playbackControlsBaseComponent,
     ...commonComponents,
-    ...dialogBoxBase,
-    uploadAudioFileLabel: () => cy.get('[class*="RadioGroupMUI5styles__RadioOptionContainer"] .ngie-radio-label').eq(0),
-    uploadAudioFileRadioButton: () => cy.get('.ngie-radio-btn input').eq(0),
-    addAudioURLLabel: () => cy.get('[class*="RadioGroupMUI5styles__RadioOptionContainer"] .ngie-radio-label').eq(1),
-    addAudioURLRadioButton: () => cy.get('.ngie-radio-btn input').eq(1),
-    uploadAudioFileUploadLabel: () => cy.get('[class*="AudioPlayerstyles__AudioLabel"]').eq(0),
-    uploadAudioFileNameLabel: () => cy.get('[class*="AudioPlayerstyles__AudioLabel"]').eq(1),
-    deleteAudioFileButton: () => cy.get('[aria-label*="Delete audio file]'),
-    sourceUrlLabel: () => cy.get('[class*="AudioPlayerstyles__AudioLabel"]').eq(0),
+    ...ckEditorToolbar,
+    ...playbackControlsBaseComponent,
+    addUrlLabel: () => cy.get('[class*="RadioGroupMUI5styles__RadioOptionContainer"] .ngie-radio-label').eq(0),
+    addUrlRadioButton: () => cy.get('.ngie-radio-btn input').eq(0),
+    addAudioFileLabel: () => cy.get('[class*="RadioGroupMUI5styles__RadioOptionContainer"] .ngie-radio-label').eq(1),
+    addAudioFileRadioButton: () => cy.get('.ngie-radio-btn input').eq(1),
+    sourceUrlLabel: () => cy.get('.inline-text-property-label').eq(0),
     sourceUrlInputField: () => cy.get('input[aria-label="Source URL"]'),
-    uploadAudioChooseFileButton: () => cy.get('.choose-file-upload-button'),
-    uploadAudioNoFileChosenLabel: () => cy.get('[aria-label="No file chosen"]').eq(0),
+    noFileChosenLabel: () => cy.get('[aria-label="No file chosen"]'),
     uploadedFileNameLabel: () => cy.get('.selected-file'),
-    audioFileUploadProgressBar: () => cy.get('[class*="AudioPlayerstyles__ProgressBar-"]').eq(0),
+    uploadLabel: () => cy.get('[class*="AudioPlayerstyles__AudioLabel"]').eq(0),
+    fileNameLabel: () => cy.get('[class*="AudioPlayerstyles__AudioLabel"]').eq(1),
+    chooseFileButton: () => cy.get('.choose-file-button'),
+    fileUploadProgressBar: () => cy.get('[class*="AudioPlayerstyles__ProgressBar-"]'),
     inputTypeFile: () => cy.get('input[type="file"]'),
-    audioPlayerStyleLabel: () => cy.get('.player-style-label'),
-    standardStyleToggleButton: () => cy.get('[data-ngie-testid="standard-toggle-button"]'),
-    barStyleToggleButton: () => cy.get('[data-ngie-testid="bar-toggle-button"]'),
-    compactStyleToggleButton: () => cy.get('[data-ngie-testid="compact-toggle-button"]'),
-    standardStyleToggleButtonLabel: () => cy.get('[data-ngie-testid="standard-toggle-button"] .ngie-toggle-button-label'),
-    barStyleToggleButtonLabel: () => cy.get('[data-ngie-testid="bar-toggle-button"] .ngie-toggle-button-label'),
-    compactStyleToggleButtonLabel: () => cy.get('[data-ngie-testid="compact-toggle-button"] .ngie-toggle-button-label'),
-    compactPlayerOptionsLabel: () => cy.get('.options-label'),
-    defaultPlayerOptionButton: () => cy.get('[data-ngie-testid="default-toggle-button"]'),
-    textPlayerOptionButton: () => cy.get('[data-ngie-testid="text-toggle-button"]'),
-    imagePlayerOptionButton: () => cy.get('[data-ngie-testid="image-toggle-button"]'),
-    iconPlayerOptionButton: () => cy.get('[data-ngie-testid="icon-toggle-button"]'),
-    audioDescriptionInputField: () => cy.get('.description-wrapper [role="textbox"]'),
-    uploadTranscriptFileLabel: () => cy.get('[class*="RadioGroupMUI5styles__RadioOptionContainer"] .ngie-radio-label').eq(2),
-    uploadTranscriptFileRadioButton: () => cy.get('.ngie-radio-btn input').eq(2),
-    typeInTranscriptLabel: () => cy.get('[class*="RadioGroupMUI5styles__RadioOptionContainer"] .ngie-radio-label').eq(3),
-    typeInTranscriptRadioButton: () => cy.get('.ngie-radio-btn input').eq(3),
+    playerTypeLabel: () => cy.get('.player-type-dropdown-label'),
+    playerTypeDropdown: () => cy.get('#Player-type-select'),
+    playbackLimitLabel: () => cy.get('.playback-limit-wrapper [class*="Label"]'),
+    playbackLimitInputField: () => cy.get('.playback-limit-wrapper input'),
+    titleLabel: () => cy.get('.inline-text-property-label').last(),
+    titleInputField: () => cy.get('input[aria-label="Title"]'),
+    descriptionLabel: () => cy.get('.additional-settings-label').eq(0),
+    descriptionInputField: () => cy.get('[role="textbox"][title="Description"]'),
+    transcriptLabel: () => cy.get('.additional-settings-label').eq(1),
     transcriptInputField: () => cy.get('[role="textbox"][title="Transcript"]'),
-    deleteTranscriptButton: () => cy.get('[aria-label*="Delete transcript]'),
-
-    //Preview tab
-    backwardButton: () => cy.get('.forward-backward-buttons-wrapper [aria-label*="Backward"]'),
-    forwardButton: () => cy.get('.forward-backward-buttons-wrapper [aria-label*="Forward"]'),
-    playbackElapsedTime: () => cy.get('.audio-player-current-time').eq(0),
-    playbackTotalTime: () => cy.get('.audio-player-duration').eq(0),
-    addPinButton: () => cy.get('.audio-add-pin-wr button'),
+    customizeUIControlAccordion: () => cy.get('.ngie-accordion-summary[role="button"]').eq(0),
+    advancedPlayerSettingsAccordion: () => cy.get('.ngie-accordion-summary[role="button"]').eq(1),
+    customizeControlPlayButton: () => cy.get('[data-ngie-testid="play-toggle-button"]'),
+    customizeControlButtonLabel: () => cy.get('[data-ngie-testid="play-toggle-button"]').find('.ngie-toggle-button-label'),
+    customizeControlPauseButton: () => cy.get('[data-ngie-testid="pause-toggle-button"]'),
+    customizeControlSeekButton: () => cy.get('[data-ngie-testid="seek-toggle-button"]'),
+    advancedPlayerButtonLabel: () => cy.get('[data-ngie-testid="timer-toggle-button"]').find('.ngie-toggle-button-label'),
+    advancedPlayerTimerButton: () => cy.get('[data-ngie-testid="timer-toggle-button"]'),
+    advancedPlayerProgressBarButton: () => cy.get('[data-ngie-testid="progress-bar-toggle-button"]'),
+    advancedPlayerVolumeControlButton: () => cy.get('[data-ngie-testid="volume-control-toggle-button"]'),
+    allowStudentsToDownloadAudioLabel: () => cy.get('[data-ngie-testid="allow-students-to-download-the-audio-checkbox"] .MuiFormControlLabel-label'),
+    allowStudentsToDownloadAudioCheckbox: () => cy.get('[data-ngie-testid="allow-students-to-download-the-audio-checkbox"] input'),
+    selectedButtonIcon: () => cy.get('.ngie-toggle-button-tick-icon'),
+    accordionChevronIcon: () => cy.get('[class*="expandIcon"]'),
+    accordionButtonLabel: () => cy.get('.customized_button_label'),
+    audioDownloadButton: () => cy.get('.audio-download-icon-wr'),
+    playbackLimitHelpText: () => cy.get('.playback-limit-remaining'),
+    playbackElapsedTime: () => cy.get('.audio-player-current-time'),
+    playbackTotalTime: () => cy.get('.audio-player-duration'),
     audioFileSrc: () => cy.get('.audio-player-toolbar audio'),
+    titlePreviewTab: () => cy.get('.audio-resource-title'),
     descriptionPreviewTab: () => cy.get('.audio-resource-preview-wrapper .question-text-wrapper'),
     transcriptTitlePreviewTab: () => cy.get('.transcript-title'),
     transcriptPrintButton: () => cy.get('button[aria-label="Print preview"]'),
     transcriptModalCloseButton: () => cy.get('button[aria-label="Close"]'),
-    transcriptContentPreviewTab: () => cy.get('.transcript-content'),
+    transcriptContentPreviewTab: () => cy.get('[class*="Transcriptstyles__TranscriptContent"]'),
     transcriptButton: () => cy.get('button[aria-label="Transcript"]'),
     transcriptModal: () => cy.get('[class*="Transcriptstyles__TranscriptWrapper"]'),
-    standardPreviewPlayerWrapper: () => cy.get('.standard-audio-resource-preview'),
-    audioPlayerToolbar: () => cy.get('.audio-player-toolbar'),
-    compactPlayerPlayButton: () => cy.get(' button'),
-    playButton: () => cy.get('.audio-player-not-visible button'),
-    stopButton: () => cy.get('.audio-player-visible button'),
+    audioDownloadButton: () => cy.get('.audio-download-icon-wr'),
+    playbackLimitHelpText: () => cy.get('.playback-limit-remaining'),
+    playbackPlayer: () => cy.get('.audio-player-toolbar')
 }
 
 const steps = {
-    ...playbackControlsBaseComponent.steps,
     ...createQuestionBasePage.steps,
-    ...dialogBoxBase.steps,
-    /**
-    * Uploads a file to the audio player by attaching the file located at the specified filePath.
-    * @param {string} filePath - The file path to the file to be uploaded.
-    * @returns {void}
-    */
-    uploadFile: (filePath) => {
-        audioPlayerPage.inputTypeFile()
-            .attachFile(filePath);
-        utilities.verifyElementVisibilityState(audioPlayerPage.audioFileUploadProgressBar(), 'hidden');
-    },
-
-    /**
-    * Uploads a file to the audio player by attaching the file located at the specified filePath.
-    * @param {string} filePath - The file path to the file to be uploaded.
-    * @returns {void}
-    */
-    attachFile: (filePath) => {
-        audioPlayerPage.inputTypeFile()
-            .attachFile(filePath);
-    },
-
-    addInputToAudioDescriptionInputField: (text) => {
-        audioPlayerPage.audioDescriptionInputField()
-            .type(text)
-            .should('have.text', text)
-            .blur();
-    },
-
-    selectTypeInTranscriptRadioButton: () => {
-        audioPlayerPage.typeInTranscriptRadioButton()
-            .click()
+    ...ckEditorToolbar.steps,
+    ...equationEditorFlyout.steps,
+    ...commonComponents.steps,
+    ...playbackControlsBaseComponent.steps,
+    verifyAddUrlCheckedState: () => {
+        audioPlayerPage.addUrlRadioButton()
             .should('be.checked');
     },
 
-    enterTextInTranscriptInputField: (text) => {
-        audioPlayerPage.transcriptInputField()
-            .type(text)
-            .should('have.text', text)
-            .blur();
+    verifyAddUrlUncheckedState: () => {
+        audioPlayerPage.addUrlRadioButton()
+            .should('not.be.checked');
     },
 
-    verifyUploadAudioFileRadioButtonIsSelected: () => {
-        audioPlayerPage.uploadAudioFileRadioButton()
-            .should('be.checked');
+    clickOnAddUrlRadioButton: () => {
+        audioPlayerPage.addUrlRadioButton()
+            .click();
     },
 
-    verifyUploadAudioFileRadioButtonIsNotSelected: () => {
-        audioPlayerPage.uploadAudioFileRadioButton()
-            .should('not.be.checked');
+    verifyAddAudioFileCheckedState: () => {
+        audioPlayerPage.addAudioFileRadioButton()
+            .should('be.checked');
     },
 
-    verifyAddAudioURLRadioButtonIsNotSelected: () => {
-        audioPlayerPage.addAudioURLRadioButton()
+    verifyAddAudioFileUncheckedState: () => {
+        audioPlayerPage.addAudioFileRadioButton()
             .should('not.be.checked');
     },
 
-    selectUploadAudioFileRadioButton: () => {
-        audioPlayerPage.uploadAudioFileRadioButton()
-            .click()
-            .should('be.checked');
-    },
-
-    selectAddAudioURLRadioButton: () => {
-        audioPlayerPage.addAudioURLRadioButton()
-            .click()
-            .should('be.checked');
+    clickOnAddAudioFileRadioButton: () => {
+        audioPlayerPage.addAudioFileRadioButton()
+            .click();
     },
 
     focusInAndFocusOutOfSourceURLInputField: () => {
@@ -140,180 +107,412 @@ const steps = {
     },
 
     /**
-     * @description Verify audio player style toggle button is selected
-     * @param {string} toggleButton Toggle button label
+     * Enters text into the source URL input field on the audio player page.
+     * @param {string} text - The text to be entered into the source URL input field.
+     * @returns {void}
      */
-    verifyAudioPlayerStyleToggleButtonIsSelected: (toggleButton) => {
-        switch (toggleButton) {
-            case 'Standard':
-                audioPlayerPage.standardStyleToggleButton()
-                    .should('have.attr', 'aria-pressed', 'true');
-                break;
-            case 'Bar':
-                audioPlayerPage.barStyleToggleButton()
-                    .should('have.attr', 'aria-pressed', 'true');
-                break;
-            case 'Compact':
-                audioPlayerPage.compactStyleToggleButton()
-                    .should('have.attr', 'aria-pressed', 'true');
-                break;
-            default:
-                throw new Error('Invalid audio player style');
-        }
+    enterTextInSourceURLInputField: (text) => {
+        audioPlayerPage.sourceUrlInputField()
+            .type(text, { delay: 0 })
+            .blur();
     },
 
-    /**
-     * @description Verify audio player style toggle button is not selected
-     * @param {string} toggleButton Toggle button label
-     */
-    verifyAudioPlayerStyleToggleButtonIsNotSelected: (toggleButton) => {
-        switch (toggleButton) {
-            case 'Standard':
-                audioPlayerPage.standardStyleToggleButton()
-                    .should('have.attr', 'aria-pressed', 'false');
-                break;
-            case 'Bar':
-                audioPlayerPage.barStyleToggleButton()
-                    .should('have.attr', 'aria-pressed', 'false');
-                break;
-            case 'Compact':
-                audioPlayerPage.compactStyleToggleButton()
-                    .should('have.attr', 'aria-pressed', 'false');
-                break;
-            default:
-                throw new Error('Invalid audio player style');
-        }
+    clearTextInSourceURLInputField: () => {
+        audioPlayerPage.sourceUrlInputField()
+            .clear();
     },
 
     /**
-     * @description Select audio player style toggle button
-     * @param {string} toggleButton Toggle button label
+     * Uploads a file to the audio player by attaching the file located at the specified filePath.
+     * @param {string} filePath - The file path to the file to be uploaded.
+     * @returns {void}
      */
-    selectAudioPlayerStyleToggleButton: (toggleButton) => {
-        switch (toggleButton) {
-            case 'Standard':
-                audioPlayerPage.standardStyleToggleButton()
-                    .click()
-                    .should('have.attr', 'aria-pressed', 'true');
-                break;
-            case 'Bar':
-                audioPlayerPage.barStyleToggleButton()
-                    .click()
-                    .should('have.attr', 'aria-pressed', 'true');
-                break;
-            case 'Compact':
-                audioPlayerPage.compactStyleToggleButton()
-                    .click()
-                    .should('have.attr', 'aria-pressed', 'true');
-                break;
-            default:
-                throw new Error('Invalid audio player style');
-        }
+    uploadFile: (filePath) => {
+        audioPlayerPage.inputTypeFile()
+            .attachFile(filePath);
+        utilities.verifyElementVisibilityState(audioPlayerPage.fileUploadProgressBar(), 'hidden');
+    },
+
+    verifyPlayerTypeDropdownDisabledState: () => {
+        audioPlayerPage.playerTypeDropdown()
+            .should('have.class', 'Mui-disabled');
     },
 
     /**
-     * @description Verify compact player option button is selected
-     * @param {string} button button label
+     * Sets the playback limit value in the audio player's input field.
+     * @param {string|number} value - The value to set as the playback limit.
+     * @returns {void}
      */
-    verifyCompactPlayerOptionButtonIsSelected: (button) => {
-        switch (button) {
-            case 'Default':
-                audioPlayerPage.defaultPlayerOptionButton()
-                    .should('have.attr', 'aria-pressed', 'true');
-                break;
-            case 'Text':
-                audioPlayerPage.textPlayerOptionButton()
-                    .should('have.attr', 'aria-pressed', 'true');
-                break;
-            case 'Image':
-                audioPlayerPage.imagePlayerOptionButton()
-                    .should('have.attr', 'aria-pressed', 'true');
-                break;
-            case 'Icon':
-                audioPlayerPage.iconPlayerOptionButton()
-                    .should('have.attr', 'aria-pressed', 'true');
-                break;
-            default:
-                throw new Error('Invalid compact player option');
-        }
+    setPlaybackLimit: (value) => {
+        audioPlayerPage.playbackLimitInputField()
+            .clear()
+            .type(value)
     },
 
     /**
-     * @description Verify compact player option button is not selected
-     * @param {string} button button label
+     * Verifies that the playback limit input field in the audio player has the expected value.
+     * @param {string|number} value - The expected value to be verified.
+     * @returns {void}
      */
-    verifyCompactPlayerOptionButtonIsNotSelected: (button) => {
-        switch (button) {
-            case 'Default':
-                audioPlayerPage.defaultPlayerOptionButton()
-                    .should('have.attr', 'aria-pressed', 'false');
-                break;
-            case 'Text':
-                audioPlayerPage.textPlayerOptionButton()
-                    .should('have.attr', 'aria-pressed', 'false');
-                break;
-            case 'Image':
-                audioPlayerPage.imagePlayerOptionButton()
-                    .should('have.attr', 'aria-pressed', 'false');
-                break;
-            case 'Icon':
-                audioPlayerPage.iconPlayerOptionButton()
-                    .should('have.attr', 'aria-pressed', 'false');
-                break;
-            default:
-                throw new Error('Invalid compact player option');
-        }
+    verifyPlaybackLimitInputFieldValue: (value) => {
+        audioPlayerPage.playbackLimitInputField()
+            .should('have.attr', 'value', value);
+    },
+
+    focusInAndFocusOutOfPlaybackLimitInputField: () => {
+        audioPlayerPage.playbackLimitInputField()
+            .click()
+            .blur();
     },
 
     /**
-     * @description Verify compact player option button is selected
-     * @param {string} toggleButton button label
+     * Enters text into the title input field on the audio player page.
+     * @param {string} text - The text to be entered into the title input field.
+     * @returns {void}
      */
-    selectCompactPlayerOptionButton: (toggleButton) => {
-        switch (button) {
-            case 'Default':
-                audioPlayerPage.defaultPlayerOptionButton()
-                    .click()
-                    .should('have.attr', 'aria-pressed', 'true');
-                break;
-            case 'Text':
-                audioPlayerPage.textPlayerOptionButton()
-                    .click()
-                    .should('have.attr', 'aria-pressed', 'true');
-                break;
-            case 'Image':
-                audioPlayerPage.imagePlayerOptionButton()
-                    .click()
-                    .should('have.attr', 'aria-pressed', 'true');
-                break;
-            case 'Icon':
-                audioPlayerPage.iconPlayerOptionButton()
-                    .click()
-                    .should('have.attr', 'aria-pressed', 'true');
-                break;
-            default:
-                throw new Error('Invalid compact player option');
-        }
+    enterTextInTitleInputField: (text) => {
+        audioPlayerPage.titleInputField()
+            .type(text, { delay: 0 });
     },
 
     /**
-     * Enters text into the source URL input field on the audio player page.
-     * @param {string} text - The text to be entered into the source URL input field.
+     * Verifies that the title input field in the audio player has the expected text value.
+     * @param {string} value - The expected text value to be verified.
      * @returns {void}
      */
-    enterTextInSourceURLInputField: (text) => {
-        audioPlayerPage.sourceUrlInputField()
-            .type(text, { delay: 0 })
+    verifyTextInTitleInputField: (value) => {
+        audioPlayerPage.titleInputField()
+            .should('have.attr', 'value', value)
+    },
+
+    focusInDescriptionInputField: () => {
+        audioPlayerPage.descriptionInputField()
+            .click();
+    },
+
+    enterTextInDescriptionInputField: (text) => {
+        audioPlayerPage.descriptionInputField()
+            .type(text)
             .blur();
     },
 
-    clearTextInSourceURLInputField: () => {
-        audioPlayerPage.sourceUrlInputField()
+    clearDescriptionInputField: () => {
+        audioPlayerPage.descriptionInputField()
             .clear();
     },
 
-    deleteAudioFile: () => {
-        audioPlayerPage.deleteAudioFileButton()
+    verifyImageAndAltTextInDescriptionInputField: () => {
+        audioPlayerPage.descriptionInputField()
+            .find('img')
+            .should('have.attr', 'src', constants.foxImageLink)
+            .and('have.attr', 'alt', constants.foxImageAltText);
+    },
+
+    verifyImageAndAltTextInDescriptionPreviewTab: () => {
+        audioPlayerPage.descriptionPreviewTab()
+            .find('img')
+            .should('have.attr', 'src', constants.foxImageLink)
+            .and('have.attr', 'alt', constants.foxImageAltText);
+    },
+
+    verifyEquationInDescriptionInputField: () => {
+        audioPlayerPage.descriptionInputField()
+            .find('[data-widget="ngie_equation"]')
+            .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
+            .contains(constants.CKEditorInputFieldEnteredEquationText);
+    },
+
+    verifyEquationInDescriptionPreviewTab: () => {
+        audioPlayerPage.descriptionPreviewTab()
+            .find('[role="math"]')
+            .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
+            .contains(constants.CKEditorInputFieldEnteredEquationText);
+    },
+
+    verifyLinkInDescriptionInputField: () => {
+        audioPlayerPage.descriptionInputField()
+            .find('a')
+            .should('have.text', 'lorem')
+            .and('have.attr', 'href', `${Cypress.config().baseUrl}`);
+    },
+
+    verifyLinkInDescriptionPreviewTab: () => {
+        audioPlayerPage.descriptionPreviewTab()
+            .find('a')
+            .should('have.text', 'lorem')
+            .and('have.attr', 'href', `${Cypress.config().baseUrl}`);
+    },
+
+    verifyBoldTextInDescriptionInputField: () => {
+        audioPlayerPage.descriptionInputField()
+            .find('strong')
+            .should('exist')
+            .should('have.text', '​​​​​​​This is a bold text in description input field');
+    },
+
+    verifyBoldTextInDescriptionPreviewTab: () => {
+        audioPlayerPage.descriptionPreviewTab()
+            .find('strong')
+            .should('exist')
+            .should('have.text', 'This is a bold text in description');
+    },
+
+    focusInTranscriptInputField: () => {
+        audioPlayerPage.transcriptInputField()
+            .click();
+    },
+
+    enterTextInTranscriptInputField: (text) => {
+        audioPlayerPage.transcriptInputField()
+            .type(text)
+            .blur();
+    },
+
+    clearTranscriptInputField: () => {
+        audioPlayerPage.transcriptInputField()
+            .clear();
+    },
+
+    verifyImageAndAltTextInTranscriptInputField: () => {
+        audioPlayerPage.transcriptInputField()
+            .find('img')
+            .should('have.attr', 'src', constants.foxImageLink)
+            .and('have.attr', 'alt', constants.foxImageAltText);
+    },
+
+    verifyImageAndAltTextInTranscriptPreviewTab: () => {
+        audioPlayerPage.transcriptContentPreviewTab()
+            .find('img')
+            .should('have.attr', 'src', constants.foxImageLink)
+            .and('have.attr', 'alt', constants.foxImageAltText);
+    },
+
+    verifyEquationInTranscriptInputField: () => {
+        audioPlayerPage.transcriptInputField()
+            .find('[data-widget="ngie_equation"]')
+            .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
+            .contains(constants.CKEditorInputFieldEnteredEquationText);
+    },
+
+    verifyEquationInTranscriptPreviewTab: () => {
+        audioPlayerPage.transcriptContentPreviewTab()
+            .find('[role="math"]')
+            .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
+            .contains(constants.CKEditorInputFieldEnteredEquationText);
+    },
+
+    verifyLinkInTranscriptInputField: () => {
+        audioPlayerPage.transcriptInputField()
+            .find('a')
+            .should('have.text', 'lorem')
+            .and('have.attr', 'href', `${Cypress.config().baseUrl}`);
+    },
+
+    verifyLinkInTranscriptPreviewTab: () => {
+        audioPlayerPage.transcriptContentPreviewTab()
+            .find('a')
+            .should('have.text', 'lorem')
+            .and('have.attr', 'href', `${Cypress.config().baseUrl}`);
+    },
+
+    verifyBoldTextInTranscriptInputField: () => {
+        audioPlayerPage.transcriptInputField()
+            .find('strong')
+            .should('exist')
+            .should('have.text', '​​​​​​​This is a bold text in transcript input field');
+    },
+
+    verifyBoldTextInTranscriptPreviewTab: () => {
+        audioPlayerPage.transcriptContentPreviewTab()
+            .find('strong')
+            .should('exist')
+            .should('have.text', 'This is a bold text in transcript');
+    },
+
+    verifyCustomizeUIControlAccordionChevronIcon: () => {
+        audioPlayerPage.customizeUIControlAccordion()
+            .within(() => {
+                audioPlayerPage.accordionChevronIcon()
+                    .should('be.visible');
+            });
+    },
+
+    verifyAdvancedPlayerAccordionChevronIcon: () => {
+        audioPlayerPage.advancedPlayerSettingsAccordion()
+            .within(() => {
+                audioPlayerPage.accordionChevronIcon()
+                    .should('be.visible');
+            });
+    },
+
+    verifyCustomizeUIControlAccordionCollapsedState: () => {
+        audioPlayerPage.customizeUIControlAccordion()
+            .should('have.attr', 'aria-expanded', 'false');
+    },
+
+    verifyCustomizeUIControlAccordionExpandedState: () => {
+        audioPlayerPage.customizeUIControlAccordion()
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    clickOnCustomizeUIControlAccordion: () => {
+        audioPlayerPage.customizeUIControlAccordion()
+            .click();
+    },
+
+    verifyAdvancedPlayerSettingsAccordionCollapsedState: () => {
+        audioPlayerPage.advancedPlayerSettingsAccordion()
+            .should('have.attr', 'aria-expanded', 'false');
+    },
+
+    verifyAdvancedPlayerSettingsAccordionExpandedState: () => {
+        audioPlayerPage.advancedPlayerSettingsAccordion()
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    clickOnAdvancedPlayerSettingsAccordion: () => {
+        audioPlayerPage.advancedPlayerSettingsAccordion()
+            .click();
+    },
+
+    verifyCustomizeControlPlayButtonSelectedState: () => {
+        audioPlayerPage.customizeControlPlayButton()
+            .should('have.class', 'ngie-toggle-button-selected')
+            .within(() => {
+                utilities.verifyElementVisibilityState(audioPlayerPage.selectedButtonIcon(), 'visible');
+            });
+    },
+
+    verifyCustomizeControlPauseButtonSelectedState: () => {
+        audioPlayerPage.customizeControlPauseButton()
+            .should('have.class', 'ngie-toggle-button-selected')
+            .within(() => {
+                utilities.verifyElementVisibilityState(audioPlayerPage.selectedButtonIcon(), 'visible');
+            });
+    },
+
+    verifyCustomizeControlSeekButtonSelectedState: () => {
+        audioPlayerPage.customizeControlSeekButton()
+            .should('have.class', 'ngie-toggle-button-selected')
+            .within(() => {
+                utilities.verifyElementVisibilityState(audioPlayerPage.selectedButtonIcon(), 'visible');
+            });
+    },
+
+    verifyCustomizeControlPlayButtonDeselectedState: () => {
+        audioPlayerPage.customizeControlPlayButton()
+            .should('have.class', 'ngie-toggle-button-not-selected')
+            .within(() => {
+                utilities.verifyElementVisibilityState(audioPlayerPage.selectedButtonIcon(), 'hidden');
+            });
+    },
+
+    verifyCustomizeControlPauseButtonDeselectedState: () => {
+        audioPlayerPage.customizeControlPauseButton()
+            .should('have.class', 'ngie-toggle-button-not-selected')
+            .within(() => {
+                utilities.verifyElementVisibilityState(audioPlayerPage.selectedButtonIcon(), 'hidden');
+            });
+    },
+
+    verifyCustomizeControlSeekButtonDeselectedState: () => {
+        audioPlayerPage.customizeControlSeekButton()
+            .should('have.class', 'ngie-toggle-button-not-selected')
+            .within(() => {
+                utilities.verifyElementVisibilityState(audioPlayerPage.selectedButtonIcon(), 'hidden');
+            });
+    },
+
+    clickOnCustomizeControlPlayButton: () => {
+        audioPlayerPage.customizeControlPlayButton()
+            .click();
+    },
+
+    clickOnCustomizeControlPauseButton: () => {
+        audioPlayerPage.customizeControlPauseButton()
+            .click();
+    },
+
+    clickOnCustomizeControlSeekButton: () => {
+        audioPlayerPage.customizeControlSeekButton()
+            .click();
+    },
+
+    verifyAdvancedPlayerTimerButtonSelectedState: () => {
+        audioPlayerPage.advancedPlayerTimerButton()
+            .should('have.class', 'ngie-toggle-button-selected')
+            .within(() => {
+                utilities.verifyElementVisibilityState(audioPlayerPage.selectedButtonIcon(), 'visible');
+            });
+    },
+
+    verifyAdvancedPlayerProgressBarButtonSelectedState: () => {
+        audioPlayerPage.advancedPlayerProgressBarButton()
+            .should('have.class', 'ngie-toggle-button-selected')
+            .within(() => {
+                utilities.verifyElementVisibilityState(audioPlayerPage.selectedButtonIcon(), 'visible');
+            });
+    },
+
+    verifyAdvancedPlayerVolumeControlButtonSelectedState: () => {
+        audioPlayerPage.advancedPlayerVolumeControlButton()
+            .should('have.class', 'ngie-toggle-button-selected')
+            .within(() => {
+                utilities.verifyElementVisibilityState(audioPlayerPage.selectedButtonIcon(), 'visible');
+            });
+    },
+
+    verifyAdvancedPlayerTimerButtonDeselectedState: () => {
+        audioPlayerPage.advancedPlayerTimerButton()
+            .should('have.class', 'ngie-toggle-button-not-selected')
+            .within(() => {
+                utilities.verifyElementVisibilityState(audioPlayerPage.selectedButtonIcon(), 'hidden');
+            });
+    },
+
+    verifyAdvancedPlayerProgressBarButtonDeselectedState: () => {
+        audioPlayerPage.advancedPlayerProgressBarButton()
+            .should('have.class', 'ngie-toggle-button-not-selected')
+            .within(() => {
+                utilities.verifyElementVisibilityState(audioPlayerPage.selectedButtonIcon(), 'hidden');
+            });
+    },
+
+    verifyAdvancedPlayerVolumeControlButtonDeselectedState: () => {
+        audioPlayerPage.advancedPlayerVolumeControlButton()
+            .should('have.class', 'ngie-toggle-button-not-selected')
+            .within(() => {
+                utilities.verifyElementVisibilityState(audioPlayerPage.selectedButtonIcon(), 'hidden');
+            });
+    },
+
+    clickOnAdvancedPlayerTimerButton: () => {
+        audioPlayerPage.advancedPlayerTimerButton()
+            .click();
+    },
+
+    clickOnAdvancedPlayerProgressBarButton: () => {
+        audioPlayerPage.advancedPlayerProgressBarButton()
+            .click();
+    },
+
+    clickOnAdvancedPlayerVolumeControlButton: () => {
+        audioPlayerPage.advancedPlayerVolumeControlButton()
+            .click();
+    },
+
+    verifyAllowStudentsToDownloadAudioCheckboxNotChecked: () => {
+        audioPlayerPage.allowStudentsToDownloadAudioCheckbox()
+            .should('not.be.checked');
+    },
+
+    verifyAllowStudentsToDownloadAudioCheckboxChecked: () => {
+        audioPlayerPage.allowStudentsToDownloadAudioCheckbox()
+            .should('be.checked');
+    },
+
+    checkUncheckAllowStudentsToDownloadAudioCheckbox: () => {
+        audioPlayerPage.allowStudentsToDownloadAudioCheckbox()
             .click();
     },
 
@@ -324,25 +523,18 @@ const steps = {
             .should('have.text', '00:01');
     },
 
-    waitForAudioFileSrcToLoad: () => {
-        audioPlayerPage.audioFileSrc()
-            .should('have.attr', 'src')
-            .and('not.be.empty');
-    },
-
-
     /**
-    * Verifies the audio playback timer on the audio player.
-    * @param {string} time - The elapsed time and total time in the format "elapsed/total."
-    * @returns {void}
-    */
+     * Verifies the audio playback timer on the audio player.
+     * @param {string} time - The elapsed time and total time in the format "elapsed/total."
+     * @returns {void}
+     */
     verifyAudioPlaybackTimer: (time) => {
         const elapsedTime = time.split('/')[0];
         const totalTime = time.split('/')[1];
         audioPlayerPage.playbackElapsedTime()
             .should('have.text', elapsedTime)
         audioPlayerPage.playbackTotalTime()
-            .should('have.text', totalTime)
+            .should('have.text', `/${totalTime}`)
     },
 
     /**
@@ -359,36 +551,74 @@ const steps = {
             .click();
     },
 
-
-    clickOnBackwardButton: () => {
-        audioPlayerPage.backwardButton()
+    closeTranscriptModal: () => {
+        audioPlayerPage.transcriptModalCloseButton()
             .click();
     },
 
-    clickOnForwardButton: () => {
-        audioPlayerPage.forwardButton()
-            .click();
+    focusAwayFromElement: () => {
+        cy.get('body')
+            .click({ position: 'topLeft' });
     },
 
-    clickOnPlayButton: () => {
-        utilities.verifyElementVisibilityState(audioPlayerPage.playButton(), 'visible'); //Added to counter error occurrence when switching to preview tab and clinking on play button 
-        audioPlayerPage.playButton()
+    verifyWindowOpenMethodAfterClickingOnDownloadAudioButton: () => {
+        cy.window()
+            .then((win) => {
+                cy.stub(win, 'open')
+                    .as('windowOpen')
+            });
+        audioPlayerPage.audioDownloadButton()
             .click();
+        cy.get('@windowOpen')
+            .should('be.calledWith', '');
     },
 
-    clickOnStopButton: () => {
-        audioPlayerPage.stopButton()
-            .click();
-    },
-
-    verifyUnmutedVolumeIconIsDisplayedInPreviewTab: () => {
-        utilities.verifyElementVisibilityState(audioPlayerPage.unmutedVolumeIcon(), 'visible');
+    waitForAudioFileSrcToLoad: () => {
+        audioPlayerPage.audioFileSrc()
+            .should('have.attr', 'src')
+            .and('not.be.empty');
     }
 }
 
 const tests = {
+    ...createQuestionBasePage.tests,
     ...commonComponents.tests,
-    ...playbackControlsBaseComponent.tests,
+    //Header section
+    verifyCancelButton: () => {
+        it('When user has made no edits and clicks on Cancel button, the user should be directed back to the \'Select a Question\' page', () => {
+            createQuestionBasePage.cancelButton()
+                .click();
+            utilities.verifyElementVisibilityState(selectQuestionResourceToolPage.selectAQuestionHeaderText(), 'visible');
+            utilities.verifyElementVisibilityState(selectQuestionResourceToolPage.questionTypeOptionTitle(), 'visible');
+        });
+
+        it('When user has made some edits/changes and clicks on Cancel button, a popup should be displayed', () => {
+            selectQuestionResourceToolPage.steps.selectResourceType('Audio Player');
+            audioPlayerPage.steps.setPlaybackLimit('5');
+            createQuestionBasePage.cancelButton()
+                .click();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible')
+        });
+
+        dialogBoxBase.tests.verifyContentsOfLeavePagePopupWithCSSAnda11y();
+
+        it(`Clicking on \'No, I'd like to go back\' button should close the popup and user should remain on the edit interface of the question`, () => {
+            dialogBoxBase.buttonReject()
+                .click();
+            createQuestionBasePage.editTab()
+                .should('have.attr', 'aria-selected', 'true')
+            audioPlayerPage.steps.verifyPlaybackLimitInputFieldValue('5');
+        });
+
+        it(`Clicking on \'Yes, I want to leave this page\' button should discard all changes and direct the user to the \'Select a question\' page.`, () => {
+            createQuestionBasePage.cancelButton()
+                .click();
+            dialogBoxBase.buttonAccept()
+                .click();
+            utilities.verifyElementVisibilityState(selectQuestionResourceToolPage.selectAQuestionHeaderText(), 'visible');
+            utilities.verifyElementVisibilityState(selectQuestionResourceToolPage.questionTypeOptionTitle(), 'visible');
+        });
+    },
 }
 
 export const audioPlayerPage = {