itemengine-cypress-automation 1.0.113 → 1.0.114

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

@@ -1,137 +1,113 @@
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 import { essayResponsePage } from "../../../pages";
+import utilities from "../../../support/helpers/utilities";
+import { equationEditorFlyout } from "../../../pages/components";
 const css = Cypress.env('css');
 const grepTags = Cypress.env('grepTags');
 
-const formattingOptions = ['Bold', 'Italic', 'Underline', 'Division', 'Superscript', 'Bulleted List', 'Numbered List', 'Insert Hyperlink', 'Insert Image', 'Special Characters', 'Insert Table', 'Equation Editor', 'Division', 'Code Inline', 'Code Editor', 'Strikethrough', 'Background Color', 'Text Color', 'Subscript', 'Remove Format', 'Division', 'Align Left', 'Align Center', 'Align Right', 'Align Justify', 'Division', 'Increase Indent', 'Decrease Indent', 'Division', 'Text direction left to right', 'Text direction right to left', 'Insert Horizontal Line', 'Block Quote', 'Math characters', 'Division', 'Undo', 'Redo', 'Division'];
-const defaultSelectedFormattingOptions = ['Bold', 'Italic', 'Underline', 'Division', 'Superscript', 'Bulleted List', 'Numbered List', 'Insert Hyperlink', 'Insert Image', 'Special Characters', 'Insert Table'];
-const defaultFormattingOptionsPreviewTab = ['Bold (Ctrl+B)', 'Italic (Ctrl+I)', 'Underline (Ctrl+U)', 'Superscript', 'Insert/Remove Bulleted List', 'Insert/Remove Numbered List', 'Insert Hyperlink', 'Insert Image', 'Special characters', 'Insert Table'];
-const formattingOptionsPreviewTab = ['Bold (Ctrl+B)', 'Italic (Ctrl+I)', 'Underline (Ctrl+U)', 'Superscript', 'Insert/Remove Bulleted List', 'Insert/Remove Numbered List', 'Insert Hyperlink', 'Insert Image', 'Special characters', 'Insert Table', 'Equation Editor', 'Code Inline', 'Code Editor', 'Strikethrough', 'Background Color', 'Text Color', 'Subscript', 'Remove Format', 'Align Left', 'Align Center', 'Align Right', 'Align Justify', 'Increase Indent', 'Decrease Indent', 'Text direction left to right', 'Text direction right to left', 'Insert Horizontal Line', 'Block Quote', 'Math characters', 'Undo (Ctrl+Z)', 'Redo (Ctrl+Y)'];
+const formattingOptions = ['Bold', 'Italic', 'Underline', 'Bulleted List', 'Numbered List', 'Insert Table', 'Increase Indent', 'Decrease Indent', 'Equation Editor', 'Insert Image', 'Strikethrough', 'Subscript', 'Superscript', 'Special Characters', 'Math Characters', 'Insert Hyperlink', 'Block Quote', 'Remove Format', 'Code Inline', 'Code Editor', 'Align Left', 'Align Center', 'Align Right', 'Align Justify', 'Text direction left to right', 'Text direction right to left', 'Insert Horizontal Line', 'Font size', 'Font Color', 'Highlight Text'];
+const defaultSelectedFormattingOptions = ['Bold', 'Italic', 'Underline', 'Bulleted List', 'Numbered List', 'Insert Table', 'Increase Indent', 'Decrease Indent'];
+const defaultFormattingOptionsPreviewTab = ['Bold (Ctrl+B)', 'Italic (Ctrl+I)', 'Underline (Ctrl+U)', 'Insert/Remove Bulleted List', 'Insert/Remove Numbered List', 'Insert Table', 'Increase Indent', 'Decrease Indent'];
+const formattingOptionsPreviewTab = ['Bold (Ctrl+B)', 'Italic (Ctrl+I)', 'Underline (Ctrl+U)', 'Insert/Remove Bulleted List', 'Insert/Remove Numbered List', 'Insert Table', 'Increase Indent', 'Decrease Indent', 'Equation Editor', 'Insert Image', 'Strikethrough', 'Subscript', 'Superscript', 'Special characters', 'Math characters', 'Insert Hyperlink', 'Block Quote', 'Remove Format', 'Code Inline', 'Code Editor', 'Align Left', 'Align Center', 'Align Right', 'Align Justify', 'Text direction left to right', 'Text direction right to left', 'Insert Horizontal Line', 'Font Size', 'Text Color', 'Highlight Text', 'Undo (Ctrl+Z)', 'Redo (Ctrl+Y)'];
+
 describe('Create question page - Essay Response: Customize formatting options (for student player) accordion contents, toolbar options', () => {
     before(() => {
         cy.loginAs('admin');
     });
 
-    //Failing due to https://redmine.zeuslearning.com/issues/530059, https://redmine.zeuslearning.com/issues/525223
-    describe('Customize formatting options (for student player) accordion contents', { tags: 'smoke' }, () => {
+    describe('Customize formatting options accordion contents', { tags: 'smoke' }, () => {
         abortEarlySetup();
         before(() => {
             essayResponsePage.steps.navigateToCreateQuestion('essay response');
         });
 
-        it('By default \'Customize formatting options (for student player)\' accordion should be collapsed and by clicking on the \'Customize formatting options (for student player)\' accordion, user should be able to expand the accordion', () => {
-            essayResponsePage.customizeFormattingOptionsAccordion()
-                .verifyInnerText('Customize formatting options (for student player)')
-                .should('have.attr', 'aria-expanded', 'false');
-            essayResponsePage.customizeFormattingOptionsAccordion()
-                .click()
-                .should('have.attr', 'aria-expanded', 'true');
+        it('By default \'Customize formatting options\' accordion should be collapsed and by clicking on the \'Customize formatting options (for student player)\' accordion, user should be able to expand the accordion', () => {
+            utilities.verifyInnerText(essayResponsePage.customizeFormattingOptionsAccordionLabel(), 'Customize toolbar options and controls');
+            utilities.verifyElementVisibilityState(essayResponsePage.customizeFormattingOptionsSectionExpandIcon(), 'exist');
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
         });
 
         it('CSS of \'Customize formatting options (for student player)\' accordion and contents', { tags: 'css' }, () => {
             cy.log('CSS of accordion label and chevron icon')
-            essayResponsePage.customizeFormattingOptionsAccordionLabel()
-                .verifyCSS(css.color.accordionLabel, css.fontSize.default, css.fontWeight.bold);
-            essayResponsePage.customizeFormattingOptionsAccordion()
-                .find('svg')
-                .should('have.css', 'fill', css.color.activeButtons);
+            utilities.verifyCSS(essayResponsePage.customizeFormattingOptionsAccordionLabel(), {
+                'color': css.color.accordionLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(essayResponsePage.customizeFormattingOptionsAccordion().find('svg'), {
+                'fill': css.color.activeButtons
+            });
             cy.log('CSS of selected toolbar formatting option')
-            essayResponsePage.customizeFormattingOptionsTiles('Bold')
-                .should('have.css', 'background-color', css.color.primaryBtnBg)
+            utilities.verifyCSS(essayResponsePage.customizeFormattingOptionsTiles('Bold'), {
+                'background-color': css.color.primaryBtnBg
+            });
             cy.log('CSS of tick icon of selected toolbar formatting option')
-            essayResponsePage.customizeFormattingOptionsTiles('Bold')
-                .find('[data-name="Icon feather-check"]')
-                .should('have.css', 'fill', css.color.activeButtons);
+            utilities.verifyCSS(essayResponsePage.customizeFormattingOptionsTiles('Bold').find('[data-name="Icon feather-check"]'), {
+                'fill': css.color.activeButtons
+            });
             cy.log('CSS of background of tick icon of selected toolbar formatting option')
-            essayResponsePage.customizeFormattingOptionsTiles('Bold')
-                .find('[data-name*="Rectangle"]')
-                .should('have.css', 'fill', css.color.defaultBackground);
+            utilities.verifyCSS(essayResponsePage.customizeFormattingOptionsTiles('Bold').find('[data-name*="Rectangle"]'), {
+                'fill': css.color.defaultBackground
+            });
             cy.log('CSS of icon of selected toolbar formatting option')
-            essayResponsePage.customizeFormattingOptionsTiles('Bold')
-                .find('.drag-item-flex-wrapper svg')
-                .should('have.css', 'fill', css.color.primaryBtn);
+            utilities.verifyCSS(essayResponsePage.customizeFormattingOptionsTiles('Bold').find('.drag-item-flex-wrapper svg'), {
+                'fill': css.color.primaryBtn
+            });
             cy.log('CSS of drag handle of selected toolbar formatting option')
-            essayResponsePage.customizeFormattingOptionsTiles('Bold')
-                .find('.drag-icon-button-custom-format svg path')
-                .eq(1)
-                .should('have.css', 'color', css.color.activeButtons);
+            utilities.verifyCSS(essayResponsePage.customizeFormattingOptionsTiles('Bold').find('.drag-icon-button-custom-format svg path').eq(1), {
+                'color': css.color.activeButtons
+            });
             cy.log('CSS of unselected toolbar formatting option')
-            essayResponsePage.customizeFormattingOptionsTiles('Code Inline')
-                .should('have.css', 'background-color', css.color.secondaryBtnBg);
+            utilities.verifyCSS(essayResponsePage.customizeFormattingOptionsTiles('Code Inline'), {
+                'background-color': css.color.secondaryBtnBg
+            });
             cy.log('CSS of icon of unselected toolbar formatting option')
-            essayResponsePage.customizeFormattingOptionsTiles('Code Inline')
-                .find('.drag-item-flex-wrapper path')
-                .eq(1)
-                .should('have.css', 'fill', css.color.secondaryBtn);
+            utilities.verifyCSS(essayResponsePage.customizeFormattingOptionsTiles('Code Inline').find('.drag-item-flex-wrapper path').eq(1), {
+                'fill': css.color.secondaryBtn
+            });
             cy.log('CSS of drag handle of unselected toolbar formatting option')
-            essayResponsePage.customizeFormattingOptionsTiles('Code Inline')
-                .find('.drag-icon-button-custom-format svg path')
-                .eq(1)
-                .should('have.css', 'fill', css.color.secondaryBtn);
+            utilities.verifyCSS(essayResponsePage.customizeFormattingOptionsTiles('Code Inline').find('.drag-icon-button-custom-format svg path').eq(1), {
+                'fill': css.color.secondaryBtn
+            });
         });
 
         it('Accessibility of \'Customize formatting options (for student player)\' accordion and contents', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(essayResponsePage.customizeFormattingOptionsAccordion().parents('.Mui-expanded'));
+            cy.checkAccessibility(essayResponsePage.customizeFormattingOptionsWrapper());
         });
 
         it('When \'Customize formatting options (for student player)\' accordion is in expanded state, then all the formatting options should be displayed along with drag handle.', () => {
-            formattingOptions.forEach((optionName, count) => {
-                cy.get('.icon-button-custom-format')
-                    .eq(count)
-                    .should('have.attr', 'title', optionName)
-                    .within(() => {
-                        essayResponsePage.customizeFormattingOptionsdragHandleButton()
-                            .should('be.visible');
-                    });
-            });
+            essayResponsePage.steps.verifyCustomizeToolbarOptions(formattingOptions);
+            utilities.verifyElementCount(essayResponsePage.customizeFormattingOptionsDragHandleButton(), 30);
         });
 
-        it('When the \'Customize formatting options (for student player)\' accordion is in expanded state, then the following options should be in selected state by default - \'Bold, Italic, Underline, Division, Superscript, Bulleted list, Numbered list, Link, Insert Image, Special Characterss, Table\'. All the other options should be in unselected state.', () => {
-            defaultSelectedFormattingOptions.forEach((option, count) => {
-                cy.get('.icon-button-custom-format')
-                    .eq(count)
-                    .should('have.attr', 'data-aria-pressed', 'true');
+        it(`When the \'Customize formatting options (for student player)\' accordion is in expanded state, then the following options should be in selected state by default - ${defaultSelectedFormattingOptions}. All the other options should be in unselected state.`, () => {
+            defaultSelectedFormattingOptions.forEach((option) => {
+                essayResponsePage.steps.verifyCustomizeFormattingOptionIsSelected(option);
+            });
+            formattingOptions.splice(8, formattingOptions.length).forEach((option) => {
+                essayResponsePage.steps.verifyCustomizeFormattingOptionNotSelected(option);
             });
-            for (let index = 11; index < formattingOptions.length; index++) {
-                cy.get('.icon-button-custom-format')
-                    .eq(index)
-                    .should('have.attr', 'data-aria-pressed', 'false');
-            };
         });
 
         it('User should be able to unselect any default selected formatting option and should be able to select any default unselected formatting option and the changes should be reflected in the toolbar in the preview tab', () => {
-            essayResponsePage.customizeFormattingOptionsTiles('Superscript')
-                .click()
-                .should('have.attr', 'data-aria-pressed', 'false');
-            essayResponsePage.customizeFormattingOptionsTiles('Strikethrough')
-                .click()
-                .should('have.attr', 'data-aria-pressed', 'true');
+            essayResponsePage.steps.deselectCustomizedFormattingOption(['Increase Indent']);
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Strikethrough']);
             essayResponsePage.steps.switchToPreviewTab();
-            essayResponsePage.previewTabToolbarOption('Strikethrough')
-                .should('be.visible');
-            essayResponsePage.previewTabToolbarOption('Superscript')
-                .should('not.exist');
+            utilities.verifyElementVisibilityState(essayResponsePage.previewTabToolbarOption('Strikethrough'), 'visible');
+            utilities.verifyElementVisibilityState(essayResponsePage.previewTabToolbarOption('Increase Indent'), 'notExist');
         });
 
         it('When the user selects the \'Equation editor\' formatting option, the \'Equation editor\' section should be displayed below the formatting options. On deselecting \'Equation editor\' formatting option, \'Equation editor\' section should disappear', () => {
             cy.log('Switching to edit tab')
             essayResponsePage.steps.switchToEditTab();
-            essayResponsePage.customizeFormattingOptionsTiles('Equation Editor')
-                .click()
-                .should('have.attr', 'data-aria-pressed', 'true');
-            essayResponsePage.equationEditorOptionsWrapper()
-                .should('be.visible');
-            essayResponsePage.customizeFormattingOptionsTiles('Equation Editor')
-                .click()
-                .should('have.attr', 'data-aria-pressed', 'false');
-            essayResponsePage.equationEditorOptionsWrapper()
-                .should('not.exist');
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor']);
+            utilities.verifyElementVisibilityState(essayResponsePage.equationEditorSectionCategories(), 'visible');
+            essayResponsePage.steps.deselectCustomizedFormattingOption(['Equation Editor']);
+            utilities.verifyElementVisibilityState(essayResponsePage.equationEditorSectionWrapper(), 'notExist');
         });
 
         it('User should be able to collapse \'Customize formatting options (for student player)\' accordion.', () => {
-            essayResponsePage.customizeFormattingOptionsAccordion()
-                .click()
-                .should('have.attr', 'aria-expanded', 'false');
+            essayResponsePage.steps.collapseCustomizeFormattingOptionsAccordion();
         });
     });
 
@@ -139,71 +115,35 @@ describe('Create question page - Essay Response: Customize formatting options (f
         abortEarlySetup();
         before(() => {
             essayResponsePage.steps.navigateToCreateQuestion('essay response');
-            cy.barsPreLoaderWait();
-            essayResponsePage.steps.switchToPreviewTab();
         });
 
-        it('When the user switches to Preview tab, then the following options should be displayed in the response field toolbar - \'Bold, Italic, Underline, Superscript, Bulleted list, Numbered list, Link, Insert Image, Special Characters, Table\' along with a separator after \'Underline\' option', () => {
-            essayResponsePage.previewTabToolbarWrapper()
-                .within(() => {
-                    defaultFormattingOptionsPreviewTab.forEach((optionName, count) => {
-                        cy.get('.cke_button')
-                            .eq(count)
-                            .should('have.attr', 'title', optionName)
-                            .and('be.visible');
-                    });
-                });
-            essayResponsePage.previewTabToolbarOption('Underline (Ctrl+U)')
-                .next()
-                .should('have.attr', 'role', 'separator')
-                .should('be.visible');
+        it(`When the user switches to Preview tab, then the following options should be displayed in the response field toolbar - ${defaultFormattingOptionsPreviewTab}`, () => {
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.verifyPreviewTabToolbarOptions(defaultFormattingOptionsPreviewTab);
         });
 
-        it('When the user selects all formatting options from the \'Customize formatting options (for student player)\' accordion, all formatting options should appear in the preview tab along with separator after \'Underline\', \'Equation Editor\', \'Remove Format\', \'Justify\', \'Decrease indent\', \'Math characters\' options', () => {
-            let separatorInToolbarContents = ['Underline (Ctrl+U)', 'Equation Editor', 'Remove Format', 'Align Justify', 'Decrease Indent', 'Math characters']
-            essayResponsePage.steps.switchToEditTab()
+        it('When the user selects all formatting options from the \'Customize formatting options\' accordion, all formatting options should appear in the preview tab', () => {
+            essayResponsePage.steps.switchToEditTab();
             essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
-            for (let index = 11; index < formattingOptions.length; index++) {
-                cy.get('.icon-button-custom-format')
-                    .eq(index)
-                    .click()
-                    .should('have.attr', 'data-aria-pressed', 'true');
-            };
-            essayResponsePage.steps.switchToPreviewTab();
-            essayResponsePage.previewTabToolbarWrapper()
-                .within(() => {
-                    formattingOptionsPreviewTab.forEach((optionName, count) => {
-                        cy.get('.cke_button')
-                            .eq(count)
-                            .should('have.attr', 'title', optionName)
-                            .and('be.visible');
-                    });
-                });
-            separatorInToolbarContents.forEach((toolbarOption) => {
-                essayResponsePage.previewTabToolbarOption(toolbarOption)
-                    .next()
-                    .should('have.attr', 'role', 'separator')
-                    .should('be.visible');
+            essayResponsePage.steps.selectCustomizedFormattingOption(formattingOptions.splice(8, formattingOptions.length));
+            formattingOptions.forEach((option) => {
+                essayResponsePage.steps.verifyCustomizeFormattingOptionIsSelected(option);
             });
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.verifyPreviewTabToolbarOptions(formattingOptionsPreviewTab);
         });
 
-        it('In the customized formatting options menu, if the user has selected a divider line at the end, then that line should not be present in the essay response toolbar', () => {
-            essayResponsePage.previewTabToolbarSeperator()
-                .should('have.length', 6);
-        });
-
-        it('All options should be in enabled state except \'Left indent\', \'Undo\', \'Redo\' options which should be in disabled state', () => {
+        it('All options should be in enabled state except \'Decrease Indent\', \'Undo\', \'Redo\' options which should be in disabled state', () => {
             let disabledOptions = ['Decrease Indent', 'Undo (Ctrl+Z)', 'Redo (Ctrl+Y)']
             disabledOptions.forEach((optionName) => {
-                essayResponsePage.previewTabToolbarOption(optionName)
-                    .should('have.attr', 'aria-disabled', 'true');
+                essayResponsePage.steps.verifyPreviewTabToolbarOptionDisabled(optionName)
             });
         });
 
         it('CSS of formatting options in Preview tab', { tags: 'css' }, () => {
-            essayResponsePage.previewTabToolbarOption('Bold (Ctrl+B)')
-                .find('.cke_button_icon')
-                .should('have.css', 'color', css.color.activeButtons);
+            utilities.verifyCSS(essayResponsePage.previewTabToolbarOption('Bold (Ctrl+B)'), {
+                'color': css.color.activeButtons
+            });
         });
 
         it('Accessibility of formatting options in Preview tab', { tags: 'a11y' }, () => {
@@ -218,7 +158,7 @@ describe('Create question page - Essay Response: Customize formatting options (f
                 essayResponsePage.steps.navigateToCreateQuestion('essay response');
                 cy.barsPreLoaderWait();
                 essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
-                essayResponsePage.steps.selectCustomizedFormattingOption(['Strikethrough', 'Undo', 'Redo']);
+                essayResponsePage.steps.selectCustomizedFormattingOption(['Strikethrough']);
                 essayResponsePage.steps.switchToPreviewTab();
             });
 
@@ -228,108 +168,86 @@ describe('Create question page - Essay Response: Customize formatting options (f
 
             it('When the user selects the \'Bold\' toolbar option and enters text in the response field, then the text should be displayed in bold and if the user deselects the \'Bold\' toolbar option and continues to types, then the entered text should be displayed in default format', () => {
                 essayResponsePage.steps.selectPreviewTabToolbarOption('Bold (Ctrl+B)');
-                essayResponsePage.responseField()
-                    .type('Lorem Ipsum')
-                    .verifyInnerHTML('<p><strong>​​​​​​​Lorem Ipsum</strong><br></p>');
+                essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+                essayResponsePage.steps.verifyResponseFieldHTML('<p><strong>​​​​​​​Lorem Ipsum</strong><br></p>');
                 essayResponsePage.steps.deselectPreviewTabToolbarOption('Bold (Ctrl+B)');
-                essayResponsePage.responseField()
-                    .type(' dolor')
-                    .verifyInnerHTML('<p><strong>Lorem Ipsum</strong>​​​​​​​ dolor<br></p>');
+                essayResponsePage.steps.enterInputInResponseField(' dolor');
+                essayResponsePage.steps.verifyResponseFieldHTML('<p><strong>Lorem Ipsum</strong>​​​​​​​ dolor<br></p>');
             });
 
             it('When the user enters text in the response field, selects the text and then selects the \'Bold\' toolbar option, then the should be displayed in bold and if the user deselects the \'Bold\' toolbar option, then the entered text should be displayed in default format', () => {
-                essayResponsePage.responseField()
-                    .type('Lorem Ipsum{selectAll}');
+                essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum{selectAll}');
                 essayResponsePage.steps.selectPreviewTabToolbarOption('Bold (Ctrl+B)');
-                essayResponsePage.responseField()
-                    .verifyInnerHTML('<p><strong>Lorem Ipsum</strong></p>');
+                essayResponsePage.steps.verifyResponseFieldHTML('<p><strong>Lorem Ipsum</strong></p>');
                 essayResponsePage.steps.deselectPreviewTabToolbarOption('Bold (Ctrl+B)');
-                essayResponsePage.responseField()
-                    .verifyInnerHTML('<p>Lorem Ipsum</p>');
+                essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
             });
 
             essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Bold (Ctrl+B)');
 
             it('When the user selects the \'Italic\' toolbar option and enters text in the response field, then the text should be displayed in italic and if the user deselects the \'Italic\' toolbar option and continues to types, then the entered text should be displayed in default format', () => {
                 essayResponsePage.steps.selectPreviewTabToolbarOption('Italic (Ctrl+I)');
-                essayResponsePage.responseField()
-                    .type('Lorem Ipsum')
-                    .verifyInnerHTML('<p><em>​​​​​​​Lorem Ipsum</em><br></p>');
+                essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+                essayResponsePage.steps.verifyResponseFieldHTML('<p><em>​​​​​​​Lorem Ipsum</em><br></p>');
                 essayResponsePage.steps.deselectPreviewTabToolbarOption('Italic (Ctrl+I)');
-                essayResponsePage.responseField()
-                    .type(' dolor')
-                    .verifyInnerHTML('<p><em>Lorem Ipsum</em>​​​​​​​ dolor<br></p>');
+                essayResponsePage.steps.enterInputInResponseField(' dolor');
+                essayResponsePage.steps.verifyResponseFieldHTML('<p><em>Lorem Ipsum</em>​​​​​​​ dolor<br></p>');
             });
 
             it('When the user enters text in the response field, selects the text and then selects the \'Italic\' toolbar option, then the should be displayed in italic and if the user deselects the \'Italic\' toolbar option, then the entered text should be displayed in default format', () => {
-                essayResponsePage.responseField()
-                    .type('Lorem Ipsum{selectAll}');
+                essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum{selectAll}');
                 essayResponsePage.steps.selectPreviewTabToolbarOption('Italic (Ctrl+I)');
-                essayResponsePage.responseField()
-                    .verifyInnerHTML('<p><em>Lorem Ipsum</em></p>');
+                essayResponsePage.steps.verifyResponseFieldHTML('<p><em>Lorem Ipsum</em></p>');
                 essayResponsePage.steps.deselectPreviewTabToolbarOption('Italic (Ctrl+I)');
-                essayResponsePage.responseField()
-                    .verifyInnerHTML('<p>Lorem Ipsum</p>');
+                essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
             });
 
             essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Italic (Ctrl+I)');
 
             it('When the user selects the \'Underline\' toolbar option and enters text in the response field, then the text should get underlined and if the user deselects the \'Underline\' toolbar option and continues to types, then the entered text should be displayed in default format', () => {
                 essayResponsePage.steps.selectPreviewTabToolbarOption('Underline (Ctrl+U)');
-                essayResponsePage.responseField()
-                    .type('Lorem Ipsum')
-                    .verifyInnerHTML('<p><u>​​​​​​​Lorem Ipsum</u><br></p>');
+                essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+                essayResponsePage.steps.verifyResponseFieldHTML('<p><u>​​​​​​​Lorem Ipsum</u><br></p>');
                 essayResponsePage.steps.deselectPreviewTabToolbarOption('Underline (Ctrl+U)');
-                essayResponsePage.responseField()
-                    .type(' dolor')
-                    .verifyInnerHTML('<p><u>Lorem Ipsum</u>​​​​​​​ dolor<br></p>');
+                essayResponsePage.steps.enterInputInResponseField(' dolor');
+                essayResponsePage.steps.verifyResponseFieldHTML('<p><u>Lorem Ipsum</u>​​​​​​​ dolor<br></p>');
             });
 
             it('When the user enters text in the response field, selects the text and then selects the \'Underline\' toolbar option, then the should get underlined and if the user deselects the \'Underline\' toolbar option, then the entered text should be displayed in default format', () => {
-                essayResponsePage.responseField()
-                    .type('Lorem Ipsum{selectAll}');
+                essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum{selectAll}');
                 essayResponsePage.steps.selectPreviewTabToolbarOption('Underline (Ctrl+U)');
-                essayResponsePage.responseField()
-                    .verifyInnerHTML('<p><u>Lorem Ipsum</u></p>');
+                essayResponsePage.steps.verifyResponseFieldHTML('<p><u>Lorem Ipsum</u></p>');
                 essayResponsePage.steps.deselectPreviewTabToolbarOption('Underline (Ctrl+U)');
-                essayResponsePage.responseField()
-                    .verifyInnerHTML('<p>Lorem Ipsum</p>');
+                essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
             });
 
             essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Underline (Ctrl+U)');
 
             it('When the user selects the \'Strikethrough\' toolbar option and enters text in the response field, then the text should get striked through and if the user deselects the \'Strikethrough\' toolbar option and continues to types, then the entered text should be displayed in default format', () => {
                 essayResponsePage.steps.selectPreviewTabToolbarOption('Strikethrough');
-                essayResponsePage.responseField()
-                    .type('Lorem Ipsum')
-                    .verifyInnerHTML('<p><s>​​​​​​​Lorem Ipsum</s><br></p>');
+                essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum');
+                essayResponsePage.steps.verifyResponseFieldHTML('<p><s>​​​​​​​Lorem Ipsum</s><br></p>');
                 essayResponsePage.steps.deselectPreviewTabToolbarOption('Strikethrough');
-                essayResponsePage.responseField()
-                    .type(' dolor')
-                    .verifyInnerHTML('<p><s>Lorem Ipsum</s>​​​​​​​ dolor<br></p>');
+                essayResponsePage.steps.enterInputInResponseField(' dolor');
+                essayResponsePage.steps.verifyResponseFieldHTML('<p><s>Lorem Ipsum</s>​​​​​​​ dolor<br></p>');
             });
 
             it('When the user enters text in the response field, selects the text and then selects the \'Strikethrough\' toolbar option, then the should get striked through and if the user deselects the \'Strikethrough\' toolbar option, then the entered text should be displayed in default format', () => {
-                essayResponsePage.responseField()
-                    .type('Lorem Ipsum{selectAll}');
+                essayResponsePage.steps.enterInputInResponseField('Lorem Ipsum{selectAll}');
                 essayResponsePage.steps.selectPreviewTabToolbarOption('Strikethrough');
-                essayResponsePage.responseField()
-                    .verifyInnerHTML('<p><s>Lorem Ipsum</s></p>');
+                essayResponsePage.steps.verifyResponseFieldHTML('<p><s>Lorem Ipsum</s></p>');
                 essayResponsePage.steps.deselectPreviewTabToolbarOption('Strikethrough');
-                essayResponsePage.responseField()
-                    .verifyInnerHTML('<p>Lorem Ipsum</p>');
+                essayResponsePage.steps.verifyResponseFieldHTML('<p>Lorem Ipsum</p>');
             });
 
             essayResponsePage.tests.verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption('Strikethrough');
 
             it('The user should be able to add a combination of \'Bold, Italic, Underline\' formatting options to the text in the response field', () => {
-                essayResponsePage.responseField()
-                    .type('Lorem Ipsum{selectAll}');
+                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.responseField()
-                    .verifyInnerHTML('<p><u><em><strong>Lorem Ipsum</strong></em></u></p>');
+                essayResponsePage.steps.verifyResponseFieldHTML('<p><u><em><strong>Lorem Ipsum</strong></em></u></p>');
             });
         });
     }