itemengine-cypress-automation 1.0.151-28MarchRepoUpdate-4cfb82e.0 → 1.0.151

package/cypress/pages/gridFillPage.js

@@ -36,26 +36,51 @@ const selectors = {
     specifyPointsForEachIncorrectCellRadioButton: () => cy.get('input[aria-label*="Specify points for each incorrect"]'),
     cellShadeCountInputField: () => cy.get('.grid-fill-response-wrapper [aria-label="labeling"]'),
     matchExactPositionOfCellsCheckbox: () => cy.get('input[aria-label="Match exact position of cells"]'),
-    gridSpecifyCorrectAnswerSection: () => cy.get('[class*="AnswerAccordionstyles__AnswerPanel"] .grid-wrapper-cls'),
+    gridSpecifyCorrectAnswerSection: () => cy.get('[class*="AnswerAccordionstyles__AnswerPanel"] [class*="GridFillResponsestyles__GridWrapper"]'),
     gridRow: () => cy.get('[class*="GridFillResponsestyles__RowContainer"]'),
     cellShadeCountLabel: () => cy.get('[class*="GridFillResponsestyles__CellFillCountLabel"]'),
     cellShadeCountInputField: () => cy.get('.cell-count-cls input'),
+    penaltyPointsForEachIncorrectCellInputField: () => cy.get('input[aria-label="Penalty points for each incorrect cell"]'),
+    //student view settings
+    maxSelectedCellLabel: () => cy.get('[class*="MaxSelectedCellsstyles__MaxCellsLabel"]'),
+    maxSelectedCellInputField: () => cy.get('input[aria-label="Max selected cells"]'),
     //Customize layout accordion
     customizeLayoutAccordionButton: () => cy.get('.customize-layout-wrapper-cls .ngie-accordion-summary'),
     customizeLayoutLabel: () => cy.get('[class*="AdditionalGridFillSettingsstyles__StyledLabel"]'),
     customizeLayoutAccordionChevronButton: () => cy.get('.customize-layout-wrapper-cls [class*="MuiAccordionSummary-expandIconWrapper "]'),
+    shadeTheCellLabel: () => cy.get('[class*="AdditionalGridFillSettingsstyles__LabelTextWrapper"]'),
     shadeCellButton: () => cy.get('.single-select-toggle-group button').eq(0),
     hideCellButton: () => cy.get('.single-select-toggle-group button').eq(1),
+    shadedCellIcon: () => cy.get('[class*="GridFillResponsestyles__CellHideFillIconWrapper"] g[id*="Group"]'),
+    hiddenCellIcon: () => cy.get('[class*="GridFillResponsestyles__CellHideFillIconWrapper"] #Hide_cell'),
+    gridCustomizeLayoutSection: () => cy.get('.customize-layout-wrapper-cls [class*="GridFillResponsestyles__GridWrapper"]'),
     cellInCustomizeLayout: () => cy.get('[id*="Response-cell"]'),
     rowsWrapperCustomizeLayout: () => cy.get('.customize-layout-wrapper-cls [class*="GridFillResponsestyles__RowContainer"]'),
-    penaltyPointsForEachIncorrectCellInputField: () => cy.get('input[aria-label="Penalty points for each incorrect cell"]'),
-    //student view settings
-    maxSelectedCellLabel: () => cy.get('[class*="MaxSelectedCellsstyles__MaxCellsLabel"]'),
-    maxSelectedCellInputField: () => cy.get('input[aria-label="Max selected cells"]'),
+    lockShadedCellsCheckbox: () => cy.get('[data-ngie-testid="lock-shaded-cells-checkbox"] input'),
+    lockShadedCellsLabel: () => cy.get('[data-ngie-testid="lock-shaded-cells-checkbox"] [class*="label"]'),
+    outlineCellOnHoverCheckbox: () => cy.get('[data-ngie-testid="outline-cell-on-hover-checkbox"] input'),
+    outlineCellOnHoverLabel: () => cy.get('[data-ngie-testid="outline-cell-on-hover-checkbox"] [class*="label"]'),
+    canvasTitleLabel: () => cy.get('.canvas-title-wrapper .text-label'),
+    canvasTitleInputField: () => cy.get('.canvas-title-wrapper input'),
+    gridBordersTitle: () => cy.get('.single-select-toggle-group-title').eq(1),
+    fullGridToggleButton: () => cy.get('.single-select-toggle-group-double button').eq(0),
+    onlyBorderToggleButton: () => cy.get('.single-select-toggle-group-double button').eq(1),
+    noneToggleButton: () => cy.get('.single-select-toggle-group-double button').eq(2),
+    gridBorderStyleTitle: () => cy.get('.single-select-toggle-group-title').eq(2),
+    solidToggleButton: () => cy.get('.single-select-toggle-group-double button').eq(3),
+    dashedToggleButton: () => cy.get('.single-select-toggle-group-double button').eq(4),
+    dottedToggleButton: () => cy.get('.single-select-toggle-group-double button').eq(5),
+    outerGridBorderTitle: () => cy.get('[class*="CustomizedGridstyles__SwitchLabelWrapper"]'),
+    outerGridBorderSwitch: () => cy.get('[class*="CustomizedGridstyles__OuterGridWrapper"] [class*="MuiSwitch-switchBase"]'),
+
+    //Fill type section
+    fillTypeLabel: () => cy.get('[class*="CustomizedGridstyles__LabelTextWrapper"]'),
+
     //Preview tab
-    gridWrapperPreviewTab: () => cy.get('[class*="GridFillResponsestyles__MatrixContainer"]:visible'),
+    gridWrapperPreviewTab: () => cy.get('[class*="GridFillResponsestyles__GridWrapper"]:visible'),
     cellInPreviewTab: () => cy.get('[class*="GridFillResponsestyles__CellContainer"]:visible'),
     rowsWrapperPreviewTab: () => cy.get('[class*="GridFillResponsestyles__RowContainer"]:visible'),
+    canvasTitlePreviewTab: () => cy.get('[class*="GridFillResponsestyles__CanvasTitleWrapper"]'),
     warningMessageContainer: () => cy.get('.disabled-wrapper-cls'),
     warningMessage: () => cy.get('.disabled-wrapper-cls [class*="DisabledTextWrapper"]'),
 }
