itemengine-cypress-automation 1.0.86 → 1.0.88

package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/studentViewSettings.js

@@ -0,0 +1,204 @@
+import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create Item page - drag and drop into categories: Student view settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Student view settings : Spell check - Edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Spell check\' functionality label and checkbox should be displayed and by default it should be unchecked', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.spellCheckLabel(), 'Spell check');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.spellCheckLabel(), 'visible');
+            fillInTheGapsOverImageTextPage.steps.verifySpellCheckCheckboxUnchecked();
+        });
+
+        it('CSS of \'Spell check\' section - unchecked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.spellCheckLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.spellCheckCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        it('Accessibility of \'Spell check\' section - unchecked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.spellCheckLabel().parents('.student-view-settings-container'));
+        });
+
+        it('User should be able to check \'Spell check\' checkbox', () => {
+            fillInTheGapsOverImageTextPage.steps.checkSpellCheckCheckbox();
+        });
+
+        it('CSS of \'Spell check\' section - checked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.spellCheckCheckbox().parent('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Spell check\' section - checked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.spellCheckLabel());
+        });
+
+        it('User should be able to uncheck \'Spell check\' checkbox', () => {
+            fillInTheGapsOverImageTextPage.steps.uncheckSpellCheckCheckbox();
+        });
+    });
+
+    describe('Student view settings : Spell check - Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+        });
+
+        it('When the \'Spell check\' functionality is disabled, the response field should have \'spellcheck\' attribute set as \'false\' in preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.verifySpellCheckOfResponseFieldPreviewTabDisabled(0);
+        });
+
+        it('When the \'Spell check\' functionality is enabled, the response field should have \'spellcheck\' attribute set as \'true\' in the preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.checkSpellCheckCheckbox();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifySpellCheckOfResponseFieldPreviewTabEnabled(0);
+        });
+    });
+
+    describe('Allow students to check answer: Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+        });
+
+        it('\'Allow student to check answer\' label and checkbox should be displayed and it should be unchecked by default', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.allowStudentToCheckAnswerLabel(), 'Allow student to check answer');
+            fillInTheGapsOverImageTextPage.steps.verifyAllowStudentsToCheckAnswerCheckboxUnchecked();
+        });
+
+        it('CSS of \'Allow student to check answer\' checkbox and label - unchecked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.allowStudentToCheckAnswerLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.allowStudentToCheckAnswerCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        it('Accessibility of \'Allow student to check answer\' section - unchecked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.allowStudentToCheckAnswerCheckbox().parents('.student-view-settings-container'));
+        });
+
+        it('When the user checks the \'Allow student to check answer\' checkbox, then \'Maximum check answer attempts\' dropdown should be displayed', () => {
+            fillInTheGapsOverImageTextPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.maximumCheckAnswerAttemptsDropdown(), 'visible');
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyMaxCheckAnswerAttemptsDropdown();
+
+        fillInTheGapsOverImageTextPage.tests.verifyAllowStudentsToCheckAnswerContentsCSSAndA11y();
+    });
+
+    describe('Allow students to check answer: Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image with text');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageTextPage.steps.addTextInQuestionInstructionsInputField('Fill in the gaps');
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.allotPoints(10);
+            fillInTheGapsOverImageTextPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(70);
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(40);
+            fillInTheGapsOverImageTextPage.steps.insertResponseArea(100);
+            fillInTheGapsOverImageTextPage.steps.selectAcceptedStudentInputType(1, 'Number');
+            fillInTheGapsOverImageTextPage.steps.selectAcceptedStudentInputType(2, 'Integer');
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'Flower' }, { responseIndex: 1, responseText: '20.00' }, { responseIndex: 2, responseText: '7' }]);
+        });
+
+        it('When the user has added options and specified correct answer and points then on checking the \'Allow students to check answer\' checkbox the Check answer button should be displayed in the preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.checkAnswerButton(), 'Check answer');
+        });
+
+        it('When the user enters answer in the dropzone and checks the answer then an icon should be displayed beside the selected option and the check answer button should be in enabled state', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Flower' }]);
+            fillInTheGapsOverImageTextPage.steps.checkAnswer();
+            fillInTheGapsOverImageTextPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsOverImageTextPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+
+        it('When the user selects an option from the Maximum check answer attempts dropdown then the user should be able to check answer only those many times in the preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.expandMaxCheckAnswerAttemptsDropdown();
+            fillInTheGapsOverImageTextPage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('1');
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Flower' }]);
+            fillInTheGapsOverImageTextPage.steps.checkAnswer();
+            fillInTheGapsOverImageTextPage.steps.verifyCheckAnswerButtonDisabled();
+        });
+
+        it('When the user reaches maximum check answer attempts, then the \'Check Answer\' button should become disabled', () => {
+            utilities.verifyElementDisabled(fillInTheGapsOverImageTextPage.checkAnswerButton());
+        });
+
+        it('CSS of disabled \'Check Answer\' button', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.checkAnswerButton(), {
+                'color': css.color.primaryBtnDisabled,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('Accessibility of disabled Check Answer button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.checkAnswerButton().parents('.check-answer-and-status-wrapper'));
+        });
+
+        it('When the user updates the value of \'Maximum check answer attempts\' dropdown, it should get reflected on the Preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.expandMaxCheckAnswerAttemptsDropdown();
+            fillInTheGapsOverImageTextPage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('3');
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyCheckAnswerButtonEnabled();
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Flower' }]);
+            fillInTheGapsOverImageTextPage.steps.checkAnswer();
+            fillInTheGapsOverImageTextPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+
+        it('When the user selects \'No limit\' option from the dropdown then user should be able to check answer multiple times', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.expandMaxCheckAnswerAttemptsDropdown();
+            fillInTheGapsOverImageTextPage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('no limit');
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyCheckAnswerButtonEnabled();
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 0, responseText: 'Flower' }]);
+            fillInTheGapsOverImageTextPage.steps.checkAnswer();
+            fillInTheGapsOverImageTextPage.steps.verifyCheckAnswerButtonEnabled();
+            fillInTheGapsOverImageTextPage.steps.enterTextInAnswerInputFieldsPreviewTab([{ responseIndex: 1, responseText: '20.00' }]);
+            fillInTheGapsOverImageTextPage.steps.checkAnswer();
+            fillInTheGapsOverImageTextPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+    });
+});

