itemengine-cypress-automation 1.0.239 → 1.0.240

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

@@ -0,0 +1,248 @@
+import { textSelectionPage } from "../../../pages";
+import { colorPopupComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const defaultColorBlocks = ['rgb(82, 0, 255)', 'rgb(0, 112, 128)', 'rgb(128, 102, 69)', 'rgb(102, 102, 102)', 'rgb(0, 0, 0)'];
+const borderBlocks = ['dashed', 'dotted', 'solid', 'none'];
+const borderBlocksInnerText = ['Dashed', 'Dotted', 'Solid', 'None'];
+const paragraphTextArray = ['All animals have a unique role to play in maintaining the balance of nature.', 'A lot of animal species exist in both, land and water. As a result, each of them has a purpose for their existence.', 'The animals divide into specific groups in biology. Amphibians are those which can live on both, land and water.', 'Mammals are ones which give birth to their offspring in the womb and have mammary glands.', 'Birds are creatures with feathers, beaks, and the ability to lay eggs.', 'Many animal species are undocumented even today.', 'Research is going on to discover new species in the far corners of the earth']
+
+
+describe('Create Item page - Text selection : Style and layout customization', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Style and layout customization accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+        });
+        textSelectionPage.tests.verifyStyleAndLayoutCustomizationAccordionProperties();
+    });
+
+    describe('Style and layout customization accordion - Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            textSelectionPage.steps.switchTextSelectionStyle('outline');
+        });
+
+        it('When filled in text selection mode is selected, then \'Outline style\', \'Border color\' and \'Border style\' labels should be displayed in style and layout customization accordion', () => {
+            utilities.verifyInnerText(textSelectionPage.styleLabel(), 'Outline style');
+            utilities.verifyElementVisibilityState(textSelectionPage.styleLabel(), 'visible');
+            utilities.verifyInnerText(textSelectionPage.colorLabel(), 'Border color');
+            utilities.verifyElementVisibilityState(textSelectionPage.colorLabel(), 'visible');
+            utilities.verifyInnerText(textSelectionPage.borderStyle(), 'Border style');
+            utilities.verifyElementVisibilityState(textSelectionPage.borderStyle(), 'visible');
+        });
+
+        it('5 color blocks and \'Edit color\' button should be displayed and the first blue color block should be selected', () => {
+            for (let index = 0; index < 5; index++) {
+                textSelectionPage.steps.verifyColorBlockBackgroundColor(index, defaultColorBlocks[index]);
+            }
+            utilities.verifyElementCount(textSelectionPage.colorBlock(), 5);
+            textSelectionPage.steps.verifyColorBlockIsSelected(0);
+            utilities.verifyInnerText(textSelectionPage.editColorButton(), 'Edit color');
+            utilities.verifyElementVisibilityState(textSelectionPage.editColorButton(), 'visible');
+        });
+
+        it('4 border style blocks button should be displayed and solid border block should be selected', () => {
+            utilities.verifyElementCount(textSelectionPage.borderBlock(), 4);
+            for (let index = 0; index < 4; index++) {
+                utilities.verifyInnerText(utilities.getNthElement(textSelectionPage.borderBlockInnerText(), index), borderBlocksInnerText[index]);
+            }
+            textSelectionPage.steps.verifyBorderBlockIsSelected(2);
+        });
+
+        it('CSS of style and layout customization accordion contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(textSelectionPage.styleLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(textSelectionPage.colorLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(textSelectionPage.borderStyle(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(textSelectionPage.editColorButton(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of style and layout customization accordion contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textSelectionPage.styleLabel().parents('.ngie-accordion-detail'));
+        });
+
+        it('When the user clicks on the edit color button in the accordion, a color popup should be displayed for the selected color block', () => {
+            textSelectionPage.steps.clickOnEditColorButton();
+            colorPopupComponent.steps.verifyColorPopupIsDisplayed();
+        });
+
+        it('A title \'Select color\' should be displayed on the color popup', () => {
+            colorPopupComponent.steps.verifyColorPopupSelectColorTitle();
+        });
+
+        it('A \'Color saturation palette\' should be displayed on the color popup along with a color picker and the color picker should be set on the selected color', () => {
+            colorPopupComponent.steps.verifyColorSaturationPaletteAndPicker();
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(255, 255, 255)');
+        });
+
+        it('A \'Color hue palette\' should be displayed on the color popup along with a color picker and the color picker should be set on the selected color', () => {
+            colorPopupComponent.steps.verifyColorHuePaletteAndPicker();
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+        });
+
+        it('A \'Selected color\' label and color block displaying the selected color should be displayed', () => {
+            colorPopupComponent.steps.verifySelectedColorLabelAndSelectedColorBlock();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(255, 255, 255)');
+        });
+
+        it('A \'Hex\' label and input field with pre-filled hex code value of the selected color should be displayed', () => {
+            colorPopupComponent.steps.verifyHexLabelAndInputField();
+            colorPopupComponent.steps.verifyHexValue('#ffffff');
+        });
+
+        it('\'Cancel\' and \'Ok\' buttons should be displayed', () => {
+            colorPopupComponent.steps.verifyColorPopupCancelButton();
+            colorPopupComponent.steps.verifyColorPopupOkButton();
+        });
+    });
+
+    describe('Color popup - Updating the selected color', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            textSelectionPage.steps.setQuestionAndOptionsInEditTab();
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[0]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[1]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[2]);
+            textSelectionPage.steps.switchTextSelectionStyle('outline');
+        });
+
+        it('When the user moves the color picker in the color saturation palette, color in the selected color block and the hex code should change, color in the hue color palette', () => {
+            textSelectionPage.steps.clickOnEditColorButton();
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(121, 60, 60)');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(119, 60, 60)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHexValue('#793c3c');
+        });
+
+        it('When the user moves the color picker in the color hue palette, color in the selected color block, the hex code and the saturation color palette should change', () => {
+            colorPopupComponent.steps.clickInColorHuePalette();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(60, 121, 121)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(0, 255, 255)');
+            colorPopupComponent.steps.verifyHexValue('#3c7979');
+        });
+
+        it('When the user changes the color using hex code, the color in color saturation palette and color hue palette should change', () => {
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.verifyHexValue('#ff0000');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+        });
+
+        it('When the user modifies the selected color block in the color popup and clicks on \'Cancel\' button, then the popup should close, the color block should not change and the modifications in the color popup should not persist', () => {
+            colorPopupComponent.steps.clickOnCancelButton();
+            utilities.verifyElementVisibilityState(textSelectionPage.dialogBox(), 'notExist');
+            textSelectionPage.steps.verifyColorBlockBackgroundColor(0, defaultColorBlocks[0]);
+        });
+
+        it('When the user modifies the selected color block in the color popup and clicks on \'Ok\' button, then the updated color should be applied to the previously selected color block and the rest of the color blocks should remain unchanged', () => {
+            textSelectionPage.steps.clickOnEditColorButton();
+            colorPopupComponent.steps.addInputToHexInputField('#558632');
+            colorPopupComponent.steps.clickOnOkButton();
+            utilities.verifyElementVisibilityState(textSelectionPage.dialogBox(), 'notExist');
+            textSelectionPage.steps.verifyColorBlockBackgroundColor(0, 'rgb(85, 134, 50)');
+            for (let index = 1; index < 5; index++) {
+                textSelectionPage.steps.verifyColorBlockBackgroundColor(index, defaultColorBlocks[index]);
+            }
+            textSelectionPage.steps.verifyStyleInSpecifyPossibleOptions('outline', 0, 'rgb(85, 134, 50)');
+            textSelectionPage.steps.verifyStyleInSpecifyCorrectAnswer('outline', 0, 'rgb(85, 134, 50)');
+        })
+    });
+
+    describe('Selecting a different color block and border style block for outline style - edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            textSelectionPage.steps.setQuestionAndOptionsInEditTab();
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[0]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[1]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[2]);
+            textSelectionPage.steps.switchTextSelectionStyle('outline');
+        });
+
+        it('User should be able to select a different color block and the newly selected color block\'s color should be applied to selected state of text selection in edit tab', () => {
+            for (let index = 0; index < 5; index++) {
+                textSelectionPage.steps.selectColorBlock(index);
+                textSelectionPage.steps.verifyColorBlockBackgroundColor(index, defaultColorBlocks[index]);
+                textSelectionPage.steps.verifyStyleInSpecifyPossibleOptions('outline', 0, defaultColorBlocks[index]);
+                textSelectionPage.steps.verifyStyleInSpecifyCorrectAnswer('outline', 0, defaultColorBlocks[index]);
+            }
+        });
+
+        it('User should be able to select a different border style block and the newly selected border block\'s style should be applied to selected state of text selection in edit tab', () => {
+            for (let index = 0; index < 4; index++) {
+                textSelectionPage.steps.selectBorderBlock(index);
+                textSelectionPage.steps.verifyBorderBlockIsSelected(index);
+                textSelectionPage.steps.verifyBorderStyleInSpecifyPossibleOptions('outline', 0, borderBlocks[index]);
+                textSelectionPage.steps.verifyBorderStyleInSpecifyCorrectAnswer('outline', 0, borderBlocks[index]);
+            }
+        });
+    });
+
+    describe('Selecting a different color block and border style block for outline style - preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            textSelectionPage.steps.setQuestionAndOptionsInEditTab();
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[0]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[1]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[2]);
+            textSelectionPage.steps.switchTextSelectionStyle('outline');
+        });
+
+        it('The newly selected color block\'s color should be applied to selected state of text selection in preview tab', () => {
+            for (let index = 0; index < 5; index++) {
+                textSelectionPage.steps.selectColorBlock(index);
+                textSelectionPage.steps.verifyColorBlockBackgroundColor(index, defaultColorBlocks[index]);
+                textSelectionPage.steps.switchToPreviewTab();
+                textSelectionPage.steps.selectOptionInPreviewTab(paragraphTextArray[0]);
+                textSelectionPage.steps.verifyStyleInPreview('outline', 0, defaultColorBlocks[index]);
+                textSelectionPage.steps.switchToEditTab();
+            }
+        });
+
+        it('The newly selected border block\'s style should be applied to selected state of text selection in preview tab', () => {
+            for (let index = 0; index < 4; index++) {
+                textSelectionPage.steps.selectBorderBlock(index);
+                textSelectionPage.steps.verifyBorderBlockIsSelected(index);
+                textSelectionPage.steps.switchToPreviewTab();
+                textSelectionPage.steps.selectOptionInPreviewTab(paragraphTextArray[0]);
+                textSelectionPage.steps.verifyBorderStyleInPreview('outline', 0, borderBlocks[index]);
+                textSelectionPage.steps.switchToEditTab();
+            }
+        });
+    });
+});

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

