itemengine-cypress-automation 1.0.150-migrationScripts-5e451b6.0 → 1.0.150

package/cypress/pages/components/gridQuestionCommonComponent.js

@@ -1,6 +1,9 @@
 import constants from "../../fixtures/constants";
 import utilities from "../../support/helpers/utilities";
 import { autoScoredScoringPreviewTab } from "./autoScoredScoringPreviewTab";
+import { autoScoredScoringSectionMultiResponseType } from "./autoScoredScoringSectionMultiResponseType";
+import { autoScoredSpecifyCorrectAnswerSection } from "./autoScoredSpecifyCorrectAnswerSection";
+import { commonComponents } from "./commonComponents";
 const css = Cypress.env('css');
 
 const selectors = {
@@ -13,13 +16,20 @@ const selectors = {
     optionCellPropertyInputField: () => cy.get('[title="Option text or image..."]'),
     tableRowSpecifyCorrectAnswerSection: () => cy.get('.correct-answer-accordion [class*="wrapper-row"]'),
     tableRowPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="wrapper-row"]'),
+    questionsColumnPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="TableCellWrapper"][class*="col-0"]'),
     optionsButton: () => cy.get('[class*="PreviewSelectionButton"]'),
     gridPreviewTab: () => cy.get('.single-selection-grid-wrapper:visible'),
+    gridSpecifyCorrectAnswerSection: () => cy.get('.set-correct-ans-selection-grid'),
     tableCell: () => cy.get('[class*="CellContainer"]'),
-    correctAnswerGrid: () => cy.get('.selection-grid-wrapper').last(),
+    correctAnswerGrid: () => cy.get('.correct-ans-selection-grid'),
     tableRow: () => cy.get('[class*="wrapper-row"]'),
     correctAnswersLabel: () => cy.get('[class*="question-preview-wrapper"] [class*="CorrectAnswerHeader"]'),
     penaltyPointsForEachIncorrectRowInputField: () => cy.get('input[aria-label="Penalty points for each incorrect row"]'),
+    pointsPerRowLabel: () => cy.get('.selection-grid-partial-points-per-response-label'),
+    enableRowHeadingLabel: () => cy.get('[data-ngie-testid="enable-row-heading-checkbox"] [class*="label"]'),
+    enableRowHeadingCheckbox: () => cy.get('[data-ngie-testid="enable-row-heading-checkbox"] .ngie-checkbox'),
+    leftPaginationButtonSpecifyCorrectAnswerSection: () => cy.get('.set-correct-ans-selection-grid [aria-label="Left Pagination Button"]'),
+    rightPaginationButtonSpecifyCorrectAnswerSection: () => cy.get('.set-correct-ans-selection-grid [aria-label="Right Pagination Button"]'),
 }
 
 const steps = {
@@ -82,6 +92,14 @@ const steps = {
         });
     },
 
+    verifyTextInCellPropertyInputField: ({ row, column }, text) => {
+        utilities.getNthElement(gridQuestionCommonComponent.editCellPropertyRow(), row).within(() => {
+            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column).within(() => {
+                utilities.verifyTextContent(gridQuestionCommonComponent.cellPropertyInputField(), text);
+            });
+        });
+    },
+
     /**
      * Enters text into the input field of an option cell.
      * @param {Object} position - The position of the option cell.
@@ -99,6 +117,14 @@ const steps = {
         });
     },
 
+    verifyTextInOptionCellInputField: ({ row, column }, text) => {
+        utilities.getNthElement(gridQuestionCommonComponent.editCellPropertyRow(), row).within(() => {
+            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column).within(() => {
+                utilities.verifyTextContent(gridQuestionCommonComponent.optionCellPropertyInputField(), text);
+            });
+        });
+    },
+
     setRowsAndColumnsForBasicQuestion: () => {
         gridQuestionCommonComponent.steps.modifyTableCellProperty({ row: 1, column: 0 }, 'Heading');
         gridQuestionCommonComponent.steps.modifyTableCellProperty({ row: 2, column: 0 }, 'Subheading');
@@ -106,38 +132,106 @@ const steps = {
         gridQuestionCommonComponent.steps.enterTextInCellPropertyInputField({ row: 2, column: 0 }, 'Bats are blind and navigate by using echolocation');
     },
 
-    //Note: Need to work on this after https://redmine.zeuslearning.com/issues/565255 gets resolved
     /**
-     * @param {number} cellIndex - Index of the table cell.
-     * @param {("Heading" | "Subheading" | "Text" | "None")} cellProperty - Type of property to verify.
-     * @description Verifies the appearance and content of a specific property in a table cell on the preview tab.
+     * Verifies the property of a cell in the preview tab of a grid question component.
+     * @param {Object} cellPosition - The position of the cell to verify, containing row and column indices.
+     * @param {number} cellPosition.row - The row index of the cell.
+     * @param {number} cellPosition.column - The column index of the cell.
+     * @param {'None'|Heading'|'Subheading'|'Text'|'Radio button'|'Checkbox'|'Radio button with text'|'Checkbox with text'|'No radio button'|'No checkbox'} cellProperty - The property to verify for the cell.
+     * @throws {Error} If an invalid cellProperty is provided.
      */
