itemengine-cypress-automation 1.0.192-8MayFixes-959a25e.0 → 1.0.192

package/cypress/e2e/ILC/VideoResponseNew/customizePlaybackControlsCompactRecorderStyle.js

@@ -0,0 +1,300 @@
+import { videoResponsePage } from '../../../pages/videoResponsePage';
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from '../../../support/helpers/utilities';
+const css = Cypress.env('css');
+
+describe('Create Item page - Video response: Customize playback controls (for student player) - Compact recorder style', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('\'Customize playback controls (for student player)\' section for - Compact recorder style', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+            cy.barsPreLoaderWait();
+            videoResponsePage.steps.selectVideoRecorderStyle('Compact');
+        });
+
+        it('\'Customize playback controls (for student player)\' accordion should be displayed and by default it should be in collapsed state', () => {
+            utilities.verifyInnerText(videoResponsePage.customizePlaybackControlsAccordion(), 'Customize playback controls (for student player)');
+            videoResponsePage.steps.verifyCustomizePlaybackControlsAccordionCollapsedState();
+        });
+
+        it('User should be able to expand and collapse \'Customize playback controls (for student player)\' accordion', () => {
+            videoResponsePage.steps.expandCustomizePlaybackControlsAccordion();
+            videoResponsePage.steps.collapseCustomizePlaybackControlsAccordion();
+        });
+
+        it('\'Controls for playback\' label should be displayed', () => {
+            cy.log('Pre-step : Expanding \'Customize playback controls (for student player)\' accordion');
+            videoResponsePage.steps.expandCustomizePlaybackControlsAccordion();
+            utilities.verifyInnerText(videoResponsePage.controlsForPlaybackLabel(), 'Controls for playback');
+        });
+
+        it('\'Controls for playback\' options - "Play", "Pause", "Seek", "Record again", "Volume", "Playback speed", "Full screen" and "Forward/Backward" should be displayed. By default, all options except for "Forward/Backward" should be in selected state', () => {
+            utilities.verifyElementVisibilityState(videoResponsePage.playButtonControlsForPlayback(), 'visible');
+            utilities.verifyInnerText(utilities.getNthElement(videoResponsePage.controlsForPlaybackButtonLabel(), 0), 'Play');
+            utilities.verifyElementVisibilityState(videoResponsePage.pauseButtonControlsForPlayback(), 'visible');
+            utilities.verifyInnerText(utilities.getNthElement(videoResponsePage.controlsForPlaybackButtonLabel(), 1), 'Pause');
+            utilities.verifyElementVisibilityState(videoResponsePage.seekButtonControlsForPlayback(), 'visible');
+            utilities.verifyInnerText(utilities.getNthElement(videoResponsePage.controlsForPlaybackButtonLabel(), 2), 'Seek');
+            utilities.verifyElementVisibilityState(videoResponsePage.recordAgainButtonControlsForPlayback(), 'visible');
+            utilities.verifyInnerText(utilities.getNthElement(videoResponsePage.controlsForPlaybackButtonLabel(), 3), 'Record again');
+            utilities.verifyElementVisibilityState(videoResponsePage.volumeButtonControlsForPlayback(), 'visible');
+            utilities.verifyInnerText(utilities.getNthElement(videoResponsePage.controlsForPlaybackButtonLabel(), 4), 'Volume');
+            utilities.verifyElementVisibilityState(videoResponsePage.playbackSpeedButtonControlsForPlayback(), 'visible');
+            utilities.verifyInnerText(utilities.getNthElement(videoResponsePage.controlsForPlaybackButtonLabel(), 5), 'Playback speed');
+            utilities.verifyElementVisibilityState(videoResponsePage.fullScreenButtonControlsForPlayback(), 'notExist');
+            utilities.verifyElementVisibilityState(videoResponsePage.forwardBackwardButtonControlsForPlayback(), 'notExist');
+            videoResponsePage.steps.verifyControlsForPlaybackToggleButtonSelectedState('Play');
+            videoResponsePage.steps.verifyControlsForPlaybackToggleButtonSelectedState('Pause');
+            videoResponsePage.steps.verifyControlsForPlaybackToggleButtonSelectedState('Seek');
+            videoResponsePage.steps.verifyControlsForPlaybackToggleButtonSelectedState('Record again');
+            videoResponsePage.steps.verifyControlsForPlaybackToggleButtonSelectedState('Volume');
+            videoResponsePage.steps.verifyControlsForPlaybackToggleButtonSelectedState('Playback speed');
+        });
+
+        it('CSS of \'Customize playback controls (for student player)\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(videoResponsePage.customizePlaybackControlsAccordion().find('.customize_recorder_label'), {
+                'color': css.color.accordionLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(videoResponsePage.controlsForPlaybackLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(videoResponsePage.playButtonControlsForPlayback(), {
+                'color': css.color.defaultBackground,
+                'background-color': css.color.activeButtons,
+                'border': `1px solid ${css.color.activeButtons}`
+            });
+            utilities.verifyCSS(videoResponsePage.tickIconForOptionButtons(), {
+                'background-color': css.color.defaultBackground,
+            });
+            utilities.verifyCSS(videoResponsePage.tickIconForOptionButtons().find('[data-name="Icon feather-check"]'), {
+                'fill': css.color.activeButtons,
+            });
+            utilities.verifyCSS(videoResponsePage.controlsForPlaybackButtonLabel(), {
+                'color': css.color.customizeControlButtonLabels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('When the user deselects the \'Play\' button, all other controls for playback buttons except "Record again" should get deselected and disabled. Progress indicator and timer buttons should also get deselected from the \'Video settings\' section. The timer button should be in enabled state', () => {
+            videoResponsePage.steps.deselectControlsForPlaybackToggleButton('Play');
+            videoResponsePage.steps.verifyControlsForPlaybackToggleButtonDeselectedState('Play');
+            utilities.verifyElementDisabled(videoResponsePage.pauseButtonControlsForPlayback());
+            videoResponsePage.steps.verifyControlsForPlaybackToggleButtonDeselectedState('Pause');
+            utilities.verifyElementDisabled(videoResponsePage.pauseButtonControlsForPlayback());
+            videoResponsePage.steps.verifyControlsForPlaybackToggleButtonDeselectedState('Seek');
+            utilities.verifyElementDisabled(videoResponsePage.seekButtonControlsForPlayback());
+            videoResponsePage.steps.verifyControlsForPlaybackToggleButtonSelectedState('Record again');
+            videoResponsePage.steps.verifyControlsForPlaybackToggleButtonDeselectedState('Volume');
+            utilities.verifyElementDisabled(videoResponsePage.volumeButtonControlsForPlayback());
+            videoResponsePage.steps.verifyControlsForPlaybackToggleButtonDeselectedState('Playback speed');
+            utilities.verifyElementDisabled(videoResponsePage.playbackSpeedButtonControlsForPlayback());
+            videoResponsePage.steps.verifyVideoSettingsToggleButtonSelectedState('Timer');
+            utilities.verifyElementNotDisabled(videoResponsePage.timerButtonVideoSettings());
+            videoResponsePage.steps.verifyVideoSettingsToggleButtonDeselectedState('Progress indicator');
+            utilities.verifyElementDisabled(videoResponsePage.progressIndicatorButtonVideoSettings());
+        });
+
+        it('When the user selects the \'Play\' button, "Pause", "Volume", "Playback speed" should get enabled but continue to stay in deselected state. "Progress indicator" should also get enabled from the \'Video settings\' section. "Seek" button should continue to stay in disabled state while "Progress indicator" is in deselected state.', () => {
+            videoResponsePage.steps.selectControlsForPlaybackToggleButton('Play');
+            utilities.verifyElementNotDisabled(videoResponsePage.pauseButtonControlsForPlayback());
+            videoResponsePage.steps.verifyControlsForPlaybackToggleButtonDeselectedState('Pause');
+            utilities.verifyElementDisabled(videoResponsePage.seekButtonControlsForPlayback());
+            utilities.verifyElementNotDisabled(videoResponsePage.volumeButtonControlsForPlayback());
+            videoResponsePage.steps.verifyControlsForPlaybackToggleButtonDeselectedState('Volume');
+            utilities.verifyElementNotDisabled(videoResponsePage.playbackSpeedButtonControlsForPlayback());
+            videoResponsePage.steps.verifyControlsForPlaybackToggleButtonDeselectedState('Playback speed');
+            videoResponsePage.steps.verifyVideoSettingsToggleButtonSelectedState('Timer');
+            utilities.verifyElementNotDisabled(videoResponsePage.timerButtonVideoSettings());
+            utilities.verifyElementNotDisabled(videoResponsePage.progressIndicatorButtonVideoSettings());
+        });
+
+        it('When the user selects the "Progress indicator" button, "Seek" button should get enabled', () => {
+            videoResponsePage.steps.selectVideoSettingsToggleButton('Progress indicator');
+            utilities.verifyElementNotDisabled(videoResponsePage.seekButtonControlsForPlayback());
+        });
+    });
+
+    describe('Controls for playback - Play', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+            cy.barsPreLoaderWait();
+            videoResponsePage.steps.selectVideoRecorderStyle('Compact');
+            videoResponsePage.steps.expandCustomizePlaybackControlsAccordion();
+        });
+
+        it('In compact mode, when the \'Play\' option is selected the play button should be enabled in the playback player of preview tab', () => {
+            videoResponsePage.steps.switchToPreviewTab();
+            videoResponsePage.steps.recordAndSaveVideoCompactPreview(5000);
+            utilities.verifyElementVisibilityState(videoResponsePage.playPlaybackButtonCompactPreview(), 'visible');
+            utilities.verifyElementVisibilityState(videoResponsePage.playPlaybackFlyoutButton(), 'visible');
+        });
+
+        it('In compact mode, when the play option is deselected the play button should be disabled in the preview tab and player should not able to playback the recording. "Your response has been recorded." should be displayed in the flyout', () => {
+            cy.log('Pre-step : Switching to Edit tab and deselecting Play button');
+            videoResponsePage.steps.switchToEditTab();
+            videoResponsePage.steps.deselectControlsForPlaybackToggleButton('Play');
+            cy.log('Switching to Preview tab');
+            videoResponsePage.steps.switchToPreviewTab();
+            videoResponsePage.steps.recordAndSaveVideoCompactPreview(5000);
+            utilities.verifyElementVisibilityState(videoResponsePage.playPlaybackButtonCompactPreview(), 'notExist');
+            utilities.verifyElementVisibilityState(videoResponsePage.playPlaybackFlyoutButton(), 'notExist');
+            utilities.verifyInnerText(videoResponsePage.recordedResponseHelpText(), 'Your response has been recorded.');
+        });
+    });
+
+    describe('Controls for playback - Pause', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+            cy.barsPreLoaderWait();
+            videoResponsePage.steps.selectVideoRecorderStyle('Compact');
+            videoResponsePage.steps.expandCustomizePlaybackControlsAccordion();
+        });
+
+        it('In compact mode, when the \'Pause\' option is selected the pause button should be enabled in the preview tab', () => {
+            videoResponsePage.steps.switchToPreviewTab();
+            videoResponsePage.steps.recordAndSaveVideoCompactPreview(5000);
+            videoResponsePage.steps.startPlaybackCompactPreview();
+            utilities.verifyElementNotDisabled(videoResponsePage.pausePlaybackButtonCompactPreview());
+            utilities.verifyElementNotDisabled(videoResponsePage.pausePlaybackFlyoutButton());
+        });
+
+        it('In compact mode, when the pause option is deselected the pause button should be disabled in the preview tab and player should not able to pause recorded response', () => {
+            videoResponsePage.steps.switchToEditTab();
+            videoResponsePage.steps.deselectControlsForPlaybackToggleButton('Pause');
+            videoResponsePage.steps.switchToPreviewTab();
+            videoResponsePage.steps.recordAndSaveVideoCompactPreview(5000);
+            videoResponsePage.steps.startPlaybackCompactPreview();
+            utilities.verifyElementDisabled(videoResponsePage.pausePlaybackButtonCompactPreview());
+            utilities.verifyElementDisabled(videoResponsePage.pausePlaybackFlyoutButton());
+        });
+    });
+
+    describe('Controls for playback - Seek', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+            cy.barsPreLoaderWait();
+            videoResponsePage.steps.selectVideoRecorderStyle('Compact');
+            videoResponsePage.steps.expandCustomizePlaybackControlsAccordion();
+            videoResponsePage.steps.switchToPreviewTab();
+            videoResponsePage.steps.recordAndSaveVideoCompactPreview(5000);
+        });
+
+        it('In compact mode, when the \'Seek\' option is selected the seek functionality should be enabled in the preview tab user should be able to seek the video from the progress bar and waveform', () => {
+            let actualVideoSeekedInPercent = 50
+            videoResponsePage.steps.startPlaybackCompactPreview();
+            videoResponsePage.steps.waitForPlaybackToBeginCompactPreview();
+            cy.log('Clicking at the middle of the progress bar to seek till 50% of the recording');
+            videoResponsePage.steps.seekProgressBarSliderToCenter();
+            videoResponsePage.steps.verifyProgressBarSliderPosition(actualVideoSeekedInPercent);
+            utilities.verifyElementVisibilityState(videoResponsePage.progressBarSlider(), 'exist');
+        });
+
+        it('In compact mode, when the \'Seek\' option is deselected, the progress bar should not have a slider handle and waveform should not have cursor if user hover on it and user should not be able to seek the video from the progress bar and waveform', () => {
+            let actualVideoSeekedInPercent = 25
+            cy.log('Pre-step: Switching to Edit tab, deselecting \'Seek\' button, switching back to Preview tab and saving a record response');
+            videoResponsePage.steps.switchToEditTab();
+            videoResponsePage.steps.deselectControlsForPlaybackToggleButton('Seek');
+            videoResponsePage.steps.switchToPreviewTab();
+            videoResponsePage.steps.recordAndSaveVideoCompactPreview(4000);
+            videoResponsePage.steps.startPlaybackCompactPreview();
+            videoResponsePage.steps.waitForPlaybackToBeginCompactPreview();
+            videoResponsePage.steps.pausePlaybackCompactPreview();
+            cy.log('Clicking at the middle of the progress bar to seek till 50% of the recording');
+            videoResponsePage.steps.seekProgressBarSliderToCenter();
+            videoResponsePage.steps.verifyProgressBarSliderPosition(actualVideoSeekedInPercent);
+            utilities.verifyElementVisibilityState(videoResponsePage.progressBarSlider(), 'hidden');
+        });
+    });
+
+    describe('Controls for playback - Record again', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+            cy.barsPreLoaderWait();
+            videoResponsePage.steps.selectVideoRecorderStyle('Compact');
+            videoResponsePage.steps.expandCustomizePlaybackControlsAccordion();
+        });
+
+        it('In compact mode, when the \'Record again\' option is selected the record again button should be enabled in the preview tab', () => {
+            videoResponsePage.steps.switchToPreviewTab();
+            videoResponsePage.steps.recordAndSaveVideoCompactPreview(5000);
+            videoResponsePage.steps.startPlaybackCompactPreview();
+            utilities.verifyElementNotDisabled(videoResponsePage.retakeButtonCompactPreview());
+        });
+
+        it('In compact mode, when the record again option is deselected the record again button should be disabled in the preview tab and player should not able to retake the recorded response', () => {
+            videoResponsePage.steps.switchToEditTab();
+            videoResponsePage.steps.deselectControlsForPlaybackToggleButton('Record again');
+            videoResponsePage.steps.switchToPreviewTab();
+            videoResponsePage.steps.recordAndSaveVideoCompactPreview(5000);
+            videoResponsePage.steps.startPlaybackCompactPreview();
+            utilities.verifyElementVisibilityState(videoResponsePage.retakeButtonCompactPreview(), 'notExist');
+        });
+    });
+
+    describe('Controls for playback - Volume', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+            cy.barsPreLoaderWait();
+            videoResponsePage.steps.selectVideoRecorderStyle('Compact');
+            videoResponsePage.steps.expandCustomizePlaybackControlsAccordion();
+        });
+
+        it('In compact mode, when the \'Volume\' option is selected the volume button should be enabled in the preview tab', () => {
+            videoResponsePage.steps.switchToPreviewTab();
+            videoResponsePage.steps.recordAndSaveVideoCompactPreview(5000);
+            videoResponsePage.steps.startPlaybackCompactPreview();
+            videoResponsePage.steps.verifyVolumeButtonEnabledState();
+        });
+
+        it('In compact mode, when the volume option is deselected \'volume\' should not be displayed on the playback player', () => {
+            cy.log('Pre-step : User switches to Edit tab, deselects \'volume\' button, switches back to Preview tab and saves a recording');
+            videoResponsePage.steps.switchToEditTab();
+            videoResponsePage.steps.deselectControlsForPlaybackToggleButton('Volume');
+            videoResponsePage.steps.switchToPreviewTab();
+            videoResponsePage.steps.recordAndSaveVideoCompactPreview(5000);
+            videoResponsePage.steps.startPlaybackCompactPreview();
+            utilities.verifyElementVisibilityState(videoResponsePage.volumeControlButton(), 'notExist');
+        });
+    });
+
+    describe('Controls for playback - Playback speed', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+            cy.barsPreLoaderWait();
+            videoResponsePage.steps.selectVideoRecorderStyle('Compact');
+            videoResponsePage.steps.expandCustomizePlaybackControlsAccordion();
+        });
+
+        it('In compact mode, when the \'Playback speed\' option is selected the \'Playback speed\' button should be enabled in the preview tab', () => {
+            videoResponsePage.steps.switchToPreviewTab();
+            videoResponsePage.steps.recordAndSaveVideoCompactPreview(5000);
+            videoResponsePage.steps.startPlaybackCompactPreview();
+            videoResponsePage.steps.verifyPlaybackSpeedButtonEnabledState();
+        });
+
+        it('In compact mode, when the \'Playback speed\' option is deselected \'Playback speed\' button should not be displayed on the playback player', () => {
+            cy.log('Pre-step : User switches to Edit tab, deselects \'Playback speed\' button, switches back to Preview tab and saves a recording');
+            videoResponsePage.steps.switchToEditTab();
+            videoResponsePage.steps.deselectControlsForPlaybackToggleButton('Playback speed');
+            videoResponsePage.steps.switchToPreviewTab();
+            videoResponsePage.steps.recordAndSaveVideoCompactPreview(5000);
+            videoResponsePage.steps.startPlaybackCompactPreview();
+            utilities.verifyElementVisibilityState(videoResponsePage.playbackSpeedButton(), 'notExist');
+        });
+    });
+});

