itemengine-cypress-automation 1.0.78 → 1.0.80

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

@@ -0,0 +1,565 @@
+import { drawingResponsePage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+
+const css = Cypress.env('css');
+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'];
+const patterns = ['Grid', 'Lines', 'Dots', 'Circular', 'Graph', 'Quadrant'];
+const orientationOptions = ['Portrait', 'Landscape', 'Square'];
+const imageAlternativeText = ['Grid pattern of evenly spaced horizontal and vertical lines', 'Line pattern of evenly spaced horizontal lines', 'Dot pattern of evenly spaced horizontal and vertical dots', 'Circular pattern of evenly spaced concentric circles', 'Graph pattern of evenly spaced horizontal and vertical lines', 'Quadrant pattern of evenly spaced horizontal and vertical lines'];
+
+describe('Create item page - Drawing response: Background: Blank canvas, Image, Pattern', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Background: Blank canvas', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Background\' label should be displayed', () => {
+            utilities.verifyInnerText(drawingResponsePage.backgroundLabel(), 'Background');
+            utilities.verifyElementVisibilityState(drawingResponsePage.backgroundLabel(), 'visible');
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/555185
+        it('\'Blank canvas\', \'Image\', \'Pattern\' radio buttons and labels should be displayed. \'Blank canvas\' radio button should be checked by default', () => {
+            utilities.verifyInnerText(drawingResponsePage.blankCanvasLabel(), 'Blank canvas');
+            utilities.verifyElementVisibilityState(drawingResponsePage.blankCanvasLabel(), 'visible');
+            utilities.verifyInnerText(drawingResponsePage.imageLabel(), 'Image');
+            utilities.verifyElementVisibilityState(drawingResponsePage.imageLabel(), 'visible');
+            utilities.verifyInnerText(drawingResponsePage.patternLabel(), 'Pattern');
+            utilities.verifyElementVisibilityState(drawingResponsePage.patternLabel(), 'visible');
+            drawingResponsePage.steps.verifyBlankCanvasRadioButtonIsSelected();
+        });
+
+        it('When the \'Blank canvas\' radio button is checked, 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.editTabDrawingToolbarOption(defaultToolbarAndControlOptions[index]), 'visible');
+            }
+            utilities.verifyElementDisabledClass(drawingResponsePage.drawingToolWrapper());
+        });
+
+        it('When the user updates any selection of the toolbar options and controls, the change should be reflected accordingly in the canvas', () => {
+            drawingResponsePage.steps.expandCustomizeToolbarOptionsAndControlsAccordion();
+            drawingResponsePage.steps.selectToolbarOptionsAndControlsFormattingOptionsTiles(['Rectangle']);
+            utilities.verifyElementVisibilityState(drawingResponsePage.editTabDrawingToolbarOption('Rectangle'), 'visible');
+        });
+
+        it('Below the canvas preview, \'Canvas width (px)\' and \'Canvas height (px)\' labels and input fields should be displayed.\'Canvas width (px)\' and \'Canvas height (px)\' input fields should be prefilled with 768px and 432px respectively', () => {
+            utilities.verifyInnerText(drawingResponsePage.canvasWidthLabel(), 'Canvas width (px)');
+            drawingResponsePage.steps.verifyCanvasWidthInputFieldValue(768);
+            utilities.verifyInnerText(drawingResponsePage.canvasHeightLabel(), 'Canvas height (px)');
+            drawingResponsePage.steps.verifyCanvasHeightInputFieldValue(432);
+        });
+
+        it('\'Aspect ratio\' and \'Reset dimensions\' buttons should be displayed, by default aspect ratio should be locked and reset dimensions should be disabled', () => {
+            utilities.verifyElementVisibilityState(drawingResponsePage.aspectRatioButton(), 'visible');
+            drawingResponsePage.steps.verifyAspectRatioButtonIsLocked();
+            utilities.verifyElementVisibilityState(drawingResponsePage.resetDimensionsButton(), 'visible');
+            drawingResponsePage.steps.verifyResetDimensionsButtonIsDisabled();
+        });
+
+        it('When the user updates the dimensions of the canvas by updating the \'Canvas width (px)\' input field value, the dimensions of the canvas should be updated in the edit tab', () => {
+            drawingResponsePage.steps.enterTextInCanvasWidthInputField(600);
+            cy.log('Adding wait for values to be updated');
+            cy.wait(2000);
+            drawingResponsePage.steps.verifyCanvasWidthInEditTab(600);
+        });
+
+        it('When the user updates the dimensions of the canvas by updating the \'Canvas height (px)\' input field value, the dimensions of the canvas should be updated in the edit tab', () => {
+            drawingResponsePage.steps.enterTextInCanvasHeightInputField(400);
+            cy.log('Adding wait for values to be updated');
+            cy.wait(2000);
+            drawingResponsePage.steps.verifyCanvasHeightInEditTab(400);
+        });
+
+        it('When the user updates the dimensions of the canvas by updating the \'Canvas width (px)\' input field value, the dimensions of the canvas should be updated in the preview tab', () => {
+            drawingResponsePage.steps.enterTextInCanvasWidthInputField(500);
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.verifyCanvasWidthInPreviewTab(500);
+        });
+
+        it('When the user updates the dimensions of the canvas by updating the \'Canvas height (px)\' input field value, the dimensions of the canvas should be updated in the preview tab', () => {
+            drawingResponsePage.steps.switchToEditTab();
+            drawingResponsePage.steps.enterTextInCanvasHeightInputField(300);
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.verifyCanvasHeightInPreviewTab(300);
+            cy.log('Post step: Switching back to edit tab')
+            drawingResponsePage.steps.switchToEditTab();
+        });
+
+        it('When aspect ratio is locked and user changes the value in width input field, the height input field should also be updated accordingly and dimensions of the canvas should be updated accordingly', () => {
+            drawingResponsePage.steps.enterTextInCanvasWidthInputField(600);
+            drawingResponsePage.steps.verifyCanvasHeightInputFieldValue(338);
+            drawingResponsePage.steps.switchToPreviewTab();
+            drawingResponsePage.steps.verifyCanvasWidthInPreviewTab(600);
+            drawingResponsePage.steps.verifyCanvasHeightInPreviewTab(338);
+            cy.log('Post step: Switching back to edit tab')
+            drawingResponsePage.steps.switchToEditTab();
+        });
+
+        it('When the user unlocks the aspect ratio button and changes the value in the width input field, the height input field should not change', () => {
+            drawingResponsePage.steps.unlockAspectRatio();
+            drawingResponsePage.steps.enterTextInCanvasWidthInputField(500);
+            drawingResponsePage.steps.verifyCanvasHeightInputFieldValue(338);
+        });
+
+        it('When the user hovers over the \'Unlocked aspect ratio\' button, a tooltip \'Locked aspect ratio\' should be displayed and on moving away the focus, the tooltip should disappear', () => {
+            drawingResponsePage.aspectRatioButton()
+                .verifyTooltip('Unlocked aspect ratio');
+        });
+
+        it('CSS of unlock aspect ratio button and enabled reset button', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.aspectRatioButton().find('g path'), {
+                'stroke': css.color.figDefaultComponentBorder
+            });
+            utilities.verifyCSS(drawingResponsePage.resetDimensionsButton().find('svg path').eq(1), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of unlock aspect ratio button and enabled reset button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.aspectRatioButton().parent('.lock-reset-icon-wrapper'));
+            cy.checkAccessibility(drawingResponsePage.resetDimensionsButton().parent('.lock-reset-icon-wrapper'));
+        });
+
+        it('When the user locks the aspect ratio button and changes the value in the width input field, the height input field should be updated accordingly to maintain the updated aspect ratio', () => {
+            drawingResponsePage.steps.lockAspectRatio();
+            drawingResponsePage.steps.enterTextInCanvasWidthInputField(700);
+            drawingResponsePage.steps.verifyCanvasHeightInputFieldValue(394);
+        });
+
+        it('When the user edits the height or width of the canvas, then the \'Reset dimensions\' button should be enabled', () => {
+            utilities.verifyElementNotDisabled(drawingResponsePage.resetDimensionsButton());
+        });
+
+        it('When the user hovers over the \'Locked aspect ratio\' button, a tooltip \'Locked aspect ratio\' should be displayed and on moving away the focus, the tooltip should disappear', () => {
+            drawingResponsePage.aspectRatioButton()
+                .verifyTooltip('Locked aspect ratio');
+        });
+
+        it('When the user hovers over the \'Reset image size\' button, a tooltip \'Reset image size\' should be displayed and on moving away the focus, the tooltip should disappear', () => {
+            drawingResponsePage.resetDimensionsButton()
+                .verifyTooltip('Reset image size');
+        });
+
+        it('Accessibility of enabled reset dimension button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.resetDimensionsButton().parent('.lock-reset-icon-wrapper'));
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/553550
+        it('When the user selects the \'Reset dimensions\' button the height and width should be reset to the original value', () => {
+            drawingResponsePage.steps.resetDimensions();
+            drawingResponsePage.steps.verifyCanvasWidthInputFieldValue(768);
+            drawingResponsePage.steps.verifyCanvasHeightInputFieldValue(432);
+        });
+
+        it('CSS of Background section and blank canvas contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.backgroundLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.hoverOverElement(drawingResponsePage.aspectRatioButton());
+            utilities.verifyCSS(drawingResponsePage.tooltipText(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.tooltipBg
+            });
+            utilities.hoverAwayFromElement(drawingResponsePage.aspectRatioButton());
+            utilities.verifyCSS(drawingResponsePage.blankCanvasLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(drawingResponsePage.blankCanvasRadioButton().parent().find('svg'), {
+                'fill': css.color.activeButtons,
+            });
+            utilities.verifyCSS(drawingResponsePage.aspectRatioButton().find('g path'), {
+                'stroke': css.color.activeButtons
+            });
+            utilities.verifyCSS(drawingResponsePage.canvasWidthLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(drawingResponsePage.canvasHeightLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(drawingResponsePage.canvasWidthInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(drawingResponsePage.canvasHeightInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of Background section and blank canvas contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.resetDimensionsButton().parents('.canvas-control-wrapper'));
+        });
+    });
+
+    describe('Background: Image', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When the user checks the \'Image\' radio button, a file upload section should be displayed.', () => {
+            drawingResponsePage.steps.selectImageRadioButton();
+            utilities.verifyElementVisibilityState(drawingResponsePage.fileUploadSection(), 'visible');
+        });
+
+        it('\'Upload\' label should be displayed', () => {
+            utilities.verifyInnerText(drawingResponsePage.uploadLabel(), 'Upload');
+            utilities.verifyElementVisibilityState(drawingResponsePage.uploadLabel(), 'visible');
+        });
+
+        it('\'File name\' label should be displayed', () => {
+            utilities.verifyInnerText(drawingResponsePage.fileNameLabel(), 'File name');
+            utilities.verifyElementVisibilityState(drawingResponsePage.fileNameLabel(), 'visible');
+        });
+
+        it('\'Choose file\' button should be displayed', () => {
+            utilities.verifyInnerText(drawingResponsePage.chooseFileButton(), 'Choose file');
+            utilities.verifyElementVisibilityState(drawingResponsePage.chooseFileButton(), 'visible');
+        });
+
+        it('By default \'No file chosen\' text should be displayed below the \'File name\' label.', () => {
+            utilities.verifyInnerText(drawingResponsePage.noFileChosenLabel(), 'No file chosen');
+            utilities.verifyElementVisibilityState(drawingResponsePage.noFileChosenLabel(), 'visible');
+        });
+
+        it('CSS of \'File upload\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.uploadLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(drawingResponsePage.fileNameLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(drawingResponsePage.noFileChosenLabel(), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(drawingResponsePage.chooseFileButton(), {
+                'background-color': css.color.transparent,
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'File upload\' section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.fileUploadSection());
+        });
+
+        it('When the user adds an image file and file upload is inprogress, file name and progress bar should be displayed below \'File name\' label. Progress bar should disappear once file is uploaded', () => {
+            drawingResponsePage.steps.uploadFile('uploads/image.png');
+            utilities.verifyElementVisibilityState(drawingResponsePage.fileUploadProgressBar(), 'visible');
+            utilities.verifyInnerText(drawingResponsePage.uploadedFileNameLabel(), 'image.png');
+            utilities.verifyElementVisibilityState(drawingResponsePage.uploadedFileNameLabel(), 'visible');
+            utilities.verifyElementVisibilityState(drawingResponsePage.fileUploadProgressBar(), 'notExist');
+        });
+
+        it('CSS of progress bar and file name when file upload is in progress', { tags: 'css' }, () => {
+            drawingResponsePage.steps.uploadFile('uploads/sample.jpg');
+            drawingResponsePage.fileUploadProgressBar()
+                .verifyPseudoClassBeforeProperty('background-color', css.color.fileUploadProgressBarFill);
+        });
+
+        it('Accessibility of progress bar and file name when file upload is in progress', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.fileUploadSection());
+        });
+
+        it('When the user clicks on \'Choose file\' button again and upload another image file, previously uploaded image file should get replaced with new image file', () => {
+            drawingResponsePage.steps.uploadFile('uploads/sample1.jpg');
+            utilities.verifyInnerText(drawingResponsePage.uploadedFileNameLabel(), 'sample1.jpg');
+            utilities.verifyElementVisibilityState(drawingResponsePage.uploadedFileNameLabel(), 'visible');
+        });
+
+        it('When the user uploads a file that is not supported, following error message should be displayed: \'Error: The file type is not supported. Please upload a file with the following supported formats: JPG, PNG, GIF, SVG.\'', () => {
+            drawingResponsePage.steps.uploadFile('uploads/sample.mp4')
+            utilities.verifyInnerText(drawingResponsePage.errorMessage(), 'Error: The file type is not supported. Please upload a file with the following supported formats: JPG, PNG, GIF, SVG.');
+            utilities.verifyElementVisibilityState(drawingResponsePage.errorMessage(), 'visible');
+        });
+
+        drawingResponsePage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When the user uploads supported format of image file, error message should disappear', () => {
+            drawingResponsePage.steps.uploadFile('uploads/sample2.jpg');
+            utilities.verifyElementVisibilityState(drawingResponsePage.errorMessage(), 'hidden');
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/555227
+        it('When the user has uploaded an image, an \'Image properties\' section should be displayed with title \'Image properties\'', () => {
+            utilities.verifyInnerText(drawingResponsePage.imagePropertiesLabel(), 'Image properties');
+            utilities.verifyElementVisibilityState(drawingResponsePage.imagePropertiesLabel(), 'visible');
+        });
+
+        it('\'Fill image to canvas\' checkbox and label should be displayed. By default, the checkbox should be unchecked', () => {
+            utilities.verifyInnerText(drawingResponsePage.fillImageToCanvasLabel(), 'Fill image to canvas');
+            utilities.verifyElementVisibilityState(drawingResponsePage.fillImageToCanvasLabel(), 'visible');
+            drawingResponsePage.steps.verifyFillImageToCanvasCheckboxIsUnchecked();
+        });
+
+        it('User should be able to check the \'Fill image to canvas\' checkbox', () => {
+            drawingResponsePage.steps.checkFillImageToCanvasCheckbox();
+        });
+
+        it('\'Image alignment\' label and 3 alignment options: Top left, Center and Top right should be displayed. By default, \'Top left\' should be selected', () => {
+            utilities.verifyInnerText(drawingResponsePage.imageAlignmentLabel(), 'Image alignment');
+            utilities.verifyElementVisibilityState(drawingResponsePage.imageAlignmentLabel(), 'visible');
+            utilities.verifyInnerText(drawingResponsePage.topLeftOption(), 'Top left');
+            utilities.verifyElementVisibilityState(drawingResponsePage.topLeftOption(), 'visible');
+            utilities.verifyInnerText(drawingResponsePage.centerOption(), 'Center');
+            utilities.verifyElementVisibilityState(drawingResponsePage.centerOption(), 'visible');
+            utilities.verifyInnerText(drawingResponsePage.topRightOption(), 'Top right');
+            utilities.verifyElementVisibilityState(drawingResponsePage.topRightOption(), 'visible');
+            drawingResponsePage.steps.verifyTopLeftOptionAlignmentIsSelected();
+        });
+
+        it('The user should be able to change image alignment using these options', () => {
+            drawingResponsePage.steps.clickOnCenterOptionAlignment();
+            drawingResponsePage.steps.verifyCenterOptionAlignmentIsSelected();
+        });
+
+        it('\'Opacity\' label, a slider and opacity input field should be displayed. By default, the slider and the input field value should be 100%', () => {
+            utilities.verifyInnerText(drawingResponsePage.opacityLabel(), 'Opacity');
+            utilities.verifyElementVisibilityState(drawingResponsePage.opacityLabel(), 'visible');
+            drawingResponsePage.steps.verifyOpacitySliderValue('100');
+            drawingResponsePage.steps.verifyOpacityInputFieldValue('100');
+            utilities.verifyElementVisibilityState(drawingResponsePage.opacitySlider(), 'visible');
+            utilities.verifyElementVisibilityState(drawingResponsePage.opacityInputField(), 'visible');
+        });
+
+
+        it('When the user changes the opacity slider value, value in the opacity input field should also change', () => {
+            drawingResponsePage.steps.clickOnOpacitySlider();
+            drawingResponsePage.steps.verifyOpacitySliderValue(50);
+            drawingResponsePage.steps.verifyOpacityInputFieldValue(50);
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/553397
+        it('When the user changes value in the opacity input field, the slider value should also change accordingly', () => {
+            drawingResponsePage.steps.addInputToOpacityInputField(30);
+            drawingResponsePage.steps.verifyOpacityInputFieldValue(30);
+            drawingResponsePage.steps.verifyOpacitySliderValue(30);
+        });
+
+        it('Below the canvas preview, \'Canvas width (px)\' and \'Canvas height (px)\' labels and input fields should be displayed.\'Canvas width (px)\' and \'Canvas height (px)\' input fields should be prefilled with 768px and 432px respectively', () => {
+            utilities.verifyInnerText(drawingResponsePage.canvasWidthLabel(), 'Canvas width (px)');
+            drawingResponsePage.steps.verifyCanvasWidthInputFieldValue(768);
+            utilities.verifyInnerText(drawingResponsePage.canvasHeightLabel(), 'Canvas height (px)');
+            drawingResponsePage.steps.verifyCanvasHeightInputFieldValue(432);
+        });
+
+        it('\'Image alternative text\' label and input field should be displayed. By default, the input field should be blank', () => {
+            utilities.verifyInnerText(drawingResponsePage.imageAlternativeTextLabel(), 'Image alternative text');
+            utilities.verifyElementVisibilityState(drawingResponsePage.imageAlternativeTextLabel(), 'visible');
+            drawingResponsePage.steps.verifyImageAlternativeTextInputField('');
+            utilities.verifyElementVisibilityState(drawingResponsePage.imageAlternativeTextInputField(), 'visible');
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/555227
+        it('CSS of image canvas contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.imageLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(drawingResponsePage.imageRadioButton().parent().find('svg'), {
+                'fill': css.color.activeButtons,
+            });
+            utilities.verifyCSS(drawingResponsePage.imagePropertiesLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(drawingResponsePage.imageAlignmentLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            cy.log('Css of selected option button')
+            utilities.verifyCSS(drawingResponsePage.centerOption().find('button'), {
+                'color': css.color.activeButtons,
+                'border': `2px solid ${css.color.activeButtons}`
+            });
+            cy.log('Css of Unselected option button')
+            utilities.verifyCSS(drawingResponsePage.topLeftOption().find('button'), {
+                'color': css.color.liText,
+                'border': `2px solid ${css.color.figDefaultComponentBorder}`
+            });
+            utilities.verifyCSS(drawingResponsePage.fillImageToCanvasLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(drawingResponsePage.fillImageToCanvasCheckbox().parent().find('svg g g'), {
+                'fill': css.color.activeButtons,
+            });
+            utilities.verifyCSS(drawingResponsePage.opacityLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        it('Accessibility of image canvas contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.imageLabel().parents('.canvas-control-wrapper'));
+        });
+    });
+
+    describe('Background: Pattern', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to drawing response question type');
+            drawingResponsePage.steps.navigateToCreateQuestion('Drawing Response');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Pattern\' radio button should be unchecked by default', () => {
+            drawingResponsePage.steps.verifyPatternRadioButtonIsNotSelected();
+        });
+
+        it('User should be able to check the \'Pattern\' radio button', () => {
+            drawingResponsePage.steps.selectPatternRadioButton();
+        });
+
+        it(`\'Select pattern\' label should be displayed along with ${patterns.length} different pattern options: ${patterns.join('')}. Grid option should be selected by default`, () => {
+            utilities.verifyInnerText(drawingResponsePage.selectPatternLabel(), 'Select pattern');
+            utilities.verifyElementVisibilityState(drawingResponsePage.selectPatternLabel(), 'visible');
+            for (let index = 0; index < patterns.length; index++) {
+                utilities.verifyElementVisibilityState(drawingResponsePage.selectPatternOptionsButton(patterns[index]), 'visible');
+            };
+            drawingResponsePage.steps.verifySelectPatternOptionsLabel(patterns);
+            drawingResponsePage.steps.verifyPatternOptionIsSelected('Grid');
+        });
+
+        for (let index = 0; index < patterns.length; index++) {
+            it(`When ${patterns[index]} option is selected image alternative text input field should be prefilled with the text, \'${imageAlternativeText[index]}\' for pattern background`, () => {
+                drawingResponsePage.steps.selectPatternTypeOption(patterns[index]);
+                drawingResponsePage.steps.verifyPatternOptionIsSelected(patterns[index]);
+                drawingResponsePage.steps.verifyImageAlternativeTextInputField(imageAlternativeText[index]);
+            });
+        };
+
+        it(`Orientation label and dropdown should be displayed. By default, \'${orientationOptions[0]}\' should be selected`, () => {
+            utilities.verifyInnerText(drawingResponsePage.orientationLabel(), 'Orientation');
+            utilities.verifyInnerText(drawingResponsePage.orientationDropdown(), orientationOptions[0]);
+            utilities.verifyElementVisibilityState(drawingResponsePage.orientationDropdown(), 'visible');
+        });
+
+        it(`When the user expands the \'Orientation\' dropdown, a list of ${orientationOptions.length} should be displayed: ${orientationOptions.join('')}`, () => {
+            drawingResponsePage.steps.expandOrientationDropdown();
+            let dropdownOptions = orientationOptions;
+            dropdownOptions.forEach((option) => {
+                utilities.verifyInnerText(drawingResponsePage.orientationDropdownListOptions(option), option)
+            });
+        });
+
+        it('CSS of orientation type dropdown in active state', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.orientationDropdownListOptions(orientationOptions[0]), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            })
+            utilities.verifyCSS(drawingResponsePage.orientationDropdownListOptions(orientationOptions[1]), {
+                'background-color': css.color.transparent
+            })
+        });
+
+        it('Accessibility of orientation type dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.dropdownList())
+        });
+
+        it('Clicking outside orientation type dropdown menu should close the dropdown menu', () => {
+            cy.log('Clicking on grid pattern button to close the dropdown menu')
+            drawingResponsePage.steps.selectPatternTypeOption('Grid');
+            utilities.verifyElementVisibilityState(drawingResponsePage.orientationDropdownListOptions(), 'notExist')
+        });
+
+        it('CSS of orientation type section label and dropdown', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.orientationLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(drawingResponsePage.orientationDropdown().find('.dropdown-label-text'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('\'Canvas width (px)\' label and input field should be displayed.\'Canvas width (px)\' input field should be prefilled with 372px for portrait mode', () => {
+            utilities.verifyInnerText(drawingResponsePage.canvasWidthLabel(), 'Canvas width (px)');
+            drawingResponsePage.steps.verifyCanvasWidthInputFieldValue(372);
+        });
+
+        it('When the user selects \'Landscape mode\', \'Canvas width (px)\' input field should be prefilled with 558px for landscape mode', () => {
+            drawingResponsePage.steps.expandOrientationDropdown();
+            drawingResponsePage.steps.selectOrientationTypeListOption('Landscape');
+            drawingResponsePage.steps.verifyCanvasWidthInputFieldValue(558);
+        });
+
+        it('When the user selects \'Square mode\', \'Canvas width (px)\' input field should be prefilled with 558px for square mode', () => {
+            drawingResponsePage.steps.expandOrientationDropdown();
+            drawingResponsePage.steps.selectOrientationTypeListOption('Square');
+            drawingResponsePage.steps.verifyCanvasWidthInputFieldValue(558);
+        });
+
+        it('CSS of pattern canvas contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(drawingResponsePage.patternLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(drawingResponsePage.patternRadioButton().parent().find('svg'), {
+                'fill': css.color.activeButtons,
+            });
+            utilities.verifyCSS(drawingResponsePage.selectPatternLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(drawingResponsePage.selectPatternOptionsLabel().eq(0), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(drawingResponsePage.selectPatternOptionsButton('Grid'), {
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+            });
+            cy.log('Css of selected icon')
+            utilities.verifyCSS(drawingResponsePage.selectPatternOptionsButton('Grid').find('path').eq(2), {
+                'fill': css.color.primaryBtnBg
+            });
+        });
+
+        it('Accessibility of pattern canvas contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(drawingResponsePage.selectPatternOptionsButton('Grid').parents('[class*="CanvasControlsstyles__PatternSelectionWrapper"]'));
+        });
+    });
+});