itemengine-cypress-automation 1.0.200-23rdMayUpdates-264dc55.0 → 1.0.201-28thMayRepoUpdate-e720349.0

package/cypress/e2e/ILC/FillInTheGapsTextNew/studentViewSettings.js

@@ -16,6 +16,8 @@ describe('Create Item page - Fill in the gaps with text: Student view settings',
         });
 
         fillInTheGapsTextPage.tests.verifySpellCheckEditTabContents();
+
+        fillInTheGapsTextPage.tests.verifyAllowStudentsToCheckAnswerNotExist();
     });
 
     describe('Student view settings : Spell check - Preview tab functionality', () => {
@@ -29,7 +31,7 @@ describe('Create Item page - Fill in the gaps with text: Student view settings',
         fillInTheGapsTextPage.tests.verifySpellCheckFunctionalityPreviewTab();
     });
 
-    describe('Allow students to check answer: Edit tab', () => {
+    /*describe('Allow students to check answer: Edit tab', () => {
         abortEarlySetup();
         before(() => {
             fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
@@ -122,5 +124,5 @@ describe('Create Item page - Fill in the gaps with text: Student view settings',
             fillInTheGapsTextPage.steps.checkAnswer();
             fillInTheGapsTextPage.steps.verifyCheckAnswerButtonEnabled();
         });
-    });
+    });*/
 });

package/cypress/e2e/ILC/FillInTheGapsTextNew/styleAndLayoutCustomization.js

@@ -0,0 +1,336 @@
+import { dialogBoxBase, fillInTheGapsTextPage } from "../../../pages";
+import { colorPopupComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const borderStyles = ["Dashed", "Dotted", "Solid", "None"]
+describe('Create Item page - Fill in the gaps with text: Style and layout customization', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Style and layout customization accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsTextPage.tests.verifyStyleAndLayoutCustomizationAccordionProperties();
+    });
+
+    describe('Style and layout customization accordion contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsTextPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('"Text container" label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsTextPage.componentContainerLabel(), 'Text container');
+        });
+
+        fillInTheGapsTextPage.tests.verifyFillColorSectionContents();
+
+        fillInTheGapsTextPage.tests.verifyBorderColorSectionContents();
+
+        fillInTheGapsTextPage.tests.verifyBorderStyleSectionContents('Solid');
+
+        fillInTheGapsTextPage.tests.verifyFillColorTooltips();
+
+        fillInTheGapsTextPage.tests.verifyBorderColorTooltips();
+        
+        fillInTheGapsTextPage.tests.verifyStyleAndLayoutCustomizationAccordionContentsCSSAndA11y('Solid');
+    });
+
+    describe('Fill color - Edit tab', () => {
+        const modifiedColor = 'rgb(122, 61, 61)'
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsTextPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the default color block is in selected state in the "Fill color" section, then the background color of the text containers in the question input field should be the default selected color', () => {
+            fillInTheGapsTextPage.steps.verifyResponseAreaFillColor(0, css.color.optionsBg);
+            fillInTheGapsTextPage.steps.verifyResponseAreaFillColor(1, css.color.optionsBg);
+        });
+
+        it('When the user selects the "None" color block, it should get in selected state and the no background color should be present for the text containers in the question input field', () => {
+            fillInTheGapsTextPage.steps.selectColorBlock(1);
+            fillInTheGapsTextPage.steps.verifyResponseAreaFillColor(0, css.color.transparent);
+            fillInTheGapsTextPage.steps.verifyResponseAreaFillColor(1, css.color.transparent);
+        });
+
+        it('When the user clicks on the "Edit color" button, modifies color for the selected color block, then the background color of the text containers in the question input field should be the modified selected color', () => {
+            fillInTheGapsTextPage.steps.editColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsTextPage.steps.verifyResponseAreaFillColor(0, modifiedColor);
+            fillInTheGapsTextPage.steps.verifyResponseAreaFillColor(1, modifiedColor);
+        });
+
+        it('When the adds a new text container, then the background color of the newly added text container should be the modified selected color', () => {
+            fillInTheGapsTextPage.steps.addResponseArea();
+            fillInTheGapsTextPage.steps.verifyResponseAreaFillColor(0, modifiedColor);
+            fillInTheGapsTextPage.steps.verifyResponseAreaFillColor(1, modifiedColor);
+            fillInTheGapsTextPage.steps.verifyResponseAreaFillColor(2, modifiedColor);
+        });
+    });
+
+    describe('Fill color - Preview tab', () => {
+        const modifiedColor = 'rgb(122, 61, 61)'
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsTextPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+        });
+
+        it('When the default color block is in selected state in the "Fill color" section, then the background color of the text containers in the preview tab should be the default selected color', () => {
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldFillColor(0, css.color.optionsBg);
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldFillColor(1, css.color.optionsBg);
+        });
+
+        it('When the user selects the "None" color block, it should get in selected state and the no background color should be present for the text containers in the preview tab', () => {
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.steps.selectColorBlock(1);
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldFillColor(0, css.color.transparent);
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldFillColor(1, css.color.transparent);
+        });
+
+        it('When the user clicks on the "Edit color" button, modifies color for the selected color block, then the color block should get updated accordingly', () => {
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.steps.editColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldFillColor(0, modifiedColor);
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldFillColor(1, modifiedColor);
+        });
+
+        it('The background color of the text containers in the preview tab should be the modified selected color', () => {
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.steps.addResponseArea();
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldFillColor(0, modifiedColor);
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldFillColor(1, modifiedColor);
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldFillColor(2, modifiedColor);
+        });
+    });
+
+    describe('Border color - Edit tab', () => {
+        const modifiedColor = 'rgb(121, 61, 61)'
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsTextPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the default color block is in selected state in the "Fill color" section, then the background color of the text containers in the question input field should be the default selected color', () => {
+            fillInTheGapsTextPage.steps.verifyResponseAreaBorderColor(0, `1px solid ${css.color.activeComponentBorder}`);
+            fillInTheGapsTextPage.steps.verifyResponseAreaBorderColor(1, `1px solid ${css.color.activeComponentBorder}`);
+        });
+
+        it('When the user selects the "None" color block, it should get in selected state and the no background color should be present for the text containers in the question input field', () => {
+            fillInTheGapsTextPage.steps.selectColorBlock(3);
+            fillInTheGapsTextPage.steps.verifyResponseAreaBorderColor(0, `1px solid ${css.color.transparent}`);
+            fillInTheGapsTextPage.steps.verifyResponseAreaBorderColor(1, `1px solid ${css.color.transparent}`);
+        });
+
+        it('When the user clicks on the "Edit color" button, modifies color for the selected color block, then the background color of the text containers in the question input field should be the modified selected color', () => {
+            fillInTheGapsTextPage.steps.editColor(1);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsTextPage.steps.verifyResponseAreaBorderColor(0, `1px solid ${modifiedColor}`);
+            fillInTheGapsTextPage.steps.verifyResponseAreaBorderColor(1, `1px solid ${modifiedColor}`);
+        });
+
+        it('When the adds a new text container, then the background color of the newly added text container should be the modified selected color', () => {
+            fillInTheGapsTextPage.steps.addResponseArea();
+            fillInTheGapsTextPage.steps.verifyResponseAreaBorderColor(0, `1px solid ${modifiedColor}`);
+            fillInTheGapsTextPage.steps.verifyResponseAreaBorderColor(1, `1px solid ${modifiedColor}`);
+            fillInTheGapsTextPage.steps.verifyResponseAreaBorderColor(2, `1px solid ${modifiedColor}`);
+        });
+    });
+
+    describe('Border color - Preview tab', () => {
+        const modifiedColor = 'rgb(121, 61, 61)'
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsTextPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+        });
+
+        it('When the default color block is in selected state in the "Fill color" section, then the background color of the text containers in the preview tab should be the default selected color', () => {
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldBorderColor(0, `1px solid ${css.color.activeComponentBorder}`);
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldBorderColor(1, `1px solid ${css.color.activeComponentBorder}`);
+        });
+
+        it('When the user selects the "None" color block, it should get in selected state and the no background color should be present for the text containers in the preview tab', () => {
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.steps.selectColorBlock(3);
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldBorderColor(0, `0px none ${css.color.text}`);
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldBorderColor(1, `0px none ${css.color.text}`);
+        });
+
+        it('When the user clicks on the "Edit color" button, modifies color for the selected color block, then the color block should get updated accordingly', () => {
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.steps.editColor(1);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldBorderColor(0, `1px solid ${modifiedColor}`);
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldBorderColor(1, `1px solid ${modifiedColor}`);
+        });
+
+        it('The background color of the text containers in the preview tab should be the modified selected color', () => {
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.steps.addResponseArea();
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldBorderColor(0, `1px solid ${modifiedColor}`);
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldBorderColor(1, `1px solid ${modifiedColor}`);
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldBorderColor(2, `1px solid ${modifiedColor}`);
+        });
+    });
+
+    describe('Color popup functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsTextPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the user clicks on the \'Edit color\' present in an \'Text color\' popup, then a select color popup should be displayed', () => {
+            fillInTheGapsTextPage.steps.editColor(0);
+            colorPopupComponent.steps.verifyColorPopupIsDisplayed();
+        });
+
+        colorPopupComponent.tests.verifyColorPopupSelectColorTitle();
+
+        colorPopupComponent.tests.verifySaturationAndOpacityGradientPalette('rgb(255, 255, 255)');
+
+        colorPopupComponent.tests.verifyColorHuePaletteAndHexInputField('rgb(255, 0, 0)', '#ffffff');
+
+        colorPopupComponent.tests.verifyColorPopupFunctionality();
+    });
+
+    describe('Color popup - Updating the selected color', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsTextPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the user moves the color picker in the color saturation palette, color in the selected color block and the hex code should change, color in the hue color palette and the opacity value should not change', () => {
+            fillInTheGapsTextPage.steps.editColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(121, 61, 61)');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(122, 62, 62)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHexValue('#793d3d');
+            colorPopupComponent.steps.verifyOpacityGradientPaletteColor('rgb(122, 62, 62)');
+        });
+
+        it('When the user moves the color picker in the color hue palette, color in the selected color block, the hex code and the saturation color palette should change and the opacity value should not change', () => {
+            colorPopupComponent.steps.clickInColorHuePalette();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(61, 121, 121)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(0, 255, 255)');
+            colorPopupComponent.steps.verifyHexValue('#3d7979');
+            colorPopupComponent.steps.verifyOpacityGradientPaletteColor('rgb(62, 122, 122)');
+        });
+
+        it('When the user changes the color using hex code, the color in color saturation palette and color hue palette should change and the opacity value should not change', () => {
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.verifyHexValue('#ff0000');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyOpacityGradientPaletteColor('rgb(255, 0, 0)');
+        });
+    });
+
+    describe('Color popup - \'Cancel\' and \'Ok\' buttons', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsTextPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the user modifies the selected color in the color popup and clicks on \'Cancel\' button, then the popup should close, the color block should not change and the modifications in the color popup should not persist', () => {
+            fillInTheGapsTextPage.steps.editColor(0);
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.clickOnOpacityGradientHuePalette();
+            colorPopupComponent.steps.clickOnCancelButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            colorPopupComponent.steps.verifyColorBlockInOptionAccordion(0, 'rgb(245, 248, 255)');
+        });
+
+        it('When the user modifies the selected color in the color popup and clicks on \'Ok\' button, then the popup should close, the color block should change to the new selected color and the modifications in the color popup should persist', () => {
+            cy.log('Pre-step: clicking on the edit color button')
+            fillInTheGapsTextPage.steps.editColor(0);
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.clickOnOpacityGradientHuePalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            colorPopupComponent.steps.verifyColorBlockInOptionAccordion(0, 'rgba(255, 0, 0, 0.5)');
+        });
+    });
+
+    describe('Border style - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsTextPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the "Solid" border style is in selected state, then the border style of the text containers in the question input field should be "Solid"', () => {
+            fillInTheGapsTextPage.steps.verifyResponseAreaBorderStyle(0, 'solid');
+            fillInTheGapsTextPage.steps.verifyResponseAreaBorderStyle(1, 'solid');
+        });
+
+        borderStyles.forEach((style) => {
+            it(`When the user selects ${style}, then the border style of the text containers in the question input field should update to ${style}`, () => {
+                fillInTheGapsTextPage.steps.selectBorderStyleToggleButton(style);
+                fillInTheGapsTextPage.steps.verifyResponseAreaBorderStyle(0, style);
+                fillInTheGapsTextPage.steps.verifyResponseAreaBorderStyle(1, style);
+            });
+        })
+    });
+
+    describe('Border style - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsTextPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+        });
+
+        it('When the "Solid" border style is in selected state, then the border style of the text containers in the preview tab should be "solid"', () => {
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldBorderStyle(0, 'solid');
+            fillInTheGapsTextPage.steps.verifyAnswerInputFieldBorderStyle(1, 'solid');
+        });
+
+        borderStyles.forEach((style) => {
+            it(`When the user selects ${style}, then the border style of the text containers in the preview tab should update to ${style}`, () => {
+                fillInTheGapsTextPage.steps.switchToEditTab();
+                fillInTheGapsTextPage.steps.selectBorderStyleToggleButton(style);
+                fillInTheGapsTextPage.steps.switchToPreviewTab();
+                fillInTheGapsTextPage.steps.verifyAnswerInputFieldBorderStyle(0, style);
+                fillInTheGapsTextPage.steps.verifyAnswerInputFieldBorderStyle(1, style);
+            });
+        })
+    });
+});

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

