itemengine-cypress-automation 1.0.78 → 1.0.80

package/cypress/e2e/ILC/DrawingResponse/drawingResponseEditTabBasicSection.js

@@ -0,0 +1,339 @@
+import { drawingResponsePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { drawingToolbarOptionsAndAdditionalOptions } from "../../../fixtures/drawingToolbarOptionsAdditionalOptionsAndSpecialAndMathCharacters";
+import utilities from "../../../support/helpers/utilities";
+import { commonComponents } from "../../../pages/components";
+const css = Cypress.env('css');
+
+//TODO need to update the array https://redmine.zeuslearning.com/issues/555843 once this is fixed 
+const toolbarOptions = drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions.slice(0, 13);  //Only toolbar options, no control options
+const defaultSelectedToolbarOptions = toolbarOptions.slice(0, 8);
+const controlsOptions = ['Layer', 'Duplicate', 'Undo redo', 'Full screen', 'Clear all']; //Not same as preview tab, hence not used through constant array drawingToolbarOptionsAdditionalOptionsAndSpecialAndMathCharacters
+
+describe('Create item page - Drawing response: Question instructions, Customize toolbar options and controls', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question instructions input field - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+        });
+
+        drawingResponsePage.tests.verifyQuestionInstructionsInputFieldEditTab();
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/555576
+    describe('Question instructions input field - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+        });
+
+        drawingResponsePage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
+    });
+
+    describe('Customize toolbar options and controls - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+        });
+
+        it('The \'Customize toolbar options and controls\' accordion should be visible and by default it should be collapsed', () => {
+            utilities.verifyElementVisibilityState(drawingResponsePage.customizeToolbarOptionsAndControlsAccordion(), 'visible');
+            utilities.verifyInnerText(drawingResponsePage.customizeToolbarOptionsAndControlsAccordion(), 'Customize toolbar options and controls');
+            drawingResponsePage.steps.verifyCustomizeToolbarOptionsAndControlsAccordionCollapsedState();
+        });
+
+        it('The user should be able to expand the \'Customize toolbar options and controls\' accordion', () => {
+            drawingResponsePage.steps.expandCustomizeToolbarOptionsAndControlsAccordion();
+        });
+
+        it('\'Toolbar options\' label should be displayed', () => {
+            utilities.verifyInnerText(drawingResponsePage.toolBarOptionsLabel(), 'Toolbar options');
+            utilities.verifyElementVisibilityState(drawingResponsePage.toolBarOptionsLabel(), 'visible');
+        });
+
+        it(`A total of ${toolbarOptions.length} toolbar options should be displayed in the \'Toolbar options\' section. By default, first ${toolbarOptions.slice(0, 8).length} toolbar options should be selected in the \'Toolbar options\' section`, () => {
+            toolbarOptions.forEach((toolbarOption) => {
+                utilities.verifyElementVisibilityState(drawingResponsePage.toolbarOptionsAndControlsFormattingOptionsTiles(toolbarOption.displayName), 'visible');
+            });
+            defaultSelectedToolbarOptions.forEach((toolbarOption) => {
+                drawingResponsePage.steps.verifyToolbarAndControlsOptionsSelectedState(toolbarOption.displayName);
+            });
+        });
+
+        it('\'Controls\' label should be displayed', () => {
+            utilities.verifyInnerText(drawingResponsePage.controlsLabel(), 'Controls');
+            utilities.verifyElementVisibilityState(drawingResponsePage.controlsLabel(), 'visible');
+        });
+
+        it(`A total of ${controlsOptions.length} controls should be displayed in the \'Controls\' section - ${controlsOptions.join('')}. By default all the controls should be in selected state`, () => {
+            controlsOptions.forEach((controlsOption) => {
+                utilities.verifyElementVisibilityState(drawingResponsePage.toolbarOptionsAndControlsFormattingOptionsTiles(controlsOption), 'visible');
+            });
+            controlsOptions.forEach((controlOption) => {
+                drawingResponsePage.steps.verifyToolbarAndControlsOptionsSelectedState(controlOption);
+            });
+        });
+
+        it('When user deselects all control options, then error message should not be displayed', () => {
+            controlsOptions.forEach((controlsOption) => {
+                drawingResponsePage.steps.unselectToolbarOptionsAndControlsFormattingOptionsTiles(controlsOption);
+            });
+            commonComponents.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('User should be able to select all control options', () => {
+            drawingResponsePage.steps.selectEditTabToolbarOptions(controlsOptions);
+        });
+
+        it('When user deselects all toolbar options, then an error message should be displayed - \'Error: Please select a Toolbar option.\'', () => {
+            toolbarOptions.forEach((toolbarOption) => {
+                drawingResponsePage.steps.unselectToolbarOptionsAndControlsFormattingOptionsTiles(toolbarOption.displayName);
+            });
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Please select a Toolbar option.');
+        });
+
+        commonComponents.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When user selects a toolbar option, the error message should disappear', () => {
+            drawingResponsePage.steps.selectEditTabToolbarOptions([`${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[0].displayName}`]);
+            commonComponents.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        //Failing Due to https://redmine.zeuslearning.com/issues/555699
+        it('CSS of Customize toolbar options and controls section', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.toolBarOptionsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(drawingResponsePage.controlsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            cy.log('Css of button in selected state')
+            utilities.verifyCSS(drawingResponsePage.toolbarOptionsAndControlsFormattingOptionsTiles(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[0].displayName), {
+                'background-color': css.color.activeButtons,
+                'border': `1px solid ${css.color.activeButtons}`
+            });
+            cy.log('Css of icon button in selected state')
+            utilities.verifyCSS(drawingResponsePage.toolbarOptionsAndControlsFormattingOptionsTiles(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[0].displayName).find('svg path').eq(3), {
+                'color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(drawingResponsePage.toolbarOptionsAndControlsFormattingOptionsTiles(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[0].displayName).find('.tick-icon-wrapper svg path').eq(1), {
+                'color': css.color.activeButtons
+            });
+            cy.log('Css of button in deselected state')
+            utilities.verifyCSS(drawingResponsePage.toolbarOptionsAndControlsFormattingOptionsTiles(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[1].displayName), {
+                'background-color': css.color.defaultBackground,
+                'border': `1px solid ${css.color.secondaryBtnBorder}`
+            });
+            cy.log('Css of icon button in deselected state')
+            utilities.verifyCSS(drawingResponsePage.toolbarOptionsAndControlsFormattingOptionsTiles(drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[1].displayName).find('svg path').eq(3), {
+                'color': css.color.secondaryBtn
+            });
+            utilities.verifyCSS(drawingResponsePage.customizeToolbarOptionsAndControlsAccordion().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of Customize toolbar options and controls section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.toolBarOptionsLabel()).parents('.ngie-accordion-detail');
+        });
+    });
+
+    describe('Customize toolbar options - Additional options - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+            drawingResponsePage.steps.expandCustomizeToolbarOptionsAndControlsAccordion();
+        });
+
+        it('\'Additional options\' label should be displayed', () => {
+            utilities.verifyInnerText(drawingResponsePage.additionalOptionsLabel(), 'Additional options');
+            utilities.verifyElementVisibilityState(drawingResponsePage.additionalOptionsLabel(), 'visible');
+        });
+
+        it('\'Options\' label should be displayed along with an info icon, hovering over the options info icon a tooltip should be displayed with text \'Below options depend on active toolbar options\'', () => {
+            utilities.verifyInnerText(drawingResponsePage.optionsLabel(), 'Options');
+            utilities.verifyElementVisibilityState(drawingResponsePage.optionsLabel(), 'visible');
+            utilities.verifyElementVisibilityState(drawingResponsePage.optionLabelInfoIcon(), 'visible');
+            drawingResponsePage.optionLabelInfoIcon()
+                .verifyTooltip('Below options depend on active toolbar options');
+        });
+
+        it(`By default ${drawingToolbarOptionsAndAdditionalOptions.additionalOptionsTooltip.slice(0, 5).join(' ')} additional options should be displayed in the Additional options section`, () => {
+            drawingToolbarOptionsAndAdditionalOptions.additionalOptionsTooltip.slice(0, 5).forEach((additionalOption) => {
+                utilities.verifyElementVisibilityState(drawingResponsePage.additionalOptionsTiles(additionalOption), 'visible');
+            });
+        });
+
+        it(`When user selects all toolbar options, then a total of ${drawingToolbarOptionsAndAdditionalOptions.additionalOptions.length} additional options should be displayed in the \'Additional options\' section - ${drawingToolbarOptionsAndAdditionalOptions.additionalOptionsTooltip.slice(0, 5).join(' ')}. By default all the additional options should be in unselected state`, () => {
+            toolbarOptions.slice(8, 13).forEach((toolbarOption) => {
+                drawingResponsePage.steps.selectEditTabToolbarOptions([`${toolbarOption.displayName}`]);
+            });
+            drawingToolbarOptionsAndAdditionalOptions.additionalOptions.forEach((additionalOption) => {
+                utilities.verifyElementVisibilityState(drawingResponsePage.additionalOptionsTiles(additionalOption), 'visible');
+            });
+            drawingResponsePage.steps.verifyAdditionalOptionsUnselectedState(drawingToolbarOptionsAndAdditionalOptions.additionalOptions);
+        });
+
+        it('When user has selected all toolbar options, then under additional options section, default font/stroke/fill color labels, their color blocks and disabled customize special/math character labels and checkboxes should be displayed', () => {
+            utilities.verifyElementVisibilityState(drawingResponsePage.defaultStrokeFontColorLabel(), 'visible');
+            utilities.verifyInnerText(drawingResponsePage.defaultStrokeFontColorLabel(), 'Default stroke/font colors');
+            utilities.verifyElementVisibilityState(drawingResponsePage.colorPickerBlock().eq(0), 'visible');
+            drawingResponsePage.steps.verifyCSSOfDefaultFontStrokeFillColorBlockInEditTab(0, 'rgb(0, 112, 128)');
+            utilities.verifyElementVisibilityState(drawingResponsePage.defaultFillColorsLabel(), 'visible');
+            utilities.verifyInnerText(drawingResponsePage.defaultFillColorsLabel(), 'Default fill colors');
+            utilities.verifyElementVisibilityState(drawingResponsePage.colorPickerBlock().eq(1), 'visible');
+            drawingResponsePage.steps.verifyCSSOfDefaultFontStrokeFillColorBlockInEditTab(1, 'rgb(0, 224, 255)');
+            utilities.verifyElementVisibilityState(drawingResponsePage.customizeMathCharactersLabel(), 'visible');
+            utilities.verifyElementDisabledClass(drawingResponsePage.customizeMathCharactersLabel());
+            utilities.verifyElementVisibilityState(drawingResponsePage.customizeMathCharactersCheckbox(), 'exist');
+            utilities.verifyElementDisabled(drawingResponsePage.customizeMathCharactersCheckbox());
+            utilities.verifyElementVisibilityState(drawingResponsePage.customizeSpecialCharactersLabel(), 'visible');
+            utilities.verifyElementDisabledClass(drawingResponsePage.customizeSpecialCharactersLabel());
+            utilities.verifyElementVisibilityState(drawingResponsePage.customizeSpecialCharactersCheckbox(), 'exist');
+            utilities.verifyElementDisabled(drawingResponsePage.customizeSpecialCharactersCheckbox());
+        });
+
+        for (let index = 0; index < drawingToolbarOptionsAndAdditionalOptions.additionalOptions.length; index++) {
+            it(`When the user hovers over the \'${drawingToolbarOptionsAndAdditionalOptions.additionalOptionsTooltip[index]}\' additional option, a tooltip \'${drawingToolbarOptionsAndAdditionalOptions.additionalOptionsTooltip[index]}\' should be displayed and on moving away the focus, the tooltip should disappear`, () => {
+                drawingResponsePage.additionalOptionsTiles(drawingToolbarOptionsAndAdditionalOptions.additionalOptions[index])
+                    .verifyTooltip((drawingToolbarOptionsAndAdditionalOptions.additionalOptionsTooltip[index]));
+            });
+        };
+
+        //Select all individual toolbar options, verify secondary options and customization sections, verify other options are not displayed
+        it('When user selects a toolbar option, then its corresponding secondary toolbar options and their customization options and their sections should be displayed', () => {
+            cy.log('Pre-step: De-select all toolbar options');
+            toolbarOptions.forEach((toolbarOption) => {
+                drawingResponsePage.steps.unselectToolbarOptionsAndControlsFormattingOptionsTiles(toolbarOption.displayName);
+            });
+            toolbarOptions.forEach((toolbarOption) => {
+                drawingResponsePage.steps.selectEditTabToolbarOptions([`${toolbarOption.displayName}`]);
+                if (toolbarOption.additionalOptions !== undefined) {
+                    toolbarOption.additionalOptions.forEach((additionalOption) => {
+                        utilities.verifyElementVisibilityState(drawingResponsePage.additionalOptionsTiles(additionalOption), 'visible');
+                    });
+                    utilities.verifyElementCount(drawingResponsePage.additionalOptionsTiles(), toolbarOption.additionalOptions.length);
+                    if (toolbarOption.additionalOptions.includes(' strokefontcolor')) {
+                        utilities.verifyElementVisibilityState(drawingResponsePage.defaultStrokeFontColorLabel(), 'visible');
+                        utilities.verifyInnerText(drawingResponsePage.defaultStrokeFontColorLabel(), 'Default stroke/font colors');
+                        utilities.verifyElementVisibilityState(drawingResponsePage.defaultStrokeColorsWrapper(), 'visible');
+                        drawingResponsePage.steps.verifyCSSOfDefaultFontStrokeFillColorBlockInEditTab(0, 'rgb(0, 112, 128)');
+                    } else {
+                        utilities.verifyElementVisibilityState(drawingResponsePage.defaultStrokeColorsWrapper(), 'notExist');
+                    }
+                    if (toolbarOption.additionalOptions.includes(' fillcolor')) {
+                        utilities.verifyElementVisibilityState(drawingResponsePage.defaultFillColorsLabel(), 'visible');
+                        utilities.verifyInnerText(drawingResponsePage.defaultFillColorsLabel(), 'Default fill colors');
+                        utilities.verifyElementVisibilityState(drawingResponsePage.defaultFillColorsWrapper(), 'visible');
+                        drawingResponsePage.steps.verifyCSSOfDefaultFontStrokeFillColorBlockInEditTab(1, 'rgb(0, 224, 255)');
+                    } else {
+                        utilities.verifyElementVisibilityState(drawingResponsePage.defaultFillColorsWrapper(), 'notExist');
+                    }
+                    if (toolbarOption.additionalOptions.includes(' specialchar')) {
+                        utilities.verifyElementVisibilityState(drawingResponsePage.customizeSpecialCharactersLabel(), 'visible');
+                        utilities.verifyElementDisabledClass(drawingResponsePage.customizeSpecialCharactersLabel());
+                        utilities.verifyElementVisibilityState(drawingResponsePage.customizeSpecialCharactersCheckbox(), 'exist');
+                        utilities.verifyElementDisabled(drawingResponsePage.customizeSpecialCharactersCheckbox());
+                    } else {
+                        utilities.verifyElementVisibilityState(drawingResponsePage.customizeSpecialCharactersLabel(), 'notExist');
+                        utilities.verifyElementVisibilityState(drawingResponsePage.customizeSpecialCharactersCheckbox(), 'notExist');
+                    }
+                    if (toolbarOption.additionalOptions.includes(' mathchar')) {
+                        utilities.verifyElementVisibilityState(drawingResponsePage.customizeMathCharactersLabel(), 'visible');
+                        utilities.verifyElementDisabledClass(drawingResponsePage.customizeMathCharactersLabel());
+                        utilities.verifyElementVisibilityState(drawingResponsePage.customizeMathCharactersCheckbox(), 'exist');
+                        utilities.verifyElementDisabled(drawingResponsePage.customizeMathCharactersCheckbox());
+                    } else {
+                        utilities.verifyElementVisibilityState(drawingResponsePage.customizeMathCharactersLabel(), 'notExist');
+                        utilities.verifyElementVisibilityState(drawingResponsePage.customizeMathCharactersCheckbox(), 'notExist');
+                    }
+                } else {
+                    utilities.verifyElementVisibilityState(drawingResponsePage.additionalOptionsLabel(), 'notExist');
+                    utilities.verifyElementVisibilityState(drawingResponsePage.additionalOptionsTiles(), 'notExist');
+                    utilities.verifyElementVisibilityState(drawingResponsePage.defaultStrokeColorsWrapper(), 'notExist');
+                    utilities.verifyElementVisibilityState(drawingResponsePage.defaultFillColorsWrapper(), 'notExist');
+                    utilities.verifyElementVisibilityState(drawingResponsePage.customizeMathCharactersLabel(), 'notExist');
+                    utilities.verifyElementVisibilityState(drawingResponsePage.customizeMathCharactersLabel(), 'notExist');
+                }
+
+                drawingResponsePage.steps.unselectToolbarOptionsAndControlsFormattingOptionsTiles(`${toolbarOption.displayName}`);
+            });
+        });
+
+        it('When the user has not selected the \'Special characters\' option from additional options, \'Customize special characters\' label and checkbox should be in disabled state', () => {
+            cy.log('Pre-step- Select \'Text\' toolbar options');
+            drawingResponsePage.steps.selectEditTabToolbarOptions([`${drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].displayName}`]);
+            utilities.verifyElementDisabledClass(drawingResponsePage.customizeSpecialCharactersLabel());
+            utilities.verifyElementDisabled(drawingResponsePage.customizeSpecialCharactersCheckbox());
+        });
+
+        it('When the user has not selected the \'Math characters\' option from additional options, \'Customize math characters\' label and checkbox should be in disabled state', () => {
+            utilities.verifyElementDisabledClass(drawingResponsePage.customizeMathCharactersLabel());
+            utilities.verifyElementDisabled(drawingResponsePage.customizeMathCharactersCheckbox());
+        });
+
+        it('When the user selects the \'Special characters\' option from additional options, \'Customize special characters\' label and checkbox should get enabled', () => {
+            drawingResponsePage.steps.selectOptionsTiles([drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].additionalOptions[0]]);
+            utilities.verifyElementNotDisabled(drawingResponsePage.customizeSpecialCharactersLabel());
+            utilities.verifyElementNotDisabled(drawingResponsePage.customizeSpecialCharactersCheckbox());
+        });
+
+        it('When the user selects the \'Math characters\' option from additional options, \'Customize math characters\' label and checkbox should get enabled', () => {
+            drawingResponsePage.steps.selectOptionsTiles([drawingToolbarOptionsAndAdditionalOptions.drawingToolbarOptions[6].additionalOptions[1]]);
+            utilities.verifyElementNotDisabled(drawingResponsePage.customizeMathCharactersLabel());
+            utilities.verifyElementNotDisabled(drawingResponsePage.customizeMathCharactersCheckbox());
+        });
+
+        it('CSS of Customize toolbar options and controls section', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.optionsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(drawingResponsePage.additionalOptionsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(drawingResponsePage.optionLabelInfoIcon().find('svg g path').eq(1), {
+                'stroke': css.color.activeButtons
+            });
+            cy.log('Pre-step: Hovering on options info icon');
+            utilities.hoverOverElement(drawingResponsePage.optionLabelInfoIcon());
+            utilities.verifyCSS(drawingResponsePage.tooltipText(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.tooltipBg
+            });
+            cy.log('Pre-step: Hovering away from options info icon');
+            utilities.hoverAwayFromElement(drawingResponsePage.optionLabelInfoIcon());
+            utilities.verifyCSS(drawingResponsePage.customizeToolbarOptionsAndControlsLabel(), {
+                'color': css.color.accordionLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            //Rest of the CSS is covered in customize additional options file
+        });
+
+        it('Accessibility of Customize toolbar options and controls section', { tags: 'a11y' }, () => {
+            //Accessibility covered in previous describe
+        });
+    });
+});

