itemengine-cypress-automation 1.0.248-23rdSeptUpdates-8103a8f.0 → 1.0.249-repoUpdated26thSept-7283964.0

package/cypress/e2e/ILC/ListOrderingNew/styleAndLayoutCustomizationSeperateList.js

@@ -0,0 +1,344 @@
+import { listOrderingPage } from "../../../pages";
+import { colorPopupComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+
+describe('Create item page - List ordering: Style and layout Component', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Style and layout Component - Options - Fill color, border color, border style', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Reorder as a separate list');
+        });
+
+        listOrderingPage.tests.verifyStyleAndLayoutCustomizationAccordionProperties();
+
+        listOrderingPage.tests.verifyFillColorSectionContents();
+
+        listOrderingPage.tests.verifyBorderColorSectionContents();
+
+        listOrderingPage.tests.verifyBorderStyleSectionContents('Solid');
+
+        listOrderingPage.tests.verifyFillColorTooltips();
+
+        listOrderingPage.tests.verifyBorderColorTooltips();
+
+        it('When user clicks on edit color then color pop up  panel will be visible', () => {
+            listOrderingPage.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();
+        });
+
+        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', () => {
+            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('Style and Layout customization accordion: Options - Fill color, border color, border style - Edit Tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Reorder as a separate list');
+            listOrderingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        listOrderingPage.tests.verifyFillColorFunctionalityEditTab('SeperateList');
+
+        listOrderingPage.tests.verifyBorderColorFunctionalityEditTab('SeperateList');
+
+        listOrderingPage.tests.verifyBorderStyleFunctionalityEditTab('SeperateList');
+    });
+
+    describe('Style and Layout customization accordion: Options - Fill color, border color, border style - Preview Tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Reorder as a separate list');
+            listOrderingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        listOrderingPage.tests.verifyFillColorFunctionalityPreviewTab('SeperateList');
+
+        listOrderingPage.tests.verifyBorderColorFunctionalityPreviewTab('SeperateList');
+
+        listOrderingPage.tests.verifyBorderStyleFunctionalityPreviewTab('SeperateList');
+    });
+
+    describe('Style and Layout customization accordion: Options - Drag handle icon - Edit Tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Reorder as a separate list');
+            listOrderingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('\'Options\' label will be displayed', () => {
+            utilities.verifyElementVisibilityState(listOrderingPage.optionsLabel(), 'visible');
+            utilities.verifyInnerText(listOrderingPage.optionsLabel(), 'Options');
+        });
+
+        it('Drag handle icon label will be displayed with 3 options and by default the first option will be selected draggable options', () => {
+            utilities.verifyInnerText(listOrderingPage.dragHandleIconLabel(), 'Drag handle icon');
+            utilities.verifyElementCount(listOrderingPage.dragHandleOptions(), 3);
+            listOrderingPage.steps.verifyDragHandleOptionSelected(0);
+        });
+
+        it('By default, the default selected drag handle will be displayed in the specify correct answer section draggable options', () => {
+            listOrderingPage.steps.verifyDragHandleIconSpecifyCorrectAnswer('drag icon', 'SeperateList');
+        });
+
+        it('When user selects arrows drag handle icon then arrow icons will be displayed the specify correct answer section draggable options', () => {
+            listOrderingPage.steps.selectDragHandleOption(1);
+            listOrderingPage.steps.verifyDragHandleIconSpecifyCorrectAnswer('arrow icon', 'SeperateList');
+        });
+
+        it('When user selects none option then drag handles will not be displayed for the specify correct answer section draggable options', () => {
+            listOrderingPage.steps.selectDragHandleOption(2);
+            listOrderingPage.steps.verifyDragHandleIconSpecifyCorrectAnswer('none', 'SeperateList');
+        });
+    });
+
+    describe('Style and Layout customization accordion: Options - Drag handle icon - Preview Tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Reorder as a separate list');
+            listOrderingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('By default, the default selected drag handle will be displayed in the preview tab', () => {
+            listOrderingPage.steps.switchToPreviewTab();
+            listOrderingPage.steps.verifyDragHandleIconSpecifyCorrectAnswer('drag icon', 'SeperateList');
+        });
+
+        it('When user selects arrows drag handle icon then arrow icons will be displayed in preview tab', () => {
+            listOrderingPage.steps.switchToEditTab();
+            listOrderingPage.steps.selectDragHandleOption(1);
+            listOrderingPage.steps.switchToPreviewTab();
+            listOrderingPage.steps.verifyDragHandleIconSpecifyCorrectAnswer('arrow icon', 'SeperateList');
+        });
+
+        it('When user selects none option then drag handles will not be displayed in the preview tab', () => {
+            listOrderingPage.steps.switchToEditTab();
+            listOrderingPage.steps.selectDragHandleOption(2);
+            listOrderingPage.steps.switchToPreviewTab();
+            listOrderingPage.steps.verifyDragHandleIconSpecifyCorrectAnswer('none', 'SeperateList');
+        });
+    });
+
+    describe('Style and Layout customization accordion: Options - Options Style - Edit Tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Reorder as a separate list');
+            listOrderingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('\'Options style\' label will be displayed', () => {
+            utilities.verifyElementVisibilityState(listOrderingPage.optionStyleLabel(), 'visible');
+            utilities.verifyInnerText(listOrderingPage.optionStyleLabel(), 'Option style');
+        });
+
+        it('\'With Border\' and \'Without Border\' option style button will be present', () => {
+            utilities.verifyElementVisibilityState(listOrderingPage.withBorderOptionStyleButton(), 'visible');
+            utilities.verifyInnerText(listOrderingPage.withBorderOptionStyleButton(), 'With border');
+            utilities.verifyElementVisibilityState(listOrderingPage.withoutBorderOptionStyleButton(), 'visible');
+            utilities.verifyInnerText(listOrderingPage.withoutBorderOptionStyleButton(), 'Without border');
+        });
+
+        it('By default, \'With Border\' option style will be selected and the borders will be present in the specify correct answer section', () => {
+            listOrderingPage.steps.verifyWithBorderOptionStyleButtonSelected();
+            listOrderingPage.steps.verifyBorderStyleInSpecifyCorrectAnswerForSeperateList("1px solid rgb(107, 139, 255)");
+        });
+
+        it('When user selects \'Without Border\' option style the borders will not be present in the specify correct answer section', () => {
+            listOrderingPage.steps.selectWithoutBorderOptionStyleButton();
+            listOrderingPage.steps.verifyWithoutBorderOptionStyleButtonSelected();
+            listOrderingPage.steps.verifyBorderStyleInSpecifyCorrectAnswerForSeperateList("0px none rgba(0, 0, 0, 0.87)");
+        });
+
+        it('When user selects \'Without Border\' option style like \'Fill color\', \'Border color\' and \'Border style\' will be removed from style and Layout customization accordion', () => {
+            utilities.verifyElementVisibilityState(listOrderingPage.fillAndBorderColorWrapper(), 'notExist');
+        });
+    });
+
+    describe('Style and Layout customization accordion: Options - Options Style - Preview Tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Reorder as a separate list');
+            listOrderingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('By default, \'With Border\' option style will be selected and the borders will be present in the preview tab', () => {
+            listOrderingPage.steps.verifyWithBorderOptionStyleButtonSelected();
+            listOrderingPage.steps.switchToPreviewTab();
+            listOrderingPage.steps.verifyBorderStyleInSpecifyCorrectAnswerForSeperateList("1px solid rgb(107, 139, 255)");
+        });
+
+        it('When user selects \'Without Border\' option style the borders will not be present in the preview tab', () => {
+            listOrderingPage.steps.switchToEditTab();
+            listOrderingPage.steps.selectWithoutBorderOptionStyleButton();
+            listOrderingPage.steps.verifyWithoutBorderOptionStyleButtonSelected();
+            listOrderingPage.steps.switchToPreviewTab();
+            listOrderingPage.steps.verifyBorderStyleInSpecifyCorrectAnswerForSeperateList("0px none rgb(0, 0, 46)");
+        });
+    });
+
+    describe('Style and Layout customization accordion: Options - List Container - Edit Tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Reorder as a separate list');
+            listOrderingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('\'List container\' label will be displayed', () => {
+            utilities.verifyElementVisibilityState(listOrderingPage.listContainerAndDropDownLabel(), 'visible');
+            utilities.verifyInnerText(listOrderingPage.listContainerAndDropDownLabel(), 'List container');
+        });
+
+        it('"Fill color" label and two color blocks and an "Edit color" button should be displayed. The selected color block should be of color "rgb(245, 248, 255)" and the other color block should have "No color"', () => {
+            utilities.verifyInnerText(listOrderingPage.fillColorLabelListContainerAndDropDown(), 'Fill color');
+            listOrderingPage.steps.verifyColorBlockColor(4, "rgb(245, 248, 255)");
+            listOrderingPage.steps.verifyColorBlockSelectedState(4);
+            listOrderingPage.steps.verifyColorBlockColor(5, css.color.none);
+            utilities.verifyInnerText(utilities.getNthElement(listOrderingPage.editColorButton(), 2), 'Edit color');
+            utilities.verifyElementVisibilityState(listOrderingPage.editColorButton().eq(2), 'visible');
+        });
+
+        listOrderingPage.tests.verifyFillColorFunctionalityOfListContainerOrDropDownEditTab("ListContainer");
+
+        it('"Border color" label and two color blocks and an "Edit color" button should be displayed. The selected color block should be of color "rgb(82, 0, 255)" and the other color block should have "No color"', () => {
+            utilities.verifyInnerText(listOrderingPage.borderColorLabelListContainerAndDropDown(), 'Border color');
+            utilities.verifyInnerText(utilities.getNthElement(listOrderingPage.editColorButton(), 3), 'Edit color');
+            utilities.verifyElementVisibilityState(listOrderingPage.editColorButton().eq(3), 'visible');
+            listOrderingPage.steps.verifyColorBlockColor(6, "rgb(82, 0, 255)");
+            listOrderingPage.steps.verifyColorBlockSelectedState(6);
+            listOrderingPage.steps.verifyColorBlockColor(7, css.color.none);
+        });
+
+        listOrderingPage.tests.verifyBorderColorFunctionalityOfListOrDropDownContainerEditTab("ListContainer");
+
+        it(`"Border style" label and three toggle buttons should be displayed - "Dotted", "Solid", "None". By default "Dotted" button should be in selected state`, () => {
+            utilities.verifyInnerText(listOrderingPage.borderStyleLabelListContainer(), 'Border style');
+            utilities.verifyElementVisibilityState(listOrderingPage.dottedBorderStyleToggleButtonListContainerAndDropDown(), 'visible');
+            utilities.verifyInnerText(listOrderingPage.dottedBorderStyleToggleButtonListContainerAndDropDown(), 'Dotted');
+            utilities.verifyElementVisibilityState(listOrderingPage.solidBorderStyleToggleButtonListContainerAndDropDown(), 'visible');
+            utilities.verifyInnerText(listOrderingPage.solidBorderStyleToggleButtonListContainerAndDropDown(), 'Solid');
+            utilities.verifyElementVisibilityState(listOrderingPage.noneBorderStyleToggleButton(), 'visible');
+            utilities.verifyInnerText(listOrderingPage.noneBorderStyleToggleButton(), 'None');
+            listOrderingPage.steps.verifyBorderStyleToggleButtonSelectedStateListContainer('Dotted');
+        });
+
+        listOrderingPage.tests.verifyBorderStyleFunctionalityOfListContainerOrDropDownContainerEditTab("ListContainer");
+    });
+
+    describe('Style and Layout customization accordion: Options - List Container - Preview Tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Reorder as a separate list');
+            listOrderingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        listOrderingPage.tests.verifyFillColorFunctionalityOfListContainerPreviewTab("ListContainer");
+
+        listOrderingPage.tests.verifyBorderColorFunctionalityOfListConatinerPreviewTab("ListContainer");
+
+        listOrderingPage.tests.verifyBorderStyleFunctionalityOfListContainerPreviewTab("ListContainer");
+    });
+
+    describe('Style and Layout customization accordion: Options - Draggable Option Panel - Edit Tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Reorder as a separate list');
+            listOrderingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('\'Draggable Option Panel\' label and \'Panel placement\' label will be displayed', () => {
+            utilities.verifyElementVisibilityState(listOrderingPage.draggableOptionPanelLabel(), 'visible');
+            utilities.verifyInnerText(listOrderingPage.draggableOptionPanelLabel(), 'Draggable option panel');
+            utilities.verifyElementVisibilityState(listOrderingPage.panelPlacementLabel(), 'visible');
+            utilities.verifyInnerText(listOrderingPage.panelPlacementLabel(), 'Panel placement');
+        });
+
+        it('\'Left\' toggle button and \'Right\' toggle button should be visible and by default \'Left\' toggle button is selected', () => {
+            utilities.verifyElementVisibilityState(listOrderingPage.leftToggleButton(), 'visible');
+            utilities.verifyElementVisibilityState(listOrderingPage.rightToggleButton(), 'visible');
+            listOrderingPage.steps.verifyLeftToggleButtonSelected();
+            utilities.verifyElementVisibilityState(listOrderingPage.pannelPlacementRightToggle(), 'notExist');
+        });
+
+        it('When \'Right\' toggle button is selected then the options should shift to the right side of the container in specify correct answer section', () => {
+            listOrderingPage.steps.selectRightToggleButton();
+            listOrderingPage.steps.verifyRightToggleButtonSelected();
+            utilities.verifyElementVisibilityState(listOrderingPage.pannelPlacementRightToggle(), 'visible');
+        });
+    });
+
+    describe('Style and Layout customization accordion: Options - Draggable Option Panel - Preview Tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listOrderingPage.steps.navigateToCreateQuestion('list ordering');
+            cy.barsPreLoaderWait();
+            listOrderingPage.steps.selectOrderingLayoutOption('Reorder as a separate list');
+            listOrderingPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('By default \'Left\' toggle button is selected and options should be at left side of the container in preview tab', () => {
+            listOrderingPage.steps.verifyLeftToggleButtonSelected();
+            listOrderingPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(listOrderingPage.pannelPlacementRightToggle(), 'notExist');
+        });
+
+        it('When \'Right\' toggle button is selected then the options should shift to the right side of the container in preview tab', () => {
+            listOrderingPage.steps.switchToEditTab();
+            listOrderingPage.steps.selectRightToggleButton();
+            listOrderingPage.steps.verifyRightToggleButtonSelected();
+            listOrderingPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(listOrderingPage.pannelPlacementRightToggle(), 'visible');
+        });
+    });
+});      

