itemengine-cypress-automation 1.0.253-TEMSmokeTestUpdates-82559a5.0 → 1.0.254-UpdatedRepo4thNov-c5b0050.0

package/cypress/e2e/ILC/EssayResponse/essayResponseCustomizeFormattingOptions4.js

@@ -0,0 +1,261 @@
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { essayResponsePage, } from "../../../pages";
+import utilities from "../../../support/helpers/utilities";
+import { colorPopupComponent } from "../../../pages/components";
+const css = Cypress.env('css');
+const fontSizes = { 'Tiny': '12', 'Small': '14', 'Default': '16', 'Normal': '18', 'Big': '22', 'Huge': '26' };
+
+describe('Create question page - Essay Response: Customize formatting options (for student player) toolbar options', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Text Color formatting option - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+        });
+
+        it('By default \'Text Color\' option should be not selected ', () => {
+            essayResponsePage.steps.verifyCustomizeFormattingOptionNotSelected(['Font Color']);
+        });
+
+        it('When the user clicks on the \'Text Color\' button, then \'Default font colors\' label along with three color option, add color button and \'Enable color picker\' checkbox should be visible', () => {
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Font Color']);
+            utilities.verifyTextContent(essayResponsePage.defaultColorLabel(), 'Default font colors');
+            utilities.verifyElementCount(essayResponsePage.colorOptionEditTab(), 3);
+            utilities.verifyElementVisibilityState(essayResponsePage.colorPicker(), 'visible');
+            utilities.verifyInnerText(essayResponsePage.enableColorPickerLabel(), 'Enable color picker');
+            utilities.verifyElementVisibilityState(essayResponsePage.enableColorPickerLabel(), 'visible');
+            utilities.verifyElementVisibilityState(essayResponsePage.enableColorPickerCheckbox(), 'visible');
+        });
+
+        it('When the user click on the \'Add color\' button and modifies color for the selected color block and clicks on ok button, new color option should be visible', () => {
+            essayResponsePage.steps.clickOnColorPicker();
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            utilities.verifyElementCount(essayResponsePage.colorOptionEditTab(), 4);
+        });
+
+    });
+
+    describe('Highlight Text formatting option - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+        });
+
+        it('By default \'Highlight Text\' option should be not selected ', () => {
+            essayResponsePage.steps.verifyCustomizeFormattingOptionNotSelected(['Highlight Text']);
+        });
+
+        it('When the user click on the \'Highlight Text\' button,then \'Default highlight colors\' label along with one color option ,add color button and \'Enable color picker\'checkbox should be visible', () => {
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Highlight Text']);
+            utilities.verifyTextContent(essayResponsePage.defaultColorLabel(), 'Default highlight colors');
+            utilities.verifyElementCount(essayResponsePage.colorOptionEditTab(), 1);
+            utilities.verifyElementVisibilityState(essayResponsePage.colorPicker(), 'visible');
+            utilities.verifyInnerText(essayResponsePage.enableColorPickerLabel(), 'Enable color picker');
+            utilities.verifyElementVisibilityState(essayResponsePage.enableColorPickerLabel(), 'visible');
+            utilities.verifyElementVisibilityState(essayResponsePage.enableColorPickerCheckbox(), 'visible');
+        });
+
+        it('When the user click on the \'Add color\' button and modifies color for the selected color block and click on ok button,new color option should be visible', () => {
+            essayResponsePage.steps.clickOnColorPicker();
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            utilities.verifyElementCount(essayResponsePage.colorOptionEditTab(), 2);
+        });
+
+    });
+
+    describe('Font Size formatting option - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Font size']);
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.enterInputInResponseField('{selectAll}');
+        });
+
+        it('By default fontsize of response filed text is 16 px ', () => {
+            essayResponsePage.steps.verifyResponseFieldTextFontSizeNew(16);
+        });
+
+        it(`When the user selects the \'Font size\' toolbar option,then open a list of ${Object.keys(fontSizes).length} options - ${Object.keys(fontSizes).join(',')} is should be display and by default \'Default\' option should be selected`, () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Font Size');
+            Object.values(fontSizes).forEach((option) => {
+                essayResponsePage.steps.verifyFontSizeListContent(option);
+            });
+            essayResponsePage.steps.selectFontSizeOption(16);
+            essayResponsePage.steps.clearResponseField();
+        });
+
+        Object.values(fontSizes).forEach((option) => {
+            it(`When the user selects \'${option}\' option from the font size list, then font size of the response field text should be change to ${fontSizes[option]} accordingly`, () => {
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Font Size');
+                essayResponsePage.steps.selectFontSizeOption(`${option}`);
+                essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+                essayResponsePage.steps.verifyResponseFieldTextFontSize(`${option}`);
+                essayResponsePage.steps.clearResponseField();
+            });
+        });
+    });
+
+    describe('Highlight Text formatting option - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Highlight Text']);
+            essayResponsePage.steps.checkDisplayWordCountCheckbox();
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('When the user select the \'Highlight Text\' toolbar option,then \'Highlight color\' label and by default one color option should be display ', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Highlight Text');
+            utilities.verifyInnerText(essayResponsePage.popupLabel(), 'Highlight color');
+            utilities.verifyElementCount(essayResponsePage.colorOption(), 1);
+        });
+
+        it('when the user add a new color and select \'Highlight Text\' ,then the new color should be visible inside highlight text pop up preview tab ', () => {
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.clickOnColorPicker();
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Highlight Text');
+            utilities.verifyElementCount(essayResponsePage.colorOption(), 2);
+        });
+
+        it('When user select the default highlight color option,then the text entered in the response field should appear as a highlighted text, the word count should also update and all the toolbar formatting options should be in enabled state', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Highlight Text');
+            essayResponsePage.steps.selectColorOptionInPreviewTab(0);
+            essayResponsePage.steps.focusInResponseField();
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.verifyResponseFieldTextIsHighlighted(`${css.color.responseFieldText}`, 'Lorem Ipsum');
+        });
+
+        it('When the user change color option,then the text in the response field color should be change accordingly ', () => {
+            essayResponsePage.steps.focusInResponseField();
+            essayResponsePage.steps.enterInputInResponseField(`{selectAll}{backspace}`);
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Highlight Text');
+            essayResponsePage.steps.selectColorOptionInPreviewTab(1);
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.verifyResponseFieldTextIsHighlighted(`${css.color.backgroundColorText}`, 'Lorem Ipsum');
+        });
+    });
+
+    describe('Text Color formatting option - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Font Color']);
+            essayResponsePage.steps.checkDisplayWordCountCheckbox();
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('When the user select the \'Text Color\' toolbar option,\'Text Color\' label and by default one color option should be display ', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Text Color');
+            utilities.verifyInnerText(essayResponsePage.popupLabel(), 'Text color');
+            utilities.verifyElementCount(essayResponsePage.colorOption(), 3);
+        });
+
+        it('When the user select one color option,then the text entered in the response field color should be accordingly, the word count should also update and all the toolbar formatting options should be in enabled state', () => {
+            essayResponsePage.steps.selectColorOptionInPreviewTab(1);
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.verifyResponseFieldTextColor(`${css.textSelectionColorLibrary.aqua.background}`);
+            essayResponsePage.steps.verifyWordCount('2');
+        });
+
+        it('When the user change color option,then the text in the response field color should be change accordingly ', () => {
+            essayResponsePage.steps.enterInputInResponseField(`{selectAll}{backspace}`);
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Text Color');
+            essayResponsePage.steps.selectColorOptionInPreviewTab(2);
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.verifyResponseFieldTextColor(`${css.color.newFontColor}`);
+        });
+    });
+
+    describe('Clear All Controls - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Clear All']);
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+        });
+
+        it('When the user select the \'Highlight Text\' toolbar option,then a pop up should be display ', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Clear all');
+            utilities.verifyElementVisibilityState(essayResponsePage.dialogBox(), 'visible');
+        });
+
+        it('\'Are you sure you want to clear all text?\' message,\'Clear all\' title,\'Cancel\' and \'Clear all\' button should be visible', () => {
+            utilities.verifyTextContent(essayResponsePage.clearTextMessage(), 'Are you sure you want to clear all text?');
+            utilities.verifyElementVisibilityState(essayResponsePage.clearTextMessage(), 'visible');
+            utilities.verifyTextContent(essayResponsePage.clearAllLabel(), 'Clear all');
+            utilities.verifyElementVisibilityState(essayResponsePage.clearAllLabel(), 'visible');
+            utilities.verifyElementVisibilityState(essayResponsePage.cancelButton(), 'visible');
+            utilities.verifyElementVisibilityState(essayResponsePage.clearAllButton(), 'visible');
+        });
+
+        it('When the user click on \'Clear All\' button,no text should be display ', () => {
+            essayResponsePage.steps.clickOnClearAllButton();
+            utilities.verifyTextContent(essayResponsePage.responseField(), '');
+        });
+    });
+
+    describe('enable color picker - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Font Color']);
+            essayResponsePage.steps.clickOnEnableColorPickerCheckbox();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+        });
+
+        it('When the user checked \'Enable color picker\' checkbox,then \'Select color\' label, \'Selected color\' label,\'Cancel\' button and \'ok\' button should be display,and by default color option \'rgb(0, 0, 0)\' is selected ', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Text Color');
+            utilities.verifyInnerText(utilities.getNthElement(essayResponsePage.selectColorLabel(), 0), 'Select color');
+            utilities.verifyElementVisibilityState(utilities.getNthElement(essayResponsePage.selectColorLabel(), 0), 'visible');
+            utilities.verifyInnerText(utilities.getNthElement(essayResponsePage.selectColorLabel(), 1), 'Selected color');
+            utilities.verifyElementVisibilityState(utilities.getNthElement(essayResponsePage.selectColorLabel(), 1), 'visible');
+            utilities.verifyElementVisibilityState(colorPopupComponent.cancelButton(), 'visible');
+            utilities.verifyInnerText(colorPopupComponent.cancelButton(), 'Cancel');
+            utilities.verifyElementVisibilityState(colorPopupComponent.okButton(), 'visible');
+            utilities.verifyInnerText(colorPopupComponent.okButton(), 'Ok');
+        });
+
+        colorPopupComponent.tests.verifySaturationAndOpacityGradientPalette('rgb(0, 0, 0)');
+
+        it('When the user click \'Cancel\' button,then response field text color should not be change', () => {
+            colorPopupComponent.steps.clickOnCancelButton();
+            essayResponsePage.steps.verifyResponseFieldTextNewColor(`${css.color.text}`);
+        });
+
+        it('When the user select color using color palate and click on \'Ok\' button,then response field text color should change accordingly', () => {
+            essayResponsePage.steps.enterInputInResponseField(`{selectAll}{backspace}`);
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Text Color');
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.clickOnOkButton();
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.verifyResponseFieldTextColor(`${css.color.newResponseFieldColor}`);
+        });
+    });
+});

