itemengine-cypress-automation 1.0.189-e2e-execution-crash-83cdbd4.0 → 1.0.190-repoUpdate3May-f180558.0

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

@@ -0,0 +1,277 @@
+import { textSelectionPage } from "../../../pages";
+import { colorPopupComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const defaultColorBlocks = ['rgb(82, 0, 255)', 'rgb(0, 112, 128)', 'rgb(128, 102, 69)', 'rgb(102, 102, 102)', 'rgb(0, 0, 0)'];
+const paragraphTextArray = ['All animals have a unique role to play in maintaining the balance of nature.', 'A lot of animal species exist in both, land and water. As a result, each of them has a purpose for their existence.', 'The animals divide into specific groups in biology. Amphibians are those which can live on both, land and water.', 'Mammals are ones which give birth to their offspring in the womb and have mammary glands.'];
+
+describe('Create Item page - Text selection : Style and layout customization', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Style and layout customization accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+        });
+
+        textSelectionPage.tests.verifyStyleAndLayoutCustomizationAccordionProperties();
+    });
+
+    describe('Style and layout customization accordion - Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When filled in text selection mode is selected, then \'Filled-in style\' and \'Fill color\' labels should be displayed in style and layout customization accordion', () => {
+            utilities.verifyInnerText(textSelectionPage.filledInStyleLabel(), 'Filled-in style');
+            utilities.verifyElementVisibilityState(textSelectionPage.filledInStyleLabel(), 'visible');
+            utilities.verifyInnerText(textSelectionPage.fillColorLabel(), 'Fill color');
+            utilities.verifyElementVisibilityState(textSelectionPage.fillColorLabel(), 'visible');
+        });
+
+        it('5 color blocks and \'Edit color\' button should be displayed and the first blue color block should be selected', () => {
+            for (let index = 0; index < 5; index++) {
+                textSelectionPage.steps.verifyColorBlockBackgroundColor(index, defaultColorBlocks[index]);
+            }
+            utilities.verifyElementCount(textSelectionPage.colorBlock(), 5);
+            textSelectionPage.steps.verifyColorBlockIsSelected(0);
+        });
+
+        it('\'Change font color to white\' checkbox and label should be displayed and the checkbox should be checked', () => {
+            utilities.verifyInnerText(textSelectionPage.changeFontColorToWhiteCheckboxLabel(), 'Change font color to white');
+            utilities.verifyElementVisibilityState(textSelectionPage.changeFontColorToWhiteCheckboxLabel(), 'visible');
+            utilities.verifyElementVisibilityState(textSelectionPage.changeFontColorToWhiteCheckbox(), 'exist');
+            textSelectionPage.steps.verifyChangeFontColorToWhiteCheckboxIsChecked();
+        });
+
+        it('\'Edit color\' button should be displayed', () => {
+            utilities.verifyInnerText(textSelectionPage.editColorButton(), 'Edit color');
+            utilities.verifyElementVisibilityState(textSelectionPage.editColorButton(), 'visible');
+        });
+
+        it('CSS of style and layout customization accordion contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(textSelectionPage.filledInStyleLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(textSelectionPage.fillColorLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(textSelectionPage.editColorButton(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(textSelectionPage.changeFontColorToWhiteCheckboxLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(textSelectionPage.changeFontColorToWhiteCheckbox().parent().find('g').eq(1), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of style and layout customization accordion contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textSelectionPage.filledInStyleLabel().parents('.ngie-accordion-detail'));
+        });
+
+        it('When the user clicks on the edit color button in the accordion, a color popup should be displayed for the selected color block', () => {
+            textSelectionPage.steps.clickOnEditColorButton();
+            colorPopupComponent.steps.verifyColorPopupIsDisplayed();
+        });
+
+        it('A title \'Select color\' should be displayed on the color popup', () => {
+            colorPopupComponent.steps.verifyColorPopupSelectColorTitle();
+        });
+
+        it('A \'Color saturation palette\' should be displayed on the color popup along with a color picker and the color picker should be set on the selected color', () => {
+            colorPopupComponent.steps.verifyColorSaturationPaletteAndPicker();
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(255, 255, 255)');
+        });
+
+        it('A \'Color hue palette\' should be displayed on the color popup along with a color picker and the color picker should be set on the selected color', () => {
+            colorPopupComponent.steps.verifyColorHuePaletteAndPicker();
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+        });
+
+        it('A \'Selected color\' label and color block displaying the selected color should be displayed', () => {
+            colorPopupComponent.steps.verifySelectedColorLabelAndSelectedColorBlock();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(255, 255, 255)');
+        });
+
+        it('A \'Hex\' label and input field with pre-filled hex code value of the selected color should be displayed', () => {
+            colorPopupComponent.steps.verifyHexLabelAndInputField();
+            colorPopupComponent.steps.verifyHexValue('#ffffff');
+        });
+
+        it('\'Cancel\' and \'Ok\' buttons should be displayed', () => {
+            colorPopupComponent.steps.verifyColorPopupCancelButton();
+            colorPopupComponent.steps.verifyColorPopupOkButton();
+        });
+
+        it('CSS of color popup contents', { tags: 'css' }, () => {
+            const labels = [colorPopupComponent.selectedColorLabel, colorPopupComponent.hexLabel]
+            labels.forEach(label => {
+                utilities.verifyCSS(label(), {
+                    'color': css.color.labels,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.semibold
+                });
+            });
+            utilities.verifyCSS(colorPopupComponent.hexInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(colorPopupComponent.okButton(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.primaryBtnBg
+            });
+            utilities.verifyCSS(colorPopupComponent.cancelButton(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessibility of color popup contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textSelectionPage.dialogBoxContent());
+        });
+    });
+
+    describe('Color popup - Updating the selected color', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('When the user moves the color picker in the color saturation palette, color in the selected color block and the hex code should change, color in the hue color palette', () => {
+            textSelectionPage.steps.clickOnEditColorButton();
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(121, 60, 60)');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(119, 60, 60)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHexValue('#793c3c');
+        });
+
+        it('When the user moves the color picker in the color hue palette, color in the selected color block, the hex code and the saturation color palette should change', () => {
+            colorPopupComponent.steps.clickInColorHuePalette();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(60, 121, 121)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(0, 255, 255)');
+            colorPopupComponent.steps.verifyHexValue('#3c7979');
+        });
+
+        it('When the user changes the color using hex code, the color in color saturation palette and color hue palette should change', () => {
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.verifyHexValue('#ff0000');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+        });
+
+        it('When the user modifies the selected color block in the color popup and clicks on \'Cancel\' button, then the popup should close, the color block should not change and the modifications in the color popup should not persist', () => {
+            colorPopupComponent.steps.clickOnCancelButton();
+            utilities.verifyElementVisibilityState(textSelectionPage.dialogBox(), 'notExist');
+            textSelectionPage.steps.verifyColorBlockBackgroundColor(0, defaultColorBlocks[0]);
+        });
+
+        it('When the user modifies the selected color block in the color popup and clicks on \'Ok\' button, then the updated color should be applied to the previously selected color block and the rest of the color blocks should remain unchanged', () => {
+            textSelectionPage.steps.clickOnEditColorButton();
+            colorPopupComponent.steps.addInputToHexInputField('#558632');
+            colorPopupComponent.steps.clickOnOkButton();
+            utilities.verifyElementVisibilityState(textSelectionPage.dialogBox(), 'notExist');
+            textSelectionPage.steps.verifyColorBlockBackgroundColor(0, 'rgb(85, 134, 50)');
+            for (let index = 1; index < 5; index++) {
+                textSelectionPage.steps.verifyColorBlockBackgroundColor(index, defaultColorBlocks[index]);
+            }
+        })
+    });
+
+    describe('Selecting a different color block for filled in style and change font color to white checkbox - edit tab functionality', () => {
+        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');
+            textSelectionPage.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('User should be able to select a different color block and the newly selected color block\'s color should be applied to the hover and selected state of text selection in edit tab', () => {
+            textSelectionPage.steps.selectAColorBlock(2);
+            textSelectionPage.steps.verifyHoverStateOfDeselectedOptionInSpecifyPossibleOptionsSection(paragraphTextArray[0], 'brown');
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(paragraphTextArray[0]);
+            textSelectionPage.steps.verifySelectedStateOptionInSpecifyPossibleOptionSection(paragraphTextArray[0], 'brown');
+            textSelectionPage.steps.verifyHoverStateOfDeselectedOptionInSpecifyCorrectAnswerSection(paragraphTextArray[0], 'brown');
+            textSelectionPage.steps.clickOnOptionInSpecifyCorrectAnswerSection(paragraphTextArray[0]);
+            textSelectionPage.steps.verifySelectedStateOptionInSpecifyCorrectAnswerSection(paragraphTextArray[0], 'brown');
+        });
+
+        //Checked state is covered in above test case
+        it('When \'Change font color to white\' checkbox is unchecked, then the font color of the selected option should not change to white and remain the same', () => {
+            textSelectionPage.steps.uncheckChangeFontColorToWhiteCheckbox();
+            utilities.verifyCSS(textSelectionPage.selectedOptionSpecifyPossibleOptions(), {
+                'color': css.color.text
+            });
+            utilities.verifyCSS(textSelectionPage.optionSpecifyCorrectAnswer(), {
+                'color': css.color.text
+            });
+        });
+    });
+
+    describe('Selecting a different color block for filled in style and change font color to white checkbox - preview tab functionality', () => {
+        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');
+            textSelectionPage.steps.clickOnOptionInSpecifyPossibleOptionsSection(paragraphTextArray[0]);
+            textSelectionPage.steps.clickOnOptionInSpecifyCorrectAnswerSection(paragraphTextArray[0]);
+            textSelectionPage.steps.allotPoints(10);
+            textSelectionPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            textSelectionPage.steps.selectAColorBlock(3);
+            textSelectionPage.steps.switchToPreviewTab();
+        });
+
+        it('The newly selected color block\'s color should be applied to the hover and selected state of text selection in preview tab', () => {
+            textSelectionPage.steps.verifyHoverStateOfOptionInPreviewTab(paragraphTextArray[0], 'grey');
+            textSelectionPage.steps.selectOptionInPreviewTab(paragraphTextArray[0]);
+            textSelectionPage.steps.verifySelectedStateOptionInPreviewTab(paragraphTextArray[0], 'grey');
+        });
+
+        //Checked state is covered in above test case
+        it('When \'Change font color to white\' checkbox is unchecked, then the font color of the selected option should not change to white and remain the same', () => {
+            textSelectionPage.steps.switchToEditTab();
+            textSelectionPage.steps.uncheckChangeFontColorToWhiteCheckbox();
+            textSelectionPage.steps.switchToPreviewTab();
+            utilities.verifyCSS(textSelectionPage.optionPreviewTab(), {
+                'color': css.color.text
+            });
+        });
+    });
+});

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