@@ -0,0 +1,73 @@
+import { toolSettingsComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+import { dialogBoxBase, fillInTheGapsTextPage, rulerPage } from "../../../pages";
+
+const css = Cypress.env('css');
+
+describe('Create Item page: Tool settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Tool settings: Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+        });
+
+        toolSettingsComponent.tests.verifyToolSettingsContent();
+    });
+
+    describe('Tool settings: Edit tool settings', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            toolSettingsComponent.steps.expandToolSettingsAccordion();
+        });
+
+        it('When user clicks on edit icon for ruler tool, then popup for ruler tool settings should be displayed', () => {
+            toolSettingsComponent.steps.clickOnToolEditIcon(0);
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+        });
+
+        it('When user modifies the settings for the ruler tool and clicks the \'Ok\' button, then ruler tool should enter selected state.', () => {
+            rulerPage.steps.expandUnitOfMeasurementDropdown();
+            rulerPage.steps.selectOptionFromUnitOfMeasurementDropdown('Inch');
+            rulerPage.steps.selectOptionFromLengthOfRulerOptions('12 in');
+            rulerPage.steps.selectColorBlock(1);
+            rulerPage.steps.expandRotationDropdown();
+            rulerPage.steps.selectOptionFromRotationDropdown('Allow rotation and display angle');
+            rulerPage.steps.enterInputToOpacityInputField(60);
+            rulerPage.steps.checkAddShowHideButtonCheckbox();
+            toolSettingsComponent.steps.clickOnOkButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            toolSettingsComponent.steps.verifyToolSelectedState(0);
+        });
+
+        it('When user has made changes for ruler tool in edit tab then changes should be reflected in the ruler tool in the preview tab', () => {
+            cy.log('Switching to Preview Tab');
+            rulerPage.steps.switchToPreviewTab();
+            rulerPage.steps.verifyPreviewTabRulerVisibilityButtonLabel('Show');
+            rulerPage.steps.clickOnRulerVisibilityButton();
+            utilities.verifyElementVisibilityState(rulerPage.rulerPreviewTab(), 'visible');
+            rulerPage.steps.verifyLengthOfRulerInPreview('12in');
+            rulerPage.steps.verifyColorOfRulerInPreview(1);
+            rulerPage.steps.verifyRulerOpacityInPreview('0.6');
+            rulerPage.steps.verifyRotationButtonWithDegreeVisible();
+        });
+
+        it('CSS of the \'Hide ruler\' button', { tags: 'css' }, () => {
+            utilities.verifyCSS(rulerPage.rulerVisibilityButtonPreviewTab(), {
+                'border': `1px solid ${css.color.activeButtons}`,
+                'background-color': css.color.defaultBackground,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('Accessibility of \'Hide ruler\' button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(rulerPage.rulerVisibilityButtonPreviewTab().parents('[class*="ItemEnginestyles__MainWrapper"]'));
+        });
+    });
+});

