itemengine-cypress-automation 1.0.351-feature-thinkSphere-8768c9c.0 → 1.0.351-miscellaneous-questions-r3-b08db04.0

package/cypress/pages/components/fillInTheGapsTextCommonComponent.js

@@ -105,7 +105,7 @@ const steps = {
             utilities.getNthElement(fillInTheGapsTextCommonComponent.answerInputFieldSpecifyCorrectAnswerSection(), responseIndex)
                 .clear();
             utilities.getNthElement(fillInTheGapsTextCommonComponent.answerInputFieldSpecifyCorrectAnswerSection(), responseIndex)
-                .type(responseText, { delay: 500 });
+                .type(responseText, { delay: 0 });
             utilities.getNthElement(fillInTheGapsTextCommonComponent.answerInputFieldSpecifyCorrectAnswerSection(), responseIndex)
                 .click();
             utilities.getNthElement(fillInTheGapsTextCommonComponent.answerInputFieldSpecifyCorrectAnswerSection(), responseIndex)
@@ -474,7 +474,8 @@ const steps = {
      */
     focusInAndFocusOutOfResponseAnswerInputFieldSpecifyCorrectAnswer: (answerFieldIndex) => {
         utilities.getNthElement(fillInTheGapsTextCommonComponent.answerInputFieldSpecifyCorrectAnswerSection(), answerFieldIndex)
-            .click()
+            .click();
+        utilities.getNthElement(fillInTheGapsTextCommonComponent.answerInputFieldSpecifyCorrectAnswerSection(), answerFieldIndex)
             .blur();
     },
 
@@ -779,8 +780,7 @@ const steps = {
         utilities.getNthElement(fillInTheGapsTextCommonComponent.responseAccordionAnswerInputFieldWrapper(), answerFieldIndex)
             .within(() => {
                 fillInTheGapsTextCommonComponent.answerInputFieldSpecifyCorrectAnswerSection()
-                    .clear()
-                    .blur();
+                    .clear();
             });
     },
 
@@ -908,10 +908,9 @@ const steps = {
 
 const tests = {
     verifySetLimitSectionErrorConditionsForMinAndMaxCharacterInputFields: () => {
-        it('When the user clears the minimum character limit input field and focuses out of it, then error message \'Error: Minimum character limit is required\' should be displayed below the input field', () => {
+        it('When the user clears the minimum character limit input field and focuses out of it, then error message should not be displayed', () => {
             fillInTheGapsTextCommonComponent.steps.clearAndFocusOutOfMinimumCharacterLimitInputField();
-            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Minimum character limit is required.');
-            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
         });
 
         commonComponents.tests.verifyErrorMessageCSSAndA11y();
@@ -921,10 +920,9 @@ const tests = {
             commonComponents.steps.verifyErrorMessageIsNotDisplayed();
         });
 
-        it('When the user clears the maximum character limit input field and focuses out of it, then error message \'Error: Maximum character limit is required.\' should be displayed below the input field', () => {
+        it('When the user clears the maximum character limit input field and focuses out of it, then error message should not be displayed', () => {
             fillInTheGapsTextCommonComponent.steps.clearAndFocusOutOfMaximumCharacterLimitInputField();
-            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Maximum character limit is required.');
-            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
         });
 
         it('When the user enters value in maximum character limit input field then the error message should disappear', () => {
@@ -932,10 +930,9 @@ const tests = {
             commonComponents.steps.verifyErrorMessageIsNotDisplayed();
         });
 
-        it('When the user sets minimum limit input field value greater than maximum limit input field value then error message \'Error: Minimum limit must be less than or equal to maximum limit.\' and \'Error: Maximum limit must be greater than or equal to minimum limit.\'should be displayed below the minimum and maximum input field respectively', () => {
+        it('When the user sets minimum limit input field value greater than maximum limit input field value then error message should not be displayed', () => {
             fillInTheGapsTextCommonComponent.steps.setMinimumLimit(45);
-            fillInTheGapsTextCommonComponent.steps.verifyMaximumLimitErrorMessage();
-            fillInTheGapsTextCommonComponent.steps.verifyMinimumLimitErrorMessage();
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
         });
 
         commonComponents.tests.verifyErrorMessageCSSAndA11y();
@@ -945,10 +942,9 @@ const tests = {
             commonComponents.steps.verifyErrorMessageIsNotDisplayed();
         });
 
-        it('When the user sets maximum limit input field value less than minimum limit input field value then error message \'Error: Minimum limit must be less than or equal to maximum limit.\' and \'Error: Maximum limit must be greater than or equal to minimum limit.\'should be displayed below the minimum and maximum input field respectively', () => {
+        it('When the user sets maximum limit input field value less than minimum limit input field value then error message should not be displayed', () => {
             fillInTheGapsTextCommonComponent.steps.setMaximumLimit(26);
-            fillInTheGapsTextCommonComponent.steps.verifyMaximumLimitErrorMessage();
-            fillInTheGapsTextCommonComponent.steps.verifyMinimumLimitErrorMessage();
+            commonComponents.steps.verifyErrorMessageIsNotDisplayed();
         });
 
         it('When the user sets maximum limit input field value greater than or equal to minimum limit input field value then error message should disappear', () => {
@@ -1008,8 +1004,7 @@ const tests = {
 
         it('When user enters zero in maximum limit input field, then error message \'Error: Maximum limit must be greater than 0.\' should be displayed', () => {
             fillInTheGapsTextCommonComponent.steps.setMaximumLimit(0);
-            utilities.verifyInnerText(commonComponents.errorMessage().eq(1), 'Error: Maximum limit must be greater than 0.');
-            utilities.verifyElementVisibilityState(commonComponents.errorMessage().eq(1), 'visible');
+            commonComponents.steps.verifyErrorMessageIsNotDisplayed();
         });
 
         it('When user enters limit more than zero in maximum limit input field, then error message should disappear', () => {
@@ -1017,10 +1012,9 @@ const tests = {
             commonComponents.steps.verifyErrorMessageIsNotDisplayed();
         });
 
-        it('When user enters minimum limit more than maximum limit then error messages should be displayed and when user enters equal value then the error message should disappear', () => {
+        it('When user enters minimum limit more than maximum limit then error messages should not be displayed', () => {
             fillInTheGapsTextCommonComponent.steps.setMinimumLimit(60);
-            utilities.verifyInnerText(commonComponents.errorMessage().eq(0), 'Error: Minimum limit must be less than or equal to Maximum limit.');
-            utilities.verifyInnerText(commonComponents.errorMessage().eq(1), 'Error: Maximum limit must be greater than or equal to Minimum limit.');
+            commonComponents.steps.verifyErrorMessageIsNotDisplayed();
             fillInTheGapsTextCommonComponent.steps.setMaximumLimit(60);
             commonComponents.steps.verifyErrorMessageIsNotDisplayed();
         });
@@ -1246,9 +1240,9 @@ const tests = {
             utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsTextCommonComponent.responseAccordionLabel(), 1), 'Response 2');
         });
 
-        it('When user focuses in and out of the response accordion \'Answer\' input field, \'Error: Answer is required.\' error message should be displayed', () => {
+        it('When user focuses in and out of the response accordion \'Answer\' input field, error message should not be displayed', () => {
             fillInTheGapsTextCommonComponent.steps.focusInAndFocusOutOfResponseAnswerInputFieldSpecifyCorrectAnswer(0, 0);
-            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
         });
 
         it('When gives an input to \'Answer\' input field, then error message should disappear', () => {
@@ -1424,10 +1418,10 @@ const tests = {
             utilities.verifyElementVisibilityState(fillInTheGapsTextCommonComponent.responseAccordionAddAlternateButtonLabel(), 'visible');
         });
 
-        it('When user has not entered text inside answer input field and clicks on \'Add alternate\' answer then \'Error: Answer is required.\' error message should be displayed', () => {
-            fillInTheGapsTextCommonComponent.steps.addAlternateAnswerInResponseAccordion(0);
-            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Answer is required.');
-            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
+        it('When user has not entered text inside answer input field and clicks on \'Add alternate\' button, then the button should be disabled and \'Answer is required\' tooltip should be displayed', () => {
+            utilities.verifyElementDisabled(utilities.getNthElement(fillInTheGapsTextCommonComponent.responseAccordionAddAlternateButton(), 0).find('button'));
+            utilities.getNthElement(fillInTheGapsTextCommonComponent.responseAccordionAddAlternateButton(), 0)
+                .verifyTooltip('Answer is required');
         });
 
         it('When user enters text inside answer input field, then error message should disappear', () => {
@@ -1437,6 +1431,7 @@ const tests = {
 
         it('When the user clicks on the \'Add Alternate\' button, then one alternate answer input field should be displayed', () => {
             fillInTheGapsTextCommonComponent.steps.addAlternateAnswerInResponseAccordion(0);
+            utilities.triggerMouseout(fillInTheGapsTextCommonComponent.responseAccordionAddAlternateButton());
             utilities.verifyElementCount(fillInTheGapsTextCommonComponent.answerInputFieldSpecifyCorrectAnswerSection(), 2);
             utilities.verifyElementVisibilityState(fillInTheGapsTextCommonComponent.responseAccordionAddAlternateButton(), 'visible');
         });
@@ -1455,15 +1450,10 @@ const tests = {
             fillInTheGapsTextCommonComponent.steps.verifyAnswerInputFieldPlaceholder(1);
         });
 
-        it('When the user clicks on the \'Add Alternate\' button without entering text in the newly added alternate answer input field, then an error message should be displayed, indicating \'Error: Answer is required.\'', () => {
+        it('When the user clicks on the \'Add Alternate\' button without entering text in the newly added alternate answer input field, new input field should be added and user should be able to add response in the input field', () => {
             fillInTheGapsTextCommonComponent.steps.addAlternateAnswerInResponseAccordion(0);
-            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Answer is required.');
             utilities.verifyElementCount(fillInTheGapsTextCommonComponent.answerInputFieldSpecifyCorrectAnswerSection(), 2);
-        });
-
-        it('When user adds text in alternate input field and clicks on \'Add alternate\' button, then then a third alternate answer input field should be displayed and error message should disappear', () => {
             fillInTheGapsTextCommonComponent.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 1, responseText: 'Leaf' }]);
-            commonComponents.steps.verifyErrorMessageIsNotDisplayed();
             fillInTheGapsTextCommonComponent.steps.addAlternateAnswerInResponseAccordion(0);
             utilities.verifyElementCount(fillInTheGapsTextCommonComponent.answerInputFieldSpecifyCorrectAnswerSection(), 3);
         });
@@ -1569,8 +1559,12 @@ const tests = {
 
         it('When user adds alternate answer input field, then accepted student input should be applied on both the response answer input fields in the response accordion', () => {
             fillInTheGapsTextCommonComponent.steps.addAlternateAnswerInResponseAccordion(0);
-            fillInTheGapsTextCommonComponent.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 0, responseText: 'Hi12' }]);
-            fillInTheGapsTextCommonComponent.steps.enterTextInAnswerInputFieldsSpecifyCorrectAnswerSection([{ responseIndex: 1, responseText: 'Hi12' }]);
+            utilities.getNthElement(fillInTheGapsTextCommonComponent.answerInputFieldSpecifyCorrectAnswerSection(), 0)
+                .should('not.be.disabled')
+                .type('Hi12');
+            utilities.getNthElement(fillInTheGapsTextCommonComponent.answerInputFieldSpecifyCorrectAnswerSection(), 1)
+                .should('not.be.disabled')
+                .type('Hi12');
             fillInTheGapsTextCommonComponent.steps.verifyTextInResponseAccordionAnswerInputField([{ responseIndex: 1, responseText: 'Hi12' }]);
         });
     },

package/cypress/pages/components/gridQuestionCommonComponent.js

@@ -1083,11 +1083,13 @@ const steps = {
 
     expandDefaultOptionDropdown: () => {
         gridQuestionCommonComponent.defaultOptionDropdown()
+            .trigger('mouseover')
             .click();
     },
 
     expandDefaultTextDropdown: () => {
         gridQuestionCommonComponent.defaultTextDropdown()
+            .trigger('mouseover')
             .click();
     },
 
@@ -1152,6 +1154,7 @@ const steps = {
     //Additional settings
     expandRowNumerationDropdown: () => {
         gridQuestionCommonComponent.rowNumerationDropdown()
+            .trigger('mouseover')
             .click();
     },
 
@@ -1384,6 +1387,7 @@ const steps = {
 
     expandRowSpacingDropdown: () => {
         gridQuestionCommonComponent.rowSpacingDropdown()
+            .trigger('mouseover')
             .click();
     },
 
@@ -1472,6 +1476,7 @@ const steps = {
     expandColumnSpacingDropdown: () => {
         gridQuestionCommonComponent.columnSpacingDropdown()
             .eq(0)
+            .trigger('mouseover')
             .click();
     },
 
@@ -1608,6 +1613,7 @@ const steps = {
 
     expandColumnDimensionsDropdown: () => {
         gridQuestionCommonComponent.columnDimensionsDropdown()
+            .trigger('mouseover')
             .click();
     },
 
@@ -2071,43 +2077,6 @@ const steps = {
 }
 
 const tests = {
-    verifyPreviewModesAndScoreWhenPointsAndCorrectAnswersIsNotSet: () => {
-        it('When the user has not set correct answer option(s) and alloted points, \'Student view\' radio button should be checked, \'Grading view\' button should not be checked, 0 points should be displayed and no correct or incorrect icons should be displayed in the preview tab', () => {
-            utilities.verifyInnerText(autoScoredScoringPreviewTab.studentViewRadioButtonLabel(), 'Student view');
-            utilities.verifyInnerText(autoScoredScoringPreviewTab.gradingViewRadioButtonLabel(), 'Grading view');
-            autoScoredScoringPreviewTab.studentViewRadioButton()
-                .should('be.checked');
-            autoScoredScoringPreviewTab.gradingViewRadioButton()
-                .should('not.be.checked');
-            autoScoredScoringPreviewTab.steps.checkManuallyScoredScoringLabel();
-            autoScoredScoringPreviewTab.steps.verifyCorrectIncorrectIconsNotExist();
-        });
-
-        it('CSS of Preview mode contents', { tags: 'css' }, () => {
-            utilities.verifyCSS(autoScoredScoringPreviewTab.studentViewRadioButtonLabel(), {
-                'color': css.color.labelText,
-                'font-size': css.fontSize.normal,
-                'font-weight': css.fontWeight.regular
-            });
-            utilities.verifyCSS(autoScoredScoringPreviewTab.gradingViewRadioButtonLabel(), {
-                'color': css.color.labelText,
-                'font-size': css.fontSize.normal,
-                'font-weight': css.fontWeight.regular
-            });
-            utilities.verifyCSS(autoScoredScoringPreviewTab.scoreLabelPreviewTab(), {
-                'color': css.color.codeBlockText,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.bold
-            });
-            utilities.verifyCSS(autoScoredScoringPreviewTab.studentViewRadioButton().parent().find('svg'), {
-                'fill': css.color.activeButtons
-            });
-            utilities.verifyCSS(autoScoredScoringPreviewTab.gradingViewRadioButton().parent().find('svg path'), {
-                'fill': css.color.uncheckedCheckbox
-            });
-        });
-    },
-
     verifyContentsOfSpecifyCorrectAnswerSection: () => {
         it(`When the user selects any scoring type except for manual scored, then the question grid should be displayed in the specify correct answer section`, () => {
             gridQuestionCommonComponent.steps.verifyTableCellPropertySpecifyCorrectAnswerSection({ row: 0, column: 0 }, 'None');
@@ -2752,6 +2721,8 @@ const tests = {
             it(`When user selects 'Column dimensions' ${option} option then ${option} spacing should be displayed between the columns`, () => {
                 gridQuestionCommonComponent.steps.expandColumnDimensionsDropdown();
                 gridQuestionCommonComponent.steps.selectColumnDimensionsDropdownOption(option);
+                utilities.verifyInnerText(gridQuestionCommonComponent.columnDimensionsDropdown(), option);
+                utilities.verifyElementVisibilityState(gridQuestionCommonComponent.columnDimensionsDropdown(), 'visible');
                 gridQuestionCommonComponent.steps.verifyColumnDimensionsSpecifyCorrectAnswer(option);
             });
         });

package/cypress/pages/components/imageCanvasComponent.js

@@ -38,6 +38,7 @@ const selectors = {
     },
     textResponse: () => cy.get('[class*="Canvasstyle__TextBoxContainer"] textarea'),
     canvasImage: () => cy.get('.canvas-image').eq(0),
+    canvasUploadedImage: () => cy.get('.canvas-image'),
     canvasImageInPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="ImageWrapper"] img'),
     imagePropertiesLabel: () => cy.get('[class*="ImagePropertiesstyles__SectionLabel"]'),
     fillImageToCanvasLabel: () => cy.get('[data-ngie-testid="fill-image-to-canvas-checkbox"] .MuiFormControlLabel-label'),
@@ -791,10 +792,10 @@ const tests = {
      * @param {"text container"|"dropzone"} response value for the error message
      */
     verifyInsertAndDeleteResponseAreaFunctionality: (response) => {
-        it(`When user clicks on close button for response container, then response container should be removed from canvas and error message should be displayed`, () => {
+        it(`When user clicks on close button for response container, then response container should be removed from canvas and error message should not be displayed`, () => {
             imageCanvasComponent.steps.removeResponseArea(0);
             utilities.verifyElementVisibilityState(imageCanvasComponent.responseAreaWrapper(), 'notExist');
-            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'exist');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
         });
 
         it('When user adds response container, then error message should disappear', () => {
@@ -847,13 +848,13 @@ const tests = {
             imageCanvasComponent.steps.verifyRedoButtonDisabled();
         });
 
-        it(`When the user reaches the initial state by performing undo actions, the 'Undo' button should get disabled and error message should be displayed`, () => {
+        it(`When the user reaches the initial state by performing undo actions, the 'Undo' button should get disabled and error message should not be displayed`, () => {
             for (let i = 0; i < 4; i++) {
                 imageCanvasComponent.steps.undoAction();
             }
             utilities.verifyElementCount(imageCanvasComponent.responseArea(), 0);
             imageCanvasComponent.steps.verifyUndoButtonDisabled();
-            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'exist');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
         });
 
         it('When the user reaches the latest state by performing redo actions, the \'Redo\' button should get disabled and error message should disappear', () => {
@@ -865,10 +866,10 @@ const tests = {
             commonComponents.steps.verifyErrorMessageIsNotDisplayed();
         });
 
-        it(`When user clicks on 'Clear all' button, then all response container should be deleted and error message should be displayed`, () => {
+        it(`When user clicks on 'Clear all' button, then all response container should be deleted and error message should not be displayed`, () => {
             imageCanvasComponent.steps.clearAllCanvas();
             utilities.verifyElementVisibilityState(imageCanvasComponent.responseAreaWrapper(), 'notExist');
-            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'exist');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
         });
     },
 

package/cypress/pages/components/mcqAdditionalSettingsBase.js

@@ -39,6 +39,7 @@ const selectors = {
 const steps = {
     expandOptionDesignDropdown: () => {
         mcqAdditionalSettingsBase.optionDesignDropdown()
+            .trigger('mouseover')
             .click();
     },
 
@@ -62,6 +63,7 @@ const steps = {
 
     expandOptionNumerationDropdown: () => {
         mcqAdditionalSettingsBase.optionNumerationDropdown()
+            .trigger('mouseover')
             .click();
     },
 
@@ -106,6 +108,8 @@ const steps = {
 
     expandNumberOfOptionsColumnDropdown: () => {
         mcqAdditionalSettingsBase.numberOfOptionColumnsDropdown()
+            .should('be.visible') // Ensure the dropdown is visible
+            .trigger('mouseover')
             .click();
     },
 

package/cypress/pages/components/questionInstructionsComponent.js

@@ -92,6 +92,13 @@ const steps = {
     clearQuestionInstructionsInputField: () => {
         questionInstructionsComponent.questionInstructionsInputField()
             .clear();
+    },
+ 
+    /**
+     * @description - verifies the visibilty of question instruction text in all views.
+     */
+    verifyVisibityOfQuestionInstructionsText: () => {
+        utilities.verifyElementVisibilityState(questionInstructionsComponent.questionInstructionsText(), 'visible');
     }
 }
 

package/cypress/pages/components/scoringSectionBaseEditTab.js

@@ -29,6 +29,8 @@ const selectors = {
         }
     },
     minimumPointsLabel: () => cy.get('[class*="min-score-points-label"]'),
+    questionLabel: () => cy.get('[class*="addResponseCKEditorstyles__TitleWrapper"]'),
+    questionWarningIcon: () => cy.get('[class*="addResponseCKEditorstyles__IconWrapper"]'),
     minimumPointsInputField: () => cy.get('.min-score-points-input-field input'),
 }
 
@@ -67,6 +69,7 @@ const steps = {
     expandScoringTypeDropdown: () => {
         utilities.scrollIntoView(scoringSectionBaseEditTab.scoringTypeDropdown());
         scoringSectionBaseEditTab.scoringTypeDropdown()
+            .trigger('mouseover')
             .click();
         utilities.verifyElementVisibilityState(commonComponents.dropdownList(), 'exist');
     },
@@ -159,8 +162,10 @@ const steps = {
 
     expandMinimumScoringDropdown: () => {
         scoringSectionBaseEditTab.minimumScoringDropdown()
+            .trigger('mouseover')
             .click();
         cy.wait(1500);
+        utilities.verifyElementVisibilityState(commonComponents.dropdownList(), 'exist');
     },
 
     /**

package/cypress/pages/contentBlocksPage.js

@@ -67,6 +67,8 @@ const selectors = {
 
 const steps = {
     ...createQuestionBasePage.steps,
+    ...createItemPage.steps,
+    ...commonComponents.steps,
 
     addGroupDivider: () => {
         contentBlocksPage.addGroupDividerButton()

package/cypress/pages/desmos3DGraphingPage.js

@@ -1,5 +1,5 @@
 import utilities from "../support/helpers/utilities";
-import { commonComponents, createQuestionBasePage, questionInstructionsComponent, additionalSettingsPanel, scoringSectionBaseEditTab, additionalSettingsAccessibilitySectionComponent, studentViewSettingsLabelComponent, hideExpressionListComponent } from "./components";
+import { commonComponents, createQuestionBasePage, questionInstructionsComponent, additionalSettingsPanel, scoringSectionBaseEditTab, additionalSettingsAccessibilitySectionComponent, studentViewSettingsLabelComponent, hideExpressionListComponent, toolSettingsComponent } from "./components";
 import { desmosToolComponent } from "./components/desmosToolComponent";
 const css = Cypress.env('css');
 
@@ -10,12 +10,13 @@ const selectors = {
     ...additionalSettingsPanel,
     ...questionInstructionsComponent,
     desmosGraphingTool: () => cy.get('[id*="desmos-graph-tool"]'),
-    desmosGraphingToolExpressionPanel: () => cy.get('[id*="desmos-graph-tool"] .dcg-exppanel-container.dcg-add-shadow'),
+    desmosGraphingToolExpressionPanel: () => cy.get('.dcg-exppanel-container'),
     studentViewSettingsLabel: () => cy.get('[class*="StudentViewWrapper"]'),
     hideExpressionListLabel: () => cy.get('[data-ngie-testid="hide-expression-list-checkbox"] .MuiFormControlLabel-label'),
     hideExpressionListCheckbox: () => cy.get('[data-ngie-testid="hide-expression-list-checkbox"] input'),
     showHideListButton: () => cy.get('.dcg-show-expressions-tab[role="button"]'),
     desmosGraphingWidthLabel: () => cy.get('[class*="LabelInputWrapper"]').eq(0),
+    desmosComponentGradingView: () => cy.get('[class*="DesmosGraphingPreviewstyles__DesmosWrapper"]'),
     desmosGraphingWidthInputField: () => cy.get('[class*="DimensionInputWrapper"] input').eq(0),
     desmosGraphingHeightLabel: () => cy.get('[class*="LabelInputWrapper"]').eq(1),
     desmosGraphingHeightInputField: () => cy.get('[class*="DimensionInputWrapper"] input').eq(1),
@@ -38,6 +39,16 @@ const selectors = {
     errorMessage: () => cy.get('.error-text-message'),
     resourceLinkPreviewTitle: () => cy.get('[class*="DesmosGraphingstyles__ResourceLinkPreviewLabel"]'),
     desmosComponent: () => cy.get('[class*="DesmosGraphingstyles__DesmosComponentWrapper"]'),
+    widthLabel: () => cy.get('[class*="StudentViewSettingsstyles__LabelInputWrapper"]').eq(0),
+    heightLabel: () => cy.get('[class*="StudentViewSettingsstyles__LabelInputWrapper"]').eq(1),
+    lockUnlockAspectRatioButton: () => cy.get('[class*="StudentViewSettingsstyles__LockIconWrapper"] button'),
+    resetButton: () => cy.get('[class*="StudentViewSettingsstyles__ResetIconWrapper"] button'),
+    desmosResourceCanvasEditTab: () => cy.get('[id*="desmos-3d-graph-tool"]'),
+    desmosResourceCanvasPreviewTab: () => cy.get('[class*="DesmosGraphingPreviewstyles__DesmosPreview"]'),
+    addIconDesmos: () => cy.get('.dcg-add-expression-container .dcg-icon-plus'),
+    expressionInputField: () => cy.get('.dcg-action-newmath'),
+    editIconPencil: () => cy.get('.icon-pencil'),
+    teacherGuidelinesInputField: () => cy.get('[class*="TeacherGuidelinesstyles__TextField"] input'),
 }
 
 const steps = {
@@ -47,6 +58,7 @@ const steps = {
     ...additionalSettingsPanel.steps,
     ...questionInstructionsComponent.steps,
     ...commonComponents.steps,
+    ...toolSettingsComponent.steps,
     verifyHideExpressionListCheckboxUnchecked: () => {
         desmos3DGraphingPage.hideExpressionListCheckbox()
             .should('not.be.checked');
@@ -322,10 +334,128 @@ const steps = {
     },
     clearInputToInsertResourceLinkInputField: () => {
         desmos3DGraphingPage.insertResourceLinkInputField()
-            .clear();
+            .click()
+        desmos3DGraphingPage.insertResourceLinkInputField()
+            .type('{selectall}{backspace}')
         cy.get('body')
             .click();
     },
+    verifyLockedStateOfLockUnlockAspectRatioButton: () => {
+        desmos3DGraphingPage.lockUnlockAspectRatioButton()
+            .should('have.attr', 'aria-label', 'Locked aspect ratio');
+    },
+    verifyUnlockedStateOfLockUnlockAspectRatioButton: () => {
+        desmos3DGraphingPage.lockUnlockAspectRatioButton()
+            .should('have.attr', 'aria-label', 'Unlocked aspect ratio');
+    },
+    /**
+     * @description add input to width input field
+     * @param {number} width Width to be set for geoGebra resource
+     */
+    addInputToWidthInputField: (width) => {
+        desmos3DGraphingPage.widthInputField()
+            .clear()
+            .type(width)
+            .blur();
+        utilities.verifyInputFieldValue(desmos3DGraphingPage.widthInputField(), width);
+    },
+    /**
+     * @description add input to height input field
+     * @param {number} height Height to be set for geoGebra resource
+     */
+    addInputToHeightInputField: (height) => {
+        desmos3DGraphingPage.heightInputField()
+            .clear()
+            .type(height)
+            .blur();
+        utilities.verifyInputFieldValue(desmos3DGraphingPage.heightInputField(), height);
+    },
+    /**
+     * Verify width of geoGebra resource canvas in edit tab
+     * @param {number} width Width of geoGebra resource canvas in edit tab
+     */
+    verifyCanvasWidthEditTab: (width) => {
+        utilities.verifyCSS(desmos3DGraphingPage.desmosResourceCanvasEditTab(), {
+            'width': `${width}px`
+        });
+    },
+    /**
+     * Verify height of geoGebra resource canvas in edit tab
+     * @param {number} height Height of geoGebra resource canvas in edit tab
+     */
+    verifyCanvasHeightEditTab: (height) => {
+        utilities.verifyCSS(desmos3DGraphingPage.desmosResourceCanvasEditTab(), {
+            'height': `${height}px`
+        });
+    },
+    clickOnResetButton: () => {
+        desmos3DGraphingPage.resetButton()
+            .click();
+    },
+    clickOnLockUnlockAspectRatioButton: () => {
+        desmos3DGraphingPage.lockUnlockAspectRatioButton()
+            .click();
+    },
+    /**
+ * Verify width of geoGebra resource canvas in preview tab
+ * @param {number} width Width of geoGebra resource canvas in preview tab
+ */
+    verifyCanvasWidthPreviewTab: (width) => {
+        utilities.verifyCSS(desmos3DGraphingPage.desmosResourceCanvasPreviewTab(), {
+            'width': `${width}px`
+        });
+    },
+    /**
+ * Verify height of geoGebra resource canvas in preview tab
+ * @param {number} height Height of geoGebra resource canvas in preview tab
+ */
+    verifyCanvasHeightPreviewTab: (height) => {
+        utilities.verifyCSS(desmos3DGraphingPage.desmosResourceCanvasPreviewTab(), {
+            'height': `${height}px`
+        });
+    },
+    /**
+ * @description Types a mathematical expression in the Desmos expression input field
+ * @param {string} expression The mathematical expression to type
+ */
+    typeExpression: (expression) => {
+        desmos3DGraphingPage.expressionInputField()
+            .click();
+        desmos3DGraphingPage.expressionInputField()
+            .type(expression);
+    },
+    /**
+    * @description Verifies that the specified expression is not present in the Desmos expression field
+    * @param {string} expression The expression that should not be present
+    */
+    verifyExpressionNotPresent: (expression) => {
+        desmos3DGraphingPage.expressionInputField()
+            .should('not.contain', expression);
+    },
+    editQuestionItemView: () => {
+        desmos3DGraphingPage.editIconPencil()
+        .click();
+    },
+    verifyFontSizeDropdown: (fontSize) => {
+        desmos3DGraphingPage.fontSizeDropdown()
+            .should('have.text', fontSize);
+    },
+    verifyTeacherGuidelinesInputField: (text) => {
+        desmos3DGraphingPage.additionalSettingsTeacherGuidelinesInputField()
+            .should('have.text', text);
+    },
+    verifySampleAnswerInputField: (text) => {
+        desmos3DGraphingPage.additionalSettingsSampleAnswerInputField()
+            .should('have.text', text);
+    },
+    verifyAcknowledgementsInputField: (text) => {
+        desmos3DGraphingPage.additionalSettingsAcknowledgementsInputField()
+            .should('have.text', text);
+    },
+    verifyFlagThisItemNonAccessibleCheckboxIsChecked: () => {
+        desmos3DGraphingPage.flagNonAccessibleCheckbox()
+            .should('be.checked');
+    },
 }
 
 const tests = {
@@ -337,7 +467,7 @@ const tests = {
     ...additionalSettingsAccessibilitySectionComponent.tests,
     ...studentViewSettingsLabelComponent.tests,
     ...hideExpressionListComponent.tests,
-    
+
     verifyGraphingQuestionSpecifyPredefinedExpressionContent: () => {
         it('When user selects a scoring type the contents of the Specify predefined expression should be displayed', () => {
             utilities.verifyElementVisibilityState(desmos3DGraphingPage.desmosGraphingTool(), 'exist');
@@ -358,6 +488,21 @@ const tests = {
         it('Accessibility of error message', { tags: 'a11y' }, () => {
             cy.checkAccessibility(commonComponents.nextGenCreateItemWrapper());
         });
+    },
+
+    verifyQuestionInstructionsInputFieldPreviewTab: () => {
+        it('When user has not entered any text in the Question instructions input field in the \'Edit\' tab then nothing should be displayed in the \'Preview\' tab', () => {
+            createQuestionBasePage.steps.switchToPreviewTab();
+            //Failing due to https://redmine.zeuslearning.com/issues/553382
+            utilities.verifyTextContent(questionInstructionsComponent.questionInstructionsText(), '')
+        });
+
+        it('When the user specifies question instructions, then the added question instructions should be displayed in the \'Preview\' tab', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            questionInstructionsComponent.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.');
+            createQuestionBasePage.steps.switchToPreviewTab();
+            utilities.verifyTextContent(questionInstructionsComponent.questionInstructionsTextPreviewTab(), 'Which of the following is the major contributor to increased carbon dioxide levels because of urbanization? Select your answer from the options below.');
+        });
     }
 }