itemengine-cypress-automation 1.0.78 → 1.0.79

package/cypress/e2e/ILC/Protractor/protractorEditTabBasicsSection.js

@@ -0,0 +1,320 @@
+import { protractorPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const angleTypeOptions = ['Acute', 'Obtuse', 'Both acute and obtuse'];
+const rotationOptions = ['None', 'Allow rotation']
+
+describe('Create Item page - Protractor : Edit Tab', () => {
+    describe('\'Angle type\' section - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to protractor resource tool');
+            protractorPage.steps.navigateToCreateResource('protractor');
+        });
+
+        it(`'Angle type' label and dropdown should be displayed and by default ${angleTypeOptions[2]} should be selected`, () => {
+            utilities.verifyInnerText(protractorPage.angleTypeLabel(), 'Angle type');
+            utilities.verifyElementVisibilityState(protractorPage.angleTypeLabel(), 'visible');
+            utilities.verifyInnerText(protractorPage.angleTypeDropdown(), angleTypeOptions[2]);
+            utilities.verifyElementVisibilityState(protractorPage.angleTypeDropdown(), 'exist');
+        });
+
+        it(`When user expands the 'Angle type' dropdown then list with three options ${angleTypeOptions} should be displayed`, () => {
+            protractorPage.steps.expandAngleTypeDropdown();
+            protractorPage.steps.verifyAngleTypeDropdownListOptions(angleTypeOptions);
+        });
+
+        it('CSS of \'Angle type\' label and dropdown in active state', { tags: 'css' }, () => {
+            utilities.verifyCSS(protractorPage.angleTypeLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(protractorPage.angleTypeDropdownOptionsList(angleTypeOptions[2]), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            });
+            utilities.verifyCSS(protractorPage.angleTypeDropdownOptionsList(angleTypeOptions[0]), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'Angle type\' dropdown', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(protractorPage.angleTypeDropdownOptionsList());
+        });
+
+        it('When the user selects any option from the dropdown, then the dropdown should close', () => {
+            protractorPage.steps.selectOptionFromAngleTypeDropdown(angleTypeOptions[0]);
+            protractorPage.steps.verifyDropdownIsCollapsed();
+        });
+    });
+
+    describe('\'Allow student to resize protractor\' section - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to protractor resource tool');
+            protractorPage.steps.navigateToCreateResource('protractor');
+        });
+
+        it('\'Allow student to resize protractor\' label and checkbox should be displayed and by default the checkbox should be checked', () => {
+            utilities.verifyTextContent(protractorPage.allowStudentToResizeProtractorLabel(), 'Allow student to resize protractor');
+            utilities.verifyElementVisibilityState(protractorPage.allowStudentToResizeProtractorLabel(), 'visible');
+            utilities.verifyElementVisibilityState(protractorPage.allowStudentToResizeProtractorCheckbox(), 'exist');
+            protractorPage.steps.verifyAllowStudentToResizeProtractorCheckboxChecked();
+        });
+
+        it('CSS of \'Allow student to resize protractor\' label and checkbox', () => {
+            utilities.verifyCSS(protractorPage.allowStudentToResizeProtractorCheckbox().parents('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(protractorPage.allowStudentToResizeProtractorLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('User should be able to uncheck \'Allow student to resize protractor\' checkbox', () => {
+            protractorPage.steps.uncheckAllowStudentToResizeProtractorCheckbox();
+        });
+
+        it('CSS of unchecked \'Allow student to resize protractor\' checkbox', { tags: 'css' }, () => {
+            utilities.verifyCSS(protractorPage.allowStudentToResizeProtractorCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+    });
+
+    describe('\'Alternative text\' and \'Rotation\' sections - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to protractor resource tool');
+            protractorPage.steps.navigateToCreateResource('protractor');
+        });
+
+        it('\'Alternative text\' label and input field should be displayed and  by default \'Alternative text\' input field should be empty', () => {
+            utilities.verifyInnerText(protractorPage.alternativeTextLabel(), 'Alternative text');
+            utilities.verifyElementVisibilityState(protractorPage.alternativeTextLabel(), 'visible');
+            protractorPage.steps.verifyEmptyAndVisibleAlternativeTextInput();
+        });
+
+        it('User should be able to enter text in \'Alternative text\' input field', () => {
+            protractorPage.steps.enterAndVerifyAlternativeTextInInputField('Measuring tool');
+        });
+
+        it('CSS of \'Alternative text\' Section in Edit tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(protractorPage.alternativeTextLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(protractorPage.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(protractorPage.alternativeTextInputField());
+        });
+
+        it('\'Rotation\' label and dropdown should be displayed and by default \'Allow rotation\' should be selected', () => {
+            protractorPage.steps.verifyDefaultRotationLabelAndDropdown();
+        });
+
+        it(`When user expands \'Rotation\' dropdown then list with two options ${rotationOptions} should be displayed`, () => {
+            protractorPage.steps.expandRotationDropdown();
+            protractorPage.steps.verifyRotationDropdownOptions(rotationOptions);
+        });
+
+        it('CSS of \'Rotation\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(protractorPage.rotationLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(protractorPage.rotationDropdownListOptions('Allow rotation'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            });
+            utilities.verifyCSS(protractorPage.rotationDropdownListOptions('None'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'Rotation\' dropdown', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(protractorPage.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', () => {
+            protractorPage.steps.selectOptionFromRotationDropdown('None');
+            protractorPage.steps.verifyDropdownIsCollapsed();
+            utilities.verifyInnerText(protractorPage.rotationDropdown(), 'None');
+        });
+    });
+
+    describe('\'Opacity\' and \'Protractor color\' sections - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to protractor resource tool');
+            protractorPage.steps.navigateToCreateResource('protractor');
+        });
+
+        it('\'Opacity\' label, input field and slider should be displayed and by default the slider and input field of \'Opacity\' should be set to 40 percent', () => {
+            protractorPage.steps.verifyDefaultOpacityLabelSliderAndInputField();
+        });
+
+        it('The maximum value of \'Opacity\' slider should be 100', () => {
+            protractorPage.steps.verifyMaxOpacitySliderValue();
+        });
+
+        it('When the user changes value in the opacity input field, the slider value should also change accordingly', () => {
+            protractorPage.steps.enterInputToOpacityInputField(85);
+            protractorPage.steps.verifyOpacityInputFieldValue(85);
+            protractorPage.steps.verifyOpacitySliderValue(85);
+        });
+
+        it('CSS of \'Opacity\' Section in Edit tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(protractorPage.opacityLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(protractorPage.opacityInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(protractorPage.opacitySlider(), {
+                'color': css.color.activeButtons,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of opacity section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(protractorPage.opacityLabel().parents('.MuiGrid-root'));
+        });
+
+        it('When the user changes the opacity slider value, value in the opacity input field should also change', () => {
+            protractorPage.steps.clickOnOpacitySlider();
+            protractorPage.steps.verifyOpacitySliderValue(50);
+            protractorPage.steps.verifyOpacityInputFieldValue(50);
+        });
+
+        //Failed due to https://redmine.zeuslearning.com/issues/553920
+        it('\'Protractor Color\' label and 6 solid color should be displayed and by default \'White\' color radio button should be selected', () => {
+            utilities.verifyInnerText(protractorPage.protractorColorLabel(), 'Protractor color');
+            utilities.verifyElementVisibilityState(protractorPage.protractorColorLabel(), 'visible');
+            utilities.verifyElementCount(protractorPage.toolColorBlock(), 6);
+            protractorPage.steps.verifyToolColorBlocksVisibility();
+            protractorPage.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', () => {
+            protractorPage.steps.selectColorBlock(1);
+            protractorPage.steps.verifyToolColorSelectedState(1);
+            protractorPage.steps.verifyToolColorUnselectedState(0);
+        });
+
+        it('CSS of \'Color\' Section in Edit tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(protractorPage.protractorColorLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('Accessibility of newly selected color', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(protractorPage.protractorColorLabel().parents('[class*="Protractorstyle__ProtractorColorWrapper"] '));
+        });
+    });
+
+    describe('\'Protractor visibility\' section - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to protractor resource tool');
+            protractorPage.steps.navigateToCreateResource('protractor');
+        });
+
+        it('\'Protractor visibility\' label should be displayed', () => {
+            utilities.verifyInnerText(protractorPage.protractorVisibilityLabel(), 'Protractor visibility');
+            utilities.verifyElementVisibilityState(protractorPage.protractorVisibilityLabel(), 'visible');
+        });
+
+        it('\'Add show/hide button\' label and checkbox should be displayed and by default the checkbox should be unchecked', () => {
+            protractorPage.steps.verifyAddShowHideButtonLabelAndCheckbox();
+        });
+
+        it('CSS of \'Protractor visibility\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(protractorPage.protractorVisibilityLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(protractorPage.addShowHideButtonLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(protractorPage.addShowHideButtonCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+            utilities.verifyCSS(protractorPage.displayPointerForAngleMeasurementLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(protractorPage.displayPointerForAngleMeasurementCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        it('When user checks \'Add show/hide button\' checkbox, then \'Launch the Protractor by default\' label and checkbox should be displayed and by default the checkbox should be unchecked', () => {
+            protractorPage.steps.checkAddShowHideButtonCheckbox();
+            protractorPage.steps.verifyLaunchToolByDefaultLabelAndCheckbox('protractor');
+        });
+
+        it('User should be able to check \'Launch the Protractor by default\' checkbox', () => {
+            protractorPage.steps.checkLaunchToolByDefaultCheckbox();
+        });
+
+        it('\'Display pointer for angle measurement\' label and checkbox should be displayed and by default the checkbox should be unchecked', () => {
+            utilities.verifyInnerText(protractorPage.displayPointerForAngleMeasurementLabel(), 'Display pointer for angle measurement');
+            utilities.verifyElementVisibilityState(protractorPage.displayPointerForAngleMeasurementLabel(), 'visible');
+            utilities.verifyElementVisibilityState(protractorPage.displayPointerForAngleMeasurementCheckbox(), 'exist');
+            protractorPage.steps.verifyDisplayPointerForAngleMeasurementCheckboxUnchecked();
+        });
+
+        it('User should be able to check \'Launch the Protractor by default\' checkbox', () => {
+            protractorPage.steps.checkDisplayPointerForAngleMeasurementCheckbox();
+        });
+
+        it('CSS of \'Protractor visibility\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(protractorPage.launchToolByDefaultLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(protractorPage.addShowHideButtonCheckbox().parents('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(protractorPage.launchToolByDefaultCheckbox().parents('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(protractorPage.displayPointerForAngleMeasurementCheckbox().parents('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+        });
+    });
+});

