itemengine-cypress-automation 1.0.50 → 1.0.62

package/cypress/e2e/ILC/SingleSelectionGrid/singleSelectionGridPartialEqualWeightsCorrectPointsGreaterThanAlternatePoints.js

@@ -0,0 +1,226 @@
+import { singleSelectionGridPage } from "../../../pages/singleSelectionGridPage";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+const questionStems = ['Pollution caused by treating chemical waste', 'Pollution caused by cement production', 'Pollution caused by methane production', 'Pollution caused by cement and methane production'];
+const options = ['Fully agree as true', 'Fully agree as false', 'Somewhat agree'];
+
+describe('Create Item page - Single Selection Grid: Preview tab Scoring Section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question Preview: AutoScored - Partial equal weights with alternate answer', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Single selection grid question type');
+            singleSelectionGridPage.steps.navigateToCreateQuestion('single selection grid');
+            cy.log('Adding question instructions, question stems, options, setting correct answer and adding points for Autoscored Partial equal weights scoring type and switching to Preview tab');
+            singleSelectionGridPage.steps.addQuestionInstructions();
+            singleSelectionGridPage.steps.addOption()
+            singleSelectionGridPage.steps.addInputToAllQuestionStemFields(questionStems);
+            singleSelectionGridPage.steps.addInputToAllOptionsFields(options);
+            singleSelectionGridPage.steps.selectPartialEqualWeightsCheckbox();
+            singleSelectionGridPage.steps.uncheckRoundDownScoreCheckbox()
+            singleSelectionGridPage.steps.allotPoints(20);
+            singleSelectionGridPage.steps.selectOptionForAllQuestionStemsInSetCorrectAnswerTable([0, 1, 0, 1]);
+            singleSelectionGridPage.steps.clickOnAddAlternateAnswerButton();
+            singleSelectionGridPage.steps.allotPoints(12);
+            singleSelectionGridPage.steps.selectOptionForAllQuestionStemsInSetCorrectAnswerTable([0, 2, 2, 1]);
+            singleSelectionGridPage.steps.expandAdditonalSettings();
+            singleSelectionGridPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+            singleSelectionGridPage.steps.switchToPreviewTab();
+        });
+
+        it('Alternate answer case: When Correct Answer points are more than Alternate Answer points', () => {
+            cy.log('Total points displayed besides Show correct answer checkbox should be of Correct Answer points')
+            singleSelectionGridPage.previewScoreText()
+                .verifyInnerText('0/20');
+
+            cy.log('When the user selects the Show correct answer checkbox without attempting the question, green check-mark icons should be displayed besides only correct answer options')
+            singleSelectionGridPage.steps.checkShowCorrectAnswerCheckbox()
+            singleSelectionGridPage.steps.verifyCorrectOptionCheckmarkIconForAllQuestionStems([0, 1, 0, 1]);
+            singleSelectionGridPage.incorrectIcon()
+                .should('not.exist');
+            singleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            singleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible()
+
+            singleSelectionGridPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked()
+
+            cy.log('When the user selects correct answer options, points specified for correct answers should be provided and on selecting \'Show correct answer\' checkbox green check-mark icon should be displayed besides options and correct/incorrect answer label and its border should not be displayed')
+            singleSelectionGridPage.steps.selectOptionForAllQuestionStemsInPreviewTabAnswerTable([0, 1, 0, 1]);
+            singleSelectionGridPage.previewScoreText()
+                .verifyInnerText('20/20');
+            singleSelectionGridPage.steps.checkShowCorrectAnswerCheckbox()
+            singleSelectionGridPage.steps.verifyCorrectOptionCheckmarkIconForAllQuestionStems([0, 1, 0, 1]);
+            singleSelectionGridPage.incorrectIcon()
+                .should('not.exist');
+            singleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            singleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible()
+
+            singleSelectionGridPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked()
+
+            cy.log('When the user clicks on \'Check answer\' button, then green check-mark icons should be displayed besides options and correct/incorrect answer label and its border should not be displayed')
+            singleSelectionGridPage.steps.checkAnswer();
+            singleSelectionGridPage.steps.verifyCorrectOptionCheckmarkIconForAllQuestionStems([0, 1, 0, 1]);
+            singleSelectionGridPage.incorrectIcon()
+                .should('not.exist');
+            singleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            singleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible()
+
+            cy.log('When the user selects alternate correct answer options, points specified for alternate correct answer (less than overall points) should be provided and on selecting Show correct answer checkbox green check-mark icons should be displayed besides alternate correct answer options and correct/incorrect answer label and its border should not be displayed')
+            singleSelectionGridPage.steps.selectOptionForAllQuestionStemsInPreviewTabAnswerTable([0, 2, 2, 1]);
+            singleSelectionGridPage.steps.checkShowCorrectAnswerCheckbox()
+            singleSelectionGridPage.previewScoreText()
+                .verifyInnerText('12/20');
+            singleSelectionGridPage.steps.verifyCorrectOptionCheckmarkIconForAllQuestionStems([0, 2, 2, 1]);
+            singleSelectionGridPage.incorrectIcon()
+                .should('not.exist');
+            singleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            singleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible()
+
+            singleSelectionGridPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked()
+
+            cy.log('When the user clicks on \'Check answer\' button, then green check-mark icons should be displayed besides alternate correct answer options and correct/incorrect answer label and its border should not be displayed')
+            singleSelectionGridPage.steps.checkAnswer();
+            singleSelectionGridPage.steps.verifyCorrectOptionCheckmarkIconForAllQuestionStems([0, 2, 2, 1]);
+            singleSelectionGridPage.incorrectIcon()
+                .should('not.exist');
+            singleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            singleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible()
+
+            cy.log('When user selects partially correct answer options such that user has selected correct options only from the correct tab and user selects show correct answer checkbox then user should be awarded with points for the correctly attempted options and green check-mark icons should be displayed beside the options set in the correct tab and red cross-mark icons should be displayed beside the incorrectly answered options and correct/incorrect answer label and its border should not be displayed')
+            singleSelectionGridPage.steps.selectOptionForAllQuestionStemsInPreviewTabAnswerTable([1, 1, 0, 2]);
+            singleSelectionGridPage.steps.checkShowCorrectAnswerCheckbox()
+            singleSelectionGridPage.previewScoreText()
+                .verifyInnerText('10/20');
+            singleSelectionGridPage.steps.verifyCorrectOptionCheckmarkIconForAllQuestionStems([0, 1, 0, 1]);
+            singleSelectionGridPage.steps.verifyIncorrectOptionCrossmarkIcon(0, 1);
+            singleSelectionGridPage.steps.verifyIncorrectOptionCrossmarkIcon(3, 2);
+            singleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            singleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible()
+
+            singleSelectionGridPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked()
+
+            cy.log('When the user clicks on \'Check answer\' button, red check-marks should be displayed besides the selected incorrect answer options and green check-mark icons should be displayed beside the selected correct answer and correct/incorrect answer label and its border should not be displayed')
+            singleSelectionGridPage.steps.checkAnswer();
+            singleSelectionGridPage.steps.verifyIncorrectOptionCrossmarkIcon(0, 1);
+            singleSelectionGridPage.steps.verifyCorrectOptionCheckmarkIcon(1, 1);
+            singleSelectionGridPage.steps.verifyCorrectOptionCheckmarkIcon(2, 0);
+            singleSelectionGridPage.steps.verifyIncorrectOptionCrossmarkIcon(3, 2);
+            singleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            singleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible()
+
+            cy.log('When user selects partially correct answer options such that user has selected correct options only from the alternate tab and user selects show correct answer checkbox then user should be awarded with the points from selected correct answer options and green check-mark icons should be displayed beside the options set in the alternate tab and red cross-mark icons should be displayed beside the incorrectly answered options and correct/incorrect answer label and its border should not be displayed')
+            singleSelectionGridPage.steps.selectOptionForAllQuestionStemsInPreviewTabAnswerTable([2, 2, 2, 2]);
+            singleSelectionGridPage.steps.checkShowCorrectAnswerCheckbox()
+            singleSelectionGridPage.previewScoreText()
+                .verifyInnerText('6/20');
+            singleSelectionGridPage.steps.verifyCorrectOptionCheckmarkIconForAllQuestionStems([0, 2, 2, 1]);
+            singleSelectionGridPage.steps.verifyIncorrectOptionCrossmarkIcon(0, 2);
+            singleSelectionGridPage.steps.verifyIncorrectOptionCrossmarkIcon(3, 2);
+            singleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            singleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible()
+
+            singleSelectionGridPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked()
+
+            cy.log('When the user clicks on \'Check answer\' button, red check-marks should be displayed besides the selected incorrect answer options and green check-mark icons should be displayed beside the selected correct answer and correct/incorrect answer label and its border should not be displayed')
+            singleSelectionGridPage.steps.checkAnswer();
+            singleSelectionGridPage.steps.verifyIncorrectOptionCrossmarkIcon(0, 2);
+            singleSelectionGridPage.steps.verifyCorrectOptionCheckmarkIcon(1, 2);
+            singleSelectionGridPage.steps.verifyCorrectOptionCheckmarkIcon(2, 2);
+            singleSelectionGridPage.steps.verifyIncorrectOptionCrossmarkIcon(3, 2);
+            singleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            singleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible()
+
+            cy.log('When user selects equal number of options from the correct tab and alternate tab then points of the correctly attempted options from the correct tab should be awarded and on selecting show correct answer checkbox green check-mark icon should be displayed beside options from the correct tab and red cross-mark icon should be displayed beside the options from the alternate tab and correct/incorrect answer label and its border should not be displayed')
+            singleSelectionGridPage.steps.selectOptionForAllQuestionStemsInPreviewTabAnswerTable([0, 2, 0, 1]);
+            singleSelectionGridPage.steps.checkShowCorrectAnswerCheckbox()
+            singleSelectionGridPage.previewScoreText()
+                .verifyInnerText('15/20');
+            singleSelectionGridPage.steps.verifyCorrectOptionCheckmarkIconForAllQuestionStems([0, 1, 0, 1]);
+            singleSelectionGridPage.steps.verifyIncorrectOptionCrossmarkIcon(1, 2);
+            singleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            singleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible()
+
+            singleSelectionGridPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked()
+
+            cy.log('When the user clicks on \'Check answer\' button, red check-marks should be displayed besides the selected incorrect answer options and green check-mark icons should be displayed beside the selected correct answer and correct/incorrect answer label and its border should not be displayed')
+            singleSelectionGridPage.steps.checkAnswer();
+            singleSelectionGridPage.steps.verifyCorrectOptionCheckmarkIcon(0, 0);
+            singleSelectionGridPage.steps.verifyIncorrectOptionCrossmarkIcon(1, 2);
+            singleSelectionGridPage.steps.verifyCorrectOptionCheckmarkIcon(2, 0);
+            singleSelectionGridPage.steps.verifyCorrectOptionCheckmarkIcon(3, 1);
+            singleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            singleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible()
+
+            cy.log('When user selects incorrect answer option, 0 points should be awarded and on selecting Show correct answer checkbox red cross-mark icons should be displayed besides the selected incorrect answer options and green checkmarks should be displayed beside correct tab answers and correct/incorrect answer label and its border should not be displayed')
+            singleSelectionGridPage.steps.selectOptionForAllQuestionStemsInPreviewTabAnswerTable([2, 0, 1, 2]);
+            singleSelectionGridPage.steps.checkShowCorrectAnswerCheckbox()
+            singleSelectionGridPage.previewScoreText()
+                .verifyInnerText('0/20');
+            singleSelectionGridPage.steps.verifyCorrectOptionCheckmarkIconForAllQuestionStems([0, 1, 0, 1]);
+            singleSelectionGridPage.steps.verifyIncorrectOptionCrossmarkIconForAllQuestionStems([2, 0, 1, 2]);
+            singleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            singleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible()
+
+            singleSelectionGridPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked()
+
+            cy.log('When the user clicks on \'Check answer\' button, red check-marks should be displayed besides the selected incorrect answer options and correct/incorrect answer label and its border should not be displayed')
+            singleSelectionGridPage.steps.checkAnswer()
+            singleSelectionGridPage.steps.verifyIncorrectOptionCrossmarkIconForAllQuestionStems([2, 0, 1, 2]);
+            singleSelectionGridPage.correctIcon()
+                .should('not.exist');
+            singleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            singleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible()
+
+            cy.log('(Overachiever case) Prestep: Switching to Edit tab and alloting points to correct and alternate tab such that the difference between the points is substantial and the points per response are in decimal')
+            singleSelectionGridPage.steps.switchToEditTab();
+            singleSelectionGridPage.steps.clearPointsField();
+            singleSelectionGridPage.steps.allotPoints('10');
+            singleSelectionGridPage.steps.selectOptionForAllQuestionStemsInSetCorrectAnswerTable([2, 2, 2, 2]);
+            singleSelectionGridPage.steps.navigateToCorrectTab();
+            singleSelectionGridPage.steps.clearPointsField();
+            singleSelectionGridPage.steps.allotPoints('50');
+            singleSelectionGridPage.steps.switchToPreviewTab();
+
+            cy.log('Overachiever case: When the user selects more number of correct options from the alternate tab than the correct tab but the score of the individual response selected from the correct tab overpowers the combined score of the alternate tab answers then green checkmark icons should be displayed for the correct tab option, red crossmark icon should be displayed for the alternate tab options and points awarded should be of the correct tab and correct/incorrect answer label and its border should not be displayed')
+            singleSelectionGridPage.steps.selectOptionForAllQuestionStemsInPreviewTabAnswerTable([2, 2, 2, 1]);
+            singleSelectionGridPage.previewScoreText()
+                .verifyInnerText('12.5/50');
+            singleSelectionGridPage.steps.checkShowCorrectAnswerCheckbox()
+            singleSelectionGridPage.steps.verifyCorrectOptionCheckmarkIconForAllQuestionStems([0, 1, 0, 1]);
+            singleSelectionGridPage.steps.verifyIncorrectOptionCrossmarkIcon(0, 2);
+            singleSelectionGridPage.steps.verifyIncorrectOptionCrossmarkIcon(1, 2);
+            singleSelectionGridPage.steps.verifyIncorrectOptionCrossmarkIcon(2, 2);
+            singleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            singleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible()
+
+            singleSelectionGridPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked()
+
+            cy.log('Overachiever case: When the user clicks on \'Check answer\' button, green checkmark icons should be displayed for the correct tab option, red crossmark icon should be displayed for the alternate tab options and points awarded should be of the correct tab and correct/incorrect answer label and its border should not be displayed')
+            singleSelectionGridPage.steps.checkAnswer()
+            singleSelectionGridPage.steps.verifyIncorrectOptionCrossmarkIcon(0, 2);
+            singleSelectionGridPage.steps.verifyIncorrectOptionCrossmarkIcon(1, 2);
+            singleSelectionGridPage.steps.verifyIncorrectOptionCrossmarkIcon(2, 2);
+            singleSelectionGridPage.steps.verifyCorrectOptionCheckmarkIcon(3, 1);
+            singleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            singleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible();
+        });
+    });
+});

