itemengine-cypress-automation 1.0.90 → 1.0.91

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/setLimitSection.js

@@ -0,0 +1,334 @@
+import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create item page - Fill in the gaps over image with text: Set limit section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('fill in the gaps over image with text: Set limit section - Edit tab contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Set limit\' label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.setLimitLabel(), 'Set limit');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.setLimitLabel(), 'visible');
+        });
+
+        it('\'Character\' and \'None\' labels and radio buttons should be displayed and by default \'Character\' should be selected', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.characterLabel(), 'Character');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.characterLabel(), 'visible');
+            fillInTheGapsOverImageTextPage.steps.verifyCharacterRadioButtonSelected();
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.noneLabel(), 'None');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.noneLabel(), 'visible');
+            fillInTheGapsOverImageTextPage.steps.verifyNoneRadioButtonNotSelected();
+        });
+
+        it('\'Minimum character limit\' and \'Maximum character limit\' labels should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.minimumCharacterLimitLabel(), 'Minimum character limit');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.minimumCharacterLimitLabel(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.maximumCharacterLimitLabel(), 'Maximum character limit');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.maximumCharacterLimitLabel(), 'visible');
+        });
+
+        it('\'Minimum character limit\' and \'Maximum character limit\' input fields should be displayed and have 0 and 50 value by default', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.minimumCharacterLimitInputField(), 'visible');
+            fillInTheGapsOverImageTextPage.steps.verifyMinimumCharacterLimitInputField(0);
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.maximumCharacterLimitInputField(), 'visible');
+            fillInTheGapsOverImageTextPage.steps.verifyMaximumCharacterLimitInputField(50);
+        });
+
+        it('User should be able to update values in both the input fields', () => {
+            fillInTheGapsOverImageTextPage.steps.setMinimumLimit(10);
+            fillInTheGapsOverImageTextPage.steps.setMaximumLimit(40);
+        });
+
+        it('When the user clears the minimum character limit input field and focuses out of it, then error message \'Error: Minimum character limit is required\' should be displayed below the input field', () => {
+            fillInTheGapsOverImageTextPage.steps.clearAndFocusOutOfMinimumCharacterLimitInputField();
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.errorMessage(), 'Error: Minimum character limit is required.');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.errorMessage(), 'visible');
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When the user enters value in minimum character limit input field then the error message should disappear', () => {
+            fillInTheGapsOverImageTextPage.steps.setMinimumLimit(0);
+            fillInTheGapsOverImageTextPage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('When the user clears the maximum character limit input field and focuses out of it, then error message \'Error: Maximum character limit is required.\' should be displayed below the input field', () => {
+            fillInTheGapsOverImageTextPage.steps.clearAndFocusOutOfMaximumCharacterLimitInputField();
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.errorMessage(), 'Error: Maximum character limit is required.');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.errorMessage(), 'visible');
+        });
+
+        it('When the user enters value in maximum character limit input field then the error message should disappear', () => {
+            fillInTheGapsOverImageTextPage.steps.setMaximumLimit(40);
+            fillInTheGapsOverImageTextPage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('When the user sets minimum limit input field value greater than maximum limit input field value then error message \'Error: Minimum limit must be less than or equal to maximum limit.\' and \'Error: Maximum limit must be greater than or equal to minimum limit.\'should be displayed below the minimum and maximum input field respectively', () => {
+            fillInTheGapsOverImageTextPage.steps.setMinimumLimit(45);
+            fillInTheGapsOverImageTextPage.steps.verifyMaximumLimitErrorMessage();
+            fillInTheGapsOverImageTextPage.steps.verifyMinimumLimitErrorMessage();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When the user sets minimum limit input field value less than or equal to maximum limit input field value then error message should disappear', () => {
+            fillInTheGapsOverImageTextPage.steps.setMinimumLimit(30);
+            fillInTheGapsOverImageTextPage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('When the user sets maximum limit input field value less than minimum limit input field value then error message \'Error: Minimum limit must be less than or equal to maximum limit.\' and \'Error: Maximum limit must be greater than or equal to minimum limit.\'should be displayed below the minimum and maximum input field respectively', () => {
+            fillInTheGapsOverImageTextPage.steps.setMaximumLimit(26);
+            fillInTheGapsOverImageTextPage.steps.verifyMaximumLimitErrorMessage();
+            fillInTheGapsOverImageTextPage.steps.verifyMinimumLimitErrorMessage();
+        });
+
+        it('When the user sets maximum limit input field value greater than or equal to minimum limit input field value then error message should disappear', () => {
+            fillInTheGapsOverImageTextPage.steps.setMaximumLimit(45);
+            fillInTheGapsOverImageTextPage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('CSS of \'Set character limit\' sections', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.setLimitLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.characterLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.characterLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.noneLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.minimumCharacterLimitLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.minimumCharacterLimitLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.minimumCharacterLimitInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.maximumCharacterLimitInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.characterRadioButton().parent().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Set limit\' section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.setLimitLabel().parents('[class*="SetLimitWrapper"]'));
+        });
+
+        it('When user enters zero in maximum limit input field, then error message \'Error: Maximum limit must be greater than 0.\' should be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.setMaximumLimit(0);
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.errorMessage(), 'Error: Maximum limit must be greater than 0.');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.errorMessage(), 'visible');
+        });
+
+        it('When user enters limit more than zero in maximum limit input field, then error message should disappear', () => {
+            fillInTheGapsOverImageTextPage.steps.setMaximumLimit(50);
+            fillInTheGapsOverImageTextPage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('When user should not be able to add limit more than 50 inside minimum and maximum limit input field', () => {
+            fillInTheGapsOverImageTextPage.steps.setMinimumLimit(60);
+            fillInTheGapsOverImageTextPage.steps.verifyMinimumLimit(6);
+            fillInTheGapsOverImageTextPage.steps.setMaximumLimit(60);
+            fillInTheGapsOverImageTextPage.steps.verifyMaximumLimit(6);
+        });
+
+        it('When the user selects \'None\' radio button then the maximum and minimum character limit labels and input field should not be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.selectNoneRadioButton();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.minMaxLabelAndInputFieldWrapper(), 'notExist');
+        });
+    });
+
+    // TODO after https://redmine.zeuslearning.com/issues/556897 gets resolved
+    describe('fill in the gaps over image with text: Set limit section : Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(60);
+        });
+
+        it('When maximum character limit input field value is 50 then maximum character limit should be 50 in the specify correct answer section', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyMaximumCharacterLimitInputField(50);
+            fillInTheGapsOverImageTextPage.steps.verifyMaximumCharacterLimit(0, 50);
+        });
+
+        it('When the user updates the maximum character limit input field value then maximum character limit should update in the specify correct answer section', () => {
+            fillInTheGapsOverImageTextPage.steps.setMaximumLimit(10);
+            fillInTheGapsOverImageTextPage.steps.verifyMaximumCharacterLimit(0, 10);
+        });
+
+        it('User should able to enter characters in the answer input field', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'Flower' }]);
+        });
+
+        it('When the user reaches the character limit, then the warning message \'Maximum 10 characters have been entered\' should be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'pots' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseAccordionAnswerInputField([{ responseIndex: 0, responseText: 'Flowerpots' }])
+            fillInTheGapsOverImageTextPage.steps.verifyLimitReachedWarningMessageExist('Maximum 10 words have been entered.');
+        });
+
+        it('CSS of error message', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.limitReachedWarningMessage(), {
+                'color': css.color.warningMessage,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.limitReachedWarningMessageContainer().find('svg'), {
+                'color': css.color.warningMessage,
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.limitReachedWarningMessageContainer(), {
+                'border': `1px solid ${css.color.warningContainerBorder}`
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.limitReachedWarningMessageContainer(), {
+                'background-color': css.color.warningContainerBackground
+            });
+        });
+
+        it('Accessibility of error message', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.limitReachedWarningMessage());
+        });
+
+        it('When the user removes/deletes some characters to make the number of characters less than the set maximum limit, the warning message should disappear', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: '{backspace}' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseAccordionAnswerInputField([{ responseIndex: 0, responseText: 'Flowerpot' }])
+            fillInTheGapsOverImageTextPage.steps.verifyLimitReachedWarningMessageNotExist();
+        });
+
+        it('When the user updates minimum character limit and enters character less than the minimum character limit value set and focus out of response field, then the warning message \'Minimum 6 characters are required\' should be displayed in specify correct answer', () => {
+            fillInTheGapsOverImageTextPage.steps.setMinimumLimit(6);
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'Air' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyLimitReachedWarningMessageExist('Minimum 6 words are required.');
+        });
+
+        it('When the user enters the character greater than the minimum character limit value set by the user, then the warning message should disappear', () => {
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'Airwater' }]);
+            fillInTheGapsOverImageTextPage.steps.verifyTextInResponseAccordionAnswerInputField([{ responseIndex: 0, responseText: 'Airwater' }])
+            fillInTheGapsOverImageTextPage.steps.verifyLimitReachedWarningMessageNotExist();
+        });
+
+        it('When the user selects \'None\' radio button then maximum limit should not be displayed in the preview tab and when user types anything in the response field then error message should not be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.selectNoneRadioButton();
+            fillInTheGapsOverImageTextPage.steps.verifyMaximumCharacterLimitNotExistInPreviewTab(0);
+            fillInTheGapsOverImageTextPage.steps.addTextInAnswerInputFieldsPreviewTab(0, 'water');
+            fillInTheGapsOverImageTextPage.steps.verifyLimitReachedWarningMessageNotExist();
+        });
+    });
+
+    describe('fill in the gaps over image with text: Set limit section : Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(60);
+        });
+
+        it('When maximum character limit input field value is 50 then maximum character limit should be 50 in the preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.verifyMaximumCharacterLimitInputField(50);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyMaximumCharacterLimitInPreviewTab(0, 50);
+        });
+
+        it('When the user updates the maximum character limit input field value then maximum character limit should update in the preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.setMaximumLimit(10);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyMaximumCharacterLimitInPreviewTab(0, 10);
+        });
+
+        it('User should able to enter characters in the response field', () => {
+            fillInTheGapsOverImageTextPage.steps.addTextInAnswerInputFieldsPreviewTab(0, 'Flower');
+        });
+
+        it('When the user reaches the character limit, then the warning message \'Maximum 10 characters have been entered\' should be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.addTextInAnswerInputFieldsPreviewTab(0, 'pots');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Flowerpots' }])
+            fillInTheGapsOverImageTextPage.steps.verifyLimitReachedWarningMessageExist('Maximum 10 words have been entered.');
+        });
+
+        it('CSS of error message', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.limitReachedWarningMessage(), {
+                'color': css.color.warningMessage,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.limitReachedWarningMessageContainer().find('svg'), {
+                'color': css.color.warningMessage,
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.limitReachedWarningMessageContainer(), {
+                'border': `1px solid ${css.color.warningContainerBorder}`
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.limitReachedWarningMessageContainer(), {
+                'background-color': css.color.warningContainerBackground
+            });
+        });
+
+        it('Accessibility of error message', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.limitReachedWarningMessage());
+        });
+
+        it('When the user removes/deletes some characters to make the number of characters less than the set maximum limit, the warning message should disappear', () => {
+            fillInTheGapsOverImageTextPage.steps.addTextInAnswerInputFieldsPreviewTab(0, '{backspace}');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Flowerpot' }])
+            fillInTheGapsOverImageTextPage.steps.verifyLimitReachedWarningMessageNotExist();
+        });
+
+        it('When the user updates minimum character limit in edit tab and enters character less than the minimum character limit value set and focus out of response field, then the warning message \'Minimum 6 characters are required\' should be displayed in preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.setMinimumLimit(6);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.addTextInAnswerInputFieldsPreviewTab(0, 'Air');
+            fillInTheGapsOverImageTextPage.steps.verifyLimitReachedWarningMessageExist('Minimum 6 words are required.');
+        });
+
+        it('When the user enters the character greater than the minimum character limit value set by the user, then the warning message should disappear', () => {
+            fillInTheGapsOverImageTextPage.steps.addTextInAnswerInputFieldsPreviewTab(0, 'water');
+            fillInTheGapsOverImageTextPage.steps.verifyTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Airwater' }])
+            fillInTheGapsOverImageTextPage.steps.verifyLimitReachedWarningMessageNotExist();
+        });
+
+        it('When the user selects \'None\' radio button then maximum limit should not be displayed in the preview tab and when user types anything in the response field then error message should not be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.selectNoneRadioButton();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyMaximumCharacterLimitNotExistInPreviewTab(0);
+            fillInTheGapsOverImageTextPage.steps.addTextInAnswerInputFieldsPreviewTab(0, 'water');
+            fillInTheGapsOverImageTextPage.steps.verifyLimitReachedWarningMessageNotExist();
+        });
+    });
+});

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

