itemengine-cypress-automation 1.0.206-12thJuneFixesAndRepoUpdate-5fe2304.0 → 1.0.206

package/cypress/e2e/ILC/ImageHighlight/customiseHighlightStyle.js

@@ -0,0 +1,707 @@
+import { imageHighlightPage } 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 borderStyleOptions = ['Dashed', 'Dotted', 'Default', 'None'];
+const flowerHighlightRegion = [[40, 6], [40, 20], [55, 20], [55, 6]];
+const branchesHighlightRegion = [[50, 30], [50, 42], [65, 42], [65, 30]];
+const leafHighlightRegion = [[26, 26], [26, 36], [48, 36], [48, 26]];
+const rootsHighlightRegion = [[45, 45], [45, 55], [57, 55], [57, 45]];
+
+const defaultStateColor = 'rgb(120, 60, 60)';
+const activeStateColor = 'rgb(60, 120, 120)';
+
+describe('Create Item page - Image highlight: Customize image highlight style', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Fill color image highlight style : Edit tab content and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+            imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+            imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+            imageHighlightPage.steps.highlightRegionInImage(flowerHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(branchesHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(leafHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(rootsHighlightRegion);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(1);
+        });
+
+        it('\'Fill color\' icon should be displayed and as user hovers over it then a tooltip \'Fill color\' should be displayed', () => {
+            utilities.verifyElementVisibilityState(imageHighlightPage.fillColorButton(), 'visible');
+            imageHighlightPage.steps.verifyToolTipText(1, imageHighlightPage.fillColorButton(), 'Fill color');
+        });
+
+        it('When user clicks on the \'Fill color\' icon then a popup should be displayed', () => {
+            imageHighlightPage.steps.clickOnFillColorIcon();
+            utilities.verifyElementVisibilityState(imageHighlightPage.colorPopupWrapper(), 'visible');
+        });
+
+        it('The popup should contain \'Fill color\' label and two color boxes with label \'Default\' and \'Active\'. Both color boxes should have edit color button. Verify defualt color of both \'Default\' and \'Active\' color boxes', () => {
+            utilities.verifyElementVisibilityState(imageHighlightPage.colorPopupMenuLabel(), 'visible');
+            utilities.verifyInnerText(imageHighlightPage.colorPopupMenuLabel(), 'Fill color');
+            utilities.verifyElementVisibilityState(imageHighlightPage.defaultStateColorLabel(), 'visible');
+            utilities.verifyInnerText(imageHighlightPage.defaultStateColorLabel(), 'Default');
+            utilities.verifyElementVisibilityState(imageHighlightPage.activeStateColorLabel(), 'visible');
+            utilities.verifyInnerText(imageHighlightPage.activeStateColorLabel(), 'Active');
+            utilities.verifyElementVisibilityState(imageHighlightPage.defaultColorButton(), 'visible');
+            utilities.verifyElementVisibilityState(imageHighlightPage.activeColorButton(), 'visible');
+            utilities.verifyElementVisibilityState(imageHighlightPage.defaultStateEditButton(), 'visible');
+            utilities.verifyInnerText(imageHighlightPage.defaultStateEditButton(), 'Edit color');
+            utilities.verifyElementVisibilityState(imageHighlightPage.activeStateEditButton(), 'visible');
+            utilities.verifyInnerText(imageHighlightPage.activeStateEditButton(), 'Edit color');
+            utilities.verifyCSS(imageHighlightPage.defaultColorButton(), {
+                'background-color': "rgba(186, 201, 255, 0.4)",
+            });
+            utilities.verifyCSS(imageHighlightPage.activeColorButton(), {
+                'background-color': "rgba(107, 139, 255, 0.7)",
+            });
+        });
+
+        it('The popup should contain \'Apply to all options\' checkbox and it should be checked by default', () => {
+            utilities.verifyElementVisibilityState(imageHighlightPage.applyToAllOptionsCheckbox(), 'visible');
+            utilities.verifyInnerText(imageHighlightPage.applyToAllOptionsCheckboxLabel(), 'Apply to all options');
+            imageHighlightPage.steps.verifyApplyToAllOptionsCheckboxChecked();
+        });
+
+        it('CSS of \'Fill color\' defualt popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(imageHighlightPage.colorPopupMenuLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(imageHighlightPage.defaultStateColorLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(imageHighlightPage.activeStateColorLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(imageHighlightPage.defaultEditButtonText(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(imageHighlightPage.activeEditButtonText(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(imageHighlightPage.applyToAllOptionsCheckboxLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'Fill color\' defualt popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(imageHighlightPage.colorPopupWrapper());
+        });
+
+        imageHighlightPage.tests.verifyColorPopupContentCSSandAccessibility('Fill color');
+
+        it('When user updates the default color from the fill color popup then the edited color should be displayed on the default state of all highlight regions for \'Specify correct answer\ section', () => {
+            imageHighlightPage.steps.clickOnCancelButton();
+            imageHighlightPage.steps.clickOnFillColorIcon();
+            imageHighlightPage.steps.clickOnDefaultStateColorEditButton();
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            imageHighlightPage.steps.verifySelectedColorBlock(defaultStateColor);
+            imageHighlightPage.steps.clickOnOkButton();
+            imageHighlightPage.steps.verifyEditedFillColorInSpecifyCorrectAnswerSection(2, defaultStateColor);
+            imageHighlightPage.steps.verifyEditedFillColorInSpecifyCorrectAnswerSection(3, defaultStateColor);
+        });
+
+        it('When user updates the active color from the fill color popup then the edited color should be displayed on the selected state of all highlight regions for \'Specify correct answer\ options', () => {
+            imageHighlightPage.steps.clickOnFillColorIcon();
+            imageHighlightPage.steps.clickOnActiveStateColorEditButton();
+            colorPopupComponent.steps.clickInColorHuePalette();
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            imageHighlightPage.steps.verifySelectedColorBlock(activeStateColor);
+            imageHighlightPage.steps.clickOnOkButton();
+            imageHighlightPage.steps.verifyEditedFillColorInSpecifyCorrectAnswerSection(0, activeStateColor);
+            imageHighlightPage.steps.verifyEditedFillColorInSpecifyCorrectAnswerSection(1, activeStateColor);
+        });
+
+        it('When user selects a region in \'Specify possible options\' and updates the default color from the fill color popup and unchecks the \'Apply to all options\' checkbox then the edited color should be displayed on the default state of selected highlight regions for \'Specify correct answer\ section and other regions should be in their previous state', () => {
+            imageHighlightPage.steps.selectARegionInSpecifyPossibleOptions(leafHighlightRegion);
+            imageHighlightPage.steps.clickOnFillColorIcon();
+            imageHighlightPage.steps.uncheckApplyToAllOptionsCheckbox();
+            imageHighlightPage.steps.clickOnDefaultStateColorEditButton();
+            colorPopupComponent.steps.clickInColorHuePalette();
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            imageHighlightPage.steps.verifySelectedColorBlock(activeStateColor);
+            imageHighlightPage.steps.clickOnOkButton();
+            imageHighlightPage.steps.verifyEditedFillColorInSpecifyCorrectAnswerSection(2, activeStateColor);
+            imageHighlightPage.steps.verifyEditedFillColorInSpecifyCorrectAnswerSection(3, defaultStateColor);
+        });
+
+        it('When user selects a region in \'Specify possible options\' and updates the active color from the fill color popup and unchecks the \'Apply to all options\' checkbox then the edited color should be displayed on the default state of selected highlight regions for \'Specify correct answer\ section and other regions should be in their previous state', () => {
+            imageHighlightPage.steps.selectARegionInSpecifyPossibleOptions(flowerHighlightRegion);
+            imageHighlightPage.steps.clickOnFillColorIcon();
+            imageHighlightPage.steps.clickOnActiveStateColorEditButton();
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            imageHighlightPage.steps.verifySelectedColorBlock(defaultStateColor);
+            imageHighlightPage.steps.clickOnOkButton();
+            imageHighlightPage.steps.verifyEditedFillColorInSpecifyCorrectAnswerSection(0, defaultStateColor);
+            imageHighlightPage.steps.verifyEditedFillColorInSpecifyCorrectAnswerSection(1, activeStateColor);
+        });
+    });
+
+    describe('Border color image highlight style : Edit tab content and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+            imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+            imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+            imageHighlightPage.steps.highlightRegionInImage(flowerHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(branchesHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(leafHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(rootsHighlightRegion);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(1);
+        });
+
+        it('\'Border color\' icon should be displayed and as user hovers over it then a tooltip \'Border color\' should be displayed', () => {
+            utilities.verifyElementVisibilityState(imageHighlightPage.borderColorButton(), 'visible');
+            imageHighlightPage.steps.verifyToolTipText(2, imageHighlightPage.borderColorButton(), 'Border color');
+        });
+
+        it('When user clicks on the \'Border color\' icon then a popup should be displayed', () => {
+            imageHighlightPage.steps.clickOnBorderColorIcon();
+            utilities.verifyElementVisibilityState(imageHighlightPage.colorPopupWrapper(), 'visible');
+        });
+
+        it('The popup should contain \'Border color\' label and two color boxes with label \'Default\' and \'Active\'. Both color boxes should have edit color button.Verify defualt color of both \'Default\' and \'Active\' color boxes', () => {
+            utilities.verifyElementVisibilityState(imageHighlightPage.colorPopupMenuLabel(), 'visible');
+            utilities.verifyInnerText(imageHighlightPage.colorPopupMenuLabel(), 'Border color');
+            utilities.verifyElementVisibilityState(imageHighlightPage.defaultStateColorLabel(), 'visible');
+            utilities.verifyInnerText(imageHighlightPage.defaultStateColorLabel(), 'Default');
+            utilities.verifyElementVisibilityState(imageHighlightPage.activeStateColorLabel(), 'visible');
+            utilities.verifyInnerText(imageHighlightPage.activeStateColorLabel(), 'Active');
+            utilities.verifyElementVisibilityState(imageHighlightPage.defaultColorButton(), 'visible');
+            utilities.verifyElementVisibilityState(imageHighlightPage.activeColorButton(), 'visible');
+            utilities.verifyElementVisibilityState(imageHighlightPage.defaultStateEditButton(), 'visible');
+            utilities.verifyInnerText(imageHighlightPage.defaultStateEditButton(), 'Edit color');
+            utilities.verifyElementVisibilityState(imageHighlightPage.activeStateEditButton(), 'visible');
+            utilities.verifyInnerText(imageHighlightPage.activeStateEditButton(), 'Edit color');
+            utilities.verifyCSS(imageHighlightPage.defaultColorButton(), {
+                'background-color': css.color.activeButtons,
+            });
+            utilities.verifyCSS(imageHighlightPage.activeColorButton(), {
+                'background-color': css.color.activeHighlightBorder,
+            });
+        });
+
+        it('The popup should contain \'Apply to all options\' checkbox and it should be checked by default', () => {
+            utilities.verifyElementVisibilityState(imageHighlightPage.applyToAllOptionsCheckbox(), 'visible');
+            utilities.verifyInnerText(imageHighlightPage.applyToAllOptionsCheckboxLabel(), 'Apply to all options');
+            imageHighlightPage.steps.verifyApplyToAllOptionsCheckboxChecked();
+        });
+
+        it('CSS of \'Border color\' defualt popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(imageHighlightPage.colorPopupMenuLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(imageHighlightPage.defaultStateColorLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(imageHighlightPage.activeStateColorLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(imageHighlightPage.defaultEditButtonText(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(imageHighlightPage.activeEditButtonText(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(imageHighlightPage.applyToAllOptionsCheckboxLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'Border color\' defualt popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(imageHighlightPage.colorPopupWrapper());
+        });
+
+        imageHighlightPage.tests.verifyColorPopupContentCSSandAccessibility('Border color');
+
+        it('When user updates the default color from the border color popup then the edited border color should be displayed on the default state of all highlight regions for \'Specify correct answer\ section', () => {
+            imageHighlightPage.steps.clickOnCancelButton();
+            imageHighlightPage.steps.clickOnBorderColorIcon();
+            imageHighlightPage.steps.clickOnDefaultStateColorEditButton();
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            imageHighlightPage.steps.verifySelectedColorBlock(defaultStateColor);
+            imageHighlightPage.steps.clickOnOkButton();
+            imageHighlightPage.steps.verifyEditedBorderColorInSpecifyCorrectAnswerSection(2, defaultStateColor);
+            imageHighlightPage.steps.verifyEditedBorderColorInSpecifyCorrectAnswerSection(3, defaultStateColor);
+        });
+
+        it('When user updates the active color from the border color popup then the edited border color should be displayed on the selected state of all highlight regions for \'Specify correct answer\ options', () => {
+            imageHighlightPage.steps.clickOnBorderColorIcon();
+            imageHighlightPage.steps.clickOnActiveStateColorEditButton();
+            colorPopupComponent.steps.clickInColorHuePalette();
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            imageHighlightPage.steps.verifySelectedColorBlock(activeStateColor);
+            imageHighlightPage.steps.clickOnOkButton();
+            imageHighlightPage.steps.verifyEditedBorderColorInSpecifyCorrectAnswerSection(0, activeStateColor);
+            imageHighlightPage.steps.verifyEditedBorderColorInSpecifyCorrectAnswerSection(1, activeStateColor);
+        });
+
+        it('When user selects a region in \'Specify possible options\' and updates the default color from the border color popup and unchecks the \'Apply to all options\' checkbox then the edited border color should be displayed on the default state of selected highlight regions for \'Specify correct answer\ section and other regions should be in their previous state', () => {
+            imageHighlightPage.steps.selectARegionInSpecifyPossibleOptions(leafHighlightRegion);
+            imageHighlightPage.steps.clickOnBorderColorIcon();
+            imageHighlightPage.steps.uncheckApplyToAllOptionsCheckbox();
+            imageHighlightPage.steps.clickOnDefaultStateColorEditButton();
+            colorPopupComponent.steps.clickInColorHuePalette();
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            imageHighlightPage.steps.verifySelectedColorBlock(activeStateColor);
+            imageHighlightPage.steps.clickOnOkButton();
+            imageHighlightPage.steps.verifyEditedBorderColorInSpecifyCorrectAnswerSection(2, activeStateColor);
+            imageHighlightPage.steps.verifyEditedBorderColorInSpecifyCorrectAnswerSection(3, defaultStateColor);
+        });
+
+        it('When user selects a region in \'Specify possible options\' and updates the active color from the border color popup and unchecks the \'Apply to all options\' checkbox then the edited border color should be displayed on the default state of selected highlight regions for \'Specify correct answer\ section and other regions should be in their previous state', () => {
+            imageHighlightPage.steps.selectARegionInSpecifyPossibleOptions(flowerHighlightRegion);
+            imageHighlightPage.steps.clickOnBorderColorIcon();
+            imageHighlightPage.steps.clickOnActiveStateColorEditButton();
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            imageHighlightPage.steps.verifySelectedColorBlock(defaultStateColor);
+            imageHighlightPage.steps.clickOnOkButton();
+            imageHighlightPage.steps.verifyEditedBorderColorInSpecifyCorrectAnswerSection(0, defaultStateColor);
+            imageHighlightPage.steps.verifyEditedBorderColorInSpecifyCorrectAnswerSection(1, activeStateColor);
+        });
+    });
+
+    describe('Border style image highlight style : Edit tab content and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+            imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+            imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+            imageHighlightPage.steps.highlightRegionInImage(flowerHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(branchesHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(leafHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(rootsHighlightRegion);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(1);
+        });
+
+        it('\'Border style\' icon should be displayed and as user hovers over it then a tooltip \'Border style\' should be displayed', () => {
+            utilities.verifyElementVisibilityState(imageHighlightPage.borderStyleButton(), 'visible');
+            imageHighlightPage.steps.verifyToolTipText(3, imageHighlightPage.borderStyleButton(), 'Border style');
+        });
+
+        it('When user clicks on the \'Border style\' icon then a popup should be displayed', () => {
+            imageHighlightPage.steps.clickOnBorderStyleIcon();
+            utilities.verifyElementVisibilityState(imageHighlightPage.colorPopupWrapper(), 'visible');
+        });
+
+        it('In the popup, the \'Border style\' label should be displayed', () => {
+            utilities.verifyElementVisibilityState(imageHighlightPage.colorPopupMenuLabel(), 'visible');
+            utilities.verifyInnerText(imageHighlightPage.colorPopupMenuLabel(), 'Border style');
+        });
+
+        it('Two toggle buttons Default and Active should be displayed and by default \'Active\' toggle button should be selected', () => {
+            utilities.verifyElementVisibilityState(imageHighlightPage.activeDefaultToggleButton('active'), 'visible');
+            utilities.verifyInnerText(imageHighlightPage.activeDefaultToggleButton('active'), 'Active');
+            utilities.verifyElementVisibilityState(imageHighlightPage.activeDefaultToggleButton('default'), 'visible');
+            utilities.verifyInnerText(imageHighlightPage.activeDefaultToggleButton('default'), 'Default');
+            imageHighlightPage.steps.verifyActiveDefaultToggleButtonSelected('active');
+        });
+
+        it('Four border style buttons \'Dashed\', \'Dotted\',\'Default\' and \'No-Border\' should be dispalyed and by default \'Default\' style should be selected', () => {
+            imageHighlightPage.steps.verifyBorderStyleButtonsVisible();
+            imageHighlightPage.steps.verifyDefaultStyleButtonSelected();
+        });
+
+        it('\'Apply to all options\' checkbox should be displayed and by default checkbox should be checked', () => {
+            utilities.verifyElementVisibilityState(imageHighlightPage.applyToAllOptionsCheckboxLabel(), 'visible');
+            utilities.verifyInnerText(imageHighlightPage.applyToAllOptionsCheckboxLabel(), 'Apply to all options');
+            imageHighlightPage.steps.verifyApplyToAllOptionsCheckboxChecked();
+        });
+
+        it('When user selects Default toggle button then four border style options \'Dashed\', \'Dotted\',\'Default\' and \'No-Border\' should be displayed and by default the \'Default\' style should be selected', () => {
+            imageHighlightPage.steps.selectActiveDefaultToggleButton('default');
+            imageHighlightPage.steps.verifyBorderStyleButtonsVisible();
+            imageHighlightPage.steps.verifyDefaultStyleButtonSelected();
+        });
+
+        it('\'Apply to all options\' checkbox should be displayed and by default checkbox should be checked', () => {
+            utilities.verifyElementVisibilityState(imageHighlightPage.applyToAllOptionsCheckboxLabel(), 'visible');
+            utilities.verifyInnerText(imageHighlightPage.applyToAllOptionsCheckboxLabel(), 'Apply to all options');
+            imageHighlightPage.steps.verifyApplyToAllOptionsCheckboxChecked();
+            cy.log('Swiching toggle button to active as required for next test cases');
+            imageHighlightPage.steps.selectActiveDefaultToggleButton('active');
+        });
+
+        it('CSS of \'Border style\' defualt popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(imageHighlightPage.colorPopupMenuLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(imageHighlightPage.applyToAllOptionsCheckboxLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(imageHighlightPage.activeDefaultToggleButton('default'), {
+                'background-color': css.color.primaryBtn,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold,
+            });
+            utilities.verifyCSS(imageHighlightPage.activeDefaultToggleButton('active'), {
+                'background-color': css.color.activeButtons,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold,
+            });
+        });
+
+        it('Accessibility of \'Border color\' defualt popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(imageHighlightPage.colorPopupWrapper());
+        });
+
+        borderStyleOptions.forEach((borderStyle) => {
+            it(`When user updates the active border style to ${borderStyle} and \'Apply to all options\' checkbox is checked and user selects the highlight regions in \'Specify correct answer\' section then the ${borderStyle} border style should be applied to all correct highlight regions and non-correct regions should be in previous state.`, () => {
+                imageHighlightPage.steps.verifyActiveDefaultToggleButtonSelected('active');
+                imageHighlightPage.steps.selectBorderStyleForHighlightRegions(`${borderStyle}`);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsSpecifyCorrectAnswer(`${borderStyle}`, 0);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsSpecifyCorrectAnswer(`${borderStyle}`, 1);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsSpecifyCorrectAnswer('Default', 2);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsSpecifyCorrectAnswer('Default', 3);
+                imageHighlightPage.steps.clickOnBorderStyleIcon();
+            });
+        });
+
+        it('Pre steps for next case: When user selects a specific region in \'Specify possible options\' and then uncheck the \'Apply to all options\' checkbox then the changes should be applied to only that highlight region', () => {
+            imageHighlightPage.steps.selectARegionInSpecifyPossibleOptions(flowerHighlightRegion);
+            imageHighlightPage.steps.clickOnBorderStyleIcon();
+            imageHighlightPage.steps.uncheckApplyToAllOptionsCheckbox();
+            imageHighlightPage.steps.clickOnBorderStyleIcon();
+        });
+
+        borderStyleOptions.forEach((borderStyle) => {
+            it(`When user selects a single region in the \'Specify possible options\' and updates the active border style to ${borderStyle} and \'Apply to all options\' checkbox is unchecked then the ${borderStyle} border style should be applied to that correct highlight region only in \'Specify correct answer\' section and other regions should be in previous state.`, () => {
+                imageHighlightPage.steps.clickOnBorderStyleIcon();
+                imageHighlightPage.steps.verifyActiveDefaultToggleButtonSelected('active');
+                imageHighlightPage.steps.selectBorderStyleForHighlightRegions(`${borderStyle}`);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsSpecifyCorrectAnswer(`${borderStyle}`, 0);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsSpecifyCorrectAnswer('None', 1);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsSpecifyCorrectAnswer('Default', 2);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsSpecifyCorrectAnswer('Default', 3);
+            });
+        });
+
+        it('Pre steps for next case: When user selects \'Default\' option in popup and check the \'Apply to all options\' checkbox, then the border style should be applied to the default state of all highlight regions', () => {
+            imageHighlightPage.steps.clickOnBorderStyleIcon();
+            imageHighlightPage.steps.checkApplyToAllOptionsCheckbox();
+            imageHighlightPage.steps.clickOnBorderStyleIcon();
+        });
+
+        borderStyleOptions.forEach((borderStyle) => {
+            it(`When user updates the default border style to ${borderStyle} and \'Apply to all options\' checkbox is checked then the ${borderStyle} border style should be applied to all highlight regions in \'Specify possible options\' and non-correct highlight regions in \'Specify correct answer\' section.`, () => {
+                imageHighlightPage.steps.clickOnBorderStyleIcon();
+                imageHighlightPage.steps.selectActiveDefaultToggleButton('default');
+                imageHighlightPage.steps.selectBorderStyleForHighlightRegions(`${borderStyle}`);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsSpecifyCorrectAnswer('None', 0);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsSpecifyCorrectAnswer('None', 1);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsSpecifyCorrectAnswer(`${borderStyle}`, 2);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsSpecifyCorrectAnswer(`${borderStyle}`, 3);
+            });
+        });
+
+        it('Pre steps for next case: When user selects a specific region in \'Specify possible options\' and then uncheck the \'Apply to all options\' checkbox then the changes should be applied to only that region', () => {
+            imageHighlightPage.steps.selectARegionInSpecifyPossibleOptions(leafHighlightRegion);
+            imageHighlightPage.steps.clickOnBorderStyleIcon();
+            imageHighlightPage.steps.uncheckApplyToAllOptionsCheckbox();
+            imageHighlightPage.steps.clickOnBorderStyleIcon();
+        });
+
+        borderStyleOptions.forEach((borderStyle) => {
+            it(`When user selects a single region in the \'Specify possible options\' and updates the default border style to ${borderStyle} and \'Apply to all options\' checkbox is unchecked then the ${borderStyle} border style should be applied to that highlight region in \'Specify possible options\' and \'Specify correct answer\' section. Other regions should be in their previous state.`, () => {
+                imageHighlightPage.steps.clickOnBorderStyleIcon();
+                imageHighlightPage.steps.verifyActiveDefaultToggleButtonSelected('default');
+                imageHighlightPage.steps.selectBorderStyleForHighlightRegions(`${borderStyle}`);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsSpecifyCorrectAnswer(`${borderStyle}`, 2);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsSpecifyCorrectAnswer('None', 0);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsSpecifyCorrectAnswer('None', 1);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsSpecifyCorrectAnswer('None', 3);
+            });
+        });
+    });
+
+    describe('Fill color image highlight style : Preview tab and functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+            imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+            imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+            imageHighlightPage.steps.highlightRegionInImage(flowerHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(branchesHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(leafHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(rootsHighlightRegion);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(1);
+            imageHighlightPage.steps.checkShowAvailableOptionsToStudentsCheckbox();
+        });
+
+        it('When user updates the default color from the fill color popup then the edited color should be displayed on the default state of all highlight regions in the preview tab', () => {
+            imageHighlightPage.steps.clickOnFillColorIcon();
+            imageHighlightPage.steps.clickOnDefaultStateColorEditButton();
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            imageHighlightPage.steps.verifySelectedColorBlock(defaultStateColor);
+            imageHighlightPage.steps.clickOnOkButton();
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyEditedFillColorInPreviewtabSection(0, defaultStateColor);
+            imageHighlightPage.steps.verifyEditedFillColorInPreviewtabSection(1, defaultStateColor);
+            imageHighlightPage.steps.verifyEditedFillColorInPreviewtabSection(2, defaultStateColor);
+            imageHighlightPage.steps.verifyEditedFillColorInPreviewtabSection(3, defaultStateColor);
+        });
+
+        it('When user updates the active color from the fill color popup and in preview tab selects regions, then the edited color should be displayed on the selected state of all highlight regions', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.clickOnFillColorIcon();
+            imageHighlightPage.steps.clickOnActiveStateColorEditButton();
+            colorPopupComponent.steps.clickInColorHuePalette();
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            imageHighlightPage.steps.verifySelectedColorBlock(activeStateColor);
+            imageHighlightPage.steps.clickOnOkButton();
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.clickOnARegionInPreviewTab(0);
+            imageHighlightPage.steps.clickOnARegionInPreviewTab(1);
+            imageHighlightPage.steps.verifyEditedFillColorInPreviewtabSection(0, activeStateColor);
+            imageHighlightPage.steps.verifyEditedFillColorInPreviewtabSection(1, activeStateColor);
+            imageHighlightPage.steps.verifyEditedFillColorInPreviewtabSection(2, defaultStateColor);
+            imageHighlightPage.steps.verifyEditedFillColorInPreviewtabSection(3, defaultStateColor);
+        });
+
+        it('When user selects a region in \'Specify possible options\' and updates the default color from the fill color popup and unchecks the \'Apply to all options\' checkbox then the edited color should be displayed on the default state of selected highlight regions in the preview tab and other regions should be in their previous state', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.selectARegionInSpecifyPossibleOptions(leafHighlightRegion);
+            imageHighlightPage.steps.clickOnFillColorIcon();
+            imageHighlightPage.steps.uncheckApplyToAllOptionsCheckbox();
+            imageHighlightPage.steps.clickOnDefaultStateColorEditButton();
+            colorPopupComponent.steps.clickInColorHuePalette();
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            imageHighlightPage.steps.verifySelectedColorBlock(activeStateColor);
+            imageHighlightPage.steps.clickOnOkButton();
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyEditedFillColorInPreviewtabSection(2, activeStateColor);
+            imageHighlightPage.steps.verifyEditedFillColorInPreviewtabSection(3, defaultStateColor);
+        });
+
+        it('When user selects a region in \'Specify possible options\' and updates the active color from the fill color popup and unchecks the \'Apply to all options\' checkbox and then selects a highlight region in preview tab then the edited color should be displayed on selected highlight regions and other regions should be in their previous state', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.selectARegionInSpecifyPossibleOptions(flowerHighlightRegion);
+            imageHighlightPage.steps.clickOnFillColorIcon();
+            imageHighlightPage.steps.clickOnActiveStateColorEditButton();
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            imageHighlightPage.steps.verifySelectedColorBlock(defaultStateColor);
+            imageHighlightPage.steps.clickOnOkButton();
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.clickOnARegionInPreviewTab(0);
+            imageHighlightPage.steps.clickOnARegionInPreviewTab(1);
+            imageHighlightPage.steps.verifyEditedFillColorInPreviewtabSection(0, defaultStateColor);
+            imageHighlightPage.steps.verifyEditedFillColorInPreviewtabSection(1, activeStateColor);
+        });
+    });
+
+    describe('Border color image highlight style : Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+            imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+            imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+            imageHighlightPage.steps.highlightRegionInImage(flowerHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(branchesHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(leafHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(rootsHighlightRegion);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(1);
+            imageHighlightPage.steps.checkShowAvailableOptionsToStudentsCheckbox();
+        });
+
+        it('When user updates the default color from the border color popup then the edited border color should be displayed on the default state of all highlight regions in the preview tab', () => {
+            imageHighlightPage.steps.clickOnBorderColorIcon();
+            imageHighlightPage.steps.clickOnDefaultStateColorEditButton();
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            imageHighlightPage.steps.verifySelectedColorBlock(defaultStateColor);
+            imageHighlightPage.steps.clickOnOkButton();
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyEditedBorderColorInPreviewtabSection(0, defaultStateColor);
+            imageHighlightPage.steps.verifyEditedBorderColorInPreviewtabSection(1, defaultStateColor);
+            imageHighlightPage.steps.verifyEditedBorderColorInPreviewtabSection(2, defaultStateColor);
+            imageHighlightPage.steps.verifyEditedBorderColorInPreviewtabSection(3, defaultStateColor);
+        });
+
+        it('When user updates the active color from the border color popup and in preview tab selects correct regions, then the edited border color should be displayed on the selected state of all highlight regions', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.clickOnBorderColorIcon();
+            imageHighlightPage.steps.clickOnActiveStateColorEditButton();
+            colorPopupComponent.steps.clickInColorHuePalette();
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            imageHighlightPage.steps.verifySelectedColorBlock(activeStateColor);
+            imageHighlightPage.steps.clickOnOkButton();
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.clickOnARegionInPreviewTab(0);
+            imageHighlightPage.steps.clickOnARegionInPreviewTab(1);
+            imageHighlightPage.steps.verifyEditedBorderColorInPreviewtabSection(0, activeStateColor);
+            imageHighlightPage.steps.verifyEditedBorderColorInPreviewtabSection(1, activeStateColor);
+            imageHighlightPage.steps.verifyEditedBorderColorInPreviewtabSection(2, defaultStateColor);
+            imageHighlightPage.steps.verifyEditedBorderColorInPreviewtabSection(3, defaultStateColor);
+        });
+
+        it('When user selects a region in \'Specify possible options\' and updates the default color from the border color popup and unchecks the \'Apply to all options\' checkbox then the edited border color should be displayed on the default state of selected highlight regions in the preview tab and other regions should be in their previous state', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.selectARegionInSpecifyPossibleOptions(leafHighlightRegion);
+            imageHighlightPage.steps.clickOnBorderColorIcon();
+            imageHighlightPage.steps.uncheckApplyToAllOptionsCheckbox();
+            imageHighlightPage.steps.clickOnDefaultStateColorEditButton();
+            colorPopupComponent.steps.clickInColorHuePalette();
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            imageHighlightPage.steps.verifySelectedColorBlock(activeStateColor);
+            imageHighlightPage.steps.clickOnOkButton();
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.verifyEditedBorderColorInPreviewtabSection(2, activeStateColor);
+            imageHighlightPage.steps.verifyEditedBorderColorInPreviewtabSection(3, defaultStateColor);
+        });
+
+        it('When user selects a region in \'Specify possible options\' and updates the active color from the border color popup and unchecks the \'Apply to all options\' checkbox and then selects a highlight region in preview tab then the edited border color should be displayed on selected highlight regions and other regions should be in their previous state', () => {
+            imageHighlightPage.steps.switchToEditTab();
+            imageHighlightPage.steps.selectARegionInSpecifyPossibleOptions(flowerHighlightRegion);
+            imageHighlightPage.steps.clickOnBorderColorIcon();
+            imageHighlightPage.steps.clickOnActiveStateColorEditButton();
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            imageHighlightPage.steps.verifySelectedColorBlock(defaultStateColor);
+            imageHighlightPage.steps.clickOnOkButton();
+            imageHighlightPage.steps.switchToPreviewTab();
+            imageHighlightPage.steps.clickOnARegionInPreviewTab(0);
+            imageHighlightPage.steps.clickOnARegionInPreviewTab(1);
+            imageHighlightPage.steps.verifyEditedBorderColorInPreviewtabSection(0, defaultStateColor);
+            imageHighlightPage.steps.verifyEditedBorderColorInPreviewtabSection(1, activeStateColor);
+        });
+    });
+
+    describe('Border style image highlight style : Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            imageHighlightPage.steps.navigateToCreateQuestion('image highlight');
+            imageHighlightPage.steps.uploadFile('highlightImage.jpg');
+            imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+            imageHighlightPage.steps.verifyImageUploadedSpecifyCorrectAnswer();
+            imageHighlightPage.steps.highlightRegionInImage(flowerHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(branchesHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(leafHighlightRegion);
+            imageHighlightPage.steps.highlightRegionInImage(rootsHighlightRegion);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(1);
+            imageHighlightPage.steps.checkShowAvailableOptionsToStudentsCheckbox();
+        });
+
+        borderStyleOptions.forEach((borderStyle) => {
+            it(`When user updates the active border style to ${borderStyle} in \'Edit tab\' and \'Apply to all options\' checkbox is checked then in the \'Preview tab\' when user selects the highlight regions then ${borderStyle} border style should be applied to all highlight regions and non-selected regions should be in previous state.`, () => {
+                imageHighlightPage.steps.clickOnBorderStyleIcon();
+                imageHighlightPage.steps.verifyActiveDefaultToggleButtonSelected('active');
+                imageHighlightPage.steps.selectBorderStyleForHighlightRegions(`${borderStyle}`);
+                imageHighlightPage.steps.switchToPreviewTab();
+                imageHighlightPage.steps.clickOnARegionInPreviewTab(0);
+                imageHighlightPage.steps.clickOnARegionInPreviewTab(1);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsPreviewTab(`${borderStyle}`, 0);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsPreviewTab(`${borderStyle}`, 1);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsPreviewTab('Default', 2);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsPreviewTab('Default', 3);
+                imageHighlightPage.steps.switchToEditTab();
+            });
+        });
+
+        it('Pre steps for next case: When user selects a specific region in \'Specify possible options\' and then uncheck the \'Apply to all options\' checkbox then the changes should be applied to only that region in preview tab', () => {
+            imageHighlightPage.steps.selectARegionInSpecifyPossibleOptions(flowerHighlightRegion);
+            imageHighlightPage.steps.clickOnBorderStyleIcon();
+            imageHighlightPage.steps.uncheckApplyToAllOptionsCheckbox();
+            imageHighlightPage.steps.clickOnBorderStyleIcon();
+        });
+
+        borderStyleOptions.forEach((borderStyle) => {
+            it(`When user selects a single region in the \'Specify possible options\' and updates the active border style to ${borderStyle} in \'Edit tab\' and \'Apply to all options\' checkbox is unchecked and when user switches to preview tab and selects same region then the ${borderStyle} border style should be applied to that highlight region only and other regions should be in previous state.`, () => {
+                imageHighlightPage.steps.clickOnBorderStyleIcon();
+                imageHighlightPage.steps.verifyActiveDefaultToggleButtonSelected('active');
+                imageHighlightPage.steps.selectBorderStyleForHighlightRegions(`${borderStyle}`);
+                imageHighlightPage.steps.switchToPreviewTab();
+                imageHighlightPage.steps.clickOnARegionInPreviewTab(0);
+                imageHighlightPage.steps.clickOnARegionInPreviewTab(1);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsPreviewTab(`${borderStyle}`, 0);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsPreviewTab('None', 1);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsPreviewTab('Default', 2);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsPreviewTab('Default', 3);
+                imageHighlightPage.steps.switchToEditTab();
+            });
+        });
+
+        it('Pre steps for next case: When user selects \'Defualt\' border style option in popup and check the \'Apply to all options\' checkbox, then the border style should be applied to the default state of all highlight regions in preview tab', () => {
+            imageHighlightPage.steps.clickOnBorderStyleIcon();
+            imageHighlightPage.steps.checkApplyToAllOptionsCheckbox();
+            imageHighlightPage.steps.clickOnBorderStyleIcon();
+        });
+
+        borderStyleOptions.forEach((borderStyle) => {
+            it(`When user updates the default border style to ${borderStyle} in \'Edit tab\' and \'Apply to all options\' checkbox is checked then the ${borderStyle} border style should be applied to all highlight regions in the \'Preview tab\'.`, () => {
+                imageHighlightPage.steps.clickOnBorderStyleIcon();
+                imageHighlightPage.steps.clickOnDefaultToggleButton();
+                imageHighlightPage.steps.selectBorderStyleForHighlightRegions(`${borderStyle}`);
+                imageHighlightPage.steps.switchToPreviewTab();
+                imageHighlightPage.steps.clickOnARegionInPreviewTab(0);
+                imageHighlightPage.steps.clickOnARegionInPreviewTab(1);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsPreviewTab('None', 0);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsPreviewTab('None', 1);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsPreviewTab(`${borderStyle}`, 2);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsPreviewTab(`${borderStyle}`, 3);
+                imageHighlightPage.steps.switchToEditTab();
+            });
+        });
+
+        it('Pre steps for next case: When user selects a specific region in \'Specify possible options\' and then uncheck the \'Apply to all options\' checkbox then the changes should be applied to only that region i preview tab', () => {
+            imageHighlightPage.steps.clickOnBorderStyleIcon();
+            imageHighlightPage.steps.uncheckApplyToAllOptionsCheckbox();
+            imageHighlightPage.steps.clickOnBorderStyleIcon();
+        });
+
+        borderStyleOptions.forEach((borderStyle) => {
+            it(`When user selects a single region in the \'Specify possible options\' and updates the default border style to ${borderStyle} in \'Edit tab\' and \'Apply to all options\' checkbox is unchecked then the ${borderStyle} border style should be applied to that highlight region in the \'Preview tab\' and other regions should be in their previous state.`, () => {
+                imageHighlightPage.steps.clickOnBorderStyleIcon();
+                imageHighlightPage.steps.verifyActiveDefaultToggleButtonSelected('default');
+                imageHighlightPage.steps.selectBorderStyleForHighlightRegions(`${borderStyle}`);
+                imageHighlightPage.steps.switchToPreviewTab();
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsPreviewTab('None', 3);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsPreviewTab(`${borderStyle}`, 0);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsPreviewTab('None', 1);
+                imageHighlightPage.steps.verifyBorderStyleForHighlightRegionsPreviewTab('None', 2);
+                imageHighlightPage.steps.switchToEditTab();
+            });
+        });
+    });
+});