itemengine-cypress-automation 1.0.14 → 1.0.15

package/cypress/e2e/ILC/MultipleSelectionGrid/multipleSelectionGridAdditionalSettings.js

@@ -0,0 +1,830 @@
+import { multipleSelectionGridPage } from "../../../pages/multipleSelectionGridPage";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+const questionStems = ['Bat', 'Ostrich', 'Platypus', 'Eagle'];
+const options = ['Is mammal', 'Lays eggs', 'Can fly'];
+
+const gridStyleDropdownOptions = ['With border', 'Row dividers', 'No border', 'Inline', 'Inline - row dividers'];
+const questionStemNumerationOptions = ['None', 'Numerical', 'Uppercase alphabet', 'Lowercase alphabet'];
+const fontSizeDropdownOptions = ['Default', 'Small', 'Normal', 'Large', 'Extra large', 'Huge'];
+const numbers = ['1', '2', '3', '4'];
+const lowercase = ['a', 'b', 'c', 'd'];
+const uppercase = ['A', 'B', 'C', 'D'];
+const fontSizes = ['16px', '12px', '14px', '17px', '20px', '24px'];
+
+describe('Create Item page - Multiple Selection Grid: Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional Settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+        });
+
+        multipleSelectionGridPage.tests.verifyAdditonalSettingsAccordionProperties();
+    });
+
+    describe('Additional settings: Student response area and layout', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+        });
+
+        multipleSelectionGridPage.tests.verifyStudentResponseAreaAndLayoutLabelAndCSS();
+    });
+
+    describe('Additional settings: Grid style contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+        });
+
+        it(`\'Grid style\' label and dropdown should be displayed and by default, ${gridStyleDropdownOptions[1]} option should be selected in the dropdown`, () => {
+            multipleSelectionGridPage.gridStyleLabel()
+                .verifyInnerText('Grid style')
+                .should('be.visible');
+            multipleSelectionGridPage.gridStyleDropdown()
+                .verifyInnerText(`${gridStyleDropdownOptions[1]}`)
+                .should('be.visible');
+        });
+
+        it('CSS of Grid style section', { tags: 'css' }, () => {
+            multipleSelectionGridPage.gridStyleLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            multipleSelectionGridPage.gridStyleDropdown()
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        it(`When user clicks on the Grid style dropdown a list of 5 options - ${gridStyleDropdownOptions} should be displayed`, () => {
+            multipleSelectionGridPage.steps.expandGridStyleDropdown();
+            multipleSelectionGridPage.steps.verifyGridStyleDropdownOptions(gridStyleDropdownOptions);
+        });
+
+        it('CSS of Grid style dropdown in active state', { tags: 'css' }, () => {
+            multipleSelectionGridPage.gridStyleDropdownOptions()
+                .eq(1)
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
+                .should('have.css', 'background-color', css.color.liTextSelectedBg);
+            multipleSelectionGridPage.gridStyleDropdownOptions()
+                .eq(0)
+                .should('have.css', 'background-color', css.color.transparent);
+            cy.log('Selecting a dropdown option to close the dropdown')
+            multipleSelectionGridPage.gridStyleDropdownOptions()
+                .eq(1)
+                .click();
+        });
+
+        it('Accessibility of Grid style dropdown in active state', { tags: 'a11y' }, () => {
+            multipleSelectionGridPage.steps.expandGridStyleDropdown();
+            cy.checkAccessibility(multipleSelectionGridPage.dropdownList());
+        });
+    });
+
+    //Note: This needs to be checked manually during full execution, added this to the Manual sheet 
+    describe.skip('Additional settings: Grid style set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.addQuestionInstructions();
+            multipleSelectionGridPage.steps.addInputToAllQuestionStemFields(questionStems);
+            multipleSelectionGridPage.steps.addInputToAllOptionsFields(options);
+            multipleSelectionGridPage.steps.allotPoints(10);
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+        });
+
+        it(`By default when ${gridStyleDropdownOptions[1]} option is selected then row dividers should be displayed in the set correct answer table`, () => {
+
+        });
+
+        it(`When user selects ${gridStyleDropdownOptions[0]} option then only table borders should be displayed in the set correct answer table`, () => {
+
+        });
+
+        it(`When user selects ${gridStyleDropdownOptions[2]} option then table borders should not be displayed in the set correct answer table`, () => {
+
+        });
+
+        it(`When user selects ${gridStyleDropdownOptions[3]} option then the options should not be displayed in the table header and should be displayed inline with the question stems without row dividers in the set correct answer table`, () => {
+
+        });
+
+
+        it(`When user selects ${gridStyleDropdownOptions[4]} option then the options should not be displayed in the table header and should be displayed inline with the question stems with row dividers in the set correct answer table`, () => {
+
+        });
+    });
+
+    describe.skip('Additional settings: Grid style preview tab section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.addQuestionInstructions();
+            multipleSelectionGridPage.steps.addInputToAllQuestionStemFields(questionStems);
+            multipleSelectionGridPage.steps.addInputToAllOptionsFields(options);
+            multipleSelectionGridPage.steps.allotPoints(10);
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+        });
+
+        it(`By default when ${gridStyleDropdownOptions[1]} option is selected then row dividers should be displayed in the preview tab answer table`, () => {
+
+        });
+
+        it(`When user selects ${gridStyleDropdownOptions[0]} option then only table borders should be displayed in the preview tab answer table`, () => {
+
+        });
+
+        it(`When user selects ${gridStyleDropdownOptions[2]} option then table borders should not be displayed in the preview tab answer table`, () => {
+
+        });
+
+        it(`When user selects ${gridStyleDropdownOptions[3]} option then the options should not be displayed in the table header and should be displayed inline with the question stems without row dividers in the preview tab answer table`, () => {
+
+        });
+
+
+        it(`When user selects ${gridStyleDropdownOptions[4]} option then the options should not be displayed in the table header and should be displayed inline with the question stems with row dividers in the preview tab answer table`, () => {
+
+        });
+    });
+
+    describe('Additional settings: Question stem numeration contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+        });
+
+        it(`\'Question stem numeration\' label and dropdown should be displayed and by default, ${questionStemNumerationOptions[0]} option should be selected in the dropdown`, () => {
+            multipleSelectionGridPage.questionStemNumerationLabel()
+                .verifyInnerText('Question stem numeration')
+                .should('be.visible');
+            multipleSelectionGridPage.questionStemNumerationDropdown()
+                .verifyInnerText('None')
+                .should('exist');
+        });
+
+        it('CSS of Question stem numeration section', { tags: 'css' }, () => {
+            multipleSelectionGridPage.questionStemNumerationLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            multipleSelectionGridPage.questionStemNumerationDropdown()
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        it(`When user clicks on the Question stem numeration dropdown a list of 4 options - ${questionStemNumerationOptions} should be displayed`, () => {
+            multipleSelectionGridPage.steps.expandQuestionStemNumerationDropdown();
+            multipleSelectionGridPage.steps.verifyQuestionStemNumerationDropdownOptions(questionStemNumerationOptions);
+        });
+
+        it('CSS of Question stem numeration dropdown in active state', { tags: 'css' }, () => {
+            multipleSelectionGridPage.questionStemNumerationDropdownOptions()
+                .eq(0)
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
+                .should('have.css', 'background-color', css.color.liTextSelectedBg);
+            multipleSelectionGridPage.questionStemNumerationDropdownOptions()
+                .eq(1)
+                .should('have.css', 'background-color', css.color.transparent);
+        });
+
+        it('Accessbility of Question stem numeration dropdown in active state', { tags: 'a11y' }, () => {
+            it('Accessbility of Grid style dropdown in active state', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(multipleSelectionGridPage.dropdownList());
+            });
+        });
+    });
+
+    describe('Additional settings: Question stem numeration set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.addQuestionInstructions();
+            multipleSelectionGridPage.steps.addOption();
+            multipleSelectionGridPage.steps.addInputToAllQuestionStemFields(questionStems);
+            multipleSelectionGridPage.steps.addInputToAllOptionsFields(options);
+            multipleSelectionGridPage.steps.allotPoints(10);
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+        });
+
+        it(`When the user selects ${questionStemNumerationOptions[0]} option from the Option stem numeration dropdown, then numeration should not be displayed in the Set correct answer table`, () => {
+            multipleSelectionGridPage.questionStemNumerationDropdown()
+                .verifyInnerText(`${questionStemNumerationOptions[0]}`);
+            multipleSelectionGridPage.questionStemNumeration()
+                .should('not.exist');
+        });
+
+        it(`When the user selects ${questionStemNumerationOptions[1]} option from the Option stem numeration dropdown, then numbers should be displayed in the Set correct answer table`, () => {
+            multipleSelectionGridPage.steps.selectQuestionStemNumerationDropdownOption(`${questionStemNumerationOptions[1]}`);
+            multipleSelectionGridPage.steps.verifyQuestionStemNumerationInSetCorrectAnswerTable(numbers);
+        });
+
+        it(`When the user selects ${questionStemNumerationOptions[2]} option from the Option stem numeration dropdown, then uppercase alphabets should be displayed in the Set correct answer table`, () => {
+            multipleSelectionGridPage.steps.selectQuestionStemNumerationDropdownOption(`${questionStemNumerationOptions[2]}`);
+            multipleSelectionGridPage.steps.verifyQuestionStemNumerationInSetCorrectAnswerTable(uppercase);
+        });
+
+        it(`When the user selects ${questionStemNumerationOptions[3]} option from the Option stem numeration dropdown, then lowercase alphabets should be displayed in the Set correct answer table`, () => {
+            multipleSelectionGridPage.steps.selectQuestionStemNumerationDropdownOption(`${questionStemNumerationOptions[3]}`);
+            multipleSelectionGridPage.steps.verifyQuestionStemNumerationInSetCorrectAnswerTable(lowercase);
+        });
+
+        it('CSS for question stem numeration', { tags: 'css' }, () => {
+            multipleSelectionGridPage.questionStemNumeration()
+                .eq(0)
+                .verifyCSS(css.color.activeButtons, css.fontSize.default, css.fontWeight.regular)
+                .should('have.css', 'background-color', css.color.optionNumerationBg);
+        });
+
+        it('Accessibility of question stem numeration', () => {
+            cy.checkAccessibility(multipleSelectionGridPage.questionStemNumeration().eq(0).parents('.stem-numeration-present'));
+        });
+    });
+
+    describe('Additional settings: Question stem numeration preview tab section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.addQuestionInstructions();
+            multipleSelectionGridPage.steps.addOption()
+            multipleSelectionGridPage.steps.addInputToAllQuestionStemFields(questionStems);
+            multipleSelectionGridPage.steps.addInputToAllOptionsFields(options);
+            multipleSelectionGridPage.steps.allotPoints(10);
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+        });
+
+        it(`When the user selects ${questionStemNumerationOptions[0]} option from the Option stem numeration dropdown, then numeration should not be displayed in the preview tab answer table`, () => {
+            multipleSelectionGridPage.questionStemNumerationDropdown()
+                .verifyInnerText(`${questionStemNumerationOptions[0]}`);
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.previewTabQuestionStemNumeration()
+                .should('not.exist');
+        });
+
+        it(`When the user selects ${questionStemNumerationOptions[1]} option from the Option stem numeration dropdown, then numbers should be displayed in the preview tab answer table`, () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.selectQuestionStemNumerationDropdownOption(`${questionStemNumerationOptions[1]}`);
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyQuestionStemNumerationInPreviewTabAnswerTable(numbers);
+        });
+
+        it(`When the user selects ${questionStemNumerationOptions[2]} option from the Option stem numeration dropdown, then uppercase alphabets should be displayed in the preview tab answer table`, () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.selectQuestionStemNumerationDropdownOption(`${questionStemNumerationOptions[2]}`);
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyQuestionStemNumerationInPreviewTabAnswerTable(uppercase);
+        });
+
+        it(`When the user selects ${questionStemNumerationOptions[3]} option from the Option stem numeration dropdown, then lowercase alphabets should be displayed in the preview tab answer table`, () => {
+            multipleSelectionGridPage.steps.switchToEditTab()
+            multipleSelectionGridPage.steps.selectQuestionStemNumerationDropdownOption(`${questionStemNumerationOptions[3]}`);
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyQuestionStemNumerationInPreviewTabAnswerTable(lowercase);
+        });
+
+        it('When user selects \'Randomize options\' the numeration should be displayed in ascending order in the preview tab answer table', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.selectRandomizeOptionsCheckbox();
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyQuestionStemNumerationInPreviewTabAnswerTable(lowercase);
+        });
+
+        it('CSS for option numeration', { tags: 'css' }, () => {
+            multipleSelectionGridPage.previewTabQuestionStemNumeration()
+                .eq(0)
+                .verifyCSS(css.color.activeButtons, css.fontSize.default, css.fontWeight.regular)
+                .should('have.css', 'background-color', css.color.optionNumerationBg);
+        });
+
+        it('Accessibility of question stem numeration', () => {
+            cy.checkAccessibility(multipleSelectionGridPage.previewTabQuestionStemNumeration().eq(0).parents('.stem-numeration-present'));
+        });
+    });
+
+    describe('Additional settings: Title for question stems contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Title for question stems\' label and input field should be displayed and by default, the input field should be prefilled with \'Question stem\'', () => {
+            multipleSelectionGridPage.titleForQuestionStemsLabel()
+                .verifyInnerText('Title for question stems')
+                .should('be.visible');
+            multipleSelectionGridPage.titleForQuestionStemInputField()
+                .verifyInnerText('Question stem')
+        });
+
+        it('CSS of Title for question stems label and input field', { tags: 'css' }, () => {
+            multipleSelectionGridPage.titleForQuestionStemsLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            multipleSelectionGridPage.titleForQuestionStemInputField()
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        //Note: a11y covered in verifyAdditonalSettingsAccordionProperties
+    });
+
+    describe('Additional settings: Title for question stems set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.addQuestionInstructions();
+            multipleSelectionGridPage.steps.addOption();
+            multipleSelectionGridPage.steps.addInputToAllQuestionStemFields(questionStems);
+            multipleSelectionGridPage.steps.addInputToAllOptionsFields(options);
+            multipleSelectionGridPage.steps.allotPoints(10);
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+        });
+
+        it('By default, Question stem should be displayed as the question stem title in the set correct answer table', () => {
+            multipleSelectionGridPage.setCorrectAnswerTableQuestionStemTitle()
+                .verifyInnerText('Question stem');
+        });
+
+        it('When user enters any text in the Title for question stems then that title should be displayed the set correct answer table', () => {
+            multipleSelectionGridPage.steps.addInputToTitleForQuestionStemInputField('Causes of Pollution');
+            multipleSelectionGridPage.setCorrectAnswerTableQuestionStemTitle()
+                .verifyInnerText('Causes of Pollution');
+        });
+    });
+
+    describe('Additional settings: Title for question stems preview tab section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.addQuestionInstructions();
+            multipleSelectionGridPage.steps.addOption()
+            multipleSelectionGridPage.steps.addInputToAllQuestionStemFields(questionStems);
+            multipleSelectionGridPage.steps.addInputToAllOptionsFields(options);
+            multipleSelectionGridPage.steps.allotPoints(10);
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+        });
+
+        it('By default, Question stem should be displayed as the question stem title in the preview tab answer table', () => {
+            multipleSelectionGridPage.previewTabAnswerTableQuestionStemTitle()
+                .verifyInnerText('Question stem');
+        });
+
+        it('When user enters any text in the \'Title for question stems\' then that title should be displayed the preview tab answer table', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.addInputToTitleForQuestionStemInputField('Causes of Pollution');
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.previewTabAnswerTableQuestionStemTitle()
+                .verifyInnerText('Causes of Pollution');
+        });
+    });
+
+    describe('Additional settings: Title for options contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Title for options\' label and input field should be displayed and by default, the input field should be empty', () => {
+            multipleSelectionGridPage.titleForOptionsLabel()
+                .verifyInnerText('Title for options')
+                .should('be.visible');
+            multipleSelectionGridPage.titleForOptionsInputField()
+                .should('have.text', '');
+        });
+
+        it('CSS of Title for options label and input field', { tags: 'css' }, () => {
+            multipleSelectionGridPage.titleForOptionsLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            multipleSelectionGridPage.titleForOptionsInputField()
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        //Note: a11y covered in verifyAdditonalSettingsAccordionProperties
+    });
+
+    describe('Additional settings: Title for options set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.addQuestionInstructions();
+            multipleSelectionGridPage.steps.addOption();
+            multipleSelectionGridPage.steps.addInputToAllQuestionStemFields(questionStems);
+            multipleSelectionGridPage.steps.addInputToAllOptionsFields(options);
+            multipleSelectionGridPage.steps.allotPoints(10);
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+        });
+
+        it('By default, only options should be displayed in the header of the set correct answer table', () => {
+            multipleSelectionGridPage.steps.verifyTableHeaderContentsInSetCorrectAnswerTable(options)
+            multipleSelectionGridPage.setCorrectAnswerTableOptionsTitle()
+                .should('not.exist');
+        });
+
+        it('When user enters any text in the Title for options then that title should be displayed along with the options in the header section of the set correct answer table', () => {
+            multipleSelectionGridPage.steps.addInputToTitleForOptionsInputField('Choose the correct option')
+            multipleSelectionGridPage.setCorrectAnswerTableOptionsTitle()
+                .verifyInnerText('Choose the correct option');
+            multipleSelectionGridPage.steps.verifyTableHeaderContentsInSetCorrectAnswerTable(options)
+        });
+    });
+
+    describe('Additional settings: Title for options preview tab section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.addQuestionInstructions();
+            multipleSelectionGridPage.steps.addOption();
+            multipleSelectionGridPage.steps.addInputToAllQuestionStemFields(questionStems);
+            multipleSelectionGridPage.steps.addInputToAllOptionsFields(options);
+            multipleSelectionGridPage.steps.allotPoints(10);
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+            multipleSelectionGridPage.steps.switchToPreviewTab()
+        });
+
+        it('By default, only options should be displayed in the header of the preview tab answer table', () => {
+            multipleSelectionGridPage.steps.verifyTableHeaderContentsInPreviewTabAnswerTable(options)
+            multipleSelectionGridPage.previewTabAnswerTableOptionsTitle()
+                .should('not.exist');
+        });
+
+        it('When user enters any text in the Title for options then that title should be displayed along with the options in the header section of the preview tab answer table', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.addInputToTitleForOptionsInputField('Choose the correct option');
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.previewTabAnswerTableOptionsTitle()
+                .verifyInnerText('Choose the correct option');
+            multipleSelectionGridPage.steps.verifyTableHeaderContentsInPreviewTabAnswerTable(options);
+        });
+    });
+
+    describe('Additional settings: Question stem width and Option width contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Question stem width\' and \'Option width\' labels and input fields should be displayed and by default, the input fields should be empty', () => {
+            multipleSelectionGridPage.questionStemWidthLabel()
+                .verifyInnerText('Question stem width')
+                .should('be.visible');
+            multipleSelectionGridPage.questionStemWidthInputField()
+                .should('have.text', '');
+            multipleSelectionGridPage.optionsWidthLabel()
+                .verifyInnerText('Option width')
+                .should('be.visible');
+            multipleSelectionGridPage.optionWidthInputField()
+                .should('have.text', '');
+        });
+
+        it('CSS of \'Question stem width\' and \'Option width\' section', { tags: 'css' }, () => {
+            multipleSelectionGridPage.questionStemWidthLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            multipleSelectionGridPage.questionStemWidthInputField()
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+            multipleSelectionGridPage.optionsWidthLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            multipleSelectionGridPage.optionWidthInputField()
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+        });
+    });
+
+    describe('Additional settings: Question stem width and Option width set correct section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.addQuestionInstructions();
+            multipleSelectionGridPage.steps.addOption()
+            multipleSelectionGridPage.steps.addInputToAllQuestionStemFields(questionStems);
+            multipleSelectionGridPage.steps.addInputToAllOptionsFields(options);
+            multipleSelectionGridPage.steps.allotPoints(10);
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+        });
+
+        it('When the input field of \'Question stem width\' kept empty, the question stem should have min and max width 140px and 380px respectively in set correct answer table', () => {
+            multipleSelectionGridPage.questionStemWidthInputField()
+                .should('have.text', '');
+            multipleSelectionGridPage.steps.verifyQuestionStemWidthInSetCorrectAnswerTable('140', '380');
+        });
+
+        it('When user enters value for \'Question stem width\', the width should get updated accordingly in set correct answer table', () => {
+            multipleSelectionGridPage.steps.addInputToQuestionStemWidthInputField('200');
+            multipleSelectionGridPage.steps.verifyQuestionStemWidthInSetCorrectAnswerTable('200', '200');
+        });
+
+        it('When the user enters a value above 500px in the \'Option width\' input field then the width of the input field should remain 500px in \'Set correct answer\' section', () => {
+            multipleSelectionGridPage.steps.addInputToQuestionStemWidthInputField('700');
+            multipleSelectionGridPage.steps.verifyQuestionStemWidthInSetCorrectAnswerTable('500', '500');
+        });
+
+        it('When the input field of \'Option width\' kept empty, the question stem should have width 128px in set correct answer table', () => {
+            multipleSelectionGridPage.optionWidthInputField()
+                .should('have.text', '');
+            multipleSelectionGridPage.steps.verifyTableHeaderWidthInSetCorrectAnswerTable('128');
+        });
+
+        it('When user enters value for \'Option width\', the width should get updated accordingly in set correct answer table', () => {
+            multipleSelectionGridPage.steps.addInputToOptionsWidthInputField('250');
+            multipleSelectionGridPage.steps.verifyTableHeaderWidthInSetCorrectAnswerTable('250')
+        });
+
+        it('When the user enters a value above 500px in the \'Option width\' input field then the width of the input field should remain 500px in \'Set correct answer\' section', () => {
+            multipleSelectionGridPage.steps.addInputToOptionsWidthInputField('950');
+            multipleSelectionGridPage.steps.verifyTableHeaderWidthInSetCorrectAnswerTable('500')
+        });
+    });
+
+    describe('Additional settings: Question stem width and Option width set correct section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.addQuestionInstructions();
+            multipleSelectionGridPage.steps.addOption()
+            multipleSelectionGridPage.steps.addInputToAllQuestionStemFields(questionStems);
+            multipleSelectionGridPage.steps.addInputToAllOptionsFields(options);
+            multipleSelectionGridPage.steps.allotPoints(10);
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+        });
+
+        it('When the input field of \'Question stem width\' kept empty, the question stem should have min and max width 140px and 380px respectively in preview tab answer table', () => {
+            multipleSelectionGridPage.steps.verifyQuestionStemWidthInPreviewTabAnswerTable('140', '380');
+        });
+
+        it('When user enters value for \'Question stem width\', the width should get updated accordingly in preview tab answer table', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.addInputToQuestionStemWidthInputField('200');
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyQuestionStemWidthInPreviewTabAnswerTable('200', '200');
+        });
+
+        it('When the user enters a value above 500px in the \'Option width\' input field then the width of the input field should remain 500px in \'Set correct answer\' section', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.addInputToQuestionStemWidthInputField('700');
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyQuestionStemWidthInPreviewTabAnswerTable('500', '500');
+        });
+
+        it('When the input field of \'Option width\' kept empty, the question stem should have width 128px in preview tab answer table', () => {
+            multipleSelectionGridPage.steps.verifyTableHeaderWidthInPreviewTabAnswerTable('128')
+        });
+
+        it('When user enters value for \'Option width\', the width should get updated accordingly in preview tab answer table', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.addInputToOptionsWidthInputField('250');
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyTableHeaderWidthInPreviewTabAnswerTable('250')
+        });
+
+        it('When the user enters a value above 500px in the \'Option width\' input field then the width of the input field should remain 500px in \'Set correct answer\' section', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.addInputToOptionsWidthInputField('950');
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.verifyTableHeaderWidthInPreviewTabAnswerTable('500')
+        });
+    });
+
+    describe('Additional settings: Font size contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+        });
+
+        multipleSelectionGridPage.tests.verifyFontSizeSectionContents();
+    });
+
+    describe('Additional settings: Font size contents set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.addQuestionInstructions();
+            multipleSelectionGridPage.steps.addOption();
+            multipleSelectionGridPage.steps.addInputToAllQuestionStemFields(questionStems);
+            multipleSelectionGridPage.steps.addInputToAllOptionsFields(options);
+            multipleSelectionGridPage.steps.allotPoints(10);
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+            multipleSelectionGridPage.steps.selectQuestionStemNumerationDropdownOption('Lowercase alphabet')
+            multipleSelectionGridPage.steps.addInputToTitleForOptionsInputField('Title for options')
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/534772
+        fontSizeDropdownOptions.forEach((option, fontsIndex) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the preview (options, question instructions question stems) should be changed to ${option} in the set correct answer table`, () => {
+                multipleSelectionGridPage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex)
+                multipleSelectionGridPage.fontSizeDropdown()
+                    .verifyInnerText(`${option}`);
+                multipleSelectionGridPage.setCorrectAnswerTableHeader()
+                    .should('have.css', 'font-size', fontSizes[fontsIndex]);
+                multipleSelectionGridPage.questionStemNumeration()
+                    .should('have.css', 'font-size', fontSizes[fontsIndex]);
+                multipleSelectionGridPage.setCorrectAnswertableQuestionStem()
+                    .should('have.css', 'font-size', fontSizes[fontsIndex]);
+                multipleSelectionGridPage.setCorrectAnswerTableQuestionStemTitle()
+                    .should('have.css', 'font-size', fontSizes[fontsIndex]);
+                multipleSelectionGridPage.setCorrectAnswerTableOptionsTitle()
+                    .should('have.css', 'font-size', fontSizes[fontsIndex]);
+            });
+        });
+    });
+
+    describe('Additional settings: Font size contents preview tab section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.addQuestionInstructions();
+            multipleSelectionGridPage.steps.addOption();
+            multipleSelectionGridPage.steps.addInputToAllQuestionStemFields(questionStems);
+            multipleSelectionGridPage.steps.addInputToAllOptionsFields(options);
+            multipleSelectionGridPage.steps.allotPoints(10);
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+            multipleSelectionGridPage.steps.selectQuestionStemNumerationDropdownOption('Lowercase alphabet');
+            multipleSelectionGridPage.steps.addInputToTitleForOptionsInputField('Title for options');
+        });
+
+        fontSizeDropdownOptions.forEach((option, fontsIndex) => {
+            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the preview (options, question instructions question stems) should be changed to ${option} in the preview tab Answer table`, () => {
+                multipleSelectionGridPage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex)
+                multipleSelectionGridPage.fontSizeDropdown()
+                    .verifyInnerText(`${option}`);
+                multipleSelectionGridPage.steps.switchToPreviewTab();
+                multipleSelectionGridPage.questionInstructionsText()
+                    .should('have.css', 'font-size', fontSizes[fontsIndex]);
+                multipleSelectionGridPage.previewTabAnswerTableHeader()
+                    .should('have.css', 'font-size', fontSizes[fontsIndex]);
+                multipleSelectionGridPage.previewTabQuestionStemNumeration()
+                    .should('have.css', 'font-size', fontSizes[fontsIndex]);
+                multipleSelectionGridPage.previewTabAnswertableQuestionStem()
+                    .should('have.css', 'font-size', fontSizes[fontsIndex]);
+                multipleSelectionGridPage.previewTabAnswerTableQuestionStemTitle()
+                    .should('have.css', 'font-size', fontSizes[fontsIndex]);
+                multipleSelectionGridPage.previewTabAnswerTableOptionsTitle()
+                    .should('have.css', 'font-size', fontSizes[fontsIndex]);
+                multipleSelectionGridPage.steps.switchToEditTab();
+            });
+        });
+    });
+
+    describe('Additional settings: Check answer', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.addQuestionInstructions();
+            multipleSelectionGridPage.steps.addOption()
+            multipleSelectionGridPage.steps.addInputToAllQuestionStemFields(questionStems);
+            multipleSelectionGridPage.steps.addInputToAllOptionsFields(options);
+            multipleSelectionGridPage.steps.allotPoints(10);
+            multipleSelectionGridPage.steps.setAnswersForAllQuestionStemsInSetCorrectAnswerTable([[0, 2], [1], [0, 1], [0, 1]]);
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+        });
+
+        multipleSelectionGridPage.tests.verifyCheckAnswerSectionAndPreviewTabCheckAnswerButton();
+    });
+
+    describe('Additional settings: Check answer functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.addQuestionInstructions();
+            multipleSelectionGridPage.steps.addOption();
+            multipleSelectionGridPage.steps.addInputToAllQuestionStemFields(questionStems);
+            multipleSelectionGridPage.steps.addInputToAllOptionsFields(options);
+            multipleSelectionGridPage.steps.allotPoints(10);
+            multipleSelectionGridPage.steps.setAnswersForAllQuestionStemsInSetCorrectAnswerTable([[0, 2], [1], [0, 1], [1, 2]]);
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+            multipleSelectionGridPage.steps.setMaximumCheckAnswerAttempts(2);
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+        });
+
+        multipleSelectionGridPage.tests.verifyCheckAnswerButtonFunctionalityWhenQuestionIsUnattempted()
+
+        it('When the user has selected correct answer for two options then on clicking on the Check Answer button, green checkmark icon should be displayed besides the selected correct option, and \'Incorrect Answer\' label should be displayed below the box', () => {
+            multipleSelectionGridPage.steps.setAnswersForAllQuestionStemsInPreviewTabAnswerTable([[0, 2], [1]]);
+            multipleSelectionGridPage.steps.checkAnswer();
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(0, [0, 2]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(1, [1]);
+            multipleSelectionGridPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
+            multipleSelectionGridPage.steps.verifyIncorrectAttemptBorder();
+        });
+
+        it('When the user has selected all correct answer options then on clicking on the Check Answer button, green checkmark icon should be displayed besides the responses and \'Correct Answer\' label should be displayed below the box', () => {
+            multipleSelectionGridPage.steps.setAnswersForQuestionStemInPreviewTabAnswerTable(2, [0, 1]);
+            multipleSelectionGridPage.steps.setAnswersForQuestionStemInPreviewTabAnswerTable(3, [1, 2]);
+            multipleSelectionGridPage.steps.checkAnswer();
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(0, [0, 2]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(1, [1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(2, [0, 1]);
+            multipleSelectionGridPage.steps.verifyCorrectOptionsCheckmarkIcon(3, [1, 2]);
+            multipleSelectionGridPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+            multipleSelectionGridPage.steps.verifyCorrectAttemptBorder();
+        });
+
+        multipleSelectionGridPage.tests.verifyDisabledCheckAnswerButtonWithCSSAnda11y();
+
+        it('When the user updates the value of Maximum check answer attempts input field, it should get reflected on the Preview tab', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.clearMaximumCheckAnswerAttemptsInputField();
+            multipleSelectionGridPage.steps.addInputToMaximumCheckAnswerAttemptsInputField(1);
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.checkAnswerButton()
+                .should('be.enabled');
+            multipleSelectionGridPage.steps.setAnswersForAllQuestionStemsInPreviewTabAnswerTable([[0, 2], [1], [0, 1], [1, 2]]);
+            multipleSelectionGridPage.steps.checkAnswer();
+            multipleSelectionGridPage.checkAnswerButton()
+                .should('be.disabled');
+        });
+
+        it('When the \'Maximum check answer attempts\' input field has value \'0\' and user switches to Preview tab, then the \'Check Answer\' button should be enabled and user should be able to check answer multiple times', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.clearMaximumCheckAnswerAttemptsInputField();
+            multipleSelectionGridPage.steps.addInputToMaximumCheckAnswerAttemptsInputField(0);
+            cy.log('Switching to Preview tab')
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.setAnswersForAllQuestionStemsInPreviewTabAnswerTable([[1], [2], [2], [0]]);
+            multipleSelectionGridPage.steps.checkAnswer();
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(0, [1]);
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(1, [2]);
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(2, [2]);
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(3, [0]);
+            multipleSelectionGridPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
+            multipleSelectionGridPage.steps.verifyIncorrectAttemptBorder();
+            multipleSelectionGridPage.checkAnswerButton()
+                .should('be.enabled');
+            multipleSelectionGridPage.steps.setAnswersForQuestionStemInPreviewTabAnswerTable(1, [0]);
+            multipleSelectionGridPage.steps.checkAnswer();
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(0, [1]);
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(1, [0, 2]);
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(2, [2]);
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(3, [0]);
+            multipleSelectionGridPage.correctIcon()
+                .should('not.exist');
+            multipleSelectionGridPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
+            multipleSelectionGridPage.steps.verifyIncorrectAttemptBorder();
+            multipleSelectionGridPage.checkAnswerButton()
+                .should('be.enabled');
+        });
+
+        it('When the \'Maximum check answer attempts\' input field is empty and user switches to Preview tab, then the \'Check Answer\' button should be enabled and user should be able to check answer multiple times', () => {
+            multipleSelectionGridPage.steps.switchToEditTab();
+            multipleSelectionGridPage.steps.clearMaximumCheckAnswerAttemptsInputField()
+            multipleSelectionGridPage.steps.switchToPreviewTab();
+            multipleSelectionGridPage.steps.setAnswersForAllQuestionStemsInPreviewTabAnswerTable([[1], [2], [2], [0]]);
+            multipleSelectionGridPage.steps.checkAnswer();
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(0, [1]);
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(1, [2]);
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(2, [2]);
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(3, [0]);
+            multipleSelectionGridPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
+            multipleSelectionGridPage.steps.verifyIncorrectAttemptBorder();
+            multipleSelectionGridPage.checkAnswerButton()
+                .should('be.enabled');
+            multipleSelectionGridPage.steps.setAnswersForQuestionStemInPreviewTabAnswerTable(1, [0]);
+            multipleSelectionGridPage.steps.checkAnswer();
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(0, [1]);
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(1, [0, 2]);
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(2, [2]);
+            multipleSelectionGridPage.steps.verifyIncorrectOptionsCrossmarkIcon(3, [0]);
+            multipleSelectionGridPage.correctIcon()
+                .should('not.exist');
+            multipleSelectionGridPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
+            multipleSelectionGridPage.steps.verifyIncorrectAttemptBorder();
+            multipleSelectionGridPage.checkAnswerButton()
+                .should('be.enabled');
+        });
+    });
+
+    describe('Additional Settings: Details section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to multiple selection grid question type');
+            multipleSelectionGridPage.steps.navigateToCreateQuestion('multiple selection grid');
+            multipleSelectionGridPage.steps.expandAdditonalSettings();
+        });
+
+        multipleSelectionGridPage.tests.verifyDetailsSection();
+    });
+});