@@ -144,6 +169,20 @@ const steps = {
             .click();
     },
 
+    verifyCustomizeLayoutAccordionIsCollapsed: () => {
+        gridFillPage.customizeLayoutAccordionButton()
+            .should('have.attr', 'aria-expanded', 'false');
+        gridFillPage.customizeLayoutAccordionChevronButton()
+            .should('not.have.class', 'Mui-expanded');
+    },
+
+    verifyCustomizeLayoutAccordionIsExpanded: () => {
+        gridFillPage.customizeLayoutAccordionButton()
+            .should('have.attr', 'aria-expanded', 'true');
+        gridFillPage.customizeLayoutAccordionChevronButton()
+            .should('have.class', 'Mui-expanded');
+    },
+
     selectShadeCellButton: () => {
         gridFillPage.shadeCellButton()
             .click()
@@ -156,6 +195,55 @@ const steps = {
             .should('have.class', 'Mui-selected');
     },
 
+    verifyShadeCellButtonIsSelected: () => {
+        gridFillPage.shadeCellButton()
+            .should('have.class', 'Mui-selected');
+    },
+
+    verifyHideCellButtonIsNotSelected: () => {
+        gridFillPage.hideCellButton()
+            .should('not.have.class', 'Mui-selected');
+    },
+
+    verifyHideCellButtonIsSelected: () => {
+        gridFillPage.hideCellButton()
+            .should('have.class', 'Mui-selected');
+    },
+
+    /**
+    * @description Verify cell is not selected in customize lay section
+    * @param {number} rowIndex Index of row in grid of customize lay section
+    * @param {number} columnIndex Index of column in grid of customize lay section
+    */
+    verifyCellNotShadedCustomizeLayoutSection: (rowIndex, columnIndex) => {
+        gridFillPage.gridCustomizeLayoutSection()
+            .within(() => {
+                utilities.getNthElement(gridFillPage.gridRow(), rowIndex)
+                    .within(() => {
+                        utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex)
+                            .invoke('attr', 'aria-label')
+                            .should('not.include', 'fillCell');
+                    });
+            });
+    },
+
+    /**
+    * @description Verify cell is selected in customize lay section
+    * @param {number} rowIndex Index of row in grid of customize lay section
+    * @param {number} columnIndex Index of column in grid of customize lay section
+    */
+    verifyCellIsShadedCustomizeLayoutSection: (rowIndex, columnIndex) => {
+        gridFillPage.gridCustomizeLayoutSection()
+            .within(() => {
+                utilities.getNthElement(gridFillPage.gridRow(), rowIndex)
+                    .within(() => {
+                        utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex)
+                            .invoke('attr', 'aria-label')
+                            .should('include', 'fillCell');
+                    });
+            });
+    },
+
     /**
      * Shades a cell in the customize layout.
      * @param {number} rowIndex - The index of the row containing the cell.
@@ -167,12 +255,12 @@ const steps = {
                 utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), columnIndex)
                     .click()
                     .invoke('attr', 'aria-label')
-                    .should('include', 'fillCell');
+                    .should('include', 'Shade cell');
             });
     },
 
     /**
-     * Unshades a cell in the customize layout.
+     * Un-shade a cell in the customize layout.
      * @param {number} rowIndex - The index of the row containing the cell.
      * @param {number} columnIndex - The index of the column containing the cell.
      */
