itemengine-cypress-automation 1.0.83 → 1.0.85

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 = {