-    verifyTableCellPropertyPreviewTab: (cellIndex, cellProperty) => {
-        switch (cellProperty) {
-            case 'Heading':
-                utilities.getNthElement(gridQuestionCommonComponent.cellContainerPreviewTab(), cellIndex)
-                    .should('have.class', 'heading');
-                break;
-            case 'Subheading':
-                utilities.getNthElement(gridQuestionCommonComponent.cellContainerPreviewTab(), cellIndex)
-                    .should('have.class', 'subheading');
-                break;
-            case 'Text':
-                utilities.getNthElement(gridQuestionCommonComponent.cellContainerPreviewTab(), cellIndex)
-                    .should('have.class', 'text');
-                break;
-            case 'Dropzone':
-                utilities.getNthElement(gridQuestionCommonComponent.cellContainerPreviewTab(), cellIndex)
-                    .should('have.class', 'dropzone-cell');
-                break;
-            case 'None':
-                utilities.getNthElement(gridQuestionCommonComponent.cellContainerPreviewTab(), cellIndex)
-                    .should('have.class', 'text')
-                    .and('have.text', '');
-                break;
-            default:
-                throw new Error('Invalid list option');
-        };
+    verifyTableCellPropertyPreviewTab: ({ row, column }, cellProperty) => {
+        gridQuestionCommonComponent.gridPreviewTab().within(() => {
+            utilities.getNthElement(gridQuestionCommonComponent.tableRow(), row)
+                .within(() => {
+                    switch (cellProperty) {
+                        case 'None':
+                            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                                .should('have.class', 'cell-content-none');
+                            break;
+                        case 'Heading':
+                            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                                .should('have.class', 'cell-content-heading');
+                            break;
+                        case 'Subheading':
+                            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                                .should('have.class', 'cell-content-subeading');
+                            break;
+                        case 'Text':
+                            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                                .should('have.class', 'cell-content-text');
+                            break;
+                        case 'Radio button':
+                        case 'Checkbox':
+                            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                                .should('have.class', 'cell-content-radio');
+                            break;
+                        case 'Radio button with text':
+                        case 'Checkbox with text':
+                            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                                .should('have.class', 'cell-content-radio-text');
+                            break;
+                        case 'No radio button':
+                        case 'No checkbox':
+                            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                                .should('have.class', 'cell-content-text');
+                            break;
+                        default:
+                            throw new Error('Invalid list option');
+                    };
+                });
+        });
+    },
+
+    /**
+     * Verifies the property of a cell in the specify correct answer section of a grid question component.
+     * @param {Object} cellPosition - The position of the cell to verify, containing row and column indices.
+     * @param {number} cellPosition.row - The row index of the cell.
+     * @param {number} cellPosition.column - The column index of the cell.
+     * @param {'None'|Heading'|'Subheading'|'Text'|'Radio button'|'Checkbox'|'Radio button with text'|'Checkbox with text'|'No radio button'|'No checkbox'} cellProperty - The property to verify for the cell.
+     * @throws {Error} If an invalid cellProperty is provided.
+     */
+    verifyTableCellPropertySpecifyCorrectAnswerSection: ({ row, column }, cellProperty) => {
+        gridQuestionCommonComponent.gridSpecifyCorrectAnswerSection().within(() => {
+            utilities.getNthElement(gridQuestionCommonComponent.tableRow(), row)
+                .within(() => {
+                    switch (cellProperty) {
+                        case 'None':
+                            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                                .should('have.class', 'cell-content-none');
+                            break;
+                        case 'Heading':
+                            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                                .should('have.class', 'cell-content-heading');
+                            break;
+                        case 'Subheading':
+                            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                                .should('have.class', 'cell-content-subeading');
+                            break;
+                        case 'Text':
+                            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                                .should('have.class', 'cell-content-text');
+                            break;
+                        case 'Radio button':
+                        case 'Checkbox':
+                            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                                .should('have.class', 'cell-content-radio');
+                            break;
+                        case 'Radio button with text':
+                        case 'Checkbox with text':
+                            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                                .should('have.class', 'cell-content-radio-text');
+                            break;
+                        case 'No radio button':
+                        case 'No checkbox':
+                            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                                .should('have.class', 'cell-content-text');
+                            break;
+                        default:
+                            throw new Error('Invalid list option');
+                    };
+                });
+        });
     },
 
     /**
@@ -238,6 +332,21 @@ const steps = {
             });
     },
 
+    /**
+     * Unchecks an option in the Specify Correct Answer section of a grid question component.
+     * @param {Object} cellPosition - The position of the option to uncheck, containing row and column indices.
+     * @param {number} cellPosition.row - The row index of the option.
+     * @param {number} cellPosition.column - The column index of the option.
+     */
+    uncheckOptionInSpecifyCorrectAnswerSection: ({ row, column }) => {
+        utilities.getNthElement(gridQuestionCommonComponent.tableRowSpecifyCorrectAnswerSection(), row)
+            .within(() => {
+                utilities.getNthElement(gridQuestionCommonComponent.optionsButton(), column)
+                    .click()
+                    .should('not.have.class', 'selected');
+            });
+    },
+
     /**
      * Sets answers for all question stems in the Specify Correct Answer section.
      * @param {Object[]} rowsAndColumns - An array of objects containing row and column indices.
@@ -289,8 +398,7 @@ const steps = {
         gridQuestionCommonComponent.gridPreviewTab().within(() => {
             utilities.getNthElement(gridQuestionCommonComponent.tableRow(), row)
                 .within(() => {
-                    utilities.getNthElement(gridQuestionCommonComponent.optionsButton(), column)
-                        .should('have.attr', 'tabindex', '-1');
+                    utilities.verifyElementDisabledClass(utilities.getNthElement(gridQuestionCommonComponent.optionsButton(), column));
                 });
         });
     },
@@ -396,8 +504,8 @@ const steps = {
     },
 
     /**
-     * @description Allots penalty points for each incorrect text container
-     * @param {number} points - The penalty points to be allotted for each text container.
+     * @description Allots penalty points for each incorrect row
+     * @param {number} points - The penalty points to be allotted for each row.
      */
     allotPenaltyPointsForEachIncorrectRow: (points) => {
         gridQuestionCommonComponent.penaltyPointsForEachIncorrectRowInputField()
@@ -406,9 +514,254 @@ const steps = {
             .should('have.value', points)
             .blur();
     },
+
+    /**
+     * Verifies the points per row value in the grid question component.
+     * @param {number} pointsValue - The expected points value per row.
+     */
+    verifyPointsPerRowValue: (pointsValue) => {
+        utilities.verifyInnerText(gridQuestionCommonComponent.pointsPerRowLabel(), `Points per row: ${pointsValue}`)
+    },
+
+    /**
+    * @description verify the displayed penalty points for each incorrect row
+    * @param {number} penaltyPoints displayed penalty points 
+    */
+    verifyPenaltyPointsForEachIncorrectRow: (penaltyPoints) => {
+        utilities.verifyInnerText(autoScoredScoringSectionMultiResponseType.penaltyPointsDetailsSectionAllottedPointsLabel(), `Penalty points for each incorrect row: ${penaltyPoints}`);
+    },
+
+    /**
+    * @description Verifies the penalty points value for each incorrect row
+    * @param {number} points - The expected penalty points value for each incorrect row.
+    */
+    verifyPenaltyPointsForEachIncorrectRowValue: (points) => {
+        gridQuestionCommonComponent.penaltyPointsForEachIncorrectRowInputField()
+            .should('have.value', points);
+    },
+
+    /**
+     * @description Verify the number of columns in the specify columns and rows section grid
+     * @param {number} numberOfColumns Number of columns in the specify columns and rows section grid
+     */
+    verifyColumnsCountInSpecifyColumnsAndRowsGrid: (numberOfColumns) => {
+        gridQuestionCommonComponent.editCellPropertyTableWrapper()
+            .within(() => {
+                utilities.verifyElementCount(gridQuestionCommonComponent.tableCell(), numberOfColumns);
+            });
+    },
+
+    /**
+     * @description Verify the number of columns in the specify columns and rows section grid
+     * @param {number} numberOfRows Number of rows in the specify columns and rows section grid
+     */
+    verifyRowsCountInSpecifyColumnsAndRowsGrid: (numberOfRows) => {
+        gridQuestionCommonComponent.editCellPropertyTableWrapper()
+            .within(() => {
+                utilities.verifyElementCount(gridQuestionCommonComponent.tableRow(), numberOfRows);
+            });
+    },
+
+    verifyEnableRowHeadingCheckboxCheckedState: () => {
+        gridQuestionCommonComponent.enableRowHeadingCheckbox()
+            .should('be.checked');
+    },
+
+    checkEnableRowHeadingCheckbox: () => {
+        gridQuestionCommonComponent.enableRowHeadingCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    uncheckEnableRowHeadingCheckbox: () => {
+        gridQuestionCommonComponent.enableRowHeadingCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    /**
+     * Verifies the text content of a cell in the Specify Correct Answer section of a grid question component.
+     * @param {Object} cellPosition - The position of the cell to verify, containing row and column indices.
+     * @param {number} cellPosition.row - The row index of the cell.
+     * @param {number} cellPosition.column - The column index of the cell.
+     * @param {string} text - The expected text content of the cell.
+     */
+    verifyTextInGridCellSpecifyCorrectAnswerSection: ({ row, column }, text) => {
+        utilities.getNthElement(gridQuestionCommonComponent.tableRowSpecifyCorrectAnswerSection(), row).within(() => {
+            utilities.verifyTextContent(utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column), text);
+        });
+    },
+
+    /**
+     * Verifies the text content of a cell in the Preview tab of a grid question component.
+     * @param {Object} cellPosition - The position of the cell to verify, containing row and column indices.
+     * @param {number} cellPosition.row - The row index of the cell.
+     * @param {number} cellPosition.column - The column index of the cell.
+     * @param {string} text - The expected text content of the cell.
+     */
+    verifyTextInGridCellPreviewTab: ({ row, column }, text) => {
+        utilities.getNthElement(gridQuestionCommonComponent.tableRowPreviewTab(), row).within(() => {
+            utilities.verifyTextContent(utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column), text);
+        });
+    },
+
+    clickOnRightPaginationButtonSpecifyCorrectAnswerSection: () => {
+        gridQuestionCommonComponent.rightPaginationButtonSpecifyCorrectAnswerSection()
+            .click();
+    },
+
+    clickOnLeftPaginationButtonSpecifyCorrectAnswerSection: () => {
+        gridQuestionCommonComponent.leftPaginationButtonSpecifyCorrectAnswerSection()
+            .click();
+    },
+
+    /**
+     * Verifies that questions are randomized in the preview tab of a grid question component.
+     * @param {Array<string>} questionsArray - An array containing the original questions in their initial order.
+     * @returns {void}
+     */
+    verifyRandomizeQuestionsOrder: (questionsArray) => {
+        let currentQuestions = [...questionsArray]
+        for (let index = 0; index < currentQuestions.length; index++) {
+            utilities.getNthElement(gridQuestionCommonComponent.tableRowPreviewTab(), index + 1)
+                .within(() => {
+                    utilities.getNthElement(gridQuestionCommonComponent.tableCell(), 0)
+                        .then(($element) => {
+                            expect($element.text()).to.be.oneOf(currentQuestions);
+                            currentQuestions = currentQuestions.filter((value) => value !== $element.text())
+                        });
+                });
+        };
+        gridQuestionCommonComponent.steps.verifyQuestionsAreReRandomized(questionsArray)
+    },
+
+    /**
+    * @param {string[]} previousOrderOfQuestionsArray array of previous order of the question stems
+    * @description this function verifies that the order of the question stems is different from the previous order
+    */
+    verifyQuestionsAreReRandomized: (previousOrderOfQuestionsArray) => {
+        gridQuestionCommonComponent.questionsColumnPreviewTab()
+            .should('not.have.text', '')
+            .and('not.have.text', previousOrderOfQuestionsArray.join(''));
+    },
+
+    getQuestionsArray: () => {
+        const questionsArray = []
+        gridQuestionCommonComponent.questionsColumnPreviewTab()
+            .each(($el) => {
+                cy.wrap($el)
+                    .invoke('text')
+                    .then((text) => {
+                        questionsArray.push(text);
+                    });
+            });
+        return questionsArray;
+    },
+}
+
+const tests = {
+    verifyContentsOfSpecifyCorrectAnswerSection: () => {
+        it(`When the user selects any scoring type except for manual scored, then the question grid should be displayed in the specify correct answer section`, () => {
+            gridQuestionCommonComponent.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 0, column: 0 }, 'None');
+            gridQuestionCommonComponent.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 0, column: 1 }, 'Heading');
+            gridQuestionCommonComponent.steps.verifyTextInCellPropertyInputField({ row: 0, column: 1 }, 'True');
+            gridQuestionCommonComponent.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 0, column: 2 }, 'Heading');
+            gridQuestionCommonComponent.steps.verifyTextInCellPropertyInputField({ row: 0, column: 2 }, 'False');
+            gridQuestionCommonComponent.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 1, column: 0 }, 'Heading');
+            gridQuestionCommonComponent.steps.verifyTextInCellPropertyInputField({ row: 1, column: 0 }, 'Elephants are the only mammals that can\'t jump');
+            gridQuestionCommonComponent.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 1, column: 1 }, 'Radio button');
+            gridQuestionCommonComponent.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 2, column: 0 }, 'Subheading');
+            gridQuestionCommonComponent.steps.verifyTextInCellPropertyInputField({ row: 2, column: 0 }, 'Bats are blind and navigate by using echolocation');
+            gridQuestionCommonComponent.steps.verifyTextInCellPropertyInputField({ row: 3, column: 0 }, 'Whale are mammals');
+            gridQuestionCommonComponent.steps.verifyTextInCellPropertyInputField({ row: 4, column: 0 }, 'Tigers can jump upto 3 metres');
+
+        });
+    },
+
+    /**
+     * Verifies the contents and functionality of the 'Specify correct answer' accordion for multiple selection questions.
+     * @param {{'Correct' | 'Alternative'}} accordionName - The name of the accordion to be used in the validation.
+     * @example - verifySpecifyCorrectAnswerAccordionContentsAndFunctionality('Correct');
+     */
+    verifySpecifyCorrectAnswerAccordionContentsAndFunctionality: (accordionName) => {
+        it(`The user should be able to check an option in the ${accordionName} accordion`, () => {
+            gridQuestionCommonComponent.steps.setAnswerInSpecifyCorrectAnswerSection({ row: 1, column: 0 });
+        });
+
+        it(`When the user has unchecked all the options in the ${accordionName} accordion, \'Error: Please set a correct answer.\' error message should be thrown along with an error icon on the \'${accordionName}\' accordion`, () => {
+            gridQuestionCommonComponent.steps.uncheckOptionInSpecifyCorrectAnswerSection({ row: 1, column: 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()
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
+                    });
+            };
+        });
+
+        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredCorrectAnswerErrorMessageCSSAndA11y();
+
+        it('When the user checks an option in the question grid, the error message should disappear', () => {
+            gridQuestionCommonComponent.steps.setAnswersForAllQuestionStemsInSpecifyCorrectAnswerSection([{ row: 1, column: 0 }, { row: 2, column: 1 }, { row: 3, column: 0 }, { row: 4, column: 1 }]);
+            commonComponents.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty(accordionName);
+
+        it('CSS of \'Correct\' accordion contents', { tags: 'css' }, () => {
+            gridQuestionCommonComponent.gridSpecifyCorrectAnswerSection()
+                .within(() => {
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.tableCell().parent(), 1), {
+                        'background-color': css.color.matrixHeadingCellBg,
+                        'border-color': `${css.color.matrixCellBorder}`
+                    });
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.tableCell().parent(), 6), {
+                        'background-color': css.color.matrixSubheadingCellBg,
+                        'border-color': `${css.color.matrixCellBorder}`
+                    });
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.tableCell().parent(), 9), {
+                        'background-color': css.color.defaultBackground,
+                        'border-color': `${css.color.matrixCellBorder}`
+                    });
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.optionsButton, 0), {
+                        'background-color': css.color.matrixHeadingCellBg,
+                        'color': `${css.color.matrixCellBorder}`
+                    });
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.optionsButton, 0).find('svg'), {
+                        'color': css.color.activeButtons
+                    });
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.tableCell(), 1).find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.heading,
+                        'font-weight': css.fontWeight.bold
+                    });
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.tableCell(), 6).find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.bold
+                    });
+                    utilities.verifyCSS(utilities.getNthElement(gridQuestionCommonComponent.tableCell(), 9).find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular
+                    });
+                });
+        });
+
+        it('Accessibility of \'Correct\' accordion contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(gridQuestionCommonComponent.tableCell().parents('.correct-answer-accordion'));
+        });
+    },
 }
 
 export const gridQuestionCommonComponent = {
     ...selectors,
     steps,
+    tests
 }

