itemengine-cypress-automation 1.0.82 → 1.0.84

package/cypress/e2e/ILC/{FillInTheGapsOverImageText → FillInTheGapsOverImageTextNew}/editTabScoringSection.js

@@ -11,7 +11,7 @@ describe('Create item page - Fill in the gaps over image: Scoring section', () =
     describe('Scoring section contents', () => {
         abortEarlySetup();
         before(() => {
-            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
             cy.barsPreLoaderWait();
         });
 
@@ -23,7 +23,7 @@ describe('Create item page - Fill in the gaps over image: Scoring section', () =
     describe('Auto scored: All or nothing scoring - Scoring section', () => {
         abortEarlySetup();
         before(() => {
-            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
             cy.barsPreLoaderWait();
         });
 
@@ -35,7 +35,7 @@ describe('Create item page - Fill in the gaps over image: Scoring section', () =
     describe('Auto scored: All or nothing scoring - Specify correct answer section', () => {
         abortEarlySetup();
         before(() => {
-            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
             cy.barsPreLoaderWait();
             fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
             fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
@@ -51,7 +51,7 @@ describe('Create item page - Fill in the gaps over image: Scoring section', () =
     describe('Auto scored: Partial - equal weights scoring - Scoring section', () => {
         abortEarlySetup();
         before(() => {
-            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
             cy.barsPreLoaderWait();
             fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
             fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
@@ -74,7 +74,7 @@ describe('Create item page - Fill in the gaps over image: Scoring section', () =
     describe('Auto scored: Partial - equal weights scoring - Specify correct answer section', () => {
         abortEarlySetup();
         before(() => {
-            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
             cy.barsPreLoaderWait();
             fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
             fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
@@ -145,7 +145,7 @@ describe('Create item page - Fill in the gaps over image: Scoring section', () =
     describe('Auto scored: Partial - different weights scoring - Scoring section', () => {
         abortEarlySetup();
         before(() => {
-            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
             cy.barsPreLoaderWait();
             fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
             fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
@@ -168,7 +168,7 @@ describe('Create item page - Fill in the gaps over image: Scoring section', () =
     describe('Auto scored: Partial - different weights scoring - Specify correct answer section', () => {
         abortEarlySetup();
         before(() => {
-            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
             cy.barsPreLoaderWait();
             fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
             fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
@@ -221,7 +221,7 @@ describe('Create item page - Fill in the gaps over image: Scoring section', () =
     describe('Manually scored scoring - Scoring section', () => {
         abortEarlySetup();
         before(() => {
-            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
             cy.barsPreLoaderWait();
         });
 
@@ -247,7 +247,7 @@ describe('Create item page - Fill in the gaps over image: Scoring section', () =
     describe('Non scored scoring - Scoring section', () => {
         abortEarlySetup();
         before(() => {
-            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
             cy.barsPreLoaderWait();
         });
 
@@ -262,7 +262,7 @@ describe('Create item page - Fill in the gaps over image: Scoring section', () =
     describe('Non scored scoring - Specify correct answer section', () => {
         abortEarlySetup();
         before(() => {
-            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
             cy.barsPreLoaderWait();
             fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
             fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();

package/cypress/e2e/ILC/{FillInTheGapsOverImageText → FillInTheGapsOverImageTextNew}/previewContentsForAllViews.smoke.js

@@ -15,7 +15,7 @@ describe('Create item page - Fill in the gaps over image - text - Preview conten
             before(() => {
                 switch (view) {
                     case 'Question preview':
-                        fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+                        fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
                         cy.barsPreLoaderWait();
                         fillInTheGapsOverImageTextPage.steps.addTextInQuestionInstructionsInputField('Fill in the gaps');
                         fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');

package/cypress/e2e/ILC/{FillInTheGapsOverImageText → FillInTheGapsOverImageTextNew}/specifyCorrectAnswerSection.js

@@ -10,7 +10,7 @@ describe('Create Item page - Fill in the gaps over image - text: Specify correct
         abortEarlySetup();
         before(() => {
             cy.log('Navigating to fill in the gaps over image - text question type');
-            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
             cy.barsPreLoaderWait();
             fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
             fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
@@ -26,7 +26,7 @@ describe('Create Item page - Fill in the gaps over image - text: Specify correct
         abortEarlySetup();
         before(() => {
             cy.log('Navigating to fill in the gaps over image - text question type');
-            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
             cy.barsPreLoaderWait();
             fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
             fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();

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

@@ -173,6 +173,8 @@ describe('Create Item page - Protractor : Edit Tab', () => {
 
         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();
+            protractorPage.steps.verifyOpacityInputFieldValue(40);
+            protractorPage.steps.verifyOpacitySliderValue(40);
         });
 
         it('The maximum value of \'Opacity\' slider should be 100', () => {

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

@@ -426,6 +426,8 @@ describe('Create Item page - Ruler: Edit Tab', () => {
 
         it('\'Opacity\' label, input field and slider should be displayed and by default the slider of \'Opacity\' should be set to 40 percent', () => {
             rulerPage.steps.verifyDefaultOpacityLabelSliderAndInputField();
+            rulerPage.steps.verifyOpacityInputFieldValue(40);
+            rulerPage.steps.verifyOpacitySliderValue(40);
         });
 
         it('The maximum value of \'Opacity\' slider should be 100', () => {

package/cypress/e2e/ILC/ToolSettings/toolSettingsPreviewContents.smoke.js

@@ -9,198 +9,204 @@ const css = Cypress.env('css');
 const views = utilities.getViews(previewContentViews);
 var itemReferenceID = "";
 
-views.forEach((view) => {
-    describe(`Preview tab contents : Single tool selected - ${view}`, { tags: 'smoke' }, () => {
-        abortEarlySetup();
-        before(() => {
-            switch (view) {
-                case 'Question preview':
-                    cy.log('Navigating to short text response question type');
-                    multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
-                    cy.barsPreLoaderWait();
-                    multipleSelectionPage.steps.addTextInQuestionInstructionsInputField('Text');
-                    multipleSelectionPage.steps.addInputToOptionsInputField(options);
-                    multipleSelectionPage.steps.checkOptionsCheckboxInSpecifyCorrectAnswerSection(0);
-                    multipleSelectionPage.steps.checkOptionsCheckboxInSpecifyCorrectAnswerSection(1);
-                    multipleSelectionPage.steps.allotPoints(20);
-                    toolSettingsComponent.steps.expandToolSettingsAccordion();
-                    toolSettingsComponent.steps.selectTool(0);
-                    createQuestionBasePage.steps.switchToPreviewTab();
-                    utilities.verifyElementVisibilityState(commonComponents.previewTabQuestionWrapper(), 'visible');
-                    break;
-                case 'Item view':
-                    cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
-                    break;
-                case 'Item preview':
-                    cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
-                    createQuestionBasePage.steps.switchToPreviewTab();
-                    break;
-                case 'Student view':
-                    cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
-                    break;
-                case 'Grading view':
-                    cy.visit(`/item-engine/demo/render-item/grading-view/${utilities.base64Encoding(itemReferenceID)}`);
-                    break;
-                case 'Correct answer view':
-                    cy.visit(`/item-engine/demo/render-item/correct-answer-view/${utilities.base64Encoding(itemReferenceID)}`);
-                    break;
-                default:
-                    throw new Error('Invalid view');
-            }
-        });
+describe('Tool settings content for all views', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
 
-        after(() => {
-            if (view === 'Question preview') {
-                createQuestionBasePage.steps.clickOnSaveQuestionButton();
-                utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
-                itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
-            }
-            if (view === 'Student view') {
-                studentViewPage.steps.submitResponse();
-                utilities.verifyElementVisibilityState(studentViewPage.buttonGoToGradingView(), 'visible');
-            }
-        });
+    views.forEach((view) => {
+        describe(`Preview tab contents : Single tool selected - ${view}`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        cy.log('Navigating to short text response question type');
+                        multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+                        cy.barsPreLoaderWait();
+                        multipleSelectionPage.steps.addTextInQuestionInstructionsInputField('Text');
+                        multipleSelectionPage.steps.addInputToOptionsInputField(options);
+                        multipleSelectionPage.steps.checkOptionsCheckboxInSpecifyCorrectAnswerSection(0);
+                        multipleSelectionPage.steps.checkOptionsCheckboxInSpecifyCorrectAnswerSection(1);
+                        multipleSelectionPage.steps.allotPoints(20);
+                        toolSettingsComponent.steps.expandToolSettingsAccordion();
+                        toolSettingsComponent.steps.selectTool(0);
+                        createQuestionBasePage.steps.switchToPreviewTab();
+                        utilities.verifyElementVisibilityState(commonComponents.previewTabQuestionWrapper(), 'visible');
+                        break;
+                    case 'Item view':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        createQuestionBasePage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/grading-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Correct answer view':
+                        cy.visit(`/item-engine/demo/render-item/correct-answer-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    default:
+                        throw new Error('Invalid view');
+                }
+            });
 
-        it('\'Show ruler\' button should be displayed and ruler tool should not be displayed by default', () => {
-            rulerPage.steps.verifyPreviewTabRulerVisibilityButtonLabel('Show');
-            rulerPage.steps.verifyRulerNotVisible();
-        });
+            after(() => {
+                if (view === 'Question preview') {
+                    createQuestionBasePage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                }
+                if (view === 'Student view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(studentViewPage.buttonGoToGradingView(), 'visible');
+                }
+            });
 
-        it('When user clicks on \'Show ruler\' button, then ruler should be displayed and its button should change to \'Hide ruler\'', () => {
-            rulerPage.steps.clickOnRulerVisibilityButton();
-            rulerPage.steps.verifyRulerVisible();
-            rulerPage.steps.verifyPreviewTabRulerVisibilityButtonLabel('Hide');
-            rulerPage.steps.verifyLengthOfRulerInPreview('15cm');
-        });
+            it('\'Show ruler\' button should be displayed and ruler tool should not be displayed by default', () => {
+                rulerPage.steps.verifyPreviewTabRulerVisibilityButtonLabel('Show');
+                rulerPage.steps.verifyRulerNotVisible();
+            });
 
-        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('When user clicks on \'Show ruler\' button, then ruler should be displayed and its button should change to \'Hide ruler\'', () => {
+                rulerPage.steps.clickOnRulerVisibilityButton();
+                rulerPage.steps.verifyRulerVisible();
+                rulerPage.steps.verifyPreviewTabRulerVisibilityButtonLabel('Hide');
+                rulerPage.steps.verifyLengthOfRulerInPreview('15cm');
             });
-        });
 
-        it('Accessibility of \'Hide ruler\' button', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(rulerPage.rulerVisibilityButtonPreviewTab().parents('[class*="ItemEnginestyles__MainWrapper"]'));
-        });
+            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('When user clicks on \'Hide ruler\', then tool should be disappear and its button should change to \'Show ruler\'', () => {
-            rulerPage.steps.clickOnRulerVisibilityButton();
-            rulerPage.steps.verifyPreviewTabRulerVisibilityButtonLabel('Show');
-            rulerPage.steps.verifyRulerNotVisible();
-        });
-    });
+            it('Accessibility of \'Hide ruler\' button', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(rulerPage.rulerVisibilityButtonPreviewTab().parents('[class*="ItemEnginestyles__MainWrapper"]'));
+            });
 
-    describe(`Preview tab contents : Multiple tools selected - ${view}`, { tags: 'smoke' }, () => {
-        abortEarlySetup();
-        before(() => {
-            switch (view) {
-                case 'Question preview':
-                    cy.log('Navigating to short text response question type');
-                    multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
-                    cy.barsPreLoaderWait();
-                    multipleSelectionPage.steps.addTextInQuestionInstructionsInputField('Text');
-                    multipleSelectionPage.steps.addInputToOptionsInputField(options);
-                    multipleSelectionPage.steps.checkOptionsCheckboxInSpecifyCorrectAnswerSection(0);
-                    multipleSelectionPage.steps.checkOptionsCheckboxInSpecifyCorrectAnswerSection(1);
-                    multipleSelectionPage.steps.allotPoints(20);
-                    toolSettingsComponent.steps.expandToolSettingsAccordion();
-                    toolSettingsComponent.steps.selectTool(0);
-                    toolSettingsComponent.steps.selectTool(1);
-                    createQuestionBasePage.steps.switchToPreviewTab();
-                    break;
-                case 'Item view':
-                    cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
-                    break;
-                case 'Item preview':
-                    cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
-                    createQuestionBasePage.steps.switchToPreviewTab();
-                    break;
-                case 'Student view':
-                    cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
-                    break;
-                case 'Grading view':
-                    cy.visit(`/item-engine/demo/render-item/grading-view/${utilities.base64Encoding(itemReferenceID)}`);
-                    break;
-                case 'Correct answer view':
-                    cy.visit(`/item-engine/demo/render-item/correct-answer-view/${utilities.base64Encoding(itemReferenceID)}`);
-                    break;
-                default:
-                    throw new Error('Invalid view');
-            }
+            it('When user clicks on \'Hide ruler\', then tool should be disappear and its button should change to \'Show ruler\'', () => {
+                rulerPage.steps.clickOnRulerVisibilityButton();
+                rulerPage.steps.verifyPreviewTabRulerVisibilityButtonLabel('Show');
+                rulerPage.steps.verifyRulerNotVisible();
+            });
         });
 
-        after(() => {
-            if (view === 'Question preview') {
-                createQuestionBasePage.steps.clickOnSaveQuestionButton();
-                utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
-                itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
-            }
-            if (view === 'Student view') {
-                studentViewPage.steps.submitResponse();
-                utilities.verifyElementVisibilityState(studentViewPage.buttonGoToGradingView(), 'visible');
-            }
-        });
+        describe(`Preview tab contents : Multiple tools selected - ${view}`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        cy.log('Navigating to short text response question type');
+                        multipleSelectionPage.steps.navigateToCreateQuestion('multiple selection');
+                        cy.barsPreLoaderWait();
+                        multipleSelectionPage.steps.addTextInQuestionInstructionsInputField('Text');
+                        multipleSelectionPage.steps.addInputToOptionsInputField(options);
+                        multipleSelectionPage.steps.checkOptionsCheckboxInSpecifyCorrectAnswerSection(0);
+                        multipleSelectionPage.steps.checkOptionsCheckboxInSpecifyCorrectAnswerSection(1);
+                        multipleSelectionPage.steps.allotPoints(20);
+                        toolSettingsComponent.steps.expandToolSettingsAccordion();
+                        toolSettingsComponent.steps.selectTool(0);
+                        toolSettingsComponent.steps.selectTool(1);
+                        createQuestionBasePage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item view':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID)}`);
+                        createQuestionBasePage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Grading view':
+                        cy.visit(`/item-engine/demo/render-item/grading-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    case 'Correct answer view':
+                        cy.visit(`/item-engine/demo/render-item/correct-answer-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        break;
+                    default:
+                        throw new Error('Invalid view');
+                }
+            });
 
-        it('When the user selects ruler and protractor tool in edit tab, then \'Show Ruler\' and \'Show protractor\' buttons should be displayed in preview tab and tools should not be visible by default', () => {
-            rulerPage.steps.verifyPreviewTabRulerVisibilityButtonLabel('Show');
-            rulerPage.steps.verifyRulerNotVisible();
-            protractorPage.steps.verifyPreviewTabProtractorVisibilityButtonLabel('Show');
-            protractorPage.steps.verifyProtractorNotExistInPreviewTab();
-        });
+            after(() => {
+                if (view === 'Question preview') {
+                    createQuestionBasePage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                }
+                if (view === 'Student view') {
+                    studentViewPage.steps.submitResponse();
+                    utilities.verifyElementVisibilityState(studentViewPage.buttonGoToGradingView(), 'visible');
+                }
+            });
 
-        it('When the user clicks on \'Show ruler\', then ruler tool should be displayed and its button should change to \'Hide ruler\'', () => {
-            rulerPage.steps.clickOnRulerVisibilityButton();
-            rulerPage.steps.verifyRulerVisible();
-            rulerPage.steps.verifyPreviewTabRulerVisibilityButtonLabel('Hide');
-            rulerPage.steps.verifyLengthOfRulerInPreview('15cm');
-        });
+            it('When the user selects ruler and protractor tool in edit tab, then \'Show Ruler\' and \'Show protractor\' buttons should be displayed in preview tab and tools should not be visible by default', () => {
+                rulerPage.steps.verifyPreviewTabRulerVisibilityButtonLabel('Show');
+                rulerPage.steps.verifyRulerNotVisible();
+                protractorPage.steps.verifyPreviewTabProtractorVisibilityButtonLabel('Show');
+                protractorPage.steps.verifyProtractorNotExistInPreviewTab();
+            });
 
-        it('When user clicks on \'Show protractor\', then protractor tool should be displayed and its button should change to \'Hide protractor\'', () => {
-            protractorPage.steps.clickOnProtractorVisibilityButton();
-            protractorPage.steps.verifyProtractorVisibleInPreviewTab();
-            protractorPage.steps.verifyAngleTypeIsBothAcuteAndObtuseInPreviewTab();
-            protractorPage.steps.verifyPreviewTabProtractorVisibilityButtonLabel('Hide');
-        });
+            it('When the user clicks on \'Show ruler\', then ruler tool should be displayed and its button should change to \'Hide ruler\'', () => {
+                rulerPage.steps.clickOnRulerVisibilityButton();
+                rulerPage.steps.verifyRulerVisible();
+                rulerPage.steps.verifyPreviewTabRulerVisibilityButtonLabel('Hide');
+                rulerPage.steps.verifyLengthOfRulerInPreview('15cm');
+            });
 
-        it('When user has clicked visibility buttons for both the ruler and protractor tools, both tools should be displayed simultaneously in the preview tab', () => {
-            rulerPage.steps.verifyRulerVisible();
-            protractorPage.steps.verifyProtractorVisibleInPreviewTab();
-        });
+            it('When user clicks on \'Show protractor\', then protractor tool should be displayed and its button should change to \'Hide protractor\'', () => {
+                protractorPage.steps.clickOnProtractorVisibilityButton();
+                protractorPage.steps.verifyProtractorVisibleInPreviewTab();
+                protractorPage.steps.verifyAngleTypeIsBothAcuteAndObtuseInPreviewTab();
+                protractorPage.steps.verifyPreviewTabProtractorVisibilityButtonLabel('Hide');
+            });
 
-        it('CSS of the \'Hide ruler\' and \'Hide protractor\' 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('When user has clicked visibility buttons for both the ruler and protractor tools, both tools should be displayed simultaneously in the preview tab', () => {
+                rulerPage.steps.verifyRulerVisible();
+                protractorPage.steps.verifyProtractorVisibleInPreviewTab();
             });
-            utilities.verifyCSS(protractorPage.protractorVisibilityButtonPreviewTab(), {
-                'border': `1px solid ${css.color.activeButtons}`,
-                'background-color': css.color.defaultBackground,
-                'font-size': css.fontSize.normal,
-                'font-weight': css.fontWeight.medium
+
+            it('CSS of the \'Hide ruler\' and \'Hide protractor\' 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
+                });
+                utilities.verifyCSS(protractorPage.protractorVisibilityButtonPreviewTab(), {
+                    'border': `1px solid ${css.color.activeButtons}`,
+                    'background-color': css.color.defaultBackground,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.medium
+                });
             });
-        });
 
-        //Failed due to https://redmine.zeuslearning.com/issues/557552
-        
-        it('Accessibility of \'Hide ruler\' button', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(rulerPage.rulerVisibilityButtonPreviewTab().parents('[class*="ItemEnginestyles__MainWrapper"]'));
-        });
+            //Failed due to https://redmine.zeuslearning.com/issues/557552
+
+            it('Accessibility of \'Hide ruler\' button', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(rulerPage.rulerVisibilityButtonPreviewTab().parents('[class*="ItemEnginestyles__MainWrapper"]'));
+            });
 
 
-        it('When user clicks on \'Hide ruler\', then ruler tool should be disappear and button should change to \'Show ruler\'. Protractor tool should be visible in preview tab', () => {
-            rulerPage.steps.clickOnRulerVisibilityButton();
-            rulerPage.steps.verifyRulerNotVisible();
-            protractorPage.steps.verifyProtractorVisibleInPreviewTab();
-        });
+            it('When user clicks on \'Hide ruler\', then ruler tool should be disappear and button should change to \'Show ruler\'. Protractor tool should be visible in preview tab', () => {
+                rulerPage.steps.clickOnRulerVisibilityButton();
+                rulerPage.steps.verifyRulerNotVisible();
+                protractorPage.steps.verifyProtractorVisibleInPreviewTab();
+            });
 
-        it('When user clicks on \'Hide protractor\', then protractor tool should be disappear and button should change to \'Show protractor\'', () => {
-            protractorPage.steps.clickOnProtractorVisibilityButton();
-            protractorPage.steps.verifyProtractorNotExistInPreviewTab();
+            it('When user clicks on \'Hide protractor\', then protractor tool should be disappear and button should change to \'Show protractor\'', () => {
+                protractorPage.steps.clickOnProtractorVisibilityButton();
+                protractorPage.steps.verifyProtractorNotExistInPreviewTab();
+            });
         });
     });
 });

package/cypress/pages/components/backgroundImageUploadComponent.js

@@ -3,13 +3,15 @@ import utilities from "../../support/helpers/utilities";
 const selectors = {
     backgroundImageLabel: () => cy.get('[class*="Background"][class*="LabelWrapper"]'),
     inputTypeFile: () => cy.get('input[type="file"]'),
-    uploadLabel: () => cy.get('[class*="SimpleImageUploaderstyles__LabelWrapper"]').eq(0),
-    fileNameLabel: () => cy.get('[class*="SimpleImageUploaderstyles__LabelWrapper"]').eq(1),
+    uploadLabel: () => cy.get('[class*="UploadImagestyles__LabelWrapper"]').eq(0),
+    fileNameLabel: () => cy.get('[class*="UploadImagestyles__LabelWrapper"]').eq(1),
     fileUploadSection: () => cy.get('.file-input-wrapper'),
     chooseFileButton: () => cy.get('.choose-file-button'),
     noFileChosenLabel: () => cy.get('[aria-label="No file chosen"]'),
     uploadImageProgressBar: () => cy.get('[class*="ProgressBar"]'),
-    uploadedFileNameLabel: () => cy.get('[class*="SimpleImageUploaderstyles__SelectedFile-"]'),
+    uploadedFileNameLabel: () => cy.get('[class*="UploadImagestyles__SelectedFileWithIcon"]'),
+    deleteImageIcon: () => cy.get('[aria-label="Delete image"]'),
+    errorMessage: () => cy.get('.ErrorMessageContainer')
 }
 
 const steps = {
@@ -20,6 +22,20 @@ const steps = {
     uploadFile: (file) => {
         backgroundImageUploadComponent.inputTypeFile()
             .attachFile(`uploads/${file}`);
+    },
+
+    deleteImage: () => {
+        backgroundImageUploadComponent.deleteImageIcon()
+            .click();
+    },
+
+    /**
+     * @param {*} fileName name of the uploaded file
+     * @description function verifies uploaded file name
+     */
+    verifyFileNameLabel: (fileName) => {
+        utilities.verifyInnerText(backgroundImageUploadComponent.uploadedFileNameLabel(), fileName);
+        utilities.verifyElementVisibilityState(backgroundImageUploadComponent.uploadedFileNameLabel(), 'visible');
     }
 }
 

package/cypress/pages/components/draggableOptionContainer.js

@@ -359,6 +359,19 @@ const steps = {
                 utilities.verifyElementVisibilityState(draggableOptionContainer.draggableOption(), 'notExist');
             });
     },
+
+    /**
+    * @param {number} groupIndex Index of group
+    * @description Verify the empty group displayed in specify correct answer section
+    */
+    verifyEmptyGroupInPreviewTab: (groupIndex) => {
+        draggableOptionContainer.groupedOptionsContainerPreviewTab()
+            .eq(groupIndex)
+            .should('be.visible')
+            .within(() => {
+                utilities.verifyElementVisibilityState(draggableOptionContainer.draggableOption(), 'notExist');
+            });
+    }
 }
 
 const tests = {