itemengine-cypress-automation 1.0.165-migrationScripts-e27d6f2.0 → 1.0.166

package/cypress/e2e/ILC/NumberLine/previewTabContentsForAllViews.smoke.js

@@ -0,0 +1,200 @@
+import { itemPreviewPage, numberLinePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const selectedToolOption = ['Point', 'Segment', 'Segment left/down hollow pt', 'Segment right/up hollow pt', 'Segment both hollow pts'];
+const unselectedToolOption = ['Left/down ray', 'Right/up ray', 'Left/down ray w/ hollow pt', 'Right/up ray w/ hollow pt'];
+const controlOptions = ['Undo', 'Redo', 'Reset'];
+const toolOptions = [...selectedToolOption, ...unselectedToolOption];
+const previewContentViews = ['Question preview', 'Item view', 'Item preview', 'Student view'];
+const views = utilities.getViews(previewContentViews);
+const css = Cypress.env('css');
+var itemReferenceID = "";
+const range = 20;
+
+describe('Create item page: Number line - Preview contents in all views', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        describe(`Preview tab contents - ${view}`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        numberLinePage.steps.navigateToCreateQuestion('Number line');
+                        cy.barsPreLoaderWait();
+                        numberLinePage.steps.addTextInQuestionInstructionsInputField('Plot points on the number line');
+                        numberLinePage.steps.allotPoints(10);
+                        numberLinePage.steps.selectToolOptions(unselectedToolOption);
+                        numberLinePage.steps.selectNumberLineToolOptionSpecifyCorrectAnswer('Point');
+                        numberLinePage.steps.plotPointOnNumberLineSpecifyCorrectAnswer([{ x: 2, xRange: range }]);
+                        numberLinePage.steps.verifyPointsPlottedOnNumberLineSpecifyCorrectAnswer([{ x: 2, xRange: range }]);
+                        numberLinePage.steps.selectNumberLineToolOptionSpecifyCorrectAnswer('Left/down ray');
+                        numberLinePage.steps.plotPointOnNumberLineSpecifyCorrectAnswer([{ x: -7, xRange: range }]);
+                        numberLinePage.steps.verifyPointsPlottedOnNumberLineSpecifyCorrectAnswer([{ x: -7, xRange: range }]);
+                        numberLinePage.steps.verifyLineSegmentOnNumberLineSpecifyCorrectAnswer([{ x1: -7, x1Range: range, x2: -8.68, x2Range: range }]);
+                        numberLinePage.steps.selectNumberLineToolOptionSpecifyCorrectAnswer('Segment right/up hollow pt');
+                        numberLinePage.steps.plotPointOnNumberLineSpecifyCorrectAnswer([{ x: -4, xRange: range }]);
+                        numberLinePage.steps.verifyPointsPlottedOnNumberLineSpecifyCorrectAnswer([{ x: -4, xRange: range }, { x: -5, xRange: range }]);
+                        numberLinePage.steps.verifyLineSegmentOnNumberLineSpecifyCorrectAnswer([{ x1: -5, x1Range: range, x2: -4, x2Range: range }]);
+                        numberLinePage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item view':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        numberLinePage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    default:
+                        throw new Error('Invalid view');
+                }
+            });
+
+            after(() => {
+                if (view === 'Question preview') {
+                    numberLinePage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                }
+            });
+
+            it('Question instructions should be visible', () => {
+                utilities.verifyInnerText(numberLinePage.questionInstructionsText(), 'Plot points on the number line');
+                utilities.verifyElementVisibilityState(numberLinePage.questionInstructionsText(), 'visible');
+            });
+
+            it('The toolbar options should be displayed in the preview tab and when the user hovers over the tool options then tooltips should be displayed', () => {
+                toolOptions.forEach((toolOption) => {
+                    utilities.verifyElementVisibilityState(numberLinePage.numberLineToolOptionPreviewTab(toolOption), 'exist');
+                    numberLinePage.numberLineToolOptionPreviewTab(toolOption)
+                        .verifyTooltip(toolOption);
+                });
+            });
+
+            it('By default, the point option should be in selected state and all other options should be unselected', () => {
+                numberLinePage.steps.verifyToolOptionSelectedPreviewTab('Point');
+                numberLinePage.steps.verifyToolOptionNotSelectedPreviewTab(toolOptions.splice(1, toolOptions.length));
+            });
+
+            it('By default, all controls should be in disabled state', () => {
+                controlOptions.forEach((controlOption) => {
+                    utilities.verifyElementDisabled(numberLinePage.numberLineControlOptionPreviewTab(controlOption));
+                });
+            });
+
+            it('User should be able to plot point using the \'Point\' tool options', () => {
+                numberLinePage.steps.plotPointOnNumberLinePreviewTab([{ x: 9, xRange: range }]);
+                numberLinePage.steps.verifyPointsPlottedOnNumberLinePreviewTab([{ x: 9, xRange: range }]);
+            });
+
+            it('User should be able to draw a segment using the \'Segment\' tool option', () => {
+                numberLinePage.steps.selectNumberLineToolOptionPreviewTab('Segment');
+                numberLinePage.steps.plotPointOnNumberLinePreviewTab([{ x: 8, xRange: range }]);
+                numberLinePage.steps.verifyPointsPlottedOnNumberLinePreviewTab([{ x: 8, xRange: range }, { x: 7, xRange: range }]);
+                numberLinePage.steps.verifyLineSegmentOnNumberLinePreviewTab([{ x1: 8, x1Range: range, x2: 7, x2Range: range }]);
+            });
+
+            it('User should be able to draw a segment using the \'Segment left/down hollow pt\' tool option', () => {
+                numberLinePage.steps.selectNumberLineToolOptionPreviewTab('Segment left/down hollow pt');
+                numberLinePage.steps.plotPointOnNumberLinePreviewTab([{ x: 6, xRange: range }]);
+                numberLinePage.steps.verifyPointsPlottedOnNumberLinePreviewTab([{ x: 6, xRange: range }, { x: 5, xRange: range }]);
+                numberLinePage.steps.verifyLineSegmentOnNumberLinePreviewTab([{ x1: 5, x1Range: range, x2: 6, x2Range: range }]);
+            });
+
+            it('User should be able to draw a segment using the \'Segment right/up hollow pt\' tool option', () => {
+                numberLinePage.steps.selectNumberLineToolOptionPreviewTab('Segment right/up hollow pt');
+                numberLinePage.steps.plotPointOnNumberLinePreviewTab([{ x: 4, xRange: range }]);
+                numberLinePage.steps.verifyPointsPlottedOnNumberLinePreviewTab([{ x: 4, xRange: range }, { x: 3, xRange: range }]);
+                numberLinePage.steps.verifyLineSegmentOnNumberLinePreviewTab([{ x1: 3, x1Range: range, x2: 4, x2Range: range }]);
+            });
+
+            it('User should be able to draw a segment using the \'Segment both hollow pts\' tool option', () => {
+                numberLinePage.steps.selectNumberLineToolOptionPreviewTab('Segment both hollow pts');
+                numberLinePage.steps.plotPointOnNumberLinePreviewTab([{ x: 2, xRange: range }]);
+                numberLinePage.steps.verifyPointsPlottedOnNumberLinePreviewTab([{ x: 2, xRange: range }, { x: 1, xRange: range }]);
+                numberLinePage.steps.verifyLineSegmentOnNumberLinePreviewTab([{ x1: 1, x1Range: range, x2: 2, x2Range: range }]);
+            });
+
+            it('User should be able to draw a ray using the \'Left/down ray\' tool option', () => {
+                numberLinePage.steps.selectNumberLineToolOptionPreviewTab('Left/down ray');
+                numberLinePage.steps.plotPointOnNumberLinePreviewTab([{ x: -8, xRange: range }]);
+                numberLinePage.steps.verifyPointsPlottedOnNumberLinePreviewTab([{ x: -8, xRange: range }]);
+                numberLinePage.steps.verifyLineSegmentOnNumberLinePreviewTab([{ x1: -8, x1Range: range, x2: -8.68, x2Range: range }]);
+            });
+
+            it('User should be able to draw a ray using the \'Right/up ray\' tool option', () => {
+                numberLinePage.steps.selectNumberLineToolOptionPreviewTab('Right/up ray');
+                numberLinePage.steps.plotPointOnNumberLinePreviewTab([{ x: 0, xRange: range }]);
+                numberLinePage.steps.verifyPointsPlottedOnNumberLinePreviewTab([{ x: 0, xRange: range }]);
+                numberLinePage.steps.verifyLineSegmentOnNumberLinePreviewTab([{ x1: 0, x1Range: range, x2: 8.69, x2Range: range }]);
+            });
+
+            it('User should be able to draw a ray using the \'Left/down ray w/ hollow pt\' tool option', () => {
+                numberLinePage.steps.selectNumberLineToolOptionPreviewTab('Left/down ray w/ hollow pt');
+                numberLinePage.steps.plotPointOnNumberLinePreviewTab([{ x: -6, xRange: range }]);
+                numberLinePage.steps.verifyPointsPlottedOnNumberLinePreviewTab([{ x: -6, xRange: range }]);
+                numberLinePage.steps.verifyLineSegmentOnNumberLinePreviewTab([{ x1: -6, x1Range: range, x2: -8.68, x2Range: range }]);
+            });
+
+            it('User should be able to draw a ray wave using the \'Right/up ray w/ hollow pt\' tool option', () => {
+                numberLinePage.steps.selectNumberLineToolOptionPreviewTab('Right/up ray w/ hollow pt');
+                numberLinePage.steps.plotPointOnNumberLinePreviewTab([{ x: -3, xRange: range }]);
+                numberLinePage.steps.verifyPointsPlottedOnNumberLinePreviewTab([{ x: -3, xRange: range }]);
+                numberLinePage.steps.verifyLineSegmentOnNumberLinePreviewTab([{ x1: -3, x1Range: range, x2: 8.69, x2Range: range }]);
+            });
+
+            it('When the user clicks on the \'Undo\' control option then the latest action should be reversed', () => {
+                numberLinePage.steps.selectNumberLineControlOptionPreviewTab('Undo');
+                numberLinePage.steps.verifyLineSegmentOnNumberLineNotExistPreviewTab([{ x: -3, xRange: range }, { x: 8.69, xRange: range }]);
+            });
+
+            it('By default, the control options should be in displayed and when the user hovers over the tool options then tooltips should be displayed', () => {
+                controlOptions.forEach((controlOption) => {
+                    utilities.verifyElementVisibilityState(numberLinePage.numberLineControlOptionPreviewTab(controlOption), 'exist');
+                    numberLinePage.numberLineControlOptionPreviewTab(controlOption)
+                        .verifyTooltip(controlOption);
+                });
+            });
+
+            it('CSS of preview content', { tags: 'css' }, () => {
+                utilities.verifyCSS(numberLinePage.numberLineToolOptionPreviewTab('Right/up ray w/ hollow pt'), {
+                    'background-color': css.color.secondaryBtn,
+                    'color': css.color.secondaryBtnBg,
+                });
+                utilities.verifyCSS(numberLinePage.numberLineToolOptionPreviewTab('Point').find('g circle'), {
+                    'color': css.color.UnselectedToggleButton,
+                    'fill': css.color.activeButtons
+                });
+                utilities.verifyCSS(numberLinePage.numberLineControlOptionPreviewTab('Undo').find('svg'), {
+                    'fill': css.color.activeButtons
+                });
+                utilities.verifyCSS(numberLinePage.numberLinePointPreviewTab(), {
+                    'fill': css.color.activeButtons
+                });
+            });
+
+            it('Accessibility of preview content', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(numberLinePage.numberLinePreviewTab().parents('[class*="question-preview-wrapper"]'));
+            });
+
+            it('When the user clicks on the \'Redo\' control option then the latest action should be displayed again and the button should be disabled again', () => {
+                numberLinePage.steps.selectNumberLineControlOptionPreviewTab('Redo');
+                numberLinePage.steps.verifyLineSegmentOnNumberLinePreviewTab([{ x1: -3, x1Range: range, x2: 8.69, x2Range: range }]);
+            });
+
+            it('When the user clicks on the \'Reset\' control option then all the actions on the preview tab should be reset', () => {
+                numberLinePage.steps.selectNumberLineControlOptionPreviewTab('Reset');
+                numberLinePage.steps.confirmReset();
+                utilities.verifyElementVisibilityState(numberLinePage.numberLinePointPreviewTab(), 'notExist');
+                utilities.verifyElementDisabled(numberLinePage.numberLineControlOptionPreviewTab('Undo'));
+                utilities.verifyElementDisabled(numberLinePage.numberLineControlOptionPreviewTab('Redo'));
+                utilities.verifyElementDisabled(numberLinePage.numberLineControlOptionPreviewTab('Reset'));
+            });
+        });
+    });
+});

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

