itemengine-cypress-automation 1.0.189-e2e-execution-crash-83cdbd4.0 → 1.0.189

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

@@ -0,0 +1,171 @@
+import { videoResponsePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create item page - Video response: Question instructions, Maximum recording duration: Edit and preview tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question instructions input field: Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+        });
+
+        videoResponsePage.tests.verifyQuestionInstructionsInputFieldEditTab();
+    });
+
+    describe('Question instructions input field: Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+        });
+
+        videoResponsePage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
+    });
+
+    //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');
+        });
+
+        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', () => {
+            utilities.verifyInnerText(videoResponsePage.maxRecordingDurationLabel(), 'Maximum recording duration');
+            utilities.verifyElementVisibilityState(videoResponsePage.maxRecordingDurationLabel(), 'visible');
+            utilities.verifyElementVisibilityState(videoResponsePage.maxRecordingDurationInputField(), 'visible');
+            videoResponsePage.steps.verifySecsToggleButtonSelectedState();
+            videoResponsePage.steps.verifyMaximumRecordingDuration(300);
+            utilities.verifyInnerText(videoResponsePage.maxRecordingDurationSecsToggleButton(), 'Secs');
+            utilities.verifyInnerText(videoResponsePage.maxRecordingDurationMinsToggleButton(), 'Mins');
+        });
+
+        it('CSS of \'Maximum recording duration\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(videoResponsePage.maxRecordingDurationLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(videoResponsePage.maxRecordingDurationSecsToggleButton(), {
+                'color': css.color.defaultBackground,
+                'background-color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(videoResponsePage.maxRecordingDurationMinsToggleButton(), {
+                'color': css.color.secondaryBtn,
+                'background-color': css.color.secondaryBtnBg,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(videoResponsePage.maxRecordingDurationInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('When the user focuses in and out of the empty \'Maximum recording duration\' input field, \'Error: Maximum recording duration is required.\' validation error should be displayed below the \'Maximum recording duration\' input field', () => {
+            videoResponsePage.steps.clearMaximumRecordingDurationInputField();
+            utilities.verifyInnerText(videoResponsePage.errorMessage(), 'Error: Maximum recording duration is required.');
+            utilities.verifyElementVisibilityState(videoResponsePage.errorMessage(), 'visible');
+        });
+
+        videoResponsePage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When the user updates the \'Maximum recording duration\' value, then the validation message \'Error: Maximum recording duration is required.\' should disappear.', () => {
+            videoResponsePage.steps.setMaximumRecordingDuration(1000);
+            videoResponsePage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('When the user has set \'Maximum recording duration\' to \'0\' (zero), a validation message \'Error: Value must be greater than 0 secs.\' should be displayed', () => {
+            videoResponsePage.steps.setMaximumRecordingDuration(0);
+            videoResponsePage.steps.verifyMaximumRecordingDuration(0);
+            utilities.verifyInnerText(videoResponsePage.errorMessage(), 'Error: Value must be greater than 0 secs.');
+            utilities.verifyElementVisibilityState(videoResponsePage.errorMessage(), 'visible');
+        });
+
+        videoResponsePage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When the user updates the \'Maximum recording duration\' value, then the validation message \'Error: Value must be greater than 0 secs.\' should disappear', () => {
+            videoResponsePage.steps.setMaximumRecordingDuration(1000);
+            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.setMaximumRecordingDuration('.100.0');
+            videoResponsePage.steps.verifyMaximumRecordingDuration(1000);
+            videoResponsePage.steps.setMaximumRecordingDuration('!@#abcde584');
+            videoResponsePage.steps.verifyMaximumRecordingDuration(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.setMaximumRecordingDuration(9999);
+            videoResponsePage.steps.verifyMaximumRecordingDuration(600);
+        });
+
+        it('When the user toggles to "Mins", "5" should be displayed in \'Maximum recording duration\' field', () => {
+            videoResponsePage.steps.toggleMaximumRecordingDurationInputField('Mins');
+            videoResponsePage.steps.verifyMaximumRecordingDuration(5);
+        });
+
+        it('When the user focuses in and out of the empty \'Maximum recording duration\' input field, \'Error: Maximum recording duration is required.\' validation error should be displayed below the \'Maximum recording duration\' input field', () => {
+            videoResponsePage.steps.clearMaximumRecordingDurationInputField();
+            utilities.verifyInnerText(videoResponsePage.errorMessage(), 'Error: Maximum recording duration is required.');
+            utilities.verifyElementVisibilityState(videoResponsePage.errorMessage(), 'visible');
+        });
+
+        videoResponsePage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When the user updates the \'Maximum recording duration\' value, then the validation message \'Error: Maximum recording duration is required.\' should disappear.', () => {
+            videoResponsePage.steps.setMaximumRecordingDuration(5);
+            videoResponsePage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('When the user has set \'Maximum recording duration\' to \'0\' (zero), a validation message \'Error: Value must be greater than 0 mins.\' should be displayed', () => {
+            videoResponsePage.steps.setMaximumRecordingDuration(0);
+            videoResponsePage.steps.verifyMaximumRecordingDuration(0);
+            utilities.verifyInnerText(videoResponsePage.errorMessage(), 'Error: Value must be greater than 0 mins.');
+            utilities.verifyElementVisibilityState(videoResponsePage.errorMessage(), 'visible');
+        });
+
+        videoResponsePage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When the user updates the \'Maximum recording duration\' value, then the validation message \'Error: Value must be greater than 0 mins.\' should disappear', () => {
+            videoResponsePage.steps.setMaximumRecordingDuration(5);
+            videoResponsePage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('When user tries to add a value greater than 10 it should be automatically set back to 10 and should not allow to add greater than set value', () => {
+            videoResponsePage.steps.setMaximumRecordingDuration(20);
+            videoResponsePage.steps.verifyMaximumRecordingDuration(10);
+        });
+    });
+
+    describe('Maximum recording duration: Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+            videoResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('By default, maximum recording duration (5 minutes) should be displayed in minutes(mm:ss) format', () => {
+            utilities.verifyInnerText(videoResponsePage.recordingTimer(), '05:00');
+            utilities.verifyElementVisibilityState(videoResponsePage.recordingTimer(), 'visible');
+        });
+
+        it('When the user has updated maximum recording duration value, then the updated value should get reflected in the preview tab and when user starts recording a video, the recorded video time should not go beyond the maximum recording duration value', () => {
+            videoResponsePage.steps.switchToEditTab();
+            videoResponsePage.steps.setMaximumRecordingDuration(30);
+            videoResponsePage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(videoResponsePage.recordingTimer(), '00:30');
+            videoResponsePage.steps.startRecording();
+            videoResponsePage.steps.waitForRecordingToStart();
+            videoResponsePage.steps.addWaitToRecord(29000);
+            videoResponsePage.steps.verifyVideoPlaybackTimer('00:00', '00:30');
+        })
+    });
+});

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

