itemengine-cypress-automation 1.0.2

package/cypress/pages/components/mcqAdditionalSettingsBase.js

@@ -0,0 +1,390 @@
+import { autoScoredAdditionalSettings } from "./autoScoredAdditionalSettings";
+import { commonComponents } from "./commonComponents";
+import { createQuestionBasePage } from "./createQuestionBasePage";
+import { mcqOptionsComponent } from "./mcqOptionsComponent";
+import { mcqPreviewComponents } from "./mcqPreviewComponents";
+import { mcqQuestionCommonComponents } from "./mcqQuestionCommonComponents";
+import { mcqSetCorrectAnswerSection } from "./mcqSetCorrectAnswerSection";
+const css = Cypress.env('css');
+
+const selectors = {
+    //Options style dropdown
+    optionsAndLayoutLabel: () => cy.get('.additional-settings-heading-label').eq(0),
+    optionsStyleLabel: () => cy.get('#Option-Style-dropdown-label'),
+    optionsStyleDropdown: () => cy.get('#Option-Style-select'),
+    optionsStyleDropdownListOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="Option-Style-dropdown-label"] li[role="option"][aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('[aria-labelledby*="Option-Style-dropdown-label"] li[role="option"]')
+        }
+    },
+    //Option numeration dropdown
+    optionNumerationLabel: () => cy.get('#Option-Numeration-dropdown-label'),
+    optionNumerationDropdown: () => cy.get('#Option-Numeration-select'),
+    optionNumerationDropdownListOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[aria-labelledby*="Option-Numeration-dropdown-label"] li[role="option"][aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('[aria-labelledby*="Option-Numeration-dropdown-label"] li[role="option"]')
+        }
+    },
+    //Number of option columns
+    numberOfOptionColumnsLabel: () => cy.get('#Number-of-Option-Columns-dropdown-label'),
+    numberOfOptionColumnsDropdown: () => cy.get('#Number-of-Option-Columns-select'),
+    numberOfOptionColumnsListOptions: (optionNumber) => cy.get('[aria-labelledby="Number-of-Option-Columns-dropdown-label Number-of-Option-Columns-placeholder"] li[role="option"]').eq(optionNumber),
+    //Option orientation dropdown
+    optionOrientationLabel: () => cy.get('#Option-Orientation-dropdown-label'),
+    optionOrientationDropdown: () => cy.get('#Option-Orientation-select'),
+    optionOrientationListOptions: (optionIndex) => cy.get('[aria-labelledby="Option-Orientation-dropdown-label Option-Orientation-placeholder"] li[role="option"]').eq(optionIndex)
+}
+
+const tests = {
+    verifyNumberOfOptionsColumns: (orientation) => {
+        let option = [2, 3, 4, 5, 6];
+        option.forEach((option) => {
+            it(`When the user selects option \'${option}\' from the Number of Option Columns dropdown and \'${orientation}\' option is selected in \'Option Orientation\' dropdown, then the answer options should be divided and displayed vertically in ${option} columns in \'Set Correct Answer\' section and in \'Preview\' tab`, () => {
+                mcqAdditionalSettingsBase.numberOfOptionColumnsDropdown()
+                    .click();
+                mcqAdditionalSettingsBase.numberOfOptionColumnsListOptions(`${option - 1}`)
+                    .click();
+                mcqAdditionalSettingsBase.optionOrientationDropdown()
+                    .verifyInnerText(orientation);
+                mcqSetCorrectAnswerSection.correctAnswerOptionsWrapper(0)
+                    .parents('.edit-set-correct-answer-mcq-control')
+                    .should('have.attr', 'columns')
+                    .and('eq', `${option}`);
+                createQuestionBasePage.previewTab()
+                    .click();
+                mcqOptionsComponent.previewTabOptionsWrapper(0)
+                    .parents()
+                    .eq(2)
+                    .should('have.attr', 'columns')
+                    .and('eq', `${option}`);
+                createQuestionBasePage.editTab()
+                    .click();
+            });
+        });
+    },
+
+    verifyOptionsStyleLayoutAndDropdown: (inputType) => {
+        //inputType : 'radio' | 'checkbox'
+        let dropdownOptions
+        if (inputType === 'radio') {
+            dropdownOptions = ['Default', 'Block without radio button', 'Radio button below option'];
+        } else if (inputType === 'checkbox') {
+            dropdownOptions = ['Default', 'Block without check box', 'Check box below option'];
+        }
+        it('CSS of Option Style and Layout section', { tags: 'css' }, () => {
+            mcqAdditionalSettingsBase.optionsAndLayoutLabel()
+                .verifyCSS(css.color.sectionHeading, css.fontSize.default, css.fontWeight.semibold);
+            mcqAdditionalSettingsBase.optionsStyleLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            mcqAdditionalSettingsBase.optionsStyleDropdown()
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        //Note: a11y is covered for the entire additional settings section
+
+        it('\'Option Style and Layout\' label, \'Option Style\' label and dropdown should be displayed and in \'Option Style\' dropdown \'Default\' option should be selected by default and option numeration dropdown should not be present', () => {
+            mcqAdditionalSettingsBase.optionsAndLayoutLabel()
+                .verifyInnerText('Option style and layout');
+            mcqAdditionalSettingsBase.optionsStyleLabel()
+                .should('be.visible')
+                .verifyInnerText('Option style');
+            mcqAdditionalSettingsBase.optionsStyleDropdown()
+                .should('be.visible')
+                .verifyInnerText('Default');
+            mcqAdditionalSettingsBase.optionNumerationDropdown()
+                .should('not.exist');
+        });
+
+        it(`Clicking on Option Style dropdown should open a list of 3 options - ${dropdownOptions.toString()}`, () => {
+            mcqAdditionalSettingsBase.optionsStyleDropdown()
+                .click();
+            mcqAdditionalSettingsBase.optionsStyleDropdownListOptions()
+                .should('be.visible');
+            dropdownOptions.forEach((option, count) => {
+                mcqAdditionalSettingsBase.optionsStyleDropdownListOptions()
+                    .eq(count)
+                    .verifyInnerText(option);
+            });
+        });
+
+        it('CSS of Options style dropdown in active state', { tags: 'css' }, () => {
+            mcqAdditionalSettingsBase.optionsStyleDropdownListOptions()
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
+                .should('have.css', 'background-color', css.color.liTextSelectedBg);
+            mcqAdditionalSettingsBase.optionsStyleDropdownListOptions(`${dropdownOptions[1]}`)
+                .should('have.css', 'background-color', css.color.transparent);
+        });
+
+        it('Accessibility of Options Style dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.dropdownList())
+        });
+
+        it(`When the user selects ${dropdownOptions[1]} option from the Option Style dropdown, then \'Option Numeration\' label and dropdown should be displayed and in \'Option Numeration\' dropdown and by default, Numerical should be selected in the dropdown`, () => {
+            mcqAdditionalSettingsBase.optionsStyleDropdownListOptions(`${dropdownOptions[1]}`)
+                .verifyInnerText(`${dropdownOptions[1]}`)
+                .and('be.visible')
+                .click();
+            mcqAdditionalSettingsBase.optionsStyleDropdown()
+                .verifyInnerText(`${dropdownOptions[1]}`);
+            mcqAdditionalSettingsBase.optionNumerationLabel()
+                .verifyInnerText('Option numeration');
+            mcqAdditionalSettingsBase.optionNumerationDropdown()
+                .verifyInnerText('Numerical')
+                .and('be.visible');
+        });
+    },
+
+    verifyOptionNumerationDropdownContents: (inputType) => {
+        //inputType : 'radio' | 'checkbox'
+        let optionName
+        if (inputType === 'radio') {
+            optionName = 'Radio button below option'
+        } else if (inputType === 'checkbox') {
+            optionName = 'Check box below option'
+        }
+        it('CSS of Option Numeration dropdown', { tags: 'css' }, () => {
+            mcqAdditionalSettingsBase.optionNumerationLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            mcqAdditionalSettingsBase.optionNumerationDropdown()
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        it('Accessibility of Option numeration dropdown', () => {
+            cy.checkAccessibility(mcqAdditionalSettingsBase.optionNumerationDropdown().parents('.Option-Numeration'))
+        });
+
+        it('Clicking on Option Numeration dropdown should open a list of 3 options - Numerical, Uppercase alphabet, Lowercase alphabet', () => {
+            mcqAdditionalSettingsBase.optionNumerationDropdown()
+                .click();
+            mcqAdditionalSettingsBase.optionNumerationDropdownListOptions()
+                .should('be.visible');
+            let dropdownOptions = ['Numerical', 'Uppercase alphabet', 'Lowercase alphabet'];
+            dropdownOptions.forEach((option, count) => {
+                mcqAdditionalSettingsBase.optionNumerationDropdownListOptions()
+                    .eq(count)
+                    .verifyInnerText(option);
+            });
+            cy.get('body')
+                .click();
+        });
+
+        it('CSS of Option Numeration dropdown in active state', { tags: 'css' }, () => {
+            cy.log('Post step: Clicking on the dropdown')
+            mcqAdditionalSettingsBase.optionNumerationDropdown()
+                .click()
+            mcqAdditionalSettingsBase.optionNumerationDropdownListOptions()
+                .eq(0)
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
+                .should('have.css', 'background-color', css.color.liTextSelectedBg);
+            mcqAdditionalSettingsBase.optionNumerationDropdownListOptions()
+                .eq(1)
+                .should('have.css', 'background-color', css.color.transparent);
+            cy.log('Post step: Collapsing the response dropdown')
+            cy.get('body')
+                .click();
+        });
+
+        it('Accessibility of Options Numeration dropdown in active state', { tags: 'a11y' }, () => {
+            cy.log('Pre step: Clicking on Option Numeration dropdown')
+            mcqAdditionalSettingsBase.optionNumerationDropdown()
+                .click();
+            cy.checkAccessibility(commonComponents.dropdownList())
+            cy.log('Post step: Closing the Option Numeration dropdown')
+            cy.get('body')
+                .click();
+        });
+
+        it(`When the user selects ${optionName} option from the Option Style dropdown, then \'Option Numeration\' dropdown should not be displayed`, () => {
+            mcqAdditionalSettingsBase.optionsStyleDropdown()
+                .click();
+            mcqAdditionalSettingsBase.optionsStyleDropdownListOptions(`${optionName}`)
+                .click();
+            mcqAdditionalSettingsBase.optionsStyleDropdown()
+                .verifyInnerText(`${optionName}`);
+            mcqAdditionalSettingsBase.optionNumerationDropdown()
+                .should('not.exist');
+        });
+    },
+
+    verifyNumberOfOptionColumnsAndOptionOrientationContent: () => {
+        it('CSS of \'Number of Option Columns\' dropdown', { tags: 'css' }, () => {
+            mcqAdditionalSettingsBase.numberOfOptionColumnsLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            mcqAdditionalSettingsBase.numberOfOptionColumnsDropdown()
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        it('\'Number of Option Columns\' label and dropdown should be displayed and in \'Number of Option Columns\' dropdown option \'1\' should be selected by default and Option orientation dropdown should not be present', () => {
+            mcqAdditionalSettingsBase.numberOfOptionColumnsLabel()
+                .should('be.visible')
+                .verifyInnerText('Number of option columns');
+            mcqAdditionalSettingsBase.numberOfOptionColumnsDropdown()
+                .verifyInnerText('1');
+            mcqAdditionalSettingsBase.optionOrientationLabel()
+                .should('not.exist');
+            mcqAdditionalSettingsBase.optionOrientationDropdown()
+                .should('not.exist');
+        });
+
+        it('Clicking on Number of Option Columns dropdown should open a list of options from 1 to 6', () => {
+            mcqAdditionalSettingsBase.numberOfOptionColumnsDropdown()
+                .click();
+            mcqAdditionalSettingsBase.numberOfOptionColumnsListOptions(0)
+                .should('be.visible');
+            for (let index = 0; index < 6; index++) {
+                mcqAdditionalSettingsBase.numberOfOptionColumnsListOptions(index)
+                    .should('have.text', index + 1);
+            };
+        });
+
+        it('CSS of Number of options column dropdown in active state', { tags: 'css' }, () => {
+            mcqAdditionalSettingsBase.numberOfOptionColumnsListOptions(0)
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
+                .should('have.css', 'background-color', css.color.liTextSelectedBg);
+            mcqAdditionalSettingsBase.numberOfOptionColumnsListOptions(1)
+                .should('have.css', 'background-color', css.color.transparent);
+        });
+
+        it('Accessibility of Number of Option Columns dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.dropdownList())
+        });
+
+        it('When the user selects any option except 1 from the Number of Option Columns dropdown, then \'Option Orientation\' label and dropdown should be displayed and in \'Option Orientation\' dropdown \'Vertical\' option should be selected by default', () => {
+            mcqAdditionalSettingsBase.numberOfOptionColumnsListOptions(2)
+                .click();
+            mcqAdditionalSettingsBase.optionOrientationLabel()
+                .verifyInnerText('Option orientation');
+            mcqAdditionalSettingsBase.optionOrientationDropdown()
+                .verifyInnerText('Vertical');
+        });
+
+        it('CSS of \'Option Orientation\' dropdown', { tags: 'css' }, () => {
+            mcqAdditionalSettingsBase.optionOrientationLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            mcqAdditionalSettingsBase.optionOrientationDropdown()
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        it('Clicking on Option Orientation dropdown should open a list of 2 options - Vertical, Horizontal', () => {
+            mcqAdditionalSettingsBase.optionOrientationDropdown()
+                .click();
+            mcqAdditionalSettingsBase.optionOrientationListOptions(0)
+                .should('be.visible');
+            let dropdownOptions = ['Vertical', 'Horizontal']
+            dropdownOptions.forEach((option, count) => {
+                mcqAdditionalSettingsBase.optionOrientationListOptions(count)
+                    .verifyInnerText(option);
+            });
+            cy.log('Post step: Collapsing the response dropdown')
+            cy.get('body')
+                .click();
+        });
+
+        it('CSS of Option Orientation dropdown in active state', { tags: 'css' }, () => {
+            cy.log('Post step: Clicking on the dropdown')
+            mcqAdditionalSettingsBase.optionOrientationDropdown()
+                .click();
+            mcqAdditionalSettingsBase.optionOrientationListOptions(0)
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
+                .should('have.css', 'background-color', css.color.liTextSelectedBg);
+            mcqAdditionalSettingsBase.optionOrientationListOptions(1)
+                .should('have.css', 'background-color', css.color.transparent);
+            cy.log('Post step: Collapsing the response dropdown')
+            cy.get('body')
+                .click();
+        });
+
+        it('Accessibility of Option Orientation dropdown in active state', { tags: 'a11y' }, () => {
+            cy.log('Pre step: Clicking on the dropdown')
+            mcqAdditionalSettingsBase.optionOrientationDropdown()
+                .click();
+            cy.checkAccessibility(commonComponents.dropdownList())
+            cy.log('Post step: Collapsing the response dropdown')
+            cy.get('body')
+                .click();
+        });
+
+        it('When the user selects option \'1\' from the Number of Option Columns dropdown, then \'Option Orientation\' dropdown should not be displayed and answer options should be displayed in a single column in \'Set Correct Answer\' section as well as \'Preview\' tab', () => {
+            mcqAdditionalSettingsBase.numberOfOptionColumnsDropdown()
+                .click();
+            mcqAdditionalSettingsBase.numberOfOptionColumnsListOptions(0)
+                .click();
+            mcqAdditionalSettingsBase.optionOrientationLabel()
+                .should('not.exist');
+            mcqAdditionalSettingsBase.optionOrientationDropdown()
+                .should('not.exist');
+            mcqSetCorrectAnswerSection.correctAnswerOptionsWrapper(0)
+                .parents('.edit-set-correct-answer-mcq-control')
+                .should('have.attr', 'columns')
+                .and('eq', '1');
+            cy.log('Switching to Preview tab')
+            createQuestionBasePage.steps.switchToPreviewTab();
+            mcqOptionsComponent.previewTabOptionsWrapper(0)
+                .parents()
+                .eq(2)
+                .should('have.attr', 'columns')
+                .and('eq', '1');
+        });
+    },
+
+    verifyOptionOrientation: (inputType) => {
+        let options = ['Pollution caused by treating chemical waste', 'Pollution caused by cement production', 'Pollution caused by methane production', 'Pollution caused by cement and methane production', 'Pollution caused by electronic waste', 'Pollution caused by nuclear waste'];
+        let numbers = [1, 2, 3, 4, 5, 6];
+        it('When the user selects \'Vertical\' option from the \'Option Orientation\' dropdown, the numbers besides answer options should be listed vertically in columns in the \'Set Correct Answer\' section as well as in the \'Preview\' tab', () => {
+            //Failing due to https://redmine.zeuslearning.com/issues/519970
+            mcqAdditionalSettingsBase.numberOfOptionColumnsDropdown()
+                .click();
+            mcqAdditionalSettingsBase.numberOfOptionColumnsListOptions(2)
+                .click();
+            mcqAdditionalSettingsBase.optionOrientationDropdown()
+                .verifyInnerText('Vertical');
+            mcqSetCorrectAnswerSection.steps.verifyEditTabCorrectAnswerSectionOptionsNumeration(numbers, inputType)
+            cy.log('Switching to Preview tab')
+            createQuestionBasePage.steps.switchToPreviewTab();
+            mcqPreviewComponents.steps.verifyPreviewTabOptionsNumeration(numbers, inputType)
+            mcqQuestionCommonComponents.steps.verifyShuffleOptionOrder(options, 6);
+            cy.log('Post step: Switching to Edit tab')
+            createQuestionBasePage.steps.switchToEditTab();
+        });
+
+        it('When the user selects \'Horizontal\' option from the \'Option Orientation\' dropdown, the numbers besides answer options should be listed horizontally in columns in the \'Set Correct Answer\' section as well as in the \'Preview\' tab', () => {
+            mcqAdditionalSettingsBase.optionOrientationDropdown()
+                .click();
+            mcqAdditionalSettingsBase.optionOrientationListOptions(1)
+                .click();
+            mcqAdditionalSettingsBase.optionOrientationDropdown()
+                .verifyInnerText('Horizontal');
+            mcqSetCorrectAnswerSection.steps.verifyEditTabCorrectAnswerSectionOptionsNumeration(numbers, inputType)
+            cy.log('Switching to Preview tab')
+            createQuestionBasePage.steps.switchToPreviewTab();
+            mcqPreviewComponents.steps.verifyPreviewTabOptionsNumeration(numbers, inputType)
+            mcqQuestionCommonComponents.steps.verifyShuffleOptionOrder(options, 6);
+            cy.log('Post-step: Switching to Edit tab and changing back to Vertical option orientation');
+            createQuestionBasePage.steps.switchToEditTab();
+            mcqAdditionalSettingsBase.optionOrientationDropdown()
+                .click();
+            mcqAdditionalSettingsBase.optionOrientationListOptions(0)
+                .click();
+        });
+
+        it('In Preview tab, options should be displayed in shuffled order in 3 columns', () => {
+            cy.log('Pre step: Switching to Preview tab')
+            createQuestionBasePage.steps.switchToPreviewTab();
+            mcqOptionsComponent.previewTabOptionsWrapper(0)
+                .parents()
+                .eq(2)
+                .should('have.attr', 'columns')
+                .and('eq', '3');
+            mcqQuestionCommonComponents.steps.verifyShuffleOptionOrder(options, 6);
+        });
+    }
+}
+
+export const mcqAdditionalSettingsBase = {
+    ...selectors,
+    tests
+}

package/cypress/pages/components/mcqOptionsComponent.js

@@ -0,0 +1,263 @@
+import { commonComponents } from "./commonComponents";
+import { createQuestionBasePage } from "./createQuestionBasePage";
+import { mcqSetCorrectAnswerSection } from "./mcqSetCorrectAnswerSection";
+import { ckEditorToolbar } from "./ckEditorToolbar";
+const css = Cypress.env('css');
+import { optionsWrapperComponent } from "./optionsWrapperComponent";
+import { mcqPreviewComponents } from "./mcqPreviewComponents";
+import constants from "../../fixtures/constants";
+
+const selectors = {
+    optionsInputField: () => cy.get('.option-component [title*="Enter option"]'),
+    previewTabOptionsWrapper: (optionNumber) => cy.get('[class*="PreviewTabstyles__PreviewSubContainer"] div[class*="option-wrapper"]').eq(optionNumber),
+    previewTabOptionsText: () => cy.get('label .mcq-label'),
+    previewTabOptionsCheckbox: () => cy.get('[data-ngie-testid="response-option-checkbox"] input'),
+    editTabOptionsWrapper: (optionIndex) => cy.get('.edit-mcq-option-wrapper').eq(optionIndex),
+    editTabOptionsText: () => cy.get('label .mcq-label'),
+    optionsRadioButton: () => cy.get('input[type="radio"]'),
+    editTabOptionsCheckbox: () => cy.get('[data-ngie-testid="response-option-checkbox"] input'),
+    optionNumeration: () => cy.get('.mcq-option-numeration'),
+    optionForBlockWithoutCheckbox: () => cy.get('.mcq-without-checkbox'),
+    optionForBlockWithoutRadioButton: () => cy.get('.numerical-option-wrapper')
+};
+
+const steps = {
+    addOptionsText: (numberOfOptions) => {
+        let options = ['Pollution caused by treating chemical waste', 'Pollution caused by cement production', 'Pollution caused by methane production', 'Pollution caused by cement and methane production', 'Pollution caused by electronic waste', 'Pollution caused by nuclear waste'];
+        for (let index = 0; index < numberOfOptions; index++) {
+            mcqOptionsComponent.optionsInputField()
+                .eq(index)
+                .type(options[index], { delay: 0 })
+                .blur()
+                .focus()
+                .should('have.text', options[index]);
+        };
+    },
+
+    verifyBlockWithoutCheckboxOptionsAndNumerationInEditAndPreviewTab: (inputType) => {
+        const numbers = ['1', '2', '3', '4'];
+        for (let index = 0; index < 4; index++) {
+            mcqSetCorrectAnswerSection.correctAnswerOptionsWrapper(index)
+                .within(() => {
+                    if (inputType === 'radio') {
+                        mcqOptionsComponent.optionForBlockWithoutRadioButton()
+                            .should('exist');
+                        mcqOptionsComponent.optionsRadioButton()
+                            .should('not.be.visible');
+                    } else if (inputType === 'checkbox') {
+                        mcqOptionsComponent.optionForBlockWithoutCheckbox()
+                            .should('exist');
+                        mcqOptionsComponent.editTabOptionsCheckbox()
+                            .should('not.be.visible');
+                    };
+                });
+        };
+        mcqSetCorrectAnswerSection.steps.verifyEditTabCorrectAnswerSectionOptionsNumeration(numbers, inputType)
+        cy.log('Switching to Preview tab')
+        createQuestionBasePage.steps.switchToPreviewTab();
+        for (let index = 0; index < 4; index++) {
+            mcqOptionsComponent.previewTabOptionsWrapper(index)
+                .within(() => {
+                    if (inputType === 'radio') {
+                        mcqOptionsComponent.optionsRadioButton()
+                            .should('not.be.visible');
+                        mcqOptionsComponent.optionForBlockWithoutRadioButton()
+                            .should('exist');
+                    } else if (inputType === 'checkbox') {
+                        mcqOptionsComponent.previewTabOptionsCheckbox()
+                            .should('not.be.visible');
+                        mcqOptionsComponent.optionForBlockWithoutCheckbox()
+                            .should('exist');
+                    };
+                });
+        };
+        mcqPreviewComponents.steps.verifyPreviewTabOptionsNumeration(numbers, inputType);
+    }
+};
+
+const tests = {
+    verifyDefaultOptionsFieldAndErrorMessage: () => {
+        it('\'Options\' label should be displayed', () => {
+            optionsWrapperComponent.optionsLabel()
+                .should('have.text', 'Options');
+        });
+
+        it('By default 4 \'Options\' input fields should be displayed with placeholder text and Drag handle and Delete option icon buttons should be displayed besides each input field', () => {
+            let options = ['Enter option 1', 'Enter option 2', 'Enter option 3', 'Enter option 4'];
+            options.forEach((option, count) => {
+                mcqOptionsComponent.editTabOptionsWrapper(count)
+                    .within(() => {
+                        optionsWrapperComponent.optionsInputField()
+                            .should('have.attr', 'data-cke-editorplaceholder', option);
+                        commonComponents.dragHandleButton()
+                            .should('exist');
+                        commonComponents.deleteButton()
+                            .should('be.visible');
+                    });
+            });
+        });
+
+        it('On hovering over the drag handle of the options, \'Drag to reorder\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the drag handle', () => {
+            mcqOptionsComponent.editTabOptionsWrapper(0)
+                .within(() => {
+                    commonComponents.dragHandleButton()
+                        .trigger('mouseover');
+                });
+            commonComponents.tooltipText()
+                .should('have.text', 'Drag to reorder');
+            mcqOptionsComponent.editTabOptionsWrapper(0)
+                .within(() => {
+                    commonComponents.dragHandleButton()
+                        .trigger('mouseout');
+                });
+            commonComponents.tooltipText()
+                .should('not.exist');
+        });
+
+        it('\'Add Option\' button should be present', () => {
+            optionsWrapperComponent.addOptionButton()
+                .should('be.visible');
+        });
+
+        it('CSS of Options section', { tags: 'css' }, () => {
+            optionsWrapperComponent.optionsLabel()
+                .verifyCSS(css.color.sectionHeading, css.fontSize.normal, css.fontWeight.semibold);
+            mcqOptionsComponent.editTabOptionsWrapper(0)
+                .within(() => {
+                    commonComponents.dragHandleButton()
+                        .verifyCSS(css.color.secondaryBtnActive, css.fontSize.normal, css.fontWeight.regular);
+                    commonComponents.deleteButton()
+                        .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+                    mcqOptionsComponent.optionsInputField()
+                        .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+                });
+            optionsWrapperComponent.addOptionButton()
+                .verifyCSS(css.color.secondaryBtnActive, css.fontSize.default, css.fontWeight.medium);
+        });
+
+        //Note: a11y covered in header section
+
+        it('When user focus in and out of any of the \'Options\' input field without typing anything, an error message should be thrown', () => {
+            mcqOptionsComponent.editTabOptionsWrapper(0)
+                .within(() => {
+                    mcqOptionsComponent.optionsInputField()
+                        .click()
+                        .blur();
+                    commonComponents.errorMessage()
+                        .should('have.text', 'Error: Option is required.');
+                });
+        });
+
+        it('User should be able to enter text in options input field and \'Error: Option is required.\' error message should disappear', () => {
+            mcqOptionsComponent.steps.addOptionsText(3)
+            mcqOptionsComponent.editTabOptionsWrapper(3)
+                .within(() => {
+                    commonComponents.errorMessage()
+                        .should('not.exist');
+                });
+        });
+    },
+
+    verifyAddAndDeleteOptions: () => {
+        it('User should be able to delete an option and the deleted option should not be displayed in the \'Set Correct Answer\' section as well as on the \'Preview\' tab', () => {
+            mcqOptionsComponent.editTabOptionsWrapper(3)
+                .within(() => {
+                    commonComponents.deleteButton()
+                        .click();
+                    commonComponents.deleteButton()
+                        .should('not.exist');
+                });
+            cy.log('Switching to Preview tab to check deleted option doesn\'t exist')
+            createQuestionBasePage.steps.switchToPreviewTab()
+            mcqOptionsComponent.previewTabOptionsWrapper(3)
+                .should('not.exist');
+        });
+
+        it('User should be able to add an option using \'ADD OPTION\' button and the added option should be displayed in the \'Set Correct Answer\' section as well as on the \'Preview\' tab', () => {
+            cy.log('Switching back to edit tab to add option')
+            createQuestionBasePage.steps.switchToEditTab()
+            optionsWrapperComponent.addOptionButton()
+                .click();
+            mcqOptionsComponent.editTabOptionsWrapper(3)
+                .should('be.visible');
+            mcqSetCorrectAnswerSection.correctAnswerOptionsWrapper(3)
+                .should('be.visible');
+            cy.log('Switching to Preview tab to check the added option')
+            createQuestionBasePage.steps.switchToPreviewTab()
+            mcqOptionsComponent.previewTabOptionsWrapper(3)
+                .should('be.visible');
+        });
+    },
+
+    verifyOptionsImageUpload: () => {
+        it('User should be able to upload images in options input field', () => {
+            mcqOptionsComponent.editTabOptionsWrapper(3)
+                .within(() => {
+                    mcqOptionsComponent.optionsInputField()
+                        .click();
+                });
+            ckEditorToolbar.imageIcon()
+                .scrollIntoView()
+                .click();
+            ckEditorToolbar.imageUrlInputField()
+                .type(constants.foxImageLink);
+            ckEditorToolbar.alternativeTextInputField()
+                .type(constants.foxImageAltText);
+            ckEditorToolbar.ckeOkButton()
+                .click();
+            mcqOptionsComponent.editTabOptionsWrapper(3)
+                .within(() => {
+                    mcqOptionsComponent.optionsInputField()
+                        .find('img')
+                        .should('have.attr', 'src', constants.foxImageLink)
+                        .and('have.attr', 'alt', constants.foxImageAltText);
+                });
+        });
+
+        it('The added text and image options should be displayed in the \'Set Correct Answer\' section as well as in the \'Preview\' tab', () => {
+            let options = ['Pollution caused by treating chemical waste', 'Pollution caused by cement production', 'Pollution caused by methane production'];
+            options.forEach((option, count) => {
+                mcqSetCorrectAnswerSection.correctAnswerOptionsWrapper(count)
+                    .within(() => {
+                        mcqOptionsComponent.editTabOptionsText()
+                            .should('have.text', option);
+                    });
+            });
+            mcqSetCorrectAnswerSection.correctAnswerOptionsWrapper(3)
+                .find('img')
+                .should('have.attr', 'src', constants.foxImageLink)
+                .and('have.attr', 'alt', constants.foxImageAltText);
+            cy.log('Switching to Preview tab')
+            createQuestionBasePage.steps.switchToPreviewTab();
+            options.forEach((option, count) => {
+                mcqOptionsComponent.previewTabOptionsWrapper(count)
+                    .within(() => {
+                        mcqOptionsComponent.previewTabOptionsText()
+                            .should('have.text', option);
+                    });
+            });
+            mcqOptionsComponent.previewTabOptionsWrapper(3)
+                .find('img')
+                .should('have.attr', 'src', constants.foxImageLink)
+                .and('have.attr', 'alt', constants.foxImageAltText);
+            cy.log('Post-step: Switching back to the Edit tab')
+            createQuestionBasePage.steps.switchToEditTab();
+        });
+
+        //https://redmine.zeuslearning.com/issues/528466
+        it('Accessibility of options field with images', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(mcqSetCorrectAnswerSection.correctAnswerOptionsWrapper(3).parents('.mcq_Group'))
+            cy.log('Switching to Preview tab')
+            createQuestionBasePage.steps.switchToPreviewTab();
+            cy.checkAccessibility(mcqOptionsComponent.previewTabOptionsWrapper(3).parents('.mcq-options-wrapper'));
+            cy.log('Post step: Switching to Edit tab')
+            createQuestionBasePage.steps.switchToEditTab();
+        });
+    }
+};
+
+export const mcqOptionsComponent = {
+    ...selectors,
+    steps,
+    tests
+};