itemengine-cypress-automation 1.0.239 → 1.0.240

package/cypress/e2e/ILC/TextSelection/styleAndLayoutCustomizationAccordionUnderline.js

@@ -0,0 +1,239 @@
+import { textSelectionPage } from "../../../pages";
+import { colorPopupComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const defaultColorBlocks = ['rgb(82, 0, 255)', 'rgb(0, 112, 128)', 'rgb(128, 102, 69)', 'rgb(102, 102, 102)', 'rgb(0, 0, 0)'];
+const borderBlocks = ['dashed', 'dotted', 'solid'];
+const borderBlocksInnerText = ['Dashed', 'Dotted', 'Solid'];
+const paragraphTextArray = ['All animals have a unique role to play in maintaining the balance of nature.', 'A lot of animal species exist in both, land and water. As a result, each of them has a purpose for their existence.', 'The animals divide into specific groups in biology. Amphibians are those which can live on both, land and water.', 'Mammals are ones which give birth to their offspring in the womb and have mammary glands.', 'Birds are creatures with feathers, beaks, and the ability to lay eggs.', 'Many animal species are undocumented even today.', 'Research is going on to discover new species in the far corners of the earth']
+
+
+describe('Create Item page - Text selection : Style and layout customization', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Style and layout customization accordion - Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            textSelectionPage.steps.switchTextSelectionStyle('underline');
+        });
+
+        it('When filled in text selection mode is selected, then \'Underline style\', \'Border color\' and \'Border style\' labels should be displayed in style and layout customization accordion', () => {
+            utilities.verifyInnerText(textSelectionPage.styleLabel(), 'Underline style');
+            utilities.verifyElementVisibilityState(textSelectionPage.styleLabel(), 'visible');
+            utilities.verifyInnerText(textSelectionPage.colorLabel(), 'Color');
+            utilities.verifyElementVisibilityState(textSelectionPage.colorLabel(), 'visible');
+            utilities.verifyInnerText(textSelectionPage.borderStyle(), 'Border style');
+            utilities.verifyElementVisibilityState(textSelectionPage.borderStyle(), 'visible');
+        });
+
+        it('5 color blocks and \'Edit color\' button should be displayed and the first blue color block should be selected', () => {
+            for (let index = 0; index < 5; index++) {
+                textSelectionPage.steps.verifyColorBlockBackgroundColor(index, defaultColorBlocks[index]);
+            }
+            utilities.verifyElementCount(textSelectionPage.colorBlock(), 5);
+            textSelectionPage.steps.verifyColorBlockIsSelected(0);
+            utilities.verifyInnerText(textSelectionPage.editColorButton(), 'Edit color');
+            utilities.verifyElementVisibilityState(textSelectionPage.editColorButton(), 'visible');
+        });
+
+        it('3 border style blocks button should be displayed and solid border block should be selected', () => {
+            utilities.verifyElementCount(textSelectionPage.borderBlock(), 3);
+            for (let index = 0; index < 3; index++) {
+                utilities.verifyInnerText(utilities.getNthElement(textSelectionPage.borderBlockInnerText(), index), borderBlocksInnerText[index]);
+            }
+            textSelectionPage.steps.verifyBorderBlockIsSelected(2);
+        });
+
+        it('CSS of style and layout customization accordion contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(textSelectionPage.styleLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(textSelectionPage.colorLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(textSelectionPage.borderStyle(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(textSelectionPage.editColorButton(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of style and layout customization accordion contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textSelectionPage.styleLabel().parents('.ngie-accordion-detail'));
+        });
+
+        it('When the user clicks on the edit color button in the accordion, a color popup should be displayed for the selected color block', () => {
+            textSelectionPage.steps.clickOnEditColorButton();
+            colorPopupComponent.steps.verifyColorPopupIsDisplayed();
+        });
+
+        it('A title \'Select color\' should be displayed on the color popup', () => {
+            colorPopupComponent.steps.verifyColorPopupSelectColorTitle();
+        });
+
+        it('A \'Color saturation palette\' should be displayed on the color popup along with a color picker and the color picker should be set on the selected color', () => {
+            colorPopupComponent.steps.verifyColorSaturationPaletteAndPicker();
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(255, 255, 255)');
+        });
+
+        it('A \'Color hue palette\' should be displayed on the color popup along with a color picker and the color picker should be set on the selected color', () => {
+            colorPopupComponent.steps.verifyColorHuePaletteAndPicker();
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+        });
+
+        it('A \'Selected color\' label and color block displaying the selected color should be displayed', () => {
+            colorPopupComponent.steps.verifySelectedColorLabelAndSelectedColorBlock();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(255, 255, 255)');
+        });
+
+        it('A \'Hex\' label and input field with pre-filled hex code value of the selected color should be displayed', () => {
+            colorPopupComponent.steps.verifyHexLabelAndInputField();
+            colorPopupComponent.steps.verifyHexValue('#ffffff');
+        });
+
+        it('\'Cancel\' and \'Ok\' buttons should be displayed', () => {
+            colorPopupComponent.steps.verifyColorPopupCancelButton();
+            colorPopupComponent.steps.verifyColorPopupOkButton();
+        });
+    });
+
+    describe('Color popup - Updating the selected color', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            textSelectionPage.steps.setQuestionAndOptionsInEditTab();
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[0]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[1]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[2]);
+            textSelectionPage.steps.switchTextSelectionStyle('underline');
+        });
+
+        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', () => {
+            textSelectionPage.steps.clickOnEditColorButton();
+            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');
+        });
+
+        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', () => {
+            colorPopupComponent.steps.clickInColorHuePalette();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(60, 121, 121)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(0, 255, 255)');
+            colorPopupComponent.steps.verifyHexValue('#3c7979');
+        });
+
+        it('When the user changes the color using hex code, the color in color saturation palette and color hue palette should change', () => {
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.verifyHexValue('#ff0000');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+        });
+
+        it('When the user modifies the selected color block in the color popup and clicks on \'Cancel\' button, then the popup should close, the color block should not change and the modifications in the color popup should not persist', () => {
+            colorPopupComponent.steps.clickOnCancelButton();
+            utilities.verifyElementVisibilityState(textSelectionPage.dialogBox(), 'notExist');
+            textSelectionPage.steps.verifyColorBlockBackgroundColor(0, defaultColorBlocks[0]);
+        });
+
+        it('When the user modifies the selected color block in the color popup and clicks on \'Ok\' button, then the updated color should be applied to the previously selected color block and the rest of the color blocks should remain unchanged', () => {
+            textSelectionPage.steps.clickOnEditColorButton();
+            colorPopupComponent.steps.addInputToHexInputField('#558632');
+            colorPopupComponent.steps.clickOnOkButton();
+            utilities.verifyElementVisibilityState(textSelectionPage.dialogBox(), 'notExist');
+            textSelectionPage.steps.verifyColorBlockBackgroundColor(0, 'rgb(85, 134, 50)');
+            for (let index = 1; index < 5; index++) {
+                textSelectionPage.steps.verifyColorBlockBackgroundColor(index, defaultColorBlocks[index]);
+            }
+            textSelectionPage.steps.verifyStyleInSpecifyPossibleOptions('underline', 0, 'rgb(85, 134, 50)');
+            textSelectionPage.steps.verifyStyleInSpecifyCorrectAnswer('underline', 0, 'rgb(85, 134, 50)');
+        })
+    });
+
+    describe('Selecting a different color block and border style block for underline style - edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            textSelectionPage.steps.setQuestionAndOptionsInEditTab();
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[0]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[1]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[2]);
+            textSelectionPage.steps.switchTextSelectionStyle('underline');
+        });
+
+        it('User should be able to select a different color block and the newly selected color block\'s color should be applied to selected state of text selection in edit tab', () => {
+            for (let index = 0; index < 5; index++) {
+                textSelectionPage.steps.selectColorBlock(index);
+                textSelectionPage.steps.verifyColorBlockBackgroundColor(index, defaultColorBlocks[index]);
+                textSelectionPage.steps.verifyStyleInSpecifyPossibleOptions('underline', 0, defaultColorBlocks[index]);
+                textSelectionPage.steps.verifyStyleInSpecifyCorrectAnswer('underline', 0, defaultColorBlocks[index]);
+            }
+        });
+
+        it('User should be able to select a different border style block and the newly selected border block\'s style should be applied to selected state of text selection in edit tab', () => {
+            for (let index = 0; index < 3; index++) {
+                textSelectionPage.steps.selectBorderBlock(index);
+                textSelectionPage.steps.verifyBorderBlockIsSelected(index);
+                textSelectionPage.steps.verifyBorderStyleInSpecifyPossibleOptions('underline', 0, borderBlocks[index]);
+                textSelectionPage.steps.verifyBorderStyleInSpecifyCorrectAnswer('underlie', 0, borderBlocks[index]);
+            }
+        });
+    });
+
+    describe('Selecting a different color block and border style block for underline style - preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            textSelectionPage.steps.setQuestionAndOptionsInEditTab();
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[0]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[1]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[2]);
+            textSelectionPage.steps.switchTextSelectionStyle('underline');
+        });
+
+        it('The newly selected color block\'s color should be applied to selected state of text selection in preview tab', () => {
+            for (let index = 0; index < 5; index++) {
+                textSelectionPage.steps.selectColorBlock(index);
+                textSelectionPage.steps.verifyColorBlockBackgroundColor(index, defaultColorBlocks[index]);
+                textSelectionPage.steps.switchToPreviewTab();
+                textSelectionPage.steps.selectOptionInPreviewTab(paragraphTextArray[0]);
+                textSelectionPage.steps.verifyStyleInPreview('underline', 0, defaultColorBlocks[index]);
+                textSelectionPage.steps.switchToEditTab();
+            }
+        });
+
+        it('The newly selected border block\'s style should be applied to selected state of text selection in preview tab', () => {
+            for (let index = 0; index < 3; index++) {
+                textSelectionPage.steps.selectBorderBlock(index);
+                textSelectionPage.steps.verifyBorderBlockIsSelected(index);
+                textSelectionPage.steps.switchToPreviewTab();
+                textSelectionPage.steps.selectOptionInPreviewTab(paragraphTextArray[0]);
+                textSelectionPage.steps.verifyBorderStyleInPreview('underline', 0, borderBlocks[index]);
+                textSelectionPage.steps.switchToEditTab();
+            }
+        });
+    });
+});

