itemengine-cypress-automation 1.0.120 → 1.0.122-updateILCRepo28Feb-2c3e0e3.0

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

@@ -0,0 +1,233 @@
+import { shortTextResponsePage } from "../../../pages";
+import utilities from "../../../support/helpers/utilities";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+describe('Create Item page - Short text response ', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Answer input field verification: Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Answer\' label and one empty input field should be displayed', () => {
+            utilities.verifyInnerText(shortTextResponsePage.answerLabelSpecifyCorrectAnswerSection(), 'Answer');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.answerLabelSpecifyCorrectAnswerSection(), 'visible');
+            utilities.verifyInnerText(shortTextResponsePage.answerInputFieldSpecifyCorrectAnswerSection(), '');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.answerInputFieldSpecifyCorrectAnswerSection(), 'visible');
+            utilities.verifyElementCount(shortTextResponsePage.answerInputFieldSpecifyCorrectAnswerSection(), 1);
+        });
+
+        it('CSS of answer input field', { tags: 'css' }, () => {
+            utilities.verifyCSS(shortTextResponsePage.answerLabelSpecifyCorrectAnswerSection(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold,
+            });
+            utilities.verifyCSS(shortTextResponsePage.answerInputFieldSpecifyCorrectAnswerSection(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+            });
+        });
+
+        it('Accessibility of response accordion', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(shortTextResponsePage.answerInputFieldSpecifyCorrectAnswerSection().parents('.correct-answer-accordion'));
+        });
+    });
+
+    describe('Accepted student input - Specify  correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            cy.barsPreLoaderWait();
+            shortTextResponsePage.steps.allotPoints(5);
+        });
+
+        it('When \'Text\' is selected in accepted student input, then user should be able to enter alphanumeric characters and special symbols in the answer input field', () => {
+            shortTextResponsePage.steps.verifyAcceptedStudentTypeActiveButton(0, 'Text');
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldSpecifyCorrectAnswerSection('Hi23(^^)');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldSpecifyCorrectAnswerSection('Hi23(^^)');
+        });
+
+        it('When user selects \'Number\' in accepted student input, then text inside the answer input field should only include numbers part from the previously entered input', () => {
+            shortTextResponsePage.steps.selectAcceptedStudentInputType(0, 'Number');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldSpecifyCorrectAnswerSection('23');
+        });
+
+        it('User should not be able to enter characters or special symbols i.e. answer input field should only contain numbers', () => {
+            shortTextResponsePage.steps.clearSpecifyCorrectAnswerInputField();
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldSpecifyCorrectAnswerSection('ABc^12');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldSpecifyCorrectAnswerSection('12');
+        });
+
+        it('User should be able to enter negative numbers, decimal numbers and zero in answer input field', () => {
+            shortTextResponsePage.steps.clearSpecifyCorrectAnswerInputField();
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldSpecifyCorrectAnswerSection('-5');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldSpecifyCorrectAnswerSection('-5');
+            shortTextResponsePage.steps.clearSpecifyCorrectAnswerInputField();
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldSpecifyCorrectAnswerSection('29.54');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldSpecifyCorrectAnswerSection('29.54');
+            shortTextResponsePage.steps.clearSpecifyCorrectAnswerInputField();
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldSpecifyCorrectAnswerSection('0');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldSpecifyCorrectAnswerSection('0');
+        });
+
+        it('When user selects \'Integer\' in accepted student input, then text inside the answer input field should only include whole numbers part from the previously entered input', () => {
+            shortTextResponsePage.steps.selectAcceptedStudentInputType(0, 'Integer');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldSpecifyCorrectAnswerSection('2954');
+        });
+
+        it('When \'Integer\' is selected in accepted student input, then user should not be able to add characters or special symbols i.e. input field should only include whole numbers', () => {
+            shortTextResponsePage.steps.clearSpecifyCorrectAnswerInputField();
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldSpecifyCorrectAnswerSection('29hi*5k4.5');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldSpecifyCorrectAnswerSection('29545');
+        });
+
+        it('User should be able to add zero in input field', () => {
+            shortTextResponsePage.steps.clearSpecifyCorrectAnswerInputField();
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldSpecifyCorrectAnswerSection('0');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldSpecifyCorrectAnswerSection('0');
+        });
+
+        it('User should not be able to add negative number i.e. input field should only include positive whole numbers', () => {
+            shortTextResponsePage.steps.clearSpecifyCorrectAnswerInputField();
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldSpecifyCorrectAnswerSection('-44');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldSpecifyCorrectAnswerSection('44');
+        });
+
+        it('When user selects \'Text\' in accepted student input again, then answer input field should contain text from previously added input', () => {
+            shortTextResponsePage.steps.selectAcceptedStudentInputType(0, 'Text');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldSpecifyCorrectAnswerSection('44');
+        });
+
+        it('When user adds alternate answer input field, then accepted student input should be applied on both the response answer input fields in the response accordion', () => {
+            shortTextResponsePage.steps.addAlternativeAnswerAccordion(1);
+            shortTextResponsePage.steps.clearSpecifyCorrectAnswerInputField();
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldSpecifyCorrectAnswerSection('Hi12');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldSpecifyCorrectAnswerSection('Hi12');
+        });
+    });
+
+    describe('Accepted student input - Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When \'Text\' is selected in accepted student input in edit tab, then user should be able to enter alphanumeric characters and special symbols in the preview tab', () => {
+            shortTextResponsePage.steps.verifyAcceptedStudentTypeActiveButton(0, 'Text');
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('Flower23^^');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldPreviewTab('Flower23^^');
+        });
+
+        it('When user enters numerical values in the response input field, then warning message \'Only text can be typed.\' should appear', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('23');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldPreviewTab('');
+            shortTextResponsePage.steps.verifyWarningMessage('Only text can be typed.');
+        });
+
+        it('CSS of warning message', { 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 error message', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(shortTextResponsePage.warningMessage());
+        });
+
+        it('When user enters alphanumeric text in response field then warning message should disappear', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('Alphanumeric text');
+            shortTextResponsePage.steps.focusOutOfResponseInputFieldPreviewTab();
+            shortTextResponsePage.steps.verifyWarningMessageNotExist();
+        });
+
+        it('When user selects \'Number\' in accepted student input in edit tab, then user should be able to enter numbers inside response input field  in preview tab', () => {
+            shortTextResponsePage.steps.switchToEditTab();
+            shortTextResponsePage.steps.selectAcceptedStudentInputType(0, 'Number');
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('232&');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldPreviewTab('232');
+        });
+
+        it('User should be able to enter decimal numbers inside response input field in preview tab', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('23.2');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldPreviewTab('23.2');
+        });
+
+        it('User should be able to enter negative numbers inside response input field in preview tab', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('-6');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldPreviewTab('-6');
+        });
+
+        it('User should be able to enter zero inside response input field in preview tab', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('0');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldPreviewTab('0');
+        });
+
+        it('When user enters alphanumeric values in the response input field, then and warning message \'Only number can be typed.\' should appear', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('Flower');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldPreviewTab('');
+            shortTextResponsePage.steps.verifyWarningMessage('Only number can be typed.');
+        });
+
+        it('When user enters numeric text in response field then warning message should disappear', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('82.5');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldPreviewTab('82.5');
+            shortTextResponsePage.steps.verifyWarningMessageNotExist();
+        });
+
+        it('When user selects \'Integer\' in accepted student input in edit tab, then user should be able to add only whole numbers inside response input field', () => {
+            shortTextResponsePage.steps.switchToEditTab();
+            shortTextResponsePage.steps.selectAcceptedStudentInputType(0, 'Integer');
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('232');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldPreviewTab('232');
+        });
+
+        it('When user has selected \'Integer\' in accepted student input, then user should not be able to add decimal numbers in the response input field', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('22.4');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldPreviewTab('224');
+        });
+
+        it('When user has selected \'Integer\' in accepted student input, then user should not be able to add negative number inside response input field i.e. input field should only include positive whole numbers.', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('-5');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldPreviewTab('5');
+        });
+
+        it('User should be able to enter zero inside response input field in preview tab', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('0');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldPreviewTab('0');
+        });
+
+        it('When user enters alphanumeric values in the response input field, then warning message \'Only integer can be typed.\' should appear', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('Flower.*');
+            shortTextResponsePage.steps.verifyWarningMessage('Only integer can be typed.');
+        });
+
+        it('When user enters integer text in response field then warning message should disappear', () => {
+            shortTextResponsePage.steps.enterTextInAnswerInputFieldPreviewTab('82');
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldPreviewTab('82');
+            shortTextResponsePage.steps.verifyWarningMessageNotExist();
+        });
+    });
+});

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

