itemengine-cypress-automation 1.0.576-IEI-7079-92d877f.0 → 1.0.576

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

@@ -25,7 +25,7 @@ describe('Create question page - Essay Response: Customize formatting options (f
         essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Insert/Remove Bulleted List');
 
         //Comment: Here we are unable to verify the bullet point marker that appears since it is displayed using ::marker
-        it('When the user selects the \'Bulleted list\' toolbar option in an empty response field, then a bulleted list with \'1 bullet point\' should be displayed in the response field and when the user enters text, then that text should appear as a bulleted list', () => {
+        it('When the user selects the \'Bulleted list\' toolbar option in an empty response field, then a bulleted list with \'1 bullet point\' should be displayed in the response field and when the user enters text, then that text should appear as a bulleted list in question preview', () => {
             essayResponsePage.steps.resetPreviewTabResponseField();
             essayResponsePage.steps.selectPreviewTabToolbarOption('Insert/Remove Bulleted List');
             essayResponsePage.steps.verifyResponseFieldHTML('<ul><li><br></li></ul>');
@@ -33,6 +33,19 @@ describe('Create question page - Essay Response: Customize formatting options (f
             essayResponsePage.steps.verifyResponseFieldHTML('<ul><li>Lorem Ipsum</li></ul>');
         });
 
+        it('When the user selects the \'Bulleted list\' toolbar option in an empty response field, then a bulleted list with \'1 bullet point\' should be displayed in the response field and when the user enters text, then that text should appear as a bulleted list in item preview', () => {
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.resetPreviewTabResponseField();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert/Remove Bulleted List');
+            essayResponsePage.steps.verifyResponseFieldHTML('<ul><li><br></li></ul>');
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.verifyResponseFieldHTML('<ul><li>Lorem Ipsum</li></ul>');
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
         it('When the user presses the \'Enter\' key, another bullet point should appear below the first point and user should be able to enter text to the 2nd list item', () => {
             essayResponsePage.steps.enterInputInResponseField('{enter}');
             essayResponsePage.steps.verifyListItemLengthInResponseField(2);
@@ -57,7 +70,7 @@ describe('Create question page - Essay Response: Customize formatting options (f
         essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Insert/Remove Numbered List');
 
         //Comment: Here we are unable to verify the number of the list item that appears since it is displayed using ::marker
-        it('When the user selects the \'Numbered list\' toolbar option in an empty response field, then a numbered list with \'1. list item\' should be displayed in the response field and when the user enters text, then that text should appear as a numbered list', () => {
+        it('When the user selects the \'Numbered list\' toolbar option in an empty response field, then a numbered list with \'1. list item\' should be displayed in the response field and when the user enters text, then that text should appear as a numbered list in question preview', () => {
             essayResponsePage.steps.resetPreviewTabResponseField();
             essayResponsePage.steps.selectPreviewTabToolbarOption('Insert/Remove Numbered List');
             essayResponsePage.steps.verifyResponseFieldHTML('<ol><li><br></li></ol>');
@@ -65,6 +78,18 @@ describe('Create question page - Essay Response: Customize formatting options (f
             essayResponsePage.steps.verifyResponseFieldHTML('<ol><li>Lorem Ipsum</li></ol>');
         });
 
+        it('When the user selects the \'Numbered list\' toolbar option in an empty response field, then a numbered list with \'1. list item\' should be displayed in the response field and when the user enters text, then that text should appear as a numbered list in item preview', () => {
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.resetPreviewTabResponseField();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert/Remove Numbered List');
+            essayResponsePage.steps.verifyResponseFieldHTML('<ol><li><br></li></ol>');
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.verifyResponseFieldHTML('<ol><li>Lorem Ipsum</li></ol>');
+            essayResponsePage.steps.clickOnEditQuestionButton();
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
         it('When the user presses the \'Enter\' key, \'2. list item\' should appear below the first list item and user should be able to enter text to the 2nd list item', () => {
             essayResponsePage.steps.enterInputInResponseField('{enter}');
             essayResponsePage.steps.verifyListItemLengthInResponseField(2);
@@ -228,6 +253,64 @@ describe('Create question page - Essay Response: Customize formatting options (f
         essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Align Right');
     });
 
+    describe('Align left, Center, Align right, Justify formatting options - Item preview', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Align Left', 'Align Center', 'Align Right', 'Align Justify']);
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('When the user focuses in the response field, then none of the options should be displayed in selected state and the text in the response field should be displayed as normal text without any alignment in item preview', () => {
+            essayResponsePage.steps.focusInResponseField();
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotSelected('Align Left');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotSelected('Align Center');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotSelected('Align Right');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotSelected('Align Justify');
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
+        });
+
+        it('When the user selects the \'Center\' toolbar option, then text in the response field should get aligned to the center and \'Align left\' toolbar option should get deselected in item preview', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Align Center');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p style=\"text-align: center;\">Lorem Ipsum</p>')
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotSelected('Align Left')
+        });
+
+        it('When the user selects the \'Align Left\' toolbar option, then text in the response field should get aligned to the left and \'Center\' toolbar option should get deselected in item preview', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Align Left');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p style="text-align: left;">Lorem Ipsum</p>');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotSelected('Align Center')
+        });
+
+        it('When the user selects the \'Align Right\' toolbar option, then text in the response field should get aligned to the right and \'Align left\' toolbar option should get deselected in item preview', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Align Right');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p style=\"text-align: right;\">Lorem Ipsum</p>');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotSelected('Align Left')
+        });
+
+        it('When the user deselects \'Align Right\' toolbar option, then the text in the response field should be displayed as normal text without any alignment in item preview', () => {
+            essayResponsePage.steps.deselectPreviewTabToolbarOption('Align Right');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
+        });
+
+        it('When the user selects the \'Justify\' toolbar option, then text in the response field should get justified alignment and \'Align right\' toolbar option should get deselected in item preview', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Align Justify');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p style="text-align: justify;">Lorem Ipsum</p>');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotSelected('Align Right')
+        });
+
+        it('When the user switches to the next line, \'Justify\' toolbar option  should persist in item preview', () => {
+            essayResponsePage.steps.enterInputInResponseField('{enter}');
+            utilities.verifyElementVisibilityState(essayResponsePage.previewTabToolbarOption('Align Justify'), 'visible');
+        });
+
+        essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Align Right');
+    });
+
     describe('Increase indent, Decrease indent formatting options - Preview tab', () => {
         abortEarlySetup();
         before(() => {
@@ -242,15 +325,29 @@ describe('Create question page - Essay Response: Customize formatting options (f
             essayResponsePage.steps.verifyPreviewTabToolbarOptionDisabled('Decrease Indent')
         });
 
-        it('When the user selects the \'Increase indent\' toolbar option, then indentation of text in the response field should increase and the \'Decrease indent\' toolbar option should get enabled', () => {
+        it('When the user selects the \'Increase indent\' toolbar option, then indentation of text in the response field should increase and the \'Decrease indent\' toolbar option should get enabled in question preview', () => {
             essayResponsePage.steps.selectPreviewTabToolbarOption('Increase Indent');
             essayResponsePage.steps.verifyResponseFieldHTML('<p style=\"margin-left: 40px;\">Lorem Ipsum</p>');
             essayResponsePage.steps.verifyPreviewTabToolbarOptionNotSelected('Decrease Indent')
         });
 
+        it('When the user selects the \'Increase indent\' toolbar option, then indentation of text in the response field should increase and the \'Decrease indent\' toolbar option should get enabled in item preview', () => {
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Increase Indent');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p style=\"margin-left: 40px;\">Lorem Ipsum</p>');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotSelected('Decrease Indent')
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Increase Indent');
+        });
+
         essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Increase Indent');
 
-        it('When the user selects the \'Decrease indent\' toolbar option, then the indentation of text in the response field should decrease', () => {
+        it('When the user selects the \'Decrease indent\' toolbar option, then the indentation of text in the response field should decrease in question', () => {
             essayResponsePage.steps.resetPreviewTabResponseField();
             essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
             essayResponsePage.steps.selectPreviewTabToolbarOption('Increase Indent');
@@ -259,6 +356,22 @@ describe('Create question page - Essay Response: Customize formatting options (f
             essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
         });
 
+        it('When the user selects the \'Decrease indent\' toolbar option, then the indentation of text in the response field should decrease in question', () => {
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Increase Indent');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p style=\"margin-left: 40px;\">Lorem Ipsum</p>');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Decrease Indent');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Increase Indent');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Decrease Indent');
+        });
+
         essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Decrease Indent');
     });
 });

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

@@ -33,6 +33,31 @@ describe('Create question page - Essay Response: Customize formatting options (f
         essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Insert Horizontal Line');
     });
 
+    describe('Horizontal line formatting option - Item preview', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Insert Horizontal Line']);
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+        });
+
+        it('When the user selects the \'Insert horizontal line\' toolbar option, a horizontal line should be inserted below from where the cursor is pointing in the response field, the \'Insert horizontal line\' toolbar option should not stay in selected state in item preview', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert Horizontal Line');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p><hr><p><br></p>');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotSelected('Insert Horizontal Line')
+        });
+
+        it('When the user hits \'backspace\', then the horizontal line should get removed in item preview', () => {
+            essayResponsePage.steps.enterInputInResponseField('{backspace}')
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p><p><br></p>');
+        });
+    });
+
     describe('Blockquote formatting option - Preview tab', () => {
         abortEarlySetup();
         before(() => {
@@ -49,6 +74,20 @@ describe('Create question page - Essay Response: Customize formatting options (f
             essayResponsePage.steps.verifyResponseFieldHTML('<blockquote><p>Lorem Ipsum</p></blockquote>')
         });
 
+        it('When the user selects the \'Blockquote\' toolbar option, then the text in the response field should appear as a block quote in item preview', () => {
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Block Quote');
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.verifyResponseFieldHTML('<blockquote><p>Lorem Ipsum</p></blockquote>');
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Block Quote');
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.verifyResponseFieldHTML('<blockquote><p>Lorem Ipsum</p></blockquote>')
+        });
+
         it('When the user presses the \'Enter\' key and switches to a new line, then the \'Blockquote\' toolbar option should be in selected state and the block quote formatting should persist and user should be able to enter text in the next line', () => {
             essayResponsePage.steps.enterInputInResponseField('{enter}dolor sit amet');
             essayResponsePage.steps.verifyPreviewTabToolbarOptionSelected('Block Quote')
@@ -85,6 +124,25 @@ describe('Create question page - Essay Response: Customize formatting options (f
             essayResponsePage.steps.verifyPreviewTabToolbarOptionNotDisabled('Bold (Ctrl+B)');
         });
 
+        it('When the user selects the \'Code inline\' toolbar option, then the text entered in the response field should appear as a highlighted inline code text, the word count should also update and all the toolbar formatting options should be in enabled state in item preview', () => {
+            cy.log('Saving question to switch to item preview context.');
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Code Inline');
+            essayResponsePage.steps.enterInputInResponseField('console.log()')
+            essayResponsePage.steps.verifyResponseFieldHTML('<p><code>​​​​​​​console.log()</code><br></p>');
+            essayResponsePage.steps.verifyWordCount('1');
+            //Just checking if Bold option is disabled or not, no need to check for all toolbar options
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotDisabled('Bold (Ctrl+B)');
+            cy.log('Returning to edit mode.');
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Code Inline');
+            essayResponsePage.steps.enterInputInResponseField('console.log()')
+            essayResponsePage.steps.verifyResponseFieldHTML('<p><code>​​​​​​​console.log()</code><br></p>');
+        });
+
         //Comment: exceptional assertion of font size since in code inline font size is 14.4px
         it('CSS of \'highlighted inline code text\'', { tags: 'css' }, () => {
             utilities.verifyCSS(essayResponsePage.responseField().find('code'), {
@@ -203,6 +261,27 @@ describe('Create question page - Essay Response: Customize formatting options (f
             essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
         });
 
+        it('When the user applies Bold, Italic, Underline, Strikethrough and removes formatting in item preview, text should revert to default format', () => {
+            cy.log('Saving question to switch to item preview context.');
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab(); // item preview
+            // Recreate initial content
+            essayResponsePage.steps.resetPreviewTabResponseField();
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum{selectAll}');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Bold (Ctrl+B)');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Italic (Ctrl+I)');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Underline (Ctrl+U)');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Strikethrough');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p><s><u><em><strong>Lorem Ipsum</strong></em></u></s></p>');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Remove Format');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
+            cy.log('Returning to edit mode.');
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum{selectAll}');
+        });
+
         essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Remove Format');
 
         it('When the user has selected text in the response field and applies text formatting options - Superscript, Subscript and clicks on the \'Remove format\' toolbar option, then all the text formatting should get removed and the text should be displayed in default format', () => {
@@ -215,18 +294,36 @@ describe('Create question page - Essay Response: Customize formatting options (f
             essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum<br></p>');
         });
 
+        it('When the user applies Superscript & Subscript and removes formatting in item preview, text should revert to default format', () => {
+            cy.log('Saving question to switch to item preview context for superscript/subscript removal.');
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.resetPreviewTabResponseField();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Subscript');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Superscript');
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum{selectAll}');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p><sub><sup>​​​​​​​Lorem Ipsum</sup></sub><br></p>');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Remove Format');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum<br></p>');
+            cy.log('Returning to edit mode after item preview test.');
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum{selectAll}');
+        });
+
         it('When the user has selected text in the response field and applies text formatting option - Align right/Center/Justify  and clicks on the \'Remove format\' toolbar option, then all the text formatting should get removed and the text should be displayed in default format', () => {
             essayResponsePage.steps.selectPreviewTabToolbarOption('Align Right');
-            essayResponsePage.steps.verifyResponseFieldHTML('<p style=\"text-align: right;\">Lorem Ipsum<br></p>');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p style=\"text-align: right;\">Lorem Ipsum</p>');
             essayResponsePage.steps.selectPreviewTabToolbarOption('Remove Format')
-            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum<br></p>');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
         });
 
         it('When the user has selected text in the response field and applies text formatting option - Code inline and clicks on the \'Remove format\' toolbar option, then all the text formatting should get removed and the text should be displayed in default format', () => {
             essayResponsePage.steps.selectPreviewTabToolbarOption('Code Inline');
-            essayResponsePage.steps.verifyResponseFieldHTML('<p><code>Lorem Ipsum</code><br></p>');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p><code>Lorem Ipsum</code></p>');
             essayResponsePage.steps.selectPreviewTabToolbarOption('Remove Format')
-            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum<br></p>');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
         });
     });
 

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

@@ -108,6 +108,44 @@ describe('Create question page - Essay Response: Customize formatting options (f
         });
     });
 
