itemengine-cypress-automation 1.0.189-e2e-execution-crash-83cdbd4.0 → 1.0.190-7thMayFixes-fcaf7b8.0

package/cypress/e2e/ILC/ListOrderingNew/studentViewSettings.js

@@ -0,0 +1,244 @@
+
+import { listOrderingPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const options = ['sprout', 'plant', 'flower', 'seed'];
+
+describe('Create Item page - List ordering : Student view settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Randomize options : Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.addTextInQuestionInstructionsInputField('list ordering');
+            listOrderingPage.steps.addInputToOptionsInputField(options);
+            listOrderingPage.steps.allotPoints(5);
+        });
+
+        listOrderingPage.tests.verifyStudentViewSettingsLabelAndCSS();
+
+        it('\'Randomize options\' checkbox and label should be displayed and by default it should be unchecked', () => {
+            utilities.verifyInnerText(listOrderingPage.randomizeOptionsLabel(), 'Randomize options');
+            utilities.verifyElementVisibilityState(listOrderingPage.randomizeOptionsCheckbox(), 'exist');
+            listOrderingPage.steps.verifyRandomizeOptionsCheckboxUnchecked();
+        });
+
+        listOrderingPage.tests.verifyRandomizeOptionsCheckboxAndLabelUncheckedCSS();
+
+        it('When the \'Randomize options\' functionality is disabled, the options in the specify correct answer section should be displayed in the order in which the user has set them in the \'Options\' section', () => {
+            listOrderingPage.steps.verifyRandomizeOptionsCheckboxUnchecked();
+            listOrderingPage.steps.verifyOptionsOrderInSpecifyCorrectAnswerSection(options);
+        });
+
+        it('When the user enables the \'Randomize options\' functionality, then the options in the specify correct answer section should be in the order in which the user has set them in the \'Options\' section', () => {
+            listOrderingPage.steps.checkRandomizeOptionsCheckbox();
+            listOrderingPage.steps.verifyOptionsOrderInSpecifyCorrectAnswerSection(options);
+        });
+
+        listOrderingPage.tests.verifyRandomizeOptionsCheckboxCheckedCSSAndA11y();
+    });
+
+    describe('Randomize options : Preview tab', () => {
+        let optionsArray = [];
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.addInputToOptionsInputField(options);
+            listOrderingPage.steps.allotPoints(5);
+        });
+
+        it('When the \'Randomize options\' functionality is disabled, options in the preview tab should be displayed in the order in which the user has set them in the \'Draggable options\' section', () => {
+            listOrderingPage.steps.verifyRandomizeOptionsCheckboxUnchecked();
+            listOrderingPage.steps.switchToPreviewTab();
+            listOrderingPage.steps.verifyOptionsOrderInPreviewTab(options);
+        });
+
+        it('When the user enables the \'Randomize options\' functionality, then options in preview tab should be displayed in a random order', () => {
+            listOrderingPage.steps.switchToEditTab();
+            listOrderingPage.steps.checkRandomizeOptionsCheckbox();
+            listOrderingPage.steps.switchToPreviewTab();
+            listOrderingPage.steps.verifyRandomizeOptionOrder(options);
+            optionsArray = listOrderingPage.steps.getOptionsArray();
+        });
+
+        it('When the user switches to \'Edit tab\' and does not modify any question properties, then the order of the options should not change in the preview tab', () => {
+            listOrderingPage.steps.resetQuestionPreview();
+            listOrderingPage.steps.verifyOptionsOrderInPreviewTab(optionsArray);
+        });
+
+        it('When the user switches to \'Edit tab\' and modifies any of question properties, then the order of the options should change from the previous random order', () => {
+            listOrderingPage.steps.switchToEditTab();
+            listOrderingPage.steps.allotPoints(12);
+            listOrderingPage.steps.addTextInQuestionInstructionsInputField('Question');
+            listOrderingPage.steps.switchToPreviewTab();
+            listOrderingPage.steps.verifyRandomizeOptionOrder(options);
+            listOrderingPage.steps.verifyOptionsAreReRandomized(optionsArray);
+        });
+
+        it('When the user disables the \'Randomize options\' functionality, then the options in the preview tab should be displayed in the order in which the user has set them in the edit tab', () => {
+            listOrderingPage.steps.switchToEditTab()
+            listOrderingPage.steps.uncheckRandomizeOptionsCheckbox();
+            listOrderingPage.steps.switchToPreviewTab();
+            listOrderingPage.steps.verifyOptionsOrderInPreviewTab(options);
+        });
+    });
+
+    describe('Enable outer border for question: Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Enable outer border\' label and checkbox should be displayed. By default, \'Enable outer border for question\' checkbox should be in checked state', () => {
+            utilities.verifyInnerText(listOrderingPage.enableOuterBorderForQuestionLabel(), 'Enable outer border for question');
+            utilities.verifyElementVisibilityState(listOrderingPage.enableOuterBorderForQuestionLabel(), 'visible');
+            utilities.verifyElementVisibilityState(listOrderingPage.enableOuterBorderForQuestionLabel(), 'exist');
+            listOrderingPage.steps.verifyEnableOuterBorderForQuestionCheckboxCheckedState();
+        });
+
+        it('CSS of \'Enable outer border\' label and checkbox - checked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(listOrderingPage.enableOuterBorderForQuestionLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(listOrderingPage.enableOuterBorderForQuestionLabel().parent().find('svg g g').eq(0), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('The user should be able to uncheck the \'Enable outer border for question\' checkbox', () => {
+            listOrderingPage.steps.uncheckEnableOuterBorderForQuestionCheckbox();
+        });
+
+        it('CSS of \'Enable outer border for question\' checkbox - unchecked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(listOrderingPage.enableOuterBorderForQuestionCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        it('Accessibility of \'Enable outer border for question\' checkbox - unchecked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(listOrderingPage.enableOuterBorderForQuestionCheckbox().parents('[data-ngie-testid*="enable-outer-border-for-question-checkbox"]'));
+        });
+    });
+
+    describe('Enable outer border for question: Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.addTextInQuestionInstructionsInputField('list ordering');
+            listOrderingPage.steps.switchToPreviewTab();
+        });
+
+        it('When the \'Enable outer border for question\' checkbox is in checked state, an outer border over the question preview should be visible', () => {
+            listOrderingPage.steps.verifyOuterBorderOfQuestionPreview();
+        });
+
+        it('CSS of the outer border', { tags: 'css' }, () => {
+            utilities.verifyCSS(listOrderingPage.questionBorderPreviewTab(), {
+                'border': `1px solid ${css.color.draggableOptionsContainerBorder}`
+            });
+        });
+
+        it('When the user unchecks the \'Enable outer border for question\' checkbox, then the outer border over the question preview should not be displayed', () => {
+            listOrderingPage.steps.switchToEditTab();
+            listOrderingPage.steps.uncheckEnableOuterBorderForQuestionCheckbox();
+            listOrderingPage.steps.switchToPreviewTab()
+            listOrderingPage.steps.verifyOuterBorderOfQuestionPreviewNotExists();
+        });
+    });
+
+    describe('Allow students to check answer: Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.addTextInQuestionInstructionsInputField('list ordering');
+            listOrderingPage.steps.addInputToOptionsInputField(options);
+            listOrderingPage.steps.allotPoints(5);
+        });
+
+        listOrderingPage.tests.verifyAllowStudentsToCheckAnswerLabelAndCheckboxCSS();
+
+        listOrderingPage.tests.verifyMaximumAttemptsDropdownDisplayedWhenAllowStudentsToCheckAnswerIsChecked();
+
+        listOrderingPage.tests.verifyMaxCheckAnswerAttemptsDropdown();
+
+        listOrderingPage.tests.verifyAllowStudentsToCheckAnswerContentsCSSAndA11y();
+    });
+
+    describe('Allow students to check answer: Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.addTextInQuestionInstructionsInputField('list ordering');
+            listOrderingPage.steps.addInputToOptionsInputField(options);
+            listOrderingPage.steps.clickAndReorderOptionInSpecifyCorrectAnswerSection('seed', 0);
+            listOrderingPage.steps.clickAndReorderOptionInSpecifyCorrectAnswerSection('sprout', 1);
+            listOrderingPage.steps.allotPoints(5);
+        });
+
+        it('When the user set correct answer order and allotted points then on checking the \'Allow students to check answer\' checkbox the Check answer button should be displayed in the preview tab', () => {
+            listOrderingPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+            listOrderingPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(listOrderingPage.checkAnswerButton(), 'Check answer');
+        });
+
+        it('When the user attempts the question and clicks on the \'Check answer\' button, then correct/incorrect icons should be displayed beside the options and the check answer button should be in enabled state', () => {
+            listOrderingPage.steps.clickAndReorderOptionInPreviewTab('flower', 3);
+            listOrderingPage.steps.clickAndReorderOptionInPreviewTab('plant', 0);
+            listOrderingPage.steps.checkAnswer();
+            listOrderingPage.steps.verifyIncorrectOptionIcon('plant');
+            listOrderingPage.steps.verifyCorrectOptionIcon('sprout');
+            listOrderingPage.steps.verifyIncorrectOptionIcon('seed');
+            listOrderingPage.steps.verifyCorrectOptionIcon('flower');
+            listOrderingPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+
+        it('When the user selects an option from the Maximum check answer attempts dropdown then the user should be able to check answer only those many times in the preview tab', () => {
+            listOrderingPage.steps.switchToEditTab();
+            listOrderingPage.steps.expandMaxCheckAnswerAttemptsDropdown();
+            listOrderingPage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('1');
+            listOrderingPage.steps.switchToPreviewTab();
+            listOrderingPage.steps.clickAndReorderOptionInPreviewTab('flower', 3);
+            listOrderingPage.steps.checkAnswer();
+            listOrderingPage.steps.verifyCheckAnswerButtonDisabled();
+        });
+
+        listOrderingPage.tests.verifyDisabledCheckAnswerButtonWithCSSAndA11y();
+
+        it('When the user updates the value of \'Maximum check answer attempts\' dropdown, it should get reflected on the Preview tab', () => {
+            listOrderingPage.steps.switchToEditTab();
+            listOrderingPage.steps.expandMaxCheckAnswerAttemptsDropdown();
+            listOrderingPage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('3');
+            listOrderingPage.steps.switchToPreviewTab();
+            listOrderingPage.steps.verifyCheckAnswerButtonEnabled();
+            listOrderingPage.steps.clickAndReorderOptionInPreviewTab('flower', 3);
+            listOrderingPage.steps.checkAnswer();
+            listOrderingPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+
+        it('When the user selects \'No limit\' option from the dropdown then user should be able to check answer multiple times', () => {
+            listOrderingPage.steps.switchToEditTab();
+            listOrderingPage.steps.expandMaxCheckAnswerAttemptsDropdown();
+            listOrderingPage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('0');
+            listOrderingPage.steps.switchToPreviewTab();
+            listOrderingPage.steps.verifyCheckAnswerButtonEnabled();
+            listOrderingPage.steps.clickAndReorderOptionInPreviewTab('flower', 3);
+            listOrderingPage.steps.checkAnswer();
+            listOrderingPage.steps.verifyCheckAnswerButtonEnabled();
+            listOrderingPage.steps.clickAndReorderOptionInPreviewTab('flower', 3);
+            listOrderingPage.steps.checkAnswer();
+            listOrderingPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+    });
+});

package/cypress/e2e/ILC/Matching/additionalSettings.js

@@ -169,6 +169,7 @@ describe('Create Item page - matching : Additional settings', () => {
                 matchingPage.steps.switchToGradingView();
                 matchingPage.steps.verifyDropzoneEnumeration(enumerationOptions[option]);
                 matchingPage.steps.verifyCorrectAnswerDropzoneEnumeration(enumerationOptions[option]);
+                matchingPage.steps.switchToEditTab();
             });
         });
 

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

