itemengine-cypress-automation 1.0.128 → 1.0.131-updateILCrepo6March-02c78d1.0

package/cypress/e2e/ILC/ContentBlocks/styleAndLayoutCustomizationSection.js

@@ -0,0 +1,392 @@
+import { contentBlocksPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const groupNavigationOptions = ['Continuous', 'Pagination', 'Sliders', 'Tabs'];
+const groupDividerStyleOptions = ['Solid', 'Dotted', 'Dashed'];
+
+describe('Style and layout customization section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Style and layout customization section - content', () => {
+        abortEarlySetup();
+        before(() => {
+            contentBlocksPage.steps.navigateToCreateResource('content blocks');
+        });
+
+        it('\'Style and layout customization\' label and info icon should be displayed', () => {
+            utilities.verifyInnerText(contentBlocksPage.styleAndLayoutCustomizationLabel(), 'Style and layout customization');
+            utilities.verifyElementVisibilityState(contentBlocksPage.styleAndLayoutCustomizationLabel(), 'visible');
+            utilities.verifyElementVisibilityState(contentBlocksPage.styleAndLayoutCustomizationInfoIcon(), 'visible'); //info
+        });
+
+        it('\'Group navigation\' label should be displayed', () => {
+            utilities.verifyInnerText(contentBlocksPage.groupNavigationLabel(), 'Group navigation');
+            utilities.verifyElementVisibilityState(contentBlocksPage.groupNavigationLabel(), 'visible');
+        });
+
+        it(`4 group navigation options ${groupNavigationOptions} should be displayed`, () => {
+            contentBlocksPage.steps.verifyGroupNavigationOptions(groupNavigationOptions);
+        });
+
+        it('By default \'Continuous\' group navigation should be selected', () => {
+            contentBlocksPage.steps.verifyGroupNavigationOptionSelected(0);
+        });
+
+        it('\'Group divider style\' label should be displayed', () => {
+            utilities.verifyInnerText(contentBlocksPage.groupDividerStyleLabel(), 'Group divider style');
+            utilities.verifyElementVisibilityState(contentBlocksPage.groupDividerStyleLabel(), 'visible');
+        });
+
+        it(`3 group divider style options ${groupDividerStyleOptions} should be displayed`, () => {
+            contentBlocksPage.steps.verifyGroupDividerStyleOptions(groupDividerStyleOptions);
+        });
+
+        it('By default \'Solid\' group divider style should be selected', () => {
+            contentBlocksPage.steps.verifyGroupDividerStyleOptionSelected(0);
+        });
+
+        it('By default group navigation options and group divider style options should be displayed in disabled state', () => {
+            utilities.verifyElementDisabledClass(contentBlocksPage.groupNavigationOptionButton(0));
+            utilities.verifyElementDisabledClass(contentBlocksPage.groupDividerStyleOptionButton(0));
+        });
+
+        it('When user clicks on \'Add group divider\' and adds group divider then group navigation options and group divider style options should be displayed in enabled state', () => {
+            contentBlocksPage.steps.addGroupDivider();
+            utilities.verifyElementVisibilityState(contentBlocksPage.groupDivider(), 'visible');
+            utilities.verifyElementNotDisabled(contentBlocksPage.groupNavigationOptionButton(0));
+            utilities.verifyElementNotDisabled(contentBlocksPage.groupDividerStyleOptionButton(0));
+        });
+
+        it('CSS of style and layout customization section', { tags: 'css' }, () => {
+            utilities.verifyCSS(contentBlocksPage.styleAndLayoutCustomizationLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(contentBlocksPage.groupDividerStyleOptionButton(0).find('.ngie-toggle-button-label'), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(contentBlocksPage.groupDividerStyleOptionButton(0), {
+                'border': `2px solid ${css.color.activeButtons}`
+            });
+            utilities.verifyCSS(contentBlocksPage.groupNavigationOptionButton(0).find('.ngie-toggle-button-label'), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(contentBlocksPage.groupNavigationOptionButton(0), {
+                'background-color': css.color.activeButtons
+            });
+            utilities.verifyCSS(contentBlocksPage.groupDividerStyleOptionButton(1).find('.ngie-toggle-button-label'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(contentBlocksPage.groupNavigationOptionButton(1).find('.ngie-toggle-button-label'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(contentBlocksPage.groupNavigationLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(contentBlocksPage.groupDividerStyleLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('Accessibility of style and layout customization section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(contentBlocksPage.styleAndLayoutCustomizationLabel().parents('[class*="ContentBlocksstyles__StyleLayoutWrapper"]'));
+        });
+    });
+
+    describe('Style and layout customization section - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            contentBlocksPage.steps.navigateToCreateResource('content blocks');
+            contentBlocksPage.steps.addGroupDivider();
+        });
+
+        it(`When \'Continuous\' group navigation is selected, then group divider style label with 3 options ${groupDividerStyleOptions} should be displayed`, () => {
+            contentBlocksPage.steps.verifyGroupNavigationOptionSelected(0);
+            contentBlocksPage.steps.verifyGroupDividerStyleOptions(groupDividerStyleOptions);
+        });
+
+        it('\'Solid\' group divider style should be selected by default', () => {
+            contentBlocksPage.steps.verifyGroupDividerStyleOptionSelected(0);
+        });
+
+        it('When the user selects option from the \'Group divider style\' section then the selected option should change', () => {
+            contentBlocksPage.steps.selectGroupDividerStyleOption(1);
+            contentBlocksPage.steps.verifyGroupDividerStyleOptionSelected(1);
+            contentBlocksPage.steps.verifyGroupDividerStyleOptionUnselected(0);
+        });
+
+        it('User should be able to select \'Pagination\' group navigation', () => {
+            contentBlocksPage.steps.selectGroupNavigationOption(1);
+            contentBlocksPage.steps.verifyGroupNavigationOptionSelected(1);
+            contentBlocksPage.steps.verifyGroupNavigationOptionUnselected(0);
+        });
+
+        it('When \'Pagination\' group navigation is selected, then group divider style label and options should not be displayed', () => {
+            utilities.verifyElementVisibilityState(contentBlocksPage.groupDividerStyleWrapper(), 'notExist');
+        });
+
+        it('User should be able to select \'Sliders\' group navigation', () => {
+            contentBlocksPage.steps.selectGroupNavigationOption(2);
+            contentBlocksPage.steps.verifyGroupNavigationOptionSelected(2);
+            contentBlocksPage.steps.verifyGroupNavigationOptionUnselected(1);
+        });
+
+        it('User should be able to select \'Tabs\' group navigation', () => {
+            contentBlocksPage.steps.selectGroupNavigationOption(3);
+            contentBlocksPage.steps.verifyGroupNavigationOptionSelected(3);
+            contentBlocksPage.steps.verifyGroupNavigationOptionUnselected(2);
+        });
+
+        it('When \'Tabs\' group navigation is selected, \'Tab prefix\' label and input field should be displayed', () => {
+            contentBlocksPage.steps.verifyGroupNavigationOptionSelected(3);
+            utilities.verifyInnerText(contentBlocksPage.tabsPrefixLabel(), 'Tab prefix');
+            utilities.verifyElementVisibilityState(contentBlocksPage.tabsPrefixLabel(), 'visible');
+            utilities.verifyElementVisibilityState(contentBlocksPage.tabsPrefixInputField(), 'visible');
+        });
+
+        it('By default \'Tab prefix\' input field should have \'Page\' text added', () => {
+            contentBlocksPage.steps.verifyTextInTabsPrefixInputField('Page');
+        });
+
+        it('User should be able to update text inside \'Tab prefix\' input field', () => {
+            contentBlocksPage.steps.enterTextInTabsPrefixInputField('Tab');
+        });
+    });
+
+    describe('Style and layout customization section - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            contentBlocksPage.steps.navigateToCreateResource('content blocks');
+            contentBlocksPage.steps.enterTextInTitleInputField('Accelerating Web Development with Efficient Testing Scripts');
+            contentBlocksPage.steps.enterTextInSubTitleInputField('Enhancing Code Quality and Reliability through Automated Testing');
+            contentBlocksPage.steps.enterTextInTextBlockInputField(0, 'By automating the testing process, developers can identify and address issues early in the development cycle, resulting in higher code quality and improved user experiences.');
+            contentBlocksPage.steps.addGroupDivider();
+            contentBlocksPage.steps.addSubTitle();
+            contentBlocksPage.steps.addTextBlock();
+            contentBlocksPage.steps.enterTextInBodySubTitleInputField(0, 'The Importance of Testing Scripts');
+            contentBlocksPage.steps.enterTextInTextBlockInputField(1, 'Testing scripts play a crucial role in the software development lifecycle by providing developers with a systematic approach to validate the functionality, performance, and security of their code.');
+            contentBlocksPage.steps.addGroupDivider();
+            contentBlocksPage.steps.addSubTitle();
+            contentBlocksPage.steps.addTextBlock();
+            contentBlocksPage.steps.enterTextInBodySubTitleInputField(1, 'Choosing the Right Testing Framework');
+            contentBlocksPage.steps.enterTextInTextBlockInputField(2, 'When it comes to selecting a testing framework for your web development projects, there are several factors to consider, including ease of use, compatibility with your technology stack, and community support.');
+        });
+
+        it('When \'Continuous\' group navigation is selected and user has added text to all input field, then added content should be displayed on the same page in preview tab', () => {
+            contentBlocksPage.steps.switchToPreviewTab();
+            contentBlocksPage.steps.verifyTitleTextPreviewTab('Accelerating Web Development with Efficient Testing Scripts');
+            contentBlocksPage.steps.verifySubTitleTextPreviewTab('Enhancing Code Quality and Reliability through Automated Testing');
+            contentBlocksPage.steps.verifyTextBlockTextPreviewTab(0, 'By automating the testing process, developers can identify and address issues early in the development cycle, resulting in higher code quality and improved user experiences.');
+            contentBlocksPage.steps.verifyGroupDividerPreviewTab(0);
+            contentBlocksPage.steps.verifyBodySubTitleTextPreviewTab(0, 'The Importance of Testing Scripts');
+            contentBlocksPage.steps.verifyTextBlockTextPreviewTab(1, 'Testing scripts play a crucial role in the software development lifecycle by providing developers with a systematic approach to validate the functionality, performance, and security of their code.');
+            contentBlocksPage.steps.verifyGroupDividerPreviewTab(1);
+            contentBlocksPage.steps.verifyBodySubTitleTextPreviewTab(1, 'Choosing the Right Testing Framework');
+            contentBlocksPage.steps.verifyTextBlockTextPreviewTab(2, 'When it comes to selecting a testing framework for your web development projects, there are several factors to consider, including ease of use, compatibility with your technology stack, and community support.');
+        });
+
+        it('Pagination text, sliders, tab list, Next button, previous button should not be displayed', () => {
+            utilities.verifyElementVisibilityState(contentBlocksPage.paginationText(), 'notExist');
+            utilities.verifyElementVisibilityState(contentBlocksPage.slidersWrapper(), 'notExist');
+            utilities.verifyElementVisibilityState(contentBlocksPage.tabListBoxWrapper(), 'notExist');
+            utilities.verifyElementVisibilityState(contentBlocksPage.nextPageButton(), 'notExist');
+            utilities.verifyElementVisibilityState(contentBlocksPage.previousPageButton(), 'notExist');
+        });
+
+        it('When \'Solid\' group divider style is selected in edit tab, then solid group divider should be displayed in preview tab', () => {
+            contentBlocksPage.steps.verifyGroupDividerStylePreviewTab(0, 'solid');
+            contentBlocksPage.steps.verifyGroupDividerStylePreviewTab(1, 'solid');
+        });
+
+        it('When user selects \'Dotted\' group divider style in edit tab, then dotted group divider should be displayed in preview tab', () => {
+            contentBlocksPage.steps.switchToEditTab();
+            contentBlocksPage.steps.selectGroupDividerStyleOption(1);
+            contentBlocksPage.steps.switchToPreviewTab();
+            contentBlocksPage.steps.verifyGroupDividerStylePreviewTab(0, 'dotted');
+            contentBlocksPage.steps.verifyGroupDividerStylePreviewTab(1, 'dotted');
+        });
+
+        it('When user selects \'Dashed\' group divider style in edit tab, then dashed group divider should be displayed in preview tab', () => {
+            contentBlocksPage.steps.switchToEditTab();
+            contentBlocksPage.steps.selectGroupDividerStyleOption(2);
+            contentBlocksPage.steps.switchToPreviewTab();
+            contentBlocksPage.steps.verifyGroupDividerStylePreviewTab(0, 'dashed');
+            contentBlocksPage.steps.verifyGroupDividerStylePreviewTab(1, 'dashed');
+        });
+
+        it('When user selects \'Pagination\' group navigation in edit tab, then added content should get divided into pages after every group divider', () => {
+            contentBlocksPage.steps.switchToEditTab();
+            contentBlocksPage.steps.selectGroupNavigationOption(1);
+            contentBlocksPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(contentBlocksPage.nextPageButton(), 'visible');
+            utilities.verifyElementVisibilityState(contentBlocksPage.previousPageButton(), 'visible');
+            contentBlocksPage.steps.verifyPaginationTextPreviewTab(1, 3);
+        });
+
+        it('Sliders and tab list button should not be displayed', () => {
+            utilities.verifyElementVisibilityState(contentBlocksPage.slidersWrapper(), 'notExist');
+            utilities.verifyElementVisibilityState(contentBlocksPage.tabListBoxWrapper(), 'notExist');
+        });
+
+        it('When the user is on the first page, the next button should be enabled and the previous button should be disabled', () => {
+            utilities.verifyElementDisabled(contentBlocksPage.previousPageButton());
+            utilities.verifyElementNotDisabled(contentBlocksPage.nextPageButton());
+        });
+
+        it('When user navigates through the pages then Pagination text should change accordingly', () => {
+            contentBlocksPage.steps.verifyTitleTextPreviewTab('Accelerating Web Development with Efficient Testing Scripts');
+            contentBlocksPage.steps.verifySubTitleTextPreviewTab('Enhancing Code Quality and Reliability through Automated Testing');
+            contentBlocksPage.steps.verifyTextBlockTextPreviewTab(0, 'By automating the testing process, developers can identify and address issues early in the development cycle, resulting in higher code quality and improved user experiences.');
+            contentBlocksPage.steps.verifyPaginationTextPreviewTab(1, 3);
+            cy.log('Switching to second page');
+            contentBlocksPage.steps.navigateToNextPage();
+            contentBlocksPage.steps.verifyTitleTextPreviewTab('Accelerating Web Development with Efficient Testing Scripts');
+            contentBlocksPage.steps.verifySubTitleTextPreviewTab('Enhancing Code Quality and Reliability through Automated Testing');
+            contentBlocksPage.steps.verifyBodySubTitleTextPreviewTab(0, 'The Importance of Testing Scripts');
+            contentBlocksPage.steps.verifyTextBlockTextPreviewTab(0, 'Testing scripts play a crucial role in the software development lifecycle by providing developers with a systematic approach to validate the functionality, performance, and security of their code.');
+            contentBlocksPage.steps.verifyPaginationTextPreviewTab(2, 3);
+            cy.log('Switching to third page');
+            contentBlocksPage.steps.navigateToNextPage();
+            contentBlocksPage.steps.verifyTitleTextPreviewTab('Accelerating Web Development with Efficient Testing Scripts');
+            contentBlocksPage.steps.verifySubTitleTextPreviewTab('Enhancing Code Quality and Reliability through Automated Testing');
+            contentBlocksPage.steps.verifyBodySubTitleTextPreviewTab(0, 'Choosing the Right Testing Framework');
+            contentBlocksPage.steps.verifyTextBlockTextPreviewTab(0, 'When it comes to selecting a testing framework for your web development projects, there are several factors to consider, including ease of use, compatibility with your technology stack, and community support.');
+            contentBlocksPage.steps.verifyPaginationTextPreviewTab(3, 3);
+        });
+
+        it('When the user is on the last page, then previous button should be enabled and the next button should be disabled', () => {
+            utilities.verifyElementDisabled(contentBlocksPage.nextPageButton());
+            utilities.verifyElementNotDisabled(contentBlocksPage.previousPageButton());
+        });
+
+        it('When the user is on the intermediate page then the \'Previous\' and \'Next\' button should be in enabled state', () => {
+            contentBlocksPage.steps.navigateToPreviousPage();
+            utilities.verifyElementNotDisabled(contentBlocksPage.nextPageButton());
+            utilities.verifyElementNotDisabled(contentBlocksPage.previousPageButton());
+        });
+
+        it('When the user hovers over the enabled \'Previous\' icon button then, \'Previous page\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the \'Previous\' icon button', () => {
+            contentBlocksPage.previousPageButton()
+                .verifyTooltip('Previous Page');
+        });
+
+        it('When the user hovers over the enabled \'Next\' icon button then, \'Next page\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the \'Next\' icon button', () => {
+            contentBlocksPage.nextPageButton()
+                .verifyTooltip('Next Page');
+        });
+
+        it('When user selects \'Sliders\' group navigation in edit tab, then added content should get divided into slides after every group divider', () => {
+            contentBlocksPage.steps.switchToEditTab();
+            contentBlocksPage.steps.selectGroupNavigationOption(2);
+            contentBlocksPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(contentBlocksPage.slidersWrapper(), 'visible');
+            utilities.verifyElementVisibilityState(contentBlocksPage.nextPageButton(), 'visible');
+            utilities.verifyElementVisibilityState(contentBlocksPage.previousPageButton(), 'visible');
+            utilities.verifyElementCount(contentBlocksPage.sliderButtonPreviewTab(), 3);
+        });
+
+        it('Pagination text and tab list should not be displayed', () => {
+            utilities.verifyElementVisibilityState(contentBlocksPage.paginationText(), 'notExist');
+            utilities.verifyElementVisibilityState(contentBlocksPage.tabListBoxWrapper(), 'notExist');
+        });
+
+        it('When the user is on the first page, the next button should be enabled and the previous button should be disabled', () => {
+            utilities.verifyElementDisabled(contentBlocksPage.previousPageButton());
+            utilities.verifyElementNotDisabled(contentBlocksPage.nextPageButton());
+        });
+
+        it('When user navigates through the slides then content should change accordingly', () => {
+            contentBlocksPage.steps.verifyTitleTextPreviewTab('Accelerating Web Development with Efficient Testing Scripts');
+            contentBlocksPage.steps.verifySubTitleTextPreviewTab('Enhancing Code Quality and Reliability through Automated Testing');
+            contentBlocksPage.steps.verifyTextBlockTextPreviewTab(0, 'By automating the testing process, developers can identify and address issues early in the development cycle, resulting in higher code quality and improved user experiences.');
+            contentBlocksPage.steps.verifyActiveSlide(0);
+            cy.log('Switching to second page');
+            contentBlocksPage.steps.navigateToSlide(1);
+            contentBlocksPage.steps.verifyTitleTextPreviewTab('Accelerating Web Development with Efficient Testing Scripts');
+            contentBlocksPage.steps.verifySubTitleTextPreviewTab('Enhancing Code Quality and Reliability through Automated Testing');
+            contentBlocksPage.steps.verifyBodySubTitleTextPreviewTab(0, 'The Importance of Testing Scripts');
+            contentBlocksPage.steps.verifyTextBlockTextPreviewTab(0, 'Testing scripts play a crucial role in the software development lifecycle by providing developers with a systematic approach to validate the functionality, performance, and security of their code.');
+            contentBlocksPage.steps.verifyActiveSlide(1);
+            cy.log('Switching to third page');
+            contentBlocksPage.steps.navigateToSlide(2);
+            contentBlocksPage.steps.verifyTitleTextPreviewTab('Accelerating Web Development with Efficient Testing Scripts');
+            contentBlocksPage.steps.verifySubTitleTextPreviewTab('Enhancing Code Quality and Reliability through Automated Testing');
+            contentBlocksPage.steps.verifyBodySubTitleTextPreviewTab(0, 'Choosing the Right Testing Framework');
+            contentBlocksPage.steps.verifyTextBlockTextPreviewTab(0, 'When it comes to selecting a testing framework for your web development projects, there are several factors to consider, including ease of use, compatibility with your technology stack, and community support.');
+            contentBlocksPage.steps.verifyActiveSlide(2);
+        });
+
+        it('When the user is on the last slide, the previous button should be enabled and the next button should be disabled', () => {
+            utilities.verifyElementDisabled(contentBlocksPage.nextPageButton());
+            utilities.verifyElementNotDisabled(contentBlocksPage.previousPageButton());
+        });
+
+        it('When the user is on the intermediate slide then the \'Previous\' and \'Next\' button should be in enabled state', () => {
+            contentBlocksPage.steps.navigateToSlide(1);
+            utilities.verifyElementNotDisabled(contentBlocksPage.nextPageButton());
+            utilities.verifyElementNotDisabled(contentBlocksPage.previousPageButton());
+        });
+
+        it('When user selects \'Tabs\' group navigation and tab prefix input field has \'Page\' text added in edit tab, then added content should get divided into tabs after every group divider and tab list with 3 labels \'Page 1\', \'Page 2\' and \'Page 3\' in preview tab', () => {
+            contentBlocksPage.steps.switchToEditTab();
+            contentBlocksPage.steps.selectGroupNavigationOption(3);
+            contentBlocksPage.steps.verifyTextInTabsPrefixInputField('Page');
+            contentBlocksPage.steps.switchToPreviewTab();
+            utilities.verifyElementCount(contentBlocksPage.tabListButton(), 3);
+            utilities.verifyElementVisibilityState(contentBlocksPage.tabListBoxWrapper(), 'visible');
+            contentBlocksPage.steps.verifyTabListButtonLabel(3, 'Page');
+        });
+
+        it('Pagination text, sliders, next button, previous button should not be displayed', () => {
+            utilities.verifyElementVisibilityState(contentBlocksPage.paginationText(), 'notExist');
+            utilities.verifyElementVisibilityState(contentBlocksPage.slidersWrapper(), 'notExist');
+            utilities.verifyElementVisibilityState(contentBlocksPage.nextPageButton(), 'notExist');
+            utilities.verifyElementVisibilityState(contentBlocksPage.previousPageButton(), 'notExist');
+        });
+
+        it('When user navigates through the tabs then content should change accordingly', () => {
+            contentBlocksPage.steps.verifyTitleTextPreviewTab('Accelerating Web Development with Efficient Testing Scripts');
+            contentBlocksPage.steps.verifySubTitleTextPreviewTab('Enhancing Code Quality and Reliability through Automated Testing');
+            contentBlocksPage.steps.verifyTextBlockTextPreviewTab(0, 'By automating the testing process, developers can identify and address issues early in the development cycle, resulting in higher code quality and improved user experiences.');
+            contentBlocksPage.steps.verifyActiveTab(0);
+            cy.log('Switching to second page');
+            contentBlocksPage.steps.navigateToTab(1);
+            contentBlocksPage.steps.verifyTitleTextPreviewTab('Accelerating Web Development with Efficient Testing Scripts');
+            contentBlocksPage.steps.verifySubTitleTextPreviewTab('Enhancing Code Quality and Reliability through Automated Testing');
+            contentBlocksPage.steps.verifyBodySubTitleTextPreviewTab(0, 'The Importance of Testing Scripts');
+            contentBlocksPage.steps.verifyTextBlockTextPreviewTab(0, 'Testing scripts play a crucial role in the software development lifecycle by providing developers with a systematic approach to validate the functionality, performance, and security of their code.');
+            contentBlocksPage.steps.verifyActiveTab(1);
+            cy.log('Switching to third page');
+            contentBlocksPage.steps.navigateToTab(2);
+            contentBlocksPage.steps.verifyTitleTextPreviewTab('Accelerating Web Development with Efficient Testing Scripts');
+            contentBlocksPage.steps.verifySubTitleTextPreviewTab('Enhancing Code Quality and Reliability through Automated Testing');
+            contentBlocksPage.steps.verifyBodySubTitleTextPreviewTab(0, 'Choosing the Right Testing Framework');
+            contentBlocksPage.steps.verifyTextBlockTextPreviewTab(0, 'When it comes to selecting a testing framework for your web development projects, there are several factors to consider, including ease of use, compatibility with your technology stack, and community support.');
+            contentBlocksPage.steps.verifyActiveTab(2);
+        });
+
+        it('When user updates text in Tab prefix input field, then tab list options should be updated in preview tab', () => {
+            contentBlocksPage.steps.switchToEditTab();
+            contentBlocksPage.steps.enterTextInTabsPrefixInputField('Tab');
+            contentBlocksPage.steps.switchToPreviewTab();
+            contentBlocksPage.steps.verifyTabListButtonLabel(3, 'Tab');
+        });
+    });
+});

package/cypress/e2e/ILC/DrawingResponse/drawingResponseAdditionalSettings.js

@@ -213,7 +213,7 @@ describe('Drawing response - Additional settings', () => {
         });
 
         it('When all line type buttons are selected by default then all the line type options should be displayed in secondary toolbar in the preview tab', () => {
-            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption('Line type');
+            drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption('Line Type');
             lineTypeOptionsPreviewTab.forEach((lineType, index) => {
                 drawingResponsePage.steps.verifySecondaryPopupLineType(lineType, index)
             });

package/cypress/e2e/ILC/DrawingResponse/drawingResponseBackground.js

@@ -3,7 +3,7 @@ import abortEarlySetup from "../../../support/helpers/abortEarly";
 import utilities from "../../../support/helpers/utilities";
 
 const css = Cypress.env('css');
-const defaultToolbarAndControlOptions = ['Select', 'Scribble', 'Line', 'Curved line', 'Capture image', 'Insert image', 'Text', 'Point eraser', 'Bring to front', 'Send to back', 'Duplicate', 'Undo', 'Redo', 'Full screen', 'Clear all'];
+const defaultToolbarAndControlOptions = ['Select', 'Scribble', 'Line', 'Curved line', 'Capture image', 'Insert image', 'Text', 'Point eraser', 'bring to front', 'send to back', 'Duplicate', 'Undo', 'Redo', 'Full screen', 'Clear all'];
 const patterns = ['Grid', 'Lines', 'Dots', 'Circular', 'Graph', 'Quadrant'];
 const orientationOptions = ['Portrait', 'Landscape', 'Square'];
 const imageAlternativeText = ['Grid pattern of evenly spaced horizontal and vertical lines', 'Line pattern of evenly spaced horizontal lines', 'Dot pattern of evenly spaced horizontal and vertical dots', 'Circular pattern of evenly spaced concentric circles', 'Graph pattern of evenly spaced horizontal and vertical lines', 'Quadrant pattern of evenly spaced horizontal and vertical lines'];

package/cypress/e2e/ILC/DrawingResponse/drawingResponseCustomizeAdditionalOptions.js

@@ -24,6 +24,7 @@ describe('Create item page - Drawing response: Customize special characters, Cus
             cy.barsPreLoaderWait();
             drawingResponsePage.steps.expandCustomizeToolbarOptionsAndControlsAccordion();
             drawingResponsePage.steps.selectOptionsTiles([`${drawingToolbarOptionsAndAdditionalOptions.additionalOptions[0]}`]);
+            drawingResponsePage.steps.checkCustomizeSpecialCharactersCheckbox();
         });
 
         drawingResponsePage.tests.verifyCustomSpecialCharactersEditTabContent();
@@ -33,7 +34,7 @@ describe('Create item page - Drawing response: Customize special characters, Cus
             drawingResponsePage.steps.switchToPreviewTab();
             drawingResponsePage.steps.selectPreviewTabToolbarOption('Text');
             drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption('Special characters');
-            //drawingResponsePage.steps.verifySpecialCharactersPopupCategorySymbols(specialCharacters);
+            drawingResponsePage.steps.verifySpecialCharactersPopupCategorySymbols(specialCharacters);
             //Add this verification once https://redmine.zeuslearning.com/issues/555008 is resolved
             cy.log('Post-step: Switching to edit tab');
             drawingResponsePage.steps.switchToEditTab();

package/cypress/e2e/ILC/DrawingResponse/drawingResponseGradingViewAndCorrectAnswerViewContents.smoke.js

@@ -6,7 +6,8 @@ let gradingAndCorrectAnsView = ['Grading view', 'Correct answer view']
 const views = utilities.getViews(gradingAndCorrectAnsView);
 var itemReferenceID = "";
 
-const defaultToolbarAndControlOptions = ['Select', 'Scribble', 'Line', 'Curved line', 'Capture image', 'Insert image', 'Text', 'Point eraser', 'Bring to front', 'Send to back', 'Duplicate', 'Undo', 'Redo', 'Full screen', 'Clear all'];
+//TODO- Update https://redmine.zeuslearning.com/issues/563177
+const defaultToolbarAndControlOptions = ['Select', 'Scribble', 'Line', 'Curved line', 'Capture image', 'Insert image', 'Text', 'Point eraser', 'bring to front', 'send to back', 'Duplicate', 'Undo', 'Redo', 'Full screen', 'Clear all'];
 
 describe('Create item page - Drawing response: Grading view, Correct answer view contents', () => {
     before(() => {

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

@@ -119,6 +119,7 @@ describe('Essay response: Customize math characters', () => {
             cy.barsPreLoaderWait();
             essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
             essayResponsePage.steps.selectCustomizedFormattingOption(['Special Characters'])
+            essayResponsePage.steps.checkCustomizeSpecialCharactersCheckbox();
         });
 
         essayResponsePage.tests.verifyCustomSpecialCharactersEditTabContent();

package/cypress/e2e/ILC/FillInTheGapsDragAndDropNew/Scoring/allOrNothingGroupedScoring.js

@@ -0,0 +1,152 @@
+import { fillInTheGapsDragAndDropPage } from "../../../../pages";
+import abortEarlySetup from "../../../../support/helpers/abortEarly";
+import utilities from "../../../../support/helpers/utilities";
+
+describe('Create item page - Fill in the gaps with drag and drop: All or nothing with grouped options layout', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Auto scored - All or nothing scoring for grouped options', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.addTextInQuestionInstructionsInputField('Drag and drop options into correct dropzone');
+            fillInTheGapsDragAndDropPage.steps.addResponseArea();
+            fillInTheGapsDragAndDropPage.steps.setGroupedOptions();
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Petals': 0, 'Leaves': 1, 'Stem': 2 });
+            fillInTheGapsDragAndDropPage.steps.allotPoints(20);
+            fillInTheGapsDragAndDropPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user selects \'Grading\' view without attempting the question, dropzone numeration should be displayed, correct answers section with a label \'Correct answers\' should be displayed with correct answers and respective option numeration', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyPreviewScore(0, 20);
+            fillInTheGapsDragAndDropPage.steps.switchToGradingView();
+            fillInTheGapsDragAndDropPage.steps.verifyPreviewTabPointsBackgroundForIncorrectOrPartiallyCorrectAnswer();
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneNumeration();
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.correctAnswersLabel(), 'Correct answers');
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount([['Petals'], ['Leaves'], ['Stem']]);
+        });
+
+        it('When the user attempts the question incorrectly, then the user should be awarded 0 points and on switching to \'Grading\' view, incorrect icons should be displayed besides all incorrect responses, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers along with numeration should be displayed', () => {
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Leaves': 0, 'Petals': 1, 'Branch': 2 });
+            fillInTheGapsDragAndDropPage.steps.verifyPreviewScore(0, 20);
+            fillInTheGapsDragAndDropPage.steps.switchToGradingView();
+            fillInTheGapsDragAndDropPage.steps.verifyIncorrectOptionIcon(0);
+            fillInTheGapsDragAndDropPage.steps.verifyIncorrectOptionIcon(1);
+            fillInTheGapsDragAndDropPage.steps.verifyIncorrectOptionIcon(2);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount([['Petals'], ['Leaves'], ['Stem']]);
+            fillInTheGapsDragAndDropPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user has attempted the question incorrectly and clicks on \'Check answer\' button, then incorrect icon should be displayed besides the  dropzone, a status message with text \'Your answer is incorrect\' should be displayed and correct answer section should not be displayed')
+            fillInTheGapsDragAndDropPage.steps.checkAnswer();
+            fillInTheGapsDragAndDropPage.steps.verifyIncorrectOptionIcon(0);
+            fillInTheGapsDragAndDropPage.steps.verifyIncorrectOptionIcon(1);
+            fillInTheGapsDragAndDropPage.steps.verifyIncorrectOptionIcon(2);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts the question partially correct with some correct, some incomplete, some incorrect options, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the correct answer responses, incorrect icon should be displayed besides incorrect answer response, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers along with numeration should be displayed', () => {
+            fillInTheGapsDragAndDropPage.steps.resetQuestionPreview();
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Petals': 0, 'Branch': 2 });
+            fillInTheGapsDragAndDropPage.steps.switchToGradingView();
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectIconNotExist(1);
+            fillInTheGapsDragAndDropPage.steps.verifyIncorrectOptionIcon(2);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount([['Petals'], ['Leaves'], ['Stem']]);
+            fillInTheGapsDragAndDropPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user attempts the question partially correct with some correct, some incomplete, some incorrect options and clicks on \'Check answer\' button, then incorrect icon should be displayed besides the dropzone incorrect response and correct icon should be displayed beside the correct response, a status message with text \'Your answer is incorrect\' should be displayed and correct answer section should not be displayed')
+            fillInTheGapsDragAndDropPage.steps.checkAnswer();
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectIconNotExist(1);
+            fillInTheGapsDragAndDropPage.steps.verifyIncorrectOptionIcon(2);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts the question partially correct with all the dropzone correctly attempted but one dropzone incomplete, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the correct answer responses, incorrect icon should be displayed besides incorrect answer response, a status message with text \'Your answer is incorrect\' and correct answer section with all correct answers along with numeration should be displayed', () => {
+            fillInTheGapsDragAndDropPage.steps.resetQuestionPreview();
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Leaves': 1, 'Stem': 2 })
+            fillInTheGapsDragAndDropPage.steps.verifyPreviewScore(0, 20);
+            fillInTheGapsDragAndDropPage.steps.switchToGradingView();
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectIconNotExist(0);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionIcon(1);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionIcon(2);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount([['Petals'], ['Leaves'], ['Stem']]);
+            fillInTheGapsDragAndDropPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user attempts the question partially correct with all the dropzone correctly attempted but one dropzone incomplete and clicks on \'Check answer\' button, then no icon should be displayed besides the incomplete and correct icon should be displayed beside the correct response, a status message with text \'Your answer is incorrect\' should be displayed and correct answer section should not be displayed')
+            fillInTheGapsDragAndDropPage.steps.checkAnswer();
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectIconNotExist(0);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionIcon(1);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionIcon(2);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts the question partially correct with all the dropzone correctly attempted but with an extra option which is not set as correct answer, then the user should be awarded 0 points and on switching to \'Grading\' view, correct icon should be displayed besides the correct answer responses, incorrect icon should be displayed besides incorrect answer response, a status message with text \'Your answer is incorrect\' and correct answer section should be displayed along with numeration', () => {
+            fillInTheGapsDragAndDropPage.steps.resetQuestionPreview();
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Petals': 0, 'Leaves': 1, 'Branch': 1, 'Stem': 2 });
+            fillInTheGapsDragAndDropPage.steps.verifyPreviewScore(0, 20);
+            fillInTheGapsDragAndDropPage.steps.switchToGradingView();
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDragAndDropPage.steps.verifyIncorrectOptionIcon(1);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionIcon(2);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount([['Petals'], ['Leaves'], ['Stem']]);
+            fillInTheGapsDragAndDropPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user attempts the question partially correct with all the dropzone correctly attempted but with an extra option which is not set as correct answer and clicks on \'Check answer\' button, correct icon should be displayed besides the correct answer responses, incorrect icon should be displayed besides incorrect answer response, a status message with text \'Your answer is incorrect\' should be displayed and correct answer section should not be displayed')
+            fillInTheGapsDragAndDropPage.steps.checkAnswer();
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDragAndDropPage.steps.verifyIncorrectOptionIcon(1);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionIcon(2);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When the user attempts question with the common option from another group then the user should be awarded 0 points and on switching to \'Grading\' view, incorrect icon should be displayed besides incorrect answer response, a status message with text \'Your answer is incorrect\' and correct answer section should be displayed along with numeration', () => {
+            fillInTheGapsDragAndDropPage.steps.resetQuestionPreview();
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionFromNthGroupInDropzonePreviewTab([{ responseText: 'Petals', groupIndex: 3, dropzoneIndex: 0 }]);
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Leaves': 1, 'Stem': 2 });
+            fillInTheGapsDragAndDropPage.steps.verifyPreviewScore(0, 20);
+            fillInTheGapsDragAndDropPage.steps.switchToGradingView();
+            fillInTheGapsDragAndDropPage.steps.verifyIncorrectOptionIcon(0);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionIcon(1);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionIcon(2);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount([['Petals'], ['Leaves'], ['Stem']]);
+            fillInTheGapsDragAndDropPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When the user attempts the question with the common option from another group then the user should be awarded and clicks on \'Check answer\' button, incorrect icon should be displayed besides incorrect answer response, a status message with text \'Your answer is incorrect\' should be displayed and correct answer section should not be displayed')
+            fillInTheGapsDragAndDropPage.steps.checkAnswer();
+            fillInTheGapsDragAndDropPage.steps.verifyIncorrectOptionIcon(0);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionIcon(1);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionIcon(2);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('incorrect');
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+
+        it('When user attempts the question correctly, the user should be awarded full points and on switching to \'Grading\' view, then correct icons should be displayed beside all the correct responses, correct icon should be displayed besides the correct answer responses, a status message with text \'Your answer is correct\' and correct answer section should not be displayed', () => {
+            fillInTheGapsDragAndDropPage.steps.resetQuestionPreview();
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Petals': 0, 'Leaves': 1, 'Stem': 2 });
+            fillInTheGapsDragAndDropPage.steps.verifyPreviewScore(20, 20);
+            fillInTheGapsDragAndDropPage.steps.switchToGradingView();
+            fillInTheGapsDragAndDropPage.steps.verifyPreviewTabPointsBackgroundForCorrectAnswer();
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionIcon(1);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionIcon(2);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectAnswerSectionNotExists();
+            fillInTheGapsDragAndDropPage.steps.verifyQuestionPreviewStateWhenSwitchingBackToStudentView();
+            cy.log('When user attempts the question correctly and clicks on \'Check answer\' button, correct icon should be displayed besides the correct answer responses, a status message with text \'Your answer is correct\' should be displayed and correct answer section should not be displayed')
+            fillInTheGapsDragAndDropPage.steps.checkAnswer();
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionIcon(1);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectOptionIcon(2);
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectIncorrectAnswerLabel('correct');
+            fillInTheGapsDragAndDropPage.steps.verifyCorrectAnswerSectionNotExists();
+        });
+    });
+});