package/cypress/e2e/ILC/Protractor/protractorEditTabFunctionality.js

@@ -0,0 +1,225 @@
+import { protractorPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const angleTypeOptions = ['Acute', 'Obtuse', 'Both acute and obtuse'];
+
+describe('Protractor Tool: Preview Tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('\'Angle type\' and \'Allow student to resize protractor\' sections - Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to protractor resource tool');
+            protractorPage.steps.navigateToCreateResource('protractor');
+        });
+
+        it(`When ${angleTypeOptions[2]} is selected for \'Angle type\' dropdown by default, then switching to the preview tab should display a protractor with both acute and obtuse degree measurements`, () => {
+            protractorPage.steps.switchToEditTab();
+            utilities.verifyInnerText(protractorPage.angleTypeDropdown(), 'Both acute and obtuse');
+            protractorPage.steps.switchToPreviewTab();
+            protractorPage.steps.verifyProtractorVisibleInPreviewTab();
+            protractorPage.steps.verifyAngleTypeIsBothAcuteAndObtuseInPreviewTab();
+        });
+
+        it('When the user selects Acute option from the \'Angle type\' dropdown in the edit tab, then the protractor angle should change to acute in preview tab', () => {
+            protractorPage.steps.switchToEditTab();
+            protractorPage.steps.expandAngleTypeDropdown();
+            protractorPage.steps.selectOptionFromAngleTypeDropdown('Acute');
+            protractorPage.steps.switchToPreviewTab();
+            protractorPage.steps.verifyProtractorVisibleInPreviewTab();
+            protractorPage.steps.verifyAcuteAngleTypeInPreviewTab();
+        });
+
+        it('When the user selects Obtuse option from the \'Angle type\' dropdown in the edit tab, then the protractor angle should change to obtuse in preview tab', () => {
+            protractorPage.steps.switchToEditTab();
+            protractorPage.steps.expandAngleTypeDropdown();
+            protractorPage.steps.selectOptionFromAngleTypeDropdown('Obtuse');
+            protractorPage.steps.switchToPreviewTab();
+            protractorPage.steps.verifyProtractorVisibleInPreviewTab();
+            protractorPage.steps.verifyAngleTypeIsObtuseInPreviewTab();
+        });
+
+        it('When the \'Allow user to resize protractor\' checkbox is checked then a resize button with icon should be displayed on the protractor and the protractor should be displayed in default size', () => {
+            protractorPage.steps.verifyPreviewTabProtractorResizeButtonVisibility('Small');
+            protractorPage.steps.verifyProtractorSizeInPreviewTab('Small');
+        });
+
+        it('When user clicks on \'Resize\' button, then protractor should be enlarged', () => {
+            protractorPage.steps.clickOnResizeButtonInPreviewTab()
+            protractorPage.steps.verifyPreviewTabProtractorResizeButtonVisibility('Large');
+            protractorPage.steps.verifyProtractorSizeInPreviewTab('Large');
+            protractorPage.steps.verifyProtractorVisibleInPreviewTab();
+        });
+
+        it('When user unchecks \'Allow student to resize protractor\' checkbox in edit tab, then resize button should not be displayed and protractor should be displayed in default state in preview tab', () => {
+            protractorPage.steps.switchToEditTab();
+            protractorPage.steps.uncheckAllowStudentToResizeProtractorCheckbox();
+            protractorPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(protractorPage.protractorResizeButtonPreviewTab(), 'notExist');
+            protractorPage.steps.verifyProtractorSizeInPreviewTab('Small');
+        });
+    });
+
+    describe('\'Alternative text\' and \'Rotation\' sections - Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to protractor resource tool');
+            protractorPage.steps.navigateToCreateResource('protractor');
+        });
+
+        it('When user enters text in the \'Alternative text\' input field, then alternative text should be displayed in the \'Preview tab\'', () => {
+            protractorPage.steps.switchToEditTab();
+            protractorPage.steps.enterAndVerifyAlternativeTextInInputField('Measuring tool');
+            protractorPage.steps.switchToPreviewTab();
+            protractorPage.steps.verifyProtractorVisibleInPreviewTab();
+            protractorPage.steps.verifyAlternativeTextInPreviewTab('Measuring tool');
+        });
+
+        it('When user clears text in the \'Alternative text\' input field, then alternative text should not be displayed in the \'Preview tab\'', () => {
+            protractorPage.steps.switchToEditTab();
+            protractorPage.steps.clearAlternativeTextInputFieldText();
+            protractorPage.steps.switchToPreviewTab();
+            protractorPage.steps.verifyProtractorVisibleInPreviewTab();
+            protractorPage.steps.verifyNoAlternativeTextPresentInPreview();
+        });
+
+        it('When \'Allow rotation\' is selected for \'Rotation\' dropdown, then rotate icon should be displayed above protractor in preview tab ', () => {
+            protractorPage.steps.verifyRotationButtonVisibleInPreviewTab();
+            protractorPage.steps.verifyProtractorVisibleInPreviewTab();
+        });
+
+        it('CSS of rotate icon in preview tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(protractorPage.rotationButtonInPreviewTab(), {
+                'background-color': css.color.transparent
+            })
+            protractorPage.rotationButtonInPreviewTab()
+                .verifyPseudoClassBeforeProperty('color', css.color.secondaryBtn);
+        });
+
+        it('Accessibility of rotate icon in preview tab', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(protractorPage.rotationButtonInPreviewTab());
+        });
+
+        //Comment : Unable to rotate in cypress, added to manual sheet
+        it.skip('User should be able to rotate the protractor using rotate icon', () => {
+        });
+
+        it('When user selects \'None\' for \'Rotation\' dropdown, then rotate icon should not be displayed above protractor in preview tab', () => {
+            protractorPage.steps.switchToEditTab();
+            protractorPage.steps.expandRotationDropdown();
+            protractorPage.steps.selectOptionFromRotationDropdown('None');
+            protractorPage.steps.switchToPreviewTab();
+            protractorPage.steps.verifyRotationButtonNotVisibleInPreviewTab();
+            protractorPage.steps.verifyProtractorVisibleInPreviewTab();
+        });
+    });
+
+    //Failed due to https://redmine.zeuslearning.com/issues/553920
+    describe('\'Opacity\' and \'Protractor color\' sections - Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to protractor resource tool');
+            protractorPage.steps.navigateToCreateResource('protractor');
+        });
+
+        it('When the opacity value is set to 40 percent by default, then the opacity of the protractor should be set to 40 percent in the preview tab', () => {
+            protractorPage.steps.switchToPreviewTab();
+            protractorPage.steps.verifyPreviewTabColorAndOpacityOfProtractor(0, 0.4);
+            protractorPage.steps.verifyProtractorVisibleInPreviewTab();
+        });
+
+        it('When the user changes the opacity value from the opacity slider in the edit tab, then the opacity of protractor should also change accordingly in the preview tab', () => {
+            protractorPage.steps.switchToEditTab();
+            protractorPage.steps.clickOnOpacitySlider();
+            protractorPage.steps.switchToPreviewTab();
+            protractorPage.steps.verifyPreviewTabColorAndOpacityOfProtractor(0, 0.5);
+            protractorPage.steps.verifyProtractorVisibleInPreviewTab();
+        });
+
+        it('When the user changes the opacity value from the opacity input field in the edit tab, then the opacity of protractor should also change accordingly in the preview tab', () => {
+            protractorPage.steps.switchToEditTab();
+            protractorPage.steps.enterInputToOpacityInputField(85);
+            protractorPage.steps.switchToPreviewTab();
+            protractorPage.steps.verifyPreviewTabColorAndOpacityOfProtractor(0, 0.85);
+            protractorPage.steps.verifyProtractorVisibleInPreviewTab();
+        });
+
+        it('When white color block is selected in the color section, then the color of the protractor should be set to white in the preview tab', () => {
+            protractorPage.steps.verifyPreviewTabColorAndOpacityOfProtractor(0, 0.85);
+            protractorPage.steps.verifyProtractorVisibleInPreviewTab();
+        });
+
+        it('When the user changes the color of the protractor in the edit tab, then the color of the protractor should also change in the preview tab', () => {
+            protractorPage.steps.switchToEditTab();
+            protractorPage.steps.selectColorBlock(2);
+            protractorPage.steps.switchToPreviewTab();
+            protractorPage.steps.verifyPreviewTabColorAndOpacityOfProtractor(2, 0.85);
+            protractorPage.steps.verifyProtractorVisibleInPreviewTab();
+        });
+    });
+
+    describe('\'Protractor visibility\' section - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to protractor resource tool');
+            protractorPage.steps.navigateToCreateResource('protractor');
+        });
+
+        it('When \'Add show/hide button\' checkbox is unchecked in the edit tab, then \'Show protractor\' button should not be displayed in preview tab', () => {
+            protractorPage.steps.switchToPreviewTab();
+            protractorPage.steps.verifyPreviewTabProtractorVisibilityButtonDoesNotExist();
+        });
+
+        it('When user checks \'Add show/hide button\' checkbox in the edit tab, then \'Show protractor\' button should be displayed and the protractor should not be displayed in preview tab', () => {
+            protractorPage.steps.switchToEditTab();
+            protractorPage.steps.checkAddShowHideButtonCheckbox();
+            protractorPage.steps.switchToPreviewTab();
+            protractorPage.steps.verifyPreviewTabProtractorVisibilityButtonLabel('Show');
+            protractorPage.steps.verifyProtractorNotExistInPreviewTab();
+        });
+
+        it('When user clicks on \'Show protractor\' button, protractor should be displayed and \'Show protractor\' button should change to \'Hide button\' ', () => {
+            protractorPage.steps.clickOnProtractorVisibilityButton();
+            protractorPage.steps.verifyPreviewTabProtractorVisibilityButtonLabel('Hide');
+            protractorPage.steps.verifyProtractorVisibleInPreviewTab();
+        });
+
+        it('If the user selects the \'Launch protractor by default\' checkbox in the edit tab, then \'Hide protractor\' button should become visible, and the protractor should be displayed by default in the preview tab', () => {
+            protractorPage.steps.switchToEditTab();
+            protractorPage.steps.checkLaunchToolByDefaultCheckbox();
+            protractorPage.steps.switchToPreviewTab();
+            protractorPage.steps.verifyPreviewTabProtractorVisibilityButtonLabel('Hide');
+            protractorPage.steps.verifyProtractorVisibleInPreviewTab();
+        });
+
+        it('When the user selects \'Hide protractor\' button then protractor should not be displayed and the button should change to \'Show protractor\'', () => {
+            protractorPage.steps.clickOnProtractorVisibilityButton();
+            protractorPage.steps.verifyPreviewTabProtractorVisibilityButtonLabel('Show');
+            protractorPage.steps.verifyProtractorNotExistInPreviewTab();
+        });
+
+        it('When \'Display pointer for angle measurement\' checkbox is unchecked, then \'Angle measurement pointer\'  and \'Angle measurement pointer visibility\' button should not be displayed', () => {
+            protractorPage.steps.clickOnProtractorVisibilityButton();
+            protractorPage.steps.verifyPreviewTabAngleMeasurementPointerDoesNotExist();
+            protractorPage.steps.verifyProtractorVisibleInPreviewTab();
+        });
+
+        it('When user checks \'Display pointer for angle measurement\' checkbox in edit tab, then \'Angle measurement pointer\' button and \'Angle measurement pointer visibility\' button should be displayed in preview tab ', () => {
+            protractorPage.steps.switchToEditTab();
+            protractorPage.steps.checkDisplayPointerForAngleMeasurementCheckbox();
+            protractorPage.steps.switchToPreviewTab();
+            protractorPage.steps.verifyPreviewTabAngleMeasurementPointerVisibility('Show');
+            protractorPage.steps.verifyProtractorVisibleInPreviewTab();
+        });
+
+        it('When user clicks \'Angle measurement pointer visibility\' button, then \'Angle measurement pointer\' button should not be displayed', () => {
+            protractorPage.steps.clickOnAngleMeasurementPointerShowHideButtonButton();
+            protractorPage.steps.verifyPreviewTabAngleMeasurementPointerVisibility('Hide');
+            protractorPage.steps.verifyProtractorVisibleInPreviewTab();
+        });
+    });
+});