@@ -0,0 +1,247 @@
+import { textSelectionPage } from "../../../pages";
+import { colorPopupComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const defaultColorBlocks = ['rgb(82, 0, 255)', 'rgb(0, 112, 128)', 'rgb(128, 102, 69)', 'rgb(102, 102, 102)', 'rgb(0, 0, 0)'];
+const borderBlocks = ['dashed', 'dotted', 'solid'];
+const borderBlocksInnerText = ['Dashed', 'Dotted', 'Solid'];
+const paragraphTextArray = ['All animals have a unique role to play in maintaining the balance of nature.', 'A lot of animal species exist in both, land and water. As a result, each of them has a purpose for their existence.', 'The animals divide into specific groups in biology. Amphibians are those which can live on both, land and water.', 'Mammals are ones which give birth to their offspring in the womb and have mammary glands.', 'Birds are creatures with feathers, beaks, and the ability to lay eggs.', 'Many animal species are undocumented even today.', 'Research is going on to discover new species in the far corners of the earth']
+
+
+describe('Create Item page - Text selection : Style and layout customization', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Style and layout customization accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+        });
+        textSelectionPage.tests.verifyStyleAndLayoutCustomizationAccordionProperties();
+    });
+
+    describe('Style and layout customization accordion - Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            textSelectionPage.steps.switchTextSelectionStyle('strikethrough');
+        });
+
+        it('When filled in text selection mode is selected, then \'Strikethrough style\', \'Border color\' and \'Border style\' labels should be displayed in style and layout customization accordion', () => {
+            utilities.verifyInnerText(textSelectionPage.styleLabel(), 'Strikethrough style');
+            utilities.verifyElementVisibilityState(textSelectionPage.styleLabel(), 'visible');
+            utilities.verifyInnerText(textSelectionPage.colorLabel(), 'Color');
+            utilities.verifyElementVisibilityState(textSelectionPage.colorLabel(), 'visible');
+            utilities.verifyInnerText(textSelectionPage.borderStyle(), 'Border style');
+            utilities.verifyElementVisibilityState(textSelectionPage.borderStyle(), 'visible');
+        });
+
+        it('5 color blocks and \'Edit color\' button should be displayed and the first blue color block should be selected', () => {
+            for (let index = 0; index < 5; index++) {
+                textSelectionPage.steps.verifyColorBlockBackgroundColor(index, defaultColorBlocks[index]);
+            }
+            utilities.verifyElementCount(textSelectionPage.colorBlock(), 5);
+            textSelectionPage.steps.verifyColorBlockIsSelected(0);
+            utilities.verifyInnerText(textSelectionPage.editColorButton(), 'Edit color');
+            utilities.verifyElementVisibilityState(textSelectionPage.editColorButton(), 'visible');
+        });
+
+        it('3 border style blocks button should be displayed and solid border block should be selected', () => {
+            utilities.verifyElementCount(textSelectionPage.borderBlock(), 3);
+            for (let index = 0; index < 3; index++) {
+                utilities.verifyInnerText(utilities.getNthElement(textSelectionPage.borderBlockInnerText(), index), borderBlocksInnerText[index]);
+            }
+            textSelectionPage.steps.verifyBorderBlockIsSelected(2);
+        });
+
+        it('CSS of style and layout customization accordion contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(textSelectionPage.styleLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(textSelectionPage.colorLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(textSelectionPage.borderStyle(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(textSelectionPage.editColorButton(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+        it('Accessibility of style and layout customization accordion contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(textSelectionPage.styleLabel().parents('.ngie-accordion-detail'));
+        });
+
+        it('When the user clicks on the edit color button in the accordion, a color popup should be displayed for the selected color block', () => {
+            textSelectionPage.steps.clickOnEditColorButton();
+            colorPopupComponent.steps.verifyColorPopupIsDisplayed();
+        });
+
+        it('A title \'Select color\' should be displayed on the color popup', () => {
+            colorPopupComponent.steps.verifyColorPopupSelectColorTitle();
+        });
+
+        it('A \'Color saturation palette\' should be displayed on the color popup along with a color picker and the color picker should be set on the selected color', () => {
+            colorPopupComponent.steps.verifyColorSaturationPaletteAndPicker();
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(255, 255, 255)');
+        });
+
+        it('A \'Color hue palette\' should be displayed on the color popup along with a color picker and the color picker should be set on the selected color', () => {
+            colorPopupComponent.steps.verifyColorHuePaletteAndPicker();
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+        });
+
+        it('A \'Selected color\' label and color block displaying the selected color should be displayed', () => {
+            colorPopupComponent.steps.verifySelectedColorLabelAndSelectedColorBlock();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(255, 255, 255)');
+        });
+
+        it('A \'Hex\' label and input field with pre-filled hex code value of the selected color should be displayed', () => {
+            colorPopupComponent.steps.verifyHexLabelAndInputField();
+            colorPopupComponent.steps.verifyHexValue('#ffffff');
+        });
+
+        it('\'Cancel\' and \'Ok\' buttons should be displayed', () => {
+            colorPopupComponent.steps.verifyColorPopupCancelButton();
+            colorPopupComponent.steps.verifyColorPopupOkButton();
+        });
+    });
+
+    describe('Color popup - Updating the selected color', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            textSelectionPage.steps.setQuestionAndOptionsInEditTab();
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[0]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[1]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[2]);
+            textSelectionPage.steps.switchTextSelectionStyle('strikethrough');
+        });
+
+        it('When the user moves the color picker in the color saturation palette, color in the selected color block and the hex code should change, color in the hue color palette', () => {
+            textSelectionPage.steps.clickOnEditColorButton();
+            colorPopupComponent.steps.clickInColorSaturationPalette();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(121, 60, 60)');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(119, 60, 60)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHexValue('#793c3c');
+        });
+
+        it('When the user moves the color picker in the color hue palette, color in the selected color block, the hex code and the saturation color palette should change', () => {
+            colorPopupComponent.steps.clickInColorHuePalette();
+            colorPopupComponent.steps.verifySelectedColorBlock('rgb(60, 121, 121)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(0, 255, 255)');
+            colorPopupComponent.steps.verifyHexValue('#3c7979');
+        });
+
+        it('When the user changes the color using hex code, the color in color saturation palette and color hue palette should change', () => {
+            colorPopupComponent.steps.addInputToHexInputField('#ff0000');
+            colorPopupComponent.steps.verifyHexValue('#ff0000');
+            colorPopupComponent.steps.verifySaturationPaletteColor('rgb(255, 0, 0)');
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+        });
+
+        it('When the user modifies the selected color block in the color popup and clicks on \'Cancel\' button, then the popup should close, the color block should not change and the modifications in the color popup should not persist', () => {
+            colorPopupComponent.steps.clickOnCancelButton();
+            utilities.verifyElementVisibilityState(textSelectionPage.dialogBox(), 'notExist');
+            textSelectionPage.steps.verifyColorBlockBackgroundColor(0, defaultColorBlocks[0]);
+        });
+
+        it('When the user modifies the selected color block in the color popup and clicks on \'Ok\' button, then the updated color should be applied to the previously selected color block and the rest of the color blocks should remain unchanged', () => {
+            textSelectionPage.steps.clickOnEditColorButton();
+            colorPopupComponent.steps.addInputToHexInputField('#558632');
+            colorPopupComponent.steps.clickOnOkButton();
+            utilities.verifyElementVisibilityState(textSelectionPage.dialogBox(), 'notExist');
+            textSelectionPage.steps.verifyColorBlockBackgroundColor(0, 'rgb(85, 134, 50)');
+            for (let index = 1; index < 5; index++) {
+                textSelectionPage.steps.verifyColorBlockBackgroundColor(index, defaultColorBlocks[index]);
+            }
+            textSelectionPage.steps.verifyStyleInSpecifyPossibleOptions('strikethrough', 0, 'rgb(85, 134, 50)');
+            textSelectionPage.steps.verifyStyleInSpecifyCorrectAnswer('strikethrough', 0, 'rgb(85, 134, 50)');
+        })
+    });
+
+    describe('Selecting a different color block and border style block for strikethrough style - edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            textSelectionPage.steps.setQuestionAndOptionsInEditTab();
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[0]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[1]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[2]);
+            textSelectionPage.steps.switchTextSelectionStyle('strikethrough');
+        });
+
+        it('User should be able to select a different color block and the newly selected color block\'s color should be applied to selected state of text selection in edit tab', () => {
+            for (let index = 0; index < 5; index++) {
+                textSelectionPage.steps.selectColorBlock(index);
+                textSelectionPage.steps.verifyColorBlockBackgroundColor(index, defaultColorBlocks[index]);
+                textSelectionPage.steps.verifyStyleInSpecifyPossibleOptions('strikethrough', 0, defaultColorBlocks[index]);
+                textSelectionPage.steps.verifyStyleInSpecifyCorrectAnswer('strikethrough', 0, defaultColorBlocks[index]);
+            }
+        });
+
+        it('User should be able to select a different border style block and the newly selected border block\'s style should be applied to selected state of text selection in edit tab', () => {
+            for (let index = 0; index < 3; index++) {
+                textSelectionPage.steps.selectBorderBlock(index);
+                textSelectionPage.steps.verifyBorderBlockIsSelected(index);
+                textSelectionPage.steps.verifyBorderStyleInSpecifyPossibleOptions('strikethrough', 0, borderBlocks[index]);
+                textSelectionPage.steps.verifyBorderStyleInSpecifyCorrectAnswer('strikethrough', 0, borderBlocks[index]);
+            }
+        });
+    });
+
+    describe('Selecting a different color block and border style block for strikethrough style - preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            textSelectionPage.steps.navigateToCreateQuestion('text selection');
+            cy.barsPreLoaderWait();
+            textSelectionPage.steps.expandStyleAndLayoutCustomizationAccordion();
+            textSelectionPage.steps.setQuestionAndOptionsInEditTab();
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[0]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[1]);
+            textSelectionPage.steps.selectOptionInSpecifyCorrectAnswerSection(paragraphTextArray[2]);
+            textSelectionPage.steps.switchTextSelectionStyle('strikethrough');
+        });
+
+        it('The newly selected color block\'s color should be applied to selected state of text selection in preview tab', () => {
+            for (let index = 0; index < 5; index++) {
+                textSelectionPage.steps.selectColorBlock(index);
+                textSelectionPage.steps.verifyColorBlockBackgroundColor(index, defaultColorBlocks[index]);
+                textSelectionPage.steps.switchToPreviewTab();
+                textSelectionPage.steps.selectOptionInPreviewTab(paragraphTextArray[0]);
+                textSelectionPage.steps.verifyStyleInPreview('strikethrough', 0, defaultColorBlocks[index]);
+                textSelectionPage.steps.switchToEditTab();
+            }
+        });
+
+        it('The newly selected border block\'s style should be applied to selected state of text selection in preview tab', () => {
+            for (let index = 0; index < 3; index++) {
+                textSelectionPage.steps.selectBorderBlock(index);
+                textSelectionPage.steps.verifyBorderBlockIsSelected(index);
+                textSelectionPage.steps.switchToPreviewTab();
+                textSelectionPage.steps.selectOptionInPreviewTab(paragraphTextArray[0]);
+                textSelectionPage.steps.verifyBorderStyleInPreview('strikethrough', 0, borderBlocks[index]);
+                textSelectionPage.steps.switchToEditTab();
+            }
+        });
+    });
+});