itemengine-cypress-automation 1.0.51 → 1.0.62

package/cypress/e2e/ILC/MultipleSelectionGrid/multipleSelectionGridPartialEqualWeightsCorrectPointsGreaterThanAlternatePoints.js

@@ -0,0 +1,316 @@
+import { multipleSelectionGridPage } from "../../../pages/multipleSelectionGridPage";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+const questionStems = ['Bat', 'Ostrich', 'Platypus', 'Eagle'];
+const options = ['Is mammal', 'Lays eggs', 'Can fly'];
+
+describe('Create Item page - Multiple 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 multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple 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');
+            multipleSelectionGridPage.steps.addQuestionInstructions();
+            multipleSelectionGridPage.steps.addOption()
+            multipleSelectionGridPage.steps.addInputToAllQuestionStemFields(questionStems);
+            multipleSelectionGridPage.steps.addInputToAllOptionsFields(options);
+            multipleSelectionGridPage.steps.selectPartialEqualWeightsCheckbox();
+            multipleSelectionGridPage.steps.uncheckRoundDownScoreCheckbox()
+            multipleSelectionGridPage.steps.allotPoints(20);
+            multipleSelectionGridPage.steps.setAnswersForAllQuestionStemsInSetCorrectAnswerTable([[0, 2], [1], [0, 1], [1, 2]]);
+            multipleSelectionGridPage.steps.clickOnAddAlternateAnswerButton();
+            multipleSelectionGridPage.steps.allotPoints(12);
+            multipleSelectionGridPage.steps.setAnswersForAllQuestionStemsInSetCorrectAnswerTable([[1], [0, 2], [0, 1], [2]]);
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+            multipleSelectionGridPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+            multipleSelectionGridPage.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')
+            multipleSelectionGridPage.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')
+            multipleSelectionGridPage.steps.checkShowCorrectAnswerCheckbox()
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(0, [0, 2]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(1, [1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(2, [0, 1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(3, [1, 2]);
+            multipleSelectionGridPage.incorrectIcon()
+                .should('not.exist');
+            multipleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            multipleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible();
+            multipleSelectionGridPage.steps.uncheckShowCorrectAnswerCheckbox();
+
+            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 correct tab options and correct/incorrect answer label and its border should not be displayed')
+            multipleSelectionGridPage.steps.setAnswersForAllQuestionStemsInPreviewTabAnswerTable([[0, 2], [1], [0, 1], [1, 2]]);
+            multipleSelectionGridPage.previewScoreText()
+                .verifyInnerText('20/20');
+            multipleSelectionGridPage.steps.checkShowCorrectAnswerCheckbox();
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(0, [0, 2]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(1, [1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(2, [0, 1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(3, [1, 2]);
+            multipleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            multipleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible();
+
+            multipleSelectionGridPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+
+            cy.log('When the user clicks on \'Check answer\' button, then green check-mark icons should be displayed besides correct tab options and correct/incorrect answer label and its border should not be displayed')
+            multipleSelectionGridPage.steps.checkAnswer()
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(0, [0, 2]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(1, [1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(2, [0, 1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(3, [1, 2]);
+            multipleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            multipleSelectionGridPage.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')
+            multipleSelectionGridPage.steps.resetQuestionPreview()
+            multipleSelectionGridPage.steps.setAnswersForAllQuestionStemsInPreviewTabAnswerTable([[1], [0, 2], [0, 1], [2]]);
+            multipleSelectionGridPage.previewScoreText()
+                .verifyInnerText('12/20');
+            multipleSelectionGridPage.steps.checkShowCorrectAnswerCheckbox()
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(0, [1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(1, [0, 2]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(2, [0, 1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(3, [2]);
+            multipleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            multipleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible();
+
+            multipleSelectionGridPage.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')
+            multipleSelectionGridPage.steps.checkAnswer();
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(0, [1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(1, [0, 2]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(2, [0, 1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(3, [2]);
+            multipleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            multipleSelectionGridPage.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')
+            multipleSelectionGridPage.steps.resetQuestionPreview()
+            multipleSelectionGridPage.steps.setAnswersForAllQuestionStemsInPreviewTabAnswerTable([[0, 2], [1]]);
+            multipleSelectionGridPage.previewScoreText()
+                .verifyInnerText('10/20');
+            multipleSelectionGridPage.steps.checkShowCorrectAnswerCheckbox()
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(0, [0, 2]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(1, [1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(2, [0, 1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(3, [1, 2]);
+            multipleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            multipleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible();
+
+            multipleSelectionGridPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+
+            cy.log('When the user clicks on \'Check answer\' button, 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')
+            multipleSelectionGridPage.steps.checkAnswer();
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(0, [0, 2]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(1, [1]);
+            multipleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            multipleSelectionGridPage.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 correct/incorrect answer label and its border should not be displayed')
+            multipleSelectionGridPage.steps.resetQuestionPreview()
+            multipleSelectionGridPage.steps.setAnswersForAllQuestionStemsInPreviewTabAnswerTable([[1], [0, 2]]);
+            multipleSelectionGridPage.previewScoreText()
+                .verifyInnerText('6/20');
+            multipleSelectionGridPage.steps.checkShowCorrectAnswerCheckbox()
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(0, [1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(1, [0, 2]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(2, [0, 1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(3, [2]);
+            multipleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            multipleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible();
+
+            multipleSelectionGridPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+
+            cy.log('When the user clicks on \'Check answer\' button, green check-mark icons should be displayed beside the options set in the alternate tab and correct/incorrect answer label and its border should not be displayed')
+            multipleSelectionGridPage.steps.checkAnswer();
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(0, [1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(1, [0, 2]);
+            multipleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            multipleSelectionGridPage.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')
+            multipleSelectionGridPage.steps.resetQuestionPreview()
+            multipleSelectionGridPage.steps.setAnswersForAllQuestionStemsInPreviewTabAnswerTable([[0, 2], [0, 2], [0, 1]]);
+            multipleSelectionGridPage.previewScoreText()
+                .verifyInnerText('10/20');
+            multipleSelectionGridPage.steps.checkShowCorrectAnswerCheckbox()
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(0, [0, 2]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(1, [1]);
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(1, [0, 2]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(2, [0, 1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(3, [1, 2]);
+            multipleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            multipleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible();
+
+            multipleSelectionGridPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+
+            cy.log('When the user clicks on \'Check answer\' button, 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')
+            multipleSelectionGridPage.steps.checkAnswer()
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(0, [0, 2]);
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(1, [0, 2]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(2, [0, 1]);
+            multipleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            multipleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible();
+
+            cy.log('Race condition 1: When user attempts a question stem with correct options of both correct and alternate tab (same options set correct in both the correct and alternate tabs) then the user should be awarded with points of the correct tab(as it has more points) and user selects show correct answer checkbox then green checkmark icon should be displayed for the correct tab options and correct/incorrect answer label and its border should not be displayed')
+            multipleSelectionGridPage.steps.resetQuestionPreview()
+            multipleSelectionGridPage.steps.setAnswersForQuestionStemInPreviewTabAnswerTable(2, [0, 1]);
+            multipleSelectionGridPage.previewScoreText()
+                .verifyInnerText('5/20');
+            multipleSelectionGridPage.steps.checkShowCorrectAnswerCheckbox()
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(0, [0, 2]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(1, [1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(2, [0, 1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(3, [1, 2]);
+            multipleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            multipleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible();
+
+            multipleSelectionGridPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+
+            cy.log('When the user clicks on \'Check answer\' button green check-mark icons should be displayed beside the selected correct tab answer options and correct/incorrect answer label and its border should not be displayed')
+            multipleSelectionGridPage.steps.checkAnswer()
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(2, [0, 1]);
+            multipleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            multipleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible();
+
+            cy.log('Race condition 2: When user attempts a question stem with correct options of both correct and alternate tab (one common option set correct in both the correct and alternate tabs) and user selects show correct answer checkbox then green check-mark icons should be displayed for the correct tab options and user should be awarded 0 points and correct/incorrect answer label and its border should not be displayed')
+            multipleSelectionGridPage.steps.resetQuestionPreview()
+            multipleSelectionGridPage.steps.setAnswersForQuestionStemInPreviewTabAnswerTable(3, [1, 2]);
+            multipleSelectionGridPage.previewScoreText()
+                .verifyInnerText('5/20');
+            multipleSelectionGridPage.steps.checkShowCorrectAnswerCheckbox()
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(0, [0, 2]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(1, [1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(2, [0, 1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(3, [1, 2]);
+            multipleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            multipleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible();
+
+            multipleSelectionGridPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+
+            cy.log('When the user clicks on \'Check answer\' button green check-mark icons should be displayed beside the selected correct answer options and correct/incorrect answer label and its border should not be displayed')
+            multipleSelectionGridPage.steps.checkAnswer()
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(3, [1, 2]);
+            multipleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            multipleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible();
+
+            cy.log('Race condition 3: When user attempts a question stem with correct options of both correct and alternate tab (both the correct and alternate tabs have exclusive options set correct) and user selects show correct answer checkbox then green check-mark icons should be displayed for the options set in correct tab and red cross-mark icon should be displayed for selected alternate tab options and user should be awarded 0 points and correct/incorrect answer label and its border should not be displayed')
+            multipleSelectionGridPage.steps.resetQuestionPreview()
+            multipleSelectionGridPage.steps.setAnswersForQuestionStemInPreviewTabAnswerTable(0, [0, 1, 2]);
+            multipleSelectionGridPage.previewScoreText()
+                .verifyInnerText('0/20');
+            multipleSelectionGridPage.steps.checkShowCorrectAnswerCheckbox()
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(0, [0, 2]);
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(0, [1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(1, [1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(2, [0, 1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(3, [1, 2]);
+            multipleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            multipleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible();
+
+            multipleSelectionGridPage.steps.verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked();
+
+            cy.log('When the user clicks on \'Check answer\' button green check-mark icons should be displayed for the options set in correct tab and red cross-mark icon should be displayed for selected alternate tab options and correct/incorrect answer label and its border should not be displayed')
+            multipleSelectionGridPage.steps.checkAnswer()
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(0, [0, 2]);
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(0, [1]);
+            multipleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            multipleSelectionGridPage.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')
+            multipleSelectionGridPage.steps.resetQuestionPreview()
+            multipleSelectionGridPage.steps.setAnswersForQuestionStemInPreviewTabAnswerTable(2, [2]);
+            multipleSelectionGridPage.steps.setAnswersForQuestionStemInPreviewTabAnswerTable(3, [0]);
+            multipleSelectionGridPage.previewScoreText()
+                .verifyInnerText('0/20');
+            multipleSelectionGridPage.steps.checkShowCorrectAnswerCheckbox()
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(0, [0, 2]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(1, [1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(2, [0, 1]);
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(2, [2]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(3, [1, 2]);
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(3, [0]);
+            multipleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            multipleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible();
+
+            multipleSelectionGridPage.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')
+            multipleSelectionGridPage.steps.checkAnswer();
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(2, [2]);
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(3, [0]);
+            multipleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            multipleSelectionGridPage.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')
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.deleteAlternateTab();
+            multipleSelectionGridPage.steps.addAlternateTab(1);
+            multipleSelectionGridPage.steps.allotPoints('10');
+            multipleSelectionGridPage.steps.setAnswersForAllQuestionStemsInSetCorrectAnswerTable([[1], [0, 2], [2], [0]]);
+            multipleSelectionGridPage.steps.navigateToCorrectTab();
+            multipleSelectionGridPage.steps.allotPoints('50');
+            multipleSelectionGridPage.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')
+            multipleSelectionGridPage.steps.setAnswersForAllQuestionStemsInPreviewTabAnswerTable([[0, 2], [0, 2], [2], [0]]);
+            multipleSelectionGridPage.previewScoreText()
+                .verifyInnerText('12.5/50')
+            multipleSelectionGridPage.steps.checkShowCorrectAnswerCheckbox();
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(0, [0, 2]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(1, [1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(2, [0, 1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(3, [1, 2]);
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(1, [0, 2]);
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(2, [2]);
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(3, [0]);
+            multipleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            multipleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible();
+
+            multipleSelectionGridPage.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 correct/incorrect answer label and its border should not be displayed')
+            multipleSelectionGridPage.steps.checkAnswer()
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(0, [0, 2]);
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(1, [0, 2]);
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(2, [2]);
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(3, [0]);
+            multipleSelectionGridPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            multipleSelectionGridPage.steps.verifyCorrectIncorrectBorderNotVisible();
+
+        });
+    });
+});

package/cypress/e2e/ILC/ReadingRuler/readingRulerEditTabBasicsSection.js

@@ -0,0 +1,185 @@
+import { readingRulerPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create Item page - Reading ruler: Edit Tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+    //TODO: update below to lower case after https://redmine.zeuslearning.com/issues/542832 gets resolved
+    describe('\'Conditional checkboxes\', \'Color\', \'Default number of lines\' section -Edit Tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to \'Reading ruler\' resource tool');
+            readingRulerPage.steps.navigateToCreateResource('reading ruler');
+        });
+
+        it('\'Display button to student\' label and checkbox should be displayed and by default the checkbox should be checked', () => {
+            utilities.verifyInnerText(readingRulerPage.displayButtonToStudentLabel(), 'Display button to student');
+            utilities.verifyElementVisibilityState(readingRulerPage.displayButtonToStudentLabel(), 'visible');
+            readingRulerPage.steps.verifyDisplayButtonToStudentCheckboxIsChecked();
+        });
+
+        it('\'Allow student to resize\' label and checkbox should be displayed and by default the checkbox should be checked', () => {
+            utilities.verifyInnerText(readingRulerPage.allowStudentToResizeLabel(), 'Allow student to resize');
+            utilities.verifyElementVisibilityState(readingRulerPage.allowStudentToResizeLabel(), 'visible');
+            readingRulerPage.steps.verifyAllowStudentToResizeCheckboxIsChecked();
+        });
+
+        it('\'Visible on landing\' label and checkbox should be displayed and by default the checkbox should be unchecked', () => {
+            utilities.verifyInnerText(readingRulerPage.visibleOnLandingLabel(), 'Visible on landing');
+            utilities.verifyElementVisibilityState(readingRulerPage.visibleOnLandingLabel(), 'visible');
+            readingRulerPage.steps.verifyVisibleOnLandingCheckboxIsUnchecked();
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/541620
+        it('CSS of \'Conditional checkboxes\' label in Edit tab', { tags: 'css' }, () => {
+            const labels = [readingRulerPage.displayButtonToStudentLabel, readingRulerPage.allowStudentToResizeLabel, readingRulerPage.visibleOnLandingLabel]
+            labels.forEach(label => {
+                utilities.verifyCSS(label(), {
+                    'color': css.color.labelText,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.regular
+                });
+            });
+        });
+
+        it('\'Color\' label should be displayed', () => {
+            utilities.verifyInnerText(readingRulerPage.colorLabel(), 'Color');
+            utilities.verifyElementVisibilityState(readingRulerPage.colorLabel(), 'visible');
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/541620
+        it('Four solid colors with the label \'Black\', \'Blue\',\'Green\' and \'Red\' respectively should be displayed ', () => {
+            const colors = ['Black', 'Blue', 'Green', 'Red'];
+            const colorValues = ['rgb(26, 26, 26)', 'rgb(0, 134, 153)', 'rgb(0, 159, 106)', 'rgb(153, 29, 0)'];
+            utilities.verifyElementCount(readingRulerPage.colorBlock(), 4);
+            colors.forEach((color, blockIndex) => {
+                readingRulerPage.steps.verifyColorBlock(blockIndex, color, colorValues[blockIndex]);
+            });
+        });
+
+        it('\'Black\' color radio button should be preselected by default.', () => {
+            readingRulerPage.steps.verifyColorBlockSelectedState(0);
+        });
+
+        it('CSS of \'Color\' Section in Edit tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(readingRulerPage.colorLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            //Failing due to https://redmine.zeuslearning.com/issues/541620
+            utilities.verifyCSS(readingRulerPage.colorBlockLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of edit tab when \'Display button to student\' and \'Allow student to resize\' checkbox are checked', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(readingRulerPage.readingRulerEditWrapper());
+        });
+
+        it('When the user selects a color block from the \'Color\' section then the selected color should change and the selected icon should be displayed on the newly selected color', () => {
+            readingRulerPage.steps.selectColorBlock(2);
+            readingRulerPage.steps.verifyColorBlockSelectedState(2);
+            readingRulerPage.steps.verifyColorBlockUnSelectedState(0);
+        });
+
+        it('Accessibility of newly selected color', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(readingRulerPage.colorBlock().parents('.MuiFormGroup-root'));
+        });
+
+        it('\'Default number of lines\' label and input field should be displayed and by default the input field should be prefilled with value 4', () => {
+            utilities.verifyInnerText(readingRulerPage.defaultNumberOfLinesLabel(), 'Default number of lines'
+            );
+            utilities.verifyElementVisibilityState(readingRulerPage.defaultNumberOfLinesLabel(), 'visible');
+            readingRulerPage.steps.verifyDefaultNumberOfLinesInputFieldValue('4');
+            utilities.verifyElementVisibilityState(readingRulerPage.defaultNumberOfLinesInputField(), 'visible');
+        });
+
+        it('User should able to update value in \'Default number of lines\' input field', () => {
+            readingRulerPage.steps.addInputToDefaultNumberOfLinesInputField('2')
+            readingRulerPage.steps.verifyDefaultNumberOfLinesInputFieldValue('2');
+        });
+
+        it('CSS of \'Default number of lines\' Section in Edit tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(readingRulerPage.defaultNumberOfLinesLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(readingRulerPage.defaultNumberOfLinesInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of\'Default number of lines\' input field', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(readingRulerPage.defaultNumberOfLinesInputField());
+        });
+    });
+
+    describe('Opacity section - Edit Tab contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to \'Reading ruler\' resource tool');
+            readingRulerPage.steps.navigateToCreateResource('reading ruler');
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/541338
+        it('\'Opacity\' label and input field with the value 88 should be displayed', () => {
+            utilities.verifyInnerText(readingRulerPage.opacityLabel(), 'Opacity');
+            utilities.verifyElementVisibilityState(readingRulerPage.opacityLabel(), 'visible');
+            readingRulerPage.steps.verifyOpacityInputFieldValue('88')
+            utilities.verifyElementVisibilityState(readingRulerPage.opacityInputField(), 'visible');
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/541338
+        it('Opacity slider should be displayed and by default the slider of \'Opacity\' should be set to 88 percent', () => {
+            utilities.verifyElementVisibilityState(readingRulerPage.opacitySlider(), 'visible');
+            readingRulerPage.steps.verifyOpacitySliderValue('88')
+        });
+
+        it('The maximum value of \'Opacity\' slider should be 100', () => {
+            readingRulerPage.steps.verifyMaxOpacitySliderValue('100')
+        });
+
+        it('CSS of \'Opacity\' Section in Edit tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(readingRulerPage.opacityLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(readingRulerPage.opacityInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(readingRulerPage.opacitySlider(), {
+                'color': css.color.activeButtons,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of opacity section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(readingRulerPage.opacityLabel().parents('.MuiGrid-root'));
+        });
+
+        it('When the user changes value in the opacity input field, the slider value should also change accordingly', () => {
+            readingRulerPage.steps.addInputToOpacityInputField('30');
+            readingRulerPage.steps.verifyOpacityInputFieldValue('30');
+            readingRulerPage.steps.verifyOpacitySliderValue('30');
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/541405
+        it('When the user changes the opacity slider value, value in the opacity input field should also change', () => {
+            readingRulerPage.steps.clickOnOpacitySlider();
+            readingRulerPage.steps.verifyOpacitySliderValue('50');
+            readingRulerPage.steps.verifyOpacityInputFieldValue('50');
+        });
+    });
+});

package/cypress/e2e/ILC/ReadingRuler/readingRulerHeaderSection.js

@@ -0,0 +1,55 @@
+import { readingRulerPage } from "../../../pages";
+import { commonComponents } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+
+describe('Create question page - Reading ruler: Header section and saving resource tool', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Header section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Reading ruler resource tool');
+            readingRulerPage.steps.navigateToCreateResource('reading ruler');
+        });
+
+        readingRulerPage.tests.verifyCreateQuestionPageQuestionTypeHeader('Reading ruler');
+    });
+
+    describe('Tabs section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Reading ruler resource tool');
+            readingRulerPage.steps.navigateToCreateResource('reading ruler');
+        });
+
+        readingRulerPage.tests.verifyTabsSection();
+    });
+
+    describe('Cancel button', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Reading ruler resource tool');
+            readingRulerPage.steps.navigateToCreateResource('reading ruler');
+        });
+
+        readingRulerPage.tests.verifyCancelButton();
+    });
+
+    //TODO: Need to update cases after https://redmine.zeuslearning.com/issues/542818
+    describe('Save button', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Reading ruler resource tool');
+            readingRulerPage.steps.navigateToCreateResource('reading ruler');
+        });
+        commonComponents.tests.verifya11yOfCreateItemWrapperContents();
+
+        it('When user has filled all the mandatory fields then on clicking on Save button the resource tool should get saved and a snackbar with text \'Saved successfully!\' should be displayed', () => {
+            readingRulerPage.steps.saveAQuestionAndVerifySnackbar();
+        });
+
+        readingRulerPage.tests.verifySavedSuccessfullySnackbarCSSanda11y();
+    });
+});