package/cypress/pages/components/maximumRecorderLengthComponent.js

@@ -113,7 +113,7 @@ const tests = {
 
         it('When the user updates the \'Maximum recorder length\' value, then the validation message \'Error: Maximum recorder length is required.\' should disappear.', () => {
             maximumRecorderLengthComponent.steps.setMaximumRecorderLength('1000');
-            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'hidden');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
         });
 
         it('When the user has set \'Maximum recorder length\' to \'0\' (zero), a validation message \'Error: Value must be greater than 0 secs.\' should be displayed', () => {
@@ -127,7 +127,7 @@ const tests = {
 
         it('When the user updates the \'Maximum recorder length\' value, then the validation message \'Error: Value must be greater than 0 secs.\' should disappear', () => {
             maximumRecorderLengthComponent.steps.setMaximumRecorderLength('1000');
-            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'hidden');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
         });
     },
 
@@ -151,7 +151,7 @@ const tests = {
 
         it('When the user updates the \'Maximum recorder length\' value, then the validation message \'Error: Maximum recorder length is required.\' should disappear.', () => {
             maximumRecorderLengthComponent.steps.setMaximumRecorderLength('50');
-            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'hidden');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
         });
 
         it('When the user has set \'Maximum recorder length\' to \'0\' (zero), a validation message \'Error: Value must be greater than 0 mins.\' should be displayed', () => {
@@ -165,7 +165,7 @@ const tests = {
 
         it('When the user updates the \'Maximum recorder length\' value, then the validation message \'Error: Value must be greater than 0 mins.\' should disappear', () => {
             maximumRecorderLengthComponent.steps.setMaximumRecorderLength('50');
-            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'hidden');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
         });
     },
 }

package/cypress/pages/components/playbackControlsBaseComponent.js

@@ -43,6 +43,11 @@ const steps = {
             .trigger('mouseover')
     },
 
+    hoverOnPlaybackSpeedButton: () => {
+        playbackControlsBaseComponent.playbackSpeedButton()
+            .trigger('mouseover');
+    },
+
     /**
      * @param {number} volume of the audio/video player - from 0 to 100
      * @description this function is used to verify volume of the audio/video player
@@ -269,12 +274,13 @@ const tests = {
 
     verifyPlaybackSpeedContents: () => {
         it('When the user hovers overs the playback button, a list of 4 playback speed options - 1x, 1.25x, 1.5x, 2x should be displayed and by default 1x should be in selected state', () => {
-            utilities.hoverOverElement(playbackControlsBaseComponent.playbackSpeedButton());
+            playbackControlsBaseComponent.playbackSpeedButton()
+                .trigger('mouseover');
             utilities.verifyElementVisibilityState(playbackControlsBaseComponent.playbackSpeedOptionsList(), 'visible');
             utilities.verifyElementCount(playbackControlsBaseComponent.playbackSpeedOption(), 4);
             playbackControlsBaseComponent.steps.verifyPlaybackSpeedListOptions();
             playbackControlsBaseComponent.steps.verifyPlaybackSpeedOptionSelectedState('1x');
-            utilities.hoverAwayFromElement();
+            playbackControlsBaseComponent.steps.selectPlaybackSpeed('1x');
         });
 
         it('CSS of playback speed options', { tags: 'css' }, () => {

package/cypress/pages/components/scoringSectionBaseEditTab.js

@@ -28,7 +28,7 @@ const selectors = {
             return cy.get('[aria-labelledby*="minimum-scoring-dropdown-label"] [role="option"]')
         }
     },
-    minimumPointsLabel: () => cy.get('.min-score-points-label'),
+    minimumPointsLabel: () => cy.get('[class*="min-score-points-label"]'),
     minimumPointsInputField: () => cy.get('.min-score-points-input-field input'),
 }
 

package/cypress/pages/contentBlocksPage.js

@@ -461,7 +461,7 @@ const steps = {
         contentBlocksPage.lexileInputField()
             .clear()
             .type(text)
-            .should('have.text', text);
+            .should('have.value', text);
     },
 
     /**

package/cypress/pages/drawingResponsePage.js

@@ -42,7 +42,7 @@ const selectors = {
     },
 
     //Default colors
-    defaultStrokeColorsWrapper: () => cy.get('ColorSelectionComponentstyles__DefaultColorOptions').eq(0),
+    defaultStrokeColorsWrapper: () => cy.get('[class*="ColorSelectionComponentstyles__DefaultColorOptions"]').eq(0),
     defaultStrokeFontColorLabel: () => cy.get('[class*="ColorSelectionComponentstyles__LabelWrapper"]').eq(0),
     colorPickerBlock: () => cy.get('.color-picker-block'),
     colorPickerBlockCloseIcon: () => cy.get('[class*="ColorSelectionComponentstyles__CloseIcon"]'),
@@ -181,7 +181,7 @@ const selectors = {
     additionalSettingsStrokeImage: () => cy.get('[class*="DrawingResponsestyles__StrokeLineThicknessWrapper"] svg[aria-label*="Stroke"]'),
     setLineTypeButton: (ariaLabel = null) => {
         if (ariaLabel) {
-            return cy.get(`[class*="DrawingResponsestyles__SetLineTypeWrapper"] button[aria-label*="Set Line Types group ${ariaLabel}"]`)
+            return cy.get(`[class*="DrawingResponsestyles__SetLineTypeWrapper"] button[aria-label*="Set line types group ${ariaLabel}"]`)
         } else {
             return cy.get('[class*="DrawingResponsestyles__SetLineTypeWrapper"] button')
         }
@@ -230,9 +230,9 @@ const steps = {
     selectEditTabToolbarOptions: (arrayOfToolbarOptions) => {
         arrayOfToolbarOptions.forEach((arialabel) => {
             drawingResponsePage.toolbarOptionsAndControlsFormattingOptionsTiles(arialabel)
-                .click()
-                .find('[role="menuitemcheckbox"]')
-                .should('have.attr', 'aria-checked', 'true');
+                .click();
+            drawingResponsePage.toolbarOptionsAndControlsFormattingOptionsTiles(arialabel)
+                .should('have.attr', 'data-aria-pressed', 'true');
         });
     },
 
@@ -343,7 +343,7 @@ const steps = {
 
     clickOnAddColorBlockInDefaultFontStrokeColorBlockSection: () => {
         drawingResponsePage.colorPickerBlock()
-            .find('[data-name="Add color"]')
+            .find('.icon-plus')
             .click();
     },
 
@@ -1169,7 +1169,6 @@ const steps = {
     clickOnStudentViewUpperCanvas: () => {
         drawingResponsePage.studentViewUpperCanvas()
             .click({ force: true });
-        createQuestionBasePage
     },
 
     verifyCustomizeToolbarOptionsAndControlsAccordionCollapsedState: () => {
@@ -1183,9 +1182,9 @@ const steps = {
      */
     deselectToolbarOptionsAndControlsFormattingOptionsTiles: (toolbarOption) => {
         drawingResponsePage.toolbarOptionsAndControlsFormattingOptionsTiles(toolbarOption)
-            .click()
-            .find('[role="menuitemcheckbox"]')
-            .should('have.attr', 'aria-checked', 'false');
+            .click();
+        drawingResponsePage.toolbarOptionsAndControlsFormattingOptionsTiles(toolbarOption)
+            .should('have.attr', 'data-aria-pressed', 'false');
     },
 
     /**

package/cypress/pages/geoGebraActivityPage.js

@@ -42,7 +42,8 @@ const steps = {
     addInputToInsertResourceLinkInputField: (inputURL) => {
         geoGebraActivityPage.insertResourceLinkInputField()
             .clear()
-            .type(`${inputURL}`);
+            .type(`${inputURL}`)
+            .blur();
     },
 
     clearInputToInsertResourceLinkInputField: () => {