itemengine-cypress-automation 1.0.119 → 1.0.121

package/cypress/e2e/ILC/ShortTextResponseNew/editTabBasicSections.js

@@ -0,0 +1,503 @@
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { shortTextResponsePage } from "../../../pages";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create question page - Short text response: Question Instructions, Set limit', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question Instructions input field - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Short text response question type');
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            cy.barsPreLoaderWait();
+        });
+
+        shortTextResponsePage.tests.verifyQuestionInstructionsInputFieldEditTab();
+    });
+
+    describe('Question Instructions input field - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Short text response question type');
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            cy.barsPreLoaderWait();
+        });
+
+        shortTextResponsePage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
+    });
+
+    describe('Short text response: Set limit section - Edit tab contents', () => {
+        abortEarlySetup();
+        before(() => {
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Set limit\' label should be displayed', () => {
+            utilities.verifyInnerText(shortTextResponsePage.setLimitLabel(), 'Set limit');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.setLimitLabel(), 'visible');
+        });
+
+        it('\'Word\', \'Character\' and \'None\' labels and radio buttons should be displayed and by default \'Word\' should be selected', () => {
+            utilities.verifyInnerText(shortTextResponsePage.characterLabel(), 'Character');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.characterLabel(), 'visible');
+            shortTextResponsePage.steps.verifyCharacterRadioButtonSelected();
+            utilities.verifyInnerText(shortTextResponsePage.wordLabel(), 'Word');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.wordLabel(), 'visible');
+            shortTextResponsePage.steps.verifyWordRadioButtonUnselected();
+            utilities.verifyInnerText(shortTextResponsePage.noneLabel(), 'None');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.noneLabel(), 'visible');
+            shortTextResponsePage.steps.verifyNoneRadioButtonUnselected();
+        });
+
+        it('\'Minimum character limit\' and \'Maximum character limit\' labels should be displayed', () => {
+            utilities.verifyInnerText(shortTextResponsePage.minimumLimitLabel(), 'Minimum character limit');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.minimumLimitLabel(), 'visible');
+            utilities.verifyInnerText(shortTextResponsePage.maximumLimitLabel(), 'Maximum character limit');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.maximumLimitLabel(), 'visible');
+        });
+
+        it('\'Minimum character limit\' and \'Maximum character limit\' input fields should be displayed and have 0 and 1000 value by default', () => {
+            utilities.verifyElementVisibilityState(shortTextResponsePage.minimumLimitInputField(), 'visible');
+            shortTextResponsePage.steps.verifyMinimumLimitInputField(0)
+            utilities.verifyElementVisibilityState(shortTextResponsePage.maximumLimitInputField(), 'visible');
+            shortTextResponsePage.steps.verifyMaximumLimitInputField(50);
+        });
+
+        it('User should be able to update values in both the input fields', () => {
+            shortTextResponsePage.steps.setMinimumLimit(100);
+            shortTextResponsePage.steps.setMaximumLimit(500);
+        });
+
+        it('When the user clears the minimum character limit input field and focuses out of it, then error message \'Error: Minimum character limit is required\' should be displayed below the input field', () => {
+            shortTextResponsePage.steps.clearAndFocusOutOfMinimumLimitInputField();
+            utilities.verifyInnerText(shortTextResponsePage.errorMessage(), 'Error: Minimum character limit is required.');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.errorMessage(), 'visible');
+        });
+
+        shortTextResponsePage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When the user enters value in minimum character limit input field then the error message should disappear', () => {
+            shortTextResponsePage.steps.setMinimumLimit(0);
+            shortTextResponsePage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('When the user clears the maximum character limit input field and focuses out of it, then error message \'Error: Maximum character limit is required.\' should be displayed below the input field', () => {
+            shortTextResponsePage.steps.clearAndFocusOutOfMaximumLimitInputField();
+            utilities.verifyInnerText(shortTextResponsePage.errorMessage(), 'Error: Maximum character limit is required.');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.errorMessage(), 'visible');
+        });
+
+        it('When the user enters value in maximum character limit input field then the error message should disappear', () => {
+            shortTextResponsePage.steps.setMaximumLimit(500);
+            shortTextResponsePage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('When the user sets minimum limit input field value greater than maximum limit input field value then error message \'Error: Minimum limit must be less than or equal to maximum limit.\' and \'Error: Maximum limit must be greater than or equal to minimum limit.\'should be displayed below the minimum and maximum input field respectively', () => {
+            shortTextResponsePage.steps.setMinimumLimit(700);
+            shortTextResponsePage.steps.verifyMaximumLimitErrorMessage();
+            shortTextResponsePage.steps.verifyMinimumLimitErrorMessage();
+        });
+
+        shortTextResponsePage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When the user sets minimum limit input field value less than or equal to maximum limit input field value then error message should disappear', () => {
+            shortTextResponsePage.steps.setMinimumLimit(500);
+            shortTextResponsePage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('When the user sets maximum limit input field value less than minimum limit input field value then error message \'Error: Minimum limit must be less than or equal to maximum limit.\' and \'Error: Maximum limit must be greater than or equal to minimum limit.\'should be displayed below the minimum and maximum input field respectively', () => {
+            shortTextResponsePage.steps.setMaximumLimit(400);
+            shortTextResponsePage.steps.verifyMaximumLimitErrorMessage();
+            shortTextResponsePage.steps.verifyMinimumLimitErrorMessage();
+        });
+
+        it('When the user sets maximum limit input field value greater than or equal to minimum limit input field value then error message should disappear', () => {
+            shortTextResponsePage.steps.setMaximumLimit(800);
+            shortTextResponsePage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('\'Always show maximum limit\' and \'Always show minimum limit\' labels and checkbox should be displayed and by default \'Always show maximum limit\' should be checked', () => {
+            utilities.verifyInnerText(shortTextResponsePage.alwaysShowMaxLimitLabel(), 'Always show maximum limit');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.alwaysShowMaxLimitLabel(), 'visible');
+            utilities.verifyInnerText(shortTextResponsePage.alwaysShowMinLimitLabel(), 'Always show minimum limit');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.alwaysShowMinLimitLabel(), 'visible');
+            shortTextResponsePage.steps.verifyAlwaysShowMaximumLimitCheckboxIsChecked();
+        });
+
+        it('When the user selects \'Word\' radio button then labels should change to \'Minimum word limit\' and \'Maximum word limit\'', () => {
+            shortTextResponsePage.steps.selectWordRadioButton();
+            utilities.verifyInnerText(shortTextResponsePage.minimumLimitLabel(), 'Minimum word limit');
+            utilities.verifyInnerText(shortTextResponsePage.maximumLimitLabel(), 'Maximum word limit');
+        });
+
+        it('\'Minimum word limit\' and \'Maximum word limit\' input fields should be updated to 0 and 20 by default', () => {
+            shortTextResponsePage.steps.verifyMinimumLimitInputField(0);
+            shortTextResponsePage.steps.verifyMaximumLimitInputField(20);
+        });
+
+        it('User should be able to update values in both the input fields', () => {
+            shortTextResponsePage.steps.setMinimumLimit(75);
+            shortTextResponsePage.steps.setMaximumLimit(120);
+        });
+
+        it('When the user clears the minimum word limit input field and focuses out of it, then error message \'Error: Minimum word limit is required\' should be displayed below the input field', () => {
+            shortTextResponsePage.steps.clearAndFocusOutOfMinimumLimitInputField();
+            utilities.verifyInnerText(shortTextResponsePage.errorMessage(), 'Error: Minimum word limit is required.');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.errorMessage(), 'visible');
+        });
+
+        shortTextResponsePage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When the user enters value in minimum word limit input field then the error message should disappear', () => {
+            shortTextResponsePage.steps.setMinimumLimit(0);
+            shortTextResponsePage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('When the user clears the maximum word limit input field and focuses out of it, then error message \'Error: Maximum word limit is required.\' should be displayed below the input field', () => {
+            shortTextResponsePage.steps.clearAndFocusOutOfMaximumLimitInputField();
+            utilities.verifyInnerText(shortTextResponsePage.errorMessage(), 'Error: Maximum word limit is required.');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.errorMessage(), 'visible');
+        });
+
+        it('When the user enters value in maximum word limit input field then the error message should disappear', () => {
+            shortTextResponsePage.steps.setMaximumLimit(500);
+            shortTextResponsePage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('CSS of \'Set limit\' sections', { tags: 'css' }, () => {
+            utilities.verifyCSS(shortTextResponsePage.setLimitLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(shortTextResponsePage.wordLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(shortTextResponsePage.characterLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(shortTextResponsePage.noneLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(shortTextResponsePage.minimumLimitLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(shortTextResponsePage.minimumLimitLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(shortTextResponsePage.minimumLimitInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(shortTextResponsePage.maximumLimitInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(shortTextResponsePage.alwaysShowMaxLimitLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(shortTextResponsePage.alwaysShowMinLimitLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(shortTextResponsePage.wordRadioButton().parent().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Set limit\' section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(shortTextResponsePage.setLimitLabel().parents('[class*="SetLimitWrapper"]'));
+        });
+
+        it('When the user selects \'None\' radio button then the maximum and minimum limit labels and input field and always show maximum/minimum limits labels and checkbox should not be displayed', () => {
+            shortTextResponsePage.steps.selectNoneRadioButton();
+            utilities.verifyElementVisibilityState(shortTextResponsePage.minMaxLabelAndInputFieldWrapper(), 'notExist');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.alwaysShowMaxLimitLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.alwaysShowMaxLimitLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.alwaysShowMaxLimitCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.alwaysShowMaxLimitCheckbox(), 'notExist');
+        });
+    });
+
+    describe('Short text response: Set limit section : Character - Specify correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When maximum characters count is set to 50 characters then answer input field should have maximum limit 50 characters in the specify correct answer section', () => {
+            shortTextResponsePage.steps.verifyLimitInSpecifyCorrectAnswer(50);
+        });
+
+        it('When the user updates the maximum character limit input field value then updated maximum character limit value should be updated in the specify correct answer section', () => {
+            shortTextResponsePage.steps.setMaximumLimit(5);
+            shortTextResponsePage.steps.verifyLimitInSpecifyCorrectAnswer(5);
+        });
+
+        it('User should able to enter text in the response field', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldSpecifyCorrectAnswerSection('Lorem');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldSpecifyCorrectAnswerSection('Lorem');
+        });
+
+        it('When the user reaches the character limit, then the warning message \'Maximum # characters have been entered\' should be displayed', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldSpecifyCorrectAnswerSection('Correct');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldSpecifyCorrectAnswerSection('Corre');
+            shortTextResponsePage.steps.verifyWarningMessage('Maximum 5 characters have been entered.');
+        });
+
+        it('CSS of \'Character limit reached\' warning message and container', { tags: 'css' }, () => {
+            utilities.verifyCSS(shortTextResponsePage.warningMessage(), {
+                'color': css.color.warningMessage,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(shortTextResponsePage.warningMessageContainer().find('svg'), {
+                'color': css.color.warningMessage,
+            });
+            utilities.verifyCSS(shortTextResponsePage.warningMessageContainer(), {
+                'border': `1px solid ${css.color.warningContainerBorder}`
+            });
+            utilities.verifyCSS(shortTextResponsePage.warningMessageContainer(), {
+                'background-color': css.color.warningContainerBackground
+            });
+        });
+
+        it('Accessibility of \'Character limit reached\' warning container', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(shortTextResponsePage.warningMessageContainer());
+        });
+
+        it('When the user removes/deletes some characters, the warning message should disappear', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldSpecifyCorrectAnswerSection('{backspace}');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldSpecifyCorrectAnswerSection('');
+            shortTextResponsePage.steps.verifyWarningMessageNotExist();
+        });
+
+        it('When the user sets 3 as minimum character limit and enters the character less than the minimum character limit value set and focus out of response field, then the warning message \'Minimum 3 characters are required\' should be displayed', () => {
+            shortTextResponsePage.steps.setMinimumLimit(3);
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldSpecifyCorrectAnswerSection('Lo');
+            shortTextResponsePage.steps.focusOutOfInputFieldSpecifyCorrectAnswerSection();
+            shortTextResponsePage.steps.verifyWarningMessage('Minimum 3 characters are required.');
+        });
+
+        it('When the user enters the character greater than the minimum character limit value set by the user, then the warning message should disappear', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldSpecifyCorrectAnswerSection('loelwy');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldSpecifyCorrectAnswerSection('loelw');
+            shortTextResponsePage.steps.verifyWarningMessageNotExist();
+        });
+    });
+
+    describe('Short text response: Set limit section: Word, None: Specify correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            cy.barsPreLoaderWait();
+            shortTextResponsePage.steps.selectWordRadioButton();
+            shortTextResponsePage.steps.setMinimumLimit(3);
+            shortTextResponsePage.steps.setMaximumLimit(7);
+        });
+
+        it('When maximum words count is set to 20 characters then user should be able to enter maximum 20 characters in the specify correct answer section', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldSpecifyCorrectAnswerSection('The elephant played piano under the sunshine');
+        });
+
+        it('When the user reaches the word limit, then the warning message \'Maximum # words have been entered\' should be displayed', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldSpecifyCorrectAnswerSection('The elephant played piano under the sunshine while riding a bicycle');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldSpecifyCorrectAnswerSection('The elephant played piano under the sunshinewhileridingabicycle');
+            shortTextResponsePage.steps.verifyWarningMessage('Maximum 7 words have been entered.');
+        });
+
+        it('When the user removes/deletes some words, the warning message should disappear', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldSpecifyCorrectAnswerSection('{backspace}');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldSpecifyCorrectAnswerSection('');
+            shortTextResponsePage.steps.verifyWarningMessageNotExist();
+        });
+
+        it('When the user enters the word less than the minimum word limit value set by the user and focus out of response field, then the warning message \'Minimum # words are required\' should be displayed', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldSpecifyCorrectAnswerSection('abc abc');
+            shortTextResponsePage.steps.focusOutOfInputFieldSpecifyCorrectAnswerSection();
+            shortTextResponsePage.steps.verifyWarningMessage('Minimum 3 words are required.');
+        });
+
+        it('When the user enters the word greater than the minimum word limit value set by the user, then the warning message should disappear', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldSpecifyCorrectAnswerSection('abc abc abc');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldSpecifyCorrectAnswerSection('abc abc abc');
+            shortTextResponsePage.steps.verifyWarningMessageNotExist();
+        });
+
+        it('When the user selects \'None\' radio button then maximum and minimum limits should not be displayed in the specify correct answer section and when user types anything in the response field then error message should not be displayed', () => {
+            shortTextResponsePage.steps.selectNoneRadioButton();
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldSpecifyCorrectAnswerSection('Loremdola');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldSpecifyCorrectAnswerSection('Loremdola');
+            shortTextResponsePage.steps.verifyWarningMessageNotExist();
+        });
+    });
+
+    describe('Short text response: Set limit section : Character - Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            cy.barsPreLoaderWait();
+            shortTextResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('When user switched to the preview tab then \'Maximum 50 characters\' should be displayed in the preview tab', () => {
+            utilities.verifyElementVisibilityState(shortTextResponsePage.responseFieldCountPreviewTab(), 'visible');
+            shortTextResponsePage.steps.verifyCharacterLimitPreviewTab(50);
+        });
+
+        it('When the user updates the maximum character limit input field value then updated maximum character limit value should be displayed in the preview tab', () => {
+            shortTextResponsePage.steps.switchToEditTab();
+            shortTextResponsePage.steps.setMaximumLimit(5);
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.steps.verifyCharacterLimitPreviewTab(5);
+        });
+
+        it('When the user updates the minimum character limit input field value and checks the \'Always show minimum limit\' checkbox then \'Minimum value - Maximum value characters required\' should be displayed in the preview tab', () => {
+            shortTextResponsePage.steps.switchToEditTab();
+            shortTextResponsePage.steps.setMinimumLimit(3);
+            shortTextResponsePage.steps.checkAlwaysShowMinimumLimitCheckbox()
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.steps.verifyCharacterLimitPreviewTab(5, 3);
+        });
+
+        it('User should able to enter text in the response field', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('Lorem');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldPreviewTab('Lorem');
+        });
+
+        it('When the user reaches the character limit, then the warning message \'Maximum # characters have been entered\' should be displayed', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('Correct');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldPreviewTab('Corre');
+            shortTextResponsePage.steps.verifyWarningMessage('Maximum 5 characters have been entered.');
+        });
+
+        it('CSS of \'Character limit reached\' warning message and container', { tags: 'css' }, () => {
+            utilities.verifyCSS(shortTextResponsePage.warningMessage(), {
+                'color': css.color.warningMessage,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(shortTextResponsePage.warningMessageContainer().find('svg'), {
+                'color': css.color.warningMessage,
+            });
+            utilities.verifyCSS(shortTextResponsePage.warningMessageContainer(), {
+                'border': `1px solid ${css.color.warningContainerBorder}`
+            });
+            utilities.verifyCSS(shortTextResponsePage.warningMessageContainer(), {
+                'background-color': css.color.warningContainerBackground
+            });
+        });
+
+        it('Accessibility of \'Character limit reached\' warning container', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(shortTextResponsePage.warningMessageContainer());
+        });
+
+        it('When the user removes/deletes some characters, the warning message should disappear', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('{backspace}');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldPreviewTab('');
+            shortTextResponsePage.steps.verifyWarningMessageNotExist();
+        });
+
+        it('When the user enters the character less than the minimum character limit value set by the user and focus out of response field, then the warning message \'Minimum # characters are required\' should be displayed', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('Lo');
+            shortTextResponsePage.steps.focusOutOfResponseField();
+            shortTextResponsePage.steps.verifyWarningMessage('Minimum 3 characters are required.');
+        });
+
+        it('When the user enters the character greater than the minimum character limit value set by the user, then the warning message should disappear', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('Lots');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldPreviewTab('Lots');
+            shortTextResponsePage.steps.verifyWarningMessageNotExist();
+        });
+    });
+
+    describe('Short text response: Set limit section: Word, None: Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When the user selects \'Word\' radio button then \'Maximum 20 words\' should be displayed in the preview tab', () => {
+            shortTextResponsePage.steps.selectWordRadioButton();
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.steps.verifyWordLimitInPreviewTab(20);
+        });
+
+        it('When the user updates the maximum word limit input field value then updated maximum word limit value should be displayed in the preview tab', () => {
+            shortTextResponsePage.steps.switchToEditTab();
+            shortTextResponsePage.steps.setMaximumLimit(5);
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.steps.verifyWordLimitInPreviewTab(5);
+        });
+
+        it('When the user updates the minimum word limit input field value and checks the \'Always show minimum limit\' checkbox then \'Minimum value - Maximum value words required\' should be displayed in the preview tab', () => {
+            shortTextResponsePage.steps.switchToEditTab();
+            shortTextResponsePage.steps.setMinimumLimit(3);
+            shortTextResponsePage.steps.checkAlwaysShowMinimumLimitCheckbox()
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.steps.verifyWordLimitInPreviewTab(5, 3);
+        });
+
+        it('User should able to enter words in the response field', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('Answer is correct');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldPreviewTab('Answer is correct');
+        });
+
+        it('When the user reaches the word limit, then the warning message \'Maximum # words have been entered\' should be displayed', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('Answer entered is correctly entered');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldPreviewTab('Answer entered is correctly entered');
+            shortTextResponsePage.steps.verifyWarningMessage('Maximum 5 words have been entered.');
+        });
+
+        it('When the user removes/deletes some words, the warning message should disappear', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('{backspace}');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldPreviewTab('');
+            shortTextResponsePage.steps.verifyWarningMessageNotExist();
+        });
+
+        it('When the user enters the word less than the minimum word limit value set by the user and focus out of response field, then the warning message \'Minimum 3 words are required\' should be displayed', () => {
+            cy.log('Pre-step: Clearing the response field');
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('abc abc');
+            shortTextResponsePage.steps.focusOutOfResponseField();
+            shortTextResponsePage.steps.verifyWarningMessage('Minimum 3 words are required.');
+        });
+
+        it('When the user enters the word greater than the minimum word limit value set by the user, then the warning message should disappear', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('abc abc abc');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldPreviewTab('abc abc abc');
+            shortTextResponsePage.steps.verifyWarningMessageNotExist();
+        });
+
+        it('When the user selects \'None\' radio button then maximum and minimum limits should not be displayed in the preview tab and when user types anything in the response field then error message should not be displayed', () => {
+            shortTextResponsePage.steps.switchToEditTab();
+            shortTextResponsePage.steps.selectNoneRadioButton();
+            shortTextResponsePage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(shortTextResponsePage.responseFieldCountPreviewTab(), 'notExist');
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('Loremdola');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldPreviewTab('Loremdola');
+            shortTextResponsePage.steps.verifyWarningMessageNotExist();
+        });
+    });
+});