itemengine-cypress-automation 1.0.142 → 1.0.143

package/cypress/pages/gridFillPage.js

@@ -0,0 +1,713 @@
+import { commonComponents, autoScoredScoringSectionMultiResponseType, questionInputFieldComponent, correctIncorrectAnswerLabelComponent, questionInstructionsComponent, scoringSectionBaseEditTab, createQuestionBasePage, additionalSettingsPanel, autoScoredScoringPreviewTab, studentViewSettingsLabelComponent, autoScoredStudentViewSettings, autoScoredSpecifyCorrectAnswerSection } from "./components";
+import { dialogBoxBase } from ".";
+import utilities from "../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const selectors = {
+    ...questionInputFieldComponent,
+    ...questionInstructionsComponent,
+    ...commonComponents,
+    ...autoScoredScoringSectionMultiResponseType,
+    ...autoScoredSpecifyCorrectAnswerSection,
+
+    columnsInputField: () => cy.get('[class*="GridFillstyles__RowsColWrapper"] .input-stepper-textfield').eq(0),
+    columnsLabel: () => cy.get('[class*="GridFillstyles__RowsColWrapper"] [class*="GridFillstyles__CanvasInputLabelWrapper"]').eq(0),
+    columnsIncreaseButton: () => cy.get('[class*="GridFillstyles__RowsColWrapper"] [aria-label="Increase count"]').eq(0),
+    columnsDecreaseButton: () => cy.get('[class*="GridFillstyles__RowsColWrapper"] [aria-label="Decrease count"]').eq(0),
+    rowsInputField: () => cy.get('[class*="GridFillstyles__RowsColWrapper"] .input-stepper-textfield').eq(1),
+    rowsLabel: () => cy.get('[class*="GridFillstyles__RowsColWrapper"] [class*="GridFillstyles__CanvasInputLabelWrapper"]').eq(1),
+    rowsIncreaseButton: () => cy.get('[class*="GridFillstyles__RowsColWrapper"] [aria-label="Increase count"]').eq(1),
+    rowsDecreaseButton: () => cy.get('[class*="GridFillstyles__RowsColWrapper"] [aria-label="Decrease count"]').eq(1),
+    cellInEditTab: () => cy.get('[class*="GridFillResponsestyles__CellContainer"]'),
+    matchExactPositionLabel: () => cy.get('[data-ngie-testid="match-exact-position-of-cells-checkbox"] [class*="label"]'),
+    matchExactPositionCheckbox: () => cy.get('[data-ngie-testid="match-exact-position-of-cells-checkbox"] input'),
+    cellInSpecifyCorrectAnswerSection: () => cy.get('[class*="GridFillstyles__SetCorrectAnswerWrapper"] [class*="GridFillResponsestyles__CellContainer"]'),
+    rowsWrapperSpecifyCorrectAnswerSection: () => cy.get('[class*="GridFillstyles__SetCorrectAnswerWrapper"] [class*="GridFillResponsestyles__RowContainer"]'),
+    correctAnswerAccordion: () => cy.get('.correct-answer-accordion'),
+    correctAnswerLabel: () => cy.get('.answer-accordion-label div'),
+    gridFillWrapper: () => cy.get('.correct-answer-accordion .grid-fill-response-wrapper'),
+    pointsPerResponseLabel: () => cy.get('.alternate-points-points-per-text-span'),
+    pointsPerResponseScore: () => cy.get('.alternate-points-points-per-value-span'),
+    pointsPerResponseWrapper: () => cy.get('.alternate-points-points-per-text-wrapper'),
+    gridSpecifyCorrectAnswerSection: () => cy.get('[class*="AnswerAccordionstyles__AnswerPanel"] .grid-wrapper-cls'),
+    gridRow: () => cy.get('[class*="GridFillResponsestyles__RowContainer"]'),
+    cellShadeCountLabel: () => cy.get('[class*="GridFillResponsestyles__CellFillCountLabel"]'),
+    cellShadeCountInputField: () => cy.get('.cell-count-cls input'),
+
+    //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 "]'),
+    shadeCellButton: () => cy.get('.single-select-toggle-group button').eq(0),
+    hideCellButton: () => cy.get('.single-select-toggle-group button').eq(1),
+    cellInCustomizeLayout: () => cy.get('[id*="Response-cell"]'),
+    rowsWrapperCustomizeLayout: () => cy.get('.customize-layout-wrapper-cls [class*="GridFillResponsestyles__RowContainer"]'),
+
+    //Preview tab
+    gridWrapperPreviewTab: () => cy.get('[class*="GridFillResponsestyles__MatrixContainer"]:visible'),
+    cellInPreviewTab: () => cy.get('[class*="GridFillResponsestyles__CellContainer"]:visible'),
+    rowsWrapperPreviewTab: () => cy.get('[class*="GridFillResponsestyles__RowContainer"]:visible'),
+}
+
+const steps = {
+    ...scoringSectionBaseEditTab.steps,
+    ...questionInstructionsComponent.steps,
+    ...autoScoredScoringPreviewTab.steps,
+    ...autoScoredStudentViewSettings.steps,
+    ...createQuestionBasePage.steps,
+    ...correctIncorrectAnswerLabelComponent.steps,
+    ...autoScoredSpecifyCorrectAnswerSection.steps,
+    ...dialogBoxBase.steps,
+    ...autoScoredScoringSectionMultiResponseType.steps,
+
+    /**
+     * @param {number} value value of columns
+     * @description function enters value in columns input field
+     */
+    setColumns: (value) => {
+        gridFillPage.columnsInputField()
+            .clear()
+            .type('{selectall}')
+            .type(value)
+            .blur();
+        gridFillPage.columnsInputField()
+            .should('have.value', value);
+    },
+
+    /**
+     * @param {number} value value of columns input field
+     */
+    verifyColumnsInputField: (value) => {
+        gridFillPage.columnsInputField()
+            .should('have.value', value);
+    },
+
+    decreaseColumnsCount: () => {
+        gridFillPage.columnsDecreaseButton()
+            .click();
+    },
+
+    increaseColumnsCount: () => {
+        gridFillPage.columnsIncreaseButton()
+            .click();
+    },
+
+    /**
+     * @param {number} value value of rows
+     * @description function enters value in rows input field
+     */
+    setRows: (value) => {
+        gridFillPage.rowsInputField()
+            .clear()
+            .type('{selectall}')
+            .type(value)
+            .blur();
+        gridFillPage.rowsInputField()
+            .should('have.value', value);
+    },
+
+    /**
+     * @param {number} value value of rows input field
+     */
+    verifyRowsInputField: (value) => {
+        gridFillPage.rowsInputField()
+            .should('have.value', value);
+    },
+
+    decreaseRowsCount: () => {
+        gridFillPage.rowsDecreaseButton()
+            .click();
+    },
+
+    increaseRowsCount: () => {
+        gridFillPage.rowsIncreaseButton()
+            .click();
+    },
+
+    expandCustomizeLayoutAccordion: () => {
+        gridFillPage.customizeLayoutAccordionButton()
+            .click();
+    },
+
+    selectShadeCellButton: () => {
+        gridFillPage.shadeCellButton()
+            .click()
+            .should('have.class', 'Mui-selected');
+    },
+
+    selectHideCellButton: () => {
+        gridFillPage.hideCellButton()
+            .click()
+            .should('have.class', 'Mui-selected');
+    },
+
+    /**
+ * Shades 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.
+ */
+    shadeCell: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperCustomizeLayout(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), columnIndex)
+                    .click()
+                    .invoke('attr', 'aria-label')
+                    .should('include', 'fillCell');
+            });
+    },
+
+    /**
+     * Unshades 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.
+     */
+    unshadeCell: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperCustomizeLayout(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), columnIndex)
+                    .click()
+                    .invoke('attr', 'aria-label')
+                    .should('not.include', 'fillCell');
+            });
+    },
+
+    /**
+     * @description select cell in grid of specify correct answer section
+     * @param {number} rowIndex Index of row in grid of specify correct answer section
+     * @param {number} columnIndex Index of column in grid of specify correct answer section
+     */
+    selectCellSpecifyCorrectAnswerSection: (rowIndex, columnIndex) => {
+        gridFillPage.gridSpecifyCorrectAnswerSection()
+            .within(() => {
+                utilities.getNthElement(gridFillPage.gridRow(), rowIndex)
+                    .within(() => {
+                        utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex)
+                            .click()
+                            .invoke('attr', 'aria-label')
+                            .should('include', 'response');
+                    });
+            });
+    },
+
+    /**
+     * @description deselect cell in grid of specify correct answer section
+     * @param {number} rowIndex Index of row in grid of specify correct answer section
+     * @param {number} columnIndex Index of column in grid of specify correct answer section
+     */
+    deselectCellSpecifyCorrectAnswerSection: (rowIndex, columnIndex) => {
+        gridFillPage.gridSpecifyCorrectAnswerSection()
+            .within(() => {
+                utilities.getNthElement(gridFillPage.gridRow(), rowIndex)
+                    .within(() => {
+                        utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex)
+                            .click()
+                            .invoke('attr', 'aria-label')
+                            .should('not.include', 'response');
+                    });
+            });
+    },
+
+    /**
+     * 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.
+     */
+    hideCell: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperCustomizeLayout(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), columnIndex)
+                    .click()
+                    .invoke('attr', 'aria-label')
+                    .should('include', 'hideCell');
+            });
+    },
+
+    /**
+     * Selects a cell in the edit tab.
+     * @param {number} rowIndex - The index of the row containing the cell.
+     * @param {number} columnIndex - The index of the column containing the cell.
+     */
+    selectCell: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperSpecifyCorrectAnswerSection(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex)
+                    .click()
+                    .invoke('attr', 'aria-label')
+                    .should('include', 'response');
+            });
+    },
+
+    /**
+     * Unselects a cell in the edit tab.
+     * @param {number} rowIndex - The index of the row containing the cell.
+     * @param {number} columnIndex - The index of the column containing the cell.
+     */
+    unselectCell: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperSpecifyCorrectAnswerSection(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex)
+                    .click()
+                    .invoke('attr', 'aria-label')
+                    .should('not.include', 'response');
+            });
+    },
+
+    /**
+     * Selects 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.
+     */
+    selectCellPreviewTab: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
+                    .click();
+            });
+    },
+
+
+    /**
+ * Unselects 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.
+ */
+    unselectCellPreviewTab: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
+                    .click();
+            });
+    },
+
+    /**
+     * @description Verify cell is selected in specify correct answer section grid
+     * @param {number} rowIndex Index of row in grid of specify correct answer section
+     * @param {number} columnIndex Index of column in grid of specify correct answer section
+     */
+    verifyCellSelectedSpecifyCorrectAnswerSection: (rowIndex, columnIndex) => {
+        gridFillPage.gridSpecifyCorrectAnswerSection()
+            .within(() => {
+                utilities.getNthElement(gridFillPage.gridRow(), rowIndex)
+                    .within(() => {
+                        utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex)
+                            .invoke('attr', 'aria-label')
+                            .should('include', 'response');
+                    })
+            });
+    },
+
+    /**
+     * @description Verify cell is not selected in specify correct answer section grid
+     * @param {number} rowIndex Index of row in grid of specify correct answer section
+     * @param {number} columnIndex Index of column in grid of specify correct answer section
+     */
+    verifyCellNotSelectedSpecifyCorrectAnswerSection: (rowIndex, columnIndex) => {
+        gridFillPage.gridSpecifyCorrectAnswerSection()
+            .within(() => {
+                utilities.getNthElement(gridFillPage.gridRow(), rowIndex)
+                    .within(() => {
+                        utilities.getNthElement(gridFillPage.cellInEditTab(), columnIndex)
+                            .invoke('attr', 'aria-label')
+                            .should('not.include', 'response');
+                    });
+            });
+    },
+
+    verifyHideCustomizedCellPreviewTab: (index) => {
+        utilities.getNthElement(gridFillPage.cellInPreviewTab(), index)
+            .invoke('attr', 'aria-label')
+            .should('include', 'hideCell');
+    },
+
+    /**
+     * Verifies if a cell in the preview tab is selected.
+     * @param {number} rowIndex - The index of the row containing the cell.
+     * @param {number} columnIndex - The index of the column containing the cell.
+     */
+    verifyCellSelectedPreviewTab: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
+                    .invoke('attr', 'aria-label')
+                    .should('include', 'response');
+            });
+    },
+
+    /**
+     * Verifies if a cell in the preview tab is not selected.
+     * @param {number} rowIndex - The index of the row containing the cell.
+     * @param {number} columnIndex - The index of the column containing the cell.
+     */
+    verifyCellNotSelectedPreviewTab: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
+                    .invoke('attr', 'aria-label')
+                    .should('include', 'not Selected');
+            });
+    },
+
+    /**
+     * Verifies if a cell in the preview tab is hidden.
+     * @param {number} rowIndex - The index of the row containing the cell.
+     * @param {number} columnIndex - The index of the column containing the cell.
+     */
+    verifyHideCustomizedCellPreviewTab: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
+                    .invoke('attr', 'aria-label')
+                    .should('include', 'hideCell');
+            });
+    },
+
+    /**
+     * 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.
+     */
+    verifyCorrectResponseIcon: (rowIndex, columnIndex) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), rowIndex)
+            .within(() => {
+                utilities.getNthElement(gridFillPage.cellInPreviewTab(), columnIndex)
+                    .find('.correct-option-icon')
+                    .should('be.visible');
+            });
+    },
+
+    verifyIncorrectResponseBorder: (index) => {
+        utilities.getNthElement(gridFillPage.cellInPreviewTab(), index)
+            .should('have.css', 'border-color', `${css.color.incorrectAnswer}`);
+    },
+
+    verifyMatchExactPositionOfCellsCheckboxIsChecked: () => {
+        gridFillPage.matchExactPositionCheckbox()
+            .should('be.checked');
+    },
+
+    checkMatchExactPositionOfCellsCheckbox: () => {
+        gridFillPage.matchExactPositionCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    uncheckMatchExactPositionOfCellsCheckbox: () => {
+        gridFillPage.matchExactPositionCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    /**
+     * @description Add input to cell count input field
+     * @param {number} cellCount Count of cells to be shaded 
+     */
+    addInputToCellShadeCountInputField: (cellCount) => {
+        gridFillPage.cellShadeCountInputField()
+            .clear()
+            .type(cellCount)
+            .blur();
+    },
+
+    clearCellShadeCountInputField: () => {
+        gridFillPage.cellShadeCountInputField()
+            .clear()
+            .blur();
+    },
+
+    verifyDefaultGridInSpecifyCorrectAnswerSection: () => {
+        utilities.verifyElementVisibilityState(gridFillPage.gridSpecifyCorrectAnswerSection(), 'visible');
+        for (let rowIndex = 0; rowIndex < 3; rowIndex++) {
+            for (let columnIndex = 0; columnIndex < 5; columnIndex++) {
+                gridFillPage.steps.verifyCellNotSelectedSpecifyCorrectAnswerSection(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.
+    */
+    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 correct answer accordion is expanded.
+     */
+    verifyCorrectAnswerAccordionIsExpanded: () => {
+        gridFillPage.correctAnswerAccordion()
+            .find('.ngie-accordion-summary')
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    /**    
+    * Verify the points score displayed on response
+    * @param {number} pointsPerResponse Points to be displayed on response
+    */
+    verifyPointsPerResponseScore: (pointsPerResponse) => {
+        utilities.verifyElementVisibilityState(gridFillPage.pointsPerResponseScore(), 'visible');
+        utilities.verifyInnerText(gridFillPage.pointsPerResponseScore(), `${pointsPerResponse}`);
+    },
+
+    /**
+     * @descriptionVerifies the count of rows in the preview tab.
+     * @param {number} lengthRows - The expected count of rows.
+     */
+    verifyRowsCountPreviewTab: (lengthRows) => {
+        utilities.verifyElementCount(gridFillPage.rowsWrapperPreviewTab(), lengthRows);
+    },
+
+    /**
+     * @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) => {
+        utilities.getNthElement(gridFillPage.rowsWrapperPreviewTab(), 0)
+            .within(() => {
+                utilities.verifyElementCount(gridFillPage.cellInPreviewTab(), lengthColumns);
+            });
+    },
+}
+
+const tests = {
+    ...autoScoredScoringPreviewTab.tests,
+    ...autoScoredSpecifyCorrectAnswerSection.tests,
+    ...autoScoredScoringPreviewTab.tests,
+    ...autoScoredScoringSectionMultiResponseType.tests,
+    ...scoringSectionBaseEditTab.tests,
+
+    verifyContentsOfSpecifyCorrectAnswerSection: () => {
+        it('When user selects a scoring type then in the \'Correct\' accordion, all the contents should be displayed', () => {
+            utilities.verifyElementCount(gridFillPage.correctAnswerAccordion(), 1);
+            gridFillPage.steps.verifyCorrectAnswerAccordionIsExpanded();
+            utilities.verifyInnerText(gridFillPage.correctAnswerLabel(), 'Correct');
+            utilities.verifyElementVisibilityState(gridFillPage.gridFillWrapper(), 'visible');
+        });
+    },
+
+    verifyScoringSubtypeContentsForMultipleResponseTypeQuestion: () => {
+        it('\'All or nothing\' and \'Partial - equal weights\' labels and radio buttons should be displayed and by default \'All or nothing\' radio button should be selected', () => {
+            utilities.verifyInnerText(autoScoredScoringSectionMultiResponseType.allOrNothingRadioButtonLabel(), 'All or nothing');
+            utilities.verifyElementVisibilityState(autoScoredScoringSectionMultiResponseType.allOrNothingRadioButtonLabel(), 'visible');
+            autoScoredScoringSectionMultiResponseType.steps.verifyAllOrNothingRadioButtonIsChecked();
+            utilities.verifyInnerText(autoScoredScoringSectionMultiResponseType.partialEqualWeightsRadioButtonLabel(), 'Partial - equal weights');
+            utilities.verifyElementVisibilityState(autoScoredScoringSectionMultiResponseType.partialEqualWeightsRadioButtonLabel(), 'visible');
+            autoScoredScoringSectionMultiResponseType.steps.verifyPartialEqualWeightsRadioButtonIsUnchecked();
+        });
+
+        it('CSS of Scoring section', { tags: 'css' }, () => {
+            utilities.verifyCSS(autoScoredScoringSectionMultiResponseType.allOrNothingRadioButtonLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(autoScoredScoringSectionMultiResponseType.partialEqualWeightsRadioButtonLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+    },
+
+    /**
+    * Verifies the contents and functionality of the 'Specify correct answer' accordion for grid fill question.
+    * @param {{'Correct' | 'Alternative'}} accordionName - The name of the accordion to be used in the validation.
+    * @example - verifySpecifyCorrectAnswerAccordionContentsAndFunctionality('Correct');
+    */
+    verifySpecifyCorrectAnswerAccordionContentsAndFunctionality: (accordionName) => {
+        it(`The default grid should be displayed in the ${accordionName} accordion`, () => {
+            gridFillPage.steps.verifyDefaultGridInSpecifyCorrectAnswerSection();
+        });
+
+        it('When user hovers on a grid cell, then that grid cell should be displayed as interactive', () => {
+            utilities.hoverOverElement(utilities.getNthElement(gridFillPage.cellInSpecifyCorrectAnswerSection(), 9));
+            utilities.verifyCSS(utilities.getNthElement(gridFillPage.cellInSpecifyCorrectAnswerSection(), 9), {
+                'border-color': css.color.activeButtons,
+                'background-color': css.color.gridCellHoverStateBg
+            });
+            utilities.hoverAwayFromElement(utilities.getNthElement(gridFillPage.cellInSpecifyCorrectAnswerSection(), 9));
+        });
+
+        it('User should be able to select the cells of the grid by clicking on them', () => {
+            gridFillPage.steps.selectCellSpecifyCorrectAnswerSection(0, 0);
+        });
+
+        it(`When user deselect all the cells in the grid in the ${accordionName} accordion, \'Error: Please set a correct answer.\' error message should be thrown along with an error icon on the \'${accordionName}\' accordion`, () => {
+            gridFillPage.steps.deselectCellSpecifyCorrectAnswerSection(0, 0);
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible')
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Please set a correct answer.');
+            if (accordionName == 'Correct') {
+                autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
+                    });
+            } else {
+                autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
+                    .eq(1)
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
+                    });
+            };
+        });
+
+        it('When user selects a cell by clicking on it, then error message should not be displayed', () => {
+            gridFillPage.steps.selectCellSpecifyCorrectAnswerSection(0, 0);
+            commonComponents.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it(`\'Match exact position of cells\' label and checkbox should be displayed in the ${accordionName} accordion and the checkbox should be checked`, () => {
+            utilities.verifyInnerText(gridFillPage.matchExactPositionLabel(), 'Match exact position of cells');
+            utilities.verifyElementVisibilityState(gridFillPage.matchExactPositionLabel(), 'visible');
+            utilities.verifyElementVisibilityState(gridFillPage.matchExactPositionCheckbox(), 'exist');
+            gridFillPage.steps.verifyMatchExactPositionOfCellsCheckboxIsChecked();
+        });
+
+        it('User should be able to uncheck the \'Match exact position of cell\' checkbox', () => {
+            gridFillPage.steps.uncheckMatchExactPositionOfCellsCheckbox();
+        });
+
+        it(`When user had unchecked the \'Match exact position of cell\' checkbox, then grid in specify correct answer ${accordionName} accordion should not be displayed and \'Cell shade count\' label and input field should be displayed`, () => {
+            utilities.verifyElementVisibilityState(gridFillPage.gridSpecifyCorrectAnswerSection(), 'notExist');
+            utilities.verifyInnerText(gridFillPage.cellShadeCountLabel(), 'Cell shade count');
+            utilities.verifyElementVisibilityState(gridFillPage.cellShadeCountLabel(), 'visible');
+            utilities.verifyElementVisibilityState(gridFillPage.cellShadeCountInputField(), 'visible');
+            utilities.verifyInputFieldValue(gridFillPage.cellShadeCountInputField(), '');
+        });
+
+        it('User should be able to enter only numeric value in the \'Cell shade count\' input field', () => {
+            gridFillPage.steps.addInputToCellShadeCountInputField('a6@');
+            utilities.verifyInputFieldValue(gridFillPage.cellShadeCountInputField(), '6');
+        });
+
+        it(`When user clears the value in \'Cell shade count\' input field, then \'Error: Please set a correct answer.\' error message should be thrown along with an error icon on the \'${accordionName}\' accordion`, () => {
+            gridFillPage.steps.clearCellShadeCountInputField();
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible')
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Please set a correct answer.');
+            if (accordionName == 'Correct') {
+                autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
+                    });
+            } else {
+                autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
+                    .eq(1)
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
+                    });
+            };
+        });
+
+        it('CSS of \'Cell shade count\' input field error message', { tags: 'css' }, () => {
+            utilities.verifyCSS(gridFillPage.cellShadeCountInputField().parent(), {
+                'background-color': css.color.textAreaErrorBg
+            });
+        });
+
+        it('When user enters value in \'Cell shade count\' input field then error message should not be displayed', () => {
+            gridFillPage.steps.addInputToCellShadeCountInputField(4);
+            commonComponents.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('When user checks the \'Match exact position of cell\' checkbox, then the grid should be displayed in the default state with no shaded cells and \'Cell shade count\' label and input field should not be displayed', () => {
+            gridFillPage.steps.checkMatchExactPositionOfCellsCheckbox();
+            gridFillPage.steps.verifyDefaultGridInSpecifyCorrectAnswerSection();
+            cy.log('Post-step: Selecting a cell in grid');
+            gridFillPage.steps.selectCellSpecifyCorrectAnswerSection(0, 1);
+        });
+
+        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty(accordionName);
+
+        it('CSS of \'Correct\' accordion contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(gridFillPage.matchExactPositionLabel(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(gridFillPage.matchExactPositionCheckbox().parents('.ngie-checkbox').find('g').eq(1), {
+                'fill': css.color.activeButtons
+            });
+            gridFillPage.steps.uncheckMatchExactPositionOfCellsCheckbox();
+            utilities.verifyCSS(gridFillPage.cellShadeCountLabel(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(gridFillPage.cellShadeCountInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'Correct\' accordion contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(gridFillPage.cellShadeCountLabel().parents('[aria-label="Specify correct answer section"]'));
+            gridFillPage.steps.checkMatchExactPositionOfCellsCheckbox();
+            cy.checkAccessibility(gridFillPage.matchExactPositionLabel().parents('[aria-label="Specify correct answer section"]'));
+        });
+    }
+}
+
+export const gridFillPage = {
+    ...selectors,
+    steps,
+    tests
+}