package/cypress/e2e/ILC/DrawingResponse/drawingResponseEditTabScoring.js

@@ -0,0 +1,76 @@
+import { drawingResponsePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create item page - Drawing response:  Drawing Response: Scoring section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Scoring section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+        });
+
+        drawingResponsePage.tests.verifyScoringTypeLabelAndDropdown('manuallyScored');
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/553845
+    describe('Manually scored scoring type - Scoring section', () => {
+        abortEarlySetup();
+        before(() => {
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When the user selects \'Manually scored\' option from the Scoring Type dropdown, then the \'Points\' label and input field should be displayed and \'Minimum scoring\' label and dropdown should be visible', () => {
+            drawingResponsePage.steps.expandScoringTypeDropdown();
+            drawingResponsePage.steps.selectOptionFromScoringTypeDropdown('Manually scored');
+            drawingResponsePage.steps.verifyDefaultPointsLabelAndInputField();
+            drawingResponsePage.steps.verifyMinimumScoringLabelAndDropdownDefaultState();
+        });
+
+        drawingResponsePage.tests.verifyPointsFieldErrorState();
+
+        drawingResponsePage.tests.verifyMinimumScoringDropdown();
+
+        drawingResponsePage.tests.verifyMinimumPointsLabelAndInputField();
+
+        drawingResponsePage.tests.verifyMinimumPointsFieldErrorState();
+    });
+
+    describe('Non scored scoring - Scoring section', () => {
+        abortEarlySetup();
+        before(() => {
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+        });
+
+        it('User should be able to select \'Non scored\' scoring type from scoring type dropdown', () => {
+            drawingResponsePage.steps.expandScoringTypeDropdown();
+            drawingResponsePage.steps.selectOptionFromScoringTypeDropdown('Non scored');
+        });
+
+        it('When the user has selected \'Non scored\' option from the \'Scoring type\' dropdown, then \'Points\' input field should be displayed in disabled state with prefilled \'0\' points and \'Minimum scoring\' dropdown should not be displayed', () => {
+            drawingResponsePage.steps.verifyNonScoredPointsField();
+        });
+
+        it('CSS of disabled points input field', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.pointsInputField(), {
+                'opacity': '1'
+            });
+            utilities.verifyCSS(drawingResponsePage.pointsInputField().next('fieldset'), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of disabled Points field', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.pointsInputField().parents('.points-container'));
+        });
+    });
+});  

