itemengine-cypress-automation 1.0.2

package/cypress/pages/components/gridCommonComponents.js

@@ -0,0 +1,951 @@
+import { commonComponents } from "./commonComponents";
+import { optionsWrapperComponent } from "./optionsWrapperComponent";
+const css = Cypress.env('css');
+
+const selectors = {
+    optionNumeration: () => cy.get('[class*="SingleOptionstyle__AdornmentWrapper"]'),
+    //Question Stem section
+    questionStemLabel: () => cy.get('.options-label').eq(0),
+    addQuestionStemButton: () => cy.get('.add-option-wrapper-cls button').eq(0),
+    buttonDeleteQuestionStem: () => cy.get('[aria-label*="Delete stem"]'),
+    //TODO: Need to add unique class name once available https://redmine.zeuslearning.com/issues/518498
+    questionStemWrapper: () => cy.get('.edit-mcq-options-wrapper').eq(0).find('.edit-mcq-option-wrapper'),
+    questionStemInputField: () => cy.get('[title="Enter question stem"]'),
+    //Options section
+    optionsLabel: () => cy.get('.options-label').eq(1),
+    addOptionButton: () => cy.get('.add-option-wrapper-cls button').eq(1),
+    optionWrapper: () => cy.get('.edit-mcq-options-wrapper').eq(1).find('.edit-mcq-option-wrapper'),
+    optionInputField: () => cy.get('[title="Enter option"]'),
+    buttonDeleteOption: () => cy.get('[aria-label*="Delete option"]'),
+    //Set correct answer section
+    setCorrectAnswerTable: () => cy.get('.single-selection-grid-wrapper'),
+    setCorrectAnswerTableRow: () => cy.get('[data-testid*="MUIDataTableBodyRow"]'),
+    setCorrectAnswerTableHeader: () => cy.get('.table-header.option-header-cell'),
+    setCorrectAnswerTableInlineOptions: () => cy.get('.single-selection-grid-radio-label-wrapper .question-text-wrapper'),
+    setCorrectAnswerTableNoQuestionStemAddedLabel: () => cy.get('.option-label.all-stem-empty'),
+    setCorrectAnswerTableQuestionStemTitle: () => cy.get('[id*="stem-header-id"] .question-text-wrapper'),
+    setCorrectAnswertableQuestionStem: () => cy.get('.stem-cell-data .question-text-wrapper'),
+    //Preview tab
+    previewTabAnswerTableQuestionStemTitle: () => cy.get('.edit-question-preview-wrapper [class*="TableHeaderstyles__ContentWrapper"]').eq(0),
+    previewTabAnswerTableNoQuestionStemAddedLabel: () => cy.get('.edit-question-preview-wrapper .option-label.all-stem-empty'),
+    previewTabAnswerTableRow: () => cy.get('.edit-question-preview-wrapper [data-testid*="MUIDataTableBodyRow"]'),
+    previewTabAnswerTableHeader: () => cy.get('.edit-question-preview-wrapper .table-header.option-header-cell'),
+    previewTabAnswertableQuestionStem: () => cy.get('.edit-question-preview-wrapper .stem-cell-data .question-text-wrapper'),
+    previewTabAnswerTable: () => cy.get('.edit-question-preview-wrapper .single-selection-grid-wrapper'),
+    previewTabAnswerTableInlineOptions: () => cy.get('.edit-question-preview-wrapper .single-selection-grid-radio-label-wrapper .question-text-wrapper'),
+    //Randomize options
+    randomizeOptionsCheckbox: () => cy.get('[data-ngie-testid="randomize-options-checkbox"] input'),
+    randomizeOptionsCheckboxLabel: () => cy.get('[data-ngie-testid="randomize-options-checkbox"] .MuiFormControlLabel-label'),
+    //Scoring 
+    partialEqualWeightsPointsPerResponseScore: () => cy.get('.partial-different-points-wrapper [aria-label*="Points per response"]'),
+    partialDifferentWeightsPointsInputField: () => cy.get('.partial-different-points-wrapper .points-input-field input[type="text"]'),
+    correctIncorrectIconWrapper: () => cy.get('.tick-icon-wrapper'),
+    correctIncorrectAnswerBorder: () => cy.get('.edit-question-preview-wrapper [class*="indexstyles__CorrectIncorrectBorderWrapper"]'),
+    //Additional settings
+    gridStyleLabel: () => cy.get('#Grid-style-dropdown-label'),
+    gridStyleDropdown: () => cy.get('#Grid-style-select'),
+    gridStyleDropdownOptions: () => cy.get('[aria-labelledby*="Grid-style-dropdown-label"] .dropdown-menu-item'),
+    questionStemNumerationLabel: () => cy.get('#Question-stem-numeration-dropdown-label'),
+    questionStemNumerationDropdown: () => cy.get('#Question-stem-numeration-select'),
+    questionStemNumerationDropdownOptions: () => cy.get('[aria-labelledby*="Question-stem-numeration-dropdown-label"] .dropdown-menu-item'),
+    questionStemNumeration: () => cy.get('.stem-numeration-wrapper'),
+    previewTabQuestionStemNumeration: () => cy.get('.edit-question-preview-wrapper .stem-numeration-wrapper'),
+    titleForQuestionStemsLabel: () => cy.get('[class*="SingleSelectionGridstyles__InlineTextWrapper"] .additional-settings-label').eq(0),
+    titleForQuestionStemInputField: () => cy.get('[title="Title for question stems"]'),
+    titleForOptionsLabel: () => cy.get('[class*="SingleSelectionGridstyles__InlineTextWrapper"] .additional-settings-label').eq(1),
+    titleForOptionsInputField: () => cy.get('[title="Title for options"]'),
+    setCorrectAnswerTableOptionsTitle: () => cy.get('.options-title'),
+    setCorrectAnswerTableQuestionStemWrapper: () => cy.get('[class*="TableHeaderstyles__ContentWrapper"]').eq(0),
+    previewTabAnswerTableOptionsTitle: () => cy.get('.edit-question-preview-wrapper .options-title'),
+    questionStemWidthLabel: () => cy.get('[aria-labelledby="Question stem width"]'),
+    questionStemWidthInputField: () => cy.get('[aria-label="Question stem width"]'),
+    optionsWidthLabel: () => cy.get('[aria-labelledby="Option width"]'),
+    optionWidthInputField: () => cy.get('[aria-label="Option width"]'),
+    previousButton: () => cy.get('.left-side-button-wrapper button'),
+    nextButton: () => cy.get('.right-side-button-wrapper button')
+}
+
+const steps = {
+    addQuestionStem: () => {
+        gridCommonComponents.addQuestionStemButton()
+            .click()
+            .focus()
+            .blur();
+    },
+
+    deleteQuestionStem: (index) => {
+        gridCommonComponents.buttonDeleteQuestionStem()
+            .eq(index)
+            .click();
+    },
+
+    verifyQuestionStemDisabledDeleteButton: (index) => {
+        gridCommonComponents.questionStemWrapper()
+            .eq(index)
+            .within(() => {
+                gridCommonComponents.buttonDeleteQuestionStem()
+                    .should('be.disabled');
+            });
+    },
+
+    verifyAddQuestionStemLabel: () => {
+        gridCommonComponents.addQuestionStemButton()
+            .verifyInnerText('Add question stem')
+            .should('be.visible');
+    },
+
+    verifyQuestionStemErrorMessageIsNotDisplayed: (index) => {
+        gridCommonComponents.questionStemWrapper()
+            .eq(index)
+            .within(() => {
+                commonComponents.errorMessage()
+                    .should('not.exist');
+            });
+    },
+
+    verifyQuestionStemErrorMessageIsDisplayed: (index) => {
+        gridCommonComponents.questionStemWrapper()
+            .eq(index)
+            .within(() => {
+                commonComponents.errorMessage()
+                    .should('have.text', 'Error: Question stem is required.');
+            });
+    },
+
+    addInputToQuestionStemField: (stemIndex, responseFieldText) => {
+        gridCommonComponents.questionStemInputField()
+            .eq(stemIndex)
+            .type(responseFieldText, { delay: 0 })
+            .should('have.text', responseFieldText);
+    },
+
+    addInputToAllQuestionStemFields: (responseTextArray) => {
+        responseTextArray.forEach((responseFieldText, optionIndex) => {
+            steps.addInputToQuestionStemField(optionIndex, responseFieldText)
+        });
+    },
+
+    verifyQuestionStemContents: (index) => {
+        gridCommonComponents.questionStemWrapper()
+            .eq(index)
+            .within(() => {
+                optionsWrapperComponent.optionsInputField()
+                    .should('have.attr', 'data-cke-editorplaceholder', 'Enter question stem')
+                commonComponents.dragHandleButton()
+                    .should('exist');
+                gridCommonComponents.buttonDeleteQuestionStem()
+                    .should('be.visible');
+                gridCommonComponents.optionNumeration()
+                    .should('have.text', index + 1);
+            });
+    },
+
+    verifyDragHandleTooltipForQuestionStem: () => {
+        gridCommonComponents.questionStemWrapper()
+            .eq(0)
+            .within(() => {
+                commonComponents.dragHandleButton()
+                    .trigger('mouseover');
+            });
+        commonComponents.tooltipText()
+            .should('have.text', 'Drag to reorder');
+        gridCommonComponents.questionStemWrapper()
+            .eq(0)
+            .within(() => {
+                commonComponents.dragHandleButton()
+                    .trigger('mouseout');
+            });
+        commonComponents.tooltipText()
+            .should('not.exist');
+    },
+
+
+    verifyDeleteButtonTooltipForQuestionStem: () => {
+        gridCommonComponents.buttonDeleteQuestionStem()
+            .eq(0)
+            .trigger('mouseover');
+        commonComponents.tooltipText()
+            .should('have.text', 'Delete stem');
+        gridCommonComponents.buttonDeleteQuestionStem()
+            .eq(0)
+            .trigger('mouseout');
+        commonComponents.tooltipText()
+            .should('not.exist');
+    },
+
+    verifyDisabledDeleteButtonTooltipForQuestionStem: () => {
+        gridCommonComponents.buttonDeleteQuestionStem()
+            .trigger('mouseover', { force: true });
+        commonComponents.tooltipText()
+            .should('have.text', 'Minimum one question stem is required');
+        gridCommonComponents.buttonDeleteQuestionStem()
+            .trigger('mouseout', { force: true });
+        commonComponents.tooltipText()
+            .should('not.exist');
+    },
+
+    focusInAndFocusOutOfQuestionStemInputField: (index) => {
+        gridCommonComponents.questionStemWrapper()
+            .eq(index)
+            .within(() => {
+                gridCommonComponents.questionStemInputField()
+                    .click()
+                    .blur();
+            });
+    },
+
+    /**
+     * @param {number} countOfQuestionStems count of question stem input fields
+     * @description this function verifies the number of question stem input fields
+     */
+    verifyCountOfQuestionStemInputFields: (countOfQuestionStems) => {
+        gridCommonComponents.questionStemWrapper()
+            .should('have.length', countOfQuestionStems);
+    },
+
+    //Options
+    verifyAddOptionsButton: () => {
+        gridCommonComponents.addOptionButton()
+            .verifyInnerText('Add option')
+            .should('be.visible');
+    },
+
+    addOption: () => {
+        gridCommonComponents.addOptionButton()
+            .click();
+    },
+
+    deleteOption: (index) => {
+        gridCommonComponents.buttonDeleteOption()
+            .eq(index)
+            .click();
+    },
+
+    verifyOptionsLabel: () => {
+        //V3- Need to update once common functions are available
+        gridCommonComponents.optionsLabel()
+            .verifyInnerText('Options')
+            .should('be.visible');
+    },
+
+
+    /**
+     * @param {number} optionIndex 
+     * @description this function checks if delete option button is enabled
+     */
+    verifyOptionsDeleteButtonEnabled: (optionIndex) => {
+        gridCommonComponents.optionWrapper()
+            .eq(optionIndex)
+            .within(() => {
+                commonComponents.steps.verifyDeleteButtonEnabled()
+            });
+    },
+
+    /**
+     * @param {number} index of the option
+     * @description verify the enter option input field, drag handle, delete button and option numeration
+     */
+    verifyOptionsContents: (index) => {
+        gridCommonComponents.optionWrapper()
+            .eq(index)
+            .within(() => {
+                optionsWrapperComponent.optionsInputField()
+                    .should('have.attr', 'data-cke-editorplaceholder', 'Enter option');
+                commonComponents.dragHandleButton()
+                    .should('exist');
+                gridCommonComponents.buttonDeleteOption()
+                    .should('be.visible');
+                gridCommonComponents.optionNumeration()
+                    .should('have.text', index + 1);
+            });
+    },
+
+    verifyOptionsDeleteButtonDisabled: (index) => {
+        gridCommonComponents.optionWrapper()
+            .eq(index)
+            .within(() => {
+                gridCommonComponents.buttonDeleteOption()
+                    .should('be.disabled');
+            });
+    },
+
+    addInputToOptionField: (optionIndex, responseFieldText) => {
+        gridCommonComponents.optionInputField()
+            .eq(optionIndex)
+            .type(responseFieldText, { delay: 0 })
+            .should('have.text', responseFieldText);
+    },
+
+    addInputToAllOptionsFields: (responseTextArray) => {
+        responseTextArray.forEach((responseFieldText, optionIndex) => {
+            steps.addInputToOptionField(optionIndex, responseFieldText);
+        });
+    },
+
+    verifyOptionsErrorMessageIsDisplayed: (index) => {
+        gridCommonComponents.optionWrapper()
+            .eq(index)
+            .within(() => {
+                commonComponents.errorMessage()
+                    .should('have.text', 'Error: Option is required.');
+            });
+    },
+
+    verifyOptionsErrorMessageIsNotDisplayed: (index) => {
+        gridCommonComponents.optionWrapper()
+            .eq(index)
+            .within(() => {
+                commonComponents.errorMessage()
+                    .should('not.exist');
+            });
+    },
+
+    verifyDragHandleTooltipForOption: () => {
+        gridCommonComponents.optionWrapper()
+            .eq(0)
+            .within(() => {
+                commonComponents.dragHandleButton()
+                    .trigger('mouseover');
+            });
+        commonComponents.tooltipText()
+            .should('have.text', 'Drag to reorder');
+        gridCommonComponents.optionWrapper()
+            .eq(0)
+            .within(() => {
+                commonComponents.dragHandleButton()
+                    .trigger('mouseout');
+            });
+        commonComponents.tooltipText()
+            .should('not.exist');
+    },
+
+    verifyDeleteButtonTooltipForOption: () => {
+        gridCommonComponents.buttonDeleteOption()
+            .eq(0)
+            .trigger('mouseover');
+        commonComponents.tooltipText()
+            .should('have.text', 'Delete option');
+        gridCommonComponents.buttonDeleteOption()
+            .eq(0)
+            .trigger('mouseout');
+        commonComponents.tooltipText()
+            .should('not.exist');
+    },
+
+    verifyDisabledDeleteButtonTooltipForOption: () => {
+        gridCommonComponents.buttonDeleteOption()
+            .eq(0)
+            .trigger('mouseover', { force: true });
+        commonComponents.tooltipText()
+            .should('have.text', 'Minimum two options are required');
+        gridCommonComponents.buttonDeleteOption()
+            .eq(0)
+            .trigger('mouseout', { force: true });
+        commonComponents.tooltipText()
+            .should('not.exist');
+    },
+
+    focusInAndFocusOutOfOptionsInputField: (index) => {
+        gridCommonComponents.optionWrapper()
+            .eq(index)
+            .within(() => {
+                gridCommonComponents.optionInputField()
+                    .click()
+                    .blur();
+            });
+    },
+
+    /**
+    * @param {number} countOfOptionsInputField count of options input fields
+    * @description this function verifies the number of options input fields
+    */
+    verifyCountOfOptionsInputField: (countOfOptionsInputField) => {
+        gridCommonComponents.optionInputField()
+            .should('have.length', countOfOptionsInputField);
+    },
+
+    //Set correct answer section
+    /**
+    * @param {number} rowIndex index of the row
+    * @description this function verifies that an row does not exist
+    */
+    verifyTableRowDoesNotExistInSetCorrectAnswerTable: (rowIndex) => {
+        gridCommonComponents.setCorrectAnswerTableRow()
+            .eq(rowIndex)
+            .should('not.exist');
+    },
+
+    /**
+    * @param {string[]} questionStemsArray array of question stems
+    * @description this function verifies the question stems in the set correct answer table
+    */
+    verifyQuestionStemsInSetCorrectAnswerTable: (questionStemsArray) => {
+        questionStemsArray.forEach((questionStemsFieldtext, optionIndex) => {
+            gridCommonComponents.setCorrectAnswertableQuestionStem()
+                .eq(optionIndex)
+                .should('have.text', questionStemsFieldtext);
+        });
+    },
+
+    /**
+    * @param {number} columnIndex index of the column
+    * @description this function verifies that an column exists and is empty
+    */
+    verifyEmptyTableHeaderInSetCorrectAnswerTable: (index) => {
+        gridCommonComponents.setCorrectAnswerTableHeader()
+            .eq(index)
+            .should('be.visible')
+            .verifyInnerText('');
+    },
+
+    /**
+     * @param {number} columnIndex index of the column
+     * @description this function verifies that an column does not exist
+     */
+    verifyTableHeaderDoesNotExistInSetCorrectAnswerTable: (index) => {
+        gridCommonComponents.setCorrectAnswerTableHeader()
+            .eq(index)
+            .should('not.exist');
+    },
+
+    /**
+   * @param {string[]} optionsTextArray string of options
+   * @description this function verifies the options present in the table header of preview tab answer table
+   */
+    verifyTableHeaderContentsInSetCorrectAnswerTable: (optionsTextArray) => {
+        optionsTextArray.forEach((optionsText, index) => {
+            gridCommonComponents.setCorrectAnswerTableHeader()
+                .eq(index)
+                .should('have.text', optionsText)
+        });
+    },
+
+    //Preview tab
+    /**
+    * @param {number} rowIndex index of the row
+    * @description this function verifies that an row does not exist
+    */
+    verifyTableRowDoesNotExistInPreviewTabAnswerTable: (index) => {
+        gridCommonComponents.previewTabAnswerTableRow()
+            .eq(index)
+            .should('not.exist');
+    },
+
+    /**
+     * @param {string[]} questionStemsArray array of question stems
+     * @description this function verifies the question stems in the preview tab answer table
+     */
+    verifyQuestionStemsInPreviewTabAnswerTable: (questionStemsArray) => {
+        questionStemsArray.forEach((questionStemsFieldtext, optionIndex) => {
+            gridCommonComponents.previewTabAnswertableQuestionStem()
+                .eq(optionIndex)
+                .should('have.text', questionStemsFieldtext);
+        });
+    },
+
+    /**
+    * @param {number} columnIndex index of the column
+    * @description this function verifies that an column exists and is empty
+    */
+    verifyEmptyTableHeaderInPreviewTabAnswerTable: (index) => {
+        gridCommonComponents.previewTabAnswerTableHeader()
+            .eq(index)
+            .should('be.visible')
+            .verifyInnerText('');
+    },
+
+    /**
+    * @param {number} columnIndex index of the column
+    * @description this function verifies that an column does not exist
+    */
+    verifyColumnHeaderDoesNotExistInPreviewTabAnswerTable: (columnIndex) => {
+        gridCommonComponents.previewTabAnswerTableHeader()
+            .eq(columnIndex)
+            .should('not.exist');
+    },
+
+    /**
+     * @param {string[]} optionsTextArray string of options
+     * @description this function verifies the options present in the table header of preview tab answer table
+     */
+    verifyTableHeaderContentsInPreviewTabAnswerTable: (optionsTextArray) => {
+        optionsTextArray.forEach((optionsText, index) => {
+            gridCommonComponents.previewTabAnswerTableHeader()
+                .eq(index)
+                .should('have.text', optionsText)
+        });
+    },
+
+    //Scoring 
+    /**
+    * @param {number} points the points to be displayed in the partial equal weights points field
+    * @description this function checks the points per response in partial equal weights
+     */
+    verifyPartialEqualWeightsPointsPerResponseScore: (points) => {
+        gridCommonComponents.partialEqualWeightsPointsPerResponseScore()
+            .each(($element) => {
+                cy.wrap($element)
+                    .verifyInnerText(points);
+            });
+    },
+
+    /**
+    * @description this function checks if the partial different weights points field is empty and visible
+    */
+    verifyPartialDifferentWeightsPointsInputFieldIsEmpty: () => {
+        gridCommonComponents.partialDifferentWeightsPointsInputField()
+            .each(($element) => {
+                cy.wrap($element)
+                    .should('have.value', '')
+                    .and('exist');
+            });
+    },
+
+    /**
+     * @description this function checks if the partial different weights points field is disabled
+     */
+    verifyPartialDifferentWeightsPointsInputFieldIsDisabled: () => {
+        gridCommonComponents.partialDifferentWeightsPointsInputField()
+            .each(($element) => {
+                cy.wrap($element)
+                    .should('be.disabled');
+            });
+    },
+
+    /**
+    * @description this function checks if the partial different weights points field is enabled
+    */
+    verifyPartialDifferentWeightsPointsInputFieldIsEnabled: () => {
+        gridCommonComponents.partialDifferentWeightsPointsInputField()
+            .each(($element) => {
+                cy.wrap($element)
+                    .should('be.enabled');
+            });
+    },
+
+    /**
+     * @param {number[]} pointsArray the array of points to be alloted to each question stem
+     * @description this function allots points to all the question stems
+     */
+    allotPartialDifferentWeightsToAllPointsFields: (pointsArray) => {
+        pointsArray.forEach((points, columnIndex) => {
+            gridCommonComponents.partialDifferentWeightsPointsInputField()
+                .eq(columnIndex)
+                .clear()
+                .type(points, { delay: 0 })
+                .should('have.value', points);
+        });
+    },
+
+    //Randomize options
+    getQuestionStemsArray: () => {
+        const questionStemsArray = []
+        gridCommonComponents.previewTabAnswertableQuestionStem()
+            .each(($el) => {
+                cy.wrap($el)
+                    .invoke('text')
+                    .then((text) => {
+                        questionStemsArray.push(text);
+                    });
+            });
+        return questionStemsArray;
+    },
+
+    verifyRandomizeOptionsCheckboxUnchecked: () => {
+        gridCommonComponents.randomizeOptionsCheckbox()
+            .should('exist')
+            .should('not.be.checked');
+    },
+
+    selectRandomizeOptionsCheckbox: () => {
+        gridCommonComponents.randomizeOptionsCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    deselectRandomizeOptionsCheckbox: () => {
+        gridCommonComponents.randomizeOptionsCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    verifyRandomizeQuestionStemsOrder: (questionStemsArray) => {
+        let currentQuestionStems = [...questionStemsArray]
+        for (let index = 0; index < currentQuestionStems.length; index++) {
+            gridCommonComponents.previewTabAnswertableQuestionStem()
+                .eq(index)
+                .then(($element) => {
+                    expect($element.text()).to.be.oneOf(currentQuestionStems);
+                    currentQuestionStems = currentQuestionStems.filter((value) => value !== $element.text())
+                });
+        };
+        gridCommonComponents.steps.verifyQuestionStemsAreRerandomized(questionStemsArray)
+    },
+
+    /**
+    * @param {string[]} previousOrderOfQuestionStemsArray 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
+    */
+    verifyQuestionStemsAreRerandomized: (previousOrderOfQuestionStemsArray) => {
+        gridCommonComponents.previewTabAnswertableQuestionStem()
+            .should('not.have.text', '')
+            .and('not.have.text', previousOrderOfQuestionStemsArray.join(''));
+    },
+
+    verifyPleaseSetACorrectAnswerErrorMessage: () => {
+        commonComponents.errorMessage()
+            .eq(1)
+            .verifyInnerText('Error: Please set a correct answer.')
+            .should('be.visible');
+    },
+
+    navigateForwardUsingNextButton: () => {
+        gridCommonComponents.nextButton()
+            .click();
+    },
+
+    navigateBackwardUsingPreviousButton: () => {
+        gridCommonComponents.previousButton()
+            .click();
+    },
+
+    expandGridStyleDropdown: () => {
+        gridCommonComponents.gridStyleDropdown()
+            .click();
+    },
+
+    /**
+     * @param {string} dropdownOption the parameter should be one of 'With border', 'Row dividers', 'No border', 'Inline', 'Inline - row dividers'
+     * @description This function selects an dropdown option
+     */
+    selectGridStyleDropdownOption: (dropdownOption) => {
+        steps.expandGridStyleDropdown()
+        gridCommonComponents.gridStyleDropdownOptions()
+            .contains(dropdownOption)
+            .click();
+    },
+
+    /**
+     * @param {array} dropdownOptionsArray array of grid style dropdown options 
+     * @description This function is used to verify the grid style dropdown options 
+     */
+    verifyGridStyleDropdownOptions: (dropdownOptionsArray) => {
+        gridCommonComponents.gridStyleDropdownOptions()
+            .each(($el, index) => {
+                cy.wrap($el)
+                    .should('have.text', dropdownOptionsArray[index])
+            });
+    },
+
+    expandQuestionStemNumerationDropdown: () => {
+        gridCommonComponents.questionStemNumerationDropdown()
+            .click();
+    },
+
+    /**
+     * @param {string} dropdownOption string of the dropdown option to be selected
+     */
+    selectQuestionStemNumerationDropdownOption: (dropdownOption) => {
+        steps.expandQuestionStemNumerationDropdown()
+        gridCommonComponents.questionStemNumerationDropdownOptions()
+            .contains(dropdownOption)
+            .click();
+    },
+
+    /**
+     * @param {*} dropdownOptionsArray array of question stem numeration dropdown options 
+     * @description This function is used to verify the question stem numeration dropdown options 
+     */
+    verifyQuestionStemNumerationDropdownOptions: (dropdownOptionsArray) => {
+        gridCommonComponents.questionStemNumerationDropdownOptions()
+            .each(($el, index) => {
+                cy.wrap($el)
+                    .should('have.text', dropdownOptionsArray[index])
+            });
+    },
+
+    /**
+     * @param {number[]} numerationArray array of numeration i.e. numbers, lowercase, uppercase
+     * @description This function verifies the numeration in set correct answer table
+     */
+    verifyQuestionStemNumerationInSetCorrectAnswerTable: (numerationArray) => {
+        gridCommonComponents.setCorrectAnswerTable()
+            .within(() => {
+                gridCommonComponents.questionStemNumeration()
+                    .each(($el, index) => {
+                        cy.wrap($el)
+                            .should('have.text', numerationArray[index]);
+                    });
+            });
+    },
+
+    /**
+     * @param {number[]} numerationArray array of numeration i.e. numbers, lowercase, uppercase
+     * @description This function verifies the numeration in preview tab answer table
+     */
+    verifyQuestionStemNumerationInPreviewTabAnswerTable: (numerationArray) => {
+        gridCommonComponents.previewTabAnswerTable()
+            .within(() => {
+                gridCommonComponents.questionStemNumeration()
+                    .each(($el, index) => {
+                        cy.wrap($el)
+                            .should('have.text', numerationArray[index]);
+                    });
+            });
+    },
+
+    /**
+     * @param {string} titleText text to be added to the Title for Question stem input field
+     * @description This function adds input to the Title for Question stem input field
+     */
+    addInputToTitleForQuestionStemInputField: (titleText) => {
+        gridCommonComponents.titleForQuestionStemInputField()
+            .clear()
+            .type(titleText)
+            .should('have.text', titleText)
+            .blur();
+    },
+
+    /**
+     * @param {string} titleText text to be added to the Title for Options input field
+     * @description This function adds input to the Title for Options input field
+     */
+    addInputToTitleForOptionsInputField: (titleText) => {
+        gridCommonComponents.titleForOptionsInputField()
+            .type(titleText)
+            .verifyInnerText(titleText)
+            .blur();
+    },
+
+    /**
+     * @param {number} questionStemWidth width to be added to the Question stem width input field
+     * @description This function adds input to the Question stem width input field
+     */
+    addInputToQuestionStemWidthInputField: (questionStemWidth) => {
+        gridCommonComponents.questionStemWidthInputField()
+            .clear()
+            .type(questionStemWidth)
+            .should('have.value', questionStemWidth);
+    },
+
+    /**
+     * @param {number} questionStemWidth width to be added to the Options width input field
+     * @description This function adds input to the Options width input field
+     */
+    addInputToOptionsWidthInputField: (optionsWidth) => {
+        gridCommonComponents.optionWidthInputField()
+            .clear()
+            .type(optionsWidth)
+            .should('have.value', optionsWidth);
+    },
+
+    /**
+     * @param {number} minWidth 
+     * @param {number} maxWidth 
+     * @description This function verifies min and max width of question stem
+     */
+    verifyQuestionStemWidthInSetCorrectAnswerTable: (minWidth, maxWidth) => {
+        gridCommonComponents.setCorrectAnswerTableQuestionStemWrapper()
+            .should('have.css', 'max-width', `${maxWidth}px`)
+            .and('have.css', 'min-width', `${minWidth}px`);
+    },
+
+    /**
+     * @param {number} minWidth 
+     * @param {number} maxWidth 
+     * @description This function verifies min and max width of question stem
+     */
+    verifyQuestionStemWidthInPreviewTabAnswerTable: (minWidth, maxWidth) => {
+        gridCommonComponents.previewTabAnswerTableQuestionStemTitle()
+            .should('have.css', 'min-width', `${minWidth}px`)
+            .and('have.css', 'max-width', `${maxWidth}px`)
+    },
+
+    /**
+     * @param {number} width 
+     * @description this function verifies width of the table header
+     */
+    verifyTableHeaderWidthInSetCorrectAnswerTable: (width) => {
+        gridCommonComponents.setCorrectAnswerTableHeader()
+            .each(($el) => {
+                cy.wrap($el)
+                    .should('have.css', 'width', `${width}px`)
+            });
+    },
+
+    /**
+     * @param {number} width 
+     * @description this function verifies width of the table header
+     */
+    verifyTableHeaderWidthInPreviewTabAnswerTable: (width) => {
+        gridCommonComponents.previewTabAnswerTableHeader()
+            .each(($el) => {
+                cy.wrap($el)
+                    .should('have.css', 'width', `${width}px`)
+            });
+    },
+
+    /**
+     * @param {string} option inline option to be verified
+     * @param {number} optionIndex index of the option
+     * @description this function verfies inline options in the set correct answer table
+     */
+    verifyInlineOptionsTextContentInSetCorrectAnswerTable: (optionIndex, option) => {
+        gridCommonComponents.setCorrectAnswerTableInlineOptions()
+            .eq(optionIndex)
+            .should('have.text', option)
+    },
+
+    /**
+     * @param {string} option inline option to be verified
+     * @param {number} optionIndex index of the option
+     * @description this function verfies inline options in the preview tab answer table
+     */
+    verifyInlineOptionsTextContentInPreviewTabAnswerTable: (optionIndex, option) => {
+        gridCommonComponents.previewTabAnswerTableInlineOptions()
+            .eq(optionIndex)
+            .should('have.text', option)
+    }
+}
+
+const tests = {
+    verifyCSSOfQuestionStemContents: () => {
+        it('CSS of Question stems section', { tags: 'css' }, () => {
+            gridCommonComponents.questionStemLabel()
+                .verifyCSS(css.color.sectionHeading, css.fontSize.normal, css.fontWeight.semibold);
+            gridCommonComponents.questionStemWrapper()
+                .eq(0)
+                .within(() => {
+                    commonComponents.dragHandleButton()
+                        .verifyCSS(css.color.secondaryBtnActive, css.fontSize.normal, css.fontWeight.regular);
+                    gridCommonComponents.buttonDeleteQuestionStem()
+                        .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+                    gridCommonComponents.questionStemInputField()
+                        .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+                    //Failing due to https://redmine.zeuslearning.com/issues/531397
+                    gridCommonComponents.optionNumeration()
+                        .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.regular);
+                });
+            gridCommonComponents.addQuestionStemButton()
+                .verifyCSS(css.color.secondaryBtnActive, css.fontSize.default, css.fontWeight.medium);
+        });
+    },
+
+    verifyCSSOfAddedStemInSetCorrectAnswerTable: () => {
+        it('CSS of added question stem in \'Set Correct Answer\' section table', { tags: 'css' }, () => {
+            gridCommonComponents.setCorrectAnswerTableRow()
+                .eq(0)
+                .find('td')
+                .eq(0)
+                .should('have.css', 'background-color', css.color.optionsBg);
+            gridCommonComponents.setCorrectAnswerTableRow()
+                .eq(1)
+                .find('td')
+                .eq(0)
+                .should('have.css', 'background-color', css.color.defaultBackground);
+        });
+    },
+
+    verifyCSSAnda11yQuestionStemErrorMessage: () => {
+        it('CSS of error message', { tags: 'css' }, () => {
+            gridCommonComponents.questionStemWrapper()
+                .eq(0)
+                .within(() => {
+                    commonComponents.errorMessage()
+                        .verifyCSS(css.color.errorText, css.fontSize.small, css.fontWeight.regular);
+                });
+        });
+
+        it('Accessibility of error message', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.errorMessage());
+        });
+    },
+
+    verifyCSSOfPreviewTabAnswerTable: () => {
+        it('CSS of added question stem in \'Preview\' tab table', { tags: 'css' }, () => {
+            gridCommonComponents.previewTabAnswerTableRow()
+                .eq(2)
+                .find('td')
+                .eq(0)
+                .should('have.css', 'background-color', css.color.optionsBg);
+            gridCommonComponents.previewTabAnswerTableRow()
+                .eq(3)
+                .find('td')
+                .eq(0)
+                .should('have.css', 'background-color', css.color.defaultBackground);
+        });
+    },
+
+    verifyCSSOfOptionsContents: () => {
+        it('CSS of Options section', { tags: 'css' }, () => {
+            gridCommonComponents.optionsLabel()
+                .verifyCSS(css.color.sectionHeading, css.fontSize.normal, css.fontWeight.semibold);
+            gridCommonComponents.optionWrapper()
+                .eq(0)
+                .within(() => {
+                    commonComponents.dragHandleButton()
+                        .verifyCSS(css.color.secondaryBtnActive, css.fontSize.normal, css.fontWeight.regular);
+                    gridCommonComponents.buttonDeleteOption()
+                        .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon)
+                        .should('have.css', 'opacity', '0.5');
+                    gridCommonComponents.optionInputField()
+                        .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+                    //Failing due to https://redmine.zeuslearning.com/issues/531397
+                    gridCommonComponents.optionNumeration()
+                        .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.regular);
+                });
+            gridCommonComponents.addOptionButton()
+                .verifyCSS(css.color.secondaryBtnActive, css.fontSize.normal, css.fontWeight.medium);
+        });
+    },
+
+    verifyCSSAnda11yOfEnabledDeleteButton: () => {
+        it('CSS of enabled \'Delete\' option button', { tags: 'css' }, () => {
+            gridCommonComponents.buttonDeleteOption()
+                .eq(0)
+                .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon)
+                .should('have.css', 'opacity', '1');
+        });
+
+        it('Accessibility of enabled \'Delete\' option button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(gridCommonComponents.buttonDeleteOption())
+        });
+    },
+
+    verifyCSSAnda11yOfOptionsErrorMessage: () => {
+        it('CSS of error message', { tags: 'css' }, () => {
+            gridCommonComponents.optionWrapper()
+                .eq(0)
+                .within(() => {
+                    commonComponents.errorMessage()
+                        .verifyCSS(css.color.errorText, css.fontSize.small, css.fontWeight.regular);
+                });
+        });
+
+        it('Accessibility of error message', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.errorMessage());
+        });
+    },
+
+    verifyCSSOfHeaderTextInSetCorrectAnswerTable: () => {
+        it('CSS of header text in set correct answer table', { tags: 'css' }, () => {
+            gridCommonComponents.setCorrectAnswerTableHeader()
+                .find('.question-text-wrapper')
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.semibold);
+        });
+    },
+
+    verifyCSSOfHeaderTextInPreviewTabAnswerTable: () => {
+        it('CSS of header text in preview tab answer table', { tags: 'css' }, () => {
+            gridCommonComponents.previewTabAnswerTableHeader()
+                .find('.question-text-wrapper')
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.semibold);
+        });
+    }
+}
+
+export const gridCommonComponents = {
+    ...selectors,
+    steps,
+    tests
+}