itemengine-cypress-automation 1.0.113 → 1.0.114

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

@@ -1,5 +1,6 @@
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import { essayResponsePage, } from "../../../pages";
+import utilities from "../../../support/helpers/utilities";
 const css = Cypress.env('css');
 
 describe('Create question page - Essay Response: Customize formatting options (for student player) toolbar options', () => {
@@ -13,25 +14,20 @@ describe('Create question page - Essay Response: Customize formatting options (f
             essayResponsePage.steps.navigateToCreateQuestion('essay response');
             cy.barsPreLoaderWait();
             essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
-            essayResponsePage.steps.selectCustomizedFormattingOption(['Insert Horizontal Line', 'Undo', 'Redo']);
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Insert Horizontal Line']);
             essayResponsePage.steps.switchToPreviewTab();
-            essayResponsePage.responseField()
-                .type('Lorem Ipsum');
+            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', () => {
-            essayResponsePage.previewTabToolbarOption('Insert Horizontal Line')
-                .click();
-            essayResponsePage.responseField()
-                .verifyInnerHTML('<p>Lorem Ipsum</p><hr><p><br></p>');
-            essayResponsePage.previewTabToolbarOption('Insert Horizontal Line')
-                .should('have.attr', 'aria-pressed', 'false');
+            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', () => {
-            essayResponsePage.responseField()
-                .type('{backspace}')
-                .verifyInnerHTML('<p>Lorem Ipsum</p><p><br></p>');
+            essayResponsePage.steps.enterInputInResponseField('{backspace}')
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p><p><br></p>');
         });
 
         essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Insert Horizontal Line');
@@ -43,34 +39,26 @@ describe('Create question page - Essay Response: Customize formatting options (f
             essayResponsePage.steps.navigateToCreateQuestion('essay response');
             cy.barsPreLoaderWait();
             essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
-            essayResponsePage.steps.selectCustomizedFormattingOption(['Block Quote', 'Undo', 'Redo']);
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Block Quote']);
             essayResponsePage.steps.switchToPreviewTab();
-            essayResponsePage.responseField()
-                .type('Lorem Ipsum');
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
         });
 
         it('When the user selects the \'Blockquote\' toolbar option, then the text in the response field should appear as a block quote', () => {
             essayResponsePage.steps.selectPreviewTabToolbarOption('Block Quote');
-            essayResponsePage.responseField()
-                .verifyInnerHTML('<blockquote><p>Lorem Ipsum</p></blockquote>')
+            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.responseField()
-                .type('{enter}dolor sit amet');
-            essayResponsePage.previewTabToolbarOption('Block Quote')
-                .should('have.attr', 'aria-pressed', 'true');
-            essayResponsePage.responseField()
-                .verifyInnerHTML('<blockquote><p>Lorem Ipsum</p><p>dolor sit amet</p></blockquote>');
+            essayResponsePage.steps.enterInputInResponseField('{enter}dolor sit amet');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionSelected('Block Quote')
+            essayResponsePage.steps.verifyResponseFieldHTML('<blockquote><p>Lorem Ipsum</p><p>dolor sit amet</p></blockquote>');
         });
 
         it('When the user presses the \'Enter\' key again without typing anything in the new line, then the \'Blockquote\' toolbar option should get deselected, the block quote should end and the cursor should move out of the block quote', () => {
-            essayResponsePage.responseField()
-                .type('{enter}{enter}');
-            essayResponsePage.previewTabToolbarOption('Block Quote')
-                .should('have.attr', 'aria-pressed', 'false');
-            essayResponsePage.responseField()
-                .verifyInnerHTML('<blockquote><p>Lorem Ipsum</p><p>dolor sit amet</p></blockquote><p><br></p>');
+            essayResponsePage.steps.enterInputInResponseField('{enter}{enter}');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotSelected('Block Quote');
+            essayResponsePage.steps.verifyResponseFieldHTML('<blockquote><p>Lorem Ipsum</p><p>dolor sit amet</p></blockquote><p><br></p>');
         });
 
         essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Block Quote');
