itemengine-cypress-automation 1.0.192 → 1.0.193-packageUpdated-87a683f.0

package/cypress/e2e/ILC/VideoResponseNew/compactRecorderStyle.smoke.js

@@ -1,605 +0,0 @@
-import { dialogBoxBase } from "../../../pages";
-import { videoResponsePage } from "../../../pages/videoResponsePage";
-import abortEarlySetup from "../../../support/helpers/abortEarly";
-import utilities from "../../../support/helpers/utilities";
-const css = Cypress.env('css');
-const grepTags = Cypress.env('grepTags');
-
-describe('Preview of Video response for compact recorder style', () => {
-    before(() => {
-        cy.loginAs('admin');
-    });
-
-    describe('Preview and Recording a video - Compact video recorder style', { tags: 'smoke' }, () => {
-        abortEarlySetup();
-        before(() => {
-            videoResponsePage.steps.navigateToCreateQuestion('video response');
-            cy.barsPreLoaderWait();
-            videoResponsePage.steps.selectVideoRecorderStyle('Compact');
-            videoResponsePage.steps.switchToPreviewTab();
-        });
-
-        it('If user selects \'Compact\' option from \'video recorder style\' toggle buttons, then \'Record\' button and \'Click the button to start recording...\' help text should be displayed in the preview tab', () => {
-            utilities.verifyElementVisibilityState(videoResponsePage.recordButtonCompactPreview(), 'visible');
-            utilities.verifyInnerText(videoResponsePage.recordButtonCompactPreview(), 'Record');
-            utilities.verifyInnerText(videoResponsePage.recordingHelpTextCompactPreview(), 'Click the button to start recording...');
-            utilities.verifyElementVisibilityState(videoResponsePage.recordingHelpTextCompactPreview(), 'visible');
-        });
-
-        it('CSS of Preview section', { tags: 'css' }, () => {
-            utilities.verifyCSS(videoResponsePage.recordButtonCompactPreview().parents('button'), {
-                'background-color': css.color.recordingIcon,
-                'color': css.color.whiteText,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.semibold
-            });
-            utilities.verifyCSS(videoResponsePage.recordButtonCompactPreview().find('svg'), {
-                'fill': css.color.defaultBackground
-            });
-            utilities.verifyCSS(videoResponsePage.recordingHelpTextCompactPreview(), {
-                'color': css.color.text,
-                'font-size': css.fontSize.normal,
-                'font-weight': css.fontWeight.regular
-            });
-        });
-
-        it('Accessibility of Preview section', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(videoResponsePage.previewTabQuestionWrapper());
-        });
-
-        it('When the user clicks on the \'Record\' button, a flyout should be displayed, a countdown should begin and help text "Preparing to record" should be displayed. The recording should start, \'Stop\' and \'Pause\' buttons should be displayed. \'Stop\' and \'Pause\' icon buttons, Total recording time, \'Recording...\' help text, timer should be displayed on the flyout. User should be able to view the duration of their recorded video in minutes, displayed as \'(min:secs / min:sec)\'.', () => {
-            videoResponsePage.steps.startRecordingCompactPreview();
-            utilities.verifyElementVisibilityState(videoResponsePage.recorderFlyoutCompactPreview(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.startRecordingCountDown(), 'visible');
-            videoResponsePage.steps.verifyRecordingStatusCompactPreview('Preparing to record')
-            utilities.verifyElementVisibilityState(videoResponsePage.stopRecordingButtonCompactPreview(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.pauseRecordingButtonCompactPreview(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.recordButtonCompactPreview(), 'notExist');
-            videoResponsePage.steps.waitForRecordingToStartCompactPreview();
-            utilities.verifyElementVisibilityState(videoResponsePage.stopRecordingFlyoutButton(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.pauseRecordingFlyoutButton(), 'visible');
-            videoResponsePage.steps.verifyRecordingStatusCompactPreview('Recording...')
-            cy.log('Waiting 2 seconds to check updated timer');
-            videoResponsePage.steps.addWaitToRecord(2000);
-            videoResponsePage.steps.verifyRecordingTime('00:04', '05:00');
-        });
-
-        it('CSS of \'Preview\' section once recording starts', { tags: 'css' }, () => {
-            utilities.verifyCSS(videoResponsePage.recordingStatusIcon().find('g'), {
-                'fill': css.color.recordingIcon,
-                'stroke': css.color.defaultBackground
-            });
-            utilities.verifyCSS(videoResponsePage.recordingTimerCompactPreview(), {
-                'color': css.color.liText,
-                'font-size': css.fontSize.small,
-                'font-weight': css.fontWeight.semibold
-            });
-            utilities.verifyCSS(videoResponsePage.recordingStatusTextCompactPreview(), {
-                'color': css.color.text,
-                'font-size': css.fontSize.normal,
-                'font-weight': css.fontWeight.regular
-            });
-            utilities.verifyCSS(videoResponsePage.pauseRecordingButtonCompactPreview().parents('button'), {
-                'background-color': css.color.secondaryBtnBg,
-                'color': css.color.secondaryBtn,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.semibold
-            });
-            utilities.verifyCSS(videoResponsePage.pauseRecordingButtonCompactPreview().find('[data-name="Icon material-pause-circle-filled"]'), {
-                'fill': css.color.secondaryBtn
-            });
-            utilities.verifyCSS(videoResponsePage.stopRecordingButtonCompactPreview().parents('button'), {
-                'background-color': css.color.primaryBtnBg,
-                'color': css.color.primaryBtn,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.semibold
-            });
-            utilities.verifyCSS(videoResponsePage.stopRecordingButtonCompactPreview().find('path'), {
-                'color': css.color.defaultBackground
-            });
-        });
-
-        it('Accessibility of Preview section once recording starts', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(videoResponsePage.previewTabQuestionWrapper());
-        });
-
-        it('When the recording is in-progress and user clicks on \'Pause\' button, recording should pause and the help text should update to \'Recording paused\'. Also the timer should display the amount of video recorded in relation to the total length of the recording. Format of timer should be \'(min:secs / min:sec)\'. Pause recording button should get replaced with Resume recording button. Resume and Stop icon buttons should be displayed in the flyout. Stop button should be displayed in preview tab', () => {
-            videoResponsePage.steps.resetQuestionPreview();
-            videoResponsePage.steps.startRecordingCompactPreview();
-            videoResponsePage.steps.waitForRecordingToStartCompactPreview();
-            videoResponsePage.steps.verifyRecordingStatusCompactPreview('Recording...');
-            videoResponsePage.steps.addWaitToRecord(4000);
-            videoResponsePage.steps.pauseRecordingCompactPreview();
-            videoResponsePage.steps.verifyRecordingTimeCompactPreview('00:05', '05:00');
-            videoResponsePage.steps.verifyRecordingStatusCompactPreview('Recording paused');
-            utilities.verifyElementVisibilityState(videoResponsePage.resumeRecordingButtonCompactPreview(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.stopRecordingButtonCompactPreview(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.resumeRecordingFlyoutButton(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.stopRecordingFlyoutButton(), 'visible');
-        });
-
-        it('CSS of \'Preview\' section if recording is paused', { tags: 'css' }, () => {
-            utilities.verifyCSS(videoResponsePage.resumeRecordingButtonCompactPreview().parents('button'), {
-                'background-color': css.color.recordingIcon,
-                'color': css.color.whiteText,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.semibold
-            });
-            utilities.verifyCSS(videoResponsePage.resumeRecordingButtonCompactPreview().find('svg'), {
-                'fill': css.color.defaultBackground
-            });
-            utilities.verifyCSS(videoResponsePage.recordingStatusTextCompactPreview(), {
-                'color': css.color.text,
-                'font-size': css.fontSize.normal,
-                'font-weight': css.fontWeight.regular
-            });
-        });
-
-        it('Accessibility of Preview section if recording is paused', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(videoResponsePage.previewTabQuestionWrapper());
-        });
-
-        it('When the recorder is in paused state and the user clicks on the \'Resume recording\' button the recording should get resumed from where it was paused. Resume recording button should update to Pause button and the help text should update to "Recording...". Resume icon button should get replaced with Pause icon button in the flyout, user should be able to view the duration of their recorded video in minutes, displayed as \'(min:secs / min:sec)\'. Stop button should be displayed in preview tab.', () => {
-            videoResponsePage.steps.resumeRecordingCompactPreview();
-            utilities.verifyElementVisibilityState(videoResponsePage.resumeRecordingButtonCompactPreview(), 'notExist');
-            utilities.verifyElementVisibilityState(videoResponsePage.pauseRecordingButtonCompactPreview(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.resumeRecordingFlyoutButton(), 'notExist');
-            utilities.verifyElementVisibilityState(videoResponsePage.pauseRecordingFlyoutButton(), 'visible');
-            videoResponsePage.steps.verifyRecordingStatusCompactPreview('Recording...');
-            videoResponsePage.steps.addWaitToRecord(1000);
-            videoResponsePage.steps.verifyRecordingLengthAfterResumingCompactPreview();
-        });
-
-        it('When the recording is inprogress and user clicks on \'Stop\' button, recording should stop. The recording should get saved and recorded video, progress bar, volume control, playback speed buttons should be displayed. Playback time of the recorded video should be displayed as \'(min:secs / min:sec)\'. Stop button should get replaced with Retake button and Play button should be displayed.', () => {
-            cy.log('Pre-step: Resetting question preview and start recording again')
-            videoResponsePage.steps.resetQuestionPreview();
-            videoResponsePage.steps.startRecordingCompactPreview();
-            videoResponsePage.steps.waitForRecordingToStartCompactPreview();
-            videoResponsePage.steps.addWaitToRecord(3000);
-            videoResponsePage.steps.stopRecordingCompactPreview();
-            videoResponsePage.steps.verifyVideoPlaybackTimerCompactPreview('00:00', '00:04');
-            utilities.verifyElementVisibilityState(videoResponsePage.stopRecordingButtonCompactPreview(), 'notExist');
-            utilities.verifyElementVisibilityState(videoResponsePage.retakeButtonCompactPreview(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.playPlaybackButtonCompactPreview(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.playPlaybackFlyoutButton(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.playbackProgressBar(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.volumeControlButton(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.playbackSpeedButton(), 'visible');
-        });
-
-        it('CSS of \'Preview\' section if recording is stopped', { tags: 'css' }, () => {
-            videoResponsePage.steps.resetQuestionPreview();
-            videoResponsePage.steps.startRecordingCompactPreview();
-            videoResponsePage.steps.waitForRecordingToStartCompactPreview();
-            videoResponsePage.steps.addWaitToRecord(1000);
-            cy.log('Waiting for 1 second pausing the recording and then clicking Stop')
-            videoResponsePage.steps.stopRecordingCompactPreview();
-            utilities.verifyCSS(videoResponsePage.recordingStatusTextCompactPreview(), {
-                'color': css.color.text,
-                'font-size': css.fontSize.normal,
-                'font-weight': css.fontWeight.regular
-            });
-        });
-
-        it('Accessibility of Preview section if recording is stopped', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(videoResponsePage.previewTabQuestionWrapper());
-        });
-
-        it('When recording is paused and the user clicks on \'Stop\' button, recording should stop. The recording should get saved.', () => {
-            cy.log('Pre-step: Resetting question preview and start recording again')
-            videoResponsePage.steps.resetQuestionPreview();
-            videoResponsePage.steps.startRecordingCompactPreview();
-            videoResponsePage.steps.waitForRecordingToStartCompactPreview();
-            videoResponsePage.steps.addWaitToRecord(1000);
-            cy.log('Waiting for 1 second pausing the recording and then clicking Stop')
-            videoResponsePage.steps.pauseRecordingCompactPreview();
-            videoResponsePage.steps.stopRecordingCompactPreview();
-            utilities.verifyElementVisibilityState(videoResponsePage.retakeButtonCompactPreview(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.playPlaybackButtonCompactPreview(), 'visible');
-        });
-
-        it('When recording is inprogress, recording should stop at maximum recording duration and \'Stop\' button should get replaced with Retake button. Playback button should be displayed in enabled state.', () => {
-            cy.log('Pre-step: Switch to edit tab and set maximum recording duration to 10 secs')
-            videoResponsePage.steps.switchToEditTab();
-            videoResponsePage.steps.setMaximumRecordingDuration(40);
-            videoResponsePage.steps.switchToPreviewTab();
-            videoResponsePage.steps.startRecordingCompactPreview();
-            videoResponsePage.steps.waitForRecordingToStartCompactPreview();
-            videoResponsePage.steps.addWaitToRecord(39000);
-            cy.log('Starting a recording and letting it record until maximum recording duration is reached');
-            videoResponsePage.steps.verifyVideoPlaybackTimerCompactPreview('00:00', '00:40');
-            utilities.verifyElementVisibilityState(videoResponsePage.stopRecordingButtonCompactPreview(), 'notExist');
-            utilities.verifyElementVisibilityState(videoResponsePage.retakeButtonCompactPreview(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.playPlaybackButtonCompactPreview(), 'visible');
-        });
-
-        it('When the user updates maximum recorder length the recording should stop at the updated recorder length', () => {
-            cy.log('Pre-step : Switching to edit tab, updating maximum recorder length and switching back to preview tab to reset the recording');
-            videoResponsePage.steps.switchToEditTab();
-            videoResponsePage.steps.setMaximumRecordingDuration(30);
-            videoResponsePage.steps.switchToPreviewTab();
-            videoResponsePage.steps.startRecordingCompactPreview();
-            videoResponsePage.steps.waitForRecordingToStartCompactPreview();
-            videoResponsePage.steps.addWaitToRecord(29000);
-            cy.log('Starting a recording and letting it record until maximum recording duration is reached');
-            videoResponsePage.steps.verifyVideoPlaybackTimerCompactPreview('00:00', '00:30')
-            cy.log('Switching to Edit tab to prevent browser level alert window from appearing');
-            videoResponsePage.steps.switchToEditTab();
-        });
-    });
-
-    describe('Recording a video using flyout buttons - Compact video recorder style', { tags: 'smoke' }, () => {
-        abortEarlySetup();
-        before(() => {
-            videoResponsePage.steps.navigateToCreateQuestion('video response');
-            cy.barsPreLoaderWait();
-            videoResponsePage.steps.selectVideoRecorderStyle('Compact');
-            videoResponsePage.steps.switchToPreviewTab();
-        });
-
-        it('When the recording is in-progress and user clicks on \'Pause\' icon button in the video recorder flyout, recording should pause and the help text should update to \'Recording paused\'. Also the timer should display the amount of video recorded in relation to the total length of the recording. Format of timer should be \'(min:secs / min:sec)\'. Pause recording button should get replaced with Resume recording button. Resume and Stop icon buttons should be displayed in the flyout. Stop button should be displayed in preview tab', () => {
-            videoResponsePage.steps.startRecordingCompactPreview();
-            videoResponsePage.steps.waitForRecordingToStartCompactPreview();
-            videoResponsePage.steps.verifyRecordingStatusCompactPreview('Recording...');
-            videoResponsePage.steps.addWaitToRecord(4000);
-            videoResponsePage.steps.pauseRecordingFlyoutButtonCompactPreview();
-            videoResponsePage.steps.verifyRecordingTimeCompactPreview('00:05', '05:00');
-            videoResponsePage.steps.verifyRecordingStatusCompactPreview('Recording paused');
-            utilities.verifyElementVisibilityState(videoResponsePage.resumeRecordingButtonCompactPreview(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.stopRecordingButtonCompactPreview(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.resumeRecordingFlyoutButton(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.stopRecordingFlyoutButton(), 'visible');
-        });
-
-        it('When the recorder is in paused state and the user clicks on the \'Resume recording\' icon button in the video recorder flyout, the recording should get resumed from where it was paused. Resume recording button should update to Pause button and the help text should update to "Recording...". Resume icon button should get replaced with Pause icon button in the flyout, user should be able to view the duration of their recorded video in minutes, displayed as \'(min:secs / min:sec)\'. Stop button should be displayed in preview tab.', () => {
-            videoResponsePage.steps.resumeRecordingFlyoutButtonCompactPreview();
-            utilities.verifyElementVisibilityState(videoResponsePage.resumeRecordingButtonCompactPreview(), 'notExist');
-            utilities.verifyElementVisibilityState(videoResponsePage.pauseRecordingButtonCompactPreview(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.resumeRecordingFlyoutButton(), 'notExist');
-            utilities.verifyElementVisibilityState(videoResponsePage.pauseRecordingFlyoutButton(), 'visible');
-            videoResponsePage.steps.verifyRecordingStatusCompactPreview('Recording...');
-            videoResponsePage.steps.addWaitToRecord(1000);
-            videoResponsePage.steps.verifyRecordingLengthAfterResumingCompactPreview();
-        });
-
-        it('When the recording is inprogress and user clicks on \'Stop\' icon button in the video recorder flyout, recording should stop. The recording should get saved and recorded video, progress bar, volume control, playback speed buttons should be displayed. Playback time of the recorded video should be displayed as \'(min:secs / min:sec)\'. Stop button should get replaced with Retake button and Play button should be displayed.', () => {
-            cy.log('Pre-step: Resetting question preview and start recording again')
-            videoResponsePage.steps.resetQuestionPreview();
-            videoResponsePage.steps.startRecordingCompactPreview();
-            videoResponsePage.steps.waitForRecordingToStartCompactPreview();
-            videoResponsePage.steps.addWaitToRecord(3000);
-            videoResponsePage.steps.stopRecordingFlyoutButtonCompactPreview();
-            videoResponsePage.steps.verifyVideoPlaybackTimerCompactPreview('00:00', '00:04');
-            utilities.verifyElementVisibilityState(videoResponsePage.stopRecordingButtonCompactPreview(), 'notExist');
-            utilities.verifyElementVisibilityState(videoResponsePage.retakeButtonCompactPreview(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.playPlaybackButtonCompactPreview(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.playPlaybackFlyoutButton(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.playbackProgressBar(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.volumeControlButton(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.playbackSpeedButton(), 'visible');
-        });
-    });
-
-    describe('Playback player : Default state', { tags: 'smoke' }, () => {
-        abortEarlySetup();
-        before(() => {
-            videoResponsePage.steps.navigateToCreateQuestion('video response');
-            cy.barsPreLoaderWait();
-            videoResponsePage.steps.selectVideoRecorderStyle('Compact');
-            videoResponsePage.steps.switchToPreviewTab();
-            videoResponsePage.steps.recordAndSaveVideoCompactPreview(5000);
-        });
-
-        it('When a recording is saved, A video player with \'Retake recording\' button, \'Play\' button and progress bar should be displayed. User should be able to view the duration of their recorded video in minutes, displayed as \'(min:secs)\'. Volume control and Playback speed buttons should be displayed', () => {
-            utilities.verifyElementVisibilityState(videoResponsePage.retakeButtonCompactPreview(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.playPlaybackButtonCompactPreview(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.retakeFlyoutButton(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.playPlaybackFlyoutButton(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.volumeControlButton(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.playbackSpeedButton(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.playbackProgressBar(), 'visible');
-            utilities.verifyElementVisibilityState(videoResponsePage.playbackTimeCompactPreview(), 'visible');
-            videoResponsePage.steps.verifyVideoPlaybackTimerCompactPreview('00:00', '00:05');
-        });
-
-        it('The progress bar should have a slider so that user can click/drag to seek the video.', () => {
-            utilities.verifyElementVisibilityState(videoResponsePage.progressBarSlider(), 'exist');
-        });
-
-        it('CSS of compact recorder style playback player', { tags: 'css' }, () => {
-            utilities.verifyCSS(videoResponsePage.retakeButtonCompactPreview().parents('button'), {
-                'background-color': css.color.recordingIcon,
-                'color': css.color.whiteText,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.semibold
-            });
-            utilities.verifyCSS(videoResponsePage.retakeButtonCompactPreview().parents('button').find('svg'), {
-                'fill': css.color.defaultBackground
-            });
-            utilities.verifyCSS(videoResponsePage.playbackTimeCompactPreview(), {
-                'color': css.color.liText,
-                'font-size': css.fontSize.small,
-                'font-weight': css.fontWeight.semibold
-            });
-            utilities.verifyCSS(videoResponsePage.playbackProgressBar().find('.MuiSlider-thumbSizeMedium'), {
-                'background-color': css.color.activeButtons
-            });
-            utilities.verifyCSS(videoResponsePage.playbackProgressBar().find('.MuiSlider-rail'), {
-                'border': `1px solid ${css.color.activeButtons}`
-            });
-            utilities.verifyCSS(videoResponsePage.volumeControlButton().find('[data-name="compact-volume-icon"]'), {
-                'fill': css.color.activeButtons
-            });
-            utilities.verifyCSS(videoResponsePage.playbackSpeedButton().find('[id="playback-speed"] path'), {
-                'fill': css.color.activeButtons
-            });
-        });
-
-        it('Accessibility of playback player - default state', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(videoResponsePage.previewTabQuestionWrapper());
-        });
-    });
-
-    if (!grepTags || !grepTags.includes('smoke')) {
-        describe('Playback player : Play, pause and seek', () => {
-            let actualVideoSeekedInPercent = 50
-            abortEarlySetup();
-            before(() => {
-                videoResponsePage.steps.navigateToCreateQuestion('video response');
-                cy.barsPreLoaderWait();
-                videoResponsePage.steps.selectVideoRecorderStyle('Compact');
-                videoResponsePage.steps.switchToPreviewTab();
-                videoResponsePage.steps.recordAndSaveVideoCompactPreview(10000);
-            });
-
-            it('When the user clicks on \'Play\' button, then the video should start playing. Timer should display the amount of video that has been played and the total video length in (mm:ss)/(mm:ss) format.', () => {
-                videoResponsePage.steps.startPlaybackCompactPreview();
-                videoResponsePage.steps.waitForPlaybackToBeginCompactPreview();
-                videoResponsePage.steps.verifyVideoPlaybackTimerCompactPreview('00:03', '00:10');
-            });
-
-            it('CSS of \'Preview\' section if playback is initiated', { tags: 'css' }, () => {
-                utilities.verifyCSS(videoResponsePage.playbackTimeCompactPreview(), {
-                    'color': css.color.liText,
-                    'font-size': css.fontSize.small,
-                    'font-weight': css.fontWeight.semibold
-                });
-                utilities.verifyCSS(videoResponsePage.playPlaybackButtonCompactPreview().parents('button'), {
-                    'background-color': css.color.transparent,
-                    'color': css.color.secondaryBtn,
-                    'font-size': css.fontSize.default,
-                    'font-weight': css.fontWeight.semibold
-                });
-                utilities.verifyCSS(videoResponsePage.playPlaybackButtonCompactPreview().parents('button').find('svg'), {
-                    'fill': css.color.secondaryBtn
-                });
-                utilities.verifyCSS(videoResponsePage.retakeButtonCompactPreview(), {
-                    'background-color': css.color.recordingIcon,
-                    'color': css.color.whiteText,
-                    'font-size': css.fontSize.default,
-                    'font-weight': css.fontWeight.semibold
-                });
-                utilities.verifyCSS(videoResponsePage.retakeButtonCompactPreview().find('svg path'), {
-                    'fill': css.color.defaultBackground
-                });
-            });
-
-            it('Accessibility of \'Preview\' section if playback is initiated', { tags: 'a11y' }, () => {
-                cy.checkAccessibility(videoResponsePage.previewTabQuestionWrapper());
-            });
-
-            it('When the video player is in playback state and the user clicks on \'Pause\' button, then playback should get paused. Progress bar and timer should not update further and the \'Pause\' button should get replaced with \'Play\' button', () => {
-                videoResponsePage.steps.resetQuestionPreview();
-                videoResponsePage.steps.recordAndSaveVideoCompactPreview(10000);
-                videoResponsePage.steps.startPlaybackCompactPreview();
-                videoResponsePage.steps.waitForPlaybackToBeginCompactPreview();
-                videoResponsePage.steps.verifyVideoPlaybackTimerCompactPreview('00:05', '00:10');
-                videoResponsePage.steps.pauseAndVerifyProgressBarSliderPositionCompactPreview();
-                videoResponsePage.steps.verifyVideoPlaybackTimerCompactPreview('00:05', '00:10');
-                utilities.verifyElementVisibilityState(videoResponsePage.playPlaybackButtonCompactPreview(), 'visible');
-                utilities.verifyElementVisibilityState(videoResponsePage.pausePlaybackButtonCompactPreview(), 'notExist');
-                utilities.verifyElementVisibilityState(videoResponsePage.playPlaybackFlyoutButton(), 'visible');
-                utilities.verifyElementVisibilityState(videoResponsePage.pausePlaybackFlyoutButton(), 'notExist');
-            });
-
-            it('CSS of \'Preview\' section if playback is paused', { tags: 'css' }, () => {
-                utilities.verifyCSS(videoResponsePage.playPlaybackButtonCompactPreview().parents('button'), {
-                    'background-color': css.color.secondaryBtnBg,
-                    'color': css.color.secondaryBtn,
-                    'font-size': css.fontSize.default,
-                    'font-weight': css.fontWeight.semibold
-                });
-                utilities.verifyCSS(videoResponsePage.playPlaybackButtonCompactPreview().parents('button').find('svg'), {
-                    'stroke': css.color.secondaryBtnActive
-                });
-            });
-
-            it('Accessibility of \'Preview\' section if if playback is paused', { tags: 'a11y' }, () => {
-                cy.checkAccessibility(videoResponsePage.previewTabQuestionWrapper());
-            });
-
-            it('When video player is in paused state and user clicks on \'Play\' button, then playback should get resumed and \'Play\' button should get replaced with \'Pause\' button.', () => {
-                videoResponsePage.steps.startPlaybackCompactPreview();
-                utilities.verifyElementVisibilityState(videoResponsePage.pausePlaybackButtonCompactPreview(), 'visible');
-                utilities.verifyElementVisibilityState(videoResponsePage.playPlaybackButtonCompactPreview(), 'notExist');
-                utilities.verifyElementVisibilityState(videoResponsePage.pausePlaybackFlyoutButton(), 'visible');
-                utilities.verifyElementVisibilityState(videoResponsePage.playPlaybackFlyoutButton(), 'notExist');
-            });
-
-            it('When the user seeks the progress bar slider while the video is playing, then the video should continue to play from the position where the slider is seeked', () => {
-                videoResponsePage.steps.seekProgressBarSliderToCenter();
-                videoResponsePage.steps.verifyProgressBarSliderPosition(actualVideoSeekedInPercent);
-            });
-
-            it('When the user seeks the progress bar slider while the video is paused, then the video playback should be in paused state and on playing the video, then the video should play from the position where the slider is seeked', () => {
-                videoResponsePage.steps.pausePlaybackCompactPreview();
-                videoResponsePage.steps.seekProgressBarSliderToCenter();
-                videoResponsePage.steps.startPlaybackCompactPreview();
-                videoResponsePage.steps.verifyProgressBarSliderPosition(actualVideoSeekedInPercent);
-            });
-
-            it('When the video playback is completed, the \'Pause\' button should get replaced with \'Play\' button', () => {
-                videoResponsePage.steps.verifyVideoPlaybackTimerCompactPreview('00:10', '00:10');
-                utilities.verifyElementVisibilityState(videoResponsePage.playPlaybackButtonCompactPreview(), 'visible');
-                utilities.verifyElementVisibilityState(videoResponsePage.pausePlaybackButtonCompactPreview(), 'notExist');
-                videoResponsePage.steps.verifyProgressBarSliderPosition(99);
-            });
-
-            it('CSS of progress bar in hover state', { tags: 'css' }, () => {
-                videoResponsePage.steps.hoverOnProgressBarSlider();
-                utilities.verifyCSS(videoResponsePage.progressBarSlider().parents('span[class*="MuiSlider-thumb"]'), {
-                    'box-shadow': `${css.color.progressBarSliderHoverBackground} 0px 0px 0px 8px`
-                });
-            });
-        });
-
-        describe('Playback player : Play, pause video using flyout buttons', () => {
-            abortEarlySetup();
-            before(() => {
-                videoResponsePage.steps.navigateToCreateQuestion('video response');
-                cy.barsPreLoaderWait();
-                videoResponsePage.steps.selectVideoRecorderStyle('Compact');
-                videoResponsePage.steps.switchToPreviewTab();
-                videoResponsePage.steps.recordAndSaveVideoCompactPreview(10000);
-            });
-
-            it('When the user clicks on \'Play\' button, then the video should start playing. Timer should display the amount of video that has been played and the total video length in (mm:ss)/(mm:ss) format.', () => {
-                videoResponsePage.steps.startPlaybackFlyoutButtonCompactPreview();
-                videoResponsePage.steps.waitForPlaybackToBeginCompactPreview();
-                videoResponsePage.steps.verifyVideoPlaybackTimerCompactPreview('00:03', '00:10');
-            });
-
-            it('When the video player is in playback state and the user clicks on \'Pause\' button, then playback should get paused. Progress bar and timer should not update further and the \'Pause\' button should get replaced with \'Play\' button', () => {
-                videoResponsePage.steps.resetQuestionPreview();
-                videoResponsePage.steps.recordAndSaveVideoCompactPreview(10000);
-                videoResponsePage.steps.startPlaybackFlyoutButtonCompactPreview();
-                videoResponsePage.steps.waitForPlaybackToBeginCompactPreview();
-                videoResponsePage.steps.verifyVideoPlaybackTimerCompactPreview('00:05', '00:10');
-                videoResponsePage.steps.pausePlaybackFlyoutButtonCompactPreview();
-                videoResponsePage.steps.verifyVideoPlaybackTimerCompactPreview('00:05', '00:10');
-                utilities.verifyElementVisibilityState(videoResponsePage.playPlaybackButtonCompactPreview(), 'visible');
-                utilities.verifyElementVisibilityState(videoResponsePage.pausePlaybackButtonCompactPreview(), 'notExist');
-                utilities.verifyElementVisibilityState(videoResponsePage.playPlaybackFlyoutButton(), 'visible');
-                utilities.verifyElementVisibilityState(videoResponsePage.pausePlaybackFlyoutButton(), 'notExist');
-            });
-
-            it('When video player is in paused state and user clicks on \'Play\' button, then playback should get resumed and \'Play\' button should get replaced with \'Pause\' button.', () => {
-                videoResponsePage.steps.startPlaybackFlyoutButtonCompactPreview();
-                utilities.verifyElementVisibilityState(videoResponsePage.pausePlaybackButtonCompactPreview(), 'visible');
-                utilities.verifyElementVisibilityState(videoResponsePage.playPlaybackButtonCompactPreview(), 'notExist');
-                utilities.verifyElementVisibilityState(videoResponsePage.pausePlaybackFlyoutButton(), 'visible');
-                utilities.verifyElementVisibilityState(videoResponsePage.playPlaybackFlyoutButton(), 'notExist');
-            });
-        });
-
-        describe('Playback player : Volume control', () => {
-            abortEarlySetup();
-            before(() => {
-                videoResponsePage.steps.navigateToCreateQuestion('video response');
-                cy.barsPreLoaderWait();
-                videoResponsePage.steps.selectVideoRecorderStyle('Compact');
-                videoResponsePage.steps.switchToPreviewTab();
-                videoResponsePage.steps.recordAndSaveVideoCompactPreview(10000);
-            });
-
-            videoResponsePage.tests.verifyVolumeControlFunctionality();
-        });
-
-        describe('Playback player : Playback speed', () => {
-            const playbackSpeedOptions = ['1x', '1.25x', '1.5x', '2x'];
-            const playbackSpeedMultiplier = [1, 1.25, 1.5, 2];
-            abortEarlySetup();
-            before(() => {
-                videoResponsePage.steps.navigateToCreateQuestion('video response');
-                cy.barsPreLoaderWait();
-                videoResponsePage.steps.selectVideoRecorderStyle('Compact');
-                videoResponsePage.steps.switchToPreviewTab();
-                videoResponsePage.steps.recordAndSaveVideoCompactPreview(10000);
-            });
-
-            videoResponsePage.tests.verifyPlaybackSpeedContents(playbackSpeedMultiplier);
-
-            for (let index = 0; index < playbackSpeedOptions.length; index++) {
-                it(`When the user selects playback speed option ${playbackSpeedOptions[index]}, the video playback speed should be changed accordingly`, () => {
-                    videoResponsePage.steps.resetQuestionPreview();
-                    videoResponsePage.steps.recordAndSaveVideoCompactPreview(12000);
-                    utilities.hoverOverElement(videoResponsePage.playbackSpeedButton());
-                    videoResponsePage.steps.selectPlaybackSpeed(`${playbackSpeedOptions[index]}`);
-                    videoResponsePage.steps.startPlaybackCompactPreview();
-                    videoResponsePage.steps.waitForPlaybackToBeginCompactPreview();
-                    videoResponsePage.steps.addWaitToPlayVideo(4000);
-                    videoResponsePage.steps.pausePlaybackCompactPreview();
-                    videoResponsePage.steps.verifyPlaybackElapsedTime(1 + (4 * playbackSpeedMultiplier[index]), 'Compact');
-                });
-            };
-        });
-
-        describe('Playback player : Retake my video response', () => {
-            abortEarlySetup();
-            before(() => {
-                videoResponsePage.steps.navigateToCreateQuestion('video response');
-                cy.barsPreLoaderWait();
-                videoResponsePage.steps.selectVideoRecorderStyle('Compact');
-                videoResponsePage.steps.switchToPreviewTab();
-                videoResponsePage.steps.recordAndSaveVideoCompactPreview(10000);
-            });
-
-            it('When the user clicks on \'Retake\' button, \'Retake\' popup should be displayed along with \'Are you sure you want to overwrite the existing video recording?\' message', () => {
-                videoResponsePage.steps.retakeRecordingCompactPreview();
-                utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'Retake');
-                videoResponsePage.steps.verifyRetakePopupContents();
-            });
-
-            videoResponsePage.tests.verifyRetakePopupCSSAndA11y();
-
-            it('When the user clicks on \'Cancel\' button, \'Retake\' popup should close and previous state of playback player should persist', () => {
-                videoResponsePage.steps.cancelRetake();
-                utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
-                utilities.verifyElementVisibilityState(videoResponsePage.retakeButtonCompactPreview(), 'visible');
-                utilities.verifyElementVisibilityState(videoResponsePage.playPlaybackButtonCompactPreview(), 'visible');
-                videoResponsePage.steps.verifyVideoPlaybackTimerCompactPreview('00:00', '00:10');
-            });
-
-            it('When the user clicks on Confirm button of the retake popup, the previous recording should get deleted and a new recording should begin', () => {
-                videoResponsePage.steps.retakeRecordingCompactPreview();
-                videoResponsePage.steps.confirmRetake();
-                videoResponsePage.steps.verifyRecordingTimeCompactPreview('00:04', '05:00');
-                utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
-                videoResponsePage.steps.verifyRecordingStatusCompactPreview('Recording...');
-            });
-        });
-
-        describe('Playback player : Retake my video response using flyout buttons', () => {
-            abortEarlySetup();
-            before(() => {
-                videoResponsePage.steps.navigateToCreateQuestion('video response');
-                cy.barsPreLoaderWait();
-                videoResponsePage.steps.selectVideoRecorderStyle('Compact');
-                videoResponsePage.steps.switchToPreviewTab();
-                videoResponsePage.steps.recordAndSaveVideoCompactPreview(10000);
-            });
-
-            it('When the user clicks on \'Retake\' button, \'Retake\' popup should be displayed along with \'Are you sure you want to overwrite the existing video recording?\' message', () => {
-                videoResponsePage.steps.retakeRecordingFlyoutButtonCompactPreview();
-                utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'Retake');
-                videoResponsePage.steps.verifyRetakePopupContents();
-            });
-
-            it('When the user clicks on \'Cancel\' button, \'Retake\' popup should close and previous state of playback player should persist', () => {
-                videoResponsePage.steps.cancelRetake();
-                utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
-                utilities.verifyElementVisibilityState(videoResponsePage.retakeButtonCompactPreview(), 'visible');
-                utilities.verifyElementVisibilityState(videoResponsePage.playPlaybackButtonCompactPreview(), 'visible');
-                videoResponsePage.steps.verifyVideoPlaybackTimerCompactPreview('00:00', '00:10');
-            });
-
-            it('When the user clicks on Confirm button of the retake popup, the previous recording should get deleted and a new recording should begin', () => {
-                videoResponsePage.steps.retakeRecordingFlyoutButtonCompactPreview();
-                videoResponsePage.steps.confirmRetake();
-                videoResponsePage.steps.verifyRecordingTimeCompactPreview('00:04', '05:00');
-                utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
-                videoResponsePage.steps.verifyRecordingStatusCompactPreview('Recording...');
-            });
-        });
-    };
-});