package/cypress/e2e/ILC/Protractor/protractorHeaderFile.js

@@ -0,0 +1,79 @@
+import { protractorPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+
+describe('Create question page - Protractor: Header section and saving resource tool', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Header section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Protractor resource tool');
+            protractorPage.steps.navigateToCreateResource('protractor');
+        });
+
+        protractorPage.tests.verifyCreateQuestionPageQuestionTypeHeader('Protractor');
+    });
+
+    describe('Tabs section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Protractor resource tool');
+            protractorPage.steps.navigateToCreateResource('protractor');
+        });
+
+        protractorPage.tests.verifyTabsSection();
+    });
+
+    describe('Cancel button', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Protractor resource tool');
+            protractorPage.steps.navigateToCreateResource('protractor');
+        });
+
+        it('When user has made no edits and clicks on Cancel button, the user should be directed back to the \'Select a Question\' page', () => {
+            protractorPage.steps.clickOnCancelButton();
+            utilities.verifyElementVisibilityState(protractorPage.selectAQuestionHeaderText(), 'visible');
+            utilities.verifyElementVisibilityState(protractorPage.questionTypeOptionTitle(), 'visible');
+        });
+
+        it('When user has made some edits/changes and clicks on Cancel button, a popup should be displayed', () => {
+            protractorPage.steps.selectResourceType('protractor');
+            protractorPage.steps.enterInputToOpacityInputField(30);
+            protractorPage.steps.clickOnCancelButton();
+            utilities.verifyElementVisibilityState(protractorPage.dialogBox(), 'visible');
+        });
+
+        protractorPage.tests.verifyContentsOfLeavePagePopupWithCSSAnda11y();
+
+        it(`Clicking on \'No, I'd like to go back\' button should close the popup and user should remain on the edit interface of the question`, () => {
+            protractorPage.steps.clickOnRejectButtonInDialogBox();
+            protractorPage.steps.verifyEditTabSelectedState();
+            protractorPage.steps.verifyOpacityInputFieldValue(30);
+        });
+
+        it(`Clicking on \'Yes, I want to leave this page\' button should discard all changes and direct the user to the \'Select a question\' page.`, () => {
+            protractorPage.steps.clickOnCancelButton();
+            protractorPage.steps.clickOnAcceptButtonInDialogBox();
+            utilities.verifyElementVisibilityState(protractorPage.selectAQuestionHeaderText(), 'visible');
+            utilities.verifyElementVisibilityState(protractorPage.questionTypeOptionTitle(), 'visible');
+        });
+    });
+
+    describe('Save button', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Protractor resource tool');
+            protractorPage.steps.navigateToCreateResource('protractor');
+        });
+
+        it('When user clicks on Save button, then the resource tool should get saved and a snackbar with text \'Saved successfully!\' should be displayed', () => {
+            protractorPage.steps.saveAQuestionAndVerifySnackbar();
+        });
+
+        protractorPage.tests.verifySavedSuccessfullySnackbarCSSAndA11y();
+    });
+});