package/cypress/e2e/ILC/VideoResponseNew/{customizePlaybackControls.js → customizePlaybackControlsStandardRecorderStyle.js}

@@ -3,7 +3,7 @@ import abortEarlySetup from "../../../support/helpers/abortEarly";
 import utilities from '../../../support/helpers/utilities';
 const css = Cypress.env('css');
 
-describe('Create Item page - video response: Customize playback controls', () => {
+describe('Create Item page - Video response: Customize playback controls', () => {
     before(() => {
         cy.loginAs('admin');
     });
@@ -109,20 +109,23 @@ describe('Create Item page - video response: Customize playback controls', () =>
             utilities.verifyElementDisabled(videoResponsePage.fullScreenButtonControlsForPlayback());
             videoResponsePage.steps.verifyControlsForPlaybackToggleButtonDeselectedState('Forward/Backward');
             utilities.verifyElementDisabled(videoResponsePage.forwardBackwardButtonControlsForPlayback());
-            videoResponsePage.steps.verifyVideoSettingsToggleButtonDeselectedState('Timer');
+            videoResponsePage.steps.verifyVideoSettingsToggleButtonSelectedState('Timer');
             utilities.verifyElementNotDisabled(videoResponsePage.timerButtonVideoSettings());
             videoResponsePage.steps.verifyVideoSettingsToggleButtonDeselectedState('Progress indicator');
             utilities.verifyElementDisabled(videoResponsePage.progressIndicatorButtonVideoSettings());
         });
 
-        //Note: Need to update below case after https://redmine.zeuslearning.com/issues/570839 gets resolved
-        it('When the user selects the \'Play\' button, "Pause", "Volume", "Playback speed" and "Full screen" should get enabled. "Progress indicator" and "Timer" buttons should also get enabled from the \'Video settings\' section. "Seek" button should continue to stay in disabled state while "Progress indicator" is in deselected state.', () => {
+        it('When the user selects the \'Play\' button, "Pause", "Volume", "Playback speed", "Full screen", "Forward/Backward" should get enabled but continue to stay in deselected state. "Progress indicator" should also get enabled from the \'Video settings\' section. "Seek" button should continue to stay in disabled state while "Progress indicator" is in deselected state.', () => {
             videoResponsePage.steps.selectControlsForPlaybackToggleButton('Play');
             utilities.verifyElementNotDisabled(videoResponsePage.pauseButtonControlsForPlayback());
+            videoResponsePage.steps.verifyControlsForPlaybackToggleButtonDeselectedState('Pause');
             utilities.verifyElementDisabled(videoResponsePage.seekButtonControlsForPlayback());
             utilities.verifyElementNotDisabled(videoResponsePage.volumeButtonControlsForPlayback());
+            videoResponsePage.steps.verifyControlsForPlaybackToggleButtonDeselectedState('Volume');
             utilities.verifyElementNotDisabled(videoResponsePage.playbackSpeedButtonControlsForPlayback());
+            videoResponsePage.steps.verifyControlsForPlaybackToggleButtonDeselectedState('Playback speed');
             utilities.verifyElementNotDisabled(videoResponsePage.fullScreenButtonControlsForPlayback());
+            videoResponsePage.steps.verifyVideoSettingsToggleButtonSelectedState('Timer');
             utilities.verifyElementNotDisabled(videoResponsePage.timerButtonVideoSettings());
             utilities.verifyElementNotDisabled(videoResponsePage.progressIndicatorButtonVideoSettings());
         });

package/cypress/e2e/ILC/VideoResponseNew/editTabBasicSection.js

@@ -12,6 +12,7 @@ describe('Create item page - Video response: Question instructions, Maximum reco
         abortEarlySetup();
         before(() => {
             videoResponsePage.steps.navigateToCreateQuestion('video response');
+            cy.barsPreLoaderWait();
         });
 
         videoResponsePage.tests.verifyQuestionInstructionsInputFieldEditTab();
@@ -21,16 +22,107 @@ describe('Create item page - Video response: Question instructions, Maximum reco
         abortEarlySetup();
         before(() => {
             videoResponsePage.steps.navigateToCreateQuestion('video response');
+            cy.barsPreLoaderWait();
         });
 
         videoResponsePage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
     });
 
+    describe('Video recorder style toggle buttons', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Video recorder style\' label should be displayed along with three toggle buttons, "Standard" and "Compact". "Standard" button should be selected by default', () => {
+            utilities.verifyInnerText(videoResponsePage.videoRecorderStyleLabel(), 'Video recorder style');
+            utilities.verifyInnerText(videoResponsePage.standardRecorderStyleButton(), 'Standard');
+            utilities.verifyInnerText(videoResponsePage.compactRecorderStyleButton(), 'Compact');
+            videoResponsePage.steps.verifyStandardRecorderStyleToggleButtonSelectedState();
+        });
+
+        it('CSS of video Recorder Style section', { tags: 'css' }, () => {
+            utilities.verifyCSS(videoResponsePage.videoRecorderStyleLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(videoResponsePage.standardRecorderStyleButton(), {
+                'color': css.color.defaultBackground,
+                'background-color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('When "Standard" option is selected in the video recorder style toggle buttons section, then "Video recorder default width (px)" label and input field should not be displayed', () => {
+            videoResponsePage.steps.verifyVideoSettingsToggleButtonSelectedState('Timer');
+            videoResponsePage.steps.verifyVideoSettingsToggleButtonSelectedState('Progress indicator');
+            utilities.verifyElementVisibilityState(videoResponsePage.videoRecorderDefaultWidthLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(videoResponsePage.videoRecorderDefaultWidthInputField(), 'notExist');
+        });
+
+        it('When the user selects "Compact" option in the video recorder style toggle buttons section, then "Video recorder default width (px)" label and input field should be displayed. By default, the input field value should be "324px"', () => {
+            videoResponsePage.steps.selectVideoRecorderStyle('Compact');
+            utilities.verifyInnerText(videoResponsePage.videoRecorderDefaultWidthLabel(), "Video recorder default width (px)");
+            videoResponsePage.steps.verifyVideoRecorderDefaultWidthInputFieldValue(324);
+        });
+
+        it('When the user clears the "Video recorder default width (px)" value, then no error message should disappear', () => {
+            videoResponsePage.steps.clearVideoRecorderDefaultWidthInputField();
+            videoResponsePage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('When user adds decimal values or alphanumeric values then only numeric values should be displayed in the maximum recording length input field', () => {
+            videoResponsePage.steps.setVideoRecorderDefaultWidth('.500.0');
+            videoResponsePage.steps.verifyVideoRecorderDefaultWidthInputFieldValue(500);
+            videoResponsePage.steps.setVideoRecorderDefaultWidth('!@#abcde584');
+            videoResponsePage.steps.verifyVideoRecorderDefaultWidthInputFieldValue(584);
+        });
+
+        it('When user tries to add a value greater than 600 it should be automatically set back to 600 and should not allow to add greater than set value', () => {
+            videoResponsePage.steps.setVideoRecorderDefaultWidth(9999);
+            videoResponsePage.steps.verifyVideoRecorderDefaultWidthInputFieldValue(600);
+        });
+
+        it('When user tries to add a value less than 324 it should be automatically set back to 324 and should not allow to add lower than set value', () => {
+            videoResponsePage.steps.setVideoRecorderDefaultWidth(300);
+            videoResponsePage.steps.verifyVideoRecorderDefaultWidthInputFieldValue(324);
+        });
+    });
+
+    describe('Video recorder default width (px): Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+            cy.barsPreLoaderWait();
+            videoResponsePage.steps.selectVideoRecorderStyle('Compact');
+        });
+
+        it('The default dimensions of the video recorder flyout should be 324x256px', () => {
+            videoResponsePage.steps.switchToPreviewTab();
+            videoResponsePage.steps.startRecordingCompactPreview();
+            videoResponsePage.steps.waitForRecordingToStartCompactPreview();
+            videoResponsePage.steps.verifyVideoRecorderFlyoutDimensions(324, 256);
+        });
+
+        it('When the user updates the "Video recorder default width (px)" input field value, then the dimensions of the video recorder flyout should get updated accordingly', () => {
+            videoResponsePage.steps.switchToEditTab();
+            videoResponsePage.steps.setVideoRecorderDefaultWidth(540);
+            videoResponsePage.steps.switchToPreviewTab();
+            videoResponsePage.steps.startRecordingCompactPreview();
+            videoResponsePage.steps.waitForRecordingToStartCompactPreview();
+            videoResponsePage.steps.verifyVideoRecorderFlyoutDimensions(540, 375);
+        });
+    });
+
     //Failing due to https://redmine.zeuslearning.com/issues/570772, https://redmine.zeuslearning.com/issues/570761
     describe('Maximum recording duration: Edit tab', () => {
         abortEarlySetup();
         before(() => {
             videoResponsePage.steps.navigateToCreateQuestion('video response');
+            cy.barsPreLoaderWait();
         });
 
         it('\'Maximum recording duration\' label, input field, "Secs" and "Mins" toggle buttons should be displayed. By default "Secs" toggle button should be in selected state. "300" should be displayed in \'Maximum recording duration\' field', () => {
@@ -149,6 +241,7 @@ describe('Create item page - Video response: Question instructions, Maximum reco
         abortEarlySetup();
         before(() => {
             videoResponsePage.steps.navigateToCreateQuestion('video response');
+            cy.barsPreLoaderWait();
             videoResponsePage.steps.switchToPreviewTab();
         });
 

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

@@ -115,7 +115,7 @@ describe('Create item page - Video response: Grading view, Correct answer view c
                     videoResponsePage.steps.waitForPlaybackToBegin();
                     videoResponsePage.steps.addWaitToPlayVideo(4000);
                     videoResponsePage.steps.pausePlayback();
-                    videoResponsePage.steps.verifyPlaybackElapsedTime(1 + (4 * playbackSpeedMultiplier[index]));
+                    videoResponsePage.steps.verifyPlaybackElapsedTime((1 + (4 * playbackSpeedMultiplier[index])), 'Standard');
                     videoResponsePage.steps.startPlayback();
                     videoResponsePage.steps.verifyVideoPlaybackTimer('0:12', '0:12');
                 });

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

@@ -51,11 +51,11 @@ describe('Create item page - Video response: Preview contents', () => {
                 utilities.verifyElementVisibilityState(videoResponsePage.questionInstructionsText(), 'visible');
             });
 
-            it('A start recording interface with a \'Rec\' button and text \'Click/tap anywhere here to start recording\' should be displayed in the preview tab', () => {
+            it('A start recording interface with a \'Rec\' button and text \'Click the button to start recording...\' should be displayed in the preview tab', () => {
                 utilities.verifyElementVisibilityState(videoResponsePage.clickTapAnywhereArea(), 'visible');
                 utilities.verifyInnerText(videoResponsePage.recordButton(), 'REC');
                 utilities.verifyElementVisibilityState(videoResponsePage.recordButton(), 'visible');
-                utilities.verifyInnerText(videoResponsePage.startRecordingText(), 'Click/tap anywhere here to start recording');
+                utilities.verifyInnerText(videoResponsePage.startRecordingText(), 'Click the button to start recording...');
                 utilities.verifyElementVisibilityState(videoResponsePage.startRecordingText(), 'visible');
             });
 

package/cypress/e2e/ILC/VideoResponseNew/standardRecorderStyle.js

@@ -217,6 +217,7 @@ describe('Create item page - Video response: Preview tab - Standard recorder sty
             videoResponsePage.steps.switchToPreviewTab();
             videoResponsePage.steps.recordAndSaveVideo(10000);
         });
+
         it('When the user hovers over the \'Play\' button, a tooltip \'Play\' should be displayed and on moving away the focus, the tooltip should disappear', () => {
             videoResponsePage.playbackPlayButton()
                 .verifyTooltip('Play');
@@ -481,7 +482,7 @@ describe('Create item page - Video response: Preview tab - Standard recorder sty
                 videoResponsePage.steps.waitForPlaybackToBegin();
                 videoResponsePage.steps.addWaitToPlayVideo(4000);
                 videoResponsePage.steps.pausePlayback();
-                videoResponsePage.steps.verifyPlaybackElapsedTime(1 + (4 * playbackSpeedMultiplier[index]));
+                videoResponsePage.steps.verifyPlaybackElapsedTime((1 + (4 * playbackSpeedMultiplier[index])), 'Standard');
             });
         }
     });
@@ -504,49 +505,10 @@ describe('Create item page - Video response: Preview tab - Standard recorder sty
             videoResponsePage.steps.retakeRecording();
             utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'Retake');
             utilities.verifyElementVisibilityState(dialogBoxBase.dialogBoxTitle(), 'visible');
-            utilities.verifyInnerText(videoResponsePage.retakePopupContent(), 'Are you sure you want to overwrite the existing video recording?');
-            utilities.verifyInnerText(videoResponsePage.confirmRetakeButton(), 'Confirm');
-            utilities.verifyElementVisibilityState(videoResponsePage.confirmRetakeButton(), 'visible');
-            utilities.verifyInnerText(videoResponsePage.cancelRetakeButton(), 'Cancel');
-            utilities.verifyElementVisibilityState(videoResponsePage.cancelRetakeButton(), 'visible');
-        });
-
-        it('CSS of \'Retake recording\' popup', { tags: 'css' }, () => {
-            utilities.verifyCSS(dialogBoxBase.dialogBox(), {
-                'border': `1px solid ${css.color.defaultDropdownBorder}`,
-                'background-color': css.color.defaultBackground
-            });
-            utilities.verifyCSS(dialogBoxBase.dialogBoxTitle(), {
-                'color': css.color.questionHeading,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.semibold
-            });
-            utilities.verifyCSS(videoResponsePage.retakePopupContent(), {
-                'color': css.color.labels,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular
-            })
-            utilities.verifyCSS(videoResponsePage.confirmRetakeButton(), {
-                'background-color': css.color.deleteBtn
-            });
-            utilities.verifyCSS(videoResponsePage.confirmRetakeButton().find('span'), {
-                'color': css.color.whiteText,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular
-            });
-            utilities.verifyCSS(videoResponsePage.cancelRetakeButton(), {
-                'background-color': css.color.defaultBackground
-            });
-            utilities.verifyCSS(videoResponsePage.cancelRetakeButton().find('span'), {
-                'color': css.color.secondaryBtn,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular
-            });
+            videoResponsePage.steps.verifyRetakePopupContents();
         });
 
-        it('Accessibility of \'Retake recording\' popup', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(dialogBoxBase.dialogBox());
-        });
+        videoResponsePage.tests.verifyRetakePopupCSSAndA11y();
 
         it('When the user clicks on \'Cancel\' button, \'Retake recording\' popup should close and previous state of playback player should persist', () => {
             videoResponsePage.steps.cancelRetake();