@@ -0,0 +1,67 @@
+import { numberLinePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+
+describe('Create Item page - Number line: Specify correct answer, Alternative correct answer', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Specify correct answer section - \'Correct\' accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            numberLinePage.steps.navigateToCreateQuestion('Number line');
+            numberLinePage.steps.addTextInQuestionInstructionsInputField('Number line');
+            cy.barsPreLoaderWait();
+        });
+
+        numberLinePage.tests.verifyAutoScoredSpecifyCorrectAnswerHeaderSectionContents('number line');
+
+        numberLinePage.tests.verifySpecifyCorrectAnswerAccordionContentsAndFunctionality('Correct');
+    });
+
+    describe('Specify correct answer section - \'Alternative\' accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            numberLinePage.steps.navigateToCreateQuestion('Number line');
+            cy.barsPreLoaderWait();
+        });
+
+        numberLinePage.tests.verifyAutoScoredAddAlternativeAnswerButtonAndValidation();
+
+        it('When user has added points and plots points on number line in the \'Correct\' accordion, then the user should be able to add alternative answer for the question using \'Add alternative answer\' button', () => {
+            numberLinePage.steps.plotPointOnNumberLineSpecifyCorrectAnswer([{ x: 0, xRange: 20 }, { x: 1, xRange: 20 }]);
+            numberLinePage.steps.verifyPointsPlottedOnNumberLineSpecifyCorrectAnswer([{ x: 0, xRange: 20 }, { x: 1, xRange: 20 }]);
+            numberLinePage.steps.allotPoints(10);
+            numberLinePage.steps.addAlternativeAnswerAccordion(1);
+        });
+
+        it('When user has added an alternative answer accordion, then the newly added alternative answer accordion should be in expanded state and the correct answer accordion should be in collapsed state', () => {
+            numberLinePage.steps.verifyCorrectAnswerAccordionIsCollapsed();
+            numberLinePage.steps.verifyAlternateAnswerAccordionIsExpanded(0);
+        });
+
+        numberLinePage.tests.verifySpecifyCorrectAnswerAccordionContentsAndFunctionality('Alternative');
+
+        it('User should be able to add another alternative answer for the question using \'Add alternative answer\' button and the label for this new accordion should be \'Alternative 2\'', () => {
+            numberLinePage.steps.addAlternativeAnswerAccordion(1);
+        });
+
+        numberLinePage.tests.verifyWarningPopupAndAccordionNavigationWhenNoPointsAddedInAlternativeAccordion();
+
+        it('User should be able to remove alternative correct answer by clicking on the \'Delete\' icon button alongside alternative answer accordion and the label of the alternative answer accordions should get updated accordingly', () => {
+            cy.log('Set correct answer and points in alternative 2 accordion, then switch to alternative 1 accordion and click delete icon button');
+            numberLinePage.steps.selectNumberLineToolOptionSpecifyCorrectAnswer('Segment');
+            numberLinePage.steps.plotPointOnNumberLineSpecifyCorrectAnswer([{ x: 2, xRange: 20 }, { x: 1, xRange: 20}]);
+            numberLinePage.steps.verifyPointsPlottedOnNumberLineSpecifyCorrectAnswer([{ x: 2, xRange: 20 }, { x: 1, xRange: 20}]);
+            numberLinePage.steps.allotPoints(5);
+            numberLinePage.steps.deleteAlternativeAnswerAccordion(0);
+            numberLinePage.steps.verifyAlternativeAnswerAccordionNotExists(1);
+            numberLinePage.steps.verifyAlternativeAnswerAccordionLabel(0);
+        });
+
+        it('When correct answers and points are set in alternative answer and user clicks on correct answer accordion, then correct answer accordion should be expanded and the alternative answer accordion should be collapsed', () => {
+            numberLinePage.steps.expandCorrectAnswerAccordion();
+            numberLinePage.steps.verifyAlternateAnswerAccordionIsCollapsed(0);
+        });
+    });
+});

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

