itemengine-cypress-automation 1.0.51 → 1.0.62

package/cypress/e2e/ILC/Highlight/highlightSetCorrectAnswerSection.js

@@ -0,0 +1,204 @@
+import { highlightPage } from "../../../pages/highlightPage";
+import utilities from "../../../support/helpers/utilities";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+
+const paragraphTextArray = ['Horses cannot breath through their mouth. Cows can sleep standing up.', 'Dogs have excellent hearing.', 'Deers possess nearly 300 degree field of vision.'];
+
+describe('Create Item page - Highlight: Set correct answer, Alternate correct answer - Edit tab cases', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight question type, switch to paragraph text selection');
+            highlightPage.steps.navigateToCreateQuestion('highlight');
+            cy.barsPreLoaderWait();
+            highlightPage.steps.clearQuestionInputField();
+            paragraphTextArray.forEach((paragraphText) => {
+                highlightPage.steps.addInputToQuestionInputField(`${paragraphText}{enter}`);
+            });
+            highlightPage.steps.addInputToQuestionInputField('{backspace}');
+            highlightPage.steps.switchTextSelectionTypeInTextSelectionDropdown('Paragraph');
+        });
+
+        highlightPage.tests.verifyAutoScoredSetCorrectAnswerHeaderSectionContents('highlight');
+
+        it('When user clicks on add alternate answer button without allotting points in the \'Set correct answer\' then a warning popup should be displayed', () => {
+            highlightPage.steps.clickOnAddAlternateAnswerButton();
+            utilities.verifyElementVisibilityState(highlightPage.dialogBox(), 'exist');
+        });
+
+        it('When user closes the warning popup \'Error: Please enter points\' and \'Error: Please set correct answer\' error message should be displayed', () => {
+            highlightPage.steps.closeWarningPopup();
+            highlightPage.steps.verifyPointsFieldErrorMessage()
+            highlightPage.steps.verifySetCorrectAnswerSectionErrorMessage()
+            highlightPage.steps.verifySetCorrectAnswerErrorIconIsDisplayed();
+        });
+
+        it('When user allots points and sets correct answer then the error messages and error icon should disappear', () => {
+            highlightPage.steps.allotPoints(10);
+            highlightPage.steps.selectOptionInSetCorrectAnswerSection(paragraphTextArray[2]);
+            highlightPage.steps.verifySetCorrectAnswerErrorIconIsNotDisplayed();
+            highlightPage.steps.verifyErrorMessageIsNotDisplayed();
+            cy.log('Post step: Clear points field')
+            highlightPage.steps.clearPointsField();
+        });
+
+        highlightPage.tests.verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty('Correct tab');
+    });
+
+    describe('Alternate correct answer', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to highlight question type, switch to paragraph text selection');
+            highlightPage.steps.navigateToCreateQuestion('highlight');
+            cy.barsPreLoaderWait();
+            highlightPage.steps.clearQuestionInputField();
+            paragraphTextArray.forEach((paragraphText) => {
+                highlightPage.steps.addInputToQuestionInputField(`${paragraphText}{enter}`);
+            });
+            highlightPage.steps.addInputToQuestionInputField('{backspace}');
+            highlightPage.steps.switchTextSelectionTypeInTextSelectionDropdown('Paragraph');
+        });
+
+        highlightPage.tests.verifyAutoScoredAlternateAnswer('highlight');
+
+        it('When the user allots points to the \'Correct tab\' and selects correct answer option in the \'Set correct answer\' section then on clicking the \'Alternate tab\' button an alternate tab should be added', () => {
+            highlightPage.steps.allotPoints(10);
+            highlightPage.steps.selectOptionInSetCorrectAnswerSection(paragraphTextArray[2]);
+            highlightPage.steps.verifyErrorMessageIsNotDisplayed();
+            highlightPage.steps.verifySetCorrectAnswerErrorIconIsNotDisplayed();
+            highlightPage.steps.addAlternateTab(1);
+        });
+
+        it('When the user adds an alternate tab then the options should be displayed in the set correct answer section', () => {
+            highlightPage.steps.verifyOptionsInSetCorrectAnswerSection(paragraphTextArray);
+        });
+
+        it('CSS of Alternate correct answer tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(highlightPage.alternateAnswerTab(1), {
+                'color': css.color.secondaryBtnActive,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            cy.log('CSS of inactive Correct answer tab')
+            utilities.verifyCSS(highlightPage.correctTab(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+        });
+
+        it('Accessibility of alternate correct answer tab', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightPage.correctTab().parents('[class*="AlternatePointsComponentstyles__AnswerTabWrapper"]'));
+        });
+
+        it('User should be able set correct answer in the \'Alternate tab\'s', () => {
+            highlightPage.steps.allotPoints(5)
+            highlightPage.steps.selectOptionInSetCorrectAnswerSection(paragraphTextArray[1]);
+        });
+
+        it('When user switches to the \'Correct tab\' from the \'Alternate tab\' the selected options in the \'Correct tab\' should remain the same', () => {
+            highlightPage.steps.navigateToCorrectTab();
+            highlightPage.steps.verifyOptionIsNotSelectedInSetCorrectAnswerSection(paragraphTextArray[0]);
+            highlightPage.steps.verifyOptionIsNotSelectedInSetCorrectAnswerSection(paragraphTextArray[1]);
+            highlightPage.steps.verifyOptionIsSelectedInSetCorrectAnswerSection(paragraphTextArray[2]);
+        });
+
+        it('When user clicks on \'Add Alternate Answer\' button a new tab should be added with the name \'Alternate 2\' and appropriate options should be displayed in the set correct answer section', () => {
+            highlightPage.steps.addAlternateTab(2);
+            highlightPage.steps.verifyOptionsInSetCorrectAnswerSection(paragraphTextArray);
+        });
+
+        highlightPage.tests.verifyWarningPopupAndTabNavigationWhenNoPointsAddedInAlternateTab();
+
+        it('When the user clicks on the \'Close\' button alongside alternate answer tab, alternate answer tab should get removed and the name of the alternate answer tabs should get updated and correct answers should be displayed accordingly', () => {
+            cy.log('Set correct answer and points in alternate 2 tab, then switch to Alternate 1 tab and click delete icon button');
+            highlightPage.steps.allotPoints(2);
+            highlightPage.steps.selectOptionInSetCorrectAnswerSection(paragraphTextArray[0]);
+            highlightPage.steps.navigateToAlternateTab(1);
+            highlightPage.steps.deleteAlternateTab();
+            utilities.verifyElementVisibilityState(highlightPage.alternateAnswerTab(2), 'notExist');
+            utilities.verifyInnerText(highlightPage.alternateAnswerTab(1), 'Alternate 1')
+            highlightPage.steps.verifyOptionIsSelectedInSetCorrectAnswerSection(paragraphTextArray[0]);
+        });
+
+        it('When user deletes/edits a selected correct option in the question field, then \'Reset\' Popup should be displayed with the text \'Are you sure you want to edit the question? This action will reset any existing highlight options, including valid responses and alternate response values.\', Cancel and Confirm button', () => {
+            highlightPage.steps.addInputToQuestionInputField('{backspace}{backspace}{backspace}');
+            utilities.verifyElementVisibilityState(highlightPage.dialogBox(), 'visible');
+            utilities.verifyInnerText(highlightPage.dialogBoxTitle(), 'Reset');
+            utilities.verifyInnerText(highlightPage.dialogBoxContent(), 'Are you sure you want to edit the question? This action will reset any existing highlight options, including valid responses and alternate response values.');
+            utilities.verifyInnerText(highlightPage.buttonReject(), 'Cancel');
+            utilities.verifyInnerText(highlightPage.buttonAccept(), 'Confirm');
+        });
+
+        it('CSS of Reset popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(highlightPage.dialogBoxTitle().find('span'), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(highlightPage.dialogBoxContent(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(highlightPage.buttonAccept(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.primaryBtnBg
+            });
+            utilities.verifyCSS(highlightPage.buttonReject(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.secondaryBtnBg
+            });
+        });
+
+        it('Accessibility of Reset popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightPage.dialogBox());
+        });
+
+        it('When user clicks on \'Cancel\' button of the Reset popup, then the popup should be closed, the text in the question field should not be changed, the previously selected options in the set correct answer section for both correct and alternate tab should persist and no error message and error icon should be displayed', () => {
+            highlightPage.steps.clickOnRejectButtonInDialogBox();
+            utilities.verifyElementVisibilityState(highlightPage.dialogBox(), 'notExist');
+            utilities.verifyInnerText(highlightPage.questionInputField(), 'Horses cannot breath through their mouth. Cows can sleep standing up.\n\nDogs have excellent hearing.\n\nDeers possess nearly 300 degree field of vision.');
+            cy.log('For alternate answer tab');
+            highlightPage.steps.verifyOptionIsSelectedInSetCorrectAnswerSection(paragraphTextArray[0]);
+            utilities.verifyElementVisibilityState(highlightPage.errorMessage(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightPage.setCorrectAnswerErrorIcon(), 'notExist');
+            cy.log('For correct answer tab');
+            highlightPage.steps.navigateToCorrectTab();
+            highlightPage.steps.verifyOptionIsSelectedInSetCorrectAnswerSection(paragraphTextArray[2]);
+            utilities.verifyElementVisibilityState(highlightPage.errorMessage(), 'notExist');
+            utilities.verifyElementVisibilityState(highlightPage.setCorrectAnswerErrorIcon(), 'notExist');
+        });
+
+        it('When user clicks on \'Confirm\' button of the Reset popup, then the popup should be closed, the text in the question field should be changed, the previously selected options in the set correct answer section should not persist i.e. all options should be deselected in both correct and alternate tab and error message \'Error: Please set a correct answer\' and error icon over the correct/alternate tab should be displayed', () => {
+            cy.log('Pre-step: Editing the text in question input field to again open the reset popup');
+            highlightPage.steps.addInputToQuestionInputField('{backspace}{backspace}{backspace}');
+            utilities.verifyElementVisibilityState(highlightPage.dialogBox(), 'visible');
+            highlightPage.steps.clickOnAcceptButtonInDialogBox();
+            utilities.verifyElementVisibilityState(highlightPage.dialogBox(), 'notExist');
+            utilities.verifyInnerText(highlightPage.questionInputField(), 'Horses cannot breath through their mouth. Cows can sleep standing up.\n\nDogs have excellent hearing.\n\nDeers possess nearly 300 degree field of visi');
+            cy.log('For correct answer tab');
+            paragraphTextArray.forEach((paragraphText) => {
+                highlightPage.steps.verifyOptionIsNotSelectedInSetCorrectAnswerSection(paragraphText);
+            });
+            utilities.verifyInnerText(highlightPage.errorMessage(), 'Error: Please set a correct answer.');
+            utilities.verifyElementVisibilityState(highlightPage.setCorrectAnswerErrorIcon(), 'visible');
+            cy.log('Pre-step: Selecting an option in correct tab to navigate to alternate answer tab');
+            highlightPage.steps.selectOptionInSetCorrectAnswerSection(paragraphTextArray[2]);
+            highlightPage.steps.navigateToAlternateTab(1);
+            paragraphTextArray.forEach((paragraphText) => {
+                highlightPage.steps.verifyOptionIsNotSelectedInSetCorrectAnswerSection(paragraphText);
+            });
+            utilities.verifyInnerText(highlightPage.errorMessage(), 'Error: Please set a correct answer.');
+            utilities.verifyElementVisibilityState(highlightPage.setCorrectAnswerErrorIcon(), 'visible');
+        });
+    });
+});