@@ -0,0 +1,179 @@
+import { correctAnswerViewPage, videoResponsePage, itemPreviewPage, studentViewPage } from "../../../pages";
+import { gradingViewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+let gradingAndCorrectAnsView = ['Grading view', 'Correct answer view']
+const views = utilities.getViews(gradingAndCorrectAnsView);
+var itemReferenceID = "";
+const playbackSpeedOptions = ['1x', '1.25x', '1.5x', '2x'];
+const playbackSpeedMultiplier = [1, 1.25, 1.5, 2];
+
+describe('Create item page - Video response: Grading view, Correct answer view contents', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    if (views.includes('Grading view')) {
+        describe('Grading view contents', { tags: 'smoke' }, () => {
+            let actualVideoSeekedInPercent = 50
+            abortEarlySetup();
+            before(() => {
+                videoResponsePage.steps.navigateToCreateQuestion('video response');
+                cy.barsPreLoaderWait();
+                videoResponsePage.steps.addTextInQuestionInstructionsInputField('Record a video');
+                videoResponsePage.steps.allotPoints(10);
+                videoResponsePage.steps.clickOnSaveQuestionButton();
+                utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                //Global variable issue, not working inside before
+                itemPreviewPage.referenceID()
+                    .invoke('text')
+                    .then(($refID) => {
+                        itemReferenceID = $refID;
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        videoResponsePage.steps.recordAndSaveVideo(12000);
+                        utilities.verifyElementVisibilityState(videoResponsePage.standardPreviewPlaybackWrapper(), 'visible');
+                        studentViewPage.steps.submitResponse();
+                        studentViewPage.steps.clickOnGoToGradingViewButton();
+                    });
+            });
+
+            it('Question instructions should be visible', () => {
+                utilities.verifyInnerText(videoResponsePage.questionInstructionsText(), 'Record a video');
+                utilities.verifyElementVisibilityState(videoResponsePage.questionInstructionsText(), 'visible');
+            });
+
+            it('The response submitted by the student should be visible in the playback player of the grading view.', () => {
+                utilities.verifyElementVisibilityState(videoResponsePage.standardPreviewPlaybackWrapper(), 'visible');
+                videoResponsePage.steps.verifyVideoPlaybackTimer('00:00', '00:12');
+            });
+
+            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.startPlayback();
+                videoResponsePage.steps.waitForPlaybackToBegin();
+                videoResponsePage.steps.verifyVideoPlaybackTimer('00:03', '00:12');
+            });
+            
+            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.verifyVideoPlaybackTimer('00:05', '00:12');
+                videoResponsePage.steps.pauseAndVerifyProgressBarSliderPosition();
+                videoResponsePage.steps.verifyVideoPlaybackTimer('00:05', '00:12');
+                utilities.verifyElementVisibilityState(videoResponsePage.playbackPlayButton(), 'visible');
+                utilities.verifyElementVisibilityState(videoResponsePage.playbackPauseButton(), '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.addWaitToPlayVideo(1000);
+                videoResponsePage.steps.verifyProgressBarSliderPosition(actualVideoSeekedInPercent);
+            });
+
+            it('When the video playback is completed, the \'Pause\' button should get replaced with \'Play\' button', () => {
+                videoResponsePage.steps.startPlayback();
+                videoResponsePage.steps.verifyVideoPlaybackTimer('00:10', '00:12');
+                utilities.verifyElementVisibilityState(videoResponsePage.playbackPlayButton(), 'visible');
+                utilities.verifyElementVisibilityState(videoResponsePage.playbackPauseButton(), 'notExist');
+                videoResponsePage.steps.verifyProgressBarSliderPosition(99);
+            });
+            
+            it('When the user hovers over \'Volume control\' button, volume control settings should open and by default it should be set to full volume and on hovering away from the button, the volume sliders should disappear', () => {
+                videoResponsePage.steps.hoverOnVolumeControlButton();
+                utilities.verifyElementVisibilityState(videoResponsePage.volumeControlSlider(), 'visible');
+                videoResponsePage.steps.verifyVolumeOfPlaybackPlayer('100');
+                utilities.hoverAwayFromElement();
+                utilities.verifyElementVisibilityState(videoResponsePage.volumeControlSlider(), 'notExist');
+            });
+
+            it('When volume is not set as 0 and user clicks on volume control button, then the video should be muted and the volume control button should change to a muted state', () => {
+                videoResponsePage.steps.clickOnVolumeButton();
+                videoResponsePage.steps.hoverOnVolumeControlButton();
+                videoResponsePage.steps.verifyVolumeOfPlaybackPlayer('0');
+                utilities.hoverAwayFromElement();
+                utilities.verifyElementVisibilityState(videoResponsePage.volumeControlSlider(), 'notExist');
+                utilities.verifyElementVisibilityState(videoResponsePage.muteVolumeIcon(), 'visible');
+            });
+
+            it('When the user clicks on the muted volume control button then the volume setting slider should return to full volume and the volume control button should change to an unmuted state', () => {
+                videoResponsePage.steps.clickOnVolumeButton();
+                videoResponsePage.steps.hoverOnVolumeControlButton();
+                videoResponsePage.steps.verifyVolumeOfPlaybackPlayer('100');
+                utilities.verifyElementVisibilityState(videoResponsePage.unmutedVolumeIcon(), 'visible');
+            });
+
+            it('User should be able to unmute the video by dragging the volume control higher again', () => {
+                videoResponsePage.steps.setVolumeSliderForPlayback(99);
+                videoResponsePage.steps.verifyVolumeOfPlaybackPlayer('100');
+                utilities.verifyElementVisibilityState(videoResponsePage.unmutedVolumeIcon(), 'visible');
+                utilities.hoverAwayFromElement();
+            });
+
+            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.hoverOnPlaybackSpeedButton();
+                    videoResponsePage.steps.selectPlaybackSpeed(playbackSpeedOptions[index])
+                    videoResponsePage.steps.startPlayback();
+                    videoResponsePage.steps.waitForPlaybackToBegin();
+                    videoResponsePage.steps.addWaitToPlayVideo(4000);
+                    videoResponsePage.steps.pausePlayback();
+                    videoResponsePage.steps.verifyPlaybackElapsedTime(1 + (4 * playbackSpeedMultiplier[index]));
+                    videoResponsePage.steps.startPlayback();
+                    videoResponsePage.steps.verifyVideoPlaybackTimer('00:12', '00:12');
+                });
+            }
+
+            it('A download button should be displayed in the playback player', () => {
+                utilities.verifyElementVisibilityState(videoResponsePage.downloadVideoButton(), 'visible');
+            });
+
+            it('Empty score input field and total score should be displayed', () => {
+                gradingViewPage.steps.verifyGradingViewScore('', 10);
+            });
+
+            it('CSS of download video button', { tags: 'css' }, () => {
+                utilities.verifyCSS(videoResponsePage.downloadVideoButton(), {
+                    'background-color': css.color.secondaryBtnBg,
+                    'border': `1px solid ${css.color.playerButtonBorder}`
+                });
+                utilities.verifyCSS(videoResponsePage.downloadVideoButton().find('svg path'), {
+                    'stroke': css.color.secondaryBtnActive
+                });
+            });
+
+            it('Accessibility of playback player', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(videoResponsePage.standardPreviewPlaybackWrapper());
+            });
+        });
+    }
+
+    if (views.includes('Correct answer view')) {
+        describe('Correct answer view contents', { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                videoResponsePage.steps.navigateToCreateQuestion('video response');
+                cy.barsPreLoaderWait();
+                videoResponsePage.steps.addTextInQuestionInstructionsInputField('Record a video');
+                videoResponsePage.steps.allotPoints(10);
+                videoResponsePage.steps.clickOnSaveQuestionButton();
+                utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                //Global variable issue, not working inside before
+                itemPreviewPage.referenceID()
+                    .invoke('text')
+                    .then(($refID) => {
+                        itemReferenceID = $refID
+                        cy.visit(`/item-engine/demo/render-item/correct-answer-view/${utilities.base64Encoding(itemReferenceID)}`);
+                    });
+            });
+
+            it('Question instructions should be visible', () => {
+                utilities.verifyTextContent(correctAnswerViewPage.correctAnswerViewQuestionInstructions(), 'Record a video');
+                utilities.verifyElementVisibilityState(correctAnswerViewPage.correctAnswerViewQuestionInstructions(), 'visible');
+            });
+
+            correctAnswerViewPage.tests.verifyManualScoredQuestionHelpTextCorrectAnswerPage();
+
+            it('The points alloted to the question should be displayed', () => {
+                correctAnswerViewPage.steps.verifyAvailablePoints(10);
+            });
+        });
+    }
+});

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