@@ -0,0 +1,135 @@
+import { numberLinePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create Item page - Number line : Student view settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Student view settings : Edit tab contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Number line question type');
+            numberLinePage.steps.navigateToCreateQuestion('Number line');
+            cy.barsPreLoaderWait();
+        });
+
+        numberLinePage.tests.verifyStudentViewSettingsLabelAndCSS();
+
+        it('When \'Plot number line\' is selected then \'Randomize labels\' label and checkbox should not be displayed', () => {
+            utilities.verifyElementVisibilityState(numberLinePage.randomizeOptionsLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(numberLinePage.randomizeOptionsCheckbox(), 'notExist');
+        });
+
+        it('\'Allow students to check answer\' label and checkbox should be displayed and it should be unchecked by default', () => {
+            utilities.verifyInnerText(numberLinePage.allowStudentToCheckAnswerLabel(), 'Allow students to check answer');
+            numberLinePage.steps.verifyAllowStudentsToCheckAnswerCheckboxUnchecked();
+        });
+
+        it('When the user checks the \'Allow students to check answer\' checkbox, then \'Maximum check answer attempts\' dropdown should be displayed', () => {
+            numberLinePage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+            utilities.verifyElementVisibilityState(numberLinePage.maximumCheckAnswerAttemptsDropdown(), 'visible');
+        });
+
+        numberLinePage.tests.verifyMaxCheckAnswerAttemptsDropdown();
+
+        numberLinePage.tests.verifyAllowStudentsToCheckAnswerContentsCSSAndA11y();
+
+        it('CSS of student view settings section', { tags: 'css' }, () => {
+            utilities.verifyCSS(numberLinePage.allowStudentToCheckAnswerLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(numberLinePage.allowStudentToCheckAnswerCheckbox().parent().find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of student view settings section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(numberLinePage.allowStudentToCheckAnswerLabel().parents('.student-view-settings-container'));
+        });
+    });
+
+    describe('Allow students to check answer: Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            numberLinePage.steps.navigateToCreateQuestion('Number line');
+            cy.barsPreLoaderWait();
+            numberLinePage.steps.allotPoints(10);
+            numberLinePage.steps.plotPointOnNumberLineSpecifyCorrectAnswer([{ x: 1, xRange: 20 }]);
+        });
+
+        it('When the user has specified correct answer and points then on checking the \'Allow students to check answer\' checkbox the Check answer button should be displayed in the preview tab', () => {
+            numberLinePage.steps.checkAllowStudentToCheckAnswerCheckbox();
+            numberLinePage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(numberLinePage.checkAnswerButton(), 'Check answer');
+        });
+
+        it('When the user plots point on number line and checks the answer then correct icon should be displayed beside the plotted point and the check answer button should be in enabled state', () => {
+            numberLinePage.steps.switchToPreviewTab();
+            numberLinePage.steps.plotPointOnNumberLinePreviewTab([{ x: 1, xRange: 20 }]);
+            numberLinePage.steps.verifyPointsPlottedOnNumberLinePreviewTab([{ x: 1, xRange: 20 }]);
+            numberLinePage.steps.checkAnswer();
+            numberLinePage.steps.verifyCorrectPointsOnNumberLinePreviewTab([{ x: 1, xRange: 20 }]);
+            numberLinePage.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', () => {
+            numberLinePage.steps.switchToEditTab();
+            numberLinePage.steps.expandMaxCheckAnswerAttemptsDropdown();
+            numberLinePage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('1');
+            numberLinePage.steps.switchToPreviewTab();
+            numberLinePage.steps.plotPointOnNumberLinePreviewTab([{ x: 1, xRange: 20 }]);
+            numberLinePage.steps.verifyPointsPlottedOnNumberLinePreviewTab([{ x: 1, xRange: 20 }]);
+            numberLinePage.steps.checkAnswer();
+            numberLinePage.steps.verifyCheckAnswerButtonDisabled();
+        });
+
+        it('When the user reaches maximum check answer attempts, then the \'Check Answer\' button should become disabled', () => {
+            utilities.verifyElementDisabled(numberLinePage.checkAnswerButton());
+        });
+
+        it('CSS of disabled \'Check Answer\' button', { tags: 'css' }, () => {
+            utilities.verifyCSS(numberLinePage.checkAnswerButton(), {
+                'color': css.color.primaryBtnDisabled,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('Accessibility of disabled Check Answer button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(numberLinePage.checkAnswerButton().parents('.check-answer-and-status-wrapper'));
+        });
+
+        it('When the user updates the value of \'Maximum check answer attempts\' dropdown, it should get reflected on the Preview tab', () => {
+            numberLinePage.steps.switchToEditTab();
+            numberLinePage.steps.expandMaxCheckAnswerAttemptsDropdown();
+            numberLinePage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('3');
+            numberLinePage.steps.switchToPreviewTab();
+            numberLinePage.steps.verifyCheckAnswerButtonEnabled();
+            numberLinePage.steps.plotPointOnNumberLinePreviewTab([{ x: 1, xRange: 20 }]);
+            numberLinePage.steps.verifyPointsPlottedOnNumberLinePreviewTab([{ x: 1, xRange: 20 }]);
+            numberLinePage.steps.checkAnswer();
+            numberLinePage.steps.verifyCheckAnswerButtonEnabled();
+        });
+
+        it('When the user selects \'No limit\' option from the dropdown then user should be able to check answer multiple times', () => {
+            numberLinePage.steps.switchToEditTab();
+            numberLinePage.steps.expandMaxCheckAnswerAttemptsDropdown();
+            numberLinePage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('no limit');
+            numberLinePage.steps.switchToPreviewTab();
+            numberLinePage.steps.verifyCheckAnswerButtonEnabled();
+            numberLinePage.steps.plotPointOnNumberLinePreviewTab([{ x: 1, xRange: 20 }]);
+            numberLinePage.steps.verifyPointsPlottedOnNumberLinePreviewTab([{ x: 1, xRange: 20 }]);
+            numberLinePage.steps.checkAnswer();
+            numberLinePage.steps.verifyCheckAnswerButtonEnabled();
+            numberLinePage.steps.plotPointOnNumberLinePreviewTab([{ x: 3, xRange: 20 }]);
+            numberLinePage.steps.verifyPointsPlottedOnNumberLinePreviewTab([{ x: 3, xRange: 20 }]);
+            numberLinePage.steps.checkAnswer();
+            numberLinePage.steps.verifyCheckAnswerButtonEnabled();
+        });
+    });
+});

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