package/cypress/e2e/ILC/Graphing/Scoring/allOrNothingWithAlternativePointsGreaterThanCorrectPoints.js

@@ -42,7 +42,7 @@ describe('Create Item page - Graphing: All or nothing with alternative answer',
             graphingPage.steps.plotPointsOnGraphSpecifyCorrectAnswerSection([{ x: 0, xRange: 20, y: 1, yRange: 20 }, { x: 0, xRange: 20, y: 2, yRange: 20 }]);
             graphingPage.steps.verifyPointsPlottedOnSpecifyCorrectAnswerSection([{ x: 0, xRange: 20, y: 1, yRange: 20 }, { x: 0, xRange: 20, y: 2, yRange: 20 }]);
             graphingPage.steps.allotPoints(20);
-            graphingPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+            //graphingPage.steps.checkAllowStudentToCheckAnswerCheckbox();
             graphingPage.steps.switchToPreviewTab();
         });
 
@@ -69,14 +69,14 @@ describe('Create Item page - Graphing: All or nothing with alternative answer',
             graphingPage.steps.verifyCorrectPointsPlottedOnGraphCorrectAnswerSection([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
             graphingPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
 
-            cy.log('When the user switches to \'Grading view\' without attempting the question and clicks on \'Check answer\' button, status message and correct answer section should not be displayed')
+            /*cy.log('When the user switches to \'Grading view\' without attempting the question and clicks on \'Check answer\' button, status message and correct answer section should not be displayed')
             graphingPage.steps.checkAnswer();
             utilities.verifyElementCount(graphingPage.graphCirclePreviewTab(), 1);
             graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
             utilities.verifyElementCount(graphingPage.graphLinePreviewTab(), 1);
             graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
             graphingPage.steps.verifyCorrectAnswerSectionNotExist();
-            utilities.verifyElementVisibilityState(graphingPage.correctIncorrectStatusMessageText(), 'notExist');
+            utilities.verifyElementVisibilityState(graphingPage.correctIncorrectStatusMessageText(), 'notExist');*/
         });
 
         it('When the user attempts the question with responses from the correct accordion, then the user should be awarded full points and on switching to \'Grading\' view the attempted graph should be displayed correct, a status message with text \'Your answer is correct\' should be displayed above the question preview, correct answer section should not be displayed', () => {
@@ -102,7 +102,7 @@ describe('Create Item page - Graphing: All or nothing with alternative answer',
             graphingPage.steps.verifyCorrectAnswerSectionNotExist();
             graphingPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
 
-            cy.log('When the user attempts the question with responses from the correct accordion and clicks on \'Check answer\' button, the attempted graph should be displayed correct, a status message with text \'Your answer is correct\' and correct answer section should not be displayed')
+            /*cy.log('When the user attempts the question with responses from the correct accordion and clicks on \'Check answer\' button, the attempted graph should be displayed correct, a status message with text \'Your answer is correct\' and correct answer section should not be displayed')
             graphingPage.steps.checkAnswer();
             utilities.verifyElementCount(graphingPage.graphCirclePreviewTab(), 2);
             graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
@@ -112,7 +112,7 @@ describe('Create Item page - Graphing: All or nothing with alternative answer',
             utilities.verifyElementCount(graphingPage.graphPolygonPreviewTab(), 1);
             graphingPage.steps.verifyCorrectPointsPlottedOnGraphPreviewTab([{ x: -6, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 9, yRange: 20 }]);
             graphingPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
-            graphingPage.steps.verifyCorrectAnswerSectionNotExist();
+            graphingPage.steps.verifyCorrectAnswerSectionNotExist();*/
         });
 
         it('When the user attempts the question with alternative accordion response, then the user should be awarded with points specified for alternative accordion (less than full points) and on switching to \'Grading\' view, the attempted graph should be displayed correct, a status message with text \'Your answer is correct\' and correct answer section should not be displayed', () => {
@@ -137,7 +137,7 @@ describe('Create Item page - Graphing: All or nothing with alternative answer',
             graphingPage.steps.verifyCorrectAnswerSectionNotExist();
             graphingPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
 
-            cy.log('When the user attempts the question with responses from the alternative accordion and clicks on \'Check answer\' button, the attempted graph should be displayed correct, a status message with text \'Your answer is correct\' and correct answer section should not be displayed')
+            /*cy.log('When the user attempts the question with responses from the alternative accordion and clicks on \'Check answer\' button, the attempted graph should be displayed correct, a status message with text \'Your answer is correct\' and correct answer section should not be displayed')
             graphingPage.steps.checkAnswer();
             utilities.verifyElementCount(graphingPage.graphCirclePreviewTab(), 2);
             graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
@@ -146,7 +146,7 @@ describe('Create Item page - Graphing: All or nothing with alternative answer',
             graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
             graphingPage.steps.verifyCorrectPointsPlottedOnGraphPreviewTab([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
             graphingPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
-            graphingPage.steps.verifyCorrectAnswerSectionNotExist();
+            graphingPage.steps.verifyCorrectAnswerSectionNotExist();*/
         });
 
         it('When the user attempts the question with partially correct options exclusively from the correct accordion, then the user should be awarded 0 points and on switching to \'Grading\' view, the attempted graph should be displayed correct, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers from the alternative accordion should be displayed', () => {
@@ -177,7 +177,7 @@ describe('Create Item page - Graphing: All or nothing with alternative answer',
             graphingPage.steps.verifyCorrectPointsPlottedOnGraphCorrectAnswerSection([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
             graphingPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
 
-            cy.log('When the user attempts the question with partially correct responses exclusively from the correct accordion and clicks on \'Check answer\' button, the attempted graph should be displayed correct, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            /*cy.log('When the user attempts the question with partially correct responses exclusively from the correct accordion and clicks on \'Check answer\' button, the attempted graph should be displayed correct, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
             graphingPage.steps.checkAnswer();
             utilities.verifyElementCount(graphingPage.graphCirclePreviewTab(), 1);
             graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
@@ -186,7 +186,7 @@ describe('Create Item page - Graphing: All or nothing with alternative answer',
             utilities.verifyElementCount(graphingPage.graphPolygonPreviewTab(), 1);
             graphingPage.steps.verifyCorrectPointsPlottedOnGraphPreviewTab([{ x: -6, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 9, yRange: 20 }]);
             graphingPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
-            graphingPage.steps.verifyCorrectAnswerSectionNotExist();
+            graphingPage.steps.verifyCorrectAnswerSectionNotExist();*/
         });
 
         it('When the user attempts the question with partially correct options exclusively from the alternative accordion, then the user should be awarded 0 points and on switching to \'Grading\' view, the attempted graph should be displayed correct, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers from the alternative accordion should be displayed', () => {
@@ -217,7 +217,7 @@ describe('Create Item page - Graphing: All or nothing with alternative answer',
             graphingPage.steps.verifyCorrectPointsPlottedOnGraphCorrectAnswerSection([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
             graphingPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
 
-            cy.log('When the user attempts the question with partially correct responses exclusively from the alternative accordion and clicks on \'Check answer\' button, the attempted graph should be displayed correct, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            /*cy.log('When the user attempts the question with partially correct responses exclusively from the alternative accordion and clicks on \'Check answer\' button, the attempted graph should be displayed correct, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
             graphingPage.steps.checkAnswer();
             utilities.verifyElementCount(graphingPage.graphCirclePreviewTab(), 1);
             graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
@@ -226,7 +226,7 @@ describe('Create Item page - Graphing: All or nothing with alternative answer',
             utilities.verifyElementCount(graphingPage.graphLineSegmentsPreviewTab(), 1);
             graphingPage.steps.verifyCorrectPointsPlottedOnGraphPreviewTab([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
             graphingPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
-            graphingPage.steps.verifyCorrectAnswerSectionNotExist();
+            graphingPage.steps.verifyCorrectAnswerSectionNotExist();*/
         });
 
         it('When the user has attempted the question with equal number of correct responses from correct and alternative accordion, then the user should be awarded with 0 points and on switching to \'Grading\' view, the correctly attempted graph should be displayed correct and incorrectly attempted should be displayed for the alternative accordion graph, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers from the alternative accordion should be displayed', () => {
@@ -259,7 +259,7 @@ describe('Create Item page - Graphing: All or nothing with alternative answer',
             graphingPage.steps.verifyCorrectPointsPlottedOnGraphCorrectAnswerSection([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
             graphingPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
 
-            cy.log('When the user attempts the question with equal number responses from the correct and alternative accordion and clicks on \'Check answer\' button, the attempted graph should be displayed correct, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            /*cy.log('When the user attempts the question with equal number responses from the correct and alternative accordion and clicks on \'Check answer\' button, the attempted graph should be displayed correct, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
             graphingPage.steps.checkAnswer();
             utilities.verifyElementCount(graphingPage.graphCirclePreviewTab(), 1);
             graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
@@ -269,7 +269,7 @@ describe('Create Item page - Graphing: All or nothing with alternative answer',
             utilities.verifyElementCount(graphingPage.graphPolygonPreviewTab(), 1);
             graphingPage.steps.verifyIncorrectPointsPlottedOnGraphPreviewTab([{ x: -6, xRange: 20, y: 9, yRange: 20 }, { x: -6, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 7, yRange: 20 }, { x: -4, xRange: 20, y: 9, yRange: 20 }]);
             graphingPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
-            graphingPage.steps.verifyCorrectAnswerSectionNotExist();
+            graphingPage.steps.verifyCorrectAnswerSectionNotExist();*/
         });
 
         it('Race condition : When the user attempts the question with the common response between correct and alternative accordion, then the user should be awarded with 0 points and on switching to \'Grading\' view, the attempted response should be displayed correct, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers from the alternative accordion should be displayed', () => {
@@ -298,7 +298,7 @@ describe('Create Item page - Graphing: All or nothing with alternative answer',
             graphingPage.steps.verifyCorrectPointsPlottedOnGraphCorrectAnswerSection([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
             graphingPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
 
-            cy.log('When the user attempts the question with common response from the alternative accordion and clicks on \'Check answer\' button, the attempted graph should be displayed correct, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
+            /*cy.log('When the user attempts the question with common response from the alternative accordion and clicks on \'Check answer\' button, the attempted graph should be displayed correct, a status message with text \'Your answer is incorrect\' and correct answer section should not be displayed')
             graphingPage.steps.checkAnswer();
             utilities.verifyElementCount(graphingPage.graphCirclePreviewTab(), 2);
             graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
@@ -306,7 +306,7 @@ describe('Create Item page - Graphing: All or nothing with alternative answer',
             utilities.verifyElementCount(graphingPage.graphLinePreviewTab(), 1);
             graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
             graphingPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
-            graphingPage.steps.verifyCorrectAnswerSectionNotExist();
+            graphingPage.steps.verifyCorrectAnswerSectionNotExist();*/
         });
 
         it('When the user attempts the question incorrectly, then the user should be awarded 0 points and on switching to \'Grading\' view, incorrect icons should be displayed besides all incorrect responses, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers should be displayed', () => {
@@ -336,7 +336,7 @@ describe('Create Item page - Graphing: All or nothing with alternative answer',
             graphingPage.steps.verifyCorrectPointsPlottedOnGraphCorrectAnswerSection([{ x: 6, xRange: 20, y: 0, yRange: 20 }, { x: 6, xRange: 20, y: 5, yRange: 20 }]);
             graphingPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
 
-            cy.log('When the user has attempted the question with incorrect responses and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct answer responses, a status message with text \'Your answer is correct\' and correct answer section should not be displayed')
+            /*cy.log('When the user has attempted the question with incorrect responses and clicks on \'Check answer\' button, then correct icon should be displayed besides the correct answer responses, a status message with text \'Your answer is correct\' and correct answer section should not be displayed')
             graphingPage.steps.checkAnswer();
             utilities.verifyElementCount(graphingPage.graphCirclePreviewTab(), 2);
             graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 0, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 5, yRange: 20 }]);
@@ -344,7 +344,7 @@ describe('Create Item page - Graphing: All or nothing with alternative answer',
             utilities.verifyElementCount(graphingPage.graphLinePreviewTab(), 1);
             graphingPage.steps.verifyPointsPlottedOnPreviewTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
             graphingPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
-            graphingPage.steps.verifyCorrectAnswerSectionNotExist();
+            graphingPage.steps.verifyCorrectAnswerSectionNotExist();*/
         });
     });
 });