@@ -182,7 +270,7 @@ const steps = {
                 utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), columnIndex)
                     .click()
                     .invoke('attr', 'aria-label')
-                    .should('not.include', 'fillCell');
+                    .should('not.include', 'Shade cell');
             });
     },
 
@@ -233,7 +321,30 @@ const steps = {
                 utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), columnIndex)
                     .click()
                     .invoke('attr', 'aria-label')
-                    .should('include', 'hideCell');
+                    .should('include', 'Hide cell');
+                utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), columnIndex)
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(gridFillPage.hiddenCellIcon(), 'exist');
+                    });
+            });
+    },
+
+    /**
+     * Un-hides a cell in the customize layout.
+     * @param {number} rowIndex - The index of the row containing the cell.
+     * @param {number} columnIndex - The index of the column containing the cell.
+     */
+    unHideCell: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperCustomizeLayout(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), columnIndex)
+                    .click()
+                    .invoke('attr', 'aria-label')
+                    .should('not.include', 'Hide cell');
+                utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), columnIndex)
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(gridFillPage.shadedCellIcon(), 'notExist');
+                    });
             });
     },
 
@@ -331,7 +442,7 @@ const steps = {
     verifyHideCustomizedCellPreviewTab: (index) => {
         utilities.getNthElement(gridFillPage.cellInPreviewTab(), index)
             .invoke('attr', 'aria-label')
-            .should('include', 'hideCell');
+            .should('include', 'Hide cell');
     },
 
     /**
@@ -362,6 +473,20 @@ const steps = {
             });
     },
 
+    /**
+     * Verifies if a cell in the specify correct answer section is hidden.
+     * @param {number} rowIndex - The index of the row containing the cell.
+     * @param {number} columnIndex - The index of the column containing the cell.
+     */
+    verifyHideCustomizedCellSpecifyCorrectAnswerSection: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperSpecifyCorrectAnswerSection(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex)
+                    .invoke('attr', 'aria-label')
+                    .should('include', 'hideCell');
+            });
+    },
+
     /**
      * Verifies if a cell in the preview tab is hidden.
      * @param {number} rowIndex - The index of the row containing the cell.
@@ -372,7 +497,21 @@ const steps = {
             .within(() => {
                 utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
                     .invoke('attr', 'aria-label')
-                    .should('include', 'hideCell');
+                    .should('include', 'Hide cell');
+            });
+    },
+
+    /**
+     * Verifies cell in the specify correct answer section is not hidden.
+     * @param {number} rowIndex - The index of the row containing the cell.
+     * @param {number} columnIndex - The index of the column containing the cell.
+     */
+    verifyCellNotHiddenSpecifyCorrectAnswerSection: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperSpecifyCorrectAnswerSection(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex)
+                    .invoke('attr', 'aria-label')
+                    .should('not.include', 'hideCell');
             });
     },
 