@@ -0,0 +1,73 @@
+import { toolSettingsComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+import { dialogBoxBase, numberLinePage, rulerPage } from "../../../pages";
+
+const css = Cypress.env('css');
+
+describe('Create Item page: Tool settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Tool settings: Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            numberLinePage.steps.navigateToCreateQuestion('Number line');
+        });
+
+        numberLinePage.tests.verifyToolSettingsContent();
+    });
+
+    describe('Tool settings: Edit tool settings', () => {
+        abortEarlySetup();
+        before(() => {
+            numberLinePage.steps.navigateToCreateQuestion('Number line');
+            toolSettingsComponent.steps.expandToolSettingsAccordion();
+        });
+
+        it('When user clicks on edit icon for ruler tool, then popup for ruler tool settings should be displayed', () => {
+            toolSettingsComponent.steps.clickOnToolEditIcon(0);
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+        });
+
+        it('When user modifies the settings for the ruler tool and clicks the \'Ok\' button, then ruler tool should enter selected state.', () => {
+            rulerPage.steps.expandUnitOfMeasurementDropdown();
+            rulerPage.steps.selectOptionFromUnitOfMeasurementDropdown('Inch');
+            rulerPage.steps.selectOptionFromLengthOfRulerOptions('12 in');
+            rulerPage.steps.selectColorBlock(1);
+            rulerPage.steps.expandRotationDropdown();
+            rulerPage.steps.selectOptionFromRotationDropdown('Allow rotation and display angle');
+            rulerPage.steps.enterInputToOpacityInputField(60);
+            rulerPage.steps.checkAddShowHideButtonCheckbox();
+            dialogBoxBase.steps.clickOnAcceptButtonInDialogBox();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            toolSettingsComponent.steps.verifyToolSelectedState(0);
+        });
+
+        it('When user has made changes for ruler tool in edit tab then changes should be reflected in the ruler tool in the preview tab', () => {
+            cy.log('Switching to Preview Tab');
+            rulerPage.steps.switchToPreviewTab();
+            rulerPage.steps.verifyPreviewTabRulerVisibilityButtonLabel('Show');
+            rulerPage.steps.clickOnRulerVisibilityButton();
+            utilities.verifyElementVisibilityState(rulerPage.rulerPreviewTab(), 'visible');
+            rulerPage.steps.verifyLengthOfRulerInPreview('12in');
+            rulerPage.steps.verifyColorOfRulerInPreview(1);
+            rulerPage.steps.verifyRulerOpacityInPreview('0.6');
+            rulerPage.steps.verifyRotationButtonWithDegreeVisible();
+        });
+
+        it('CSS of the \'Hide ruler\' button', { tags: 'css' }, () => {
+            utilities.verifyCSS(rulerPage.rulerVisibilityButtonPreviewTab(), {
+                'border': `1px solid ${css.color.activeButtons}`,
+                'background-color': css.color.defaultBackground,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('Accessibility of \'Hide ruler\' button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(rulerPage.rulerVisibilityButtonPreviewTab().parents('[class*="ItemEnginestyles__MainWrapper"]'));
+        });
+    });
+});