package/cypress/e2e/ILC/Protractor/protractorEditTabBasicsSection.js

@@ -174,7 +174,7 @@ describe('Create Item page - Protractor : Edit Tab', () => {
         it('\'Opacity\' label, input field and slider should be displayed and by default the slider and input field of \'Opacity\' should be set to 40 percent', () => {
             protractorPage.steps.verifyDefaultOpacityLabelSliderAndInputField();
             protractorPage.steps.verifyOpacityInputFieldValue(40);
-            protractorPage.steps.verifyOpacitySliderValue(40);
+            protractorPage.steps.verifyValueOfOpacitySlider(40);
         });
 
         it('The maximum value of \'Opacity\' slider should be 100', () => {
@@ -184,7 +184,7 @@ describe('Create Item page - Protractor : Edit Tab', () => {
         it('When the user changes value in the opacity input field, the slider value should also change accordingly', () => {
             protractorPage.steps.enterInputToOpacityInputField(85);
             protractorPage.steps.verifyOpacityInputFieldValue(85);
-            protractorPage.steps.verifyOpacitySliderValue(85);
+            protractorPage.steps.verifyValueOfOpacitySlider(85);
         });
 
         it('CSS of \'Opacity\' Section in Edit tab', { tags: 'css' }, () => {
@@ -209,8 +209,8 @@ describe('Create Item page - Protractor : Edit Tab', () => {
         });
 
         it('When the user changes the opacity slider value, value in the opacity input field should also change', () => {
-            protractorPage.steps.clickOnOpacitySlider();
-            protractorPage.steps.verifyOpacitySliderValue(50);
+            protractorPage.steps.clickActionOnOpacitySlider();
+            protractorPage.steps.verifyValueOfOpacitySlider(50);
             protractorPage.steps.verifyOpacityInputFieldValue(50);
         });
 

package/cypress/e2e/ILC/Protractor/protractorEditTabFunctionality.js

@@ -134,7 +134,7 @@ describe('Protractor Tool: Preview Tab', () => {
 
         it('When the user changes the opacity value from the opacity slider in the edit tab, then the opacity of protractor should also change accordingly in the preview tab', () => {
             protractorPage.steps.switchToEditTab();
-            protractorPage.steps.clickOnOpacitySlider();
+            protractorPage.steps.clickActionOnOpacitySlider();
             protractorPage.steps.switchToPreviewTab();
             protractorPage.steps.verifyPreviewTabColorAndOpacityOfProtractor(0, 0.5);
             protractorPage.steps.verifyProtractorVisibleInPreviewTab();

package/cypress/e2e/ILC/Ruler/rulerEditTabBasicsSection.js

@@ -427,7 +427,7 @@ describe('Create Item page - Ruler: Edit Tab', () => {
         it('\'Opacity\' label, input field and slider should be displayed and by default the slider of \'Opacity\' should be set to 40 percent', () => {
             rulerPage.steps.verifyDefaultOpacityLabelSliderAndInputField();
             rulerPage.steps.verifyOpacityInputFieldValue(40);
-            rulerPage.steps.verifyOpacitySliderValue(40);
+            rulerPage.steps.verifyValueOfOpacitySlider(40);
         });
 
         it('The maximum value of \'Opacity\' slider should be 100', () => {
@@ -437,7 +437,7 @@ describe('Create Item page - Ruler: Edit Tab', () => {
         it('When the user changes value in the opacity input field, the slider value should also change accordingly', () => {
             rulerPage.steps.enterInputToOpacityInputField(85);
             rulerPage.steps.verifyOpacityInputFieldValue(85);
-            rulerPage.steps.verifyOpacitySliderValue(85);
+            rulerPage.steps.verifyValueOfOpacitySlider(85);
         });
 
         //Failed due to https://redmine.zeuslearning.com/issues/555936
@@ -463,8 +463,8 @@ describe('Create Item page - Ruler: Edit Tab', () => {
         });
 
         it('When the user changes the opacity slider value, value in the opacity input field should also change', () => {
-            rulerPage.steps.clickOnOpacitySlider();
-            rulerPage.steps.verifyOpacitySliderValue(50);
+            rulerPage.steps.clickActionOnOpacitySlider();
+            rulerPage.steps.verifyValueOfOpacitySlider(50);
             rulerPage.steps.verifyOpacityInputFieldValue(50);
         });
 

package/cypress/e2e/ILC/Ruler/rulerEditTabFunctionality.js

@@ -208,7 +208,7 @@ describe('Ruler: Edit tab functionality', () => {
         it('When the user changes the opacity value from the opacity slider in the edit tab, then the opacity of ruler should also change accordingly in the preview tab', () => {
             cy.log('Switching to Edit Tab');
             rulerPage.steps.switchToEditTab();
-            rulerPage.steps.clickOnOpacitySlider();
+            rulerPage.steps.clickActionOnOpacitySlider();
             cy.log('Switching to Preview Tab');
             rulerPage.steps.switchToPreviewTab();
             rulerPage.steps.verifyRulerOpacityInPreview('0.5');

package/cypress/e2e/ILC/SingleSelection/editTabScoringSection.js

@@ -60,11 +60,9 @@ describe('Create Item page - Single Selection: Scoring cases', () => {
         it('When the user selects \'Manually scored\' option from the scoring Type dropdown then the \'Specify correct answer\' section should not be displayed; \'Points\' and \'Minimum scoring\' label and dropdown should be displayed', () => {
             singleSelectionPage.steps.expandScoringTypeDropdown();
             singleSelectionPage.steps.selectOptionFromScoringTypeDropdown('Manually scored')
-            utilities.verifyElementVisibilityState(singleSelectionPage.pointsLabel(), 'visible');
-            utilities.verifyElementVisibilityState(singleSelectionPage.pointsInputField(), 'visible');
+            singleSelectionPage.steps.verifyDefaultPointsLabelAndInputField();
             singleSelectionPage.steps.verifyMinimumScoringLabelAndDropdownDefaultState();
             utilities.verifyElementVisibilityState(singleSelectionPage.specifyCorrectAnswerLabel(), 'notExist');
-            singleSelectionPage.steps.expandAdditonalSettings();
         });
 
         singleSelectionPage.tests.verifyPointsFieldErrorState(10);

package/cypress/e2e/ILC/TextEntryMath/editTabBasicSection.js

@@ -0,0 +1,205 @@
+import { textEntryMathPage } from "../../../pages";
+import { commonComponents } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create item page - Text entry math: Question instructions, Add structure - Question input field', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question instructions input field - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            textEntryMathPage.steps.navigateToCreateQuestion('Text Entry Math');
+            cy.barsPreLoaderWait();
+        });
+
+        textEntryMathPage.tests.verifyQuestionInstructionsInputFieldEditTab();
+    });
+
+    describe('Question instructions input field - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            textEntryMathPage.steps.navigateToCreateQuestion('Text Entry Math');
+            cy.barsPreLoaderWait();
+        });
+
+        textEntryMathPage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
+    });
+
+
+    describe('Add structure - Question input field', () => {
+        abortEarlySetup();
+        before(() => {
+            textEntryMathPage.steps.navigateToCreateQuestion('Text Entry Math');
+            cy.barsPreLoaderWait();
+        });
+
+        it('By default \'Add structure\' tab will have active selection', () => {
+            textEntryMathPage.steps.verifyAddStructureTabIsSelected();
+        });
+
+        it('In in \'Add structure\' tab, \'Question\' label and input field should be displayed and by default in the question input field, sample text along with two response tokens with text \'Response\' should be present', () => {
+            utilities.verifyInnerText(textEntryMathPage.questionLabel(), 'Question');
+            utilities.verifyElementVisibilityState(textEntryMathPage.questionLabel(), 'visible');
+            utilities.verifyInnerText(textEntryMathPage.questionInputField(), 'This is Dummy 1Response\nclose\nand2Response\nclose\n.');
+            utilities.verifyElementVisibilityState(textEntryMathPage.questionInputField(), 'visible');
+            utilities.verifyElementCount(textEntryMathPage.responseToken(), 2);
+        });
+
+        it('The response tokens should be displayed with a numeric count along with a close button in the question input field', () => {
+            textEntryMathPage.steps.verifyResponseTokenNumerationAndCloseButton(0);
+            textEntryMathPage.steps.verifyResponseTokenNumerationAndCloseButton(1);
+        });
+
+        it('The user should be able to edit text in the question input field', () => {
+            textEntryMathPage.steps.addInputToQuestionInputField('Lorem Ipsum');
+            utilities.verifyInnerText(textEntryMathPage.questionInputField(), 'This is Dummy 1Response\nclose\nand2Response\nclose\n.Lorem Ipsum');
+        });
+
+        it('When the user focuses in the question input field, the CKEditor toolbar should be displayed with a \'+Response\' button and when the user clicks on \'+Response\' button, then a response token should be added in the question input field', () => {
+            textEntryMathPage.steps.clickInQuestionInputField();
+            utilities.verifyElementVisibilityState(textEntryMathPage.ckEditorAddResponseButton(), 'visible');
+            textEntryMathPage.steps.addResponseToken();
+            utilities.verifyElementCount(textEntryMathPage.responseToken(), 3);
+            textEntryMathPage.steps.verifyResponseTokenNumerationAndCloseButton(2);
+        });
+
+        it('When the user clicks on the \'close\' button present on a response token,  then the response token in the question input field should get removed and the numeration of the remaining response tokens present in the question input field should get updated accordingly', () => {
+            textEntryMathPage.steps.deleteAResponseToken(1);
+            utilities.verifyElementCount(textEntryMathPage.responseToken(), 2);
+            textEntryMathPage.steps.verifyResponseTokenNumerationAndCloseButton(0);
+            textEntryMathPage.steps.verifyResponseTokenNumerationAndCloseButton(1);
+        });
+
+        it('When the user removes all response tokens from the question input field, an error message \'Error: Minimum one response token is required.\' should be displayed', () => {
+            textEntryMathPage.steps.deleteAResponseToken(1);
+            textEntryMathPage.steps.deleteAResponseToken(0);
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Minimum one response token is required.');
+        });
+
+        commonComponents.tests.verifyErrorMessageCSSAndA11y();
+
+        textEntryMathPage.tests.verifyQuestionInputFieldPlaceholderText();
+
+        textEntryMathPage.tests.addTokenAndVerifyMinimumOneTokenRequiredErrorMessageNotExist();
+
+        it('CSS of question input field', { tags: 'css' }, () => {
+            utilities.verifyCSS(textEntryMathPage.questionLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(textEntryMathPage.questionInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(textEntryMathPage.responseTokenNumeration(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(textEntryMathPage.responseTokenResponseLabel(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of question input field', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textEntryMathPage.questionInputField());
+        });
+    });
+
+    describe('Question input field - Add and delete response tokens - Specify correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            textEntryMathPage.steps.navigateToCreateQuestion('Text Entry Math');
+            cy.barsPreLoaderWait();
+        });
+
+        it('By default, for the two response token in question input field, two response accordions \'Response 1\' and \'Response 2\' should be present in collapsed state in the \'Specify correct answer section\'', () => {
+            utilities.verifyElementCount(textEntryMathPage.responseAccordion(), 2);
+            textEntryMathPage.steps.verifyResponseAccordionIsCollapsed(0);
+            textEntryMathPage.steps.verifyResponseAccordionIsCollapsed(1);
+            utilities.verifyInnerText(utilities.getNthElement(textEntryMathPage.responseAccordionLabel(), 0), 'Response 1');
+            utilities.verifyInnerText(utilities.getNthElement(textEntryMathPage.responseAccordionLabel(), 1), 'Response 2');
+        });
+
+        it('When the user adds a response token in the question input field, then a response accordion along with \'Response #\' label should be added in the \'Specify correct answer\' section', () => {
+            textEntryMathPage.steps.addResponseToken();
+            utilities.verifyElementCount(textEntryMathPage.responseAccordion(), 3);
+            utilities.verifyInnerText(utilities.getNthElement(textEntryMathPage.responseAccordionLabel(), 2), 'Response 3');
+        });
+
+        it('When the user removes a response token in the question input field, then its respective response accordion in the \'Specify correct answer\' section should be removed', () => {
+            textEntryMathPage.steps.deleteAResponseToken(0);
+            utilities.verifyElementCount(textEntryMathPage.responseAccordion(), 2);
+            textEntryMathPage.steps.verifyResponseAccordionIsCollapsed(0);
+            textEntryMathPage.steps.verifyResponseAccordionIsCollapsed(1);
+            utilities.verifyInnerText(utilities.getNthElement(textEntryMathPage.responseAccordionLabel(), 0), 'Response 1');
+            utilities.verifyInnerText(utilities.getNthElement(textEntryMathPage.responseAccordionLabel(), 1), 'Response 2');
+        });
+    });
+
+    describe('Question input field - Add and delete response tokens - Additional settings aria-label input fields', () => {
+        abortEarlySetup();
+        before(() => {
+            textEntryMathPage.steps.navigateToCreateQuestion('Text Entry Math');
+            cy.barsPreLoaderWait();
+        });
+
+        it('By default, for the two response token in question input field, in additional settings accordion, two  \'ARIA label for text containers\'input fields should be displayed', () => {
+            textEntryMathPage.steps.expandAdditionalSettings();
+            utilities.verifyElementCount(textEntryMathPage.textContainersAriaLabelInputField(), 2);
+        });
+
+        it('When the user adds a response token in the question input field, then in additional settings accordion, one more \'ARIA label for text containers\' input field should be displayed with appropriate numeration', () => {
+            textEntryMathPage.steps.addResponseToken();
+            textEntryMathPage.steps.verifyTextContainerAriaLabelInputFieldCountAndNumeration(3);
+        });
+
+        it('When the user removes a response token in the question input field, then in additional settings accordion, the respective \'ARIA label for text containers\' input field should be removed', () => {
+            textEntryMathPage.steps.deleteAResponseToken(0);
+            textEntryMathPage.steps.verifyTextContainerAriaLabelInputFieldCountAndNumeration(2);
+        });
+    });
+
+    describe('Question input field - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            textEntryMathPage.steps.navigateToCreateQuestion('Text Entry Math');
+            cy.barsPreLoaderWait();
+            textEntryMathPage.steps.switchToPreviewTab();
+        });
+
+        it('The default question input field content should be displayed in the preview tab question', () => {
+            utilities.verifyInnerText(textEntryMathPage.questionContainerPreviewTab(), 'This is Dummy \n\n\n\n\nand\n\n\n\n\n.');
+            utilities.verifyElementCount(textEntryMathPage.responseFieldPreviewTab(), 2);
+        });
+
+        it('When user edits the question input field in edit tab, then the changes should be reflected in preview tab', () => {
+            textEntryMathPage.steps.switchToEditTab();
+            textEntryMathPage.steps.addInputToQuestionInputField('Lorem Ipsum');
+            textEntryMathPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(textEntryMathPage.questionContainerPreviewTab(), 'This is Dummy \n\n\n\n\nand\n\n\n\n\n.Lorem Ipsum');
+        });
+
+        it('When the user adds a response token in the question input field, then in preview tab the additional response field should be displayed', () => {
+            textEntryMathPage.steps.switchToEditTab();
+            textEntryMathPage.steps.addResponseToken();
+            textEntryMathPage.steps.switchToPreviewTab();
+            utilities.verifyElementCount(textEntryMathPage.responseFieldPreviewTab(), 3);
+        });
+
+        it('When the user removes a response token in the question input field, then in preview tab response field should also be removed', () => {
+            textEntryMathPage.steps.switchToEditTab();
+            textEntryMathPage.steps.deleteAResponseToken(0);
+            textEntryMathPage.steps.switchToPreviewTab();
+            utilities.verifyElementCount(textEntryMathPage.responseFieldPreviewTab(), 2);
+        });
+    });
+});