itemengine-cypress-automation 1.0.373 → 1.0.374-IEI-5793-ffd832f.0

package/cypress/pages/components/chartsCommonComponent.js

@@ -31,7 +31,7 @@ const selectors = {
     previewTabGraphTitle: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartsPreviewstyles__TopWrapper"] .title-container'),
     previewTabXAxisLabelButton: () => cy.get('[class*="question-preview-wrapper"] [class*="ChartsPreviewstyles__PreviewWrapper"] [class*="ChartsPreviewstyles__BottomWrapper"] .title-container'),
     tickIconWrapper: () => cy.get('[class*="tick-icon-wrapper"] svg'),
-   chartsContainerPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .chart-container'),
+    chartsContainerPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .chart-container'),
     graphTitleCorrectAnswerSection: () => cy.get('[class*="question-preview-wrapper"] .chart-top-wrapper .title-container').eq(1),
     xAxisLabelCorrectAnswerSection: () => cy.get('[class*="question-preview-wrapper"] .chart-bottom-wrapper .title-container').eq(1),
     partialDifferentWeightsPointsInputFieldLabel: () => cy.get('[class*="Chartsstyles__PartialPointsWrapper"] .partial-points-input-label'),
@@ -257,7 +257,11 @@ const steps = {
      */
     verifyPartialEqualWeightsPointsPerResponseScore: (points) => {
         utilities.verifyInnerText(autoScoredScoringSectionMultiResponseType.partialEqualWeightsPointsPerResponseScore(), points);
-    }
+    },
+    verifyPoints: (points) => {
+        chartsCommonComponent.pointsInputField()
+            .should('have.value', points);
+    },
 }
 
 const tests = {

package/cypress/pages/components/ckEditorEquationEditorComponent.js

@@ -8,8 +8,9 @@ const selectors = {
     //Basic
     equationEditorIcon: () => cy.get('.cke_button__nextgeneqneditor_icon:visible'),
     equationEditorLabel: () => cy.get('[class*="EquationEditorstyles__Heading"]'),
-    okButton: () => cy.get('.action-button').eq(0),
-    cancelButton: () => cy.get('.action-button').eq(1),
+    okButton: () => cy.get('[title="OK"]'),
+    audioPlayerOkButton: () => cy.get('.save-action-btn-wrapper button').eq(0),
+    editorCancelButton: () => cy.get('[title="Cancel"]'),
     equationEditorPopUp: () => cy.get('[class*="EquationEditorstyles__EquationEditorContainer"]'),
     equationWrapper: () => cy.get('.cke_widget_ngie_equation [class*="NGMathJax"]'),
     equationInInputField: () => cy.get('[class*="ngie_latex"]').eq(0),
@@ -84,8 +85,8 @@ const steps = {
         return null;
     },
 
-    clickOnCancelButton: () => {
-        ckEditorEquationEditorComponent.cancelButton()
+    closeEquationEditor: () => {
+        ckEditorEquationEditorComponent.editorCancelButton()
             .click();
     },
 

package/cypress/pages/components/ckEditorInsertImageComponent.js

@@ -15,7 +15,7 @@ const selectors = {
     imageInfoButton: () => cy.get('[title="Image Info"]'),
     uploadButton: () => cy.get('[title="Upload"]'),
     //Image Info
-    urlLabel: () => cy.get('.dialog-input-label').eq(0),
+    imageUrlLabel: () => cy.get('.dialog-input-label').eq(0),
     urlInputField: () => cy.get('.cke_dialog_ui_input_text').eq(1),
     alternateTextLabel: () => cy.get('.dialog-input-label').eq(1),
     alternateTextInputField: () => cy.get('.cke_dialog_ui_input_text').eq(3),
@@ -37,7 +37,7 @@ const selectors = {
     fixedRadioLabel: () => cy.get('[class*="image-responsiveness-radio-wrapper"]').eq(4),
     //Alignment
     alignmentLabel: () => cy.get('.dialog-input-label').eq(7),
-    alignmentDropDown: () => cy.get('.cke_dialog_ui_input_select').eq(1),
+    alignmentDropDown: () => cy.get('.cke_dialog_ui_input_select').eq(3),
     alignmentOptions: (alignment = null) => {
         if (alignment) {
             return cy.get(`[class*="cke_dialog_ui_input_select"] option[value="${alignment}"]`)

package/cypress/pages/components/ckEditorInsertTableComponent.js

@@ -26,7 +26,7 @@ const selectors = {
 
     //Table Style
     tableStyleLabel: () => cy.get('.table_styles_header .cke_dialog_ui_html'),
-    borderLabel: () => cy.get('.cke_dialog_ui_vbox_child').eq(26),
+    tableBorderLabel: () => cy.get('.cke_dialog_ui_vbox_child').eq(26),
     clearAllTableStyle: () => cy.get('.clear_all_table_styles'),
 
     //Borders
@@ -90,7 +90,7 @@ const selectors = {
     heightPxInput: () => cy.get('.cke_dialog_ui_input_text').eq(7),
 
     //Alignment, Caption and Summary
-    alignmentLabel: () => cy.get('.dialog-input-label').eq(9),
+    tableAlignmentLabel: () => cy.get('.dialog-input-label').eq(9),
     alignmentDropDown: () => cy.get('.cke_dialog_ui_input_select').eq(2),
     captionLabel: () => cy.get('.dialog-input-label').eq(10),
     captionInputField: () => cy.get('.cke_dialog_ui_input_text').eq(15),
@@ -358,7 +358,7 @@ const steps = {
     },
 
     scrollingDownToAlignmentLabel: () => {
-        ckEditorInsertTableComponent.alignmentLabel()
+        ckEditorInsertTableComponent.tableAlignmentLabel()
             .scrollIntoView()
     },
 

package/cypress/pages/components/ckEditorLinkComponent.js

@@ -12,7 +12,7 @@ const selectors = {
     linkLabel: () => cy.get('.dialog-header-label'),
     linkPopUpWrapper: () => cy.get('.custom-link-wrapper'),
     urlInQuestionInstruction: () => cy.get('[data-cke-saved-href*="https"]'),
-    foxImageLinkUrlValueCheck: () => cy.get('[data-cke-saved-href*="https://cdn.pixabay.com/photo/2016/11/29/03/28/fox-1867062_960_720.jpg"]'),
+    foxImageLinkUrlValueCheck: () => cy.get('[href*="https://cdn.pixabay.com/photo/2016/11/29/03/28/fox-1867062_960_720.jpg"]'),
     urlInputField: () => cy.get('input[class*="cke_dialog_ui_input_text"]').eq(1),
     OkButton: () => cy.get('[title="OK"]'),
     //Link Info
@@ -24,8 +24,8 @@ const selectors = {
     linkTypeDropDown: () => cy.get('.cke_dialog_ui_input_select').eq(0),
     protocolLabel: () => cy.get('.dialog-input-label').eq(2),
     protocolDropDown: () => cy.get('.cke_dialog_ui_input_select').eq(1),
-    urlLabel: () => cy.get('.dialog-input-label').eq(3),
-    urlInputField: () => cy.get('.cke_dialog_ui_input_text').eq(3),
+    urlLabel: () => cy.get('.cke_dialog_ui_text .dialog-input-label').eq(1),
+    urlInputField: () => cy.get('.cke_dialog_ui_input_text input').eq(1),
     //Protocol
     protocolDropDown: () => cy.get('.dialog-input-area').eq(2),
     selectProtocolOptionDropdown: (protocolType = null) => {
@@ -55,8 +55,7 @@ const steps = {
 
     addURLInLinkPopUp: (text) => {
         ckEditorLinkComponent.urlInputField()
-            .type(text, { delay: 0 })
-            .blur();
+            .type(text, { delay: 0 });
     },
 
     addTextInDisplayText: (text) => {
@@ -72,7 +71,7 @@ const steps = {
 
     expandProtocolDropDown: () => {
         ckEditorLinkComponent.protocolDropDown()
-            .click({force: true});
+            .click({ force: true });
     },
 
     selectProtocolType: (protocolType) => {
@@ -122,12 +121,12 @@ const steps = {
             doc.addEventListener('click', () => {
                 setTimeout(function () { doc.location.reload() }, 5000);
             });
-        ckEditorLinkComponent.foxImageLinkUrlValueCheckPreviewTab()
+            ckEditorLinkComponent.foxImageLinkUrlValueCheckPreviewTab()
                 .click();
-         cy.verifyDownload(fileName);
+            cy.verifyDownload(fileName);
         });
     },
-    
+
 
     clickSendItToServerButton: () => {
         ckEditorLinkComponent.sendItToServerButton()

package/cypress/pages/components/colorPopupComponent.js

@@ -6,6 +6,7 @@ const selectors = {
     ...dialogBoxBase,
     colorBlock: () => cy.get('.color-picker-block'),
     colorSaturationPalette: () => cy.get('.react-colorful__saturation'),
+    alphaPicker : () => cy.get('.react-colorful__alpha'),
     colorSaturationPicker: () => cy.get('.react-colorful__saturation-pointer .react-colorful__pointer-fill'),
     colorHuePalette: () => cy.get('.react-colorful__hue'),
     colorHuePicker: () => cy.get('.react-colorful__hue-pointer .react-colorful__pointer-fill'),
@@ -97,6 +98,11 @@ const steps = {
             .click();
     },
 
+    clickInAlphaPicker: () => {
+        colorPopupComponent.alphaPicker()
+            .click();
+    },
+
     clickInColorHuePalette: () => {
         colorPopupComponent.colorHuePalette()
             .click();

package/cypress/pages/components/commonComponents.js

@@ -97,6 +97,10 @@ const steps = {
         utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'notExist');
     },
 
+    verifyErrorMessageDoesNotHaveText: () => {
+        commonComponents.errorMessage()
+            .should('not.have.text', 'Error:');
+    }
 }
 
 const tests = {

package/cypress/pages/components/createQuestionBasePage.js

@@ -147,9 +147,22 @@ const steps = {
                         utilities.verifyElementVisibilityState(commonComponents.warningIcon(), 'exist');
                     });
             }
+            else if (field === 'Please select a file type') {
+                // Upload Response Select File Type Accordion
+                cy.get('.edit-question-edit-tab-wrapper .ngie-accordion-summary')
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(commonComponents.warningIcon(), 'exist');
+                    });
+            } else if (field === 'Please enter text block') {
+                // Content Block Body Label
+                cy.get('.options-label')
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(commonComponents.warningIcon(), 'exist');
+                    });
+            }
         })
     },
-  
+
 
     clickOnEditQuestionButton: () => {
         createQuestionBasePage.editButton()

package/cypress/pages/components/defaultToolDropdown.js

@@ -32,7 +32,7 @@ const steps = {
 
 const tests = {
     verifyDefaultToolDropdown:(toolOptionsArray, defaultTool)=>{
-        const defaultSelectedTool = defaultTool || toolOptionsArray[0];
+        const defaultSelectedTool = defaultTool || toolOptionsArray[1];
         it(`\'Default tool\' label and dropdown should be displayed with \'${defaultSelectedTool}\' option selected by default`, () => {
             utilities.verifyInnerText(defaultToolDropdown.defaultToolDropdownLabel(), 'Default tool');
             utilities.verifyInnerText(defaultToolDropdown.defaultToolDropdown(), defaultSelectedTool);

package/cypress/pages/components/draggableOptionsSectionComponent.js

@@ -26,6 +26,7 @@ const selectors = {
 const steps = {
     expandDraggableOptionsLayoutDropdown: () => {
         draggableOptionsSectionComponent.draggableOptionsLayoutDropdown()
+            .trigger('mouseover')
             .click();
     },
 
@@ -35,6 +36,7 @@ const steps = {
      */
     selectOptionFromDraggableOptionsLayoutDropdown: (listOption) => {
         draggableOptionsSectionComponent.draggableOptionsLayoutDropdownListOptions(listOption)
+            .trigger('mouseover')
             .click();
     },
 

package/cypress/pages/components/editCategoryFlyout.js

@@ -23,9 +23,9 @@ const selectors = {
 }
 
 const steps = {
-    openEditCategoryFlyout: () => {
+    openEditCategoryFlyout: (categoryName = 'general') => {
         essayResponsePage.equationEditorSectionCategories()
-            .contains(`${equationEditorCategoriesAndSymbols['general'].displayName}`)
+            .contains(`${equationEditorCategoriesAndSymbols[categoryName].displayName}`)
             .parents('[id*="DraggableItem"]')
             .within(() => {
                 essayResponsePage.equationEditorSectionCategoriesEditIcon()

package/cypress/pages/components/equationEditorSectionCommonComponent.js

@@ -252,50 +252,35 @@ const tests = {
             equationEditorFlyout.steps.verifyCategoryIsDisplayedInEquationEditor(`${equationEditorCategoriesAndSymbols['greek'].displayName}`);
         });
 
-        it('On deselecting all the categories an error message should be displayed \'Error: Please select a category.\' and the preview tab Equation Editor flyout should be empty', () => {
-            cy.log('Pre step: Switching to Edit tab')
+        it('On deselecting all the categories, an error message "Error: Please select a category." should be displayed, and the preview tab Equation Editor flyout should be empty', () => {
+            cy.log('Pre step: Switching to Edit tab');
             equationEditorSectionCommonComponent.steps.switchToEditTab();
             if (questionType == 'essay response') {
-                //Need to remove this once https://redmine.zeuslearning.com/issues/577356 is resolved
+                // Need to remove this once https://redmine.zeuslearning.com/issues/577356 is resolved
                 equationEditorSectionCommonComponent.steps.expandCustomizeFormattingOptionsAccordion();
             }
             equationEditorSectionCommonComponent.steps.selectingCategories([`${equationEditorCategoriesAndSymbols['intermediate'].displayName}`, `${equationEditorCategoriesAndSymbols['primary'].displayName}`, `${equationEditorCategoriesAndSymbols['general'].displayName}`, `${equationEditorCategoriesAndSymbols['common'].displayName}`, `${equationEditorCategoriesAndSymbols['algebra'].displayName}`, `${equationEditorCategoriesAndSymbols['geo'].displayName}`, `${equationEditorCategoriesAndSymbols['compare'].displayName}`, `${equationEditorCategoriesAndSymbols['matrices'].displayName}`, `${equationEditorCategoriesAndSymbols['greek'].displayName}`, `${equationEditorCategoriesAndSymbols['keyPad'].displayName}`]);
-            utilities.verifyInnerText(equationEditorSectionCommonComponent.selectACategoryErrorMessage(), 'Error: Please select a category.');
-            cy.log('Switching to Preview tab')
+            utilities.verifyElementVisibilityState(equationEditorSectionCommonComponent.selectACategoryErrorMessage(), 'notExist');
+            cy.log('Switching to Preview tab');
             equationEditorSectionCommonComponent.steps.switchToPreviewTab();
             if (questionType == 'essay response') {
                 equationEditorSectionCommonComponent.steps.selectPreviewTabToolbarOption('Equation Editor');
-            }
-            else {
+            } else {
                 equationEditorSectionCommonComponent.steps.focusInResponseAnswerInputFieldPreviewTab(0);
             }
             utilities.verifyElementVisibilityState(equationEditorFlyout.dialogBox(), 'visible');
             utilities.verifyElementVisibilityState(equationEditorFlyout.categoryTabTitle(), 'notExist');
             utilities.verifyElementVisibilityState(equationEditorFlyout.categoryCharactersWrapper(), 'notExist');
-            cy.log('Post step: Switching to Edit tab')
+            cy.log('Post step: Switching to Edit tab');
             equationEditorSectionCommonComponent.steps.switchToEditTab();
             if (questionType == 'essay response') {
-                //Need to remove this once https://redmine.zeuslearning.com/issues/577356 is resolved
+                // Need to remove this once https://redmine.zeuslearning.com/issues/577356 is resolved
                 equationEditorSectionCommonComponent.steps.expandCustomizeFormattingOptionsAccordion();
-            };
-        });
-
-        //https://redmine.zeuslearning.com/issues/530205
-        it('CSS of error message', { tags: 'css' }, () => {
-            utilities.verifyCSS(equationEditorSectionCommonComponent.selectACategoryErrorMessage(), {
-                'color': css.color.errorText,
-                'font-size': css.fontSize.small,
-                'font-weight': css.fontWeight.regular
-            });
-        });
-
-        it('Accessibility of error message', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(equationEditorSectionCommonComponent.selectACategoryErrorMessage());
+            }
         });
 
-        it('When user selects any category then the error message should disappear', () => {
+        it('User should be able to select any category', () => {
             equationEditorSectionCommonComponent.steps.selectACategoryInEquationEditorSectionEditTab(`${equationEditorCategoriesAndSymbols['numPad'].displayName}`);
-            utilities.verifyElementVisibilityState(equationEditorSectionCommonComponent.selectACategoryErrorMessage(), 'notExist');
         });
     },
 

package/cypress/pages/components/fillInTheGapsDropdownCommonComponent.js

@@ -745,6 +745,34 @@ const steps = {
                 const clientWidth = $dropdown[0].clientWidth;
                 expect(scrollWidth).to.not.be.greaterThan(clientWidth);
             });
+    },
+
+    /**
+         * @description Verify the options of a dropdown in the specify correct answer section.
+         * @param {number} index Index of the dropdown.
+         * @param {string[]} optionsArray Array of expected options.
+         */
+    verifyDropdownOptionsSpecifyCorrectAnswerSection: (index, optionsArray) => {
+        fillInTheGapsDropdownCommonComponent.dropdownSpecifyCorrectAnswerSection()
+            .eq(index)
+            .click();
+        fillInTheGapsDropdownCommonComponent.dropdownListOptions()
+            .should('have.length', optionsArray.length)
+            .each(($option, optionIndex) => {
+                cy.wrap($option)
+                    .should('have.text', optionsArray[optionIndex]);
+            });
+    },
+
+    /**
+     * Verifies the contents of option fields within the options section.
+     * @param {Array<string>} optionsTextArray - An array of strings representing the expected text content for each option field.
+     */
+    verifyOptionFieldContent: (optionsTextArray) => {
+        optionsTextArray.forEach((option, optionIndex) => {
+            utilities.getNthElement(fillInTheGapsDropdownCommonComponent.dropdownOptionsInputField(), optionIndex)
+                .should('have.value', option);
+        });
     }
 }
 

package/cypress/pages/components/gridQuestionCommonComponent.js

@@ -44,6 +44,7 @@ const selectors = {
     optionsButton: () => cy.get('[class*="PreviewSelectionButton"]'),
     optionsButtonPreviewTab: () => cy.get('.preview-selection-grid [class*="PreviewSelectionButton"]'),
     gridPreviewTab: () => cy.get('.single-selection-grid-wrapper:visible'),
+    gridPrintPreviewTab: () => cy.get('[data-testid="print-preview-selection-grid-table"]'),
     gridSpecifyCorrectAnswerSection: () => cy.get('.set-correct-ans-selection-grid'),
     tableCell: () => cy.get('[class*="CellContainer"]'),
     tableCellWrapperSpecifyCorrectAnswerSection: () => cy.get('.set-correct-ans-selection-grid [class*="TableCellWrapper"]'),
@@ -351,6 +352,55 @@ const steps = {
         });
     },
 
+
+    /**
+     * Verifies the property of a cell in the print preview of a grid question component.
+     * @param {Object} cellPosition - The position of the cell to verify, containing row and column indices.
+     * @param {number} cellPosition.row - The row index of the cell.
+     * @param {number} cellPosition.column - The column index of the cell.
+     * @param {'None'|Heading'|'Subheading'|'Text'|'Radio button'|'Checkbox'|'Radio button with text'|'Checkbox with text'|'No radio button'|'No checkbox'} cellProperty - The property to verify for the cell.
+     * @throws {Error} If an invalid cellProperty is provided.
+     */
+    verifyTableCellPropertyPrintPreviewTab: ({ row, column }, cellProperty) => {
+        gridQuestionCommonComponent.gridPrintPreviewTab().within(() => {
+            utilities.getNthElement(gridQuestionCommonComponent.tableRow(), row)
+                .within(() => {
+                    switch (cellProperty) {
+                        case 'None':
+                            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                                .should('have.class', 'cell-content-none');
+                            break;
+                        case 'Heading':
+                            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                                .should('have.class', 'cell-content-heading');
+                            break;
+                        case 'Subheading':
+                            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                                .should('have.class', 'cell-content-subeading');
+                            break;
+                        case 'Text':
+                        case 'No radio button':
+                        case 'No checkbox':
+                            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                                .should('have.class', 'cell-content-text');
+                            break;
+                        case 'Radio button':
+                        case 'Checkbox':
+                            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                                .should('have.class', 'cell-content-radio');
+                            break;
+                        case 'Radio button with text':
+                        case 'Checkbox with text':
+                            utilities.getNthElement(gridQuestionCommonComponent.tableCell(), column)
+                                .should('have.class', 'cell-content-radio-text');
+                            break;
+                        default:
+                            throw new Error('Invalid list option');
+                    };
+                });
+        });
+    },
+
     /**
      * Verifies the property of a cell in the specify correct answer section of a grid question component.
      * @param {Object} cellPosition - The position of the cell to verify, containing row and column indices.

package/cypress/pages/components/questionInstructionsComponent.js

@@ -9,6 +9,8 @@ const selectors = {
     questionInstructionsText: () => cy.get('.question-instruction'),
     questionInstructionsWrapper: () => cy.get('.edit-question-instruction-wrapper'),
     questionInstructionsTextPreviewTab: () => cy.get('.question-instruction:visible'),
+    questionNumberPrintPreviewText: () => cy.get('[data-testid="print-preview-question-number"]'),
+    questionInstructionsPrintPreviewText: () => cy.get('[data-testid="question-instruction-element"]').first(),
 }
 
 const steps = {

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'),
 }
 
@@ -81,6 +83,7 @@ const steps = {
         scoringSectionBaseEditTab.scoringTypeDropdownListOptions(convertedString)
             .should('be.visible') // Ensure the dropdown option is visible
             .click();
+        cy.wait(2000); // Wait for the dropdown to close
         utilities.verifyElementVisibilityState(commonComponents.dropdownList(), 'notExist');
     },
 

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.');
+        });
     }
 }