package/cypress/e2e/ILC/VideoResponse/videoResponseAdditionalSettings.js

@@ -0,0 +1,135 @@
+import { videoResponsePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const fontSizeDropdownOptions = ['Default', 'Small', 'Normal', 'Large', 'Extra large', 'Huge'];
+const fontSizes = ['16px', '12px', '14px', '17px', '20px', '24px'];
+
+describe('Create item page - Video response: Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Video response: Advanced playback options - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+            cy.barsPreLoaderWait();
+            videoResponsePage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Advanced playback options\' label should be displayed. By default 3 options - Playback speed, Full screen, Record again should be displayed in \'Advanced playback options\' section in selected state', () => {
+            utilities.verifyInnerText(videoResponsePage.advancedPlaybackOptionsLabel(), 'Advanced playback options');
+            utilities.verifyElementVisibilityState(videoResponsePage.advancedPlaybackOptionsLabel(), 'visible');
+            videoResponsePage.steps.verifyPlaybackSpeedAdvancedPlaybackOptionSelectedState();
+            videoResponsePage.steps.verifyFullScreenAdvancedPlaybackOptionSelectedState();
+            videoResponsePage.steps.verifyRecordAgainAdvancedPlaybackOptionSelectedState();
+        });
+
+        it('CSS of \'Advanced playback options\' section in default state', { tags: 'css' }, () => {
+            utilities.verifyCSS(videoResponsePage.advancedPlaybackOptionsLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            const optionButtons = [videoResponsePage.playbackSpeedAdvancedPlaybackOptionButton(), videoResponsePage.fullScreenAdvancedPlaybackOptionButton(), videoResponsePage.recordAgainAdvancedPlaybackOptionButton()];
+            optionButtons.forEach(button => {
+                utilities.verifyCSS(button, {
+                    'background-color': css.color.activeButtons,
+                    'border': `1px solid ${css.color.activeButtons}`
+                });
+            });
+            utilities.verifyCSS(videoResponsePage.advancedPlaybackOptionButtonSelectedIcon().find('[data-name="Icon feather-check"]'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(videoResponsePage.advancedPlaybackOptionButtonLabel(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            })
+            utilities.verifyCSS(videoResponsePage.playbackSpeedAdvancedPlaybackOptionButton().find('.video_icon_wrapper svg g'), {
+                'stroke': css.color.secondaryBtnBg
+            });
+            utilities.verifyCSS(videoResponsePage.fullScreenAdvancedPlaybackOptionButton().find('.video_icon_wrapper svg'), {
+                'fill': css.color.secondaryBtnBg
+            });
+            utilities.verifyCSS(videoResponsePage.recordAgainAdvancedPlaybackOptionButton().find('.video_icon_wrapper svg path'), {
+                'fill': css.color.secondaryBtnBg
+            });
+        });
+
+        it('Accessibility of \'Advanced playback options\' section in default state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(videoResponsePage.advancedPlaybackOptionsLabel().parents('.advanced-recorder-settings'));
+        });
+
+        it('User should be able to deselect all options present in \'Advanced playback options\' section', () => {
+            videoResponsePage.steps.clickOnPlaybackSpeedAdvancedPlaybackOption();
+            videoResponsePage.steps.verifyPlaybackSpeedAdvancedPlaybackOptionDeselectedState();
+            videoResponsePage.steps.clickOnFullScreenAdvancedPlaybackOption();
+            videoResponsePage.steps.verifyFullScreenAdvancedPlaybackOptionDeselectedState();
+            videoResponsePage.steps.clickOnRecordAgainAdvancedPlaybackOption();
+            videoResponsePage.steps.verifyRecordAgainAdvancedPlaybackOptionDeselectedState();
+            utilities.verifyElementVisibilityState(videoResponsePage.advancedPlaybackOptionButtonSelectedIcon(), 'notExist')
+        });
+
+        it('CSS of \'Advanced playback options\' section if user has deselected all options from \'Advanced playback options\' section', { tags: 'css' }, () => {
+            const optionButtons = [videoResponsePage.playbackSpeedAdvancedPlaybackOptionButton(), videoResponsePage.fullScreenAdvancedPlaybackOptionButton(), videoResponsePage.recordAgainAdvancedPlaybackOptionButton()];
+            for (let index = 0; index < optionButtons.length; index++) {
+                utilities.verifyCSS(optionButtons[index], {
+                    'background-color': css.color.defaultBackground,
+                    'border': `1px solid ${css.color.defaultDropdownBorder}`
+                });
+            };
+            utilities.verifyCSS(videoResponsePage.advancedPlaybackOptionButtonLabel(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(videoResponsePage.playbackSpeedAdvancedPlaybackOptionButton().find('.video_icon_wrapper svg g'), {
+                'stroke': css.color.secondaryBtn
+            });
+            utilities.verifyCSS(videoResponsePage.fullScreenAdvancedPlaybackOptionButton().find('.video_icon_wrapper svg'), {
+                'fill': css.color.secondaryBtn
+            });
+            utilities.verifyCSS(videoResponsePage.recordAgainAdvancedPlaybackOptionButton().find('.video_icon_wrapper svg path'), {
+                'fill': css.color.secondaryBtn
+            });
+        });
+
+        it('Accessibility of \'Advanced playback options\' section if user has deselected all options from \'Advanced playback options\' section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(videoResponsePage.advancedPlaybackOptionsLabel().parents('.advanced-recorder-settings'));
+        });
+    });
+
+    describe('Video response: Advanced playback options - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+            cy.barsPreLoaderWait();
+            videoResponsePage.steps.switchToPreviewTab();
+            videoResponsePage.steps.recordAndSaveVideo(5000);
+        });
+
+        it('When all the advanced playback options are in selected state, then in the video playback player, playback speed, full screen and record again buttons should be displayed', () => {
+            utilities.verifyElementVisibilityState(videoResponsePage.recordAgainButton(), 'visible');
+            utilities.verifyElementVisibilityState(videoResponsePage.playbackSpeedButton(), 'visible');
+            utilities.verifyElementVisibilityState(videoResponsePage.fullScreenButton(), 'visible');
+        });
+
+        it('When the user switches to the edit tab and deselects all the advanced playback options, then in the video playback player, playback speed, full screen and record again buttons should not be displayed', () => {
+            videoResponsePage.steps.switchToEditTab();
+            videoResponsePage.steps.expandAdditonalSettings();
+            videoResponsePage.steps.clickOnPlaybackSpeedAdvancedPlaybackOption();
+            videoResponsePage.steps.verifyPlaybackSpeedAdvancedPlaybackOptionDeselectedState();
+            videoResponsePage.steps.clickOnFullScreenAdvancedPlaybackOption();
+            videoResponsePage.steps.verifyFullScreenAdvancedPlaybackOptionDeselectedState();
+            videoResponsePage.steps.clickOnRecordAgainAdvancedPlaybackOption();
+            videoResponsePage.steps.verifyRecordAgainAdvancedPlaybackOptionDeselectedState();
+            videoResponsePage.steps.switchToPreviewTab();
+            videoResponsePage.steps.recordAndSaveVideo(5000);
+            utilities.verifyElementVisibilityState(videoResponsePage.recordAgainButton(), 'notExist');
+            utilities.verifyElementVisibilityState(videoResponsePage.playbackSpeedButton(), 'notExist');
+            utilities.verifyElementVisibilityState(videoResponsePage.fullScreenButton(), 'notExist');
+        });
+    });
+});