@@ -0,0 +1,180 @@
+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');
+        });
+
+        it('Five solid colors with the label \'Grey\',  \'Black\', \'Blue\',\'Green\' and \'Red\' respectively should be displayed ', () => {
+            const colors = ['Gray', 'Black', 'Blue', 'Green', 'Red'];
+            const colorValues = ['rgb(112, 112, 112)', 'rgb(26, 26, 26)', 'rgb(0, 134, 153)', 'rgb(0, 159, 106)', 'rgb(153, 29, 0)'];
+            utilities.verifyElementCount(readingRulerPage.colorBlock(), 5);
+            colors.forEach((color, blockIndex) => {
+                readingRulerPage.steps.verifyColorBlock(blockIndex, color, colorValues[blockIndex]);
+            });
+        });
+
+        it('\'Grey\' 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
+            });
+            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.displayButtonToStudentCheckbox().parents('.ngie-checkbox-form-group'));
+        });
+
+        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('[aria-label="color"]'));
+        });
+
+        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');
+        });
+
+        it('\'Opacity\' label and input field with the value 80 should be displayed', () => {
+            utilities.verifyInnerText(readingRulerPage.opacityLabel(), 'Opacity');
+            utilities.verifyElementVisibilityState(readingRulerPage.opacityLabel(), 'visible');
+            readingRulerPage.steps.verifyOpacityInputFieldValue(80);
+            utilities.verifyElementVisibilityState(readingRulerPage.opacityInputField(), 'visible');
+        });
+
+        it('Opacity slider should be displayed and by default the slider of \'Opacity\' should be set to 80 percent', () => {
+            utilities.verifyElementVisibilityState(readingRulerPage.opacitySlider(), 'visible');
+            readingRulerPage.steps.verifyOpacitySliderValue(80);
+        });
+
+        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);
+        });
+
+        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.verifyCreateItemWrapperContentsA11y();
+
+        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();
+    });
+});