itemengine-cypress-automation 1.0.166-migrationScripts-b8c79a0.0 → 1.0.167-repoUpdate10April-1465c8c.0

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

@@ -0,0 +1,309 @@
+import { matchingPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const defaultListOptions = ['No limit', '1', '2', '3']
+const options = ['Petals', 'Leaves', 'Roots', 'Stem', 'Seeds', 'Flower', 'Branch'];
+
+describe('Create Item page - Matching : Maximum capacity per dropzone section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Maximum capacity per dropzone : Specify correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.addTextInQuestionInstructionsInputField('matching');
+            matchingPage.steps.enterTextInOptionInputField(options.slice(0, 3));
+            matchingPage.steps.allotPoints(5);
+        });
+
+        it('\'Maximum capacity per dropzone\' label and dropdown should be displayed. By default the \'1\' should be the selected option in the \'Maximum capacity per dropzone\' dropdown', () => {
+            utilities.verifyInnerText(matchingPage.maxCapacityPerDropzoneLabel(), 'Maximum capacity per dropzone');
+            utilities.verifyElementVisibilityState(matchingPage.maxCapacityPerDropzoneLabel(), 'visible');
+            utilities.verifyInnerText(matchingPage.maxCapacityPerDropzoneDropdown(), '1');
+        });
+
+        it(`When the user expands the \'Maximum capacity per dropzone\' dropdown, a list of ${defaultListOptions.length} options - ${defaultListOptions.join(',')} should be displayed`, () => {
+            matchingPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            utilities.verifyElementVisibilityState(matchingPage.dropdownList(), 'visible')
+            matchingPage.steps.verifyMaxCapacityPerDropzoneListOptions(defaultListOptions);
+        });
+
+        it('CSS of \'Maximum capacity per dropzone\' dropdown in active state', { tags: 'css' }, () => {
+            utilities.verifyCSS(matchingPage.maxCapacityPerDropzoneDropdownListOptions(defaultListOptions[1]), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            })
+            utilities.verifyCSS(matchingPage.maxCapacityPerDropzoneDropdownListOptions(defaultListOptions[0]), {
+                'background-color': css.color.transparent
+            })
+        });
+
+        it('Accessibility of \'Maximum capacity per dropzone\' dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(matchingPage.dropdownList())
+        });
+
+        it('When the user adds new options, the list options in the \'Maximum capacity per dropzone\' dropdown should also update accordingly', () => {
+            matchingPage.steps.addMultipleOptionFields(4);
+            matchingPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            utilities.verifyElementVisibilityState(matchingPage.dropdownList(), 'visible')
+            matchingPage.steps.verifyMaxCapacityPerDropzoneListOptions(['No limit', '1', '2', '3', '4', '5', '6', '7']);
+        });
+
+        it('When the user selects \'No limit\' from the \'Maximum capacity per dropzone\' dropdown, then the user should be able to set n number of options in a dropzone in the specify correct answer section', () => {
+            cy.log('Pre step: Adding input to the empty options input field')
+            matchingPage.steps.enterTextInOneOptionInputField(3, 'Flower');
+            matchingPage.steps.enterTextInOneOptionInputField(4, 'Seeds');
+            matchingPage.steps.enterTextInOneOptionInputField(5, 'Stem');
+            matchingPage.steps.enterTextInOneOptionInputField(6, 'Branch');
+            matchingPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            matchingPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('No limit');
+            matchingPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection([{ optionText: 'Flower', dropzoneIndex: 1 }, { optionText: 'Seeds', dropzoneIndex: 1 }, { optionText: 'Stem', dropzoneIndex: 1 }]);
+            matchingPage.steps.verifyDraggableOptionInDropzoneSpecifyCorrectAnswerSection(1, ['Flower', 'Seeds', 'Stem']);
+        });
+
+        it('When the user selects a finite number of options value from the \'Maximum capacity per dropzone\' dropdown, then the user should only be able to set options in a dropzone in the specify correct answer section according to the selected option and warning message should be displayed when user dropped options more than maximum capacity specified', () => {
+            matchingPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            matchingPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('2');
+            matchingPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection([{ optionText: 'Branch', dropzoneIndex: 0 }, { optionText: 'Roots', dropzoneIndex: 0 }, { optionText: 'Petals', dropzoneIndex: 0 }]);
+            matchingPage.steps.verifyDraggableOptionInDropzoneSpecifyCorrectAnswerSection(0, ['Branch', 'Roots']);
+            matchingPage.steps.verifyWarningMessage('Maximum 2 options can be dropped in each dropzone.');
+        });
+
+        it('CSS of warning message', { tags: 'css' }, () => {
+            utilities.verifyCSS(matchingPage.warningMessage(), {
+                'color': css.color.warningMessage,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(matchingPage.warningMessageContainer().find('[class*="IconWrapper"]'), {
+                'background-color': css.color.warningContainerBorder,
+            });
+            utilities.verifyCSS(matchingPage.warningMessageContainer(), {
+                'border': `1px solid ${css.color.warningContainerBorder}`,
+                'background-color': css.color.warningContainerBackground
+            });
+        });
+
+        it('Accessibility of warning message', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(matchingPage.warningMessage());
+        });
+
+        it('When user clicks on the options container, warning message should disappear', () => {
+            matchingPage.steps.clickOnOptionContainerSpecifyCorrectAnswerSection();
+            utilities.verifyElementVisibilityState(matchingPage.warningMessageContainer(), 'notExist');
+        });
+
+        it('When the user updates the value for the \'Maximum capacity per dropzone\' dropdown less than the options in the dropzone then the recently added option in the dropzone should move back to the option container', () => {
+            matchingPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            matchingPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('1');
+            matchingPage.steps.verifyDraggableOptionInDropzoneSpecifyCorrectAnswerSection(0, ['Branch']);
+            matchingPage.steps.verifyOptionContainerOptionSpecifyCorrectAnswerSection([{ index: 0, optionText: 'Petals' }, { index: 1, optionText: 'Leaves' }, { index: 2, optionText: 'Roots' }, { index: 3, optionText: 'Seeds' }, { index: 4, optionText: 'Stem' }]);
+        });
+    });
+
+    describe('Maximum capacity per dropzone: Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.addTextInQuestionInstructionsInputField('matching');
+            matchingPage.steps.addMultipleOptionFields(2);
+            matchingPage.steps.enterTextInOptionInputField(options.slice(0, 5));
+            matchingPage.steps.allotPoints(5);
+        });
+
+        it('By default user should be able to set only 1 options in a dropzone in the preview tab', () => {
+            matchingPage.steps.switchToPreviewTab();
+            matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Leaves', dropzoneIndex: 1 }, { optionText: 'Stem', dropzoneIndex: 1 }]);
+            matchingPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(1, ['Stem']);
+        });
+
+        it('When the user selects \'No limit\' from the \'Maximum capacity per dropzone\' dropdown, then the user should be able to set n number of options in a dropzone in the preview tab', () => {
+            matchingPage.steps.switchToEditTab();
+            matchingPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            matchingPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('No limit');
+            matchingPage.steps.switchToPreviewTab();
+            matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Leaves', dropzoneIndex: 1 }, { optionText: 'Stem', dropzoneIndex: 1 }, { optionText: 'Roots', dropzoneIndex: 1 }]);
+            matchingPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(1, ['Leaves', 'Stem', 'Roots']);
+        });
+
+        it('When the user selects a finite number of options value from the \'Maximum capacity per dropzone\' dropdown, then the user should only be able to drop options in a dropzone in the preview tab according to the selected option and warning message should be displayed if user drops more options than selected option in edit tab', () => {
+            matchingPage.steps.switchToEditTab();
+            matchingPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            matchingPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('2');
+            matchingPage.steps.switchToPreviewTab();
+            matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Leaves', dropzoneIndex: 0 }, { optionText: 'Petals', dropzoneIndex: 0 }, { optionText: 'Seeds', dropzoneIndex: 0 }]);
+            matchingPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(0, ['Leaves', 'Petals']);
+            matchingPage.steps.verifyWarningMessage('Maximum 2 options can be dropped in each dropzone.');
+        });
+
+        it('CSS of warning message', { tags: 'css' }, () => {
+            utilities.verifyCSS(matchingPage.warningMessage(), {
+                'color': css.color.warningMessage,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(matchingPage.warningMessageContainer().find('[class*="IconWrapper"]'), {
+                'background-color': css.color.warningContainerBorder,
+            });
+            utilities.verifyCSS(matchingPage.warningMessageContainer(), {
+                'border': `1px solid ${css.color.warningContainerBorder}`,
+                'background-color': css.color.warningContainerBackground
+            });
+        });
+
+        it('Accessibility of warning message', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(matchingPage.warningMessage());
+        });
+
+        it('When user clicks on the options container, warning message should disappear', () => {
+            matchingPage.steps.clickOnOptionContainerPreviewTab();
+            utilities.verifyElementVisibilityState(matchingPage.warningMessageContainer(), 'notExist');
+        });
+    });
+
+    describe('Maximum capacity per dropzone: Scoring', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.addTextInQuestionInstructionsInputField('matching');
+            matchingPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            matchingPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('2');
+            matchingPage.steps.addMultipleOptionFields(4);
+            matchingPage.steps.enterTextInOptionInputField(options);
+            matchingPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection([{ optionText: 'Petals', dropzoneIndex: 0 }, { optionText: 'Leaves', dropzoneIndex: 0 }, { optionText: 'Roots', dropzoneIndex: 1 }, { optionText: 'Stem', dropzoneIndex: 2 }, { optionText: 'Seeds', dropzoneIndex: 2 }])
+            matchingPage.steps.allotPoints(5);
+            matchingPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+        });
+
+        it('When the user selects \'Grading\' view without attempting the question, dropzone numeration should be displayed, correct answers section with a label \'Correct answers\' should be displayed with correct answers and respective option numeration', () => {
+            matchingPage.steps.switchToPreviewTab();
+            matchingPage.steps.switchToGradingView();
+            matchingPage.steps.verifyDropzoneNumeration();
+            utilities.verifyInnerText(matchingPage.correctAnswersLabel(), 'Correct answers');
+            matchingPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionForMultipleOptions([['Petals', 'Leaves'], ['Roots'], ['Stem', 'Seeds']]);
+        });
+
+        it('When the user attempts the question incorrectly, then the user should be awarded 0 points and on switching to \'Grading\' view, incorrect icons should be displayed besides all incorrect responses, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers along with numeration should be displayed', () => {
+            matchingPage.steps.resetQuestionPreview();
+            matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Branch', dropzoneIndex: 0 }, { optionText: 'Petals', dropzoneIndex: 1 }, { optionText: 'Roots', dropzoneIndex: 2 }]);
+            matchingPage.steps.verifyPreviewScore(0, 5);
+            matchingPage.steps.switchToGradingView();
+            matchingPage.steps.verifyIncorrectOptionIcon(0);
+            matchingPage.steps.verifyIncorrectOptionIcon(1);
+            matchingPage.steps.verifyIncorrectOptionIcon(2);
+            matchingPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            matchingPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionForMultipleOptions([['Petals', 'Leaves'], ['Roots'], ['Stem', 'Seeds']]);
+            matchingPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user attempts the question incorrectly and clicks on \'Check answer\' button, then incorrect icon should be displayed besides the incorrect answer responses, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            matchingPage.steps.checkAnswer();
+            matchingPage.steps.verifyIncorrectOptionIcon(0);
+            matchingPage.steps.verifyIncorrectOptionIcon(1);
+            matchingPage.steps.verifyIncorrectOptionIcon(2);
+            matchingPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            matchingPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts the question partially correct with some correct, some incomplete, some incorrect options, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the correct answer responses, incorrect icon should be displayed besides incorrect answer response, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers along with numeration should be displayed', () => {
+            matchingPage.steps.resetQuestionPreview();
+            matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Petals', dropzoneIndex: 0 }, { optionText: 'Leaves', dropzoneIndex: 0 }, { optionText: 'Branch', dropzoneIndex: 1 }, { optionText: 'Seeds', dropzoneIndex: 2 }]);
+            matchingPage.steps.verifyPreviewScore(0, 5);
+            matchingPage.steps.switchToGradingView();
+            matchingPage.steps.verifyCorrectOptionIcon(0, 0);
+            matchingPage.steps.verifyCorrectOptionIcon(0, 1);
+            matchingPage.steps.verifyIncorrectOptionIcon(1, 0);
+            matchingPage.steps.verifyCorrectOptionIcon(2, 0);
+            matchingPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            matchingPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionForMultipleOptions([['Petals', 'Leaves'], ['Roots'], ['Stem', 'Seeds']]);
+            matchingPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user attempts the question partially correct with some correct, some incomplete, some incorrect options and clicks on \'Check answer\' button, then incorrect icon should be displayed besides the incorrect answer responses and correct icon should be displayed besides the correct answer responses, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            matchingPage.steps.checkAnswer();
+            matchingPage.steps.verifyCorrectOptionIcon(0, 0);
+            matchingPage.steps.verifyCorrectOptionIcon(0, 1);
+            matchingPage.steps.verifyIncorrectOptionIcon(1, 0);
+            matchingPage.steps.verifyCorrectOptionIcon(2, 0);
+            matchingPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            matchingPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts the question partially correct with all the dropzone correctly attempted but one dropzone incomplete, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the correct answer responses, incorrect icon should be displayed besides incorrect answer response, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers along with numeration should be displayed', () => {
+            matchingPage.steps.resetQuestionPreview();
+            matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Petals', dropzoneIndex: 0 }, { optionText: 'Leaves', dropzoneIndex: 0 }, { optionText: 'Roots', dropzoneIndex: 1 }, { optionText: 'Seeds', dropzoneIndex: 2 }]);
+            matchingPage.steps.verifyPreviewScore(0, 5);
+            matchingPage.steps.switchToGradingView();
+            matchingPage.steps.verifyCorrectOptionIcon(0, 0);
+            matchingPage.steps.verifyCorrectOptionIcon(0, 1);
+            matchingPage.steps.verifyCorrectOptionIcon(1, 0);
+            matchingPage.steps.verifyCorrectOptionIcon(2, 0);
+            matchingPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            matchingPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionForMultipleOptions([['Petals', 'Leaves'], ['Roots'], ['Stem', 'Seeds']]);
+            matchingPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user attempts the question partially correct with all the dropzone correctly attempted but one dropzone incomplete and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct answer responses, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            matchingPage.steps.checkAnswer();
+            matchingPage.steps.verifyCorrectOptionIcon(0, 0);
+            matchingPage.steps.verifyCorrectOptionIcon(0, 1);
+            matchingPage.steps.verifyCorrectOptionIcon(1, 0);
+            matchingPage.steps.verifyCorrectOptionIcon(2, 0);
+            matchingPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            matchingPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts the question partially correct with all the dropzone correctly attempted but with an extra option which is not set as correct answer, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the correct answer responses, incorrect icon should be displayed besides incorrect answer response, a status message with text \'Your answer is incorrect\' and correct answer section should be displayed along with numeration', () => {
+            matchingPage.steps.resetQuestionPreview();
+            matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Petals', dropzoneIndex: 0 }, { optionText: 'Leaves', dropzoneIndex: 0 }, { optionText: 'Roots', dropzoneIndex: 1 }, { optionText: 'Branch', dropzoneIndex: 1 }, { optionText: 'Stem', dropzoneIndex: 2 }, { optionText: 'Seeds', dropzoneIndex: 2 }]);
+            matchingPage.steps.verifyPreviewScore(0, 5);
+            matchingPage.steps.switchToGradingView();
+            matchingPage.steps.verifyCorrectOptionIcon(0, 0);
+            matchingPage.steps.verifyCorrectOptionIcon(0, 1);
+            matchingPage.steps.verifyCorrectOptionIcon(1, 0);
+            matchingPage.steps.verifyIncorrectOptionIcon(1, 1);
+            matchingPage.steps.verifyCorrectOptionIcon(2, 0);
+            matchingPage.steps.verifyCorrectOptionIcon(2, 1);
+            matchingPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            matchingPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionForMultipleOptions([['Petals', 'Leaves'], ['Roots'], ['Stem', 'Seeds']]);
+            matchingPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user attempts the question partially correct with all the dropzone correctly attempted but with an extra option which is not set as correct answer and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct answer responses and incorrect icon should be displayed besides the incorrect answer responses, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            matchingPage.steps.checkAnswer();
+            matchingPage.steps.verifyCorrectOptionIcon(0, 0);
+            matchingPage.steps.verifyCorrectOptionIcon(0, 1);
+            matchingPage.steps.verifyCorrectOptionIcon(1, 0);
+            matchingPage.steps.verifyIncorrectOptionIcon(1, 1);
+            matchingPage.steps.verifyCorrectOptionIcon(2, 0);
+            matchingPage.steps.verifyCorrectOptionIcon(2, 1);
+            matchingPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            matchingPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When user attempts the question correctly, the user should be awarded full points and on switching to \'Grading\' view, then correct icons should be displayed beside all the correct responses, correct icon should be displayed besides the correct answer responses, a status message with text \'Your answer is correct\' and correct answer section should not be displayed', () => {
+            matchingPage.steps.resetQuestionPreview();
+            matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Petals', dropzoneIndex: 0 }, { optionText: 'Leaves', dropzoneIndex: 0 }, { optionText: 'Roots', dropzoneIndex: 1 }, { optionText: 'Stem', dropzoneIndex: 2 }, { optionText: 'Seeds', dropzoneIndex: 2 }]);
+            matchingPage.steps.verifyPreviewScore(5, 5);
+            matchingPage.steps.switchToGradingView();
+            matchingPage.steps.verifyCorrectOptionIcon(0, 0);
+            matchingPage.steps.verifyCorrectOptionIcon(0, 1);
+            matchingPage.steps.verifyCorrectOptionIcon(1, 0);
+            matchingPage.steps.verifyCorrectOptionIcon(2, 0);
+            matchingPage.steps.verifyCorrectOptionIcon(2, 1);
+            matchingPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+            matchingPage.steps.verifyCorrectAnswerSectionNotExists();
+            matchingPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user attempts the question correctly and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct answer responses, a status message with text \'Your answer is correct\' and correct answer section should not be displayed')
+            matchingPage.steps.checkAnswer();
+            matchingPage.steps.verifyCorrectOptionIcon(0, 0);
+            matchingPage.steps.verifyCorrectOptionIcon(0, 1);
+            matchingPage.steps.verifyCorrectOptionIcon(1, 0);
+            matchingPage.steps.verifyCorrectOptionIcon(2, 0);
+            matchingPage.steps.verifyCorrectOptionIcon(2, 1);
+            matchingPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+            matchingPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+    });
+});

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

@@ -1,7 +1,7 @@
 import { matchingPage } from "../../../pages";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import utilities from "../../../support/helpers/utilities";
-
+const css = Cypress.env('css');
 const promptTextArray = ['Wild', 'Aquatic', 'Pet'];
 const options = ['Petals', 'Leaves', 'Roots', 'Flowers'];
 

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

@@ -0,0 +1,72 @@
+import { toolSettingsComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+import { dialogBoxBase, matchingPage, rulerPage } from "../../../pages";
+
+const css = Cypress.env('css');
+
+describe('Create Item page: Tool settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Tool settings: Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+        });
+
+        matchingPage.tests.verifyToolSettingsContent();
+    });
+
+    describe('Tool settings: Edit tool settings', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            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);
+            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"]'));
+        });
+    });
+});