package/cypress/e2e/ILC/VideoResponse/videoResponseAdditionalSettingsBasic.js

@@ -0,0 +1,88 @@
+import { videoResponsePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const fontSizeDropdownOptions = ['Default', 'Small', 'Normal', 'Large', 'Extra large', 'Huge'];
+const fontSizes = ['16px', '12px', '14px', '17px', '20px', '24px'];
+
+describe('Create item page - Video response: Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('\'Additional settings\' accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+        });
+
+        videoResponsePage.tests.verifyAdditonalSettingsAccordionProperties();
+    });
+
+    describe('Additional settings: Student response area and layout', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to video response type');
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+            videoResponsePage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Student response area and layout\' label should be displayed', () => {
+            utilities.verifyInnerText(videoResponsePage.studentResponseAreaAndLayoutLabel(), 'Student response area and layout');
+            utilities.verifyElementVisibilityState(videoResponsePage.studentResponseAreaAndLayoutLabel(), 'visible');
+        });
+
+        it('CSS of \'Student response area and layout\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(videoResponsePage.studentResponseAreaAndLayoutLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+        //Note: a11y covered in verifyAdditonalSettingsAccordionProperties
+    });
+
+    describe('Video response: Font size contents', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+            cy.barsPreLoaderWait();
+            videoResponsePage.steps.expandAdditonalSettings();
+        });
+
+        videoResponsePage.tests.verifyFontSizeSectionContents();
+    });
+
+    describe('Video response: Font size contents preview tab section', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+            cy.barsPreLoaderWait();
+            videoResponsePage.steps.addQuestionInstructions();
+            videoResponsePage.steps.expandAdditonalSettings();
+        });
+
+        fontSizeDropdownOptions.forEach((option, fontsIndex) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the preview content should be changed to ${option} in the preview tab`, () => {
+                videoResponsePage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex)
+                utilities.verifyInnerText(videoResponsePage.fontSizeDropdown(), `${option}`)
+                videoResponsePage.steps.switchToPreviewTab();
+                utilities.verifyCSS(videoResponsePage.questionInstructionsText(), {
+                    'font-size': fontSizes[fontsIndex]
+                });
+                videoResponsePage.steps.switchToEditTab();
+            });
+        });
+    });
+
+    describe('Video response: Details section', () => {
+        abortEarlySetup();
+        before(() => {
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+            cy.barsPreLoaderWait();
+            videoResponsePage.steps.expandAdditonalSettings();
+        });
+
+        videoResponsePage.tests.verifyDetailsSection();
+    });
+});

package/cypress/e2e/ILC/VideoResponse/videoResponseEditTabBasic.js

@@ -0,0 +1,78 @@
+import { videoResponsePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+
+describe('Create item page - Video response: Question instructions: Edit tab, Question instructions: Preview tab, Maximum recorder length: Edit tab, Maximum recorder length: Preview tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question instructions input field: Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to video response question type');
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+        });
+
+        videoResponsePage.tests.verifyQuestionInstructionsInputFieldEditTab();
+    });
+
+    describe('Question instructions input field: Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to video response question type');
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+        });
+
+        videoResponsePage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
+    });
+
+    describe('Maximum recorder length: Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to video response question type');
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+        });
+
+        videoResponsePage.tests.verifyMaximumRecorderLengthLabelAndInputField();
+
+        //Note: a11y is covered for Maximum recorder length section in HeaderSection file using verifya11yOfCreateItemWrapperContents
+
+        videoResponsePage.tests.verifyMaximumRecorderLengthInputFieldErrorMessages();
+
+        videoResponsePage.tests.verifyMaximumRecorderLengthCharacterAcceptanceCriteria();
+
+        it('When user tries to add a value greater than 1200 it should be automatically set back to 1200 and should not allow to add greater than set value', () => {
+            videoResponsePage.steps.setMaximumRecorderLength('9999');
+            videoResponsePage.steps.verifyMaximumRecorderLength('1200');
+        });
+        
+        videoResponsePage.tests.verifyMaximumRecorderLengthSectionCSS();
+    });
+
+    describe('Maximum recorder length: Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to video response question type');
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+            videoResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('By default, maximum recorder length (15 minutes) should be displayed in minutes(mm:ss) format', () => {
+            utilities.verifyInnerText(videoResponsePage.recordingTimer(), '15:00');
+            utilities.verifyElementVisibilityState(videoResponsePage.recordingTimer(), 'visible');
+        });
+
+        //https://redmine.zeuslearning.com/issues/540912
+        it('When the user has updated maximum recorder length 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 recorder length value', () => {
+            videoResponsePage.steps.switchToEditTab()
+            videoResponsePage.steps.setMaximumRecorderLength('10');
+            videoResponsePage.steps.switchToPreviewTab();
+            videoResponsePage.steps.verifyRecordingTime('00:10');
+            videoResponsePage.steps.startRecording();
+            videoResponsePage.steps.waitForRecordingToStart();
+            videoResponsePage.steps.addWaitToRecord(9000);
+            videoResponsePage.steps.verifyVideoPlaybackTimer('00:00/00:10');
+        })
+    });
+});

package/cypress/e2e/ILC/VideoResponse/videoResponseHeaderSection.js

@@ -0,0 +1,74 @@
+import { dialogBoxBase, videoResponsePage } from "../../../pages";
+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(() => {
+            cy.log('Navigating to video response question type');
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+        });
+
+        videoResponsePage.tests.verifyCreateQuestionPageQuestionTypeHeader('Video response');
+    });
+
+    describe('Tabs section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to video response question type');
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+        });
+
+        videoResponsePage.tests.verifyTabsSection();
+    });
+
+    describe('Cancel button', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to video response question type');
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+        });
+
+        videoResponsePage.tests.verifyCancelButton('video response');
+    });
+
+    describe('Save question button', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to video response question type');
+            videoResponsePage.steps.navigateToCreateQuestion('video response');
+            cy.barsPreLoaderWait();
+        });
+
+        describe('Validation error messages', () => {
+            dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton();
+
+            it('Validation error messages should be displayed below required input fields', () => {
+                videoResponsePage.steps.verifyQuestionInstructionsErrorMessage()
+                utilities.verifyElementVisibilityState(videoResponsePage.pleaseEnterPointsErrorMessage(), 'visible');
+            });
+
+            it('Validation error messages should disappear when required input fields are filled', () => {
+                videoResponsePage.steps.addQuestionInstructions();
+                videoResponsePage.steps.verifyQuestionInstructionsErrorMessageIsNotDisplayed();
+                videoResponsePage.steps.allotPoints(20);
+                utilities.verifyElementVisibilityState(videoResponsePage.pleaseEnterPointsErrorMessage(), 'notExist');
+            });
+
+            videoResponsePage.tests.verifya11yOfCreateItemWrapperContents();
+        });
+
+        describe('Saving a question', () => {
+            it('When user has filled all the mandatory fields then on clicking on Save question button the question should get saved and a snackbar with text \'Saved successfully!\' should be displayed', () => {
+                videoResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            });
+
+            videoResponsePage.tests.verifySavedSuccessfullySnackbarCSSanda11y();
+        });
+    });
+});