package/cypress/e2e/ILC/DrawingResponse/drawingResponseGradingViewAndCorrectAnswerViewContents.smoke.js

@@ -0,0 +1,107 @@
+import { correctAnswerViewPage, desmosGraphingPage, drawingResponsePage, itemPreviewPage, studentViewPage } from "../../../pages";
+import { gradingViewPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+let gradingAndCorrectAnsView = ['Grading view', 'Correct answer view']
+const views = utilities.getViews(gradingAndCorrectAnsView);
+var itemReferenceID = "";
+
+const defaultToolbarAndControlOptions = ['Select', 'Pencil', 'Line', 'Curved Line', 'Take a photo', 'Upload an image', 'Text', 'Point Eraser', 'Bring forward', 'Bring backward', 'Duplicate', 'Undo', 'Redo', 'Full Screen', 'Clear All'];
+
+describe('Create item page - Drawing response: Grading view, Correct answer view contents', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    if (views.includes('Grading view')) {
+        describe('Grading view contents', { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                cy.log('Navigating to drawing response question type');
+                drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+                cy.barsPreLoaderWait();
+                drawingResponsePage.steps.addQuestionInstructions();
+                drawingResponsePage.steps.expandCustomizeToolbarOptionsAndControlsAccordion();
+                drawingResponsePage.steps.selectOptionsTiles([' specialchar']);
+                drawingResponsePage.steps.checkCustomizeSpecialCharactersCheckbox();
+                drawingResponsePage.steps.selectShowOnlyCustomSpecialCharactersRadioButton();
+                drawingResponsePage.steps.addInputToCustomSpecialCharactersInputField('a');
+                drawingResponsePage.steps.allotPoints(10);
+                drawingResponsePage.steps.clickOnSaveQuestionButton();
+                utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                //Global variable issue, not working inside before
+                itemPreviewPage.referenceID()
+                    .invoke('text')
+                    .then(($refID) => {
+                        itemReferenceID = $refID;
+                        cy.visit(`/item-engine/demo/render-item/student-view/${utilities.base64Encoding(itemReferenceID)}`);
+                        drawingResponsePage.steps.selectStudentViewToolbarOption('Text');
+                        drawingResponsePage.steps.clickOnStudentViewUpperCanvas();
+                        drawingResponsePage.steps.selectPreviewTabSecondaryToolbarOption('Special characters');
+                        drawingResponsePage.steps.selectCustomSpecialCharacter();
+                        studentViewPage.steps.submitResponse();
+                        studentViewPage.steps.clickOnGoToGradingViewButton();
+                    });
+            });
+
+            //Failing due to https://redmine.zeuslearning.com/issues/558301
+            it('Question instructions should be visible', () => {
+                utilities.verifyInnerText(drawingResponsePage.questionInstructionsText(), 'Which of the following is the major contributor to increased carbon dioxide levels because of urbanization? Select your answer from the options below.');
+                utilities.verifyElementVisibilityState(drawingResponsePage.questionInstructionsText(), 'visible');
+            });
+
+            it('A preview of the canvas along with the selected tools and controls should be displayed. All contents inside the canvas should be in disabled state', () => {
+                for (let index = 0; index < defaultToolbarAndControlOptions.length; index++) {
+                    utilities.verifyElementVisibilityState(drawingResponsePage.studentAndGradingViewDrawingToolbarOption(defaultToolbarAndControlOptions[index]), 'visible');
+                }
+                utilities.verifyElementDisabledClass(drawingResponsePage.drawingToolWrapper())
+            });
+
+            it('Empty score input field and total score should be displayed', () => {
+                gradingViewPage.steps.verifyGradingViewScore('', 10);
+            });
+
+            it('Accessibility of grading view', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(drawingResponsePage.studentViewUpperCanvas().parents('.extended__drawing-tool'));
+            });
+        });
+    }
+
+    if (views.includes('Correct answer view')) {
+        describe('Correct answer view contents', { tags: 'smoke' }, () => {
+            abortEarlySetup();
+            before(() => {
+                cy.log('Navigating to drawing response question type');
+                drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+                cy.barsPreLoaderWait();
+                drawingResponsePage.steps.addQuestionInstructions();
+                drawingResponsePage.steps.allotPoints(10);
+                drawingResponsePage.steps.clickOnSaveQuestionButton();
+                utilities.verifyElementVisibilityState(itemPreviewPage.referenceID(), 'visible');
+                //Global variable issue, not working inside before
+                itemPreviewPage.referenceID()
+                    .invoke('text')
+                    .then(($refID) => {
+                        itemReferenceID = $refID
+                        cy.visit(`/item-engine/demo/render-item/correct-answer-view/${utilities.base64Encoding(itemReferenceID)}`);
+                    });
+            });
+
+            it('Question instructions should be visible', () => {
+                utilities.verifyTextContent(correctAnswerViewPage.correctAnswerViewQuestionInstructions(), 'Which of the following is the major contributor to increased carbon dioxide levels because of urbanization? Select your answer from the options below.');
+                utilities.verifyElementVisibilityState(correctAnswerViewPage.correctAnswerViewQuestionInstructions(), 'visible');
+            });
+
+            it('\'This is a manual scored question\' help text should be displayed in the correct answer view', () => {
+                utilities.verifyTextContent(correctAnswerViewPage.manualScoredQuestionHelpText(), 'This is a manual scored question.');
+                utilities.verifyElementVisibilityState(correctAnswerViewPage.manualScoredQuestionHelpText(), 'visible');
+            });
+
+            it('The points alloted to the question should be displayed', () => {
+                correctAnswerViewPage.steps.verifyAvailablePoints(10);
+            });
+
+            //Need to add CSS and A11y here once updated designs are available for correct answer
+        });
+    }
+});