package/cypress/e2e/ILC/TextSelection/textSelectionStyle.js

@@ -0,0 +1,150 @@
+import { textSelectionPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const textSelectionStyleArray = ['Filled-in', 'Outline', 'Underline', 'Strikethrough'];
+const paragraphTextArray = ['All animals have a unique role to play in maintaining the balance of nature.', 'A lot of animal species exist in both, land and water. As a result, each of them has a purpose for their existence.', 'The animals divide into specific groups in biology. Amphibians are those which can live on both, land and water.', 'Mammals are ones which give birth to their offspring in the womb and have mammary glands.', 'Birds are creatures with feathers, beaks, and the ability to lay eggs.', 'Many animal species are undocumented even today.', 'Research is going on to discover new species in the far corners of the earth']
+
+describe('Create item page - Text Selection: Text Selection Style Section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Text Selection Style Section: Button and Layout Check' , () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Text selection style\' label and \'Filled-in\', \'Outline\', \'UnderLine\' and \'Strikethrough\' text selection style should be displayed', () => {
+            utilities.verifyInnerText(textSelectionPage.textSelectionStyleLabel(), 'Text selection style');
+            utilities.verifyElementVisibilityState(textSelectionPage.textSelectionStyleLabel(), 'visible');
+            textSelectionStyleArray.forEach((selectionStyle, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(textSelectionPage.textSelectionStyleButtonLabel(), index), selectionStyle);
+                utilities.verifyElementVisibilityState(utilities.getNthElement(textSelectionPage.textSelectionStyle(), index), 'visible');
+            });
+        });
+
+        it('By default \'Filled-in\' should be selected and the user should be able to select other styles as well.', () => {
+            textSelectionPage.steps.verifyTextSelectionStyleIsSelected('filled-in');
+            textSelectionPage.steps.verifyTextSelectionStyleIsNotSelected('outline');
+            textSelectionPage.steps.verifyTextSelectionStyleIsNotSelected('underline');
+            textSelectionPage.steps.verifyTextSelectionStyleIsNotSelected('strikethrough');
+
+            textSelectionPage.steps.switchTextSelectionStyle('outline');
+            textSelectionPage.steps.verifyTextSelectionStyleIsNotSelected('filled-in');
+            textSelectionPage.steps.verifyTextSelectionStyleIsSelected('outline');
+
+            textSelectionPage.steps.switchTextSelectionStyle('underline');
+            textSelectionPage.steps.verifyTextSelectionStyleIsNotSelected('outline');
+            textSelectionPage.steps.verifyTextSelectionStyleIsSelected('underline');
+
+            textSelectionPage.steps.switchTextSelectionStyle('strikethrough');
+            textSelectionPage.steps.verifyTextSelectionStyleIsNotSelected('underline');
+            textSelectionPage.steps.verifyTextSelectionStyleIsSelected('strikethrough');
+        });
+
+        it('CSS of the text selection modes and  \'Specify possible options\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(textSelectionPage.textSelectionStyleLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold,
+            });
+            utilities.verifyCSS(textSelectionPage.textSelectionStyleButtonLabel().eq(3), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+            });
+            utilities.verifyCSS(textSelectionPage.textSelectionStyleButtonLabel().eq(0), {
+                'color': css.color.unselectedOptionText,
+                'font-size': css.fontSize.default,
+            });
+        });
+
+        it('Accessibility of the text selection style', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textSelectionPage.textSelectionStyleLabel().parents('.text-selection-style'));
+        });
+    });
+
+    describe('Text Selection Style Section: \'Specify possible options\' section and \'Specify Correct answer\' Section' , () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.setQuestionAndOptionsInEditTab();
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[0]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[1]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[2]);
+        });
+
+        it('When user selects \'Filled-In\' text selection style then the selected options should be displayed with an \'Filled-In\' state in \'Specify possible options\' section and \'Specify Correct answer\' section', () => {
+            textSelectionPage.steps.verifyTextSelectionStyleIsSelected('filled-in');
+            textSelectionPage.steps.verifyStyleInSpecifyPossibleOptions('filled-in', 0, 'rgb(82, 0, 255)');
+            textSelectionPage.steps.verifyStyleInSpecifyCorrectAnswer('filled-in', 0, 'rgb(82, 0, 255)');
+        });
+
+        it('When user selects \'Outline\' text selection then style the selected options should be displayed with an \'Outline\' state in \'Specify possible options\' section and \'Specify Correct answer\' section', () => {
+            textSelectionPage.steps.switchTextSelectionStyle('outline');
+            textSelectionPage.steps.verifyTextSelectionStyleIsSelected('outline');
+            textSelectionPage.steps.verifyStyleInSpecifyPossibleOptions('outline', 0,'rgb(82, 0, 255)');
+            textSelectionPage.steps.verifyStyleInSpecifyCorrectAnswer('outline', 0, 'rgb(82, 0, 255)');
+        });
+
+        it('When user selects \'UnderLine\' text selection then style the selected options should be displayed with an \'UnderLine\' state in \'Specify possible options\' section and \'Specify Correct answer\' section', () => {
+            textSelectionPage.steps.switchTextSelectionStyle('underline');
+            textSelectionPage.steps.verifyTextSelectionStyleIsSelected('underline');
+            textSelectionPage.steps.verifyStyleInSpecifyPossibleOptions('underline', 0, 'rgb(82, 0, 255)');
+            textSelectionPage.steps.verifyStyleInSpecifyCorrectAnswer('underline', 0, 'rgb(82, 0, 255)');
+        });
+
+        it('When user selects \'Strikethrough\' text selection then style the selected options should be displayed with an \'Strikethrough\' state in \'Specify possible options\' section and \'Specify Correct answer section\'', () => {
+            textSelectionPage.steps.switchTextSelectionStyle('strikethrough');
+            textSelectionPage.steps.verifyTextSelectionStyleIsSelected('strikethrough');
+            textSelectionPage.steps.verifyStyleInSpecifyPossibleOptions('strikethrough', 0, 'rgb(82, 0, 255)');
+            textSelectionPage.steps.verifyStyleInSpecifyCorrectAnswer('strikethrough', 0, 'rgb(82, 0, 255)');
+        });
+    });
+
+    describe('Text Selection Style Section: Preview Section' , () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.setQuestionAndOptionsInEditTab();
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[0]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[1]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[2]);
+        });
+
+        it('When user selects \'Filled-In text\' selection style then the selected options should be displayed with an \'Filled-In\' state in \'Preview Section\'', () => {
+            textSelectionPage.steps.switchToPreviewTab();
+            textSelectionPage.steps.selectOptionInPreviewTab(paragraphTextArray[0]);
+            textSelectionPage.steps.verifyStyleInPreview('filled-in', 0, 'rgb(82, 0, 255)');
+            textSelectionPage.steps.switchToEditTab();
+        });
+
+        it('When user selects \'Outline\' text selection style then the selected options should be displayed with an \'Outline\' state in \'Preview Section\'', () => {
+            textSelectionPage.steps.switchTextSelectionStyle('outline');
+            textSelectionPage.steps.switchToPreviewTab();
+            textSelectionPage.steps.selectOptionInPreviewTab(paragraphTextArray[0]);
+            textSelectionPage.steps.verifyStyleInPreview('outline', 0, 'rgb(82, 0, 255)');
+            textSelectionPage.steps.switchToEditTab();
+        });
+
+        it('When user selects \'UnderLine\' text selection style then the selected options should be displayed with an \'UnderLine\' state in \'Preview Section\'', () => {
+            textSelectionPage.steps.switchTextSelectionStyle('underline');
+            textSelectionPage.steps.switchToPreviewTab();
+            textSelectionPage.steps.selectOptionInPreviewTab(paragraphTextArray[0]);
+            textSelectionPage.steps.verifyStyleInPreview('underline', 0, 'rgb(82, 0, 255)');
+            textSelectionPage.steps.switchToEditTab();
+        });
+
+        it('When user selects \'Strikethrough\' text selection style then the selected options should be displayed with an \'Strikethrough\' state in \'Preview Section\'', () => {
+            textSelectionPage.steps.switchTextSelectionStyle('strikethrough');
+            textSelectionPage.steps.switchToPreviewTab();
+            textSelectionPage.steps.selectOptionInPreviewTab(paragraphTextArray[0]);
+            textSelectionPage.steps.verifyStyleInPreview('strikethrough', 0, 'rgb(82, 0, 255)');
+        });
+    });
+});