package/cypress/e2e/ILC/EssayResponse/gradingViewAndCorrectAnswerViewContents.smoke.js

@@ -34,6 +34,8 @@ describe('Create item page - Essay response: Grading view, Correct answer view c
                         essayResponsePage.steps.selectPreviewTabToolbarOption('Underline (Ctrl+U)');
                         essayResponsePage.steps.enterInputInResponseField('This is a test for grading view preview contents');
                         essayResponsePage.steps.focusOutOfResponseField();
+                        cy.log("load the input text properly");
+                        cy.wait(1000)
                         studentViewPage.steps.submitResponse();
                         studentViewPage.steps.clickOnGoToGradingViewButton();
                     });
@@ -45,9 +47,9 @@ describe('Create item page - Essay response: Grading view, Correct answer view c
             });
 
             it('The response submitted by the student should be visible in the response field of the grading view. The formatting toolbar options should not be visible in grading view', () => {
-                essayResponsePage.responseField()
+                essayResponsePage.responseFieldText()
                     .verifyInnerHTML('<p><strong><em><u>This is a test for grading view preview contents</u></em></strong></p>');
-                utilities.verifyElementVisibilityState(essayResponsePage.previewTabToolbarWrapper(), 'hidden');
+                utilities.verifyElementVisibilityState(essayResponsePage.previewTabToolbarWrapper(), 'notExist');
             });
 
             it('The content in the response field should not be editable', () => {

package/cypress/e2e/ILC/EssayResponseBasic/gradingViewAndCorrectAnswerViewContents.smoke.js

@@ -33,6 +33,8 @@ describe('Create item page - Essay response - Basic: Grading view, Correct answe
                         essayResponseBasicPage.steps.selectPreviewTabToolbarOption('Italic (Ctrl+I)');
                         essayResponseBasicPage.steps.selectPreviewTabToolbarOption('Underline (Ctrl+U)');
                         essayResponseBasicPage.steps.enterInputInResponseField('This is a test for grading view preview contents');
+                        cy.log("load the input text properly");
+                        cy.wait(1000)
                         studentViewPage.steps.submitResponse();
                         studentViewPage.steps.clickOnGoToGradingViewButton();
                     });
@@ -44,9 +46,9 @@ describe('Create item page - Essay response - Basic: Grading view, Correct answe
             });
 
             it('The response submitted by the student should be visible in the response field of the grading view. The formatting toolbar options should not be visible in grading view', () => {
-                essayResponseBasicPage.responseField()
+                essayResponseBasicPage.responseFieldText()
                     .verifyInnerHTML('<p><strong><em><u>This is a test for grading view preview contents</u></em></strong></p>');
-                utilities.verifyElementVisibilityState(essayResponseBasicPage.previewTabToolbarWrapper(), 'hidden');
+                utilities.verifyElementVisibilityState(essayResponseBasicPage.previewTabToolbarWrapper(), 'notExist');
             });
 
             it('The content in the response field should not be editable', () => {

package/cypress/e2e/ILC/FillInTheGapsDragAndDropNew/Scoring/responseLevelAlternateAnswerBasicScoring.js

@@ -16,7 +16,7 @@ describe('Create item page - Fill in the gaps with drag and drop: Response level
             fillInTheGapsDragAndDropPage.steps.addInputToOptionsInputField(['Petals', 'Leaves', 'Bark', 'Stem', 'Trunk']);
             fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Petals': 0, 'Bark': 1 });
             fillInTheGapsDragAndDropPage.steps.setResponseLevelAlternateAnswer(0, ['Leaves']);
-            fillInTheGapsDragAndDropPage.steps.setResponseLevelAlternateAnswer(1, ['Stem', 'Trunk']);
+            fillInTheGapsDragAndDropPage.steps.setResponseLevelAlternateAnswer(2, ['Stem', 'Trunk']);
              //fillInTheGapsDragAndDropPage.steps.checkAllowStudentToCheckAnswerCheckbox();
             fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
         });

package/cypress/e2e/ILC/FillInTheGapsDragAndDropNew/dropzoneAlternateAnswerPopup.js

@@ -85,7 +85,7 @@ describe('Create item page - Fill in the gaps with text: Dropzone level alternat
         });
 
         it('When the user clicks on \'Cancel\' button, then popup should be closed and the changes made by the user should not be saved', () => {
-            fillInTheGapsDragAndDropPage.steps.CancelDropzoneAlternateAnswersPopup();
+            fillInTheGapsDragAndDropPage.steps.cancelDropzoneAlternateAnswersPopup();
             utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.alternateAnswerPopup(), 'notExist');
         });
 