@@ -0,0 +1,79 @@
+import { dialogBoxBase } from "../../../pages";
+import { videoResponsePage } from "../../../pages/videoResponsePage";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+
+describe('Create question page - Video response: Header section and Saving question', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Header section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response')
+        });
+
+        videoResponsePage.tests.verifyCreateQuestionPageQuestionTypeHeader('video response');
+    });
+
+    describe('Tabs section', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response')
+        });
+
+        videoResponsePage.tests.verifyTabsSection();
+    });
+
+    describe('Cancel button', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response')
+        });
+
+        it('When user has made no edits and clicks on Cancel button, the user should be directed back to the \'Select a Question\' page', () => {
+            videoResponsePage.steps.clickOnCancelButton();
+            utilities.verifyElementVisibilityState(videoResponsePage.selectAQuestionHeaderText(), 'visible');
+            utilities.verifyElementVisibilityState(videoResponsePage.questionTypeOptionTitle(), 'visible');
+        });
+
+        it('When user has made some edits/changes and clicks on Cancel button, a popup should be displayed', () => {
+            videoResponsePage.steps.selectQuestionType('video response');
+            videoResponsePage.steps.addTextInQuestionInstructionsInputField('video response');
+            videoResponsePage.steps.clickOnCancelButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+        });
+
+        dialogBoxBase.tests.verifyContentsOfLeavePagePopupWithCSSAnda11y();
+
+        it(`Clicking on \'No, I'd like to go back\' button should close the popup and user should remain on the edit interface of the question`, () => {
+            dialogBoxBase.steps.clickOnRejectButtonInDialogBox();
+            videoResponsePage.steps.verifyEditTabSelectedState();
+            utilities.verifyTextContent(videoResponsePage.questionInstructionsInputField(), 'video response');
+        });
+
+        it(`Clicking on \'Yes, I want to leave this page\' button should discard all changes and direct the user to the \'Select a question\' page.`, () => {
+            videoResponsePage.steps.clickOnCancelButton();
+            dialogBoxBase.steps.clickOnAcceptButtonInDialogBox();
+            utilities.verifyElementVisibilityState(videoResponsePage.selectAQuestionHeaderText(), 'visible');
+            utilities.verifyElementVisibilityState(videoResponsePage.questionTypeOptionTitle(), 'visible');
+        });
+    });
+
+    describe('Saving a question', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response')
+            cy.barsPreLoaderWait();
+        });
+
+        videoResponsePage.tests.verifyCreateItemWrapperContentsA11y();
+
+        it('When user clicks on "Save question" button, then the question should get saved and a snackbar with text \'Saved successfully!\' should be displayed', () => {
+            videoResponsePage.steps.saveAQuestionAndVerifySnackbar();
+        });
+
+        videoResponsePage.tests.verifySavedSuccessfullySnackbarCSSAndA11y();
+    });
+});

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