@@ -435,7 +574,32 @@ const steps = {
             for (let columnIndex = 0; columnIndex < 5; columnIndex++) {
                 gridFillPage.steps.verifyCellNotSelectedSpecifyCorrectAnswerSection(rowIndex, columnIndex);
             }
-        }
+        };
+        gridFillPage.gridSpecifyCorrectAnswerSection()
+            .within(() => {
+                utilities.verifyElementCount(gridFillPage.gridRow(), 3);
+                utilities.getNthElement(gridFillPage.gridRow(), 0)
+                    .within(() => {
+                        utilities.verifyElementCount(gridFillPage.cellInEditTab(), 5);
+                    });
+            });
+    },
+
+    verifyDefaultGridInCustomizeLayoutSection: () => {
+        utilities.verifyElementVisibilityState(gridFillPage.gridCustomizeLayoutSection(), 'visible');
+        for (let rowIndex = 0; rowIndex < 3; rowIndex++) {
+            for (let columnIndex = 0; columnIndex < 5; columnIndex++) {
+                gridFillPage.steps.verifyCellNotShadedCustomizeLayoutSection(rowIndex, columnIndex);
+            }
+        };
+        gridFillPage.gridCustomizeLayoutSection()
+            .within(() => {
+                utilities.verifyElementCount(gridFillPage.gridRow(), 3);
+                utilities.getNthElement(gridFillPage.gridRow(), 0)
+                    .within(() => {
+                        utilities.verifyElementCount(gridFillPage.cellInEditTab(), 5);
+                    });
+            });
     },
 
     /**
@@ -572,7 +736,6 @@ const steps = {
 
     /**
      * @description Verifies the count of columns in a row in the preview tab.
-     * @param {number} rowsIndex - The index of the row to verify.
      * @param {number} columnsLength - The expected count of cells in the row.
      */
     verifyColumnsCountPreviewTab: (lengthColumns) => {
@@ -582,6 +745,478 @@ const steps = {
             });
     },
 