@@ -0,0 +1,291 @@
+import { specialCharacters } from "../../../fixtures/drawingToolbarOptionsAdditionalOptionsAndSpecialAndMathCharacters";
+import { dialogBoxBase, shortTextResponsePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const specialCharactersCategories = Object.values(specialCharacters.map((icon) => icon.categoryName));
+const customSpecialCharacters = ['A', '1', '#'];
+
+describe('Create item page - Fill in the gaps over image - text - Special characters section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Special characters section - edit tab', () => {
+        const newSelectedCategoryList = specialCharacters.slice(1);
+        abortEarlySetup();
+        before(() => {
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Special characters\' section label and unchecked \'Enable special characters\' checkbox and label should be displayed', () => {
+            utilities.verifyElementVisibilityState(shortTextResponsePage.specialCharactersLabel(), 'visible');
+            utilities.verifyInnerText(shortTextResponsePage.specialCharactersLabel(), 'Special characters');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.enableSpecialCharactersLabel(), 'visible');
+            utilities.verifyInnerText(shortTextResponsePage.enableSpecialCharactersLabel(), 'Enable special characters');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.enableSpecialCharactersCheckbox(), 'exist');
+            shortTextResponsePage.steps.verifyEnableSpecialCharactersCheckboxUnchecked();
+        });
+
+        it('When the user checks the \'Enable special characters\' checkbox, \'Group by language\' and \'Show only custom special characters\' labels and radio buttons should be displayed. By default \'Group by language\' radio button should be checked', () => {
+            shortTextResponsePage.steps.checkEnableSpecialCharactersCheckbox();
+            utilities.verifyElementVisibilityState(shortTextResponsePage.groupByLanguageRadioButton(), 'exist');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.groupByLanguageLabel(), 'visible');
+            utilities.verifyInnerText(shortTextResponsePage.groupByLanguageLabel(), 'Group by language');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.showOnlyCustomSpecialCharactersRadioButton(), 'exist');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.showOnlyCustomSpecialCharactersLabel(), 'visible');
+            utilities.verifyInnerText(shortTextResponsePage.showOnlyCustomSpecialCharactersLabel(), 'Show only custom special characters');
+            shortTextResponsePage.steps.verifyGroupedByLanguageRadioButtonIsSelected();
+        });
+
+        it('\'Select special character languages\' label should be displayed. A \'Preview\' hyperlink should be displayed next to the label', () => {
+            utilities.verifyElementVisibilityState(shortTextResponsePage.selectSpecialCharacterLanguagesLabel(), 'visible');
+            utilities.verifyInnerText(shortTextResponsePage.selectSpecialCharacterLanguagesLabel(), 'Select special character languages');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.customizeSpecialCharactersPreviewButton(), 'visible');
+            utilities.verifyInnerText(shortTextResponsePage.customizeSpecialCharactersPreviewButton(), 'Preview');
+        });
+
+        it(`A total of ${specialCharactersCategories.length} options should be displayed - ${specialCharactersCategories.join('')}. By default all language options should be in selected state`, () => {
+            shortTextResponsePage.steps.verifyCustomizeSpecialCharactersCategoryTiles(specialCharactersCategories);
+            shortTextResponsePage.steps.verifySelectedCustomizeSpecialCharactersCategoryTiles(specialCharactersCategories);
+        });
+
+        it('When the user clicks on the \'Preview\' hyperlink, a special characters popup should be displayed with all the special characters segregated according to all the language options. The user should be able to close the popup by clicking on the \'Close[X]\' button', () => {
+            shortTextResponsePage.steps.clickOnCustomizeSpecialCharactersPreviewButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+            //Add this verification once https://redmine.zeuslearning.com/issues/555008 is resolved
+            //shortTextResponsePage.steps.verifySpecialCharactersPreviewPopupInEditTab(specialCharacters);
+            cy.log('Post-step: Closing preview popup')
+            dialogBoxBase.steps.closeWarningPopup();
+        });
+
+        it('When the user deselects any language option and opens the special characters popup by clicking on the \'Preview\' hyperlink, then the popup contents should get updated accordingly', () => {
+            shortTextResponsePage.steps.clickOnSpecialCharactersCategoryTile(specialCharacters[0].categoryName);
+            shortTextResponsePage.steps.verifySpecialCharacterCategoryTileIsNotSelected(specialCharacters[0].categoryName);
+            shortTextResponsePage.steps.clickOnCustomizeSpecialCharactersPreviewButton();
+            //Add this verification once https://redmine.zeuslearning.com/issues/555008 is resolved
+            //shortTextResponsePage.steps.verifySpecialCharactersPreviewPopupInEditTab(specialCharacters);
+            cy.log('Post-step: Closing preview popup')
+            dialogBoxBase.steps.closeWarningPopup();
+        });
+
+        it('When the user checks the \'Show only custom special characters\' radio button, \'Custom special characters\' label and input field should be displayed. A \'Preview\' hyperlink should be displayed next to the label', () => {
+            shortTextResponsePage.steps.selectShowOnlyCustomSpecialCharactersRadioButton();
+            utilities.verifyElementVisibilityState(shortTextResponsePage.customSpecialCharactersInputField(), 'visible');
+            utilities.verifyInnerText(shortTextResponsePage.customSpecialCharactersLabel(), 'Custom special characters');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.customSpecialCharactersLabel(), 'visible');
+            utilities.verifyElementVisibilityState(shortTextResponsePage.customizeSpecialCharactersPreviewButton(), 'visible');
+        });
+
+        it('When the user specifies custom special characters, then on clicking on the \'Preview\' hyperlink, only the specified custom special characters should be displayed in the popup', () => {
+            shortTextResponsePage.steps.addInputToCustomSpecialCharactersInputField(`${customSpecialCharacters.join('')}`);
+            shortTextResponsePage.steps.clickOnCustomizeSpecialCharactersPreviewButton();
+            shortTextResponsePage.steps.verifyCustomSpecialCharactersDisplayedInPreviewPopupEditTab(customSpecialCharacters);
+            cy.log('Post-step: Closing preview popup')
+            dialogBoxBase.steps.closeWarningPopup();
+        });
+
+        it('CSS of special characters section', { tags: 'css' }, () => {
+            utilities.verifyCSS(shortTextResponsePage.specialCharactersLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            //checked state of enable special characters checkbox
+            utilities.verifyCSS(shortTextResponsePage.enableSpecialCharactersCheckbox().parent().find('rect').eq(1), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(shortTextResponsePage.groupByLanguageLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            //selected state of radio button
+            utilities.verifyCSS(shortTextResponsePage.showOnlyCustomSpecialCharactersRadioButton().parents('span').find('svg'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(shortTextResponsePage.customSpecialCharactersLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(shortTextResponsePage.customSpecialCharactersInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(shortTextResponsePage.customSpecialCharactersInputField().parent().find('fieldset'), {
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`
+            });
+            utilities.verifyCSS(shortTextResponsePage.customizeSpecialCharactersPreviewButton(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            cy.log('Selecting group by language radio button');
+            shortTextResponsePage.steps.selectGroupByLanguageRadioButton();
+            utilities.verifyCSS(shortTextResponsePage.selectSpecialCharacterLanguagesLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            //Category tiles in selected state
+            utilities.verifyCSS(shortTextResponsePage.specialCharacterTileIcon().eq(1).find('svg'), {
+                'fill': css.color.defaultBackground
+            });
+            utilities.verifyCSS(shortTextResponsePage.TickIcon().last().find('path[data-name*="Rectangle"]'), {
+                'fill': css.color.defaultBackground
+            });
+            utilities.verifyCSS(shortTextResponsePage.TickIcon().last().find('path[data-name*="feather-check"]'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(shortTextResponsePage.specialCharacterTileSectionCategoriesDragIcon().eq(1).find('path'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(shortTextResponsePage.specialCharacterTileSectionCategoriesDragIcon().eq(1).parent(), {
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(shortTextResponsePage.specialCharacterTileCategoryName().eq(1), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(shortTextResponsePage.specialCharacterTiles().eq(1), {
+                'background-color': css.color.primaryBtnBg
+            });
+            //Category tiles in de-selected state
+            utilities.verifyCSS(shortTextResponsePage.specialCharacterTileIcon().eq(0).find('svg'), {
+                'fill': css.color.secondaryBtn
+            });
+            utilities.verifyCSS(shortTextResponsePage.specialCharacterTileSectionCategoriesDragIcon().eq(0).find('path'), {
+                'fill': css.color.secondaryBtn
+            });
+            utilities.verifyCSS(shortTextResponsePage.specialCharacterTileSectionCategoriesDragIcon().eq(0).parent(), {
+                'fill': css.color.waveformCursorColor
+            });
+            utilities.verifyCSS(shortTextResponsePage.specialCharacterTileCategoryName().eq(0), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(shortTextResponsePage.specialCharacterTiles().eq(0), {
+                'background-color': css.color.defaultBackground
+            });
+            cy.log('Opening preview popup and expanding one category accordion');
+            shortTextResponsePage.steps.clickOnCustomizeSpecialCharactersPreviewButton();
+            shortTextResponsePage.steps.clickOnSpecialCharactersPreviewPopupCategoryAccordionExpandIcon(0);
+            utilities.verifyCSS(dialogBoxBase.dialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(shortTextResponsePage.specialCharactersPreviewPopupCategoryLabel().eq(0), {
+                'color': css.color.accordionLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(shortTextResponsePage.specialCharactersPreviewPopupCategoryAccordionExpandIcon().last().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(shortTextResponsePage.specialCharactersPreviewPopupSymbol().eq(0).find('svg'), {
+                'fill': css.color.waveformCursorColor
+            });
+        });
+
+        it('Accessibility of Customize special characters', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dialogBoxBase.dialogBox());
+            cy.log('Closing preview popup');
+            dialogBoxBase.steps.closeWarningPopup();
+            cy.checkAccessibility(shortTextResponsePage.specialCharactersLabel().parents('.edit-question-edit-tab-wrapper'));
+            cy.log('Selecting show only custom special characters radio button');
+            shortTextResponsePage.steps.selectShowOnlyCustomSpecialCharactersRadioButton();
+            cy.checkAccessibility(shortTextResponsePage.specialCharactersLabel().parent());
+        });
+    });
+
+    describe('Special characters section - preview tab', () => {
+        const newSelectedCategoryList = specialCharacters.slice(1);
+        abortEarlySetup();
+        before(() => {
+            shortTextResponsePage.steps.navigateToCreateQuestion('short text response');
+            cy.barsPreLoaderWait();
+            shortTextResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Enable special characters\' checkbox is unchecked and user focuses on the preview tab response field, then \'Special characters\' button should not be displayed', () => {
+            shortTextResponsePage.steps.focusInAnswerInputFieldPreviewTab();
+            utilities.verifyElementVisibilityState(shortTextResponsePage.specialCharactersButtonPreviewTab(), 'notExist');
+        });
+
+        it('When \'Enable special characters\' checkbox is checked and user focuses on the preview tab response field, then \'Special characters\' button should be displayed', () => {
+            shortTextResponsePage.steps.switchToEditTab();
+            shortTextResponsePage.steps.checkEnableSpecialCharactersCheckbox();
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.steps.focusInAnswerInputFieldPreviewTab();
+            utilities.verifyElementVisibilityState(shortTextResponsePage.specialCharactersButtonPreviewTab(), 'visible');
+            utilities.verifyInnerText(shortTextResponsePage.specialCharactersButtonPreviewTab(), 'é');
+            utilities.verifyElementCount(shortTextResponsePage.specialCharactersButtonPreviewTab(), '1');
+        });
+
+        it('When user clicks on response area special characters button, then special characters popup should be displayed with its default contents and all category accordions should be in collapsed state', () => {
+            shortTextResponsePage.steps.openSpecialCharactersPopupPreviewTab();
+            //Add this verification once https://redmine.zeuslearning.com/issues/555008 is resolved
+            //shortTextResponsePage.steps.verifySpecialCharactersPopupCategorySymbols(specialCharacters);
+        });
+
+        it('When user clicks on the \'Close\' button then the \'Special characters\' popup should be closed', () => {
+            shortTextResponsePage.steps.closeSpecialCharactersPopupPreviewTab();
+            utilities.verifyElementVisibilityState(shortTextResponsePage.specialCharactersPopupTitlePreviewTab(), 'notExist');
+        });
+
+        it('When the user has deselected any language option and opens the special characters popup in the preview tab, then the popup contents should get updated accordingly', () => {
+            shortTextResponsePage.steps.switchToEditTab();
+            shortTextResponsePage.steps.clickOnSpecialCharactersCategoryTile(specialCharacters[0].categoryName);
+            shortTextResponsePage.steps.verifySpecialCharacterCategoryTileIsNotSelected(specialCharacters[0].categoryName);
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.steps.focusInAnswerInputFieldPreviewTab();
+            shortTextResponsePage.steps.openSpecialCharactersPopupPreviewTab();
+            //Add this verification once https://redmine.zeuslearning.com/issues/555008 is resolved
+            //shortTextResponsePage.steps.verifySpecialCharactersPopupCategorySymbols(specialCharacters);
+        });
+
+        it('When the user has specified custom special characters and opens the special characters popup in the preview tab, then only the specified custom special characters should be displayed in the popup', () => {
+            shortTextResponsePage.steps.closeSpecialCharactersPopupPreviewTab();
+            shortTextResponsePage.steps.switchToEditTab();
+            shortTextResponsePage.steps.selectShowOnlyCustomSpecialCharactersRadioButton();
+            shortTextResponsePage.steps.addInputToCustomSpecialCharactersInputField(`${customSpecialCharacters.join('')}`);
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.steps.focusInAnswerInputFieldPreviewTab();
+            shortTextResponsePage.steps.openSpecialCharactersPopupPreviewTab();
+            shortTextResponsePage.steps.verifyCustomSpecialCharactersInSpecialCharactersPopupPreviewTab(customSpecialCharacters);
+        });
+
+        it('When user clicks on a special character symbol in special characters popup in the preview tab, then the that symbol should be displayed in the response area input field', () => {
+            shortTextResponsePage.steps.clickOnCustomSpecialCharacterSymbolInSpecialCharactersPopupPreviewTab(customSpecialCharacters[0]);
+            shortTextResponsePage.steps.closeSpecialCharactersPopupPreviewTab();
+            shortTextResponsePage.steps.verifyTextInAnswerInputFieldPreviewTab(`${customSpecialCharacters[0]}`)
+        });
+
+        it('CSS of \'Special characters\' popup', { tags: 'css' }, () => {
+            cy.log('Pre-step: Switching to edit tab and selecting group by language radio button');
+            shortTextResponsePage.steps.switchToEditTab();
+            shortTextResponsePage.steps.selectGroupByLanguageRadioButton();
+            shortTextResponsePage.steps.switchToPreviewTab();
+            shortTextResponsePage.steps.focusInAnswerInputFieldPreviewTab();
+            shortTextResponsePage.steps.openSpecialCharactersPopupPreviewTab();
+            utilities.verifyCSS(shortTextResponsePage.specialCharactersPopupTitlePreviewTab(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.bold,
+            });
+            utilities.verifyCSS(shortTextResponsePage.specialCharactersPopupCategoryAccordionChevronButtonPreviewTab().last().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(shortTextResponsePage.specialCharactersPopupSymbolPreviewTab().last().find('path'), {
+                'fill': css.color.activeButtons
+            });
+        });
+    });
+});