itemengine-cypress-automation 1.0.167-repoUpdate10April-1465c8c.0 → 1.0.169-uploadResponseMigration-83ab996.0

package/cypress/pages/fillInTheGapsOverImageDragAndDropPage.js

@@ -324,13 +324,11 @@ const steps = {
             .and('match', /0px none/);
     },
 
-    clickAndDropOptionInOptionsContainerInPreviewTab: (optionText, groupIndex=0) => {
+    clickAndDropOptionInOptionsContainerInPreviewTab: (optionText) => {
         fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTab()
             .contains(optionText)
             .click();
         draggableOptionContainer.optionsContainerPreviewTab()
-            .find('.item-list')
-            .eq(groupIndex)
             .click({ force: true });
     },
 

package/cypress/pages/graphingPage.js

@@ -1,5 +1,6 @@
 import utilities from "../support/helpers/utilities";
-import { questionInstructionsComponent, createQuestionBasePage, scoringSectionBaseEditTab, autoScoredScoringPreviewTab, autoScoredStudentViewSettings, autoScoredSpecifyCorrectAnswerSection, commonComponents, backgroundImageUploadComponent, imageCanvasComponent, opacityComponent, autoScoredScoringSectionMultiResponseType, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent, toolsAndControlsComponent, resetPopupComponent, defaultToolDropdown } from "./components";
+import { questionInstructionsComponent, createQuestionBasePage, scoringSectionBaseEditTab, autoScoredScoringPreviewTab, autoScoredStudentViewSettings, autoScoredSpecifyCorrectAnswerSection, commonComponents, backgroundImageUploadComponent, imageCanvasComponent, opacityComponent, autoScoredScoringSectionMultiResponseType, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent } from "./components";
+import { dialogBoxBase } from "./dialogBoxBase";
 const css = Cypress.env('css');
 
 const selectors = {
@@ -13,9 +14,6 @@ const selectors = {
     ...autoScoredScoringSectionMultiResponseType,
     ...autoScoredSpecifyCorrectAnswerSection,
     ...additionalSettingsPanel,
-    ...toolsAndControlsComponent,
-    ...resetPopupComponent,
-    ...defaultToolDropdown,
 
     //Edit tab
     graphEditTab: () => cy.get('[class*="GraphingWrapper"] .ngie-jxgbox svg'),
@@ -48,8 +46,30 @@ const selectors = {
             return cy.get('[class*="GraphingWrapper"] .ngie-jxgbox .JXGtext')
         }
     },
+    toolsLabel: () => cy.get('[class*="CustomizedToolBarOptionsstyles__ToolbarLabel"]').eq(0),
     xAxisLabelGraphEditTab: () => cy.get('.graph-left-wrapper .title-casing'),
     yAxisLabelGraphEditTab: () => cy.get('.graph-footer .title-casing'),
+    controlsLabel: () => cy.get('[class*="CustomizedToolBarOptionsstyles__ToolbarLabel"]').eq(1),
+    toolOptions: (toolOptionAriaLabel = null) => {
+        if (toolOptionAriaLabel) {
+            return cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(0).find(`.icon-button-custom-format[aria-label*="${toolOptionAriaLabel}"]`)
+        } else {
+            return cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(0).find(`.icon-button-custom-format`)
+        }
+    },
+    toolOptionsLabel: () => cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(0).find(`[class*="DragItemstyles__LabelWrapper"]`),
+    toolOptionsTickIcon: () => cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(0).find(`.tick-icon-wrapper`),
+    controlsOptionsLabel: () => cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(1).find(`[class*="DragItemstyles__LabelWrapper"]`),
+    controlsTickIcon: () => cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(1).find(`.tick-icon-wrapper`),
+    defaultToolDropdownLabel: () => cy.get('#Default-tool-dropdown-label'),
+    defaultToolDropdown: () => cy.get('#Default-tool-select'),
+    defaultToolDropdownOptions: (dropdownOption = null) => {
+        if (dropdownOption) {
+            return cy.get(`[aria-labelledby*="Default-tool-dropdown-label"] [role="option"][aria-label*="${dropdownOption}"]`)
+        } else {
+            return cy.get('[aria-labelledby*="Default-tool-dropdown-label"] [role="option"]')
+        }
+    },
     graphToolOptionEditTab: (toolOptionAriaLabel = null) => {
         if (toolOptionAriaLabel) {
             return cy.get('.graph-tools-wrapper').eq(0).find(`.single-select-toggle-group-double button[aria-label*=${toolOptionAriaLabel}]`)
@@ -71,6 +91,13 @@ const selectors = {
             return cy.get('[class*="GraphingQuestion"] .single-select-toggle-group-double button')
         }
     },
+    controlOptions: (toolOptionAriaLabel = null) => {
+        if (toolOptionAriaLabel) {
+            return cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(1).find(`.icon-button-custom-format[aria-label*="${toolOptionAriaLabel}"]`)
+        } else {
+            return cy.get('[class*="CustomizedToolBarOptionsstyles__DragAndDropWrapper"]').eq(1).find('.icon-button-custom-format')
+        }
+    },
     graphControlOptionEditTab: (controlOptionAriaLabel = null) => {
         if (controlOptionAriaLabel) {
             return cy.get('[class*="GraphingToolsstyles__ControlsWrapper"]').eq(0).find(`button[aria-label*="${controlOptionAriaLabel}"]`)
@@ -224,6 +251,10 @@ const selectors = {
     whatIsThisLabel: () => cy.get('.what-is-wrapper [class*="StyledLink"]'),
     makeResponsiveHelpText: () => cy.get('[class*="WhatIsThisDescriptionWrapper"]'),
 
+    //Reset popup
+    resetPopupConfirmResetButton: () => cy.get('.accept-button'),
+    resetPopupCancelButton: () => cy.get('.reject-button'),
+
     //Grading view
     gradingViewQuestionSineWave: () => cy.get('.ngie-jxgbox').eq(0).find('path[stroke-linecap="butt"][stroke-opacity="1"]'),
     gradingViewQuestionCircle: () => cy.get('.ngie-jxgbox').eq(0).find('ellipse[stroke-linecap="butt"]'),
@@ -255,16 +286,58 @@ const steps = {
     ...autoScoredScoringSectionMultiResponseType.steps,
     ...commonComponents.steps,
     ...additionalSettingsPanel.steps,
-    ...toolsAndControlsComponent.steps,
-    ...resetPopupComponent.steps,
-    ...defaultToolDropdown.steps,
 
     //Edit tab
+    /**
+     * This function selects tool options
+     * @param {string[]} toolOptionAriaLabelArray array aria-label of tool options
+     */
+    selectToolOptions: (toolOptionAriaLabelArray) => {
+        toolOptionAriaLabelArray.forEach((toolOptionAriaLabel) => {
+            graphingPage.toolOptions(toolOptionAriaLabel)
+                .click();
+        });
+    },
+
+    /**
+     * This function de-selects tool options
+     * @param {string[]} toolOptionAriaLabelArray array aria-label of tool options
+     */
+    deselectToolOptions: (toolOptionAriaLabelArray) => {
+        toolOptionAriaLabelArray.forEach((toolOptionAriaLabel) => {
+            graphingPage.toolOptions(toolOptionAriaLabel)
+                .click();
+        });
+    },
+
+    /**
+     * This function selects tool options
+     * @param {string[]} controlOptionAriaLabel array aria-label of tool options
+     */
+    selectControl: (controlOptionAriaLabel) => {
+        graphingPage.controlOptions(controlOptionAriaLabel)
+            .click();
+    },
+
+    /**
+     * This function de-selects tool options
+     * @param {string[]} controlOptionAriaLabel array aria-label of tool options
+     */
+    deselectControl: (controlOptionAriaLabel) => {
+        graphingPage.controlOptions(controlOptionAriaLabel)
+            .click();
+    },
+
     checkPatternBackground: () => {
         graphingPage.patternRadioButton()
             .click();
     },
 
+    expandDefaultToolDropdown: () => {
+        graphingPage.defaultToolDropdown()
+            .click();
+    },
+
     /**
      * This function verifies checked state of radio buttons
      * @param {('Blank canvas'|'Image'|'Pattern')} radioButton 
@@ -334,6 +407,15 @@ const steps = {
             })
     },
 
+    /**
+     * This function selects dropdown option from default tool dropdown
+     * @param {string} dropdownOption aria-label of the dropdown option
+     */
+    selectOptionFromDefaultToolDropdown: (dropdownOption) => {
+        graphingPage.defaultToolDropdownOptions(dropdownOption)
+            .click();
+    },
+
     /**
      * @param {string} fileFormat format of the uploaded file in the graph
      * @description this function verifies the attribute of the image has the expected file format
@@ -1596,6 +1678,16 @@ const steps = {
             .should('have.text', input);
     },
 
+    confirmReset: () => {
+        graphingPage.resetPopupConfirmResetButton()
+            .click();
+    },
+
+    cancelReset: () => {
+        graphingPage.resetPopupCancelButton()
+            .click();
+    },
+
     /**
      * This function plots points on the graph in correct answer section
      * @param {Object[]} coordinates - An array containing x and x coordinates along with their range
@@ -1679,8 +1771,6 @@ const tests = {
     ...additionalSettingsPanel.tests,
     ...autoScoredSpecifyCorrectAnswerSection.tests,
     ...additionalSettingsAccessibilitySectionComponent.tests,
-    ...resetPopupComponent.tests,
-    ...defaultToolDropdown.tests,
 
     verifyContentsOfSpecifyCorrectAnswerSection: () => {
         it('When user selects a scoring type then in the \'Correct\' accordion, all the contents should be displayed', () => {
@@ -1736,6 +1826,52 @@ const tests = {
         it('Accessibility of \'Correct\' accordion contents', { tags: 'a11y' }, () => {
             cy.checkAccessibility(graphingPage.graphSpecifyCorrectAnswerSection());
         });
+    },
+
+    verifyResetPopupContentWithCSSAndA11y: () => {
+        it('When the user clicks on the \'Reset\' button then a dialog box should appear with title \'Reset\'', () => {
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'exist');
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'Reset');
+        });
+
+        it('The dialog box should have content \'Are you sure you want to reset the graph? This will clear all objects and revert all settings to their default values.\' with \'Cancel\' and \'Confirm reset\' buttons should be displayed', () => {
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxContent(), 'Are you sure you want to reset the graph? This will clear all objects and revert all settings to their default values.');
+            utilities.verifyInnerText(graphingPage.resetPopupConfirmResetButton(), 'Confirm reset');
+            utilities.verifyInnerText(graphingPage.resetPopupCancelButton(), 'Cancel');
+        });
+
+        it('CSS of Reset dialog box', { tags: 'css' }, () => {
+            utilities.verifyCSS(dialogBoxBase.dialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(dialogBoxBase.dialogBoxContent(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(graphingPage.resetPopupCancelButton().find('p'), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(graphingPage.resetPopupCancelButton(), {
+                'background-color': css.color.transparent
+            });
+            utilities.verifyCSS(graphingPage.resetPopupConfirmResetButton().find('p'), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(graphingPage.resetPopupConfirmResetButton(), {
+                'background-color': css.color.editTableDeleteButton
+            });
+        });
+
+        it('Accessibility of Reset dialog box', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dialogBoxBase.dialogBox());
+        });
     }
 }
 

package/cypress/pages/gridFillPage.js

@@ -41,7 +41,7 @@ const selectors = {
     rowsDecreaseButton: () => cy.get('[class*="GridFillstyles__RowsColWrapper"] [aria-label="Decrease count"]').eq(1),
 
     cellInEditTab: () => cy.get('[class*="GridFillResponsestyles__CellContainer"]'),
-    matchExactPositionLabel: () => cy.get('[data-ngie-testid="exact-match-position-of-cells-checkbox"] [class*="label"]'),
+    matchExactPositionLabel: () => cy.get('[data-ngie-testid="exact-match-position-of-cells-checkbox"] .MuiFormControlLabel-label'),
     matchExactPositionCheckbox: () => cy.get('[data-ngie-testid="exact-match-position-of-cells-checkbox"] input'),
     cellInSpecifyCorrectAnswerSection: () => cy.get('[class*="GridFillstyles__SetCorrectAnswerWrapper"] [class*="GridFillResponsestyles__CellContainer"]'),
     rowsWrapperSpecifyCorrectAnswerSection: () => cy.get('[class*="GridFillstyles__SetCorrectAnswerWrapper"] [class*="GridFillResponsestyles__RowContainer"]'),
@@ -187,7 +187,6 @@ const selectors = {
     previousPaginationButtonPreviewTab: () => cy.get(' [class*="PaginationControlWrapper"] [class*="PaginationControl"]').eq(2),
     nextPaginationButtonPreviewTab: () => cy.get(' [class*="PaginationControlWrapper"] [class*="PaginationControl"]').eq(3),
     canvasTitlePreviewTab: () => cy.get('[class*="GridFillResponsestyles__CanvasTitleWrapper"]'),
-    correctAnswerLabel: () => cy.get('[class*="GridFillResponsestyles__CorrectAnswerLabel"]'),
     warningMessageContainer: () => cy.get('.disabled-wrapper-cls'),
     warningMessage: () => cy.get('.disabled-wrapper-cls [class*="DisabledTextWrapper"]'),
 }
@@ -677,136 +676,18 @@ const steps = {
      * @param {number} rowIndex - The index of the row containing the cell.
      * @param {number} columnIndex - The index of the column containing the cell.
      */
-    verifyCorrectIncorrectResponseIconNotExistPreviewTab: (rowIndex, columnIndex) => {
-        gridFillPage.gridWrapperPreviewTab()
-            .eq(0)
-            .within(() => {
-                utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
-                    .within(() => {
-                        utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
-                            .find('.correct-option-icon')
-                            .should('not.exist');
-                    });
-            });
-    },
-
-    /**
-     * Verifies if the correct response icon is visible for a cell in the preview tab.
-     * @param {number} rowIndex - The index of the row containing the cell.
-     * @param {number} columnIndex - The index of the column containing the cell.
-     */
-    verifyCorrectResponseIconPreviewTab: (rowIndex, columnIndex) => {
-        gridFillPage.gridWrapperPreviewTab()
-            .eq(0)
-            .within(() => {
-                utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
-                    .within(() => {
-                        utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
-                            .find('.correct-option-icon')
-                            .should('be.visible');
-                        utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
-                            .should('have.css', 'border-color', css.color.correctAnswer);
-                    });
-            });
-        steps.verifyCorrectResponseBackgroundColorPreviewTab(rowIndex, columnIndex);
-    },
-
-    /**
-    * Verifies if the correct response icon is visible for a cell in the preview tab.
-    * @param {number} rowIndex - The index of the row containing the cell.
-    * @param {number} columnIndex - The index of the column containing the cell.
-    */
-    verifyIncorrectResponseIconPreviewTab: (rowIndex, columnIndex) => {
-        gridFillPage.gridWrapperPreviewTab()
-            .eq(0)
-            .within(() => {
-                utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
-                    .within(() => {
-                        utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
-                            .find('.incorrect-option-icon')
-                            .should('be.visible');
-                        utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
-                            .should('have.css', 'border-color', css.color.incorrectAnswer);
-                    });
-            });
-        steps.verifyIncorrectResponseBackgroundColorPreviewTab(rowIndex, columnIndex);
-    },
-
-    /**
-     * Verifies if the correct response background color is applied to a cell in the preview tab.
-     * @param {number} rowIndex - The index of the row containing the cell.
-     * @param {number} columnIndex - The index of the column containing the cell.
-     */
-    verifyCorrectResponseBackgroundColorPreviewTab: (rowIndex, columnIndex) => {
-        gridFillPage.gridWrapperPreviewTab()
-            .eq(0)
-            .within(() => {
-                utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
-                    .within(() => {
-                        utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
-                            .then(($element) => {
-                                cy.window().then((win) => {
-                                    const element = $element[0];
-                                    const pseudoStyle = win.getComputedStyle(element, '::after');
-                                    const pseudoBackgroundColor = pseudoStyle.getPropertyValue('background-color');
-                                    expect(pseudoBackgroundColor).to.equal(css.color.gridCellCorrectAnswerBg);
-                                });
-                            });
-                    });
-            });
-    },
-
-    /**
-     * Verifies if the incorrect response background color is applied to a cell in the preview tab.
-     * @param {number} rowIndex - The index of the row containing the cell.
-     * @param {number} columnIndex - The index of the column containing the cell.
-     */
-    verifyIncorrectResponseBackgroundColorPreviewTab: (rowIndex, columnIndex) => {
-        gridFillPage.gridWrapperPreviewTab()
-            .eq(0)
+    verifyCorrectResponseIcon: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
             .within(() => {
-                utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
-                    .within(() => {
-                        utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
-                            .then(($element) => {
-                                cy.window().then((win) => {
-                                    const element = $element[0];
-                                    const pseudoStyle = win.getComputedStyle(element, '::after');
-                                    const pseudoBackgroundColor = pseudoStyle.getPropertyValue('background-color');
-                                    expect(pseudoBackgroundColor).to.equal(css.color.gridCellIncorrectAnswerBg);
-                                });
-                            });
-                    });
+                utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
+                    .find('.correct-option-icon')
+                    .should('be.visible');
             });
     },
 
-    /**
-     * Verifies if the correct response icon is visible for a cell in the preview tab.
-     * @param {number} rowIndex - The index of the row containing the cell.
-     * @param {number} columnIndex - The index of the column containing the cell.
-     */
-    verifyCorrectResponseIconCorrectAnswerSection: (rowIndex, columnIndex) => {
-        gridFillPage.gridWrapperPreviewTab()
-            .eq(1)
-            .within(() => {
-                utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
-                    .within(() => {
-                        utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
-                            .find('.correct-option-icon')
-                            .should('be.visible');
-                        utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
-                            .should('have.css', 'border-color', css.color.correctAnswer);
-                        utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
-                            .then(($element) => {
-                                cy.window().then((win) => {
-                                    const element = $element[0];
-                                    const pseudoStyle = win.getComputedStyle(element, '::after');
-                                    const pseudoBackgroundColor = pseudoStyle.getPropertyValue('background-color');
-                                    expect(pseudoBackgroundColor).to.equal(css.color.gridCellCorrectAnswerBg);
-                                });
-                            });
-                    });
-            });
+    verifyIncorrectResponseBorder: (index) => {
+        utilities.getNthElement(gridFillPage.cellInPreviewTab(), index)
+            .should('have.css', 'border-color', `${css.color.incorrectAnswer}`);
     },
 
     verifyMatchExactPositionOfCellsCheckboxIsChecked: () => {
@@ -877,6 +758,115 @@ const steps = {
             });
     },
 
+    /**
+    * Verifies if the correct response icon is visible for a cell in the preview tab.
+    * @param {number} rowIndex - The index of the row containing the cell.
+    * @param {number} columnIndex - The index of the column containing the cell.
+    */
+    verifyIncorrectResponseIcon: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
+                    .find('.incorrect-option-icon')
+                    .should('be.visible');
+            });
+    },
+
+    /**
+     * Verifies if the correct response border is applied to a cell in the preview tab.
+     * @param {number} rowIndex - The index of the row containing the cell.
+     * @param {number} columnIndex - The index of the column containing the cell.
+     */
+    verifyCorrectResponseBorder: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
+                    .should('have.css', 'border-color', css.color.correctAnswer);
+            });
+    },
+
+    /**
+     * Verifies if the incorrect response border is applied to a cell in the preview tab.
+     * @param {number} rowIndex - The index of the row containing the cell.
+     * @param {number} columnIndex - The index of the column containing the cell.
+     */
+    verifyIncorrectResponseBorder: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
+                    .should('have.css', 'border-color', css.color.incorrectAnswer);
+            });
+    },
+
+    /**
+     * Verifies if the correct response background color is applied to a cell in the preview tab.
+     * @param {number} rowIndex - The index of the row containing the cell.
+     * @param {number} columnIndex - The index of the column containing the cell.
+     */
+    verifyCorrectResponseBackgroundColor: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
+                    .should('have.css', 'background-color', css.color.gridCellCorrectAnswerBg);
+            });
+    },
+
+    /**
+     * Verifies if the incorrect response background color is applied to a cell in the preview tab.
+     * @param {number} rowIndex - The index of the row containing the cell.
+     * @param {number} columnIndex - The index of the column containing the cell.
+     */
+    verifyIncorrectResponseBackgroundColor: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
+                    .should('have.css', 'background-color', css.color.gridCellIncorrectAnswerBg);
+            });
+    },
+
+    /**
+     * Verifies if the default background color is applied to a cell in the preview tab.
+     * @param {number} rowIndex - The index of the row containing the cell.
+     * @param {number} columnIndex - The index of the column containing the cell.
+     */
+    verifyResponseCellHasDefaultBackgroundColor: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
+                    .should('have.css', 'background-color', css.color.gridCellDefaultStateBg);
+            });
+    },
+
+    /**
+     * Verifies if the correct response border and background color is applied to a cell in the preview tab.
+     * @param {number} rowIndex - The index of the row containing the cell.
+     * @param {number} columnIndex - The index of the column containing the cell.
+     */
+    verifyCorrectResponseBorderAndBackgroundColor: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
+                    .should('have.css', 'border-color', css.color.correctAnswer);
+                utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
+                    .should('have.css', 'background-color', css.color.gridCellCorrectAnswerBg);
+            });
+    },
+
+    /**
+     * Verifies if the incorrect response border background color is applied to a cell in the preview tab.
+     * @param {number} rowIndex - The index of the row containing the cell.
+     * @param {number} columnIndex - The index of the column containing the cell.
+     */
+    verifyIncorrectResponseBorderAndBackgroundColor: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
+                    .should('have.css', 'border-color', css.color.incorrectAnswer);
+                utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
+                    .should('have.css', 'background-color', css.color.gridCellIncorrectAnswerBg);
+            });
+    },
+
     verifyCorrectAnswerAccordionIsExpanded: () => {
         gridFillPage.correctAnswerAccordion()
             .find('.ngie-accordion-summary')
@@ -973,7 +963,7 @@ const steps = {
      * Verifies the selection state of a cell in the interactive grid.
      * @param {number} rowIndex - The index of the row of the cell to verify.
      * @param {number} columnIndex - The index of the column of the cell to verify.
-     */
+     */ 
     verifySelectedRowsAndColumnsInInteractiveState: (rowIndex, columnIndex) => {
         gridFillPage.cellInOpenTheGridSelectorAccordion()
             .filter(`[aria-label*="Row${rowIndex} Column${columnIndex}"]`)
@@ -2828,12 +2818,7 @@ const steps = {
                 const CSSStyleDeclarationValue = CSSStyleDeclaration.getPropertyValue('background-size')
                 expect(CSSStyleDeclarationValue).to.deep.eq(`${width} ${height}`);
             });
-    },
-
-    verifyCorrectAnswerSectionNotExists: () => {
-        utilities.verifyElementVisibilityState(gridFillPage.correctAnswerLabel(), 'notExist');
-        utilities.verifyElementVisibilityState(gridFillPage.gridWrapperPreviewTab().eq(1), 'notExist');
-    },
+    }
 }
 
 const tests = {