@@ -158,7 +158,7 @@ describe('Create item page - Fill in the gaps with text: Dropzone level alternat
             utilities.verifyInnerText(fillInTheGapsDragAndDropPage.alternateAnswerPopupHelpText(), 'Select alternate answer(s).');
             fillInTheGapsDragAndDropPage.steps.verifyDropzoneAlternateAnswerPopupOptions(['Petals', 'Roots', 'Stem']);
             cy.log('Post-step: Close the alternate answers popup');
-            fillInTheGapsDragAndDropPage.steps.CancelDropzoneAlternateAnswersPopup();
+            fillInTheGapsDragAndDropPage.steps.cancelDropzoneAlternateAnswersPopup();
         });
 
         it('When user removes the option from the dropzone, then the add alternate button should be disabled again', () => {

package/cypress/e2e/ILC/FillInTheGapsDropdownNew/Scoring/allOrNothingCorrectPointsEqualToAlternativePoints.js

@@ -31,7 +31,7 @@ describe('Create item page - Fill in the gaps with dropdown: All or nothing with
             fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, alternateAnswerArray[0]);
             fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(1, alternateAnswerArray[1]);
             fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(2, alternateAnswerArray[2]);
-             //fillInTheGapsDropdownPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+            //fillInTheGapsDropdownPage.steps.checkAllowStudentToCheckAnswerCheckbox();
             fillInTheGapsDropdownPage.steps.switchToPreviewTab();
         });
 
