itemengine-cypress-automation 1.0.184-e2e-execution-crash-3b9d0d0.0 → 1.0.184

package/cypress/e2e/ILC/TextSelection/textSelectionModesInSpecifyCorrectAnswerSection.js

@@ -0,0 +1,260 @@
+import { textSelectionPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const paragraphTextArray = ['Horses cannot breat& through their mouth! Cows can sleep standing up?', 'Dogs have e#cellent \'hearing\'.', 'Deers possess nearly, 300 degree field of vision.'];
+const sentenceTextArray = ['Horses cannot breat& through their mouth! ', 'Cows can sleep standing up?', 'Dogs have e#cellent \'hearing\'.', 'Deers possess nearly, 300 degree field of vision.'];
+const wordTextArray = ['Horses', 'cannot', 'breat&', 'through', 'their', 'mouth', 'Cows', 'can', 'sleep', 'standing', 'up', 'Dogs', 'have', 'e#cellent', 'hearing', 'Deers', 'possess', 'nearly', '300', 'degree', 'field', 'of', 'vision'];
+const customTextArray = ['Cows can sleep', 'Dogs have e#cellent \'hearing\'', 'nearly, 300 degree field of vision.'];
+
+describe('Create Item page - Text selection: Text selection modes in Set correct answer section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Specify correct answer section: Custom', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.clearQuestionInputField();
+            paragraphTextArray.forEach((paragraphText) => {
+                textSelectionPage.steps.addInputToQuestionInputField(`${paragraphText}{enter}`);
+            });
+            textSelectionPage.steps.addInputToQuestionInputField('{backspace}');
+        });
+
+        it('When \'Custom\' text selection type is selected, then no options should be provided in specify correct answer section', () => {
+            utilities.verifyElementCount(textSelectionPage.specifyCorrectAnswerTextParagraphs(), 3);
+            utilities.verifyElementVisibilityState(textSelectionPage.optionSpecifyCorrectAnswer(), 'notExist');
+        });
+
+        it('When user selects text in specify possible options section, then that text should be provided as option in specify correct answer section', () => {
+            textSelectionPage.steps.selectOptionInSpecifyPossibleOptionsSection('Custom', customTextArray[0]);
+            utilities.verifyElementCount(textSelectionPage.optionSpecifyCorrectAnswer(), 1);
+            utilities.verifyTextContent(textSelectionPage.optionSpecifyCorrectAnswer(), customTextArray[0]);
+        });
+
+        it('When user deselects the option in specify possible options section, then that text should not provided as option in specify correct answer section', () => {
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(customTextArray[0]);
+            utilities.verifyElementVisibilityState(textSelectionPage.optionSpecifyCorrectAnswer(), 'notExist');
+        });
+
+        it('When the user hovers over the provided option in specify correct answer section, then that option should be displayed in hover state', () => {
+            cy.log('Pre-step: Select an option in specify possible options section');
+            textSelectionPage.steps.selectOptionInSpecifyPossibleOptionsSection('Custom', customTextArray[0]);
+            textSelectionPage.steps.selectOptionInSpecifyPossibleOptionsSection('Custom', customTextArray[1]);
+            textSelectionPage.steps.verifyHoverStateOfDeselectedOptionInSpecifyCorrectAnswerSection(customTextArray[0], 'blue');
+        });
+
+        it('When user clicks on the provided option in specify correct answer section, then the option should be selected ', () => {
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(customTextArray[0]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(customTextArray[1]);
+            textSelectionPage.steps.verifySelectedStateOptionInSpecifyCorrectAnswerSection(customTextArray[0], 'blue');
+        });
+
+        it('When user clicks on the selected option, the option should then be deselected state', () => {
+            textSelectionPage.steps.deselectOptionInSpecifyCorrectAnswerSection(customTextArray[1]);
+        });
+
+        it('CSS of the option in deselected state in specify correct answer section', { tags: 'css' }, () => {
+            utilities.verifyCSS(textSelectionPage.optionSpecifyCorrectAnswer().contains(customTextArray[1]), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessibility of options in specify correct answer section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textSelectionPage.optionSpecifyCorrectAnswer().parents('[class*="Highlightstyles__HighlightPreviewWrapper"] [data-testid="question-instruction-element"]'));
+        });
+    });
+
+    describe('Specify correct answer section: Paragraph', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.clearQuestionInputField();
+            paragraphTextArray.forEach((paragraphText) => {
+                textSelectionPage.steps.addInputToQuestionInputField(`${paragraphText}{enter}`);
+            });
+            textSelectionPage.steps.addInputToQuestionInputField('{backspace}');
+            textSelectionPage.steps.switchTextSelectionMode('Paragraph');
+        });
+
+        it('When \'Paragraph\' text selection type is selected, then no options should be available in specify correct answer section', () => {
+            utilities.verifyElementCount(textSelectionPage.specifyCorrectAnswerTextParagraphs(), 3);
+            utilities.verifyElementCount(textSelectionPage.specifyCorrectAnswerTextSpans(), 3);
+            paragraphTextArray.forEach((paragraphText, index) => {
+                utilities.verifyTextContent(utilities.getNthElement(textSelectionPage.specifyCorrectAnswerTextSpans(), index), paragraphText);
+            })
+            utilities.verifyElementVisibilityState(textSelectionPage.optionSpecifyCorrectAnswer(), 'notExist');
+        });
+
+        it('When user has selected options in specify possible options, then the corresponding text should be available as options in specify correct answer section in deselected state', () => {
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(paragraphTextArray[0]);
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(paragraphTextArray[1]);
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(paragraphTextArray[2]);
+            textSelectionPage.steps.verifyOptionsInSpecifyCorrectAnswerSection(paragraphTextArray);
+        });
+
+        it('When user deselects the option in specify possible options section, then that text should not provided as option in specify correct answer section', () => {
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(paragraphTextArray[2]);
+            textSelectionPage.steps.verifyOptionsInSpecifyCorrectAnswerSection([paragraphTextArray[0], paragraphTextArray[1]]);
+        });
+
+        it('When the user hovers over the provided option in specify correct answer section, then that option should be displayed in hover state', () => {
+            textSelectionPage.steps.verifyHoverStateOfDeselectedOptionInSpecifyCorrectAnswerSection(paragraphTextArray[0], 'blue');
+        });
+
+        it('When user clicks on the provided option in specify correct answer section, then the option should be selected ', () => {
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[0]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[1]);
+            textSelectionPage.steps.verifySelectedStateOptionInSpecifyCorrectAnswerSection(paragraphTextArray[0], 'blue');
+        });
+
+        it('When user clicks on the selected option, the option should then be in deselected state', () => {
+            textSelectionPage.steps.deselectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[0]);
+        });
+
+        it('CSS of the option in selected and deselected state in specify correct answer section', { tags: 'css' }, () => {
+            utilities.verifyCSS(textSelectionPage.optionSpecifyCorrectAnswer().contains(paragraphTextArray[0]), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessibility of response options in specify correct answer section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textSelectionPage.optionSpecifyCorrectAnswer().parents('[class*="Highlightstyles__HighlightPreviewWrapper"] [data-testid="question-instruction-element"]'));
+        });
+    });
+
+    describe('Specify correct answer section: Sentence', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.clearQuestionInputField();
+            paragraphTextArray.forEach((paragraphText) => {
+                textSelectionPage.steps.addInputToQuestionInputField(`${paragraphText}{enter}`);
+            });
+            textSelectionPage.steps.addInputToQuestionInputField('{backspace}');
+            textSelectionPage.steps.switchTextSelectionMode('Sentence');
+        });
+
+        it('When \'Sentence\' text selection type is selected, then no options should be available in specify correct answer section', () => {
+            utilities.verifyElementCount(textSelectionPage.specifyCorrectAnswerTextParagraphs(), 3);
+            utilities.verifyElementCount(textSelectionPage.specifyCorrectAnswerTextSpans(), 4);
+            sentenceTextArray.forEach((sentenceText, index) => {
+                utilities.verifyTextContent(utilities.getNthElement(textSelectionPage.specifyCorrectAnswerTextSpans(), index), sentenceText);
+            })
+            utilities.verifyElementVisibilityState(textSelectionPage.optionSpecifyCorrectAnswer(), 'notExist');
+        });
+
+        it('When user has selected options in specify possible options, then the corresponding text should be available as options in specify correct answer section in deselected state', () => {
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(sentenceTextArray[0]);
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(sentenceTextArray[1]);
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(sentenceTextArray[2]);
+            textSelectionPage.steps.verifyOptionsInSpecifyCorrectAnswerSection([sentenceTextArray[0], sentenceTextArray[1], sentenceTextArray[2]]);
+        });
+
+        it('When user deselects the option in specify possible options section, then that text should not be provided as option in specify correct answer section', () => {
+            textSelectionPage.steps.deselectOptionInSpecifyPossibleOptionsSection('Sentence', sentenceTextArray[2]);
+            textSelectionPage.steps.verifyOptionsInSpecifyCorrectAnswerSection([sentenceTextArray[0], sentenceTextArray[1]]);
+        });
+
+        it('When the user hovers over the provided option in specify correct answer section, then that option should be displayed in hover state', () => {
+            textSelectionPage.steps.verifyHoverStateOfDeselectedOptionInSpecifyCorrectAnswerSection(sentenceTextArray[1], 'blue');
+        });
+
+        it('When user clicks on the provided option in specify correct answer section, then the option should be selected ', () => {
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(sentenceTextArray[0]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(sentenceTextArray[1]);
+            textSelectionPage.steps.verifySelectedStateOptionInSpecifyCorrectAnswerSection(sentenceTextArray[0], 'blue');
+        });
+
+        it('When user clicks on the selected option, the option should then be deselected state', () => {
+            textSelectionPage.steps.deselectOptionInSpecifyCorrectAnswerSection(sentenceTextArray[1]);
+        });
+
+        it('CSS of the option in selected and deselected state in specify correct answer section', { tags: 'css' }, () => {
+            utilities.verifyCSS(textSelectionPage.optionSpecifyCorrectAnswer().contains(sentenceTextArray[1]), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessibility of response options in specify correct answer section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textSelectionPage.optionSpecifyCorrectAnswer().parents('[class*="Highlightstyles__HighlightPreviewWrapper"] [data-testid="question-instruction-element"]'));
+        });
+    });
+
+    describe('Specify correct answer section: Word', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.clearQuestionInputField();
+            paragraphTextArray.forEach((paragraphText) => {
+                textSelectionPage.steps.addInputToQuestionInputField(`${paragraphText}{enter}`);
+            });
+            textSelectionPage.steps.addInputToQuestionInputField('{backspace}');
+            textSelectionPage.steps.switchTextSelectionMode('Word');
+        });
+
+        it('When \'Word\' text selection type is selected, then no options should be available in specify correct answer section', () => {
+            utilities.verifyElementCount(textSelectionPage.specifyCorrectAnswerTextParagraphs(), 3);
+            utilities.verifyElementCount(textSelectionPage.specifyCorrectAnswerTextSpans(), 23);
+            wordTextArray.forEach((wordText, index) => {
+                utilities.verifyTextContent(utilities.getNthElement(textSelectionPage.specifyCorrectAnswerTextSpans(), index), wordText);
+            })
+            utilities.verifyElementVisibilityState(textSelectionPage.optionSpecifyCorrectAnswer(), 'notExist');
+        });
+
+        it('When user has selected options in specify possible options, then the corresponding text should be available as options in specify correct answer section in deselected state', () => {
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(wordTextArray[0]);
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(wordTextArray[1]);
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(wordTextArray[2]);
+            textSelectionPage.steps.verifyOptionsInSpecifyCorrectAnswerSection([wordTextArray[0], wordTextArray[1], wordTextArray[2]]);
+        });
+
+        it('When user deselects the option in specify possible options section, then that text should not be provided as option in specify correct answer section', () => {
+            textSelectionPage.steps.deselectOptionInSpecifyPossibleOptionsSection('Word', wordTextArray[2]);
+            textSelectionPage.steps.verifyOptionsInSpecifyCorrectAnswerSection([wordTextArray[0], wordTextArray[1]]);
+        });
+
+        it('When the user hovers over the provided option in specify correct answer section, then that option should be displayed in hover state', () => {
+            textSelectionPage.steps.verifyHoverStateOfDeselectedOptionInSpecifyCorrectAnswerSection(wordTextArray[1], 'blue');
+        });
+
+        it('When user clicks on the provided option in specify correct answer section, then the option should be selected ', () => {
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(wordTextArray[0]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(wordTextArray[1]);
+            textSelectionPage.steps.verifySelectedStateOptionInSpecifyCorrectAnswerSection(wordTextArray[0], 'blue');
+        });
+
+        it('When user clicks on the selected option, the option should then be deselected state', () => {
+            textSelectionPage.steps.deselectOptionInSpecifyCorrectAnswerSection(wordTextArray[1]);
+        });
+
+        it('CSS of the option in selected and deselected state in specify correct answer section', { tags: 'css' }, () => {
+            utilities.verifyCSS(textSelectionPage.optionSpecifyCorrectAnswer().contains(wordTextArray[1]), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessibility of response options in specify correct answer section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textSelectionPage.optionSpecifyCorrectAnswer().parents('[class*="Highlightstyles__HighlightPreviewWrapper"] [data-testid="question-instruction-element"]'));
+        });
+    });
+});