package/cypress/e2e/ILC/DrawingResponse/drawingResponsePageHeaderSection.js

@@ -0,0 +1,74 @@
+import { dialogBoxBase, drawingResponsePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+
+describe('Create item page - Drawing Response: Header section and Saving question', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Header section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+        });
+
+        drawingResponsePage.tests.verifyCreateQuestionPageQuestionTypeHeader('Drawing Response');
+    });
+
+    describe('Tabs section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+        });
+
+        drawingResponsePage.tests.verifyTabsSection();
+    });
+
+    describe('Cancel button', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+        });
+
+        drawingResponsePage.tests.verifyCancelButton('Drawing Response');
+    });
+
+    describe('Save Question button', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+        });
+
+        describe('Validation error messages', () => {
+            dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton();
+
+            it('Validation error messages should be displayed below required input fields', () => {
+                drawingResponsePage.steps.verifyQuestionInstructionsErrorMessage();
+                drawingResponsePage.steps.verifyPointsFieldErrorMessage();
+            });
+
+            it('Validation error messages should disappear when required input fields are filled', () => {
+                drawingResponsePage.steps.addTextInQuestionInstructionsInputField('Which of the following is the major contributor to increased carbon dioxide levels because of urbanization? Select your answer from the options below.');
+                drawingResponsePage.steps.allotPoints(10);
+                drawingResponsePage.steps.verifyErrorMessageIsNotDisplayed();
+            });
+
+            drawingResponsePage.tests.verifyCreateItemWrapperContentsA11y();
+        });
+
+        describe('Saving a question', () => {
+            it('Clicking on Save Question button the question should get saved and a snackbar with text \'Saved successfully!\' should be displayed', () => {
+                drawingResponsePage.steps.saveAQuestionAndVerifySnackbar();
+            });
+            drawingResponsePage.tests.verifySavedSuccessfullySnackbarCSSAndA11y();
+        });
+    });
+});