+    describe('Font Size formatting option - Item preview', () => {
+        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}');
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        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(() => {
@@ -218,6 +256,39 @@ describe('Create question page - Essay Response: Customize formatting options (f
         });
     });
 
+    describe('Clear All Controls - Item preview', () => {
+        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');
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('When the user select the \'Highlight Text\' toolbar option,then a pop up should be display in item preview', () => {
+            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 in item preview', () => {
+            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 in item preview', () => {
+            essayResponsePage.steps.clickOnClearAllButton();
+            utilities.verifyTextContent(essayResponsePage.responseField(), '');
+        });
+    });
+
     describe('enable color picker - Preview tab', () => {
         abortEarlySetup();
         before(() => {
@@ -258,4 +329,47 @@ describe('Create question page - Essay Response: Customize formatting options (f
             essayResponsePage.steps.verifyResponseFieldTextColor(`${css.color.newResponseFieldColor}`);
         });
     });
+
+    describe('Enable color picker - Item preview', () => {
+        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');
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        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 in item preview', () => {
+            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 in item preview', () => {
+            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 in item preview', () => {
+            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/essayResponseSpecialCharacters.js

@@ -33,7 +33,7 @@ describe('Essay response: Customize math characters', () => {
         });
 
         it('By default the \'Special characters\' toolbar option should be in deselected state', () => {
-            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotSelected('Special characters');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotExpanded('Special characters');
         });
 
         it('When user clicks on \'Special characters\' toolbar option, then the \'Special characters\' popup should be displayed with \'Special characters\' title and a \'Close\' button', () => {
@@ -150,7 +150,7 @@ describe('Essay response: Customize math characters', () => {
             essayResponsePage.steps.closeWarningPopup();
         });
 
-        it('When the user has specified custom special characters and opens the special characters popup in the preview tab, then only the specified custom special characters should be displayed in the popup', () => {
+        it('When the user has specified custom special characters and opens the special characters popup in the preview tab, then only the specified custom special characters should be displayed in the popup in question preview', () => {
             essayResponsePage.steps.switchToPreviewTab();
             essayResponsePage.steps.selectPreviewTabToolbarOption('Special characters');
             essayResponsePage.steps.verifyCustomSpecialCharactersDisplayedInPreviewTab(customSpecialCharacters);
@@ -158,6 +158,16 @@ describe('Essay response: Customize math characters', () => {
             essayResponsePage.steps.switchToEditTab();
         });
 
+        it('When the user has specified custom special characters and opens the special characters popup in the preview tab, then only the specified custom special characters should be displayed in the popup in item preview', () => {
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Special characters');
+            essayResponsePage.steps.verifyCustomSpecialCharactersDisplayedInPreviewTab(customSpecialCharacters);
+            cy.log('Post-step: Switching to edit tab');
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+        });
+
         it('CSS of Customize special characters', { tags: 'css' }, () => {
             utilities.verifyCSS(essayResponsePage.customizeSpecialCharactersLabel(), {
                 'color': css.color.labels,

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

@@ -221,7 +221,7 @@ describe('Essay Response Preview: Add Table Functionality', () => {
         });
     });
 
-    describe('Add table with header row, highlighted column.', () => {
+    describe.only('Add table with header row, highlighted column.', () => {
         abortEarlySetup();
         before(() => {
             cy.log('Navigating to Essay Response question type and switching to preview tab.');
@@ -235,7 +235,7 @@ describe('Essay Response Preview: Add Table Functionality', () => {
             essayResponsePage.steps.selectPreviewTabToolbarOption('Insert Table');
         });
 
-        it('When user checks the \'Add header row\' checkbox and then clicks on \'Add table\' button, the first row of the added table should be highlighted as table header', () => {
+        it('When user checks the \'Add header row\' checkbox and then clicks on \'Add table\' button, the first row of the added table should be highlighted as table header in question preview', () => {
             cy.log('Check the \'Add header row\' checkbox.');
             essayResponsePage.steps.checkAddRowHeaderCheckbox();
             essayResponsePage.steps.addTable();
@@ -245,7 +245,24 @@ describe('Essay Response Preview: Add Table Functionality', () => {
             essayResponsePage.steps.verifyTableNormalCellsAreNotHighlighted();
         });
 
-        it('When user checks the \'Highlight first column\' checkbox and then clicks on \'Add table\' button, the first column of the added table should be highlighted.', () => {
+        it('When user checks the \'Add header row\' checkbox and then clicks on \'Add table\' button, the first row of the added table should be highlighted as table header in item preview', () => {
+            essayResponsePage.steps.addTable();
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.enterInputInResponseField('{selectAll}{backspace}');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert Table');
+            essayResponsePage.steps.checkAddRowHeaderCheckbox();
+            essayResponsePage.steps.addTable();
+            essayResponsePage.steps.verifyTableHeaderRowCellCount(3);
+            essayResponsePage.steps.verifyTableProperties(2, 3, 3);
+            essayResponsePage.steps.verifyTableHeaderCellsAreHighlighted();
+            essayResponsePage.steps.verifyTableNormalCellsAreNotHighlighted();
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('When user checks the \'Highlight first column\' checkbox and then clicks on \'Add table\' button, the first column of the added table should be highlighted in question preview.', () => {
             cy.log('Check the \'Highlight first column\' checkbox.');
             essayResponsePage.steps.checkHighlightFirstColumnCheckbox();
             essayResponsePage.steps.addTable();
@@ -255,6 +272,24 @@ describe('Essay Response Preview: Add Table Functionality', () => {
             essayResponsePage.steps.verifyTableNormalCellsAreNotHighlighted();
         });
 
+        it('When user checks the \'Highlight first column\' checkbox and then clicks on \'Add table\' button, the first column of the added table should be highlighted in item preview.', () => {
+            cy.log('Check the \'Highlight first column\' checkbox.');
+            essayResponsePage.steps.addTable();
+            essayResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.enterInputInResponseField('{selectAll}{backspace}');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert Table');
+            essayResponsePage.steps.checkHighlightFirstColumnCheckbox();
+            essayResponsePage.steps.addTable();
+            essayResponsePage.steps.verifyFirstColumnsIsHighlighted(2);
+            essayResponsePage.steps.verifyTableProperties(2, 4, 2);
+            essayResponsePage.steps.verifyTableHeaderCellsAreHighlighted();
+            essayResponsePage.steps.verifyTableNormalCellsAreNotHighlighted();
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.clickOnEditQuestionButton();
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
         it('When user checks both \'Add header row\' and \'Highlight first column\' checkboxes and then clicks on \'Add table\' button, the first column and first row of the added table should be highlighted.', () => {
             cy.log('Check both \'Add header row\' and \'Highlight first column\' checkboxes.');
             essayResponsePage.steps.checkAddRowHeaderCheckbox();