@@ -82,28 +70,29 @@ describe('Create question page - Essay Response: Customize formatting options (f
             essayResponsePage.steps.navigateToCreateQuestion('essay response');
             cy.barsPreLoaderWait();
             essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
-            essayResponsePage.steps.setWordLimit(10);
-            essayResponsePage.steps.selectCustomizedFormattingOption(['Code Inline', 'Code Editor', 'Undo', 'Redo']);
+            essayResponsePage.steps.setMaximumLimit(10);
+            essayResponsePage.steps.checkDisplayWordCountCheckbox();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Code Inline', 'Code Editor']);
             essayResponsePage.steps.switchToPreviewTab();
         });
 
         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', () => {
             essayResponsePage.steps.selectPreviewTabToolbarOption('Code Inline');
-            essayResponsePage.responseField()
-                .type('console.log()')
-                .verifyInnerHTML('<p><code>​​​​​​​console.log()</code><br></p>');
-            essayResponsePage.steps.verifyResponseFieldWordCount('1/10');
+            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.previewTabToolbarOption('Bold (Ctrl+B)')
-                .should('have.attr', 'aria-disabled', 'false');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotDisabled('Bold (Ctrl+B)');
         });
 
         //Comment: exceptional assertion of font size since in code inline font size is 14.4px
         it('CSS of \'highlighted inline code text\'', { tags: 'css' }, () => {
-            essayResponsePage.responseField()
-                .find('code')
-                .verifyCSS(css.color.codeInlineText, '14.4px', css.fontWeight.regular)
-                .and('have.css', 'background-color', css.color.codeInlineTextBg);
+            utilities.verifyCSS(essayResponsePage.responseField().find('code'), {
+                'color': css.color.codeInlineText,
+                'font-size': '14.4px',
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.codeInlineTextBg
+            });
         });
 
         it('Accessibility of \'highlighted inline code text\'', { tags: 'a11y' }, () => {
@@ -113,70 +102,58 @@ describe('Create question page - Essay Response: Customize formatting options (f
         essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Code Inline');
 
         it('If user selects the entered text and deselects the \'Code inline\' toolbar option, then the selected text should be displayed in default format', () => {
-            essayResponsePage.responseField()
-                .type('{selectAll}');
+            essayResponsePage.steps.enterInputInResponseField('{selectAll}');
             essayResponsePage.steps.deselectPreviewTabToolbarOption('Code Inline');
-            essayResponsePage.responseField()
-                .verifyInnerHTML('<p>Lorem Ipsum</p>')
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>')
         });
 
         it('When the user is typing while \'Code inline\' toolbar option is selected, then the text should appear as a highlighted inline code and when the user deselects the \'Code inline\' toolbar option and continues to type, then the text should appear as plain text', () => {
             essayResponsePage.steps.resetPreviewTabResponseField();
             essayResponsePage.steps.selectPreviewTabToolbarOption('Code Inline');
-            essayResponsePage.responseField()
-                .type('console.log()');
+            essayResponsePage.steps.enterInputInResponseField('console.log()');
             essayResponsePage.steps.deselectPreviewTabToolbarOption('Code Inline');
-            essayResponsePage.responseField()
-                .type('command to write a message in Javascript')
-                .verifyInnerHTML('<p><code>console.log()</code>​​​​​​​command to write a message in Javascript<br></p>');
+            essayResponsePage.steps.enterInputInResponseField('command to write a message in Javascript')
+            essayResponsePage.steps.verifyResponseFieldHTML('<p><code>console.log()</code>​​​​​​​command to write a message in Javascript<br></p>');
         });
 
         it('When the user selects the \'Code inline\' toolbar option, enters text and presses the \'Enter\' key and switches to a new line, then the \'Code inline\' toolbar option should be in selected state and the code inline formatting should persist', () => {
             essayResponsePage.steps.resetPreviewTabResponseField();
             essayResponsePage.steps.selectPreviewTabToolbarOption('Code Inline');
-            essayResponsePage.responseField()
-                .type('console.log(){enter}')
-                .verifyInnerHTML('<p><code>console.log()</code><br></p><p><code>​​​​​​​</code><br></p>');
+            essayResponsePage.steps.enterInputInResponseField('console.log(){enter}')
+            essayResponsePage.steps.verifyResponseFieldHTML('<p><code>console.log()</code><br></p><p><code>​​​​​​​</code><br></p>');
         });
 
         it('When the user presses the \'Enter\' key again without typing anything in the new line, even then the code inline formatting should persist', () => {
-            essayResponsePage.responseField()
-                .type('{enter}')
-                .verifyInnerHTML('<p><code>console.log()</code><br></p><p><code></code><br></p><p><code>​​​​​​​</code><br></p>');
+            essayResponsePage.steps.enterInputInResponseField('{enter}')
+            essayResponsePage.steps.verifyResponseFieldHTML('<p><code>console.log()</code><br></p><p><code></code><br></p><p><code>​​​​​​​</code><br></p>');
         });
 
         it('When the user adds multi line text, selects the entered text and clicks on the \'Code inline\' toolbar option, then the lines should get converted to highlighted inline code text', () => {
             essayResponsePage.steps.resetPreviewTabResponseField();
-            essayResponsePage.responseField()
-                .type('console.log(){enter}on.click(){selectAll}');
+            essayResponsePage.steps.enterInputInResponseField('console.log(){enter}on.click(){selectAll}');
             essayResponsePage.steps.selectPreviewTabToolbarOption('Code Inline');
-            essayResponsePage.responseField()
-                .verifyInnerHTML('<p><code>console.log()</code></p><p><code>on.click()</code></p>');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p><code>console.log()</code></p><p><code>on.click()</code></p>');
         });
 
-        it('When the user selectes the \'Code editor\' toolbar option, then the text entered in the response field should appear as a highlighted code block, the word count should update, and all the toolbar formatting options except \'Undo\' should be in disabled state', () => {
+        it('When the user selects the \'Code editor\' toolbar option, then the text entered in the response field should appear as a highlighted code block, the word count should update, and all the toolbar formatting options except \'Undo\' should be in disabled state', () => {
             essayResponsePage.steps.resetPreviewTabResponseField();
-            essayResponsePage.previewTabToolbarOption('Code Editor')
-                .click();
-            essayResponsePage.responseField()
-                .type('console.log()')
-                .find('.codeblock')
-                .verifyInnerHTML('<pre class=\"line\">console.log()</pre>');
-            essayResponsePage.steps.verifyResponseFieldWordCount('1/10');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Code Editor')
+            essayResponsePage.steps.enterInputInResponseField('console.log()');
+            essayResponsePage.steps.verifyResponseFieldCodeblockHTML('<pre class=\"line\">console.log()</pre>');
+            essayResponsePage.steps.verifyWordCount('1');
             //Just checking if Bold option is disabled or not, no need to check for all toolbar options
-            essayResponsePage.previewTabToolbarOption('Bold (Ctrl+B)')
-                .should('have.attr', 'aria-disabled', 'true');
-            essayResponsePage.previewTabToolbarOption('Undo (Ctrl+Z)')
-                .should('have.attr', 'aria-disabled', 'false');
-
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionDisabled('Bold (Ctrl+B)');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotDisabled('Undo (Ctrl+Z)');
         });
 
         //No designs available https://redmine.zeuslearning.com/issues/525365
         it('CSS of \'highlighted code block\'', { tags: 'css' }, () => {
-            essayResponsePage.responseField()
-                .find('.codeblock')
-                .verifyCSS(css.color.codeBlockText, css.fontSize.default, css.fontWeight.regular)
-                .and('have.css', 'background-color', css.color.codeBlockTextBg);
+            utilities.verifyCSS(essayResponsePage.responseField().find('.codeblock'), {
+                'color': css.color.codeBlockText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.codeBlockTextBg
+            });
         });
 
         it('Accessibility of \'highlighted code block \'', { tags: 'a11y' }, () => {
@@ -187,155 +164,28 @@ describe('Create question page - Essay Response: Customize formatting options (f
 
         //Comment: Here we are unable to verify the number of the code line that appears since it is displayed using ::before
         it('When the user presses the \'Enter\' key and switches to a new line, then a new code line with \'2\'number should appear in the response field, the \'Code editor\' toolbar option should be in selected state and the inline code block formatting should persist', () => {
-            essayResponsePage.responseField()
-                .type('console.log(){enter}')
-                .find('.codeblock')
-                .verifyInnerHTML('<pre class=\"line\">console.log()</pre><pre class=\"line\"><br></pre>');
-            essayResponsePage.previewTabToolbarOption('Bold (Ctrl+B)')
-                .should('have.attr', 'aria-disabled', 'true');
+            essayResponsePage.steps.enterInputInResponseField('console.log(){enter}')
+            essayResponsePage.steps.verifyResponseFieldCodeblockHTML('<pre class=\"line\">console.log()</pre><pre class=\"line\"><br></pre>');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionDisabled('Bold (Ctrl+B)');
         });
 
         it('When the user presses the \'Enter\' key again without typing anything in the new line, even then the inline code block formatting should persist', () => {
-            essayResponsePage.responseField()
-                .type('{enter}')
-                .find('.codeblock')
-                .verifyInnerHTML('<pre class=\"line\">console.log()</pre><pre class=\"line\"><br></pre><pre class=\"line\"><br></pre>');
-            essayResponsePage.responseField()
-                .find('pre')
-                .should('have.length', 3);
-            essayResponsePage.previewTabToolbarOption('Bold (Ctrl+B)')
-                .should('have.attr', 'aria-disabled', 'true');
+            essayResponsePage.steps.enterInputInResponseField('{enter}')
+            essayResponsePage.steps.verifyResponseFieldCodeblockHTML('<pre class=\"line\">console.log()</pre><pre class=\"line\"><br></pre><pre class=\"line\"><br></pre>');
+            essayResponsePage.steps.verifyCodeLength(3);
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionDisabled('Bold (Ctrl+B)');
         });
     });
 
-    describe('Background color, Text color formatting toolbar options - Preview tab', () => {
-        abortEarlySetup();
-        before(() => {
-            essayResponsePage.steps.navigateToCreateQuestion('essay response');
-            cy.barsPreLoaderWait();
-            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
-            essayResponsePage.steps.selectCustomizedFormattingOption(['Background Color', 'Text Color', 'Undo', 'Redo']);
-            essayResponsePage.steps.switchToPreviewTab();
-        });
-
-        it('When the user clicks on the \'Background color\' toolbar option, a popup with an \'Automatic\' color option and a color pallete should be displayed and if the user clicks anywhere outside the popup, then the popup should disappear', () => {
-            essayResponsePage.previewTabToolbarOption('Background Color')
-                .click();
-            essayResponsePage.previewTabToolbarOption('Background Color')
-                .should('have.attr', 'aria-expanded', 'true');
-            essayResponsePage.previewTabColorPalettePopup()
-                .its('0.contentDocument.body').should('not.be.empty')
-                .within(() => {
-                    cy.get('[title="Colors"]')
-                        .find('[title="Automatic"]')
-                        .should('be.visible');
-                });
-            cy.get('body')
-                .click();
-            essayResponsePage.previewTabColorPalettePopup()
-                .should('not.be.visible');
-        });
-
-        it('When the user selects the \'Background color\' toolbar option and selects a color from the popup, the respective color should appear as a background color of the text entered in the response field and the \'Background color\' toolbar option should be in selected state', () => {
-            essayResponsePage.previewTabToolbarOption('Background Color')
-                .click();
-            essayResponsePage.steps.selectColorFromPopup('Strong Cyan');
-            essayResponsePage.responseField()
-                .type('Lorem Ipsum')
-                .verifyInnerHTML('<p><span style="background-color:#1abc9c;">​​​​​​​Lorem Ipsum</span><br></p>');
-        });
-
-        it('When the user enters text in the response field, selects the text and then selects the \'Background color\' toolbar option and selects a color from the popup, the respective color should appear as a background color of the text entered in the response field', () => {
-            essayResponsePage.steps.resetPreviewTabResponseField();
-            essayResponsePage.responseField()
-                .type('Lorem Ipsum{selectAll}');
-            essayResponsePage.previewTabToolbarOption('Background Color')
-                .click()
-                .should('have.attr', 'aria-expanded', 'true');
-            essayResponsePage.steps.selectColorFromPopup('Strong Cyan');
-            essayResponsePage.responseField()
-                .verifyInnerHTML('<p><span style="background-color:#1abc9c;">Lorem Ipsum</span></p>');
-        });
-
-        it('When the user selects the \'Automatic\' option from the \'Background color\' popup, then the background color should get set to the default color', () => {
-            essayResponsePage.responseField()
-                .click();
-            essayResponsePage.previewTabToolbarOption('Background Color')
-                .click();
-            essayResponsePage.steps.selectColorFromPopup('Automatic');
-            essayResponsePage.responseField()
-                .click()
-                .type('dolor sit amet');
-            essayResponsePage.responseField()
-                .verifyInnerHTML('<p><span style="background-color:#1abc9c;">Lorem Ipsum</span>​​​​​​​dolor sit amet</p>')
-        });
-
-        essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Background Color');
-
-        it('When the user clicks on the \'Text color\' toolbar option, a popup with an \'Automatic\' color option and a color pallete should be displayed and if the user clicks anywhere outside the popup, then the popup should disappear', () => {
-            essayResponsePage.steps.resetPreviewTabResponseField();
-            essayResponsePage.previewTabToolbarOption('Text Color')
-                .click();
-            essayResponsePage.previewTabToolbarOption('Text Color')
-                .should('have.attr', 'aria-expanded', 'true');
-            essayResponsePage.previewTabColorPalettePopup()
-                .its('0.contentDocument.body').should('not.be.empty')
-                .within(() => {
-                    cy.get('[title="Colors"]')
-                        .find('[title="Automatic"]')
-                        .should('be.visible');
-                });
-            cy.get('body')
-                .click();
-            essayResponsePage.previewTabColorPalettePopup()
-                .should('not.be.visible');
-        });
-
-        it('When the user selects the \'Text color\' toolbar option and selects a color from the popup, the respective color should appear as color of the text entered in the response field', () => {
-            essayResponsePage.previewTabToolbarOption('Text Color')
-                .click();
-            essayResponsePage.steps.selectColorFromPopup('Strong Cyan');
-            essayResponsePage.responseField()
-                .type('Lorem Ipsum')
-                .verifyInnerHTML('<p><span style="color:#1abc9c;">​​​​​​​Lorem Ipsum</span><br></p>');
-        });
-
-        it('When the user enters text in the response field, selects the text and then selects the \'text color\' toolbar option and selects a color from the popup, the respective color should appear as a text color of the text entered in the response field', () => {
-            essayResponsePage.steps.resetPreviewTabResponseField();
-            essayResponsePage.responseField()
-                .type('Lorem Ipsum{selectAll}');
-            essayResponsePage.previewTabToolbarOption('Text Color')
-                .click()
-                .should('have.attr', 'aria-expanded', 'true');
-            essayResponsePage.steps.selectColorFromPopup('Strong Cyan');
-            essayResponsePage.responseField()
-                .type('Lorem Ipsum')
-                .verifyInnerHTML('<p><span style="color:#1abc9c;">Lorem Ipsum</span></p>');
-        });
-
-        it('When the user selects the \'Automatic\' option from the \'text color\' popup, then the text color should get set to the default color', () => {
-            essayResponsePage.previewTabToolbarOption('Text Color')
-                .click();
-            essayResponsePage.steps.selectColorFromPopup('Automatic');
-            essayResponsePage.responseField()
-                .type('dolor sit amet');
-            essayResponsePage.responseField()
-                .verifyInnerHTML('<p><span style="color:#1abc9c;">Lorem Ipsum</span>​​​​​​​dolor sit amet</p>')
-        });
-
-        essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Text Color');
-    });
-
     describe('Remove formatting toolbar option - Preview tab', () => {
         abortEarlySetup();
         before(() => {
             essayResponsePage.steps.navigateToCreateQuestion('essay response');
             cy.barsPreLoaderWait();
             essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
-            essayResponsePage.steps.selectCustomizedFormattingOption(['Strikethrough', 'Subscript', 'Align Left', 'Align Right', 'Code Inline', 'Background Color', 'Text Color', 'Remove Format', 'Undo', 'Redo']);
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Strikethrough', 'Superscript', 'Subscript', 'Align Left', 'Align Right', 'Code Inline', 'Remove Format']);
             essayResponsePage.steps.switchToPreviewTab();
-            essayResponsePage.responseField()
-                .type('Lorem Ipsum{selectAll}');
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum{selectAll}');
         });
 
         it('When the user has selected text in the response field and applies text formatting options - Bold, Italic, Underline, Strikethrough 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', () => {
@@ -343,12 +193,9 @@ describe('Create question page - Essay Response: Customize formatting options (f
             essayResponsePage.steps.selectPreviewTabToolbarOption('Italic (Ctrl+I)');
             essayResponsePage.steps.selectPreviewTabToolbarOption('Underline (Ctrl+U)');
             essayResponsePage.steps.selectPreviewTabToolbarOption('Strikethrough');
-            essayResponsePage.responseField()
-                .verifyInnerHTML('<p><s><u><em><strong>Lorem Ipsum</strong></em></u></s></p>');
-            essayResponsePage.previewTabToolbarOption('Remove Format')
-                .click();
-            essayResponsePage.responseField()
-                .verifyInnerHTML('<p>Lorem Ipsum</p>');
+            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>');
         });
 
         essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Remove Format');
@@ -356,122 +203,70 @@ describe('Create question page - Essay Response: Customize formatting options (f
         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', () => {
             essayResponsePage.steps.selectPreviewTabToolbarOption('Superscript');
             essayResponsePage.steps.selectPreviewTabToolbarOption('Subscript');
-            essayResponsePage.responseField()
-                .verifyInnerHTML('<p><sub><sup>Lorem Ipsum</sup></sub></p>');
-            essayResponsePage.previewTabToolbarOption('Remove Format')
-                .click();
-            essayResponsePage.responseField()
-                .verifyInnerHTML('<p>Lorem Ipsum</p>');
-        });
-
-        it('When the user has selected text in the response field and applies text formatting options - Background color, Text color 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.previewTabToolbarOption('Background Color')
-                .click();
-            essayResponsePage.steps.selectColorFromPopup('Strong Cyan');
-            essayResponsePage.previewTabToolbarOption('Text Color')
-                .click();
-            essayResponsePage.steps.selectColorFromPopup('Emerald');
-            essayResponsePage.responseField()
-                .verifyInnerHTML('<p><span style=\"color:#2ecc71;\"><span style=\"background-color:#1abc9c;\">Lorem Ipsum</span></span></p>');
-            essayResponsePage.previewTabToolbarOption('Remove Format')
-                .click();
-            essayResponsePage.responseField()
-                .verifyInnerHTML('<p>Lorem Ipsum</p>');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p><sub><sup>Lorem Ipsum</sup></sub></p>');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Remove Format')
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
         });
 
         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.responseField()
-                .verifyInnerHTML('<p style=\"text-align: right;\">Lorem Ipsum</p>');
-            essayResponsePage.previewTabToolbarOption('Remove Format')
-                .click();
-            essayResponsePage.responseField()
-                .verifyInnerHTML('<p>Lorem Ipsum</p>');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p style=\"text-align: right;\">Lorem Ipsum</p>');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Remove Format')
+            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.responseField()
-                .verifyInnerHTML('<p><code>Lorem Ipsum</code></p>');
-            essayResponsePage.previewTabToolbarOption('Remove Format')
-                .click();
-            essayResponsePage.responseField()
-                .verifyInnerHTML('<p>Lorem Ipsum</p>');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p><code>Lorem Ipsum</code></p>');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Remove Format')
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
         });
     });
 
-    describe('Undo, Redo formatting toolbar options - Preview tab', () => {
+    describe('Undo, Redo Controls - Preview tab', () => {
         abortEarlySetup();
         before(() => {
             essayResponsePage.steps.navigateToCreateQuestion('essay response');
             cy.barsPreLoaderWait();
-            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
-            essayResponsePage.steps.selectCustomizedFormattingOption(['Undo', 'Redo']);
             essayResponsePage.steps.switchToPreviewTab();
         });
 
         it('When the user has not made any changes in the response field, the \'Undo\' and \'Redo\' toolbar options should be in disabled state', () => {
-            essayResponsePage.previewTabToolbarOption('Undo (Ctrl+Z)')
-                .should('have.attr', 'aria-disabled', 'true');
-            essayResponsePage.previewTabToolbarOption('Redo (Ctrl+Y)')
-                .should('have.attr', 'aria-disabled', 'true');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionDisabled('Undo (Ctrl+Z)')
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionDisabled('Redo (Ctrl+Y)')
         });
 
         it('When the user makes any changes in the response field, the \'Undo\' toolbar option should get enabled but the \'Redo\' toolbar option should continue to stay in disabled state', () => {
-            essayResponsePage.responseField()
-                .type('Lorem Ipsum');
-            essayResponsePage.previewTabToolbarOption('Undo (Ctrl+Z)')
-                .should('have.attr', 'aria-disabled', 'false');
-            essayResponsePage.previewTabToolbarOption('Redo (Ctrl+Y)')
-                .should('have.attr', 'aria-disabled', 'true');
+            essayResponsePage.steps.enterInputInResponseField('Lorem ');
+            essayResponsePage.steps.focusOutOfResponseField();
+            essayResponsePage.steps.enterInputInResponseField('Ipsum')
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotDisabled('Undo (Ctrl+Z)');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionDisabled('Redo (Ctrl+Y)')
         });
 
         it('When the user clicks on the \'Undo\' toolbar option, it should undo the latest action and when the user performs any undo action, the redo toolbar option should get enabled', () => {
-            for (var i = 0; i < 2; i++) {
-                essayResponsePage.previewTabToolbarOption('Undo (Ctrl+Z)')
-                    .click();
-            }
-            essayResponsePage.responseField()
-                .verifyInnerHTML('<p>Lorem Ips</p>');
-            essayResponsePage.previewTabToolbarOption('Redo (Ctrl+Y)')
-                .should('have.attr', 'aria-disabled', 'false');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Undo (Ctrl+Z)')
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem</p>');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionNotDisabled('Redo (Ctrl+Y)');
         });
 
         it('When the user has performed an undo action, the user should be able to redo it by clicking on the \'Redo\' toolbar option', () => {
-            essayResponsePage.previewTabToolbarOption('Redo (Ctrl+Y)')
-                .click();
-            essayResponsePage.responseField()
-                .verifyInnerHTML('<p>Lorem Ipsu</p>');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Redo (Ctrl+Y)')
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
         });
 
         it('When the user reaches the initial state by performing undo actions, the \'Undo\' toolbar option should get disabled and when the user reaches the latest state by performing redo actions, the \'Redo\' toolbar option should get disabled', () => {
-            for (var i = 0; i < 10; i++) {
-                essayResponsePage.previewTabToolbarOption('Undo (Ctrl+Z)')
-                    .click();
-            }
-            essayResponsePage.previewTabToolbarOption('Undo (Ctrl+Z)')
-                .should('have.attr', 'aria-disabled', 'true');
-            for (var i = 0; i < 11; i++) {
-                essayResponsePage.previewTabToolbarOption('Redo (Ctrl+Y)')
-                    .click();
-            }
-            essayResponsePage.previewTabToolbarOption('Redo (Ctrl+Y)')
-                .should('have.attr', 'aria-disabled', 'true');
-            essayResponsePage.responseField()
-                .verifyInnerHTML('<p>Lorem Ipsum</p>');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionDisabled('Redo (Ctrl+Y)');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
         });
 
         it('The undo toolbar option should get disabled after a certain number of undo actions (18 times)', () => {
-            essayResponsePage.responseField()
-                .type(' dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec tristique ipsum sit amet velit laoreet, eget dapibus mi placerat.');
+            essayResponsePage.steps.enterInputInResponseField(' dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec tristique ipsum sit amet velit laoreet, eget dapibus mi placerat.');
             for (var i = 0; i < 19; i++) {
-                essayResponsePage.previewTabToolbarOption('Undo (Ctrl+Z)')
-                    .click();
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Undo (Ctrl+Z)');
             };
-            essayResponsePage.previewTabToolbarOption('Undo (Ctrl+Z)')
-                .should('have.attr', 'aria-disabled', 'true');
-            essayResponsePage.responseField()
-                .verifyInnerHTML('<p>Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec tristique ipsum sit amet velit laoreet, eget d</p>');
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionDisabled('Undo (Ctrl+Z)');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus</p>');
         });
     });
 
@@ -481,31 +276,26 @@ describe('Create question page - Essay Response: Customize formatting options (f
             essayResponsePage.steps.navigateToCreateQuestion('essay response');
             cy.barsPreLoaderWait();
             essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
-            essayResponsePage.steps.selectCustomizedFormattingOption(['Text direction left to right', 'Text direction right to left', 'Undo', 'Redo']);
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Text direction left to right', 'Text direction right to left']);
             essayResponsePage.steps.switchToPreviewTab();
         });
 
         it('When the user focuses in the response field, the \'Text direction left to right\' toolbar option should be selected by default and the text entered by the user should move left to right', () => {
-            essayResponsePage.responseField()
-                .click();
-            essayResponsePage.previewTabToolbarOption('Text direction left to right')
-                .should('have.attr', 'aria-pressed', 'true');
-            essayResponsePage.responseField()
-                .type('Lorem Ipsum')
-                .verifyInnerHTML('<p>Lorem Ipsum</p>');
+            essayResponsePage.steps.focusInResponseField()
+            essayResponsePage.steps.verifyPreviewTabToolbarOptionSelected('Text direction left to right')
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
         });
 
         //comment: here we are just checking the direction of the text, not the location of the cursor
         it('When the user selects the \'Text direction right to left\' the cursor should move to the right and the text entered by the user should have direction from right to left', () => {
             essayResponsePage.steps.selectPreviewTabToolbarOption('Text direction right to left');
-            essayResponsePage.responseField()
-                .verifyInnerHTML('<p dir=\"rtl\">Lorem Ipsum</p>');
+            essayResponsePage.steps.verifyResponseFieldHTML('<p dir=\"rtl\">Lorem Ipsum</p>');
         });
 
         it('When the user presses the \'Enter\' key, the cursor should move to the next line and the \'Text direction right to left\' toolbar option should be in selected state', () => {
-            essayResponsePage.responseField()
-                .type('{enter}')
-                .verifyInnerHTML('<p dir=\"rtl\">Lorem Ipsum</p><p dir=\"rtl\"><br></p>');
+            essayResponsePage.steps.enterInputInResponseField('{enter}')
+            essayResponsePage.steps.verifyResponseFieldHTML('<p dir=\"rtl\">Lorem Ipsum</p><p dir=\"rtl\"><br></p>');
         });
 
         essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Text direction right to left');
@@ -514,9 +304,8 @@ describe('Create question page - Essay Response: Customize formatting options (f
             essayResponsePage.steps.resetPreviewTabResponseField();
             essayResponsePage.steps.selectPreviewTabToolbarOption('Text direction right to left');
             essayResponsePage.steps.selectPreviewTabToolbarOption('Insert/Remove Bulleted List');
-            essayResponsePage.responseField()
-                .type('Lorem Ipsum')
-                .verifyInnerHTML('<ul dir=\"rtl\"><li>Lorem Ipsum</li></ul>');
+            essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum')
+            essayResponsePage.steps.verifyResponseFieldHTML('<ul dir=\"rtl\"><li>Lorem Ipsum</li></ul>');
         });
     });
 });