itemengine-cypress-automation 1.0.10 → 1.0.12

package/cypress/e2e/ILC/ShortTextResponse/shortTextResponseAdditionalSettings.js

@@ -0,0 +1,861 @@
+import { dialogBoxBase, shortTextResponsePage } from "../../../pages";
+import { commonComponents } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { specialOrMathCharacters } from "../../../fixtures/specialAndMathCharacters";
+const css = Cypress.env('css');
+let customSpecialCharacters = [':', ')', '`']
+
+describe('Short text response - Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional Settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+        });
+
+        shortTextResponsePage.tests.verifyAdditonalSettingsAccordionProperties();
+    });
+
+    describe('Additional Settings: Student response area and layout', () => {
+        abortEarlySetup();
+        before(() => {
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            shortTextResponsePage.steps.expandAdditonalSettings();
+        });
+
+        shortTextResponsePage.tests.verifyStudentResponseAreaAndLayoutLabelAndCSS();
+    });
+
+    describe('Response Accordions: ARIA label', () => {
+        abortEarlySetup();
+        before(() => {
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            shortTextResponsePage.steps.expandAdditonalSettings();
+        });
+
+        it('CSS of \'ARIA label\' section', { tags: 'css' }, () => {
+            shortTextResponsePage.ariaLabelLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            shortTextResponsePage.ariaLabelInputField()
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+
+        it('By default, \'ARIA label\' label and empty \'ARIA label\' input field should be displayed', () => {
+            shortTextResponsePage.ariaLabelLabel()
+                .verifyInnerText('ARIA label');
+            shortTextResponsePage.ariaLabelInputField()
+                .should('have.value', '');
+        });
+
+        //ARIA label test cases for set correct answer section
+        it('When user has not set \'ARIA label\' input field then the default \'ARIA label\' should be displayed in the set correct answer section response field', () => {
+            shortTextResponsePage.setCorrectAnswerResponseField()
+                .should('have.attr', 'aria-label', 'Enter your response to the question here');
+        });
+
+        it('When the user has set \'ARIA label\' then it should be displayed in the response field in the set correct answer section.', () => {
+            shortTextResponsePage.ariaLabelInputField()
+                .type('Custom Aria Label')
+                .should('have.value', 'Custom Aria Label');
+            shortTextResponsePage.setCorrectAnswerResponseField()
+                .should('have.attr', 'aria-label', 'Custom Aria Label');
+        });
+
+        it('Accessibility of input field in set correct answer section when custom \'ARIA label\' is set and Custom label', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(shortTextResponsePage.setCorrectAnswerResponseField().parents('.short-text-response-input-field'))
+        });
+
+        it('When the user clears the set value in the ARIA label input field, then the default ARIA label should appear again in the set correct answer section', () => {
+            shortTextResponsePage.ariaLabelInputField()
+                .clear()
+                .should('have.value', '');
+            shortTextResponsePage.setCorrectAnswerResponseField()
+                .should('have.attr', 'aria-label', 'Enter your response to the question here');
+        });
+
+        //ARIA label test cases for preview tab
+        it('When user has not set \'ARIA label\' input field then in the preview tab default \'ARIA label\' should be displayed in the response field', () => {
+            cy.log('Pre step: Switch to Preview tab')
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.previewTabResponseField()
+                .should('have.attr', 'aria-label', 'Enter your response to the question here');
+        });
+
+        it('When the user has set \'ARIA label\' in the response accordion then it should be displayed in the preview tab response field', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            shortTextResponsePage.steps.switchToEditTab();
+            shortTextResponsePage.ariaLabelInputField()
+                .type('Custom Aria Label')
+                .should('have.value', 'Custom Aria Label');
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.previewTabResponseField()
+                .should('have.attr', 'aria-label', 'Custom Aria Label');
+        });
+
+        it('Accessibility of input field in preview tab when custom \'ARIA label\' is set', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(shortTextResponsePage.previewTabResponseField().parents('.short-text-preview-response-input-field'))
+        });
+
+        it('When the user clears the set value in the ARIA label input field, then the default ARIA label should appear again in the preview tab response field', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            shortTextResponsePage.steps.switchToEditTab();
+            shortTextResponsePage.ariaLabelInputField()
+                .clear()
+                .should('have.value', '');
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.previewTabResponseField()
+                .should('have.attr', 'aria-label', 'Enter your response to the question here');
+        });
+    });
+
+    describe('Additional Settings: Placeholder text', () => {
+        abortEarlySetup();
+        before(() => {
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            shortTextResponsePage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Placeholder text\' label and input field should be displayed and by default, the input field should be empty', () => {
+            shortTextResponsePage.placeholderTextLabel()
+                .verifyInnerText('Placeholder text');
+            shortTextResponsePage.placeholderTextInputField()
+                .should('have.value', '');
+        });
+
+        it('CSS of \'Placeholder text\' section', { tags: 'css' }, () => {
+            shortTextResponsePage.placeholderTextLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            shortTextResponsePage.placeholderTextInputField()
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+
+        //Placeholder test cases for Set correct answer section response field
+        it('When \'Placeholder text\' input field is empty then no \'Placeholder text\' should be displayed in the set correct answer response field', () => {
+            shortTextResponsePage.placeholderTextInputField()
+                .should('have.value', '');
+            shortTextResponsePage.setCorrectAnswerResponseField()
+                .should('have.attr', 'placeholder', '');
+        });
+
+        it('When the user adds a text in the Placeholder input field, the added placeholder should be displayed in the set correct answer response field', () => {
+            shortTextResponsePage.placeholderTextInputField()
+                .type('Lorem Ipsum')
+                .should('have.value', 'Lorem Ipsum');
+            shortTextResponsePage.setCorrectAnswerResponseField()
+                .should('have.attr', 'placeholder', 'Lorem Ipsum');
+        });
+
+        //Comment: not possible to check css of placeholder since it is added as an attribute, properties of placeholder is not visible in dev tools
+
+        it('Accessibility of \'Placeholder text\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(shortTextResponsePage.setCorrectAnswerResponseField().parents('.short-text-response-input-field'));
+        });
+
+        it('When the user starts typing in the response field, then the placeholder text should disappear and on clearing the input field the placeholder text should re-appear for the set correct answer section response field', () => {
+            //TODO: Need to update script after https://redmine.zeuslearning.com/issues/527580 is resolved
+            shortTextResponsePage.setCorrectAnswerResponseField()
+                .type('Response')
+                .should('have.value', 'Response')
+                .should('not.have.attr', 'placeholder');
+            shortTextResponsePage.setCorrectAnswerResponseField()
+                .clear()
+                .blur();
+            shortTextResponsePage.setCorrectAnswerResponseField()
+                .should('have.attr', 'placeholder', 'Lorem Ipsum');
+        });
+
+        //Placeholder test cases for Preview tab response field
+        it('When \'Placeholder text\' input field is empty then no \'Placeholder text\' should be displayed in the preview tab response field', () => {
+            cy.log('Pre step: Clearing the placeholder text and switching to Preview tab')
+            shortTextResponsePage.placeholderTextInputField()
+                .clear()
+                .should('have.value', '');
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.previewTabResponseField()
+                .should('have.attr', 'placeholder', '');
+        });
+
+        it('When the user adds a text in the Placeholder input field, the added placeholder should be displayed in the preview tab response field', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            shortTextResponsePage.steps.switchToEditTab();
+            shortTextResponsePage.placeholderTextInputField()
+                .type('Lorem Ipsum')
+                .should('have.value', 'Lorem Ipsum');
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.previewTabResponseField()
+                .should('have.attr', 'placeholder', 'Lorem Ipsum');
+        });
+
+        //Comment: not possible to check css of placeholder since it is added as an attribute, properties of placeholder is not visible in dev tools
+
+        it('Accessibility of \'Placeholder text\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(shortTextResponsePage.previewTabResponseField().parents('.short-text-preview-response-input-field'))
+        });
+
+        it('When the user starts typing in the response field, then the placeholder text should disappear and on clearing the input field the placeholder text should re-appear for the preview tab response field', () => {
+            shortTextResponsePage.previewTabResponseField()
+                .type('Response')
+                .should('have.value', 'Response')
+                .should('not.have.attr', 'placeholder');
+            shortTextResponsePage.previewTabResponseField()
+                .clear()
+                .blur();
+            shortTextResponsePage.previewTabResponseField()
+                .should('have.attr', 'placeholder', 'Lorem Ipsum');
+        });
+    });
+
+    describe('Additional Settings: Type of answer input', () => {
+        const typeOfAnswers = ['Text', 'Number'];
+        abortEarlySetup();
+        before(() => {
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            shortTextResponsePage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Type of answer\' label and dropdown should be displayed and in \'Type of answer\' dropdown \'Text\' option should be selected by default', () => {
+            shortTextResponsePage.typeOfAnswerInputLabel()
+                .verifyInnerText('Type of answer input');
+            shortTextResponsePage.typeOfAnswerInputDropdown()
+                .verifyInnerText('Text');
+        });
+
+        it('CSS of \'Type of answer\' dropdown', { tags: 'css' }, () => {
+            shortTextResponsePage.typeOfAnswerInputLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            shortTextResponsePage.typeOfAnswerInputDropdown()
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+
+        it(`Clicking on Type of answer dropdown should open a list of 2 options - ${typeOfAnswers}`, () => {
+            shortTextResponsePage.typeOfAnswerInputDropdown()
+                .click();
+            shortTextResponsePage.typeOfAnswerInputDropdownListOptions(0)
+                .should('be.visible');
+            typeOfAnswers.forEach((index, count) => {
+                shortTextResponsePage.typeOfAnswerInputDropdownListOptions(count)
+                    .verifyInnerText(index);
+            });
+        });
+
+        it('CSS of Type of answer dropdown in Active state', { tags: 'css' }, () => {
+            shortTextResponsePage.typeOfAnswerInputDropdownListOptions(0)
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
+                .should('have.css', 'background-color', css.color.liTextSelectedBg);
+            shortTextResponsePage.typeOfAnswerInputDropdownListOptions(1)
+                .should('have.css', 'background-color', css.color.transparent);
+        });
+
+        it('Accessibility of Type of answer dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.dropdownList());
+        });
+
+        //Type of answer input test cases for set correct answer section response field
+        it('When \'Text\' option is set in the dropdown, then user should be able to add alpha-numeric characters in the Set correct answer section', () => {
+            shortTextResponsePage.typeOfAnswerInputDropdown()
+                .verifyInnerText('Text');
+            shortTextResponsePage.setCorrectAnswerResponseField()
+                .type('Response 1')
+                .should('have.value', 'Response 1');
+        });
+
+        it('When user selects \'Number\' option from the dropdown the the user should be able to add only numeric characters in the set correct answer response field', () => {
+            shortTextResponsePage.typeOfAnswerInputDropdown()
+                .click();
+            shortTextResponsePage.typeOfAnswerInputDropdownListOptions(1)
+                .click();
+            shortTextResponsePage.setCorrectAnswerResponseField()
+                .type('Response 1')
+                .should('have.value', 'ee 1');
+        });
+
+        //Type of answer input test cases for preview tab response field
+        it('When \'Text\' option is set in the dropdown, then user should be able to add alpha-numeric characters in preview tab response field', () => {
+            shortTextResponsePage.typeOfAnswerInputDropdown()
+                .click();
+            shortTextResponsePage.typeOfAnswerInputDropdownListOptions(0)
+                .click();
+            shortTextResponsePage.steps.switchToPreviewTab()
+            shortTextResponsePage.previewTabResponseField()
+                .type('Response 1')
+                .should('have.value', 'Response 1');
+        });
+
+        it('When user selects \'Number\' option from the dropdown then the user should be able to add only numeric characters in the preview tab input field', () => {
+            shortTextResponsePage.steps.switchToEditTab()
+            shortTextResponsePage.typeOfAnswerInputDropdown()
+                .click();
+            shortTextResponsePage.typeOfAnswerInputDropdownListOptions(1)
+                .click();
+            shortTextResponsePage.steps.switchToPreviewTab()
+            shortTextResponsePage.previewTabResponseField()
+                .type('Response 1')
+                .should('have.value', 'ee 1');
+        })
+    });
+
+    describe('Additional Settings: Set character limit', () => {
+        abortEarlySetup();
+        before(() => {
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            shortTextResponsePage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Set character limit\' label and input field should be displayed and in \'Set character limit\' input field the default value should be \'50\'', () => {
+            shortTextResponsePage.setCharacterLimitLabel()
+                .verifyInnerText('Set character limit')
+                .should('be.visible');
+            shortTextResponsePage.setCharacterLimitInputField()
+                .should('have.value', '50')
+                .and('be.visible');
+        });
+
+        it('When user tries to remove the default set characters limit then it should set to the default value \'50\'', () => {
+            shortTextResponsePage.steps.switchToEditTab()
+            shortTextResponsePage.setCharacterLimitInputField()
+                .clear()
+                .blur();
+            shortTextResponsePage.setCorrectAnswerResponseField()
+                .type('euismod quis viverra nibh cras pulvinar mattiseuises')
+                .should('have.value', 'euismod quis viverra nibh cras pulvinar mattiseuis');
+            cy.log('Post step: Clearing the input field and setting value to 50')
+            shortTextResponsePage.setCorrectAnswerResponseField()
+                .clear();
+            shortTextResponsePage.setCharacterLimitInputField()
+                .type('50')
+                .should('have.value', '50');
+        });
+
+        //Set character limit test cases for set correct answer section response field
+        it('User should not be able to add characters more than the default Set character limit value in the Set correct answer response field', () => {
+            shortTextResponsePage.setCorrectAnswerResponseField()
+                .type('mi proin sed libero enim sed faucibus turpis in eum')
+                .should('have.value', 'mi proin sed libero enim sed faucibus turpis in eu');
+        });
+
+        it('User should be able to edit the \'Set character limit\' input field', () => {
+            shortTextResponsePage.steps.switchToEditTab()
+            shortTextResponsePage.setCharacterLimitInputField()
+                .clear()
+                .type('45')
+                .should('have.value', '45');
+        });
+
+        it('User should not be able to add characters more than the Set character limit value in the Set correct answer response field', () => {
+            shortTextResponsePage.setCorrectAnswerResponseField()
+                .clear()
+                .type('ut placerat orci nulla pellentesque dignissim e')
+                .should('have.value', 'ut placerat orci nulla pellentesque dignissim');
+        });
+
+        //Type of answer input test cases for preview tab response field
+        it('User should not be able to add characters more than the default Set character limit value in the preview tab response field', () => {
+            shortTextResponsePage.setCharacterLimitInputField()
+                .clear()
+                .type('20')
+                .should('have.value', '20');
+            shortTextResponsePage.steps.switchToPreviewTab()
+            shortTextResponsePage.previewTabResponseField()
+                .type('ut placerat orci nulla')
+                .should('have.value', 'ut placerat orci nul');
+        });
+
+        it('User should be able to edit the \'Set character limit\' input field', () => {
+            shortTextResponsePage.steps.switchToEditTab()
+            shortTextResponsePage.setCharacterLimitInputField()
+                .clear()
+                .type('45')
+                .should('have.value', '45');
+        });
+
+        it('User should not be able to add characters more than the Set character limit value in the preview tab response field', () => {
+            shortTextResponsePage.steps.switchToPreviewTab()
+            shortTextResponsePage.previewTabResponseField()
+                .type('ut placerat orci nulla pellentesque dignissim e')
+                .should('have.value', 'ut placerat orci nulla pellentesque dignissim');
+        });
+    });
+
+    describe('Additional Settings: Spell check section', () => {
+        abortEarlySetup();
+        before(() => {
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            shortTextResponsePage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Spell check\' functionality label and checkbox should be displayed and by default it should be unchecked', () => {
+            shortTextResponsePage.spellCheckLabel()
+                .verifyInnerText('Spell check');
+            shortTextResponsePage.spellCheckCheckbox()
+                .should('not.be.checked');
+        });
+
+        it('CSS of \'Spell check\' section - unchecked state', { tags: 'css' }, () => {
+            shortTextResponsePage.spellCheckCheckbox()
+                .parent()
+                .find('svg')
+                .should('have.css', 'fill', css.color.uncheckedCheckbox);
+        });
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+
+        //Spell check test cases for set correct answer section response field
+        it('When the \'Spell check\' functionality is disabled, the response field should have \'spellcheck\' attribute set as \'false\' in set correct answer section', () => {
+            shortTextResponsePage.setCorrectAnswerResponseFieldWrapper()
+                .should('have.attr', 'spellcheck', 'false');
+        });
+
+        it('When the \'Spell check\' functionality is enabled, the response field should have \'spellcheck\' attribute set as \'true\' in set correct answer section', () => {
+            shortTextResponsePage.spellCheckCheckbox()
+                .click()
+                .should('be.checked');
+            shortTextResponsePage.setCorrectAnswerResponseFieldWrapper()
+                .should('have.attr', 'spellcheck', 'true');
+        });
+
+        it('CSS of \'Spell check\' section - checked state', { tags: 'css' }, () => {
+            shortTextResponsePage.spellCheckLabel()
+                .verifyCSS(css.color.labelText, css.fontSize.normal, css.fontWeight.regular);
+            shortTextResponsePage.spellCheckCheckbox()
+                .parent('.icon-checkbox-selected')
+                .find('.checkbox-icon-border-rect')
+                .should('have.css', 'fill', css.color.activeButtons);
+        });
+
+        it('Accessibility of \'Spell check\' section - checked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(shortTextResponsePage.spellCheckLabel().parents('.spell-check-checkbox-wrapper'))
+        });
+
+        //Spell check test cases for preview tab response field
+        it('When the \'Spell check\' functionality is disabled, the response field should have \'spellcheck\' attribute set as \'false\' in preview tab', () => {
+            shortTextResponsePage.spellCheckCheckbox()
+                .click()
+                .should('not.be.checked');
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.previewTabResponseFieldWrapper()
+                .should('have.attr', 'spellcheck', 'false');
+        });
+
+        it('When the \'Spell check\' functionality is enabled, the response field should have \'spellcheck\' attribute set as \'true\' in the preview tab', () => {
+            cy.log('Pre step: Switching to Edit tab')
+            shortTextResponsePage.steps.switchToEditTab();
+            shortTextResponsePage.spellCheckCheckbox()
+                .click()
+                .should('be.checked');
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.previewTabResponseFieldWrapper()
+                .should('have.attr', 'spellcheck', 'true');
+        });
+    });
+
+    describe('Additional Settings: Custom special characters section', () => {
+        abortEarlySetup();
+        before(() => {
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            shortTextResponsePage.steps.expandAdditonalSettings();
+        });
+
+        shortTextResponsePage.tests.verifyAdditionalSettingsCustomSpecialCharactersSection();
+
+        it('When the user checks the \'Display special characters\' checkbox then the \'Special characters\' button should be displayed when user focuses in the response field in set correct answer section ', () => {
+            cy.log('Checking Custom characters button is not visible before focusing any option')
+            shortTextResponsePage.setCorrectAnsResponseFieldSpecialCharactersButton()
+                .should('not.have.class', 'active-special-character-button')
+                .should('not.be.visible');
+            shortTextResponsePage.setCorrectAnswerResponseField()
+                .click();
+            shortTextResponsePage.setCorrectAnsResponseFieldSpecialCharactersButton()
+                .should('have.class', 'active-special-character-button')
+                .should('be.visible');
+        });
+
+        it('When the user has added no input to the \'Custom special characters\' input field then the default Special characters flyout should be displayed on clicking the \'Special characters\' button in the response field', () => {
+            shortTextResponsePage.setCorrectAnsResponseFieldSpecialCharactersButton()
+                .should('be.visible')
+                .click();
+            shortTextResponsePage.steps.verifySpecialCharactersFlyoutHeaderContents();
+        });
+
+        shortTextResponsePage.tests.verifySpecialCharactersFlyoutSymbols()
+
+        it(`When user clicks on a symbol in the ${specialOrMathCharacters['specialCharacters'].popupTitle} popup, then that symbol should be inserted in the response field`, () => {
+            cy.log('Clicking on all symbols.');
+            let symbolsString = specialOrMathCharacters['specialCharacters'].characters.map((icon) => icon.symbol);
+            symbolsString = symbolsString.join('');
+            shortTextResponsePage.steps.clickingOnSpecialCharactersSymbolsFromFlyout();
+            dialogBoxBase.steps.closeWarningPopup();
+            shortTextResponsePage.setCorrectAnswerResponseField()
+                .should('have.value', symbolsString);
+            cy.log('Post step: Clearing the set correct answer input field')
+            shortTextResponsePage.setCorrectAnswerResponseField()
+                .clear();
+        });
+
+        it('When the \'Display special characters\' checkbox is checked then user should be able to enter value in the \'Custom special characters\' input field', () => {
+            shortTextResponsePage.customSpecialCharactersInputField()
+                .type(':)`')
+                .should('have.value', ':)`');
+        });
+
+        it('When the user clicks on the \'Special characters\' button in the response field then a flyout with the title \'Special characters\' and close button should be displayed', () => {
+            shortTextResponsePage.setCorrectAnswerResponseField()
+                .click();
+            shortTextResponsePage.setCorrectAnsResponseFieldSpecialCharactersButton()
+                .should('be.visible')
+                .click();
+            shortTextResponsePage.steps.verifySpecialCharactersFlyoutHeaderContents();
+        });
+
+        it('The flyout should contain all the added Special characters entered in the \'Custom special characters\' input field', () => {
+            shortTextResponsePage.specialCharactersFlyoutIcon()
+                .each(($el, index) => {
+                    cy.wrap($el)
+                        .should('have.text', `${customSpecialCharacters[index]}`)
+                });
+        });
+
+        it('When user clicks on the characters then they should be added to the set correct answer response field', () => {
+            shortTextResponsePage.steps.clickingOnSpecialCharactersSymbolsFromFlyout();
+            dialogBoxBase.steps.closeWarningPopup();
+            shortTextResponsePage.setCorrectAnswerResponseField()
+                .should('have.value', ':)`');
+        });
+
+        //Special custom characters test cases for preview tab response field
+        it('When the \'Custom special characters\' functionality is disabled then the \'Special characters\' button should not be displayed in the preview tab response field', () => {
+            shortTextResponsePage.customSpecialCharactersInputField()
+                .clear();
+            shortTextResponsePage.displaySpecialCharactersCheckbox()
+                .click()
+                .should('not.be.checked');
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.previewTabResponseFieldSpecialCharactersButton()
+                .should('not.exist');
+        });
+
+        it('When the user has enabled the \'Custom special characters\' functionality then the \'Special characters\' button should be displayed when user focuses in any response field in the preview tab', () => {
+            cy.log('Pre step: Enable the Custom special characters')
+            shortTextResponsePage.steps.switchToEditTab();
+            shortTextResponsePage.displaySpecialCharactersCheckbox()
+                .click()
+                .should('be.checked');
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.previewTabResponseFieldSpecialCharactersButton()
+                .should('not.have.class', 'active-special-character-button')
+                .and('not.be.visible');
+            shortTextResponsePage.previewTabResponseField()
+                .click();
+            shortTextResponsePage.previewTabResponseFieldSpecialCharactersButton()
+                .should('have.class', 'active-special-character-button')
+                .and('be.visible');
+        });
+
+        it('When the user has added no input to the \'Custom special characters\' input field then the default Special characters flyout should be displayed on clicking the \'Special characters\' button in the response field', () => {
+            shortTextResponsePage.previewTabResponseFieldSpecialCharactersButton()
+                .should('be.visible')
+                .click();
+            shortTextResponsePage.steps.verifySpecialCharactersFlyoutHeaderContents();
+        });
+
+        shortTextResponsePage.tests.verifySpecialCharactersFlyoutSymbols()
+
+        it(`When user clicks on a symbol in the ${specialOrMathCharacters['specialCharacters'].popupTitle} popup, then that symbol should be inserted in the response field`, () => {
+            cy.log('Clicking on all symbols.');
+            let symbolsString = specialOrMathCharacters['specialCharacters'].characters.map((icon) => icon.symbol);
+            symbolsString = symbolsString.join('');
+            shortTextResponsePage.steps.clickingOnSpecialCharactersSymbolsFromFlyout();
+            dialogBoxBase.steps.closeWarningPopup();
+            shortTextResponsePage.previewTabResponseField()
+                .should('have.value', symbolsString);
+        });
+
+        it('When the \'Display special characters\' checkbox is checked then user should be able to enter value in the \'Custom special characters\' input field', () => {
+            cy.log('Pre step: Swicth to Edit tab')
+            shortTextResponsePage.steps.switchToEditTab()
+            shortTextResponsePage.customSpecialCharactersInputField()
+                .type(':)`')
+                .should('have.value', ':)`');
+            cy.log('Post step: Switch to Preview tab')
+            shortTextResponsePage.steps.switchToPreviewTab()
+        });
+
+        it('When the user clicks on the \'Special characters\' button then a flyout with the title \'Special characters\' and close button should be displayed in the preview tab', () => {
+            shortTextResponsePage.previewTabResponseField()
+                .click();
+            shortTextResponsePage.previewTabResponseFieldSpecialCharactersButton()
+                .should('be.visible')
+                .click();
+            shortTextResponsePage.steps.verifySpecialCharactersFlyoutHeaderContents();
+        });
+
+        it('The flyout should contain all the added Special characters entered in the \'Custom special characters\' input field', () => {
+            shortTextResponsePage.specialCharactersFlyoutIcon()
+                .each(($el, index) => {
+                    cy.wrap($el)
+                        .should('have.text', `${customSpecialCharacters[index]}`)
+                });
+        });
+
+        it('When user clicks on the characters then they should be added to the preview tab input field', () => {
+            shortTextResponsePage.steps.clickingOnSpecialCharactersSymbolsFromFlyout();
+            dialogBoxBase.steps.closeWarningPopup();
+            shortTextResponsePage.previewTabResponseField()
+                .should('have.value', ':)`');
+        });
+    });
+
+    describe('Additional Settings: Font Size dropdown', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection quetion type, adding question instructions and options, alloting points and expanding additional settings accordion')
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            shortTextResponsePage.questionInstructionsInputField()
+                .type('Question Instructions');
+            shortTextResponsePage.pointsInputField()
+                .type('4');
+            shortTextResponsePage.setCorrectAnswerResponseField()
+                .type('Answer input');
+            shortTextResponsePage.steps.expandAdditonalSettings();
+        });
+
+        shortTextResponsePage.tests.verifyFontSizeSectionContents();
+
+        //Failing due to https://redmine.zeuslearning.com/issues/526873
+        const fontsizes = ['Default', 'Small', 'Normal', 'Large', 'Extra large', 'Huge'];
+        const font = ['16px', '12px', '14px', '17px', '20px', '24px'];
+        fontsizes.forEach((option, count) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the preview tab contents should be changed to ${option} in the \'Set Correct Answer\' section as well as in the \'Preview\' tab`, () => {
+                shortTextResponsePage.fontSizeDropdown()
+                    .click();
+                shortTextResponsePage.fontSizeListOptions(count)
+                    .click();
+                shortTextResponsePage.fontSizeDropdown()
+                    .verifyInnerText(`${option}`);
+                cy.log('Checking correct answer section font size')
+                shortTextResponsePage.setCorrectAnswerResponseField()
+                    .should('have.css', 'font-size', font[count]);
+                cy.log('Switching to Preview tab')
+                shortTextResponsePage.steps.switchToPreviewTab();
+                cy.log('Checking Preview section font size')
+                shortTextResponsePage.questionInstructionsText()
+                    .should('have.css', 'font-size', font[count]);
+                shortTextResponsePage.previewTabResponseField()
+                    .should('have.css', 'font-size', font[count]);
+                shortTextResponsePage.steps.switchToEditTab();
+            });
+        });
+    });
+
+    describe('Additional Settings: Check Answer', () => {
+        abortEarlySetup();
+        before(() => {
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            shortTextResponsePage.questionInstructionsInputField()
+                .type('Question Instructions');
+            shortTextResponsePage.pointsInputField()
+                .type('4');
+            shortTextResponsePage.setCorrectAnswerResponseField()
+                .type('Answer input');
+            shortTextResponsePage.steps.expandAdditonalSettings();
+        });
+
+        shortTextResponsePage.tests.verifyCheckAnswerSectionAndPreviewTabCheckAnswerButton();
+    });
+
+    describe('Additional Settings: Check Answer - Functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            shortTextResponsePage.questionInstructionsInputField()
+                .type('Question Instructions');
+            shortTextResponsePage.pointsInputField()
+                .type('4');
+            shortTextResponsePage.setCorrectAnswerResponseField()
+                .type('Response')
+                .should('have.value', 'Response');
+            shortTextResponsePage.steps.expandAdditonalSettings();
+            shortTextResponsePage.steps.setMaximumCheckAnswerAttempts(2);
+            shortTextResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not set any response then on clicking on the Check Answer button, icons should not be displayed beside both empty response, Correct/Incorrect label or border should not be displayed and \'Correct answer\' container should not be displayed below the question', () => {
+            shortTextResponsePage.previewTabResponseField()
+                .should('have.value', '');
+            shortTextResponsePage.checkAnswerButton()
+                .click();
+            shortTextResponsePage.correctIcon()
+                .should('not.exist');
+            shortTextResponsePage.incorrectIcon()
+                .should('not.exist');
+            shortTextResponsePage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            shortTextResponsePage.correctIncorrectAnswerBorder()
+                .should('not.exist');
+            shortTextResponsePage.previewTabCorrectAnswerContainer()
+                .should('not.exist');
+        });
+
+        it('When the user has added correct response then on clicking on the Check Answer button, green checkmark icon should be displayed, Correct/Incorrect label or border should not be displayed and \'Correct answer\' container should not be displayed below the question', () => {
+            shortTextResponsePage.previewTabResponseField()
+                .clear()
+                .type('Response')
+                .should('have.value', 'Response');
+            shortTextResponsePage.checkAnswerButton()
+                .click();
+            shortTextResponsePage.steps.verifyCorrectOptionCheckmarkIcon()
+            shortTextResponsePage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            shortTextResponsePage.correctIncorrectAnswerBorder()
+                .should('not.exist');
+            shortTextResponsePage.previewTabCorrectAnswerContainer()
+                .should('not.exist');
+        });
+
+        it('When the user has added incorrect response then on clicking on the Check Answer button, red crossmark icon should be displayed, Incorrect label or border should not be displayed and \'Correct answer\' container should not be displayed below the question', () => {
+            shortTextResponsePage.previewTabResponseField()
+                .clear()
+                .type('Incorrect Response')
+                .should('have.value', 'Incorrect Response');
+            shortTextResponsePage.checkAnswerButton()
+                .click();
+            shortTextResponsePage.steps.verifyIncorrectOptionCrossmarkIcon()
+            shortTextResponsePage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            shortTextResponsePage.correctIncorrectAnswerBorder()
+                .should('not.exist');
+            shortTextResponsePage.previewTabCorrectAnswerContainer()
+                .should('not.exist');
+        });
+
+        it('The \'Check Answer\' button should become disabled once user has reached maximum check answer attempts', () => {
+            shortTextResponsePage.checkAnswerButton()
+                .should('be.disabled');
+        });
+
+        it('CSS of disabled \'Check Answer\' button', { tags: 'css' }, () => {
+            shortTextResponsePage.checkAnswerButton()
+                .verifyCSS(css.color.primaryBtnDisabled, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        it('Accessibility of disabled Check Answer button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(shortTextResponsePage.checkAnswerButton());
+        });
+
+        it('When the user updates the value of Maximum check answer attempts input field, it should get reflected on the Preview tab', () => {
+            cy.log('Pre step: Switching to Edit tab')
+            shortTextResponsePage.steps.switchToEditTab();
+            shortTextResponsePage.maximumCheckAnswerAttemptsInputField()
+                .clear()
+                .type(1)
+                .should('have.value', '1');
+            cy.log('Switching to Preview tab');
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.checkAnswerButton()
+                .should('be.enabled');
+            shortTextResponsePage.previewTabResponseField()
+                .type('Response');
+            shortTextResponsePage.checkAnswerButton()
+                .click()
+                .should('be.disabled');
+        });
+
+        it('When the \'Maximum check answer attempts\' input field has value \'0\' and user switches to Preview tab, then the \'Check Answer\' button should be enabled and user should be able to check answer multiple times', () => {
+            shortTextResponsePage.steps.switchToEditTab();
+            shortTextResponsePage.steps.clearMaximumCheckAnswerAttemptsInputField();
+            shortTextResponsePage.steps.addInputToMaximumCheckAnswerAttemptsInputField(0);
+            cy.log('Switching to Preview tab');
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.checkAnswerButton()
+                .should('be.enabled');
+            shortTextResponsePage.previewTabResponseField()
+                .type('Incorrect Response');
+            cy.log('Clicking on \'Check Answer\' to check state of \'Check Answer\' to be enabled')
+            shortTextResponsePage.checkAnswerButton()
+                .click();
+            shortTextResponsePage.checkAnswerButton()
+                .should('be.enabled');
+            shortTextResponsePage.steps.verifyIncorrectOptionCrossmarkIcon();
+            shortTextResponsePage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            shortTextResponsePage.correctIncorrectAnswerBorder()
+                .should('not.exist');
+            shortTextResponsePage.previewTabCorrectAnswerContainer()
+                .should('not.exist');
+            cy.log('As the user is able to check answer multiple times, verifying state of \'Check Answer\' to be enabled by adding different response and checking answer again')
+            shortTextResponsePage.previewTabResponseField()
+                .clear()
+                .type('Response');
+            shortTextResponsePage.checkAnswerButton()
+                .click();
+            shortTextResponsePage.steps.verifyCorrectOptionCheckmarkIcon();
+            shortTextResponsePage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            shortTextResponsePage.correctIncorrectAnswerBorder()
+                .should('not.exist');
+            shortTextResponsePage.previewTabCorrectAnswerContainer()
+                .should('not.exist');
+            shortTextResponsePage.checkAnswerButton()
+                .should('be.enabled');
+        });
+
+        it('When the \'Maximum check answer attempts\' input field is empty and user switches to Preview tab, then the \'Check Answer\' button should be enabled and user should be able to check answer multiple times', () => {
+            cy.log('Pre step: Switching to Edit tab')
+            shortTextResponsePage.steps.switchToEditTab();
+            shortTextResponsePage.maximumCheckAnswerAttemptsInputField()
+                .clear()
+                .should('have.value', '');
+            cy.log('Switching to Preview tab');
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.checkAnswerButton()
+                .should('be.enabled');
+            shortTextResponsePage.previewTabResponseField()
+                .type('Incorrect Response');
+            cy.log('Clicking on \'Check Answer\' to check state of \'Check Answer\' to be enabled')
+            shortTextResponsePage.checkAnswerButton()
+                .click();
+            shortTextResponsePage.checkAnswerButton()
+                .should('be.enabled');
+            shortTextResponsePage.steps.verifyIncorrectOptionCrossmarkIcon();
+            shortTextResponsePage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            shortTextResponsePage.correctIncorrectAnswerBorder()
+                .should('not.exist');
+            shortTextResponsePage.previewTabCorrectAnswerContainer()
+                .should('not.exist');
+            cy.log('As the user is able to check answer multiple times, verifying state of \'Check Answer\' to be enabled by adding different response and checking answer again')
+            shortTextResponsePage.previewTabResponseField()
+                .clear()
+                .type('Response');
+            shortTextResponsePage.checkAnswerButton()
+                .click();
+            shortTextResponsePage.steps.verifyCorrectOptionCheckmarkIcon();
+            shortTextResponsePage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            shortTextResponsePage.correctIncorrectAnswerBorder()
+                .should('not.exist');
+            shortTextResponsePage.previewTabCorrectAnswerContainer()
+                .should('not.exist');
+            shortTextResponsePage.checkAnswerButton()
+                .should('be.enabled');
+        });
+    });
+
+    describe('Additional Settings: Details section', () => {
+        abortEarlySetup();
+        before(() => {
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            shortTextResponsePage.steps.expandAdditonalSettings();
+        });
+
+        shortTextResponsePage.tests.verifyDetailsSection();
+    });
+});