@@ -0,0 +1,222 @@
+import { textSelectionPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const paragraphTextArray = ['Horses are not able to 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 are not able to 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', 'are', 'not', 'able', 'to', '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 Preview tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Preview tab: 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}');
+            textSelectionPage.steps.selectOptionInSpecifyPossibleOptionsSection('Custom', customTextArray[0]);
+            textSelectionPage.steps.selectOptionInSpecifyPossibleOptionsSection('Custom', customTextArray[1]);
+            textSelectionPage.steps.selectOptionInSpecifyPossibleOptionsSection('Custom', customTextArray[2]);
+            textSelectionPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Custom\' text selection type is selected, then in preview tab options should be provided as defined in specify possible options section', () => {
+            utilities.verifyElementCount(textSelectionPage.previewTabQuestionTextParagraphs(), 3);
+            utilities.verifyElementCount(textSelectionPage.previewTabQuestionTextSpans(), 3);
+            textSelectionPage.steps.verifyOptionInPreviewTab(customTextArray);
+        });
+
+        it('When the user hovers over the provided option in preview tab, then that option should be displayed in hover state', () => {
+            textSelectionPage.steps.verifyHoverStateOfOptionInPreviewTab(customTextArray[0], 'blue');
+        });
+
+        it('When user clicks on the provided option in preview tab, then the option should be selected ', () => {
+            textSelectionPage.steps.selectOptionInPreviewTab(customTextArray[0]);
+            textSelectionPage.steps.selectOptionInPreviewTab(customTextArray[1]);
+            textSelectionPage.steps.verifySelectedStateOptionInPreviewTab(customTextArray[0], 'blue');
+        });
+
+        it('When user clicks on the selected option in preview tab, then the option should be deselected ', () => {
+            textSelectionPage.steps.deselectOptionInPreviewTab(customTextArray[1]);
+        });
+
+        it('CSS of the option in deselected state in preview tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(textSelectionPage.optionPreviewTab().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 preview tab', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textSelectionPage.optionPreviewTab().parents('.highlight-preview-wrapper'));
+        });
+    });
+
+    describe('Preview tab: 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');
+            paragraphTextArray.forEach((paragraphText) => {
+                textSelectionPage.steps.selectOptionInSpecifyPossibleOptionsSection('Paragraph', paragraphText);
+            });
+            textSelectionPage.steps.deselectOptionInSpecifyPossibleOptionsSection('Paragraph', paragraphTextArray[2]);
+            textSelectionPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Paragraph\' text selection type is selected, then in preview tab options should be provided as defined in specify possible options section', () => {
+            utilities.verifyElementCount(textSelectionPage.previewTabQuestionTextParagraphs(), 3);
+            utilities.verifyElementCount(textSelectionPage.previewTabQuestionTextSpans(), 3);
+            textSelectionPage.steps.verifyOptionInPreviewTab([paragraphTextArray[0], paragraphTextArray[1]]);
+        });
+
+        it('When the user hovers over the provided option in preview tab, then that option should be displayed in hover state', () => {
+            textSelectionPage.steps.verifyHoverStateOfOptionInPreviewTab(paragraphTextArray[0], 'blue');
+        });
+
+        it('When user clicks on the provided option in preview tab, then the option should be selected ', () => {
+            textSelectionPage.steps.selectOptionInPreviewTab(paragraphTextArray[0]);
+            textSelectionPage.steps.selectOptionInPreviewTab(paragraphTextArray[1]);
+            textSelectionPage.steps.verifySelectedStateOptionInPreviewTab(paragraphTextArray[0], 'blue');
+        });
+
+        it('When user clicks on the selected option in preview tab, the option should then be deselected', () => {
+            textSelectionPage.steps.deselectOptionInPreviewTab(paragraphTextArray[1]);
+        });
+
+        it('CSS of the option in deselected state in preview tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(textSelectionPage.optionPreviewTab().contains(paragraphTextArray[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 preview tab', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textSelectionPage.optionPreviewTab().parents('.highlight-preview-wrapper'));
+        });
+    });
+
+    describe('Preview tab: 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');
+            sentenceTextArray.forEach((sentenceText) => {
+                textSelectionPage.steps.selectOptionInSpecifyPossibleOptionsSection('Sentence', sentenceText);
+            });
+            textSelectionPage.steps.deselectOptionInSpecifyPossibleOptionsSection('Sentence', sentenceTextArray[3]);
+            textSelectionPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Sentence\' text selection type is selected, then in preview tab options should be provided as defined in specify possible options section', () => {
+            utilities.verifyElementCount(textSelectionPage.previewTabQuestionTextParagraphs(), 3);
+            utilities.verifyElementCount(textSelectionPage.previewTabQuestionTextSpans(), 4);
+            textSelectionPage.steps.verifyOptionInPreviewTab([sentenceTextArray[0], sentenceTextArray[1], sentenceTextArray[2]]);
+        });
+
+        it('When the user hovers over the provided option in preview tab, then that option should be displayed in hover state', () => {
+            textSelectionPage.steps.verifyHoverStateOfOptionInPreviewTab(sentenceTextArray[1], 'blue');
+        });
+
+        it('When user clicks on the provided option in preview tab, then the option should be selected ', () => {
+            textSelectionPage.steps.selectOptionInPreviewTab(sentenceTextArray[0]);
+            textSelectionPage.steps.selectOptionInPreviewTab(sentenceTextArray[1]);
+            textSelectionPage.steps.verifySelectedStateOptionInPreviewTab(sentenceTextArray[0], 'blue');
+        });
+
+        it('When user clicks on the selected option in preview tab, the option should then be deselected', () => {
+            textSelectionPage.steps.deselectOptionInPreviewTab(sentenceTextArray[1]);
+        });
+
+        it('CSS of the option in selected and deselected state in preview tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(textSelectionPage.optionPreviewTab().contains(sentenceTextArray[2]), {
+                '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 preview tab', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textSelectionPage.optionPreviewTab().parents('.highlight-preview-wrapper'));
+        });
+    });
+
+    describe('Preview tab: 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');
+            wordTextArray.forEach((wordText) => {
+                textSelectionPage.steps.selectOptionInSpecifyPossibleOptionsSection('Sentence', wordText);
+            });
+            textSelectionPage.steps.deselectOptionInSpecifyPossibleOptionsSection('Word', wordTextArray[25]);
+            textSelectionPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Word\' text selection type is selected, then in preview tab options should be provided as per selection defined in preview tab', () => {
+            utilities.verifyElementCount(textSelectionPage.previewTabQuestionTextParagraphs(), 3);
+            utilities.verifyElementCount(textSelectionPage.previewTabQuestionTextSpans(), 26);
+            let setCorrectAnswerOptionArray = wordTextArray.slice(0, -1);
+            textSelectionPage.steps.verifyOptionInPreviewTab(setCorrectAnswerOptionArray);
+        });
+
+        it('When the user hovers over the provided option in preview tab, then that option should be displayed in hover state', () => {
+            textSelectionPage.steps.verifyHoverStateOfOptionInPreviewTab(wordTextArray[1], 'blue');
+        });
+
+        it('When user clicks on the provided option in preview tab, then the option should be selected ', () => {
+            textSelectionPage.steps.selectOptionInPreviewTab(wordTextArray[1]);
+            textSelectionPage.steps.selectOptionInPreviewTab(wordTextArray[2]);
+            textSelectionPage.steps.verifySelectedStateOptionInPreviewTab(wordTextArray[1], 'blue');
+        });
+
+        it('When user clicks on the selected option in preview tab, the option should then be deselected', () => {
+            textSelectionPage.steps.deselectOptionInPreviewTab(wordTextArray[2]);
+        });
+
+        it('CSS of the option in selected and deselected state in preview tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(textSelectionPage.optionPreviewTab().contains(wordTextArray[11]), {
+                '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 preview tab', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textSelectionPage.optionPreviewTab().parents('.highlight-preview-wrapper'));
+        });
+    });
+});