package/cypress/e2e/ILC/TextSelection/textSelectionModesInSpecifyPossibleOptionsSection.js

@@ -0,0 +1,380 @@
+import { textSelectionPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const textSelectionModeArray = ['Custom', 'Paragraph', 'Sentence', 'Word'];
+const paragraphTextArray = ['Horses cannot breat& through their mouth! Cows can sleep standing up?', 'Dogs have e#cellent \'hearing\'.', 'Deers possess nearly, 300 degree field of vision.'];
+const sentenceTextArray = ['Horses cannot breat& through their mouth! ', 'Cows can sleep standing up?', 'Dogs have e#cellent \'hearing\'.', 'Deers possess nearly, 300 degree field of vision.'];
+const wordTextArray = ['Horses', 'cannot', 'breat&', 'through', 'their', 'mouth', 'Cows', 'can', 'sleep', 'standing', 'up', 'Dogs', 'have', 'e#cellent', 'hearing', 'Deers', 'possess', 'nearly', '300', 'degree', 'field', 'of', 'vision'];
+const customTextArray = ['Cows can sleep', 'Dogs have e#cellent \'hearing\'', 'nearly, 300 degree field of vision.'];
+
+describe('Create Item page - Text selection: Text selection modes in specify possible options section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Specify possible options section and Text selection modes: Custom text selection', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.clearQuestionInputField();
+            paragraphTextArray.forEach((paragraphText) => {
+                textSelectionPage.steps.addInputToQuestionInputField(`${paragraphText}{enter}`);
+            });
+            textSelectionPage.steps.addInputToQuestionInputField('{backspace}');
+        });
+
+        it('\'Text selection mode\' label and \'Custom\', \'Paragraph\', \'Sentence\' and \'Word\' text selection modes should be displayed', () => {
+            utilities.verifyInnerText(textSelectionPage.textSelectionModeLabel(), 'Text selection mode');
+            utilities.verifyElementVisibilityState(textSelectionPage.textSelectionModeLabel(), 'visible');
+            textSelectionModeArray.forEach((selectionMode, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(textSelectionPage.textSelectionModeButtonLabel(), index), selectionMode);
+                utilities.verifyElementVisibilityState(utilities.getNthElement(textSelectionPage.textSelectionMode(), index), 'visible');
+            });
+        });
+
+        it('By default \'Custom\' should be selected in text selection dropdown.', () => {
+            textSelectionPage.steps.verifyTextSelectionModeIsSelected('custom');
+            textSelectionPage.steps.verifyTextSelectionModeIsNotSelected('Paragraph');
+            textSelectionPage.steps.verifyTextSelectionModeIsNotSelected('Sentence');
+            textSelectionPage.steps.verifyTextSelectionModeIsNotSelected('Word');
+        });
+
+        it('\'Specify possible answers\' label should be displayed', () => {
+            utilities.verifyInnerText(textSelectionPage.specifyPossibleOptionsLabel(), 'Text selection mode');
+            utilities.verifyElementVisibilityState(textSelectionPage.specifyPossibleOptionsLabel(), 'visible');
+        });
+
+        it('When \'Custom\' text selection type is selected, then no options should be displayed', () => {
+            utilities.verifyElementVisibilityState(textSelectionPage.selectedOptionSpecifyPossibleOptions(), 'notExist');
+        });
+
+        it('The option count should be displayed as \'0\'.', () => {
+            textSelectionPage.steps.verifyOptionCounterTextAndValue(0);
+        });
+
+        it('When user selects Custom texts, then that text should be selected and the option count should be increased to 1.', () => {
+            textSelectionPage.steps.selectOptionInSpecifyPossibleOptionsSection('Custom', customTextArray[0]);
+            textSelectionPage.steps.selectOptionInSpecifyPossibleOptionsSection('Custom', customTextArray[1]);
+            textSelectionPage.steps.verifyOptionCounterTextAndValue(2);
+            textSelectionPage.steps.verifySelectedStateOptionInSpecifyPossibleOptionSection(customTextArray[0], 'blue');
+        });
+
+        it('Accessibility of the selected option', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textSelectionPage.selectedOptionSpecifyPossibleOptions());
+        });
+
+        it('When user clicks on a selected option, then the selected option should be deselected and the option count should reduce by 1.', () => {
+            textSelectionPage.steps.deselectOptionInSpecifyPossibleOptionsSection('Custom', customTextArray[0]);
+            utilities.verifyElementVisibilityState(textSelectionPage.selectedOptionSpecifyPossibleOptions(), 'notExist')
+            textSelectionPage.steps.verifyOptionCounterTextAndValue(1);
+        });
+
+        it('When user clears all selected options with the \'Clear\' button, then all the selected options should be deselected and the specify possible options field should be in errored state with the error message \'Error: Minimum one highlight option is required.\'', () => {
+            cy.log('Pre-step: Selecting multiple texts to create options');
+            textSelectionPage.steps.selectOptionInSpecifyPossibleOptionsSection('Custom', customTextArray[0]);
+            textSelectionPage.steps.selectOptionInSpecifyPossibleOptionsSection('Custom', customTextArray[1]);
+            textSelectionPage.steps.selectOptionInSpecifyPossibleOptionsSection('Custom', customTextArray[2]);
+            textSelectionPage.steps.clearSelectedOptionsInSpecifyPossibleOptionSection();
+            utilities.verifyElementVisibilityState(textSelectionPage.selectedOptionSpecifyPossibleOptions(), 'notExist');
+            utilities.verifyInnerText(textSelectionPage.errorMessage(), 'Error: Minimum one highlight option is required.');
+            textSelectionPage.steps.verifyErroredStateOfSpecifyPossibleOptionsSection();
+        });
+
+        textSelectionPage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When user selects Custom text again, the option should be selected and the error message should disappear and option counter should display 1 count', () => {
+            textSelectionPage.steps.selectOptionInSpecifyPossibleOptionsSection('Custom', customTextArray[2]);
+            utilities.verifyElementVisibilityState(textSelectionPage.errorMessage(), 'notExist');
+            textSelectionPage.steps.verifyOptionCounterTextAndValue(1);
+        });
+
+        it('CSS of the text selection modes and specify possible option section', { tags: 'css' }, () => {
+            utilities.verifyCSS(textSelectionPage.textSelectionModeLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold,
+            });
+            utilities.verifyCSS(textSelectionPage.textSelectionModeButtonLabel().eq(0), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.normal,
+            });
+            utilities.verifyCSS(textSelectionPage.textSelectionMode().eq(0).find('#Icon_awesome-i-cursor'), {
+                'fill': css.color.activeButtons,
+            });
+            utilities.verifyCSS(textSelectionPage.textSelectionModeButtonLabel().eq(1), {
+                'color': css.color.unselectedOptionText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.normal,
+            });
+            utilities.verifyCSS(textSelectionPage.specifyPossibleOptionsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold,
+            });
+        });
+
+        it('Accessibility of the text selection modes and specify possible option section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textSelectionPage.textSelectionModeLabel().parents('.text-selection-mode'));
+        });
+    });
+
+    describe('Specify possible options section: Paragraph', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.clearQuestionInputField();
+            paragraphTextArray.forEach((paragraphText) => {
+                textSelectionPage.steps.addInputToQuestionInputField(`${paragraphText}{enter}`);
+            });
+            textSelectionPage.steps.addInputToQuestionInputField('{backspace}');
+        });
+
+        it('User should be able to switch to \'Paragraph\' in text selection dropdown.', () => {
+            textSelectionPage.steps.switchTextSelectionMode('Paragraph');
+            textSelectionPage.steps.verifyTextSelectionModeIsSelected('Paragraph');
+        });
+
+        it('When user has selected \'Paragraph\' text selection mode, then \'Select all\' button should be displayed', () => {
+            textSelectionPage.steps.verifySelectAllOptionsButtonIsDisplayed();
+        });
+
+        it('When user has switched to \'Paragraph\' text selection type, the previously added input should be divided into available options as per \'Paragraph\' text selection type and all the options should be in deselected state', () => {
+            utilities.verifyElementCount(textSelectionPage.selectedOptionSpecifyPossibleOptions(), 0);
+            utilities.verifyElementCount(textSelectionPage.specifyCorrectAnswerTextSpans(), 3);
+            paragraphTextArray.forEach((paragraphText, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(textSelectionPage.specifyCorrectAnswerTextSpans(), index), paragraphText);
+                textSelectionPage.steps.verifyOptionIsNotSelectedInSpecifyPossibleOptionsSection(paragraphText);
+            });
+        });
+
+        it('The option count should be displayed as per the number of \'Paragraph\'.', () => {
+            textSelectionPage.steps.verifyOptionCounterTextAndValue(0);
+        });
+
+        it('When user clicks on an option, then the option should be selected and the option count should increase by 1.', () => {
+            textSelectionPage.steps.selectOptionInSpecifyPossibleOptionsSection('Paragraph', paragraphTextArray[0]);
+            textSelectionPage.steps.selectOptionInSpecifyPossibleOptionsSection('Paragraph', paragraphTextArray[1]);
+            textSelectionPage.steps.verifyOptionIsNotSelectedInSpecifyPossibleOptionsSection(paragraphTextArray[2]);
+            textSelectionPage.steps.verifyOptionCounterTextAndValue(2);
+            textSelectionPage.steps.verifySelectedStateOptionInSpecifyPossibleOptionSection(paragraphTextArray[0], 'blue');
+        });
+
+        it('When user clicks on a selected option, then that option should be deselected and option count should decrease by 1', () => {
+            textSelectionPage.steps.deselectOptionInSpecifyPossibleOptionsSection('Paragraph', paragraphTextArray[1]);
+            textSelectionPage.steps.verifyOptionCounterTextAndValue(1);
+        });
+
+        it('When the user hovers over the deselected option, then that option should be displayed in hover state', () => {
+            textSelectionPage.steps.verifyHoverStateOfDeselectedOptionInSpecifyPossibleOptionsSection(paragraphTextArray[2], 'blue');
+        });
+
+        //Clear button clear popup verification
+        it('When user clicks on \'Clear button\', Clear popup should be displayed with the text \'Are you sure you want to clear all options? This action will not delete template content but remove all options.\', Cancel and Confirm button', () => {
+            textSelectionPage.steps.clickOnClearOptionsButtonInSpecifyPossibleOptionSection();
+            textSelectionPage.steps.verifyClearPopupForClearingOptionSelection();
+        });
+
+        it('CSS of Clear popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(textSelectionPage.dialogBoxTitle().find('span'), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(textSelectionPage.dialogBoxContent(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(textSelectionPage.buttonAccept(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.primaryBtnBg
+            });
+            utilities.verifyCSS(textSelectionPage.buttonReject(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.secondaryBtnBg
+            });
+        });
+
+        it('Accessibility of Clear popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textSelectionPage.dialogBox());
+        });
+
+        it('When user clicks on \'Cancel\' button of the Clear popup, then the popup should be closed and the earlier state of selected options should persist', () => {
+            textSelectionPage.steps.clickOnRejectButtonInDialogBox();
+            utilities.verifyElementVisibilityState(textSelectionPage.dialogBox(), 'notExist');
+            textSelectionPage.steps.verifyOptionIsSelectedInSpecifyPossibleOptionsSection(paragraphTextArray[0]);
+            textSelectionPage.steps.verifyOptionIsSelectedInSpecifyPossibleOptionsSection(paragraphTextArray[1]);
+            textSelectionPage.steps.verifyOptionIsNotSelectedInSpecifyPossibleOptionsSection(paragraphTextArray[2]);
+        });
+
+        it('When user clicks on \'Confirm\' button of the Clear popup, then the popup should be closed and all the selected options should be deselected and the specify possible options field should be in errored state with the error message \'Error: Minimum one highlight option is required.\'', () => {
+            cy.log('Pre-step: Again clicking on Clear button to open Clear popup');
+            textSelectionPage.steps.clickOnClearOptionsButtonInSpecifyPossibleOptionSection();
+            textSelectionPage.steps.clickOnAcceptButtonInDialogBox();
+            for (let arrayIndex = 0; arrayIndex < paragraphTextArray.length; arrayIndex++) {
+                textSelectionPage.steps.verifyOptionIsNotSelectedInSpecifyPossibleOptionsSection(paragraphTextArray[arrayIndex]);
+            }
+            utilities.verifyInnerText(textSelectionPage.errorMessage(), 'Error: Minimum one highlight option is required.');
+            textSelectionPage.steps.verifyErroredStateOfSpecifyPossibleOptionsSection();
+        });
+
+        textSelectionPage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When user click on a deselected option, the option should be selected and the error message should disappear and option counter should display 1 count', () => {
+            textSelectionPage.steps.selectOptionInSpecifyPossibleOptionsSection('Paragraph', paragraphTextArray[0]);
+            utilities.verifyElementVisibilityState(textSelectionPage.errorMessage(), 'notExist');
+            textSelectionPage.steps.verifyOptionCounterTextAndValue(1);
+        });
+    });
+
+    describe('Specify possible options section: Sentence', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.clearQuestionInputField();
+            paragraphTextArray.forEach((paragraphText) => {
+                textSelectionPage.steps.addInputToQuestionInputField(`${paragraphText}{enter}`);
+            });
+            textSelectionPage.steps.addInputToQuestionInputField('{backspace}');
+        });
+
+        it('User should be able to switch to \'Sentence\' in text selection dropdown.', () => {
+            textSelectionPage.steps.switchTextSelectionMode('Sentence');
+        });
+
+        it('When user has selected \'Sentence\' text selection mode, then \'Select all\' button should be displayed', () => {
+            textSelectionPage.steps.verifySelectAllOptionsButtonIsDisplayed();
+        });
+
+        it('When user has switched to \'Sentence\' text selection type, the previously added input should be divided into options as per \'Sentence\' text selection type and all the options should be in deselected state', () => {
+            utilities.verifyElementCount(textSelectionPage.selectedOptionSpecifyPossibleOptions(), 0);
+            utilities.verifyElementCount(textSelectionPage.specifyCorrectAnswerTextSpans(), 4);
+            textSelectionPage.steps.verifyNumberOfOptionsInAParagraphInSpecifyPossibleOptionsSection(0, 2);
+            sentenceTextArray.forEach((sentenceText, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(textSelectionPage.specifyCorrectAnswerTextSpans(), index), sentenceText);
+                textSelectionPage.steps.verifyOptionIsNotSelectedInSpecifyPossibleOptionsSection(sentenceText);
+            });
+        });
+
+        it('The option count should be displayed as per the number of \'Sentence\'.', () => {
+            textSelectionPage.steps.verifyOptionCounterTextAndValue(0);
+        });
+
+        it('When user clicks on an option, then the option should be selected and the option count should increase by 1.', () => {
+            textSelectionPage.steps.selectOptionInSpecifyPossibleOptionsSection('Sentence', sentenceTextArray[0])
+            textSelectionPage.steps.selectOptionInSpecifyPossibleOptionsSection('Sentence', sentenceTextArray[1])
+            textSelectionPage.steps.verifyOptionIsNotSelectedInSpecifyPossibleOptionsSection(sentenceTextArray[2]);
+            textSelectionPage.steps.verifyOptionIsNotSelectedInSpecifyPossibleOptionsSection(sentenceTextArray[3]);
+            textSelectionPage.steps.verifyOptionCounterTextAndValue(2);
+            textSelectionPage.steps.verifySelectedStateOptionInSpecifyPossibleOptionSection(sentenceTextArray[0], 'blue');
+        });
+
+        it('When user clicks on a selected option, then that option should be deselected and option count should decrease by 1', () => {
+            textSelectionPage.steps.deselectOptionInSpecifyPossibleOptionsSection('Paragraph', sentenceTextArray[1]);
+            textSelectionPage.steps.verifyOptionCounterTextAndValue(1);
+        });
+
+        it('When the user hovers over the deselected option, then that option should be displayed in hover state', () => {
+            textSelectionPage.steps.verifyHoverStateOfDeselectedOptionInSpecifyPossibleOptionsSection(sentenceTextArray[2], 'blue');
+        });
+
+        it('When user clears all selected options with the \'Clear\' button, then all the selected options should be deselected and the specify possible options field should be in errored state with the error message \'Error: Minimum one highlight option is required.\'', () => {
+            textSelectionPage.steps.clearSelectedOptionsInSpecifyPossibleOptionSection();
+            utilities.verifyElementVisibilityState(textSelectionPage.selectedOptionSpecifyPossibleOptions(), 'notExist');
+            utilities.verifyInnerText(textSelectionPage.errorMessage(), 'Error: Minimum one highlight option is required.');
+            textSelectionPage.steps.verifyErroredStateOfSpecifyPossibleOptionsSection();
+        });
+
+        textSelectionPage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When user click on a deselected option, the option should be selected and the error message should disappear and option counter should display 1 count', () => {
+            textSelectionPage.steps.selectOptionInSpecifyPossibleOptionsSection('Sentence', sentenceTextArray[0])
+            utilities.verifyElementVisibilityState(textSelectionPage.errorMessage(), 'notExist');
+            textSelectionPage.steps.verifyOptionCounterTextAndValue(1);
+        });
+    });
+
+    describe('Specify possible options section: Word', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.clearQuestionInputField();
+            paragraphTextArray.forEach((paragraphText) => {
+                textSelectionPage.steps.addInputToQuestionInputField(`${paragraphText}{enter}`);
+            });
+            textSelectionPage.steps.addInputToQuestionInputField('{backspace}');
+        });
+
+        it('User should be able to switch to \'Word\' in text selection dropdown.', () => {
+            textSelectionPage.steps.switchTextSelectionMode('Word');
+        });
+
+        it('When user has selected \'Word\' text selection mode, then \'Select all\' button should be displayed', () => {
+            textSelectionPage.steps.verifySelectAllOptionsButtonIsDisplayed();
+        });
+
+        it('When user has switched to \'Word\' text selection type, the previously added input should be divided into options as per \'Word\' text selection type and all the options should be in deselected state', () => {
+            utilities.verifyElementCount(textSelectionPage.optionSpecifyCorrectAnswer(), 0);
+            utilities.verifyElementCount(textSelectionPage.specifyPossibleOptionsTextParagraphs(), 3);
+            utilities.verifyElementCount(textSelectionPage.specifyCorrectAnswerTextSpans(), 23);
+            textSelectionPage.steps.verifyNumberOfOptionsInAParagraphInSpecifyPossibleOptionsSection(0, 11);
+            textSelectionPage.steps.verifyNumberOfOptionsInAParagraphInSpecifyPossibleOptionsSection(1, 4);
+            textSelectionPage.steps.verifyNumberOfOptionsInAParagraphInSpecifyPossibleOptionsSection(2, 8);
+            wordTextArray.forEach((wordText, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(textSelectionPage.specifyCorrectAnswerTextSpans(), index), wordText);
+                textSelectionPage.steps.verifyOptionIsNotSelectedInSpecifyPossibleOptionsSection(wordText);
+            });
+        });
+
+        it('The option count should be displayed as per the number of \'Word\'.', () => {
+            textSelectionPage.steps.verifyOptionCounterTextAndValue(1);
+        });
+
+        it('When user clicks on an option, then the option should be selected and the option count should increase by 1.', () => {
+            textSelectionPage.steps.deselectOptionInSpecifyPossibleOptionsSection('Word', wordTextArray[0])
+            textSelectionPage.steps.deselectOptionInSpecifyPossibleOptionsSection('Word', wordTextArray[1])
+            for (let arrayIndex = 2; arrayIndex < wordTextArray.length; arrayIndex++) {
+                textSelectionPage.steps.verifyOptionIsNotSelectedInSpecifyPossibleOptionsSection(wordTextArray[arrayIndex]);
+            }
+            textSelectionPage.steps.verifyOptionCounterTextAndValue(2);
+            textSelectionPage.steps.verifySelectedStateOptionInSpecifyPossibleOptionSection(wordTextArray[0], 'blue');
+        });
+
+        it('When user clicks on a selected option, then that option should be deselected and option count should decrease by 1', () => {
+            textSelectionPage.steps.deselectOptionInSpecifyPossibleOptionsSection('Paragraph', wordTextArray[1]);
+            textSelectionPage.steps.verifyOptionCounterTextAndValue(1);
+        });
+
+        it('When the user hovers over the deselected option, then that option should be displayed in hover state', () => {
+            textSelectionPage.steps.verifyHoverStateOfDeselectedOptionInSpecifyPossibleOptionsSection(wordTextArray[2], 'blue');
+        });
+
+        it('When user clears all selected options with the \'Clear\' button, then all the selected options should be deselected and the specify possible options field should be in errored state with the error message \'Error: Minimum one highlight option is required.\'', () => {
+            textSelectionPage.steps.clearSelectedOptionsInSpecifyPossibleOptionSection();
+            for (let arrayIndex = 0; arrayIndex < sentenceTextArray.length; arrayIndex++) {
+                textSelectionPage.steps.verifyOptionIsNotSelectedInSpecifyPossibleOptionsSection(wordTextArray[arrayIndex]);
+            }
+            utilities.verifyInnerText(textSelectionPage.errorMessage(), 'Error: Minimum one highlight option is required.');
+            textSelectionPage.steps.verifyErroredStateOfSpecifyPossibleOptionsSection();
+        });
+
+        textSelectionPage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When user click on a deselected option, the option should be selected and the error message should disappear and option counter should display 1 count', () => {
+            textSelectionPage.steps.selectOptionInSpecifyPossibleOptionsSection('Word', wordTextArray[0]);
+            utilities.verifyElementVisibilityState(textSelectionPage.errorMessage(), 'notExist');
+            textSelectionPage.steps.verifyOptionCounterTextAndValue(1);
+        });
+    });
+});