itemengine-cypress-automation 1.0.252 → 1.0.253

package/cypress/pages/components/ckEditorAudioPlayerComponent.js

@@ -0,0 +1,615 @@
+import utilities from "../../support/helpers/utilities";
+import { dialogBoxBase } from "../dialogBoxBase";
+import { createQuestionBasePage } from "../components/createQuestionBasePage.js";
+import { questionInstructionsComponent } from "../components/questionInstructionsComponent";
+import { audioResponsePage } from "../audioResponsePage";
+import { audioPlayerPage } from "../audioPlayerPage.js";
+const css = Cypress.env('css');
+
+const selectors = {
+    ...createQuestionBasePage,
+    ...dialogBoxBase,
+    ...questionInstructionsComponent,
+    ...audioResponsePage,
+    ...audioPlayerPage,
+    audioPlayerIcon: () => cy.get('[title="Audio Player"]'),
+    tableIcon: () => cy.get('[title="Insert Table"]'),
+    linkIcon: () => cy.get('[title="Link (Ctrl+K)"]'),
+    ckEditorToolDialogBox: () => cy.get('[aria-labelledby="alert-dialog-title"]'),
+    ckEditorToolDialogBoxTitle: () => cy.get('#alert-dialog-title'),
+    ckEditorToolDialogBoxCloseIcon: () => cy.get('[data-at="close-button"]'),
+    ckEditorToolAudioPlayerBlock: () => cy.get('.audioplayer-wrapper'),
+    ckEditorToolAudioPlayerDragHandle: () => cy.get('.cke_widget_drag_handler_container'),
+    inputTypeFile: () => cy.get('input[type="file"]'),
+    inputTypeTranscriptFile: () => cy.get('.upload-transcript-file input[type="file"]'),
+    linkUploadTab: () => cy.get('a[title="Upload"]'),
+    sendItToServer: () => cy.get('[title="Send it to the Server"]'),
+    okButton: () => cy.get('.action-btn-wrapper .action-button').eq(0),
+    cancelButton: () => cy.get('.action-btn-wrapper .action-button').eq(1),
+    addUrlButton: () => cy.get('.add-url-opt-label'),
+    addAudioButton: () => cy.get('.add-audio-opt-label'),
+    addAudioURLRadioButton: () => cy.get('input[value="Add audio URL"]'),
+    uploadAudioFileRadioButton: () => cy.get('input[value="Upload audio file"]'),
+    fileUploadProgressBar: () => cy.get('.uploadAudioFile .audio-player-form-progressbar'),
+    //Upload section
+    uploadLabel: () => cy.get('.upload-audio-label'),
+    fileNameLabel: () => cy.get('.filename-audio-label'),
+    chooseFileButton: () => cy.get('.uploadAudioFile .file-input-btn-wrapper button'),
+    noFileChosenLabel: () => cy.get('.selected-file-wrapper'),
+    uploadedFileNameLabel: () => cy.get('.selected-file-wrapper'),
+    //Error
+    sourceUrlInputFieldErrorMessage: () => cy.get('.error-text-message'),
+    uploadFileSectionErrorMessage: () => cy.get('[class*="AudioPlayerFormstyles__ErrorBlock"]'),
+    uploadTranscriptFileSectionErrorMessage: () => cy.get('.upload-transcript-file [class*="AudioPlayerFormstyles__ErrorBlock"]'),
+    //prompt
+    promptInputField: () => cy.get('[role="textbox"][title="Prompt"]'),
+    //Source URL Input field
+    sourceUrlLabel: () => cy.get('.source-url-text-field'),
+    //Transcript section
+    transcriptLabel: () => cy.get('.transcript-label'),
+    uploadTranscriptFileLabel: () => cy.get('.upload-transcript-opt-label'),
+    uploadTranscriptFileRadioButton: () => cy.get('.transcript-upload-input'),
+    typeInTranscriptLabel: () => cy.get('.type-in-transcript-opt-label'),
+    typeInTranscriptRadioButton: () => cy.get('.transcript-type-in-input'),
+    uploadTranscriptLabel: () => cy.get('.upload-transcript-file-label'),
+    transcriptFileNameLabel: () => cy.get('.filename-transcript-label'),
+    chooseTranscriptFileButton: () => cy.get('.upload-transcript-file .file-input-btn-wrapper button'),
+    transcriptFileUploadProgressBar: () => cy.get('.upload-transcript-file .audio-player-form-progressbar'),
+    typeInTranscriptInputFieldLabel: () => cy.get('.transcript-text-field'),
+    typeInTranscriptInputField: () => cy.get('[aria-label="Transcript"]'),
+    //Transcript section Preview
+    transcriptButton: () => cy.get('.audio-transcript-icon-wr'),
+    playbackPlayer: () => cy.get('.audio-resource-preview-wrapper'),
+    transcriptModal: () => cy.get('.transcript-wrapper'),
+    transcriptModalTitle: () => cy.get('.transcript-title'),
+    transcriptModalCloseButton: () => cy.get('[aria-label="Close"]'),
+    transcriptModalContent: () => cy.get('.transcript-content'),
+    //Student view settings
+    studentViewSettingLabel: () => cy.get('[class*="AudioPlayerFormstyles__StudentViewSettingLabel"]'),
+    customizePlayerLayoutSettings: () => cy.get('[data-testid="custom-ui-playback-accordion-label"]'),
+    allowStudentsToDownloadAudioLabel: () => cy.get('.allow-students-to-download-audio-label').eq(0),
+    allowStudentsToDownloadAudioCheckBox: () => cy.get('input[name*="allow-students-to-download"]'),
+    limitPlayAttempts: () => cy.get('[name*="limit-play-attempts"]'),
+    limitPlayAttemptsLabel: () => cy.get('.allow-students-to-download-audio-label').eq(1),
+    playbackLimitLabel: () => cy.get('.playback-limit-text-field'),
+    playbackLimitInputField: () => cy.get('input[aria-label="Playback Limit"]'),
+    customizeUIControlAccordionLabel: () => cy.get('[data-testid="custom-ui-playback-accordion-label"]'),
+    customizeUIControlsForPlaybackChevronIcon: () => cy.get('[class*="AudioPlayerFormstyles__CustomUIPlaybackLabelStyle"]').parents('[role="button"]').find('svg'),
+    customizeUIControlAccordion: () => cy.get('[data-ngie-testid="custom-ui-playback-accordion"]'),
+    customizeControlPauseButton: () => cy.get('[value="pause"]'),
+    customizeControlSeekButton: () => cy.get('[value="seek"]'),
+    customizeControlPlayBackSpeedButton: () => cy.get('[value="playbackSpeed"]'),
+    customizeControlAddPinButton: () => cy.get('[value="addPin"]'),
+    customizeControlForwardBackwardButton: () => cy.get('[value="forwardBackward"]'),
+    customizeControlVolumeButton: () => cy.get('[value="volumeControl"]'),
+    customizeControlTimerButton: () => cy.get('[value="timer"]'),
+    customizeControlProgressBarButton: () => cy.get('[value="progressBar"]'),
+    selectedButtonIcon: () => cy.get('.selected-button-wrapper'),
+    unCheckAllButton: () => cy.get('.uncheck-button'),
+    //Audio Player Style
+    audioPlayerStyleWrapper: () => cy.get('[class*="AudioPlayerFormstyles__PlayerTypePlaybackLimitWrapper"]'),
+    audioPlayerStyleLabel: () => cy.get('.player-style-label'),
+    compactPlayerOptionsLabel: () => cy.get('.options-label').eq(1),
+    //Preview
+    playbackPlayButton: () => cy.get('button[aria-label="Play"]'),
+    playbackPauseButton: () => cy.get('button[aria-label="Pause"]'),
+    audioFileSrc: () => cy.get('.audio-player-toolbar audio'),
+    playbackTimer: () => cy.get('.audio-player-current-time'),
+    playbackLimitHelpText: () => cy.get('.playback-limit-remaining'),
+    playbackDownloadButton: () => cy.get('.audio-download-icon-wr'),
+    playbackSlider: () => cy.get('input[aria-label="Slider bar"]'),
+}
+
+const steps = {
+    ...createQuestionBasePage.steps,
+    ...questionInstructionsComponent.steps,
+    ...audioResponsePage.steps,
+    ...audioPlayerPage.steps,
+
+    verifyAddAudioURLCheckedState: () => {
+        ckEditorAudioPlayerComponent.addAudioURLRadioButton()
+            .should('be.checked');
+    },
+
+    verifyAddAudioURLUncheckedState: () => {
+        ckEditorAudioPlayerComponent.addAudioURLRadioButton()
+            .should('not.be.checked');
+    },
+
+    verifyUploadAudioFileCheckedState: () => {
+        ckEditorAudioPlayerComponent.uploadAudioFileRadioButton()
+            .should('be.checked');
+    },
+
+    verifyUploadAudioFileUncheckedState: () => {
+        ckEditorAudioPlayerComponent.uploadAudioFileRadioButton()
+            .should('not.be.checked');
+    },
+
+    focusInAndFocusOutOfSourceURLInputField: () => {
+        ckEditorAudioPlayerComponent.sourceUrlInputField()
+            .click()
+            .blur();
+    },
+
+    verifyUploadTranscriptFileCheckedState: () => {
+        ckEditorAudioPlayerComponent.uploadTranscriptFileRadioButton()
+            .should('be.checked');
+    },
+
+    verifyUploadTranscriptFileUncheckedState: () => {
+        ckEditorAudioPlayerComponent.uploadTranscriptFileRadioButton()
+            .should('not.be.checked');
+    },
+
+    verifyTypeInTranscriptCheckedState: () => {
+        ckEditorAudioPlayerComponent.typeInTranscriptRadioButton()
+            .should('be.checked');
+    },
+
+    verifyAllowStudentsToDownloadAudioCheckboxNotChecked: () => {
+        ckEditorAudioPlayerComponent.allowStudentsToDownloadAudioCheckBox()
+            .should('not.be.checked');
+    },
+
+    verifyAllowStudentsToDownloadAudioCheckboxChecked: () => {
+        ckEditorAudioPlayerComponent.allowStudentsToDownloadAudioCheckBox()
+            .should('be.checked');
+    },
+
+    checkUncheckAllowStudentsToDownloadAudioCheckbox: () => {
+        ckEditorAudioPlayerComponent.allowStudentsToDownloadAudioCheckBox()
+            .click();
+    },
+
+    verifyCustomizeUIControlAccordionChevronIcon: () => {
+        ckEditorAudioPlayerComponent.customizeUIControlsForPlaybackChevronIcon()
+            .should('be.visible');
+    },
+
+    verifyCustomizeUIControlAccordionCollapsedState: () => {
+        ckEditorAudioPlayerComponent.customizeUIControlAccordion()
+            .should('have.attr', 'aria-expanded', 'false');
+    },
+
+    verifyCustomizeUIControlAccordionExpandedState: () => {
+        ckEditorAudioPlayerComponent.customizeUIControlAccordion()
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    verifyCustomizeControlPauseButtonSelectedState: () => {
+        ckEditorAudioPlayerComponent.customizeControlPauseButton()
+            .should('have.attr', 'aria-pressed', 'true')
+            .within(() => {
+                utilities.verifyElementVisibilityState(ckEditorAudioPlayerComponent.selectedButtonIcon(), 'visible');
+            });
+    },
+
+    verifyCustomizeControlSeekButtonSelectedState: () => {
+        ckEditorAudioPlayerComponent.customizeControlSeekButton()
+            .should('have.attr', 'aria-pressed', 'true')
+            .within(() => {
+                utilities.verifyElementVisibilityState(ckEditorAudioPlayerComponent.selectedButtonIcon(), 'visible');
+            });
+    },
+
+    verifyCustomizeControlPlayBackSpeedButtonSelectedState: () => {
+        ckEditorAudioPlayerComponent.customizeControlPlayBackSpeedButton()
+            .should('have.attr', 'aria-pressed', 'true')
+            .within(() => {
+                utilities.verifyElementVisibilityState(ckEditorAudioPlayerComponent.selectedButtonIcon(), 'visible');
+            });
+    },
+
+    verifyCustomizeControlAddPinButtonSelectedState: () => {
+        ckEditorAudioPlayerComponent.customizeControlAddPinButton()
+            .should('have.attr', 'aria-pressed', 'true')
+            .within(() => {
+                utilities.verifyElementVisibilityState(ckEditorAudioPlayerComponent.selectedButtonIcon(), 'visible');
+            });
+    },
+
+    verifyCustomizeControlForwardBackwardButtonSelectedState: () => {
+        ckEditorAudioPlayerComponent.customizeControlForwardBackwardButton()
+            .should('have.attr', 'aria-pressed', 'true')
+            .within(() => {
+                utilities.verifyElementVisibilityState(ckEditorAudioPlayerComponent.selectedButtonIcon(), 'visible');
+            });
+    },
+
+    verifyCustomizeControlPauseButtonDeselectedState: () => {
+        ckEditorAudioPlayerComponent.customizeControlPauseButton()
+            .should('have.attr', 'aria-pressed', 'false')
+            .within(() => {
+                utilities.verifyElementVisibilityState(ckEditorAudioPlayerComponent.selectedButtonIcon(), 'hidden');
+            });
+    },
+
+    verifyCustomizeControlSeekButtonDeselectedState: () => {
+        ckEditorAudioPlayerComponent.customizeControlSeekButton()
+            .should('have.attr', 'aria-pressed', 'false')
+            .within(() => {
+                utilities.verifyElementVisibilityState(ckEditorAudioPlayerComponent.selectedButtonIcon(), 'hidden');
+            });
+    },
+
+    verifyCustomizeControlPlayBackSpeedButtonDeselectedState: () => {
+        ckEditorAudioPlayerComponent.customizeControlPlayBackSpeedButton()
+            .should('have.attr', 'aria-pressed', 'false')
+            .within(() => {
+                utilities.verifyElementVisibilityState(ckEditorAudioPlayerComponent.selectedButtonIcon(), 'hidden');
+            });
+    },
+
+    verifyCustomizeControlAddPinButtonDeselectedState: () => {
+        ckEditorAudioPlayerComponent.customizeControlAddPinButton()
+            .should('have.attr', 'aria-pressed', 'false')
+            .within(() => {
+                utilities.verifyElementVisibilityState(ckEditorAudioPlayerComponent.selectedButtonIcon(), 'hidden');
+            });
+    },
+
+    verifyCustomizeControlForwardBackwardButtonDeselectedState: () => {
+        ckEditorAudioPlayerComponent.customizeControlForwardBackwardButton()
+            .should('have.attr', 'aria-pressed', 'false')
+            .within(() => {
+                utilities.verifyElementVisibilityState(ckEditorAudioPlayerComponent.selectedButtonIcon(), 'hidden');
+            });
+    },
+
+    verifyUnCheckAllButtonInDisabledState: () => {
+        ckEditorAudioPlayerComponent.unCheckAllButton()
+            .should('have.attr', 'disabled');
+    },
+
+    switchToEditTab: () => {
+        createQuestionBasePage.editTab()
+            .click()
+            .should('have.attr', 'aria-selected', 'true');
+    },
+
+    switchToPreviewTab: () => {
+        cy.wait(2000);
+        createQuestionBasePage.previewTab()
+            .click()
+            .should('have.attr', 'aria-selected', 'true');
+    },
+
+    seekProgressBarSliderToCenter: () => {
+        ckEditorAudioPlayerComponent.playbackProgressBar()
+            .click();
+    },
+
+    verifyPlaybackProgressBarSliderEnabledState: () => {
+        ckEditorAudioPlayerComponent.playbackSlider()
+            .should('be.enabled');
+    },
+
+    verifyPlaybackProgressBarSliderDisabledState: () => {
+        ckEditorAudioPlayerComponent.playbackSlider()
+            .should('be.disabled');
+    },
+
+    verifyPlaybackPlayButtonDisabledState: () => {
+        ckEditorAudioPlayerComponent.playbackPlayButton()
+            .should('be.disabled');
+    },
+
+    verifyPlaybackTranscriptButtonEnabledState: () => {
+        ckEditorAudioPlayerComponent.transcriptButton()
+            .should('be.enabled');
+    },
+
+    verifyWindowOpenMethodAfterClickingOnDownloadAudioButton: () => {
+        cy.window()
+            .then((win) => {
+                cy.stub(win, 'open')
+                    .as('windowOpen')
+            });
+        ckEditorAudioPlayerComponent.playbackDownloadButton()
+            .click();
+        cy.get('@windowOpen')
+            .should('be.calledWith', '');
+    },
+
+    verifyPlaybackPauseButtonEnabledState: () => {
+        ckEditorAudioPlayerComponent.playbackPauseButton()
+            .should('be.enabled');
+    },
+
+    verifyPlaybackPauseButtonDisabledState: () => {
+        ckEditorAudioPlayerComponent.playbackPauseButton()
+            .should('be.disabled');
+    },
+
+    clearInPromptInputField: () => {
+        ckEditorAudioPlayerComponent.questionInstructionsInputField()
+            .clear();
+    },
+
+    focusInAndFocusOutOfPlaybackLimitInputField: () => {
+        ckEditorAudioPlayerComponent.playbackLimitInputField()
+            .click()
+            .blur();
+    },
+
+    focusInQuestionInstructionsInputField: () => {
+        ckEditorAudioPlayerComponent.questionInstructionsInputField()
+            .click();
+    },
+
+    focusInAndFocusOutOfQuestionInstructionsInputField: () => {
+        ckEditorAudioPlayerComponent.questionInstructionsInputField()
+            .click()
+            .blur();
+    },
+
+    focusInPromptInputField: () => {
+        ckEditorAudioPlayerComponent.promptInputField()
+            .click();
+        cy.scrollTo('top');
+    },
+
+    selectAudioPlayerOptionFromCKEditorToolbar: () => {
+        ckEditorAudioPlayerComponent.audioPlayerIcon()
+            .eq(0)
+            .click();
+    },
+
+    clickOnAudioPlayerBlock: () => {
+        ckEditorAudioPlayerComponent.ckEditorToolAudioPlayerBlock()
+            .dblclick();
+    },
+
+    clickOnTranscriptButton: () => {
+        ckEditorAudioPlayerComponent.transcriptButton()
+            .click();
+    },
+
+    closeTranscriptModal: () => {
+        ckEditorAudioPlayerComponent.transcriptModalCloseButton()
+            .click();
+    },
+
+    clickOnOKButton: () => {
+        ckEditorAudioPlayerComponent.okButton()
+            .click();
+    },
+
+    clickOnCancelButton: () => {
+        ckEditorAudioPlayerComponent.cancelButton()
+            .click();
+    },
+
+    clickOnAddUrlRadioButton: () => {
+        ckEditorAudioPlayerComponent.addUrlButton()
+            .click();
+    },
+
+    clickOnAddAudioRadioButton: () => {
+        ckEditorAudioPlayerComponent.addAudioButton()
+            .click();
+    },
+
+    clickOnLimitPlayAttempts: () => {
+        ckEditorAudioPlayerComponent.limitPlayAttempts()
+            .click();
+    },
+
+    clickOnTypeInTranscriptRadioButton: () => {
+        ckEditorAudioPlayerComponent.typeInTranscriptRadioButton()
+            .click();
+    },
+
+    clickOnCustomizeUIControlAccordion: () => {
+        ckEditorAudioPlayerComponent.customizeUIControlAccordion()
+            .click();
+    },
+
+    clickOnCustomizeControlPauseButton: () => {
+        ckEditorAudioPlayerComponent.customizeControlPauseButton()
+            .click();
+    },
+
+    clickOnCustomizeControlSeekButton: () => {
+        ckEditorAudioPlayerComponent.customizeControlSeekButton()
+            .click();
+    },
+
+    clickOnCustomizeControlPlayBackSpeedButton: () => {
+        ckEditorAudioPlayerComponent.customizeControlPlayBackSpeedButton()
+            .click();
+    },
+
+    clickOnCustomizeControlAddPinButton: () => {
+        ckEditorAudioPlayerComponent.customizeControlAddPinButton()
+            .click();
+    },
+
+    clickOnCustomizeControlForwardBackwardButton: () => {
+        ckEditorAudioPlayerComponent.customizeControlForwardBackwardButton()
+            .click();
+    },
+
+    clickOnCustomizeControlVolumeButton: () => {
+        ckEditorAudioPlayerComponent.customizeControlVolumeButton()
+            .click();
+    },
+
+    clickOnCustomizeControlTimerButton: () => {
+        ckEditorAudioPlayerComponent.customizeControlTimerButton()
+            .click();
+    },
+
+    clickOnCustomizeControlProgressBarButton: () => {
+        ckEditorAudioPlayerComponent.customizeControlProgressBarButton()
+            .click();
+    },
+
+    clickOnUnCheckAllButton: () => {
+        ckEditorAudioPlayerComponent.unCheckAllButton()
+            .click();
+    },
+
+    /**
+     * Enters text into the source URL input field on the audio player popup.
+     * @param {string} text - The text to be entered into the source URL input field.
+     * @returns {void}
+     */
+    enterTextInSourceURLInputField: (text) => {
+        ckEditorAudioPlayerComponent.sourceUrlInputField()
+            .type(text, { delay: 0 })
+            .blur();
+    },
+
+    /**
+     * Enters text into the transcript input field on the audio player popup.
+     * @param {string} text - The text to be entered into the transcript input field.
+     */
+    enterTextInTranscriptInputField: (text) => {
+        ckEditorAudioPlayerComponent.typeInTranscriptInputField()
+            .type(text, { delay: 0 })
+            .blur();
+    },
+
+    clearTextInSourceURLInputField: () => {
+        ckEditorAudioPlayerComponent.sourceUrlInputField()
+            .clear();
+    },
+
+    clickOnUploadAudioFileRadioButton: () => {
+        ckEditorAudioPlayerComponent.uploadAudioFileRadioButton()
+            .click();
+    },
+
+    startPlayback: () => {
+        ckEditorAudioPlayerComponent.playbackPlayButton()
+            .click();
+    },
+
+    pausePlayback: () => {
+        ckEditorAudioPlayerComponent.playbackPauseButton()
+            .click();
+    },
+
+    waitForPlaybackToBegin: () => {
+        steps.waitForAudioFileSrcToLoad();
+        ckEditorAudioPlayerComponent.playbackTimer()
+            .should('have.text', '00:01');
+    },
+
+    waitForAudioFileSrcToLoad: () => {
+        ckEditorAudioPlayerComponent.audioFileSrc()
+            .should('have.attr', 'src')
+            .and('not.be.empty');
+    },
+
+    /**
+     * Uploads a file to the audio player by attaching the file located at the specified filePath.
+     * @param {string} file name of the file in fixtures/upload folder
+     * @description this function uploads a file
+     */
+    uploadFile: (file) => {
+        ckEditorAudioPlayerComponent.inputTypeFile()
+            .attachFile(`uploads/${file}`);
+    },
+
+    /**
+     * Uploads a transcript file to the audio player by attaching the file located at the specified filePath.
+     * @param {string} file name of the file in fixtures/upload folder
+     * @description this function uploads a transcript file
+     */
+    uploadTranscriptFile: (file) => {
+        ckEditorAudioPlayerComponent.inputTypeTranscriptFile()
+            .attachFile(`uploads/${file}`);
+    },
+
+    /**
+       * 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}
+    */
+    setPlaybackLimit: (value) => {
+        ckEditorAudioPlayerComponent.playbackLimitInputField()
+            .clear()
+            .type(value);
+        cy.wait(2000);
+    },
+
+    /**
+     * 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}
+     */
+    verifyPlaybackLimitInputFieldValue: (value) => {
+        ckEditorAudioPlayerComponent.playbackLimitInputField()
+            .should('have.attr', 'value', value);
+    },
+}
+
+const tests = {
+    ...questionInstructionsComponent.tests,
+    ...audioResponsePage.tests,
+    ...audioPlayerPage.tests,
+
+    verifyCkEditorToolHeader: (tool) => {
+        let selector;
+
+        if (tool == 'Audio Player') {
+            selector = ckEditorAudioPlayerComponent.audioPlayerIcon
+        } else {
+            return `Invalid tool: ${tool}`
+        }
+        it(`\'${tool}\' icon should be displayed in CKEditor of input field`, () => {
+            utilities.verifyElementVisibilityState(selector(), 'visible');
+            selector()
+                .should('have.attr', 'title', `${tool}`);
+        });
+
+        it(`CSS of \'${tool}\' icon`, { tags: 'css' }, () => {
+            utilities.verifyCSS(selector(), {
+                'fill': 'rgb(0, 0, 0)',
+            });
+        });
+
+        it(`Accessibility of \'${tool}\' icon`, { tags: 'a11y' }, () => {
+            cy.checkAccessibility(selector());
+        });
+
+        it(`When user clicks on \'${tool}\' icon,  \'${tool}\' popup should be displayed`, () => {
+            ckEditorAudioPlayerComponent.steps.selectAudioPlayerOptionFromCKEditorToolbar();
+            utilities.verifyElementVisibilityState(ckEditorAudioPlayerComponent.ckEditorToolDialogBox(), 'visible');
+            utilities.verifyInnerText(ckEditorAudioPlayerComponent.ckEditorToolDialogBoxTitle(), 'Audio player');
+        });
+
+        it(`\'${tool}\' label should be displayed in popup header along with cross icon.`, () => {
+            utilities.verifyInnerText(ckEditorAudioPlayerComponent.ckEditorToolDialogBoxTitle(), 'Audio player');
+            utilities.verifyElementVisibilityState(ckEditorAudioPlayerComponent.ckEditorToolDialogBoxTitle(), 'visible');
+            utilities.verifyElementVisibilityState(ckEditorAudioPlayerComponent.ckEditorToolDialogBoxCloseIcon(), 'visible');
+        });
+
+        it(`CSS of \'${tool}\' label`, { tags: 'css' }, () => {
+            utilities.verifyCSS(ckEditorAudioPlayerComponent.ckEditorToolDialogBoxTitle().find('.dialog-title-wrapper'), {
+                'color': 'rgb(72, 72, 72)',
+                'font-size': '12px',
+                'font-weight': '700'
+            });
+        });
+
+        it(`Accessibility of \'${tool}\' Popup`, { tags: 'a11y' }, () => {
+            cy.checkAccessibility(ckEditorAudioPlayerComponent.ckEditorToolDialogBox());
+        });
+
+        it(`When user clicks on cross icon present in popup, \'${tool}\' popup should close.`, () => {
+            ckEditorAudioPlayerComponent.ckEditorToolDialogBoxCloseIcon()
+                .click();
+            utilities.verifyElementVisibilityState(ckEditorAudioPlayerComponent.ckEditorToolDialogBox(), 'notExist');
+        });
+    }
+}
+
+export const ckEditorAudioPlayerComponent = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/components/ckEditorEquationEditorComponent.js

@@ -0,0 +1,41 @@
+import { dialogBoxBase } from "../dialogBoxBase";
+import { createQuestionBasePage } from "../components/createQuestionBasePage.js";
+const css = Cypress.env('css');
+
+const selectors = {
+    ...createQuestionBasePage,
+    ...dialogBoxBase,
+    //Basic
+    equationEditorIcon: () => cy.get('.cke_button__nextgeneqneditor_icon'),
+    equationEditorLabel: () => cy.get('[class*="EquationEditorstyles__Heading"]'),
+    buttonOk: () => cy.get('.ok-btn'),
+    buttonCancel: () => cy.get('.cancel-btn'),
+    //Aria Label
+    ariaLabelText: () => cy.get('[class*="EquationEditorstyles__AriaLabelText"]').eq(1),
+    chevronDownIcon: () => cy.get('[class*="EquationEditorstyles__ChevronDownIconWrapper"]'),
+    //Select Mode
+    selectModeLabel: () => cy.get('[class*="EquationEditorstyles__SelectModeLabel"]'),
+    editorButton: () => cy.get('[aria-label="Editor"]'),
+    editorLabel: () => cy.get('[class*="EquationEditorstyles__RadioButtonLabel"]').eq(0),
+    latexCodeButton: () => cy.get('[aria-label="LaTex code"]'),
+    latexCodeLabel: () => cy.get('[class*="EquationEditorstyles__RadioButtonLabel"]').eq(1),
+    mathMLButton: () => cy.get('[aria-label="MathML"]'),
+    mathMLLabel: () => cy.get('[class*="EquationEditorstyles__RadioButtonLabel"]').eq(2),
+}
+
+const steps = {
+    selectEquationEditorOptionFromCKEditorToolbar: () => {
+        ckEditorEquationEditorComponent.equationEditorIcon()
+            .eq(0)
+            .click();
+    },
+}
+
+const tests = {
+}
+
+export const ckEditorEquationEditorComponent = {
+    ...selectors,
+    steps,
+    tests
+}