itemengine-cypress-automation 1.0.105 → 1.0.106

package/cypress/e2e/ILC/EssayResponse/essayResponseSpecialCharacters.js

@@ -0,0 +1,253 @@
+import { essayResponsePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+import { specialCharacters } from "../../../fixtures/drawingToolbarOptionsAdditionalOptionsAndSpecialAndMathCharacters";
+const customSpecialCharacters = ['A', '1', '#'];
+const css = Cypress.env('css')
+
+describe('Essay response: Customize math characters', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Preview tab - \'Special characters\' - content', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+        });
+
+        it(`When Special characters is not selected in edit tab, then in preview tab the Special characters toolbar option should not be displayed`, () => {
+            essayResponsePage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(essayResponsePage.previewTabToolbarOption('Special characters'), 'notExist');
+        });
+
+        it(`When Special characters option is selected in edit tab, then in preview tab the Special characters toolbar option should be displayed`, () => {
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Special Characters']);
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Special characters');
+            utilities.verifyElementVisibilityState(essayResponsePage.previewTabToolbarOption('Special characters'), 'visible');
+            essayResponsePage.steps.clickOnSpecialCharactersPopupCloseButton();
+        });
+
+        it('By default the \'Special characters\' toolbar option should be in deselected state', () => {
+            //Add here once https://redmine.zeuslearning.com/issues/554508 is resolved
+        });
+
+        it('When user clicks on \'Special characters\' toolbar option, then the \'Special characters\' popup should be displayed with \'Special characters\' title and a \'Close\' button', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Special characters');
+            utilities.verifyInnerText(essayResponsePage.specialCharactersPopupTitle(), 'Special characters');
+            utilities.verifyElementVisibilityState(essayResponsePage.specialCharactersPopupTitle(), 'exist');
+            utilities.verifyElementVisibilityState(essayResponsePage.specialCharactersPopupCloseButton(), 'exist');
+        });
+
+        it('All categories and accordions should be displayed in the popup', () => {
+            essayResponsePage.steps.verifySpecialCharactersPopupCategoryTitlesAndAccordions(specialCharacters);
+        });
+
+        it('By default the \'Spanish\' category accordion should be in expanded state and all other accordions should be in collapsed state.', () => {
+            essayResponsePage.steps.verifySpecialCharactersPopupCategoryAccordionIsExpanded(0);
+            for (let index = 1; index < specialCharacters.length; index++) {
+                essayResponsePage.steps.verifySpecialCharactersPopupCategoryAccordionIsCollapsed(index);
+            };
+        });
+
+        it('The \'Spanish\' category accordion should display all its symbols', () => {
+            essayResponsePage.steps.verifySpecialCharactersPopupCategorySymbols(0, specialCharacters[0].symbols);
+        });
+
+        it('When user clicks on the expanded \'Spanish\' category accordion, then the accordion should be collapsed.', () => {
+            essayResponsePage.steps.clickOnSpecialCharactersCategoryAccordion(0);
+            essayResponsePage.steps.verifySpecialCharactersPopupCategoryAccordionIsCollapsed(0);
+        });
+
+        it('When user clicks on the rest of the special character categories, then their category accordions should expand and display all the symbols', () => {
+            for (let index = 1; index < specialCharacters.length; index++) {
+                essayResponsePage.steps.clickOnSpecialCharactersCategoryAccordion(index);
+                essayResponsePage.steps.verifySpecialCharactersPopupCategoryAccordionIsExpanded(index);
+                essayResponsePage.steps.verifySpecialCharactersPopupCategorySymbols(index, specialCharacters[index].symbols);
+            };
+        });
+
+        it('User should be able to view two expanded category accordions simultaneously', () => {
+            essayResponsePage.steps.verifySpecialCharactersPopupCategoryAccordionIsExpanded(1);
+            essayResponsePage.steps.verifySpecialCharactersPopupCategoryAccordionIsExpanded(2);
+        });
+
+        it('When user clicks on any category icon, then the category flyout should stay open', () => {
+            essayResponsePage.steps.clickOnCharacterPopupSymbol(specialCharacters[0].symbols[0]);
+            utilities.verifyElementVisibilityState(essayResponsePage.dialogBox(), 'exist');
+        });
+
+        it('CSS of \'Special characters\' popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(essayResponsePage.specialCharactersPopupTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold,
+            });
+            utilities.verifyCSS(essayResponsePage.specialCharactersPopupCategoryTitle(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold,
+            });
+            utilities.verifyCSS(essayResponsePage.specialCharactersPopupCategoryAccordionIcon(), {
+                'color': css.color.activeButtons
+            });
+            utilities.verifyCSS(essayResponsePage.specialCharactersPopupCharacterSymbol(), {
+                'color': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Special characters\' popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponsePage.dialogBox());
+        });
+
+        it('When user clicks on the \'Close\' button then the \'Special characters\' popup should be closed', () => {
+            essayResponsePage.steps.clickOnSpecialCharactersPopupCloseButton();
+            utilities.verifyElementVisibilityState(essayResponsePage.dialogBox(), 'notExist');
+        });
+    });
+
+    describe('\'Special characters\' - functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Special Characters'])
+        });
+
+        essayResponsePage.tests.verifyCustomSpecialCharactersEditTabContent();
+
+        it('When the user has deselected any language option and opens the special characters popup in the preview tab, then the popup contents should get updated accordingly', () => {
+            let newSelectedCategoryList = specialCharacters.slice(1);
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Special characters');
+            //essayResponsePage.steps.verifySpecialCharactersPopupCategorySymbols(specialCharacters);
+            //Add this verification once https://redmine.zeuslearning.com/issues/555008 is resolved
+            cy.log('Post-step: Switching to edit tab');
+            essayResponsePage.steps.switchToEditTab();
+        });
+
+        it('When the user checks the \'Show only custom special characters\' radio button, \'Custom special characters\' label and input field should be displayed. A \'Preview\' hyperlink should be displayed next to the label', () => {
+            essayResponsePage.steps.selectShowOnlyCustomSpecialCharactersRadioButton();
+            utilities.verifyElementVisibilityState(essayResponsePage.customSpecialCharactersInputField(), 'visible');
+            utilities.verifyInnerText(essayResponsePage.customSpecialCharactersLabel(), 'Custom special characters');
+            utilities.verifyElementVisibilityState(essayResponsePage.customSpecialCharactersLabel(), 'visible');
+            utilities.verifyElementVisibilityState(essayResponsePage.customizeSpecialCharactersPreviewButton(), 'visible');
+        });
+
+        it('When the user specifies custom special characters, then on clicking on the \'Preview\' hyperlink, only the specified custom special characters should be displayed in the popup', () => {
+            essayResponsePage.steps.addInputToCustomSpecialCharactersInputField(`${customSpecialCharacters.join('')}`);
+            essayResponsePage.steps.clickOnCustomizeSpecialCharactersPreviewButton();
+            essayResponsePage.steps.verifyCustomSpecialCharactersDisplayedInPreviewPopupEditTab(customSpecialCharacters);
+            cy.log('Post-step: Closing preview popup')
+            essayResponsePage.steps.closeWarningPopup();
+        });
+
+        it('When the user has specified custom special characters and opens the special characters popup in the preview tab, then only the specified custom special characters should be displayed in the popup', () => {
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Special characters');
+            essayResponsePage.steps.verifyCustomSpecialCharactersDisplayedInPreviewTab(customSpecialCharacters);
+            cy.log('Post-step: Switching to edit tab');
+            essayResponsePage.steps.switchToEditTab();
+        });
+
+        it('CSS of Customize special characters', { tags: 'css' }, () => {
+            utilities.verifyCSS(essayResponsePage.customizeSpecialCharactersLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            //checked state of customize special characters checkbox
+            utilities.verifyCSS(essayResponsePage.customizeSpecialCharactersCheckbox().parents('[data-ngie-testid="customize-special-characters-checkbox"]').find('rect').eq(1), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(essayResponsePage.groupByLanguageLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            //selected state of radio button
+            utilities.verifyCSS(essayResponsePage.showOnlyCustomSpecialCharactersRadioButton().parents('.radio-option-wrapper').find('svg'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(essayResponsePage.customSpecialCharactersLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(essayResponsePage.customSpecialCharactersInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(essayResponsePage.customSpecialCharactersInputField().parents('.input-field').find('fieldset'), {
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`
+            });
+            utilities.verifyCSS(essayResponsePage.customizeSpecialCharactersPreviewButton(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            cy.log('Selecting group by language radio button');
+            essayResponsePage.steps.selectGroupByLanguageRadioButton();
+            utilities.verifyCSS(essayResponsePage.selectSpecialCharacterLanguagesLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            //Category tiles in selected state
+            utilities.verifyCSS(essayResponsePage.specialCharacterTileSectionCategoriesDragIcon().eq(1).find('path'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(essayResponsePage.specialCharacterTileSectionCategoriesDragIcon().eq(1).parent(), {
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(essayResponsePage.specialCharacterTileCategoryName().eq(1), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(essayResponsePage.specialCharacterTiles().eq(1), {
+                'background-color': css.color.primaryBtnBg
+            });
+            //Category tiles in de-selected state
+            utilities.verifyCSS(essayResponsePage.specialCharacterTileSectionCategoriesDragIcon().eq(0).find('svg path'), {
+                'fill': css.color.secondaryBtn
+            });
+            utilities.verifyCSS(essayResponsePage.specialCharacterTileCategoryName().eq(0), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(essayResponsePage.specialCharacterTiles().eq(0), {
+                'background-color': css.color.defaultBackground
+            });
+            cy.log('Opening preview popup and expanding one category accordion');
+            essayResponsePage.steps.clickOnCustomizeSpecialCharactersPreviewButton();
+            essayResponsePage.steps.clickOnSpecialCharactersPreviewPopupCategoryAccordionExpandIcon(0);
+            utilities.verifyCSS(essayResponsePage.dialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(essayResponsePage.specialCharactersPreviewPopupCategoryLabel().eq(0), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(essayResponsePage.specialCharactersPreviewPopupCategoryAccordionExpandIcon().last().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of Customize special characters', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponsePage.dialogBox());
+        });
+    });
+});

package/cypress/e2e/ILC/EssayResponse/previewHyperlink.js

@@ -0,0 +1,266 @@
+import { essayResponsePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Essay Response Preview: Hyperlink', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Hyperlink popup contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Essay Response question type and switching to preview tab.');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Insert Hyperlink']);
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('Hyperlink option should be displayed in the preview tab toolbar', () => {
+            utilities.verifyElementVisibilityState(essayResponsePage.previewTabToolbarOption('Insert Hyperlink'), 'visible');
+        });
+
+        it('When user clicks on Hyperlink option, then the Hyperlink popup should appear and by default the cursor should be focused inside the \'Display text\' input field', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert Hyperlink');
+            utilities.verifyElementVisibilityState(essayResponsePage.hyperlinkDialogBox(), 'visible');
+            //To check that focus is inside input field 
+            utilities.verifyCSS(essayResponsePage.hyperlinkDialogboxDisplayTextInputField(), {
+                'border-color': css.color.activeButtons
+            });
+        });
+
+        it('Title of the popup should be \'Hyperlink\'', () => {
+            utilities.verifyInnerText(essayResponsePage.hyperlinkDialogBoxTitle(), 'Hyperlink');
+        });
+
+        it('CSS of the \'Hyperlink\' popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(essayResponsePage.hyperlinkDialogBoxTitle(), {
+                'color': css.color.questionHeading,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(essayResponsePage.hyperlinkDialogboxDisplayTextInputField(), {
+                'color': css.color.standardTableCellText,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(essayResponsePage.hyperlinkDialogboxURLInputField(), {
+                'color': css.color.standardTableCellText,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(essayResponsePage.hyperlinkDialogboxDisplayTextLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(essayResponsePage.hyperlinkDialogboxURLLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(essayResponsePage.hyperlinkDialogboxButtonOk(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.primaryBtnBg
+            });
+            utilities.verifyCSS(essayResponsePage.hyperlinkDialogboxButtonCancel(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.secondaryBtnBg
+            });
+        });
+
+        it('Accessibility of the \'Hyperlink\' popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponsePage.hyperlinkDialogBox());
+        });
+
+        it('\'Display text\' and \'URL\' labels and input fields should be displayed in the Hyperlink popup and the input fields should be blank by default', () => {
+            utilities.verifyElementVisibilityState(essayResponsePage.hyperlinkDialogboxDisplayTextLabel(), 'visible');
+            utilities.verifyElementVisibilityState(essayResponsePage.hyperlinkDialogboxDisplayTextInputField(), 'visible');
+            essayResponsePage.steps.verifyHyperlinkDialogBoxDisplayTextInputValue('');
+            utilities.verifyElementVisibilityState(essayResponsePage.hyperlinkDialogboxURLLabel(), 'visible');
+            utilities.verifyElementVisibilityState(essayResponsePage.hyperlinkDialogboxURLInputField(), 'visible');
+            essayResponsePage.steps.verifyHyperlinkDialogBoxURLInputValue('');
+        });
+
+        it('\'Ok\' button should be displayed in the popup', () => {
+            utilities.verifyElementVisibilityState(essayResponsePage.hyperlinkDialogboxButtonOk(), 'visible');
+        });
+
+        it('\'Cancel\' button should be displayed in the popup and when user clicks on it then the popup should close', () => {
+            utilities.verifyElementVisibilityState(essayResponsePage.hyperlinkDialogboxButtonCancel(), 'visible');
+            essayResponsePage.steps.clickOnHyperLinkDialogBoxCancelButton();
+            utilities.verifyElementVisibilityState(essayResponsePage.hyperlinkDialogBox(), 'hidden');
+        });
+    });
+
+    describe('Add a Hyperlink to the response field', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Essay Response question type and switching to preview tab and opening Hyperlink popup.');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Insert Hyperlink']);
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert Hyperlink');
+        });
+
+        it('When user keeps the URL input field empty and clicks on \'Ok\' button, then a browser alert popup should be displayed with the message "Please type the link URL" and the hyperlink popup should remain open', () => {
+            essayResponsePage.steps.enterTextInHyperlinkDialogboxDisplayTextInputField('lorem');
+            essayResponsePage.steps.verifyHyperlinkDialogBoxDisplayTextInputValue('lorem');
+            essayResponsePage.steps.clickOnHyperLinkDialogBoxOkButton();
+            cy.on('window:alert', (alert) => {
+                expect(alert).to.deep.eq('Please type the link URL');
+            });
+            utilities.verifyElementVisibilityState(essayResponsePage.hyperlinkDialogBox(), 'visible');
+        });
+
+        it('When user gives input only to \'URL\' input field and clicks on \'Ok\' button, then the \'Hyperlink\' popup should close, hyperlink should be displayed in the response field and in the added hyperlink\'s popup, the display text input field should be prefilled with the previously added URL', () => {
+            cy.log('Pre-step: Clear display text input field.');
+            essayResponsePage.steps.clearHyperlinkDialogBoxDisplayTextInputField();
+            essayResponsePage.steps.enterTextInHyperlinkDialogBoxURLInputField(`${Cypress.config().baseUrl}`);
+            essayResponsePage.steps.clickOnHyperLinkDialogBoxOkButton();
+            utilities.verifyInnerText(essayResponsePage.previewInputFieldHyperlinkText(), `${Cypress.config().baseUrl}`);
+            essayResponsePage.steps.verifyHyperlinkDialogBoxURLInputValue(`${Cypress.config().baseUrl}`);
+            essayResponsePage.steps.rightClickHyperlinkText();
+            utilities.verifyElementVisibilityState(essayResponsePage.hyperlinkDialogBox(), 'exist');
+            essayResponsePage.steps.verifyHyperlinkDialogBoxDisplayTextInputValue(`${Cypress.config().baseUrl}`);
+            essayResponsePage.steps.verifyHyperlinkDialogBoxURLInputValue(`${Cypress.config().baseUrl}`);
+            cy.log('Post-step: Click on cancel button to close popup');
+            essayResponsePage.steps.clickOnHyperLinkDialogBoxCancelButton();
+        });
+
+        it('When user gives a normal text input to the URL input field in the hyper link popup and clicks on Ok button, then \'https://\' should be appended to the given input in the hyperlink text displayed in the response field', () => {
+            cy.log('Switching to edit tab')
+            essayResponsePage.steps.switchToEditTab();
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert Hyperlink');
+            essayResponsePage.steps.enterTextInHyperlinkDialogBoxURLInputField('lorem');
+            essayResponsePage.steps.clickOnHyperLinkDialogBoxOkButton();
+            utilities.verifyInnerText(essayResponsePage.previewInputFieldHyperlinkText(), 'https://lorem')
+            essayResponsePage.steps.verifyHyperlinkPreviewInputTextAttr('https://lorem');
+        });
+
+        it('When user shifts the cursor away from the hyperlink and clicks on \'Hyperlink\' option in the toolbar, then the Hyperlink popup should appear again in its default state', () => {
+            essayResponsePage.steps.enterInputInResponseField('  ');
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert Hyperlink');
+            utilities.verifyElementVisibilityState(essayResponsePage.hyperlinkDialogBox(), 'visible');
+            essayResponsePage.steps.verifyHyperlinkDialogBoxDisplayTextInputValue('');
+            essayResponsePage.steps.verifyHyperlinkDialogBoxURLInputValue('');
+        });
+
+        it('When user adds both \'Display text\' as well as \'URL\' in the hyperlink popup and clicks on Ok button, then the hyperlink with the added display text and URL should be displayed in the response field', () => {
+            essayResponsePage.steps.enterTextInHyperlinkDialogboxDisplayTextInputField('Link');
+            essayResponsePage.steps.enterTextInHyperlinkDialogBoxURLInputField(`${Cypress.config().baseUrl}`);
+            essayResponsePage.steps.clickOnHyperLinkDialogBoxOkButton();
+            utilities.verifyInnerText(essayResponsePage.previewInputFieldHyperlinkText(), 'Link')
+            essayResponsePage.steps.verifyHyperlinkDialogBoxURLInputValue(`${Cypress.config().baseUrl}`);
+        });
+
+        it('CSS of the hyperlink in response field', { tags: 'css' }, () => {
+            utilities.verifyCSS(essayResponsePage.previewInputFieldHyperlinkText(), {
+                'color': css.color.linkText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of the hyperlink in response field', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(essayResponsePage.previewInputFieldHyperlinkText());
+        });
+    });
+
+    describe('Edit a previously added hyperlink', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Essay Response question type and switching to preview tab and adding Hyperlink to response area.');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Insert Hyperlink']);
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert Hyperlink');
+            essayResponsePage.steps.enterTextInHyperlinkDialogboxDisplayTextInputField('Link');
+            essayResponsePage.steps.enterTextInHyperlinkDialogBoxURLInputField(`${Cypress.config().baseUrl}`);
+            essayResponsePage.steps.clickOnHyperLinkDialogBoxOkButton();
+        });
+
+        it('When the added hyperlink is in focus and user clicks on \'Hyperlink\' toolbar option then \'Hyperlink\' popup should appear with the details of the focused hyperlink', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Insert Hyperlink');
+            utilities.verifyElementVisibilityState(essayResponsePage.hyperlinkDialogBox(), 'visible');
+            essayResponsePage.steps.verifyHyperlinkDialogBoxDisplayTextInputValue('Link');
+            essayResponsePage.steps.verifyHyperlinkDialogBoxURLInputValue(`${Cypress.config().baseUrl}`);
+            cy.log('Post-step: Click on cancel button to close hyperlink popup');
+            essayResponsePage.steps.clickOnHyperLinkDialogBoxCancelButton();
+        });
+
+        it('When the user double clicks on the added hyperlink then \'Hyperlink\' popup should appear with the details of the focused hyperlink', () => {
+            essayResponsePage.steps.dblClickHyperlinkText();
+            utilities.verifyElementVisibilityState(essayResponsePage.hyperlinkDialogBox(), 'visible');
+            essayResponsePage.steps.verifyHyperlinkDialogBoxDisplayTextInputValue('Link');
+            essayResponsePage.steps.verifyHyperlinkDialogBoxURLInputValue(`${Cypress.config().baseUrl}`);
+            cy.log('Post-step: Click on cancel button to close hyperlink popup');
+            essayResponsePage.steps.clickOnHyperLinkDialogBoxCancelButton();
+        });
+
+        it('When the added hyperlink is in focus and user right clicks on it, then \'Hyperlink\' popup should appear with the details of the focused hyperlink', () => {
+            essayResponsePage.steps.rightClickHyperlinkText();
+            utilities.verifyElementVisibilityState(essayResponsePage.hyperlinkDialogBox(), 'visible');
+            essayResponsePage.steps.verifyHyperlinkDialogBoxDisplayTextInputValue('Link');
+            essayResponsePage.steps.verifyHyperlinkDialogBoxURLInputValue(`${Cypress.config().baseUrl}`);
+        });
+
+        it('When user updates the details of a pre-existing hyperlink in its hyperlink popup and clicks on \'Cancel\' button, then the updated details should not be reflected in the displayed hyperlink', () => {
+            essayResponsePage.steps.clearHyperlinkDialogBoxDisplayTextInputField();
+            essayResponsePage.steps.enterTextInHyperlinkDialogboxDisplayTextInputField('Edited');
+            essayResponsePage.steps.clearHyperlinkDialogBoxURLInputField();
+            essayResponsePage.steps.enterTextInHyperlinkDialogBoxURLInputField('https://www.google.com');
+            essayResponsePage.steps.clickOnHyperLinkDialogBoxCancelButton();
+            utilities.verifyInnerText(essayResponsePage.previewInputFieldHyperlinkText(), 'Link');
+            essayResponsePage.steps.verifyHyperlinkPreviewInputTextAttr(`${Cypress.config().baseUrl}`)
+        });
+
+        it('When user updates the details of a pre-existing hyperlink in its hyperlink popup and clicks on \'Ok\' button, then the updated details should be reflected in the displayed hyperlink', () => {
+            cy.log('Pre-step: Right click on the hyperlink to open its hyperlink popup');
+            essayResponsePage.steps.rightClickHyperlinkText();
+            essayResponsePage.steps.clearHyperlinkDialogBoxDisplayTextInputField();
+            essayResponsePage.steps.enterTextInHyperlinkDialogboxDisplayTextInputField('Edited');
+            essayResponsePage.steps.clearHyperlinkDialogBoxURLInputField();
+            essayResponsePage.steps.enterTextInHyperlinkDialogBoxURLInputField('https://www.google.com');
+            essayResponsePage.steps.clickOnHyperLinkDialogBoxOkButton();
+            utilities.verifyInnerText(essayResponsePage.previewInputFieldHyperlinkText(), 'Edited')
+            essayResponsePage.steps.verifyHyperlinkPreviewInputTextAttr(`https://www.google.com`)
+        });
+
+        it('When the user right clicks on automatically hyperlinked text then the hyperlink popup should open and the details should be correctly displayed in the popup, and the user should be able to edit the details of the automatically hyperlinked text', () => {
+            cy.log('Pre-step: Clearing the response area and typing a link in the response area for automatic hyperlinking');
+            essayResponsePage.steps.enterInputInResponseField(`{selectAll}{backspace}${Cypress.config().baseUrl}  `);
+            essayResponsePage.steps.rightClickHyperlinkText();
+            essayResponsePage.steps.clearHyperlinkDialogBoxDisplayTextInputField();
+            essayResponsePage.steps.enterTextInHyperlinkDialogboxDisplayTextInputField('Google');
+            essayResponsePage.steps.verifyHyperlinkDialogBoxDisplayTextInputValue('Google');  //Editing automatically hyperlinked text
+            essayResponsePage.steps.clearHyperlinkDialogBoxURLInputField();
+            essayResponsePage.steps.enterTextInHyperlinkDialogBoxURLInputField('https://www.google.com');
+            essayResponsePage.steps.verifyHyperlinkDialogBoxURLInputValue(`https://www.google.com`);
+            essayResponsePage.steps.clickOnHyperLinkDialogBoxOkButton();
+            utilities.verifyInnerText(essayResponsePage.previewInputFieldHyperlinkText(), 'Google');
+            essayResponsePage.steps.verifyHyperlinkPreviewInputTextAttr(`https://www.google.com`);
+        });
+
+        it('When the user selects the added hyperlink and clicks on any formatting option, then the formatting should be applied to the displayed hyperlink.', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Bold (Ctrl+B)');
+            utilities.verifyCSS(essayResponsePage.previewInputFieldHyperlinkText(), {
+                'font-weight': css.fontWeight.bold
+            });
+        });
+    });
+});