itemengine-cypress-automation 1.0.78 → 1.0.80

package/cypress/e2e/ILC/Protractor/protractorPreviewContents.smoke.js

@@ -0,0 +1,69 @@
+import { protractorPage, itemPreviewPage, studentViewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+let previewContentViews = ['Question preview', 'Item view', 'Item preview', 'Student view', 'Grading view', 'Correct answer view'];
+const views = utilities.getViews(previewContentViews);
+var itemReferenceID = "";
+
+describe('Preview tab contents for all views', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        describe(`Preview tab contents - ${view}`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        cy.log('Navigating to protractor resource type');
+                        protractorPage.steps.navigateToCreateResource('protractor');
+                        protractorPage.steps.expandAngleTypeDropdown();
+                        protractorPage.steps.selectOptionFromAngleTypeDropdown('Acute');
+                        protractorPage.steps.enterAndVerifyAlternativeTextInInputField('Measuring tool');
+                        protractorPage.steps.enterInputToOpacityInputField(30);
+                        protractorPage.steps.selectColorBlock(3);
+                        protractorPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item view':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        protractorPage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/grading-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Correct answer view':
+                        cy.visit(`/item-engine/demo/render-item/correct-answer-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    default:
+                        throw new Error('Invalid view');
+                }
+            });
+
+            after(() => {
+                if (view === 'Question preview') {
+                    protractorPage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                }
+                if (view === 'Student view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(studentViewPage.buttonGoToGradingView(), 'visible');
+                }
+            });
+
+            it('\'Protractor\' should be displayed with \'Acute\' angle, \'30 percent\' opacity, \'Alternative text\' and in \'Orange\' color', () => {
+                protractorPage.steps.verifyAcuteAngleTypeInPreviewTab();
+                protractorPage.steps.verifyPreviewTabColorAndOpacityOfProtractor(3, 0.3);
+                protractorPage.steps.verifyAlternativeTextInPreviewTab('Measuring tool');
+                protractorPage.steps.verifyRotationButtonVisibleInPreviewTab();
+            });
+        });
+    });
+});

package/cypress/e2e/ILC/Ruler/rulerEditTabBasicsSection.js

@@ -0,0 +1,546 @@
+import { rulerPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const rotationOptions = ['None', 'Allow rotation', 'Allow rotation and display angle'];
+const unitOfMeasurementOptions = ['Centimeter', 'Inch', 'Pixel', 'Both centimeter and inch', 'Custom image'];
+const colors = ['White', 'Purple', 'Light blue', 'Orange', 'Yellow', 'Grey'];
+const colorValues = ['rgba(255, 255, 255, 1)', 'rgb(186, 201, 255)', 'rgb(128, 239, 255)', 'rgb(255, 238, 215)', 'rgb(255, 238, 78)', 'rgb(220, 223, 230)'];
+const rulerOptions = [
+    {
+        displayName: 'Centimeter',
+        lengthOfRuler: ['15 cm', '30 cm', '40 cm']
+    },
+    {
+        displayName: 'Inch',
+        lengthOfRuler: ['6 in', '12 in', '15 in']
+    },
+    {
+        displayName: 'Pixel',
+        lengthOfRuler: ['400 px', '800 px', '1200 px']
+    },
+    {
+        displayName: 'Both centimeter and inch',
+        lengthOfRuler: ['15 cm - 6 in', '30 cm - 12 in', '40 cm - 15 in']
+    }
+]
+
+describe('Create Item page - Ruler: Edit Tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('\'Unit of measurement\' and \'Length of ruler\' section- Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to ruler resource tool');
+            rulerPage.steps.navigateToCreateResource('ruler');
+        });
+
+        it(`'Unit of measurement' label and dropdown should be displayed and by default ${rulerOptions[0].displayName} should be selected`, () => {
+            utilities.verifyInnerText(rulerPage.unitOfMeasurementLabel(), 'Unit of measurement');
+            utilities.verifyElementVisibilityState(rulerPage.unitOfMeasurementLabel(), 'visible');
+            rulerPage.steps.verifyInnerTextOfUnitOfMeasurementDropdown(rulerOptions[0].displayName);
+            utilities.verifyElementVisibilityState(rulerPage.unitOfMeasurementDropdown(), 'exist');
+        });
+
+        it(`When user expands the \'Unit of measurement\' dropdown then list with five option ${unitOfMeasurementOptions} should be displayed`, () => {
+            rulerPage.steps.expandUnitOfMeasurementDropdown();
+            rulerPage.steps.verifyUnitOfMeasurementDropdownOptions(unitOfMeasurementOptions);
+        });
+
+        it('CSS of \'Unit of measurement\' label and dropdown in active state', { tags: 'css' }, () => {
+            utilities.verifyCSS(rulerPage.unitOfMeasurementLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(rulerPage.unitOfMeasurementListOptions(rulerOptions[0].displayName), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            });
+            utilities.verifyCSS(rulerPage.unitOfMeasurementListOptions(rulerOptions[1].displayName), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'Unit of measurement\' dropdown', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(rulerPage.unitOfMeasurementListOptions());
+        });
+
+        it('When the user selects any option from the expanded \'Unit of measurement\' dropdown, then the dropdown should close', () => {
+            rulerPage.steps.selectOptionFromUnitOfMeasurementDropdown(rulerOptions[0].displayName);
+            rulerPage.steps.verifyDropdownIsCollapsed();
+        });
+
+        it(`'Length of ruler' label and dropdown should be displayed and by default ${rulerOptions[0].lengthOfRuler[0]} should be selected`, () => {
+            utilities.verifyInnerText(rulerPage.lengthOfRulerLabel(), 'Length of ruler');
+            utilities.verifyElementVisibilityState(rulerPage.lengthOfRulerLabel(), 'visible');
+            rulerPage.steps.verifyInnerTextOfLengthOfRulerDropdown(rulerOptions[0].lengthOfRuler[0]);
+            utilities.verifyElementVisibilityState(rulerPage.lengthOfRulerDropdown(), 'exist');
+        });
+
+        it(`When user expands the \'Length of ruler\' dropdown then list with three options ${rulerOptions[0].lengthOfRuler} should be displayed`, () => {
+            rulerPage.steps.expandLengthOfRulerDropdown();
+            rulerPage.steps.verifyLengthOfRulerDropdownListOptions(rulerOptions[0].lengthOfRuler);
+        });
+
+        it('CSS of \'Length of ruler\' label and dropdown in active state', { tags: 'css' }, () => {
+            utilities.verifyCSS(rulerPage.lengthOfRulerLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(rulerPage.lengthOfRulerDropdownListOptions(rulerOptions[0].lengthOfRuler[0]), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            });
+            utilities.verifyCSS(rulerPage.lengthOfRulerDropdownListOptions(rulerOptions[0].lengthOfRuler[1]), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of\'Length of ruler\' dropdown', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(rulerPage.lengthOfRulerDropdownListOptions());
+        });
+
+        it('When user selects an option from \'Length of ruler\' dropdown list, then dropdown list should disappear and selected option should be the active selection for the dropdown', () => {
+            rulerPage.steps.selectOptionFromLengthOfRulerDropdown(rulerOptions[0].lengthOfRuler[0]);
+            rulerPage.steps.verifyDropdownIsCollapsed();
+            rulerPage.steps.verifyInnerTextOfLengthOfRulerDropdown(rulerOptions[0].lengthOfRuler[0]);
+        });
+
+        rulerOptions.forEach((rulerOption) => {
+            it(`When user selects ${rulerOption.displayName} from 'Unit of measurement' dropdown list, then dropdown list should disappear and ${rulerOption.displayName} should be the active selection for the dropdown`, () => {
+                rulerPage.steps.expandUnitOfMeasurementDropdown();
+                rulerPage.steps.selectOptionFromUnitOfMeasurementDropdown(rulerOption.displayName);
+                rulerPage.steps.verifyDropdownIsCollapsed();
+                rulerPage.steps.verifyInnerTextOfUnitOfMeasurementDropdown(rulerOption.displayName);
+            });
+
+            it(`When ${rulerOption.displayName} is the active selection for 'Unit of measurement' dropdown, then ${rulerOption.lengthOfRuler[0]} should be the active selection for 'Length of ruler' dropdown`, () => {
+                rulerPage.steps.verifyInnerTextOfLengthOfRulerDropdown(rulerOption.lengthOfRuler[0]);
+            });
+
+            it(`When user expands the 'Length of ruler' dropdown, then a list with three options ${rulerOption.lengthOfRuler} should be displayed`, () => {
+                rulerPage.steps.expandLengthOfRulerDropdown();
+                rulerPage.steps.verifyLengthOfRulerDropdownListOptions(rulerOption.lengthOfRuler);
+            });
+
+            it(`When user selects an option from 'Length of ruler' dropdown list, then dropdown list should disappear and the selected option should be the active selection for the dropdown`, () => {
+                rulerPage.steps.selectOptionFromLengthOfRulerDropdown(rulerOption.lengthOfRuler[1]);
+                rulerPage.steps.verifyDropdownIsCollapsed();
+                rulerPage.steps.verifyInnerTextOfLengthOfRulerDropdown(rulerOption.lengthOfRuler[1]);
+            });
+        });
+
+        it(`When ${rulerOptions[3].displayName} is the active selection for \'Unit of measurement\' dropdown, then \'Display on top\' label with two options \'Centimeter\' and \'Inch\' should be displayed with their labels and radio buttons and by default \'Centimeter\' should be selected`, () => {
+            utilities.verifyInnerText(rulerPage.displayOnTopLabel(), 'Display on top');
+            utilities.verifyElementVisibilityState(rulerPage.displayOnTopLabel(), 'visible');
+            utilities.verifyElementVisibilityState(rulerPage.centimeterRadioButton(), 'exist');
+            utilities.verifyInnerText(rulerPage.centimeterLabel(), 'Centimeter');
+            utilities.verifyElementVisibilityState(rulerPage.centimeterLabel(), 'visible');
+            utilities.verifyElementVisibilityState(rulerPage.inchRadioButton(), 'exist');
+            utilities.verifyInnerText(rulerPage.inchLabel(), 'Inch');
+            utilities.verifyElementVisibilityState(rulerPage.inchLabel(), 'visible');
+            rulerPage.steps.verifyCentimeterRadioButtonIsSelected();
+        });
+
+        it('CSS of \'Display on top\' label, \'Centimeter\' and \'Inch\' labels and radio buttons', { tags: 'css' }, () => {
+            utilities.verifyCSS(rulerPage.displayOnTopLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(rulerPage.centimeterLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(rulerPage.inchLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(rulerPage.centimeterRadioButton().parents('.radio-option-checked').find('[data-name="Radio button - Selected"]'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(rulerPage.inchRadioButton().parents('.radio-option-not-checked').find('.radio-btn-deselected'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        it('Accessibility of  \'Display on top\' section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(rulerPage.displayOnTopLabel().parents('[class*="Rulerstyles__DisplayOnTopWrapper"]'));
+        });
+
+        it(`When user selects ${unitOfMeasurementOptions[4]} from \'Unit of measurement\' dropdown list, then dropdown list should disappear and ${unitOfMeasurementOptions[4]} should be the active selection for the dropdown`, () => {
+            rulerPage.steps.expandUnitOfMeasurementDropdown();
+            rulerPage.steps.selectOptionFromUnitOfMeasurementDropdown('Custom image');
+            rulerPage.steps.verifyDropdownIsCollapsed();
+            rulerPage.steps.verifyInnerTextOfUnitOfMeasurementDropdown(unitOfMeasurementOptions[4]);
+        });
+
+        it('\'Length of ruler\' label, \'Length of ruler\' dropdown and \'Allow student to flip ruler\' label with checkbox should disappear', () => {
+            utilities.verifyElementVisibilityState(rulerPage.lengthOfRulerLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(rulerPage.lengthOfRulerDropdown(), 'notExist');
+            utilities.verifyElementVisibilityState(rulerPage.allowUserToFlipRulerLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(rulerPage.allowUserToFlipRulerCheckbox(), 'notExist');
+        });
+
+        it('\'Upload\' label and \'Choose file\' button should be displayed', () => {
+            utilities.verifyInnerText(rulerPage.uploadLabel(), 'Upload');
+            utilities.verifyElementVisibilityState(rulerPage.uploadLabel(), 'visible');
+            utilities.verifyElementVisibilityState(rulerPage.uploadButton(), 'visible');
+        });
+
+        it('\'File name\' label should be displayed and by default \'No file chosen\' text should be displayed below the \'File name\' label.', () => {
+            utilities.verifyInnerText(rulerPage.fileNameLabel(), 'File name');
+            utilities.verifyElementVisibilityState(rulerPage.fileNameLabel(), 'visible');
+            utilities.verifyInnerText(rulerPage.noFileChosenLabel(), 'No file chosen');
+            utilities.verifyElementVisibilityState(rulerPage.noFileChosenLabel(), 'visible');
+        });
+
+        it('CSS of upload section', { tags: 'css' }, () => {
+            utilities.verifyCSS(rulerPage.uploadLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(rulerPage.uploadButton(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'border-bottom-color': css.color.titleContainerBorder
+            });
+            utilities.verifyCSS(rulerPage.fileNameLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(rulerPage.noFileChosenLabel(), {
+                'color': css.color.panelLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of  Upload section before uploading image', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(rulerPage.uploadLabel().parents('[ class*="CustomRulerImagestyles__BackgroundImageWrapper"]'));
+        });
+
+        it('When the user adds the image file and file upload is inprogress, file name and progress bar should be displayed below \'File name\' label. Progress bar should disappear once file is uploaded and uploaded image should be displayed', () => {
+            rulerPage.steps.uploadFile('uploads/sample.jpeg');
+            utilities.verifyElementVisibilityState(rulerPage.fileUploadProgressBar(), 'visible');
+            utilities.verifyInnerText(rulerPage.uploadedFileNameLabel(), 'sample.jpeg');
+            utilities.verifyElementVisibilityState(rulerPage.uploadedFileNameLabel(), 'visible');
+            utilities.verifyElementVisibilityState(rulerPage.uploadedImagePreview(), 'visible');
+            utilities.verifyElementVisibilityState(rulerPage.fileUploadProgressBar(), 'notExist');
+        });
+
+        it('Delete button should appear beside uploaded file\'s name', () => {
+            utilities.verifyElementVisibilityState(rulerPage.deleteImageButton(), 'visible');
+        });
+
+        it('\'Image width\' and \'Image height\' labels and input fields should be displayed and the input fields should be prefilled with the height and width of the image', () => {
+            utilities.verifyInnerText(rulerPage.imageWidthLabel(), 'Image width (px)');
+            rulerPage.steps.verifyWidthInputFieldValueInImagePreview();
+            utilities.verifyInnerText(rulerPage.imageHeightLabel(), 'Image height (px)');
+            rulerPage.steps.verifyHeightInputFieldValueInImagePreview();
+        });
+
+        it('\'Lock aspect ratio\' and \'Reset dimensions\' buttons should be displayed', () => {
+            utilities.verifyElementVisibilityState(rulerPage.lockAspectRatioButton(), 'visible');
+            utilities.verifyElementVisibilityState(rulerPage.resetDimensionsButton(), 'visible');
+        });
+
+        it('When aspect ratio is unlocked and user changes the value in width input field, the height input field should remain unchanged and the dimensions should be updated in the image popup preview section', () => {
+            rulerPage.steps.unlockAspectRatio();
+            rulerPage.steps.updateImageWidth(500);
+            rulerPage.steps.verifyUpdatedWidthOfImage(500);
+        });
+
+        it('When aspect ratio is unlocked and user changes the value in height input field, then width input field should remain unchanged and the dimensions should be updated in the image popup preview section', () => {
+            rulerPage.steps.updateImageHeight(500);
+            rulerPage.steps.verifyUpdatedHeightOfImage(500);
+            rulerPage.steps.verifyUpdatedWidthInImageWidthInputField(500);
+        });
+
+        //Failed due to https://redmine.zeuslearning.com/issues/553933
+        it('When user locks the aspect ratio button and changes the value in the width input field, the height input field should be updated accordingly to maintain the updated aspect ratio', () => {
+            rulerPage.steps.lockAspectRatio();
+            rulerPage.steps.updateImageWidth(600);
+            rulerPage.steps.verifyUpdatedHeightInImageHeightInputField(600);
+        });
+
+        it('When user selects the \'Reset dimensions\' button the height and width should reset to the original values', () => {
+            rulerPage.steps.resetDimensions();
+            rulerPage.steps.verifyWidthInputFieldValueAfterReset();
+            rulerPage.steps.verifyHeightInputFieldValueAfterReset();
+        });
+
+        it('When user clicks on \'Choose file\' button again and upload another image file, previously uploaded image file should get replaced with new image file', () => {
+            rulerPage.steps.uploadFile('uploads/sample1.jpg');
+            utilities.verifyInnerText(rulerPage.uploadedFileNameLabel(), 'sample1.jpg');
+            utilities.verifyElementVisibilityState(rulerPage.uploadedFileNameLabel(), 'visible');
+            rulerPage.steps.verifyWidthInputFieldValueInImagePreview();
+            rulerPage.steps.verifyHeightInputFieldValueInImagePreview();
+        });
+
+        it('CSS of Upload image section after uploading image', { tags: 'css' }, () => {
+            utilities.verifyCSS(rulerPage.imageWidthLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(rulerPage.imageWidthInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(rulerPage.imageHeightLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(rulerPage.imageHeightInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of Upload image section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(rulerPage.uploadLabel().parents('[ class*="CustomRulerImagestyles__BackgroundImageWrapper"]'));
+        });
+
+        it('When user clicks on the \'Delete\' button, then \'Image preview\' label and uploaded image should disappear', () => {
+            rulerPage.steps.clickOnDeleteButton();
+            utilities.verifyElementVisibilityState(rulerPage.imagePreviewLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(rulerPage.uploadedImagePreview(), 'notExist');
+        });
+    });
+
+    describe('\'Allow student to flip ruler\', \'Alternative text\', \'Rotation\', \'Opacity\' and \'Ruler visibility\' section- Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to ruler resource tool');
+            rulerPage.steps.navigateToCreateResource('ruler');
+        });
+
+        it('\'Allow student to flip ruler\' label and checkbox should be displayed and by default the checkbox should be unchecked', () => {
+            utilities.verifyTextContent(rulerPage.allowUserToFlipRulerLabel(), 'Allow student to flip ruler');
+            utilities.verifyElementVisibilityState(rulerPage.allowUserToFlipRulerLabel(), 'visible');
+            utilities.verifyElementVisibilityState(rulerPage.allowUserToFlipRulerCheckbox(), 'exist');
+            rulerPage.steps.verifyAllowUserToFlipRulerCheckboxIsUnchecked();
+        });
+
+        it('CSS of \'Allow student to flip ruler\' section', () => {
+            utilities.verifyCSS(rulerPage.allowUserToFlipRulerCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+            utilities.verifyCSS(rulerPage.allowUserToFlipRulerLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('User should be able to check \'Allow student to flip ruler\' checkbox', () => {
+            rulerPage.steps.checkAllowUserToFlipRulerCheckbox();
+        });
+
+        it('\'Alternative text\' label and input field should be displayed and  by default \'Alternative text\' input field should be empty', () => {
+            utilities.verifyInnerText(rulerPage.alternativeTextLabel(), 'Alternative text');
+            utilities.verifyElementVisibilityState(rulerPage.alternativeTextLabel(), 'visible');
+            rulerPage.steps.verifyEmptyAndVisibleAlternativeTextInput();
+        });
+
+        it('User should be able to add text in \'Alternative text\' input field', () => {
+            rulerPage.steps.enterAndVerifyAlternativeTextInInputField('Measuring tool');
+        });
+
+        it('CSS of \'Alternative text\' Section in Edit tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(rulerPage.alternativeTextLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(rulerPage.alternativeTextInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'Alternative text\' input field', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(rulerPage.alternativeTextInputField());
+        });
+
+        it('\'Rotation\' label and dropdown should be displayed and by default \'Allow rotation\' should be selected', () => {
+            rulerPage.steps.verifyDefaultRotationLabelAndDropdown();
+        });
+
+        it('When user expands \'Rotation\' dropdown then list with three options \'None\', \'Allow rotation\' and \'Allow rotation and display angle\' should be displayed', () => {
+            rulerPage.steps.expandRotationDropdown();
+            rulerPage.steps.verifyRotationDropdownOptions(rotationOptions);
+        });
+
+        it('CSS of \'Rotation\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(rulerPage.rotationLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(rulerPage.rotationDropdownListOption('Allow rotation'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            });
+            utilities.verifyCSS(rulerPage.rotationDropdownListOption('None'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'Rotation\' dropdown', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(rulerPage.rotationDropdownListOptions());
+        });
+
+        it('When user selects an option from the dropdown list, then dropdown list should disappear and selected option should be the active selection for the dropdown', () => {
+            rulerPage.steps.selectOptionFromRotationDropdown('None');
+            rulerPage.steps.verifyDropdownIsCollapsed();
+            utilities.verifyInnerText(rulerPage.rotationDropdown(), 'None');
+        });
+
+        it('\'Opacity\' label, input field and slider should be displayed and by default the slider of \'Opacity\' should be set to 40 percent', () => {
+            rulerPage.steps.verifyDefaultOpacityLabelSliderAndInputField();
+        });
+
+        it('The maximum value of \'Opacity\' slider should be 100', () => {
+            rulerPage.steps.verifyMaxOpacitySliderValue();
+        });
+
+        it('When the user changes value in the opacity input field, the slider value should also change accordingly', () => {
+            rulerPage.steps.enterInputToOpacityInputField(85);
+            rulerPage.steps.verifyOpacityInputFieldValue(85);
+            rulerPage.steps.verifyOpacitySliderValue(85);
+        });
+
+        //Failed due to https://redmine.zeuslearning.com/issues/555936
+        it('CSS of \'Opacity\' Section in Edit tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(rulerPage.opacityLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(rulerPage.opacityInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(rulerPage.opacitySlider(), {
+                'color': css.color.activeButtons,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of opacity section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(rulerPage.opacityLabel().parents('.MuiGrid-root'));
+        });
+
+        it('When the user changes the opacity slider value, value in the opacity input field should also change', () => {
+            rulerPage.steps.clickOnOpacitySlider();
+            rulerPage.steps.verifyOpacitySliderValue(50);
+            rulerPage.steps.verifyOpacityInputFieldValue(50);
+        });
+
+        //Failed due to https://redmine.zeuslearning.com/issues/556472
+        it('\'Ruler Color\' label and 6 solid color should be displayed and by default \'White\' color radio button should be selected', () => {
+            utilities.verifyInnerText(rulerPage.rulerColorLabel(), 'Ruler Color');
+            utilities.verifyElementVisibilityState(rulerPage.rulerColorLabel(), 'visible');
+            rulerPage.steps.verifyToolColorBlocksVisibility();
+            rulerPage.steps.verifyToolColorSelectedState(0);
+        });
+
+        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', () => {
+            rulerPage.steps.selectColorBlock(1);
+            rulerPage.steps.verifyToolColorSelectedState(1);
+            rulerPage.steps.verifyToolColorUnselectedState(0);
+        });
+
+        it('CSS of \'Color\' Section in Edit tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(rulerPage.rulerColorLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('Accessibility of newly selected color', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(rulerPage.toolColorBlock().eq(1).parents('.color-pallete'));
+        });
+
+        it('\'Ruler visibility\' label should be displayed', () => {
+            utilities.verifyInnerText(rulerPage.rulerVisibilityLabel(), 'Ruler visibility');
+            utilities.verifyElementVisibilityState(rulerPage.rulerVisibilityLabel(), 'visible');
+        });
+
+        it('\'Add show/hide button\' label and checkbox should be displayed and by default the checkbox should be unchecked', () => {
+            utilities.verifyElementVisibilityState(rulerPage.addShowHideButtonCheckbox(), 'exist');
+            rulerPage.steps.verifyAddShowHideButtonLabelAndCheckbox();
+        });
+
+        it('CSS of \'Ruler visibility\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(rulerPage.rulerVisibilityLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(rulerPage.addShowHideButtonLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('When user checks \'Add show/hide button\' checkbox, then \'Launch the ruler by default\' label and checkbox should be displayed and by default the checkbox should be unchecked', () => {
+            rulerPage.steps.checkAddShowHideButtonCheckbox();
+            utilities.verifyElementVisibilityState(rulerPage.launchToolByDefaultCheckbox(), 'exist');
+            rulerPage.steps.verifyLaunchToolByDefaultLabelAndCheckbox('ruler');
+        });
+
+        it('User should be able to check \'Launch the ruler by default\' checkbox', () => {
+            rulerPage.steps.checkLaunchToolByDefaultCheckbox();
+        });
+
+        it('CSS of \'Ruler visibility\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(rulerPage.launchToolByDefaultLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(rulerPage.addShowHideButtonCheckbox().parents('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(rulerPage.launchToolByDefaultCheckbox().parents('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Ruler visibility\' section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(rulerPage.addShowHideButtonCheckbox().parents('[class*="Rulerstyles__RulerVisibilityWrapper"]'));
+        });
+    });
+});