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

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

@@ -0,0 +1,336 @@
+import { dialogBoxBase, fillInTheGapsDropdownPage } 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 dropdown: Style and layout customization', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Style and layout customization accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyStyleAndLayoutCustomizationAccordionProperties();
+    });
+
+    describe('Style and layout customization accordion contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('"Dropdown" label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsDropdownPage.componentContainerLabel(), 'Dropdown');
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyFillColorSectionContents();
+
+        fillInTheGapsDropdownPage.tests.verifyBorderColorSectionContents();
+
+        fillInTheGapsDropdownPage.tests.verifyBorderStyleSectionContents('Solid');
+
+        fillInTheGapsDropdownPage.tests.verifyFillColorTooltips();
+
+        fillInTheGapsDropdownPage.tests.verifyBorderColorTooltips();
+        
+        fillInTheGapsDropdownPage.tests.verifyStyleAndLayoutCustomizationAccordionContentsCSSAndA11y('Solid');
+    });
+
+    describe('Fill color - Edit tab', () => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the default color block is in selected state in the "Fill color" section, then the background color of the dropdowns in the question input field should be the default selected color', () => {
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaFillColor(0, css.color.optionsBg);
+            fillInTheGapsDropdownPage.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 dropdowns in the question input field', () => {
+            fillInTheGapsDropdownPage.steps.selectColorBlock(1);
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaFillColor(0, css.color.transparent);
+            fillInTheGapsDropdownPage.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 dropdowns in the question input field should be the modified selected color', () => {
+            fillInTheGapsDropdownPage.steps.editColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaFillColor(0, modifiedColor);
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaFillColor(1, modifiedColor);
+        });
+
+        it('When the adds a new dropdown, then the background color of the newly added dropdown should be the modified selected color', () => {
+            fillInTheGapsDropdownPage.steps.addResponseArea();
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaFillColor(0, modifiedColor);
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaFillColor(1, modifiedColor);
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaFillColor(2, modifiedColor);
+        });
+    });
+
+    describe('Fill color - Preview tab', () => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+        });
+
+        it('When the default color block is in selected state in the "Fill color" section, then the background color of the dropdowns in the preview tab should be the default selected color', () => {
+            fillInTheGapsDropdownPage.steps.verifyDropdownFillColor(0, css.color.optionsBg);
+            fillInTheGapsDropdownPage.steps.verifyDropdownFillColor(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 dropdowns in the preview tab', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.selectColorBlock(1);
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.steps.verifyDropdownFillColor(0, css.color.transparent);
+            fillInTheGapsDropdownPage.steps.verifyDropdownFillColor(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', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.editColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.steps.verifyDropdownFillColor(0, modifiedColor);
+            fillInTheGapsDropdownPage.steps.verifyDropdownFillColor(1, modifiedColor);
+        });
+
+        it('The background color of the dropdowns in the preview tab should be the modified selected color', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.addResponseArea();
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.steps.verifyDropdownFillColor(0, modifiedColor);
+            fillInTheGapsDropdownPage.steps.verifyDropdownFillColor(1, modifiedColor);
+            fillInTheGapsDropdownPage.steps.verifyDropdownFillColor(2, modifiedColor);
+        });
+    });
+
+    describe('Border color - Edit tab', () => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the default color block is in selected state in the "Fill color" section, then the background color of the dropdowns in the question input field should be the default selected color', () => {
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaBorderColor(0, `1px solid ${css.color.activeComponentBorder}`);
+            fillInTheGapsDropdownPage.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 dropdowns in the question input field', () => {
+            fillInTheGapsDropdownPage.steps.selectColorBlock(3);
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaBorderColor(0, `1px solid ${css.color.transparent}`);
+            fillInTheGapsDropdownPage.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 dropdowns in the question input field should be the modified selected color', () => {
+            fillInTheGapsDropdownPage.steps.editColor(1);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaBorderColor(0, `1px solid ${modifiedColor}`);
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaBorderColor(1, `1px solid ${modifiedColor}`);
+        });
+
+        it('When the adds a new dropdown, then the background color of the newly added dropdown should be the modified selected color', () => {
+            fillInTheGapsDropdownPage.steps.addResponseArea();
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaBorderColor(0, `1px solid ${modifiedColor}`);
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaBorderColor(1, `1px solid ${modifiedColor}`);
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaBorderColor(2, `1px solid ${modifiedColor}`);
+        });
+    });
+
+    describe('Border color - Preview tab', () => {
+        const modifiedColor = 'rgb(121, 60, 60)'
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+        });
+
+        it('When the default color block is in selected state in the "Fill color" section, then the background color of the dropdowns in the preview tab should be the default selected color', () => {
+            fillInTheGapsDropdownPage.steps.verifyDropdownBorderColor(0, `1px solid ${css.color.activeComponentBorder}`);
+            fillInTheGapsDropdownPage.steps.verifyDropdownBorderColor(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 dropdowns in the preview tab', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.selectColorBlock(3);
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.steps.verifyDropdownBorderColor(0, `1px solid ${css.color.transparent}`);
+            fillInTheGapsDropdownPage.steps.verifyDropdownBorderColor(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 color block should get updated accordingly', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.editColor(1);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.steps.verifyDropdownBorderColor(0, `1px solid ${modifiedColor}`);
+            fillInTheGapsDropdownPage.steps.verifyDropdownBorderColor(1, `1px solid ${modifiedColor}`);
+        });
+
+        it('The background color of the dropdowns in the preview tab should be the modified selected color', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.addResponseArea();
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.steps.verifyDropdownBorderColor(0, `1px solid ${modifiedColor}`);
+            fillInTheGapsDropdownPage.steps.verifyDropdownBorderColor(1, `1px solid ${modifiedColor}`);
+            fillInTheGapsDropdownPage.steps.verifyDropdownBorderColor(2, `1px solid ${modifiedColor}`);
+        });
+    });
+
+    describe('Color popup functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.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', () => {
+            fillInTheGapsDropdownPage.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(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.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', () => {
+            fillInTheGapsDropdownPage.steps.editColor(0);
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(121, 60, 60)');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(119, 60, 60)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHexValue('#793c3c');
+            colorPopupComponent.steps.verifyOpacityGradientPaletteColor('rgb(119, 60, 60)');
+        });
+
+        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(60, 121, 121)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(0, 255, 255)');
+            colorPopupComponent.steps.verifyHexValue('#3c7979');
+            colorPopupComponent.steps.verifyOpacityGradientPaletteColor('rgb(60, 119, 119)');
+        });
+
+        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(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.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', () => {
+            fillInTheGapsDropdownPage.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')
+            fillInTheGapsDropdownPage.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(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the "Solid" border style is in selected state, then the border style of the dropdowns in the question input field should be "Solid"', () => {
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaBorderStyle(0, 'solid');
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaBorderStyle(1, 'solid');
+        });
+
+        borderStyles.forEach((style) => {
+            it(`When the user selects ${style}, then the border style of the dropdowns in the question input field should update to ${style}`, () => {
+                fillInTheGapsDropdownPage.steps.selectBorderStyleToggleButton(style);
+                fillInTheGapsDropdownPage.steps.verifyResponseAreaBorderStyle(0, style);
+                fillInTheGapsDropdownPage.steps.verifyResponseAreaBorderStyle(1, style);
+            });
+        })
+    });
+
+    describe('Border style - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+        });
+
+        it('When the "Solid" border style is in selected state, then the border style of the dropdowns in the preview tab should be "solid"', () => {
+            fillInTheGapsDropdownPage.steps.verifyDropdownBorderStyle(0, 'solid');
+            fillInTheGapsDropdownPage.steps.verifyDropdownBorderStyle(1, 'solid');
+        });
+
+        borderStyles.forEach((style) => {
+            it(`When the user selects ${style}, then the border style of the dropdowns in the preview tab should update to ${style}`, () => {
+                fillInTheGapsDropdownPage.steps.switchToEditTab();
+                fillInTheGapsDropdownPage.steps.selectBorderStyleToggleButton(style);
+                fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+                fillInTheGapsDropdownPage.steps.verifyDropdownBorderStyle(0, style);
+                fillInTheGapsDropdownPage.steps.verifyDropdownBorderStyle(1, style);
+            });
+        })
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsDropdownNew/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, fillInTheGapsDropdownPage, rulerPage } from "../../../pages";
+
+const css = Cypress.env('css');
+
+describe('Create Item page: Tool settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Tool settings: Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+        });
+
+        toolSettingsComponent.tests.verifyToolSettingsContent();
+    });
+
+    describe('Tool settings: Edit tool settings', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            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/FillInTheGapsOverImageDragAndDrop/Scoring/allOrNothingGroupedScoring.js

@@ -23,7 +23,7 @@ describe('Create item page - Fill in the gaps over image - drag and drop: All or
             fillInTheGapsOverImageDragAndDropPage.steps.setGroupedOptions();
             fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Petals': 0, 'Leaves': 1, 'Stem': 2 });
             fillInTheGapsOverImageDragAndDropPage.steps.allotPoints(20);
-            fillInTheGapsOverImageDragAndDropPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+            //fillInTheGapsOverImageDragAndDropPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
             fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
         });
 