package/cypress/e2e/ILC/Matching/questionInstructionsAndPromptSection.js

@@ -56,7 +56,7 @@ describe('Create Item page - Matching : Question Instructions and prompt section
                 'font-size': css.fontSize.normal,
                 'font-weight': css.fontWeight.semibold
             })
-            utilities.getNthElement(matchingPage.promptInputFieldWrapper(), 0)
+           utilities.getNthElement( matchingPage.promptInputFieldWrapper(),0)
                 .within(() => {
                     utilities.verifyCSS(matchingPage.dragHandleButton(), {
                         'color': css.color.secondaryBtnActive,
@@ -76,7 +76,7 @@ describe('Create Item page - Matching : Question Instructions and prompt section
                 'font-size': css.fontSize.normal,
                 'font-weight': css.fontWeight.semibold
             });
-            utilities.verifyCSS(utilities.getNthElement(matchingPage.promptInputField(), 0), {
+            utilities.verifyCSS(utilities.getNthElement( matchingPage.promptInputField(),0), {
                 'color': css.color.text,
                 'font-size': css.fontSize.default,
                 'font-weight': css.fontWeight.regular
@@ -116,22 +116,9 @@ describe('Create Item page - Matching : Question Instructions and prompt section
             matchingPage.steps.verifyPromptContents(2);
         });
 
-        it('When user focus in and out of any of the \'Prompt\' input field without typing anything, then an error message \'Error: Prompt is required\' error message should be displayed', () => {
+        it('When user focus in and out of any of the \'Prompt\' input field without typing anything, then an error message \'Error: Prompt is required\' error message should disappear', () => {
             matchingPage.steps.focusInAndFocusOutOfPromptInputField(1);
-            utilities.verifyInnerText(matchingPage.errorMessage(), 'Error: Prompt is required');
-            utilities.verifyElementVisibilityState(matchingPage.errorMessage(), 'visible');
-        });
-
-        it('CSS of error message', { tags: 'css' }, () => {
-            utilities.verifyCSS(matchingPage.errorMessage(), {
-                'color': css.color.errorText,
-                'font-size': css.fontSize.small,
-                'font-weight': css.fontWeight.regular
-            });
-        });
-
-        it('Accessibility of error message', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(matchingPage.errorMessage());
+            matchingPage.steps.verifyErrorMessageIsNotDisplayed();
         });
 
         it('When user enters text in question prompt input field then error message should disappear', () => {

package/cypress/e2e/ILC/UploadResponse/thumbNail.smoke.js

@@ -0,0 +1,121 @@
+import { uploadResponsePage, itemPreviewPage} from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+let previewContentViews = ['Question preview', 'Item view', 'Item preview', 'Student view'];
+const views = utilities.getViews(previewContentViews);
+var itemReferenceID = "";
+const filename = ['sample.csv', 'sample.xlsx', 'sample.gif', 'sample.jpg', 'sample.pdf', 'image.png', 'sample.ppt', 'sample.pub', 'sample.rtf', 'sample.txt', 'sample.doc', 'sample.xps', 'sample.zip', 'sample.heif', 'sample.heic'];
+const fileThumbNail = ['notExist', 'notExist', 'visible', 'visible', 'notExist', 'visible', 'notExist', 'notExist', 'notExist', 'notExist', 'notExist', 'notExist', 'notExist', 'notExist', 'notExist']
+
+describe('Create item page - Upload response : Preview contents', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    views.forEach((view) => {
+        describe(`Preview tab contents - ${view}`, { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                switch (view) {
+                    case 'Question preview':
+                        cy.log('Navigating to Upload response question type');
+                        uploadResponsePage.steps.navigateToCreateQuestion('upload response');
+                        cy.barsPreLoaderWait();
+                        uploadResponsePage.steps.allotPoints(10);
+                        uploadResponsePage.steps.addTextInQuestionInstructionsInputField('Question text');
+                        uploadResponsePage.steps.setMaximumNumberOfFiles(1);
+                        uploadResponsePage.steps.expandSupportedFileTypesAccordion();
+                        uploadResponsePage.steps.selectSupportedFileTypeOption(23);
+                        uploadResponsePage.steps.selectSupportedFileTypeOption(24);
+                        uploadResponsePage.steps.switchToPreviewTab();
+                        break;
+                    case 'Item view':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID[0])}`);
+                        break;
+                    case 'Item preview':
+                        cy.visit(`/item-engine/demo/edit-item/${utilities.base64Encoding(itemReferenceID[0])}`);
+                        uploadResponsePage.steps.switchToPreviewTab();
+                        break;
+                    case 'Student view':
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID[0])}`);
+                        break;
+                };
+            });
+
+            if (view === 'Question preview') {
+                after(() => {
+                    uploadResponsePage.steps.clickOnSaveQuestionButton();
+                    utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                    itemReferenceID = itemPreviewPage.steps.getItemReferenceID();
+                });
+            };
+
+            it('Question instructions should be visible', () => {
+                utilities.verifyInnerText(uploadResponsePage.questionInstructionsText(), 'Question text');
+                utilities.verifyElementVisibilityState(uploadResponsePage.questionInstructionsText(), 'visible');
+            });
+
+            it('When user uploads file, then uploaded file name should be displayed, file count should get updated and thumb nail of the image should be visible', () => {
+                uploadResponsePage.steps.uploadFile('uploads/highlightImage.jpg');
+                uploadResponsePage.steps.verifyThumbNailExistOrNotExist('highlightImage.jpg', 'visible');
+            });
+
+            it('CSS of Thumb nail and File name in preview tab', { tags: 'css' }, () => {
+                utilities.verifyCSS(uploadResponsePage.imageThumbNail(), {
+                    'box-sizing': 'border-box',
+                    'min-height': 'auto',
+                    'min-width': 'auto'
+                });
+                utilities.verifyCSS(uploadResponsePage.fileName(), {
+                    'color': 'rgb(0, 0, 255)',
+                    'font-size': '16px',
+                    'font-weight': '400'
+                });
+            });
+
+            //Failed due to https://weldnorthed.atlassian.net/browse/IEI-4343
+            it.skip('Accessibility of Preview tab', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(uploadResponsePage.questionWrapperPreviewTab());
+            });
+
+            it('When user clicks on the thumbnail then popup should open, and on clicking the close button the popup should close and the uploaded files should be displayed', () => {
+                uploadResponsePage.steps.clickOnImageThumbNail();
+                uploadResponsePage.steps.verifyImagePopUpDetail();
+                uploadResponsePage.steps.closeImagePopup();
+                uploadResponsePage.steps.verifyThumbNailExistOrNotExist('highlightImage.jpg', 'visible');
+                utilities.verifyElementCount(uploadResponsePage.fileName(), 1);
+            });
+
+            it('When user clicks on the file name then popup should open, and on clicking the close button the popup should close and the uploaded files should be displayed', () => {
+                uploadResponsePage.steps.clickOnFileName();
+                uploadResponsePage.steps.verifyImagePopUpDetail();
+                uploadResponsePage.steps.closeImagePopup();
+                uploadResponsePage.steps.verifyThumbNailExistOrNotExist('highlightImage.jpg', 'visible');
+                utilities.verifyElementCount(uploadResponsePage.fileName(), 1);
+            });
+
+            it('When user uploads different file types then only image files should be displayed with thumbnail', () => {
+                for (let number = 0; number < 13; number++) {
+                    uploadResponsePage.steps.deleteFile();
+                    uploadResponsePage.steps.clickAcceptButtonInPopup();
+                    uploadResponsePage.steps.uploadFile(`uploads/${filename[number]}`);
+                    uploadResponsePage.steps.verifyThumbNailExistOrNotExist(filename[number], fileThumbNail[number]);
+                }
+            });
+
+            it('When user uploads a file in .heif or .heic format then and info icon with tool tip should be present and image thumb nail should not be present', () => {
+                for (let number = 13; number < 15; number++) {
+                    uploadResponsePage.steps.deleteFile();
+                    uploadResponsePage.steps.clickAcceptButtonInPopup();
+                    uploadResponsePage.steps.uploadedFileContentsNotExistPreviewTab();
+                    uploadResponsePage.steps.uploadFile(`uploads/${filename[number]}`);
+                    uploadResponsePage.steps.verifyThumbNailExistOrNotExist(filename[number], fileThumbNail[number]);
+                    utilities.verifyElementVisibilityState(uploadResponsePage.unSupportedFileInfoIcon(), 'visible');
+                    uploadResponsePage.unSupportedFileInfoIcon()
+                        .verifyTooltip('The image format (HEIC/HEIF) is not supported on your current device or operating system version. Please click the link to download and view the image.');
+                }
+            });
+        });
+    });
+});

package/cypress/e2e/ILC/VideoResponseNew/editTabBasicSection.js

@@ -162,7 +162,8 @@ describe('Create item page - Video response: Question instructions, Maximum reco
 
         it('When the user focuses in and out of the empty \'Maximum recording duration\' input field, \'Error: Maximum recording duration is required.\' validation error should be displayed below the \'Maximum recording duration\' input field', () => {
             videoResponsePage.steps.clearMaximumRecordingDurationInputField();
-            utilities.verifyInnerText(videoResponsePage.errorMessage(), 'Error: Maximum recording duration is required.');
+            //Failing due to https://redmine.zeuslearning.com/issues/573549
+            // utilities.verifyInnerText(videoResponsePage.errorMessage(), 'Error: Maximum recording duration is required.');
             utilities.verifyElementVisibilityState(videoResponsePage.errorMessage(), 'visible');
         });
 
@@ -207,7 +208,8 @@ describe('Create item page - Video response: Question instructions, Maximum reco
 
         it('When the user focuses in and out of the empty \'Maximum recording duration\' input field, \'Error: Maximum recording duration is required.\' validation error should be displayed below the \'Maximum recording duration\' input field', () => {
             videoResponsePage.steps.clearMaximumRecordingDurationInputField();
-            utilities.verifyInnerText(videoResponsePage.errorMessage(), 'Error: Maximum recording duration is required.');
+            //Failing due to https://redmine.zeuslearning.com/issues/573549
+            // utilities.verifyInnerText(videoResponsePage.errorMessage(), 'Error: Maximum recording duration is required.');
             utilities.verifyElementVisibilityState(videoResponsePage.errorMessage(), 'visible');
         });
 
@@ -221,7 +223,8 @@ describe('Create item page - Video response: Question instructions, Maximum reco
         it('When the user has set \'Maximum recording duration\' to \'0\' (zero), a validation message \'Error: Value must be greater than 0 mins.\' should be displayed', () => {
             videoResponsePage.steps.setMaximumRecordingDuration(0);
             videoResponsePage.steps.verifyMaximumRecordingDuration(0);
-            utilities.verifyInnerText(videoResponsePage.errorMessage(), 'Error: Value must be greater than 0 mins.');
+            // Uncomment once https://redmine.zeuslearning.com/issues/583618 is resolved
+            // utilities.verifyInnerText(videoResponsePage.errorMessage(), 'Error: Value must be greater than 0 mins.');
             utilities.verifyElementVisibilityState(videoResponsePage.errorMessage(), 'visible');
         });
 

package/cypress/fixtures/drawingToolbarOptionsAdditionalOptionsAndSpecialAndMathCharacters.js

@@ -32,8 +32,8 @@ export const drawingToolbarOptionsAndAdditionalOptions = {
             toolType: 'dialog'
         },
         {
-            displayName: 'Upload image ',
-            tooltipText: 'The \'Upload image \' tool uploads an image.',
+            displayName: 'Insert image',
+            tooltipText: 'The \'Insert image\' tool uploads an image.',
             toolType: 'dialog'
         },
         {

package/cypress/pages/components/fillInTheGapsTextCommonComponent.js

@@ -1237,8 +1237,7 @@ const tests = {
 
         it('When user focuses in and out of the response accordion \'Answer\' input field, \'Error: Answer is required.\' error message should be displayed', () => {
             fillInTheGapsTextCommonComponent.steps.focusInAndFocusOutOfResponseAnswerInputFieldSpecifyCorrectAnswer(0, 0);
-            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
-            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Answer is required.');
+            commonComponents.steps.verifyErrorMessageIsNotDisplayed();
         });
 
         it('When gives an input to \'Answer\' input field, then error message should disappear', () => {

package/cypress/pages/components/imageCanvasComponent.js

@@ -264,8 +264,7 @@ const steps = {
         imageCanvasComponent.canvasWidthInputField()
             .invoke('attr', 'value')
             .then((value) => {
-                imageCanvasComponent.canvasImage()
-                    .should('have.css', 'width', `${value}px`);
+                imageCanvasComponent.canvasImage().should('have.css', 'width', `${value}px`);
             });
     },
 
@@ -792,11 +791,10 @@ const tests = {
      * @param {"text container"|"dropzone"} response value for the error message
      */
     verifyInsertAndDeleteResponseAreaFunctionality: (response) => {
-        it(`When user clicks on close button for response container, then response container should be removed from canvas and error message should be displayed`, () => {
+        it(`When user clicks on close button for response container, then response container should be removed from canvas and error message should not be displayed`, () => {
             imageCanvasComponent.steps.removeResponseArea(0);
             utilities.verifyElementVisibilityState(imageCanvasComponent.responseAreaWrapper(), 'notExist');
-            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
-            utilities.verifyInnerText(commonComponents.errorMessage(), `Error: Please insert a ${response}.`);
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
         });
 
         it('When user adds response container, then error message should disappear', () => {
@@ -856,8 +854,7 @@ const tests = {
             }
             utilities.verifyElementCount(imageCanvasComponent.responseArea(), 0);
             imageCanvasComponent.steps.verifyUndoButtonDisabled();
-            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
-            utilities.verifyInnerText(commonComponents.errorMessage(), `Error: Please insert a ${response}.`);
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
         });
 
         it('When the user reaches the latest state by performing redo actions, the \'Redo\' button should get disabled and error message should disappear', () => {