@@ -102,7 +102,8 @@ describe('Create item page - Fill in the gaps with dropdown: All or nothing with
             fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();*/
         });
 
-        it('When the user attempts the question with partially correct options exclusively from the alternative accordion, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the correctly answered dropdowns, no icon should be displayed beside unattempted dropdown, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers from the correct accordion along with dropdown numeration should be displayed', () => {
+        //Remove skip once https://weldnorthed.atlassian.net/browse/IEI-4548 is resolved
+        it.skip('When the user attempts the question with partially correct options exclusively from the alternative accordion, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the correctly answered dropdowns, no icon should be displayed beside unattempted dropdown, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers from the correct accordion along with dropdown numeration should be displayed', () => {
             fillInTheGapsDropdownPage.steps.resetQuestionPreview();
             fillInTheGapsDropdownPage.steps.selectResponseFromDropdownInPreviewTab([{ dropdownIndex: 0, dropdownOption: alternateAnswerArray[0] }]);
             fillInTheGapsDropdownPage.steps.verifyPreviewScore(0, 20);
@@ -122,7 +123,8 @@ describe('Create item page - Fill in the gaps with dropdown: All or nothing with
             fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();*/
         });
 
-        it('When the user attempts the question partially correct with all the responses correct as per the alternative accordion but one response incomplete, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the response from the alternative accordion, no icon should be displayed beside unattempted response, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers from the correct accordion along with dropdown numeration should be displayed', () => {
+        //Remove skip once https://weldnorthed.atlassian.net/browse/IEI-4548 is resolved
+        it.skip('When the user attempts the question partially correct with all the responses correct as per the alternative accordion but one response incomplete, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the response from the alternative accordion, no icon should be displayed beside unattempted response, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers from the correct accordion along with dropdown numeration should be displayed', () => {
             fillInTheGapsDropdownPage.steps.resetQuestionPreview();
             fillInTheGapsDropdownPage.steps.selectResponseFromDropdownInPreviewTab([{ dropdownIndex: 0, dropdownOption: alternateAnswerArray[0] }, { dropdownIndex: 1, dropdownOption: alternateAnswerArray[1] }]);
             fillInTheGapsDropdownPage.steps.verifyPreviewScore(0, 20);

package/cypress/e2e/ILC/FillInTheGapsDropdownNew/Scoring/partialDifferentWeightsWithCorrectPointsEqualToAlternativePoints.js

@@ -33,7 +33,7 @@ describe('Create item page - Fill in the gaps with dropdown: Partial different w
             fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(1, alternateAnswerArray[1]);
             fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(2, alternateAnswerArray[2]);
             fillInTheGapsDropdownPage.steps.allotPartialDifferentWeightsPoints({ 0: 7, 1: 5, 2: 3 });
-             //fillInTheGapsDropdownPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+            //fillInTheGapsDropdownPage.steps.checkAllowStudentToCheckAnswerCheckbox();
             fillInTheGapsDropdownPage.steps.switchToPreviewTab();
         });
 
@@ -103,7 +103,8 @@ describe('Create item page - Fill in the gaps with dropdown: Partial different w
             fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();*/
         });
 
-        it('When the user attempts the question with partially correct options exclusively from the alternative accordion, then the user should be awarded points of the correctly attempted responses and on switching to \'Grading\' view, correct icon should be displayed besides the correct dropdowns, no icon should be displayed beside unattempted dropdown, correct/incorrect status message should not be displayed and correct answer section with all correct answers from the correct accordion along with dropdown numeration should be displayed', () => {
+        //Remove skip once https://weldnorthed.atlassian.net/browse/IEI-4548 is resolved
+        it.skip('When the user attempts the question with partially correct options exclusively from the alternative accordion, then the user should be awarded points of the correctly attempted responses and on switching to \'Grading\' view, correct icon should be displayed besides the correct dropdowns, no icon should be displayed beside unattempted dropdown, correct/incorrect status message should not be displayed and correct answer section with all correct answers from the correct accordion along with dropdown numeration should be displayed', () => {
             fillInTheGapsDropdownPage.steps.resetQuestionPreview();
             fillInTheGapsDropdownPage.steps.selectResponseFromDropdownInPreviewTab([{ dropdownIndex: 0, dropdownOption: alternateAnswerArray[0] }]);
             fillInTheGapsDropdownPage.steps.verifyPreviewScore(7, 15);

package/cypress/e2e/ILC/FillInTheGapsDropdownNew/Scoring/partialEqualWeightsWithCorrectPointsEqualToAlternativePoints.js

@@ -35,7 +35,7 @@ describe('Create item page - Fill in the gaps with dropdown: Partial equal with
             fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(2, alternateAnswerArray[2]);
             fillInTheGapsDropdownPage.steps.allotPoints(15);
             fillInTheGapsDropdownPage.steps.selectAutoScoredScoringSubtype('Partial equal weights');
-             //fillInTheGapsDropdownPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+            //fillInTheGapsDropdownPage.steps.checkAllowStudentToCheckAnswerCheckbox();
             fillInTheGapsDropdownPage.steps.switchToPreviewTab();
         });
 
@@ -105,7 +105,8 @@ describe('Create item page - Fill in the gaps with dropdown: Partial equal with
             fillInTheGapsDropdownPage.steps.verifyCorrectAnswerSectionNotExists();*/
         });
 
-        it('When the user attempts the question with partially correct options exclusively from the alternative accordion, then the user should be awarded points of the correctly attempted response and on switching to \'Grading\' view, correct icon should be displayed besides the correct dropdowns, no icon should be displayed beside unattempted dropdown, correct/incorrect status message should not be displayed and correct answer section with all correct answers from the correct accordion along with dropdown numeration should be displayed', () => {
+        //Remove skip once https://weldnorthed.atlassian.net/browse/IEI-4548 is resolved
+        it.skip('When the user attempts the question with partially correct options exclusively from the alternative accordion, then the user should be awarded points of the correctly attempted response and on switching to \'Grading\' view, correct icon should be displayed besides the correct dropdowns, no icon should be displayed beside unattempted dropdown, correct/incorrect status message should not be displayed and correct answer section with all correct answers from the correct accordion along with dropdown numeration should be displayed', () => {
             fillInTheGapsDropdownPage.steps.resetQuestionPreview();
             fillInTheGapsDropdownPage.steps.selectResponseFromDropdownInPreviewTab([{ dropdownIndex: 0, dropdownOption: alternateAnswerArray[0] }]);
             fillInTheGapsDropdownPage.steps.verifyPreviewScore(5, 15);

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

@@ -149,6 +149,7 @@ describe('Create item page - Fill in the gaps drop down: Drop down alternate ans
         });
 
         it('When user opens the alternate answer popup for another drop down, then alternate answer popup with the title and options as per the corresponding drop down should be displayed', () => {
+            fillInTheGapsDropdownPage.steps.cancelDropdownAlternateAnswersPopup();
             fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(1, correctAnswerArray[1]);
             fillInTheGapsDropdownPage.steps.clickOnAddAlternateButton(2);
             utilities.verifyInnerText(fillInTheGapsDropdownPage.alternateAnswerPopupTitle(), 'Dropzone 2 alternate answer(s)');

package/cypress/e2e/ILC/GridFill/customizeLayoutFillColor.js

@@ -294,6 +294,7 @@ describe('Create item page - Grid fill: Customize layout section - \'Fill type\'
 
         it('When user changes the hover fill color and border color, then the updated colors should be applied to the grid in preview tab', () => {
             gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
             gridFillPage.steps.clickOnFillColorBlock('hoverFillColor');
             gridFillPage.steps.selectRecommendedColorBlock(2);
             gridFillPage.steps.addInputToOpacityInputField(60);
@@ -308,6 +309,7 @@ describe('Create item page - Grid fill: Customize layout section - \'Fill type\'
 
         it('When user changes the filled fill color and border color, then the updated colors should be applied to the grid in preview tab', () => {
             gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
             gridFillPage.steps.clickOnFillColorBlock('filledFillColor');
             gridFillPage.steps.selectRecommendedColorBlock(1);
             gridFillPage.steps.addInputToOpacityInputField(50);
@@ -377,6 +379,7 @@ describe('Create item page - Grid fill: Customize layout section - \'Fill type\'
 
         it('When \'Apply pattern on active state\' checkbox is checked and user selects cell in preview tab grid, then pattern should be displayed in the selected cell.', () => {
             gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
             gridFillPage.steps.checkApplyPatternOnActiveStateCheckbox();
             gridFillPage.steps.switchToPreviewTab();
             gridFillPage.steps.selectCellPreviewTab(0, 0);

package/cypress/e2e/ILC/GridFill/customizeLayoutFillImageBackgroundImage.js

@@ -266,6 +266,7 @@ describe('Create item page - Grid fill: Customize layout section - \'Fill Image\
 
         it('When user has added input in alt text input field for filled image, then the filled image in selected cell in preview tab should have the provided alternative text', () => {
             gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
             gridFillPage.steps.addInputToFilledImageAltTextInputField('Filled image alternative text');
             gridFillPage.steps.switchToPreviewTab();
             gridFillPage.steps.selectCellPreviewTab(0, 0);
@@ -274,6 +275,7 @@ describe('Create item page - Grid fill: Customize layout section - \'Fill Image\
 
         it('When user clears the filled image alt text input field, then the filled image in selected cell in preview tab should not have alternative text', () => {
             gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
             gridFillPage.steps.clearFilledImageAltTextInputField();
             gridFillPage.steps.switchToPreviewTab();
             gridFillPage.steps.selectCellPreviewTab(0, 0);
@@ -282,6 +284,7 @@ describe('Create item page - Grid fill: Customize layout section - \'Fill Image\
 
         it('When user has deleted the uploaded filled image, then the selected cell in preview tab grid should not have a filled image', () => {
             gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
             gridFillPage.steps.deleteFilledImage();
             gridFillPage.steps.clickOnDeleteButtonInDeleteImagePopup();
             gridFillPage.steps.switchToPreviewTab();
@@ -485,6 +488,7 @@ describe('Create item page - Grid fill: Customize layout section - \'Fill Image\
 
         it('When user has deleted the uploaded background image, then the image should not be displayed as background in grid in preview tab', () => {
             gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
             gridFillPage.steps.deleteImage();
             gridFillPage.steps.clickOnDeleteButtonInDeleteImagePopup();
             utilities.verifyElementVisibilityState(gridFillPage.dialogBox(), 'notExist');
@@ -511,6 +515,7 @@ describe('Create item page - Grid fill: Customize layout section - \'Fill Image\
 
         it('When user selects \'Center\' image alignment, then image should be aligned to center inside the the preview tab grid', () => {
             gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
             gridFillPage.steps.selectCenterImageAlignment();
             gridFillPage.steps.switchToPreviewTab();
             gridFillPage.steps.verifyImageIsCenterAlignedInPreviewTabGrid();
@@ -518,6 +523,7 @@ describe('Create item page - Grid fill: Customize layout section - \'Fill Image\
 
         it('When user selects \'Top right\' image alignment, then image should be aligned to top right inside the the preview tab grid', () => {
             gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
             gridFillPage.steps.selectTopRightImageAlignment();
             gridFillPage.steps.switchToPreviewTab();
             gridFillPage.steps.verifyImageIsTopRightAlignedInPreviewTabGrid();
@@ -525,6 +531,7 @@ describe('Create item page - Grid fill: Customize layout section - \'Fill Image\
 
         it('When user selects \'Top left\' image alignment again, then image should be aligned to top left inside the the edit tab grids', () => {
             gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
             gridFillPage.steps.selectTopLeftImageAlignment();
             gridFillPage.steps.switchToPreviewTab();
             gridFillPage.steps.verifyImageIsTopLeftAlignedInPreviewTabGrid();
@@ -536,6 +543,7 @@ describe('Create item page - Grid fill: Customize layout section - \'Fill Image\
 
         it('When user changes opacity slider value, then opacity for image should be updated accordingly', () => {
             gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
             gridFillPage.steps.clickActionOnOpacitySlider();
             gridFillPage.steps.switchToPreviewTab();
             gridFillPage.steps.verifyOpacityValueForGridImageInPreviewTab('0.5');
@@ -543,6 +551,7 @@ describe('Create item page - Grid fill: Customize layout section - \'Fill Image\
 
         it('When user changes opacity value in input field, then opacity for image should be updated accordingly', () => {
             gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
             gridFillPage.steps.enterInputToOpacityInputField(40);
             gridFillPage.steps.switchToPreviewTab();
             gridFillPage.steps.verifyOpacityValueForGridImageInPreviewTab('0.4');
@@ -554,6 +563,7 @@ describe('Create item page - Grid fill: Customize layout section - \'Fill Image\
 
         it('When user unchecks \'Fill image to grid\' checkbox, then image dimensions should set to default state', () => {
             gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
             gridFillPage.steps.uncheckFillImageToGridCheckbox();
             gridFillPage.steps.switchToPreviewTab();
             gridFillPage.steps.verifyDefaultImageInGridInPreviewTab();
@@ -581,6 +591,7 @@ describe('Create item page - Grid fill: Customize layout section - \'Fill Image\
 
         it('When aspect ratio is unlocked and user changes the value in height input field, then width input field should remain unchanged and the dimensions should be updated in the grid', () => {
             gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
             gridFillPage.steps.updateCanvasHeight(120);
             gridFillPage.steps.switchToPreviewTab();
             gridFillPage.steps.verifyGridBackgroundImageDimensionsInPreviewTab('100px', '120px');
@@ -588,6 +599,7 @@ describe('Create item page - Grid fill: Customize layout section - \'Fill Image\
 
         it('When user locks the aspect ratio button and changes the value in the width input field, the height input field should be updated accordingly to maintain the updated aspect ratio', () => {
             gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
             gridFillPage.steps.lockAspectRatio();
             gridFillPage.steps.updateCanvasWidth(150);
             gridFillPage.steps.switchToPreviewTab();
@@ -596,6 +608,7 @@ describe('Create item page - Grid fill: Customize layout section - \'Fill Image\
 
         it('When user selects the \'Reset dimensions\' button the height and width should reset to the original values', () => {
             gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
             gridFillPage.steps.resetDimensions();
             gridFillPage.steps.switchToPreviewTab();
             gridFillPage.steps.verifyDefaultImageInGridInPreviewTab();
@@ -603,6 +616,7 @@ describe('Create item page - Grid fill: Customize layout section - \'Fill Image\
 
         it('When user adds input in alt text input field for background image, then the grid background image in preview tab should have the provided alternative text', () => {
             gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
             gridFillPage.steps.addInputToBackgroundImageAltTextInputField('Background image alternative text');
             gridFillPage.steps.switchToPreviewTab();
             gridFillPage.steps.verifyBackgroundImageAltTextInPreviewTabGrids('Background image alternative text');
@@ -610,6 +624,7 @@ describe('Create item page - Grid fill: Customize layout section - \'Fill Image\
 
         it('When user clears the background image alt text input field, then the grid background image in preview tab should not have alternative text', () => {
             gridFillPage.steps.switchToEditTab();
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
             gridFillPage.steps.clearBackgroundImageAltTextInputField();
             gridFillPage.steps.switchToPreviewTab();
             gridFillPage.steps.verifyBackgroundImageAltTextNotPresentInPreviewTabGrid();