+    verifyOutlineCellOnHoverCheckboxIsChecked: () => {
+        gridFillPage.outlineCellOnHoverCheckbox()
+            .should('be.checked');
+    },
+
+    verifyLockShadedCellsCheckboxIsUnchecked: () => {
+        gridFillPage.lockShadedCellsCheckbox()
+            .should('not.be.checked');
+    },
+
+    checkLockShadedCellsCheckbox: () => {
+        gridFillPage.lockShadedCellsCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    uncheckLockShadedCellsCheckbox: () => {
+        gridFillPage.lockShadedCellsCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    uncheckOutlineCellOnHoverCheckbox: () => {
+        gridFillPage.outlineCellOnHoverCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    checkOutlineCellOnHoverCheckbox: () => {
+        gridFillPage.outlineCellOnHoverCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    /**
+     * @description Verifies that cell does not show interactive state when hovered on in customize layout section
+     * @param {number} rowIndex - The index of the row to verify.
+     * @param {number} columnIndex - Index of column on the cell
+     */
+    verifyCellIsNotInteractiveForHoverInCustomizeLayoutSection: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperCustomizeLayout(), rowIndex)
+            .within(() => {
+                utilities.hoverOverElement(utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex));
+                utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex), {
+                    'border-color': css.color.figDefaultComponentBorder,
+                    'background-color': css.color.gridCellDefaultStateBg
+                });
+                utilities.triggerMouseout(utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex));
+            });
+    },
+
+    /**
+     * @description Verifies that cell does not show interactive state when hovered on in specify correct answer section
+     * @param {number} rowIndex - The index of the row to verify.
+     * @param {number} columnIndex - Index of column on the cell
+     */
+    verifyCellIsNotInteractiveForHoverInSpecifyCorrectAnswerSection: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperSpecifyCorrectAnswerSection(), rowIndex)
+            .within(() => {
+                utilities.hoverOverElement(utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex));
+                utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex), {
+                    'border-color': css.color.figDefaultComponentBorder,
+                    'background-color': css.color.gridCellDefaultStateBg
+                });
+                utilities.triggerMouseout(utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex));
+            });
+    },
+
+    /**
+     * @description Verifies that cell does not show interactive state when hovered on in preview tab
+     * @param {number} rowIndex - The index of the row to verify.
+     * @param {number} columnIndex - Index of column on the cell
+     */
+    verifyCellIsNotInteractiveForHoverInPreviewTab: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
+            .within(() => {
+                utilities.hoverOverElement(utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex));
+                utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex), {
+                    'border-color': css.color.figDefaultComponentBorder,
+                    'background-color': css.color.gridCellDefaultStateBg
+                });
+                utilities.triggerMouseout(utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex));
+            });
+    },
+
+    /**
+    * @description Verifies that cell shows interactive state when hovered on in customize layout section
+    * @param {number} rowIndex - The index of the row to verify.
+    * @param {number} columnIndex - Index of column on the cell
+    */
+    verifyCellIsInteractiveForHoverInCustomizeLayoutSection: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperCustomizeLayout(), rowIndex)
+            .within(() => {
+                utilities.hoverOverElement(utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex));
+                utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex), {
+                    'border-color': css.color.activeButtons,
+                    'background-color': css.color.gridCellHoverStateBg
+                });
+                utilities.triggerMouseout(utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex));
+            });
+    },
+
+    /**
+     * @description Verifies that cell shows interactive state when hovered on in specify correct answer section
+     * @param {number} rowIndex - The index of the row to verify.
+     * @param {number} columnIndex - Index of column on the cell
+     */
+    verifyCellIsInteractiveForHoverInSpecifyCorrectAnswerSection: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperSpecifyCorrectAnswerSection(), rowIndex)
+            .within(() => {
+                utilities.hoverOverElement(utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex));
+                utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex), {
+                    'border-color': css.color.activeButtons,
+                    'background-color': css.color.gridCellHoverStateBg
+                });
+                utilities.triggerMouseout(utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex));
+            });
+    },
+
+    /**
+     * @description Verifies that cell shows interactive state when hovered on in preview tab
+     * @param {number} rowIndex - The index of the row to verify.
+     * @param {number} columnIndex - Index of column on the cell
+     */
+    verifyCellIsInteractiveForHoverInPreviewTab: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
+            .within(() => {
+                utilities.hoverOverElement(utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex));
+                utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex), {
+                    'border-color': css.color.activeButtons,
+                    'background-color': css.color.gridCellHoverStateBg
+                });
+                utilities.triggerMouseout(utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex));
+            });
+    },
+
+    /**
+     * @description Add input to canvas title input field
+     * @param {string} titleText Text to be given as input in canvas title input field 
+     */
+    addInputToCanvasTitleInputField: (titleText) => {
+        gridFillPage.canvasTitleInputField()
+            .type(titleText);
+        utilities.verifyInputFieldValue(gridFillPage.canvasTitleInputField(), titleText);
+    },
+
+    verifyFullGridToggleButtonIsSelected: () => {
+        gridFillPage.fullGridToggleButton()
+            .should('have.class', 'single-select-toggle-button-selected');
+    },
+
+    verifySolidToggleButtonIsSelected: () => {
+        gridFillPage.solidToggleButton()
+            .should('have.class', 'single-select-toggle-button-selected');
+    },
+
+    verifyOnlyBorderToggleButtonIsSelected: () => {
+        gridFillPage.onlyBorderToggleButton()
+            .should('have.class', 'single-select-toggle-button-selected');
+    },
+
+    verifyDashedToggleButtonIsSelected: () => {
+        gridFillPage.dashedToggleButton()
+            .should('have.class', 'single-select-toggle-button-selected');
+    },
+
+    verifyOuterGridBorderSwitchIsEnabled: () => {
+        gridFillPage.outerGridBorderSwitch()
+            .should('have.class', 'Mui-checked');
+    },
+
+    verifyOuterGridBorderSwitchIsDisabled: () => {
+        gridFillPage.outerGridBorderSwitch()
+            .should('not.have.class', 'Mui-checked');
+    },
+
+    switchOffOuterGridBorderSwitch: () => {
+        gridFillPage.outerGridBorderSwitch()
+            .click()
+            .should('not.have.class', 'Mui-checked');
+    },
+
+    switchOnOuterGridBorderSwitch: () => {
+        gridFillPage.outerGridBorderSwitch()
+            .click()
+            .should('have.class', 'Mui-checked');
+    },
+
+    /**
+     * @description Select grid borders toggle button
+     * @param {string} toggleButton Name of grid borders toggle button
+     */
+    selectGridBordersToggleButton: (toggleButton) => {
+        switch (toggleButton) {
+            case 'Full grid':
+                gridFillPage.fullGridToggleButton()
+                    .click()
+                    .should('have.class', 'single-select-toggle-button-selected');
+                break;
+            case 'Only border':
+                gridFillPage.onlyBorderToggleButton()
+                    .click()
+                    .should('have.class', 'single-select-toggle-button-selected');
+                break;
+            case 'None':
+                gridFillPage.noneToggleButton()
+                    .click()
+                    .should('have.class', 'single-select-toggle-button-selected');
+                break;
+            default:
+                throw new Error('Invalid grid borders toggle button name');
+        }
+    },
+
+    /**
+     * @description Select grid border style toggle button
+     * @param {string} toggleButton Name of grid borders toggle button
+     */
+    selectGridBorderStyleToggleButton: (toggleButton) => {
+        switch (toggleButton) {
+            case 'Solid':
+                gridFillPage.solidToggleButton()
+                    .click()
+                    .should('have.class', 'single-select-toggle-button-selected');
+                break;
+            case 'Dashed':
+                gridFillPage.dashedToggleButton()
+                    .click()
+                    .should('have.class', 'single-select-toggle-button-selected');
+                break;
+            case 'Dotted':
+                gridFillPage.dottedToggleButton()
+                    .click()
+                    .should('have.class', 'single-select-toggle-button-selected');
+                break;
+            default:
+                throw new Error('Invalid grid border style toggle button name');
+        }
+    },
+
+    verifyCellBorderIsDisplayedForFullGridToggleButtonInEditTab: () => {
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), 0), {
+            'border-width': '1px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), 4), {
+            'border-width': '1px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), 10), {
+            'border-width': '1px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), 14), {
+            'border-width': '1px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInSpecifyCorrectAnswerSection(), 0), {
+            'border-width': '1px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInSpecifyCorrectAnswerSection(), 4), {
+            'border-width': '1px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInSpecifyCorrectAnswerSection(), 10), {
+            'border-width': '1px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInSpecifyCorrectAnswerSection(), 14), {
+            'border-width': '1px'
+        });
+    },
+
+    verifyCellBorderIsDisplayedForFullGridToggleButtonInPreviewTab: () => {
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInPreviewTab(), 0), {
+            'border-width': '1px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInPreviewTab(), 4), {
+            'border-width': '1px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInPreviewTab(), 10), {
+            'border-width': '1px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInPreviewTab(), 14), {
+            'border-width': '1px'
+        });
+    },
+
+    verifyCellBorderIsDisplayedForOnlyBorderToggleButtonInEditTab: () => {
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), 0), {
+            'border-width': '1px 0px 0px 1px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), 4), {
+            'border-width': '1px 1px 0px 0px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), 10), {
+            'border-width': '0px 0px 1px 1px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), 14), {
+            'border-width': '0px 1px 1px 0px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInSpecifyCorrectAnswerSection(), 0), {
+            'border-width': '1px 0px 0px 1px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInSpecifyCorrectAnswerSection(), 4), {
+            'border-width': '1px 1px 0px 0px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInSpecifyCorrectAnswerSection(), 10), {
+            'border-width': '0px 0px 1px 1px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInSpecifyCorrectAnswerSection(), 14), {
+            'border-width': '0px 1px 1px 0px'
+        });
+    },
+
+    verifyCellBorderIsDisplayedForOnlyBorderToggleButtonInPreviewTab: () => {
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInPreviewTab(), 0), {
+            'border-width': '1px 0px 0px 1px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInPreviewTab(), 4), {
+            'border-width': '1px 1px 0px 0px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInPreviewTab(), 10), {
+            'border-width': '0px 0px 1px 1px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInPreviewTab(), 14), {
+            'border-width': '0px 1px 1px 0px'
+        });
+    },
+
+    verifyCellBorderNotDisplayedForNoneToggleButtonInEditTab: () => {
+        gridFillPage.cellInCustomizeLayout()
+            .each(($element) => {
+                utilities.verifyCSS(cy.wrap($element), {
+                    'border-width': '0px'
+                });
+            });
+        gridFillPage.cellInSpecifyCorrectAnswerSection()
+            .each(($element) => {
+                utilities.verifyCSS(cy.wrap($element), {
+                    'border-width': '0px'
+                });
+            });
+    },
+
+    verifyCellBorderNotDisplayedForNoneToggleButtonInPreviewTab: () => {
+        gridFillPage.cellInPreviewTab()
+            .each(($element) => {
+                utilities.verifyCSS(cy.wrap($element), {
+                    'border-width': '0px'
+                });
+            });
+    },
+
+    verifyGridBorderInEditTab: () => {
+        gridFillPage.gridCustomizeLayoutSection()
+    },
+
+    verifyGridBorderWhenOuterBorderSwitchIsOffInEditTab: () => {
+        gridFillPage.gridCustomizeLayoutSection()
+            .should('have.css', 'border-width', '0px');
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), 0), {
+            'border-width': '1px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), 4), {
+            'border-width': '1px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), 10), {
+            'border-width': '1px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), 14), {
+            'border-width': '1px'
+        });
+        gridFillPage.gridSpecifyCorrectAnswerSection()
+            .should('have.css', 'border-width', '0px');
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInSpecifyCorrectAnswerSection(), 0), {
+            'border-width': '1px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInSpecifyCorrectAnswerSection(), 4), {
+            'border-width': '1px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInSpecifyCorrectAnswerSection(), 10), {
+            'border-width': '1px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInSpecifyCorrectAnswerSection(), 14), {
+            'border-width': '1px'
+        });
+    },
+
+    verifyGridBorderWhenOuterBorderSwitchIsOffInPreviewTab: () => {
+        gridFillPage.gridWrapperPreviewTab()
+            .should('have.css', 'border-width', '0px');
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInPreviewTab(), 0), {
+            'border-width': '1px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInPreviewTab(), 4), {
+            'border-width': '1px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInPreviewTab(), 10), {
+            'border-width': '1px'
+        });
+        utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInPreviewTab(), 14), {
+            'border-width': '1px'
+        });
+    },
+
+    verifySolidBorderForSolidToggleButtonInEditTab: () => {
+        gridFillPage.cellInCustomizeLayout()
+            .each(($element) => {
+                utilities.verifyCSS(cy.wrap($element), {
+                    'border-style': 'solid'
+                });
+            });
+        gridFillPage.cellInSpecifyCorrectAnswerSection()
+            .each(($element) => {
+                utilities.verifyCSS(cy.wrap($element), {
+                    'border-style': 'solid'
+                });
+            });
+    },
+
+    verifySolidBorderForSolidToggleButtonInPreviewTab: () => {
+        gridFillPage.cellInPreviewTab()
+            .each(($element) => {
+                utilities.verifyCSS(cy.wrap($element), {
+                    'border-style': 'solid'
+                });
+            });
+    },
+
+    verifyDashedBorderForDashedToggleButtonInEditTab: () => {
+        gridFillPage.cellInCustomizeLayout()
+            .each(($element) => {
+                utilities.verifyCSS(cy.wrap($element), {
+                    'border-style': 'dashed'
+                });
+            });
+        gridFillPage.cellInSpecifyCorrectAnswerSection()
+            .each(($element) => {
+                utilities.verifyCSS(cy.wrap($element), {
+                    'border-style': 'dashed'
+                });
+            });
+    },
+
+    verifyDashedBorderForDashedToggleButtonInPreviewTab: () => {
+        gridFillPage.cellInPreviewTab()
+            .each(($element) => {
+                utilities.verifyCSS(cy.wrap($element), {
+                    'border-style': 'dashed'
+                });
+            });
+    },
+
+    verifyDottedBorderForDottedToggleButtonInEditTab: () => {
+        gridFillPage.cellInCustomizeLayout()
+            .each(($element) => {
+                utilities.verifyCSS(cy.wrap($element), {
+                    'border-style': 'dotted'
+                });
+            });
+        gridFillPage.cellInSpecifyCorrectAnswerSection()
+            .each(($element) => {
+                utilities.verifyCSS(cy.wrap($element), {
+                    'border-style': 'dotted'
+                });
+            });
+    },
+
+    verifyDottedBorderForDottedToggleButtonInPreviewTab: () => {
+        gridFillPage.cellInPreviewTab()
+            .each(($element) => {
+                utilities.verifyCSS(cy.wrap($element), {
+                    'border-style': 'dotted'
+                });
+            });
+    },
+    
     /**
    * @description verify the displayed penalty points for each incorrect cell
    * @param {number} penaltyPoints displayed penalty points 
@@ -683,7 +1318,7 @@ const tests = {
             utilities.verifyElementCount(gridFillPage.correctAnswerAccordion(), 1);
             gridFillPage.steps.verifyCorrectAnswerAccordionIsExpanded();
             utilities.verifyInnerText(gridFillPage.correctAnswerLabel(), 'Correct');
-            utilities.verifyElementVisibilityState(gridFillPage.gridWrapper(), 'visible');
+            utilities.verifyElementVisibilityState(gridFillPage.gridWrapperPreviewTab(), 'visible');
         });
     },
 
@@ -828,6 +1463,19 @@ const tests = {
             utilities.verifyCSS(gridFillPage.matchExactPositionCheckbox().parents('.ngie-checkbox').find('g').eq(1), {
                 'fill': css.color.activeButtons
             });
+            //Selected
+            utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInSpecifyCorrectAnswerSection(), 1), {
+                'border-color': css.color.activeHighlightBorder,
+                'background-color': css.color.gridCellSelectedStateBg
+            });
+            gridFillPage.steps.clickOnCustomizeLayoutAccordionButton();
+            gridFillPage.steps.selectHideCellButton();
+            gridFillPage.steps.hideCell(0, 2);
+            //Hidden cell
+            utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInSpecifyCorrectAnswerSection(), 2), {
+                'border-color': css.color.secondaryBtnDisabled,
+                'background-color': css.color.defaultBackground
+            });
             gridFillPage.steps.uncheckMatchExactPositionOfCellsCheckbox();
             utilities.verifyCSS(gridFillPage.cellShadeCountLabel(), {
                 'color': css.color.text,