@@ -46,13 +46,13 @@ describe('Create item page - Fill in the gaps over image - drag and drop: All or
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount([['Petals'], ['Leaves'], ['Stem']]);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
-            cy.log('When the user has attempted the question incorrectly and clicks on \'Check answer\' button, then incorrect icon should be displayed besides the  dropzone, a status message with text \'Your answer is incorrect\' should be displayed and correct answer section should not be displayed')
+            /*cy.log('When the user has attempted the question incorrectly and clicks on \'Check answer\' button, then incorrect icon should be displayed besides the  dropzone, a status message with text \'Your answer is incorrect\' should be displayed and correct answer section should not be displayed')
             fillInTheGapsOverImageDragAndDropPage.steps.checkAnswer();
             fillInTheGapsOverImageDragAndDropPage.steps.verifyIncorrectOptionIcon(0);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyIncorrectOptionIcon(1);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyIncorrectOptionIcon(2);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectAnswerSectionNotExists();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectAnswerSectionNotExists();*/
         });
 
         it('When the user attempts the question partially correct with some correct, some incomplete, some incorrect options, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the correct answer responses, incorrect icon should be displayed besides incorrect answer response, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers along with numeration should be displayed', () => {
@@ -65,13 +65,13 @@ describe('Create item page - Fill in the gaps over image - drag and drop: All or
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount([['Petals'], ['Leaves'], ['Stem']]);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
-            cy.log('When the user attempts the question partially correct with some correct, some incomplete, some incorrect options and clicks on \'Check answer\' button, then incorrect icon should be displayed besides the dropzone incorrect response and correct icon should be displayed beside the correct response, a status message with text \'Your answer is incorrect\' should be displayed and correct answer section should not be displayed')
+            /*cy.log('When the user attempts the question partially correct with some correct, some incomplete, some incorrect options and clicks on \'Check answer\' button, then incorrect icon should be displayed besides the dropzone incorrect response and correct icon should be displayed beside the correct response, a status message with text \'Your answer is incorrect\' should be displayed and correct answer section should not be displayed')
             fillInTheGapsOverImageDragAndDropPage.steps.checkAnswer();
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectOptionIcon(0);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectIncorrectIconNotExist(1);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyIncorrectOptionIcon(2);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectAnswerSectionNotExists();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectAnswerSectionNotExists();*/
         });
 
         it('When the user attempts the question partially correct with all the dropzone correctly attempted but one dropzone incomplete, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the correct answer responses, incorrect icon should be displayed besides incorrect answer response, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers along with numeration should be displayed', () => {
@@ -85,13 +85,13 @@ describe('Create item page - Fill in the gaps over image - drag and drop: All or
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount([['Petals'], ['Leaves'], ['Stem']]);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
-            cy.log('When the user attempts the question partially correct with all the dropzone correctly attempted but one dropzone incomplete and clicks on \'Check answer\' button, then no icon should be displayed besides the incomplete and correct icon should be displayed beside the correct response, a status message with text \'Your answer is incorrect\' should be displayed and correct answer section should not be displayed')
+            /*cy.log('When the user attempts the question partially correct with all the dropzone correctly attempted but one dropzone incomplete and clicks on \'Check answer\' button, then no icon should be displayed besides the incomplete and correct icon should be displayed beside the correct response, a status message with text \'Your answer is incorrect\' should be displayed and correct answer section should not be displayed')
             fillInTheGapsOverImageDragAndDropPage.steps.checkAnswer();
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectIncorrectIconNotExist(0);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectOptionIcon(1);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectOptionIcon(2);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectAnswerSectionNotExists();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectAnswerSectionNotExists();*/
         });
 
         it('When the user attempts the question partially correct with all the dropzone correctly attempted but with an extra option which is not set as correct answer, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the correct answer responses, incorrect icon should be displayed besides incorrect answer response, a status message with text \'Your answer is incorrect\' and correct answer section should be displayed along with numeration', () => {
@@ -105,13 +105,13 @@ describe('Create item page - Fill in the gaps over image - drag and drop: All or
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount([['Petals'], ['Leaves'], ['Stem']]);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
-            cy.log('When the user attempts the question partially correct with all the dropzone correctly attempted but with an extra option which is not set as correct answer and clicks on \'Check answer\' button, correct icon should be displayed besides the correct answer responses, incorrect icon should be displayed besides incorrect answer response, a status message with text \'Your answer is incorrect\' should be displayed and correct answer section should not be displayed')
+            /*cy.log('When the user attempts the question partially correct with all the dropzone correctly attempted but with an extra option which is not set as correct answer and clicks on \'Check answer\' button, correct icon should be displayed besides the correct answer responses, incorrect icon should be displayed besides incorrect answer response, a status message with text \'Your answer is incorrect\' should be displayed and correct answer section should not be displayed')
             fillInTheGapsOverImageDragAndDropPage.steps.checkAnswer();
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectOptionIcon(0);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyIncorrectOptionIcon(1);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectOptionIcon(2);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectAnswerSectionNotExists();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectAnswerSectionNotExists();*/
         });
 
         it('When the user attempts question with the common option from another group then the user should be awarded 0 points and on switching to \'Grading\' view, incorrect icon should be displayed besides incorrect answer response, a status message with text \'Your answer is incorrect\' and correct answer section should be displayed along with numeration', () => {
@@ -125,13 +125,13 @@ describe('Create item page - Fill in the gaps over image - drag and drop: All or
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectOptionIcon(2);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount([['Petals'], ['Leaves'], ['Stem']]);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
-            cy.log('When the user attempts the question with the common option from another group then the user should be awarded and clicks on \'Check answer\' button, incorrect icon should be displayed besides incorrect answer response, a status message with text \'Your answer is incorrect\' should be displayed and correct answer section should not be displayed')
+            /*cy.log('When the user attempts the question with the common option from another group then the user should be awarded and clicks on \'Check answer\' button, incorrect icon should be displayed besides incorrect answer response, a status message with text \'Your answer is incorrect\' should be displayed and correct answer section should not be displayed')
             fillInTheGapsOverImageDragAndDropPage.steps.checkAnswer();
             fillInTheGapsOverImageDragAndDropPage.steps.verifyIncorrectOptionIcon(0);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectOptionIcon(1);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectOptionIcon(2);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectAnswerSectionNotExists();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectAnswerSectionNotExists();*/
         });
 
         it('When user attempts the question correctly, the user should be awarded full points and on switching to \'Grading\' view, then correct icons should be displayed beside all the correct responses, 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', () => {
@@ -146,13 +146,13 @@ describe('Create item page - Fill in the gaps over image - drag and drop: All or
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectAnswerSectionNotExists();
             fillInTheGapsOverImageDragAndDropPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
-            cy.log('When user attempts the question correctly and clicks on \'Check answer\' button, correct icon should be displayed besides the correct answer responses, a status message with text \'Your answer is correct\' should be displayed and correct answer section should not be displayed')
+            /*cy.log('When user attempts the question correctly and clicks on \'Check answer\' button, correct icon should be displayed besides the correct answer responses, a status message with text \'Your answer is correct\' should be displayed and correct answer section should not be displayed')
             fillInTheGapsOverImageDragAndDropPage.steps.checkAnswer();
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectOptionIcon(0);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectOptionIcon(1);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectOptionIcon(2);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectAnswerSectionNotExists();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectAnswerSectionNotExists();*/
         });
     });
 });