package/cypress/e2e/ILC/ToolAudioPlayerNew/headerSection.js

@@ -92,14 +92,15 @@ describe('Create question page - Audio player: Header section and saving resourc
         });
     });
 
-    describe('Save button', () => {
+    // Need to remove comment once https://redmine.zeuslearning.com/issues/579147 is resolved
+    describe.skip('Save button', () => {
         abortEarlySetup();
         before(() => {
             audioPlayerPage.steps.navigateToCreateResource('audio player');
         });
 
         describe('Validation error messages', () => {
-            dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton();
+            dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton(['Please upload a file']);
 
             it('Validation error message(s) should be displayed below required input field(s)', () => {
                 utilities.verifyElementVisibilityState(audioPlayerPage.errorMessage(), 'visible');

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

@@ -113,11 +113,10 @@ describe('Create question page - Upload Response: Question Instructions, Support
             cy.checkAccessibility(uploadResponsePage.supportedFileTypesAccordion().parents('.upload-mode'));
         });
 
-        it('When the user deselects all the file types from the \'Supported file types\' accordion menu, then a validation text \'Error: Please select a file type.\' should be displayed', () => {
+        it('When the user deselects all the file types from the \'Supported file types\' accordion menu, then a validation text \'Error: Please select a file type.\' should not be displayed', () => {
             cy.log('Deselecting all file types to get error message.');
             uploadResponsePage.steps.uncheckDefaultSelectedFileTypes();
-            utilities.verifyInnerText(uploadResponsePage.errorMessage(), 'Error: Please select a file type.');
-            utilities.verifyElementVisibilityState(uploadResponsePage.errorMessage(), 'visible');
+            utilities.verifyElementVisibilityState(uploadResponsePage.errorMessage(), 'notExist');
         });
 
         uploadResponsePage.tests.verifyErrorMessageCSSAndA11y();

package/cypress/e2e/ILC/chartsDotsPlot/allOrNothingForAllViews.smoke.js

@@ -115,7 +115,7 @@ describe('Create Item page - Charts - Dot: All or nothing ', () => {
                 });
             };
 
-            //Remove the skip after https://redmine.zeuslearning.com/issues/570904 is resolved
+            //Note: Remove comment after https://redmine.zeuslearning.com/issues/570904 is resolved
             it.skip('When the user selects \'Grading\' view without attempting the question, then by default correct dot column should have correct icons, incorrect dot column should have incorrect icons, the correct answer should be displayed in the correct answer section number line axis and correct/incorrect status message should not be displayed', () => {
                 if (view === 'Grading view') {
                     studentViewPage.steps.submitResponse();

package/cypress/e2e/ILC/chartsDotsPlot/headerSection.js

@@ -1,5 +1,5 @@
 import abortEarlySetup from "../../../support/helpers/abortEarly";
-import { chartsDotPlotPage } from "../../../pages";
+import { chartsDotPlotPage, dialogBoxBase } from "../../../pages";
 import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
 
@@ -98,13 +98,29 @@ describe('Create item page - Charts - Dot plot: Header section and saving questi
             chartsDotPlotPage.steps.selectDotPlot();
         });
 
+        describe('Validation error messages', () => {
+            dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton(['Please set points']);
 
-        chartsDotPlotPage.tests.verifyCreateItemWrapperContentsA11y();
+            it('Validation error messages should be displayed below required input fields', () => {
+                chartsDotPlotPage.steps.verifyQuestionInstructionsErrorMessageIsNotDisplayed();
+                chartsDotPlotPage.steps.verifyWarningIconOnRequiredFields(['Please set points']);
+                chartsDotPlotPage.steps.verifySpecifyCorrectAnswerErrorIconNotExists();
+            });
+
+            it('Validation error messages should disappear when required input fields are filled', () => {
+                chartsDotPlotPage.steps.allotPoints(10);
+                chartsDotPlotPage.steps.verifyErrorMessageIsNotDisplayed();
+            });
 
-        it('When user clicks on "Save question" button, then the question should get saved and a snackbar with text \'Saved successfully!\' should be displayed', () => {
-            chartsDotPlotPage.steps.saveAQuestionAndVerifySnackbar();
+            chartsDotPlotPage.tests.verifyCreateItemWrapperContentsA11y();
         });
 
-        chartsDotPlotPage.tests.verifySavedSuccessfullySnackbarCSSAndA11y();
+        describe('Saving a question', () => {
+            it('When user clicks on "Save question" button, then the question should get saved and a snackbar with text \'Saved successfully!\' should be displayed', () => {
+                chartsDotPlotPage.steps.saveAQuestionAndVerifySnackbar();
+            });
+
+            chartsDotPlotPage.tests.verifySavedSuccessfullySnackbarCSSAndA11y();
+        });
     });
 });

package/cypress/pages/components/autoScoredScoringPreviewTab.js

@@ -22,6 +22,7 @@ const steps = {
         autoScoredScoringPreviewTab.gradingViewRadioButton()
             .click()
             .should('be.checked');
+        cy.wait(500);
     },
 
     switchToStudentView: () => {

package/cypress/pages/components/autoScoredSetCorrectAnswerSection.js

@@ -272,17 +272,6 @@ const tests = {
         });
     },
 
-    verifyWarningPopupAndTabNavigationWhenNoPointsAddedInAlternateTab: () => {
-        it('When user clicks on Correct tab when all the mandatory fields are not filled in Alternate tab a warning popup should be displayed and on closing the popup user should be on the Alternate 2 tab.', () => {
-            autoScoredSetCorrectAnswerSection.correctTab()
-                .click();
-            dialogBoxBase.steps.allFieldsRequiredWarningPopupContents();
-            dialogBoxBase.steps.closeWarningPopup();
-            autoScoredSetCorrectAnswerSection.alternateAnswerTab(2)
-                .should('have.attr', 'aria-selected', 'true');
-        });
-    },
-
     verifyA11yOfAlternateAnswerTab: () => {
         it('Accessibility of \'Alternate\' answer tab', { tags: 'a11y' }, () => {
             cy.checkAccessibility(autoScoredSetCorrectAnswerSection.correctTab().parents('[class*="styles__AnswerTabWrapper"]'));

package/cypress/pages/components/autoScoredSpecifyCorrectAnswerSection.js

@@ -317,9 +317,15 @@ const tests = {
                 .verifyPseudoClassBeforeProperty('color', css.color.activeButtons);
         });
 
-        it('If user has not selected correct answer in the correct accordion, the user should get a warning popup', () => {
-            autoScoredSpecifyCorrectAnswerSection.steps.clickOnAddAlternativeAnswerButton();
-            dialogBoxBase.steps.allFieldsRequiredWarningPopupContents();
+        it('If user has not selected correct answer in the correct accordion, then the Add alternative answer button should be in disabled state', () => {
+            utilities.verifyElementDisabled(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton());
+        });
+
+        it('When user hovers over the disabled \'Add alternative answer\' button then \'Please set a correct answer\' message should be displayed in a tooltip', () => {
+            autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton()
+                .realHover();
+            utilities.verifyInnerText(commonComponents.tooltipText(), 'Please set a correct answer');
+            utilities.hoverAwayFromElement(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton());
         });
 
         it('CSS of warning popup', { tags: 'css' }, () => {
@@ -341,38 +347,14 @@ const tests = {
         it('Accessibility of warning popup', { tags: 'a11y' }, () => {
             cy.checkAccessibility(dialogBoxBase.dialogBox());
         });
-
-        it('Warning popup should close on clicking the Close icon button', () => {
-            dialogBoxBase.steps.closeWarningPopup();
-            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
-        });
-
-        it('\'Error: Please set a correct answer.\' validation error messages should be displayed in the correct accordion, points error message should not be displayed', () => {
-            autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
-                .within(() => {
-                    utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
-                });
-            scoringSectionBaseEditTab.pointsWrapper()
-                .within(() => {
-                    utilities.verifyElementVisibilityState(scoringSectionBaseEditTab.pleaseEnterPointsErrorMessage(), 'notExist');
-                });
-            if (questionType != 'list ordering' && questionType != 'short text response' && questionType != 'text entry math' && questionType != 'text selection' && questionType != 'fill in the gaps with text' && questionType != 'fill in the gaps over image text') {
-                steps.verifySpecifyCorrectAnswerErrorMessage();
-            }
-            else if (questionType === 'short text response' || questionType === 'fill in the gaps with text' || questionType === 'fill in the gaps over image text' || questionType === 'text entry math') {
-                utilities.verifyInnerText(utilities.getNthElement(commonComponents.errorMessage(), -1), 'Error: Answer is required.');
-            } else if (questionType === 'text selection') {
-                utilities.verifyInnerText(commonComponents.alertMessage(), 'Error: Please set a correct answer.');
-            }
-        });
     },
 
     verifyWarningPopupAndAccordionNavigationWhenNoPointsAddedInAlternativeAccordion: () => {
         it('When user tries to expand correct accordion when all the mandatory fields are not filled in the alternative accordion, then a warning popup should be displayed and on closing the popup, alternative 2 accordion should be in expanded state', () => {
             autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
                 .click();
-            dialogBoxBase.steps.allFieldsRequiredWarningPopupContents();
-            dialogBoxBase.steps.closeWarningPopup();
+            //TODO: Need to add error message according to question types
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'exist');
             autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
                 .eq(1)
                 .should('have.attr', 'aria-expanded', 'true');

package/cypress/pages/components/draggableOptionsStyleAndLayoutComponent.js

@@ -10,7 +10,7 @@ const selectors = {
     noneDragHandleIconButton: () => cy.get('button[aria-label="none drag handle icon"]'),
     fillColorLabel: () => cy.get('.draggable-options-color-wrapper .sub-section-label').eq(0),
     borderColorLabel: () => cy.get('.draggable-options-color-wrapper .sub-section-label').eq(1),
-    colorBlock: () => cy.get('.draggable-options-color-wrapper .color-picker-block'),
+    colorBlock: () => cy.get('.draggable-options-color-wrapper .color-grid-wrapper .color-picker-block'),
     editColorButton: () => cy.get('.draggable-options-color-wrapper button[aria-label="edit color"]'),
     borderStyleLabel: () => cy.get('.options-border-style .options-label').eq(1),
     dashedBorderStyleToggleButton: () => cy.get('[data-ngie-testid="dashed-toggle-button"]').eq(1),

package/cypress/pages/components/figCommonStyleAndLayoutComponent.js

@@ -7,7 +7,7 @@ const selectors = {
     componentContainerLabel: () => cy.get('[class*="styles__SectionWrapper"][class*="label"]').eq(0),
     fillColorLabel: () => cy.get('.sub-section-label').eq(0),
     borderColorLabel: () => cy.get('.sub-section-label').eq(1),
-    colorBlock: () => cy.get('.color-picker-block'),
+    colorBlock: () => cy.get('.color-grid-wrapper .color-picker-block'),
     editColorButton: () => cy.get('button[aria-label="edit color"]'),
     borderStyleLabel: () => cy.get('.options-border-style .options-label'),
     dashedBorderStyleToggleButton: () => cy.get('[data-ngie-testid="dashed-toggle-button"]').eq(0),

package/cypress/pages/components/fillInTheGapsDropdownCommonComponent.js

@@ -764,10 +764,9 @@ const tests = {
         });
 
         //Note: the expand and close dropdown does not work hence selecting one option here, the error message appears
-        it('When user expands and collapses the dropdown without selecting any option, \'Error: Please set a correct answer.\' error message should be displayed', () => {
+        it('When user expands and collapses the dropdown without selecting any option, \'Error: Please set a correct answer.\' error message should not be displayed', () => {
             fillInTheGapsDropdownCommonComponent.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, 'Flower');
-            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
-            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Please set a correct answer.');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
         });
 
         it('When the user selects any option from the dropdown, then error message should disappear and that option should be displayed on the dropdown', () => {

package/cypress/pages/components/fillInTheGapsTextCommonComponent.js

@@ -534,6 +534,7 @@ const steps = {
     addAlternateAnswerInResponseAccordion: (responseAccordionIndex) => {
         utilities.getNthElement(fillInTheGapsTextCommonComponent.responseAccordionAddAlternateButton(), responseAccordionIndex)
             .click();
+        cy.wait(1000)
     },
 
     /**
@@ -1236,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', () => {