@@ -0,0 +1,201 @@
+import { videoResponsePage, itemPreviewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+let previewContentViews = ['Question preview', 'Item view', 'Item preview', 'Student view'];
+const views = utilities.getViews(previewContentViews);
+var itemReferenceID = "";
+let actualVideoSeekedInPercent = 50
+
+//Note: Visit again for cases of student view, once https://redmine.zeuslearning.com/issues/570579 gets resolved
+describe('Create item page - Video response: Preview contents', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        describe(`Preview tab contents - ${view}`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        videoResponsePage.steps.navigateToCreateQuestion('video response');
+                        cy.barsPreLoaderWait();
+                        videoResponsePage.steps.addTextInQuestionInstructionsInputField('Record a video');
+                        videoResponsePage.steps.allotPoints(10);
+                        videoResponsePage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item view':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID[0])}`);
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID[0])}`);
+                        itemPreviewPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID[0])}`);
+                        break;
+                };
+            });
+
+            if (view === 'Question preview') {
+                after(() => {
+                    videoResponsePage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it('Question instructions should be visible', () => {
+                utilities.verifyInnerText(videoResponsePage.questionInstructionsText(), 'Record a video');
+                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', () => {
+                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.verifyElementVisibilityState(videoResponsePage.startRecordingText(), 'visible');
+            });
+
+            it('When the user has not started recording, a status message: \'Allow access to your camera and microphone.\' along with a microphone icon should be displayed on the recording interface', () => {
+                videoResponsePage.steps.verifyRecordingStatus('Allow access to your camera and microphone.');
+            });
+
+            //Note: Add "Blur background" and "Mirror video" assertions when made available
+            it('When the user has not started recording, maximum recording length should be displayed in minutes(mm:ss) format. "Blur background" and "Mirror video" buttons should also be displayed in the video recorder', () => {
+                utilities.verifyInnerText(videoResponsePage.recordingTimer(), '5:00');
+                utilities.verifyElementVisibilityState(videoResponsePage.recordingTimer(), 'visible');
+            });
+
+            it('CSS of recording interface', { tags: 'css' }, () => {
+                utilities.verifyCSS(videoResponsePage.clickTapAnywhereArea(), {
+                    'background-color': css.color.clickTapAnywhereAreaBg
+                });
+                utilities.verifyCSS(videoResponsePage.recordButton(), {
+                    'color': css.color.defaultBackground,
+                    'font-size': css.fontSize.extraLarge,
+                    'font-weight': css.fontWeight.medium,
+                    'border': `2px solid ${css.color.defaultBackground}`,
+                    'background-color': css.color.recordingIcon
+                });
+                utilities.verifyCSS(videoResponsePage.startRecordingText(), {
+                    'color': css.color.defaultBackground,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.regular,
+                });
+                utilities.verifyCSS(videoResponsePage.recordingStatusText(), {
+                    'color': css.color.defaultBackground,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.regular,
+                });
+                utilities.verifyCSS(videoResponsePage.recordingTimer(), {
+                    'color': css.color.defaultBackground,
+                    'font-size': css.fontSize.small,
+                    'font-weight': css.fontWeight.regular,
+                });
+                utilities.verifyCSS(utilities.getNthElement(videoResponsePage.recordingStatusIcon().find('path'), 1), {
+                    'fill': css.color.defaultBackground,
+                });
+            });
+
+            it('Accessibility of recording interface', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(videoResponsePage.clickTapAnywhereArea().parents('[class*="question-preview-wrapper"]'));
+            });
+
+            it('When the user clicks anywhere in the recording interface, then the recording should begin with a countdown and a status message: \'Preparing to record\', a disabled \'Pause\' button and an enabled \'Stop\' button should be displayed till the recording has not yet started and the recorder time should not change', () => {
+                videoResponsePage.steps.startRecording();
+                utilities.verifyElementVisibilityState(videoResponsePage.startRecordingCountDown(), 'visible');
+                videoResponsePage.steps.verifyRecordingStatus('Preparing to record');
+                utilities.verifyElementVisibilityState(videoResponsePage.pauseButton(), 'visible');
+                videoResponsePage.steps.verifyPauseButtonDisabledState();
+                utilities.verifyElementVisibilityState(videoResponsePage.stopButton(), 'visible');
+                utilities.verifyInnerText(videoResponsePage.recordingTimer(), '5:00');
+            });
+
+            it('When the recording starts, the countdown should disappear, status message should change to \'Recording...\', the \'Pause\' button should get enabled, user should be able to view the duration of their recorded video in minutes, displayed as \'(min:secs/min:sec)\'. Pause recording and Stop recording should be displayed in record player. Resume recording button should not be displayed.', () => {
+                utilities.verifyElementVisibilityState(videoResponsePage.startRecordingCountDown(), 'notExist');
+                videoResponsePage.steps.verifyRecordingStatus('Recording...');
+                videoResponsePage.steps.verifyPauseButtonEnabledState();
+                videoResponsePage.steps.verifyRecordingTime('00:04', '5:00');
+                utilities.verifyElementVisibilityState(videoResponsePage.pauseButton(), 'visible');
+                utilities.verifyElementVisibilityState(videoResponsePage.stopButton(), 'visible');
+                utilities.verifyElementVisibilityState(videoResponsePage.resumeButton(), 'notExist');
+            });
+
+            if (view !== 'Student view') {
+                it('When a recording is in progress and the user clicks on the \'Pause recording\' button, recording should pause and the status message should update to \'Recording paused\'. User should be able to view the duration of their recorded video in minutes, displayed as \'(min:secs/min:sec)\'. \'Pause recording\' button should get replaced with \'Resume recording\' button. \'Stop recording\' button should be displayed beside resume recording button', () => {
+                    videoResponsePage.steps.resetQuestionPreview();
+                    videoResponsePage.steps.startRecording();
+                    videoResponsePage.steps.waitForRecordingToStart();
+                    videoResponsePage.steps.addWaitToRecord(3000);
+                    videoResponsePage.steps.pauseRecording();
+                    videoResponsePage.steps.verifyRecordingTime('00:04', '5:00');
+                    videoResponsePage.steps.verifyRecordingStatus('Recording paused');
+                    utilities.verifyElementVisibilityState(videoResponsePage.pauseButton(), 'notExist');
+                    utilities.verifyElementVisibilityState(videoResponsePage.resumeButton(), 'visible');
+                    utilities.verifyElementVisibilityState(videoResponsePage.stopButton(), 'visible');
+                });
+
+                it('When the recorder is in paused state and the user clicks on the \'Resume recording\' button, recording should get resumed. the status message should update to "Recording...". User should be able to view the duration of their recorded video in minutes, displayed as \'(min:secs/min:sec)\'. Pause recording and stop recording buttons should be displayed. Start recording button should not be displayed', () => {
+                    videoResponsePage.steps.resumeRecording();
+                    videoResponsePage.steps.verifyRecordingStatus('Recording...');
+                    videoResponsePage.steps.verifyRecordingTime('00:05', '5:00');
+                    utilities.verifyElementVisibilityState(videoResponsePage.pauseButton(), 'visible');
+                    utilities.verifyElementVisibilityState(videoResponsePage.stopButton(), 'visible');
+                });
+
+                it('When a recording is in progress and the user first pauses the recording and then stops recording, then the recording should stop, recorded video response should be saved. User should be able to view the duration of their recorded video in minutes, displayed as \'(min:secs)\'.', () => {
+                    videoResponsePage.steps.resetQuestionPreview();
+                    videoResponsePage.steps.startRecording();
+                    videoResponsePage.steps.waitForRecordingToStart();
+                    videoResponsePage.steps.addWaitToRecord(9000);
+                    videoResponsePage.steps.pauseRecording();
+                    videoResponsePage.steps.stopAndVerifySavingAndRecordingLength();
+                });
+            } else {
+                it('When a recording is in progress and the user clicks on the \'Pause recording\' button, recording should pause and the status message should update to \'Recording paused\'. User should be able to view the duration of their recorded video in minutes, displayed as \'(min:secs/min:sec)\'. \'Pause recording\' button should get replaced with \'Resume recording\' button. \'Stop recording\' button should be displayed beside resume recording button', () => {
+                    videoResponsePage.steps.pauseRecording();
+                    videoResponsePage.steps.verifyRecordingTime('00:06', '5:00');
+                    videoResponsePage.steps.verifyRecordingStatus('Recording paused');
+                    utilities.verifyElementVisibilityState(videoResponsePage.pauseButton(), 'notExist');
+                    utilities.verifyElementVisibilityState(videoResponsePage.resumeButton(), 'visible');
+                    utilities.verifyElementVisibilityState(videoResponsePage.stopButton(), 'visible');
+                });
+
+                it('When the recorder is in paused state and the user clicks on the \'Resume recording\' button, recording should get resumed. the status message should update to "Recording...". User should be able to view the duration of their recorded video in minutes, displayed as \'(min:secs/min:sec)\'. Pause recording and stop recording buttons should be displayed. Start recording button should not be displayed', () => {
+                    videoResponsePage.steps.resumeRecording();
+                    videoResponsePage.steps.verifyRecordingStatus('Recording...');
+                    videoResponsePage.steps.verifyRecordingTime('00:08', '5:00');
+                    utilities.verifyElementVisibilityState(videoResponsePage.pauseButton(), 'visible');
+                    utilities.verifyElementVisibilityState(videoResponsePage.stopButton(), 'visible');
+                });
+
+                it('When a recording is in progress and the user stops recording, then the recording should stop, recorded video response should be saved. User should be able to view the duration of their recorded video in minutes, displayed as \'(min:secs)\'.', () => {
+                    videoResponsePage.steps.stopAndVerifySavingAndRecordingLength();
+                });
+            }
+
+            //Cases of video playback
+            it('When the user clicks on \'Play\' button, then user should be able to playback the recording. Timer should display the amount of video that has been played and the total recording length in (mm:ss)/(mm:ss) format. \'Your response has been recorded\' message should be displayed below video player', () => {
+                videoResponsePage.steps.startPlayback();
+                videoResponsePage.steps.waitForPlaybackToBegin();
+                videoResponsePage.steps.verifyVideoPlaybackTimer('00:02', '00:10');
+                utilities.verifyInnerText(videoResponsePage.savedResponseText(), 'Your response has been recorded.');
+            });
+
+            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.pauseAndVerifyProgressBarSliderPosition();
+                utilities.verifyElementVisibilityState(videoResponsePage.playbackPlayButton(), 'visible');
+                utilities.verifyElementVisibilityState(videoResponsePage.playbackPauseButton(), '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.addWaitToPlayVideo(1000);
+                videoResponsePage.steps.verifyProgressBarSliderPosition(actualVideoSeekedInPercent);
+            });
+        });
+    });
+});