@@ -47,14 +47,14 @@ describe('Create item page - Matching : Header section and Saving question', ()
             dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton();
 
             it('Validation error messages should be displayed below required input fields', () => {
-                matchingPage.steps.verifyQuestionInstructionsErrorMessage();
+                matchingPage.steps.verifyQuestionInstructionsErrorMessageIsNotDisplayed();
                 matchingPage.steps.verifyPromptInputFieldErrorMessage(0);
                 matchingPage.steps.verifyPromptInputFieldErrorMessage(1);
                 matchingPage.steps.verifyPromptInputFieldErrorMessage(2);
                 matchingPage.steps.verifyOptionsInputFieldErrorMessage(3);
                 matchingPage.steps.verifyOptionsInputFieldErrorMessage(4);
                 matchingPage.steps.verifyOptionsInputFieldErrorMessage(5);
-                matchingPage.steps.verifyPointsFieldErrorMessage();
+                matchingPage.steps.verifyPointsFieldErrorMessageIsNotDisplayed();
                 matchingPage.steps.verifySpecifyCorrectAnswerErrorIconIsVisible();
                 matchingPage.steps.verifySpecifyCorrectAnswerErrorMessage();
             });

package/cypress/e2e/ILC/Matching/studentViewSettings.js

@@ -361,7 +361,7 @@ describe('Create Item page - Matching : Student view settings', () => {
         it('When the user selects \'No limit\' option from the dropdown then user should be able to check answer multiple times', () => {
             matchingPage.steps.switchToEditTab();
             matchingPage.steps.expandMaxCheckAnswerAttemptsDropdown();
-            matchingPage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('no limit');
+            matchingPage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('0');
             matchingPage.steps.switchToPreviewTab();
             matchingPage.steps.verifyCheckAnswerButtonEnabled();
             matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Petals', dropzoneIndex: 0 }]);

package/cypress/e2e/ILC/MultipleSelection/allOrNothingWithAlternativeAnswer.js

@@ -7,6 +7,7 @@ describe('Create item page - Multiple selection: All or nothing with alternative
         cy.loginAs('admin');
     });
 
+    //Need to update once - https://redmine.zeuslearning.com/issues/553666 is resolved
     describe('Question preview: Auto scored - All or nothing with alternative answer - When \'Correct answer\' points are more than \'Alternative answer\' points', () => {
         abortEarlySetup();
         before(() => {

package/cypress/e2e/ILC/MultipleSelectionGridNew/studentViewSettings.js

@@ -172,7 +172,7 @@ describe('Create item page - Multiple selection grid: Student view settings', ()
         it('When the user selects \'No limit\' option from the dropdown then user should be able to check answer multiple times', () => {
             multipleSelectionGridPage.steps.switchToEditTab();
             multipleSelectionGridPage.steps.expandMaxCheckAnswerAttemptsDropdown();
-            multipleSelectionGridPage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('no limit');
+            multipleSelectionGridPage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('0');
             multipleSelectionGridPage.steps.switchToPreviewTab();
             multipleSelectionGridPage.steps.verifyCheckAnswerButtonEnabled();
             multipleSelectionGridPage.steps.selectOptionsInPreviewTab({ row: 1, column: 0 });

package/cypress/e2e/ILC/NumberLine/LayoutSection.js

@@ -0,0 +1,209 @@
+import { numberLinePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const range = 20.75;
+
+describe('Number line: Layout section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Layout section - Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            numberLinePage.steps.navigateToCreateQuestion('Number line');
+            cy.barsPreLoaderWait();
+        });
+
+        numberLinePage.tests.verifyLayoutSectionContent("Horizontal");
+
+        it('\'Stack responses\' label and checkbox should be displayed and by default it should be unchecked', () => {
+            utilities.verifyInnerText(numberLinePage.stackResponsesLabel(), 'Stack responses');
+            numberLinePage.steps.verifyCheckboxUnchecked('Stack responses')
+        });
+
+        it('Response spacing label and input field should be displayed and by default, input field should have 30 and user should be able to update the value of input field', () => {
+            utilities.verifyInnerText(numberLinePage.responseSpacingLabel(), 'Response spacing');
+            utilities.verifyElementVisibilityState(numberLinePage.responseSpacingLabel(), 'visible');
+            numberLinePage.steps.verifyTextInResponseSpacingInputField(30);
+            utilities.verifyElementVisibilityState(numberLinePage.responseSpacingInputField(), 'visible');
+            numberLinePage.steps.enterTextInResponseSpacingInputField(25);
+            numberLinePage.steps.verifyTextInResponseSpacingInputField(25);
+        });
+    });
+
+    describe('Layout section - Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            numberLinePage.steps.navigateToCreateQuestion('Number line');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When user updates value for Response spacing input field, it should get updated in Number line section and Specify correct answer section', () => {
+            numberLinePage.steps.enterTextInResponseSpacingInputField(28);
+            numberLinePage.steps.verifyTextInResponseSpacingInputField(28);
+            numberLinePage.steps.verifyResponseSpacingSpecifyCorrectAnswerSection("Horizontal", 28);
+        });
+
+        numberLinePage.tests.verifyLayoutSectionEditTabFunctionality("Horizontal");
+
+        //Note: Unable to check on cypress, added to manual sheet
+        it('When user checks Stack responses checkbox, then points should be plotted above the number line in number line section and specify correct answer section', () => {
+            numberLinePage.steps.checkCheckbox('Stack responses');
+        });
+
+        it('When user unchecks Stack responses checkbox, then points should be plotted on the number line in number line section and specify correct answer section', () => {
+            numberLinePage.steps.uncheckCheckbox('Stack responses');
+            numberLinePage.steps.plotPointOnNumberLineSpecifyCorrectAnswer("horizontal", range, 2);
+            numberLinePage.steps.verifyPointsPlottedOnNumberLineSpecifyCorrectAnswer(range, [2]);
+        });
+
+        it('When Limit number of responses checkbox is checked then input field should be displayed beside the label and input field should have 5 pre-filled in it then user should be able to plot only 5 responses on number line in specify correct answer section', () => {
+            numberLinePage.steps.verifyTextInLimitNumberOfResponsesInputField(5);
+            for (let index = 0; index < 6; index++) {
+                numberLinePage.steps.plotPointOnNumberLineSpecifyCorrectAnswer("horizontal", range, index);
+            };
+            numberLinePage.steps.verifyPointsPlottedOnNumberLineSpecifyCorrectAnswer(range, [0, 1, 2, 3, 4]);
+            numberLinePage.steps.verifyPointsPlottedOnNumberLineNotExistSpecifyCorrectAnswer(range, [5]);
+        });
+
+        it('When user update the value in Limit number of responses input field then specified number of responses should be updated accordingly for number line in specify correct answer section and when user plots responses more than specified number then error \'Error: Only # answers are permitted.\'', () => {
+            numberLinePage.steps.selectNumberLineControlOptionSpecifyCorrectAnswerSection('Reset');
+            numberLinePage.steps.confirmReset();
+            numberLinePage.steps.enterTextInLimitNumberOfResponsesInputField(6);
+            numberLinePage.steps.verifyTextInLimitNumberOfResponsesInputField(6);
+            for (let index = 0; index < 7; index++) {
+                numberLinePage.steps.plotPointOnNumberLineSpecifyCorrectAnswer("horizontal", range, index);
+            };
+            numberLinePage.steps.verifyPointsPlottedOnNumberLineSpecifyCorrectAnswer(range, [0, 1, 2, 3, 4, 5]);
+            numberLinePage.steps.verifyPointsPlottedOnNumberLineNotExistSpecifyCorrectAnswer(range, [6]);
+            utilities.verifyElementVisibilityState(numberLinePage.errorMessage(), 'visible');
+            utilities.verifyInnerText(numberLinePage.errorMessage().last(), 'Error: Only 6 answers are permitted.');
+        });
+
+        it('CSS of error message', { tags: 'css' }, () => {
+            utilities.verifyCSS(numberLinePage.errorMessage().last(), {
+                'color': css.color.errorText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of error message', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(numberLinePage.errorMessage());
+        });
+
+        it('When user clicks outside the number line then error message should disappear', () => {
+            numberLinePage.steps.clickOnToolOptionsSpecifyCorrectAnswer();
+            utilities.verifyElementVisibilityState(numberLinePage.errorMessage(), 'notExist');
+        });
+
+        it('When user uncheck Limit number of responses checkbox then Limit number of responses input field should disappear and user should be able to plot any number of responses on number line in specify correct answer section', () => {
+            numberLinePage.steps.selectNumberLineControlOptionSpecifyCorrectAnswerSection('Reset');
+            numberLinePage.steps.confirmReset();
+            numberLinePage.steps.uncheckCheckbox('Limit number of responses');
+            utilities.verifyElementVisibilityState(numberLinePage.limitNumbersOfResponsesInputField(), 'notExist');
+            for (let index = 0; index < 6; index++) {
+                numberLinePage.steps.plotPointOnNumberLineSpecifyCorrectAnswer("horizontal", range, index);
+            };
+            numberLinePage.steps.verifyPointsPlottedOnNumberLineSpecifyCorrectAnswer(range, [0, 1, 2, 3, 4, 5]);
+        });
+    });
+
+    describe('Layout section - Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            numberLinePage.steps.navigateToCreateQuestion('Number line');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When user updates value for Response spacing input field, it should get updated in preview tab', () => {
+            numberLinePage.steps.switchToEditTab();
+            numberLinePage.steps.enterTextInResponseSpacingInputField(28);
+            numberLinePage.steps.verifyTextInResponseSpacingInputField(28);
+            numberLinePage.steps.switchToPreviewTab();
+            numberLinePage.steps.verifyResponseSpacingPreviewTab('Horizontal', 28);
+        });
+
+        numberLinePage.tests.verifyLayoutSectionPreviewTabFunctionality("Horizontal");
+
+        //Note: Unable to check on cypress, added to manual sheet
+        it('When user checks Stack responses checkbox, then points should be plotted above the number line in preview tab', () => {
+            numberLinePage.steps.switchToEditTab();
+            numberLinePage.steps.checkCheckbox('Stack responses');
+            numberLinePage.steps.switchToPreviewTab();
+        });
+
+        it('When user unchecks Stack responses checkbox, then points should be plotted on the number line in preview tab', () => {
+            numberLinePage.steps.switchToEditTab();
+            numberLinePage.steps.uncheckCheckbox("Stack responses");
+            numberLinePage.steps.switchToPreviewTab();
+            numberLinePage.steps.plotPointOnNumberLinePreviewTab("horizontal", range, 2);
+            numberLinePage.steps.plotPointOnNumberLinePreviewTab(range, [2]);
+        });
+
+        it('When Limit number of responses checkbox is checked then input field should be displayed beside the label and input field should have 5 pre-filled in it then user should be able to plot only 5 responses on number line in preview tab', () => {
+            numberLinePage.steps.switchToEditTab();
+            numberLinePage.steps.verifyTextInLimitNumberOfResponsesInputField(5);
+            numberLinePage.steps.switchToPreviewTab();
+            for (let index = 0; index < 6; index++) {
+                numberLinePage.steps.plotPointOnNumberLinePreviewTab("horizontal", range, index);
+            };
+            numberLinePage.steps.verifyPointsPlottedOnNumberLinePreviewTab(range, [0, 1, 2, 3, 4]);
+            numberLinePage.steps.verifyPointsNotExistOnNumberLinePreviewTab(range, [5]);
+        });
+
+        it('When user update the value in Limit number of responses input field then specified number of responses should be updated accordingly for number line in preview tab and when user plots responses more than specified number then error \'Only # answers are permitted.\'', () => {
+            numberLinePage.steps.switchToEditTab();
+            numberLinePage.steps.enterTextInLimitNumberOfResponsesInputField(6);
+            numberLinePage.steps.verifyTextInLimitNumberOfResponsesInputField(6);
+            numberLinePage.steps.switchToPreviewTab();
+            for (let index = 0; index < 7; index++) {
+                numberLinePage.steps.plotPointOnNumberLinePreviewTab("horizontal", range, index);
+            };
+            numberLinePage.steps.verifyPointsPlottedOnNumberLinePreviewTab(range, [0, 1, 2, 3, 4, 5]);
+            numberLinePage.steps.verifyPointsNotExistOnNumberLinePreviewTab(range, [6]);
+            utilities.verifyElementVisibilityState(numberLinePage.warningMessage(), 'visible');
+            utilities.verifyInnerText(numberLinePage.warningMessage(), 'Only 6 answers are permitted.');
+        });
+
+        it('CSS of warning message', { tags: 'css' }, () => {
+            utilities.verifyCSS(numberLinePage.warningMessage(), {
+                'color': css.color.warningMessage,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(numberLinePage.warningMessageContainer().find('svg'), {
+                'color': css.color.warningMessage,
+            });
+            utilities.verifyCSS(numberLinePage.warningMessageContainer(), {
+                'border': `1px solid ${css.color.warningContainerBorder}`
+            });
+            utilities.verifyCSS(numberLinePage.warningMessageContainer(), {
+                'background-color': css.color.warningContainerBackground
+            });
+        });
+
+        it('Accessibility of error message', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(numberLinePage.warningMessage());
+        });
+
+        it('When user clicks outside the number line then error message should disappear', () => {
+            numberLinePage.steps.clickOnToolOptionsPreviewTab();
+            utilities.verifyElementVisibilityState(numberLinePage.warningMessage(), 'notExist');
+        });
+
+        it('When user uncheck Limit number of responses checkbox then user should be able to plot any number of responses on number line in specify correct answer section', () => {
+            numberLinePage.steps.switchToEditTab();
+            numberLinePage.steps.uncheckCheckbox('Limit number of responses');
+            utilities.verifyElementVisibilityState(numberLinePage.limitNumbersOfResponsesInputField(), 'notExist');
+            numberLinePage.steps.switchToPreviewTab();
+            for (let index = 0; index < 6; index++) {
+                numberLinePage.steps.plotPointOnNumberLinePreviewTab("horizontal", range, index);
+                numberLinePage.steps.verifyPointsPlottedOnNumberLinePreviewTab(range, [index]);
+            };
+        });
+    });
+});