package/cypress/e2e/ILC/Highlight/highlightTextSelectionDropdownAndHighlightOptionsSection.js

@@ -0,0 +1,175 @@
+import { highlightPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create Item page - Highlight: Text selection label and dropdown and Highlight Options section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Text selection label and dropdown', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight question type');
+            highlightPage.steps.navigateToCreateQuestion('highlight');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Text selection\' label should be displayed and dropdown should be displayed and in \'Text selection\' dropdown \'Any\' option should be selected by default', () => {
+            utilities.verifyInnerText(highlightPage.textSelectionLabel(), 'Text selection');
+            utilities.verifyInnerText(highlightPage.textSelectionDropdown(), 'Any');
+        });
+
+        it('Clicking on Text selection dropdown should open a list of selection types - Any, Paragraph, Sentence, Word and on clicking outside the dropdown, the dropdown menu should close', () => {
+            highlightPage.steps.expandTextSelectionDropdown();
+            highlightPage.steps.verifyTextSelectionDropdownList();
+            highlightPage.steps.closeTextSelectionDropdown();
+        });
+
+        it('CSS of Text selection label and dropdown in Active state', { tags: 'css' }, () => {
+            cy.log('Pre step: Clicking on Text selection dropdown')
+            highlightPage.steps.expandTextSelectionDropdown();
+            utilities.verifyCSS(highlightPage.textSelectionLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(highlightPage.textSelectionDropdownListOptions().eq(0), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            });
+            utilities.verifyCSS(highlightPage.textSelectionDropdownListOptions().eq(1), {
+                'background-color': css.color.transparent
+            });
+            cy.log('Post step: Closing the Text selection dropdown')
+            highlightPage.steps.closeTextSelectionDropdown();
+        });
+
+        it('Accessibility of Text selection dropdown in active state', { tags: 'a11y' }, () => {
+            cy.log('Pre step: Clicking on Text selection dropdown')
+            highlightPage.steps.expandTextSelectionDropdown();
+            cy.checkAccessibility(highlightPage.textSelectionDropdownList());
+            cy.log('Post step: Closing the Text selection dropdown')
+            highlightPage.steps.closeTextSelectionDropdown();
+        });
+
+        //Reset confirmation popup for changing text selection type
+        it('When user switches to \'Paragraph\' in text selection dropdown, then Reset popup should be displayed with the text \'Applying Paragraph text selection will reset any existing highlight options, including valid responses and alternate response values.\', Cancel and Confirm button', () => {
+            highlightPage.steps.expandTextSelectionDropdown();
+            highlightPage.steps.selectDropdownOptionInTextSelectionDropdown('Paragraph');
+            highlightPage.steps.verifyResetPopupForSwitchingTextSelectionType('Paragraph');
+        });
+
+        it('CSS of Reset popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(highlightPage.dialogBoxTitle().find('span'), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(highlightPage.dialogBoxContent(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(highlightPage.dialogBoxContent().find('span'), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(highlightPage.buttonAccept(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.primaryBtnBg
+            });
+            utilities.verifyCSS(highlightPage.buttonReject(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.secondaryBtnBg
+            });
+        });
+
+        it('Accessibility of Reset popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightPage.dialogBox());
+        });
+
+        it('When user clicks on \'Cancel\' button of the Reset popup, then the popup should be closed and the text selection \'Any\' should persist in the text selection dropdown', () => {
+            highlightPage.steps.clickOnRejectButtonInDialogBox();
+            utilities.verifyElementVisibilityState(highlightPage.dialogBox(), 'notExist');
+            utilities.verifyInnerText(highlightPage.textSelectionDropdown(), 'Any');
+        });
+
+
+        it('When user clicks on \'Confirm\' button of the Reset popup, then the popup should be closed and \'Paragraph\' should be displayed in text selection dropdown', () => {
+            cy.log('Pre-step: Switching text selection type to open Reset popup');
+            highlightPage.steps.expandTextSelectionDropdown();
+            highlightPage.steps.selectDropdownOptionInTextSelectionDropdown('Paragraph');
+            highlightPage.steps.clickOnAcceptButtonInDialogBox();
+            utilities.verifyElementVisibilityState(highlightPage.dialogBox(), 'notExist');
+            utilities.verifyInnerText(highlightPage.textSelectionDropdown(), 'Paragraph');
+        });
+    });
+
+    describe('Highlight Options section', () => {
+        abortEarlySetup();
+        before(() => {
+            highlightPage.steps.navigateToCreateQuestion('highlight');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Highlight options\' label and field with Highlight counter, \'Colour library\' and \'Clear\' buttons should be displayed and by default in the \'Highlight options\' field, sample \'Lorem Ipsum\' text should be present and the Highlight counter should be 0', () => {
+            utilities.verifyInnerText(highlightPage.highlightOptionsLabel(), 'Highlight options');
+            utilities.verifyInnerText(highlightPage.highlightOptionsSectionTextWrapper(), 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n\n \n\nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n\n \n\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.');
+            highlightPage.steps.verifyHighlightCounterTextAndValue(0);
+        });
+
+        it('\'Colour library\' and \'Clear\' buttons should be displayed', () => {
+            highlightPage.steps.verifyColorLibraryButton();
+            highlightPage.steps.verifyClearHighlightButton();
+        });
+
+        it('CSS of Highlight Options section, Colour library button and Clear Button', { tags: 'css' }, () => {
+            utilities.verifyCSS(highlightPage.highlightOptionsLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(highlightPage.colorLibraryButton(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.medium
+            });
+            utilities.verifyCSS(highlightPage.colorLibraryButton().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(highlightPage.clearHighlightButton(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.medium
+            });
+            utilities.verifyCSS(highlightPage.clearHighlightButton().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(highlightPage.highlightOptionsTextFieldWrapper(), {
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`
+            });
+            utilities.verifyCSS(highlightPage.highlightOptionsHighlightCounter(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular,
+                'background-color': `${css.color.figActiveComponentBg}`,
+                'border-top': `1px solid ${css.color.figDefaultComponentBorder}`,
+                'border-left': `1px solid ${css.color.figDefaultComponentBorder}`
+            });
+        });
+
+        it('Accessibility of Highlight Options section, Colour library button and Clear Button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(highlightPage.highlightOptionsLabel().parents('.title-button-wrapper'));
+            cy.checkAccessibility(highlightPage.highlightOptionsTextFieldWrapper());
+        });
+    });
+});

package/cypress/e2e/ILC/Highlight/highlightTextSelectionTypeInPreviewTab.js

@@ -0,0 +1,237 @@
+import { highlightPage } 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 anySelectionArray = ['Cows can sleep', 'Dogs have e#cellent \'hearing\'', 'nearly, 300 degree field of vision.'];
+
+
+describe('Create Item page - Highlight: Text selection types in Preview tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Preview tab: Any', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight question type');
+            highlightPage.steps.navigateToCreateQuestion('highlight');
+            cy.barsPreLoaderWait();
+            highlightPage.steps.clearQuestionInputField();
+            paragraphTextArray.forEach((paragraphText) => {
+                highlightPage.steps.addInputToQuestionInputField(`${paragraphText}{enter}`);
+            });
+            highlightPage.steps.addInputToQuestionInputField('{backspace}');
+            highlightPage.steps.selectOptionInHighlightOptionsSection('Any', anySelectionArray[0]);
+            highlightPage.steps.selectOptionInHighlightOptionsSection('Any', anySelectionArray[1]);
+            highlightPage.steps.selectOptionInHighlightOptionsSection('Any', anySelectionArray[2]);
+            highlightPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Any\' text selection type is selected, then in preview tab options should be provided as defined in highlight options section', () => {
+            utilities.verifyElementCount(highlightPage.previewTabParagraphs(), 3);
+            highlightPage.steps.verifyOptionInPreviewTab(anySelectionArray);
+        });
+
+        it('When the user hovers over the provided option in preview tab, then that option should be displayed in hover state', () => {
+            highlightPage.steps.verifyHoverStateOfOptionInPreviewTab(anySelectionArray[0]);
+        });
+
+        it('When user clicks on the provided option in preview tab, then the option should be selected ', () => {
+            highlightPage.steps.selectOptionInPreviewTab(anySelectionArray[0]);
+        });
+
+        it('CSS of the option in selected and deselected state in preview tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(highlightPage.previewTabOption().contains(anySelectionArray[0]), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.figActiveComponentBg,
+                'border': `1px solid ${css.color.activeComponentBorder}`
+            });
+            utilities.verifyCSS(highlightPage.previewTabOption().contains(anySelectionArray[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(highlightPage.previewTabOption().parents('.highlight-preview-wrapper'));
+        });
+
+        it('When user clicks on the selected option in preview tab, the option should then be deselected', () => {
+            highlightPage.steps.deselectOptionInPreviewTab(anySelectionArray[0]);
+        });
+    });
+
+    describe('Preview tab: Paragraph', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight question type');
+            highlightPage.steps.navigateToCreateQuestion('highlight');
+            cy.barsPreLoaderWait();
+            highlightPage.steps.clearQuestionInputField();
+            paragraphTextArray.forEach((paragraphText) => {
+                highlightPage.steps.addInputToQuestionInputField(`${paragraphText}{enter}`);
+            });
+            highlightPage.steps.addInputToQuestionInputField('{backspace}');
+            highlightPage.steps.switchTextSelectionTypeInTextSelectionDropdown('Paragraph');
+            highlightPage.steps.deselectOptionInHighlightOptionsSection('Paragraph', paragraphTextArray[2]);
+            highlightPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Paragraph\' text selection type is selected, then in preview tab options should be provided as defined in highlight options section', () => {
+            utilities.verifyElementCount(highlightPage.previewTabParagraphs(), 3);
+            utilities.verifyElementCount(highlightPage.previewTabSpans(), 3);
+            highlightPage.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', () => {
+            highlightPage.steps.verifyHoverStateOfOptionInPreviewTab(paragraphTextArray[0]);
+        });
+
+        it('When user clicks on the provided option in preview tab, then the option should be selected ', () => {
+            highlightPage.steps.selectOptionInPreviewTab(paragraphTextArray[0]);
+        });
+
+        it('CSS of the option in selected and deselected state in preview tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(highlightPage.previewTabOption().contains(paragraphTextArray[0]), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.figActiveComponentBg,
+                'border': `1px solid ${css.color.activeComponentBorder}`
+            });
+            utilities.verifyCSS(highlightPage.previewTabOption().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(highlightPage.previewTabOption().parents('.highlight-preview-wrapper'));
+        });
+
+        it('When user clicks on the selected option in preview tab, the option should then be deselected', () => {
+            highlightPage.steps.deselectOptionInPreviewTab(paragraphTextArray[0]);
+        });
+    });
+
+    describe('Preview tab: Sentence', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight question type');
+            highlightPage.steps.navigateToCreateQuestion('highlight');
+            cy.barsPreLoaderWait();
+            highlightPage.steps.clearQuestionInputField();
+            paragraphTextArray.forEach((paragraphText) => {
+                highlightPage.steps.addInputToQuestionInputField(`${paragraphText}{enter}`);
+            });
+            highlightPage.steps.addInputToQuestionInputField('{backspace}');
+            highlightPage.steps.switchTextSelectionTypeInTextSelectionDropdown('Sentence');
+            highlightPage.steps.deselectOptionInHighlightOptionsSection('Sentence', sentenceTextArray[0]);
+            highlightPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Sentence\' text selection type is selected, then in preview tab options should be provided as defined in highlight options section', () => {
+            utilities.verifyElementCount(highlightPage.previewTabParagraphs(), 3);
+            utilities.verifyElementCount(highlightPage.previewTabOption(), 3);
+            highlightPage.steps.verifyOptionInPreviewTab([sentenceTextArray[1], sentenceTextArray[2], sentenceTextArray[3]]);
+        });
+
+        it('When the user hovers over the provided option in preview tab, then that option should be displayed in hover state', () => {
+            highlightPage.steps.verifyHoverStateOfOptionInPreviewTab(sentenceTextArray[1]);
+        });
+
+        it('When user clicks on the provided option in preview tab, then the option should be selected ', () => {
+            highlightPage.steps.selectOptionInPreviewTab(sentenceTextArray[1]);
+        });
+
+        it('CSS of the option in selected and deselected state in preview tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(highlightPage.previewTabOption().contains(sentenceTextArray[1]), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.figActiveComponentBg,
+                'border': `1px solid ${css.color.activeComponentBorder}`
+            });
+            utilities.verifyCSS(highlightPage.previewTabOption().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(highlightPage.previewTabOption().parents('.highlight-preview-wrapper'));
+        });
+
+        it('When user clicks on the selected option in preview tab, the option should then be deselected', () => {
+            highlightPage.steps.deselectOptionInPreviewTab(sentenceTextArray[1]);
+        });
+    });
+
+    describe('Preview tab: Word', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to Highlight question type');
+            highlightPage.steps.navigateToCreateQuestion('highlight');
+            cy.barsPreLoaderWait();
+            highlightPage.steps.clearQuestionInputField();
+            paragraphTextArray.forEach((paragraphText) => {
+                highlightPage.steps.addInputToQuestionInputField(`${paragraphText}{enter}`);
+            });
+            highlightPage.steps.addInputToQuestionInputField('{backspace}');
+            highlightPage.steps.switchTextSelectionTypeInTextSelectionDropdown('Word');
+            highlightPage.steps.deselectOptionInHighlightOptionsSection('Word', wordTextArray[0]);
+            highlightPage.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(highlightPage.previewTabParagraphs(), 3);
+            utilities.verifyElementCount(highlightPage.previewTabSpans(), 23);
+            let setCorrectAnswerOptionArray = wordTextArray.slice(1);
+            highlightPage.steps.verifyOptionInPreviewTab(setCorrectAnswerOptionArray);
+        });
+
+        it('When the user hovers over the provided option in preview tab, then that option should be displayed in hover state', () => {
+            highlightPage.steps.verifyHoverStateOfOptionInPreviewTab(wordTextArray[1]);
+        });
+
+        it('When user clicks on the provided option in preview tab, then the option should be selected ', () => {
+            highlightPage.steps.selectOptionInPreviewTab(wordTextArray[1]);
+        });
+
+        it('CSS of the option in selected and deselected state in preview tab', { tags: 'css' }, () => {
+            utilities.verifyCSS(highlightPage.previewTabOption().contains(wordTextArray[1]), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.figActiveComponentBg,
+                'border': `1px solid ${css.color.activeComponentBorder}`
+            });
+            utilities.verifyCSS(highlightPage.previewTabOption().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(highlightPage.previewTabOption().parents('.highlight-preview-wrapper'));
+        });
+
+        it('When user clicks on the selected option in preview tab, the option should then be deselected', () => {
+            highlightPage.steps.deselectOptionInPreviewTab(wordTextArray[1]);
+        });
+    });
+});