itemengine-cypress-automation 1.0.183 → 1.0.184

package/cypress/pages/components/numberLineCommonComponent.js

@@ -0,0 +1,36 @@
+import utilities from "../../support/helpers/utilities";
+
+const selectors = {
+    numberLineSpecifyCorrectAnswer: () => cy.get('.ngie-accordion .ngie-jxgbox svg').eq(0),
+    numberLinePreviewTab: () => cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox svg').eq(0),
+    numberLinePointPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find('svg ellipse[display="inline"]'),
+    correctAnswersLabel: () => cy.get('[class*="AnswerLabel"]'),
+    correctIcon: () => cy.get('[data-icon="CorrectAnswer"]'),
+    incorrectIcon: () => cy.get('[data-icon="Incorrect"]'),
+    correctIncorrectAnswerTextWrapper: () => cy.get('[class*="CorrectIncorrectWrapper"]'),
+}
+
+const steps = {
+    /**
+        * @param {("correct" | "incorrect")} answerStatus - The status of the answer.
+        * @description Verifies the visibility and content of the correct/incorrect answer label block.
+        * If the answer is correct, it also verifies the visibility of the correct icon;
+        * otherwise, it verifies the visibility of the incorrect icon.
+        */
+    verifyCorrectIncorrectAnswerLabel: (answerStatus) => {
+        utilities.verifyInnerText(numberLineCommonComponent.correctIncorrectAnswerTextWrapper(), `Your answer is\n${answerStatus}`)
+        numberLineCommonComponent.correctIncorrectAnswerTextWrapper()
+            .within(() => {
+                if (answerStatus === 'correct') {
+                    utilities.verifyElementVisibilityState(numberLineCommonComponent.correctIcon(), 'visible');
+                } else {
+                    utilities.verifyElementVisibilityState(numberLineCommonComponent.incorrectIcon(), 'visible');
+                }
+            });
+    },
+}
+
+export const numberLineCommonComponent = {
+    ...selectors,
+    steps
+}

package/cypress/pages/components/optionsWrapperComponent.js

@@ -6,7 +6,7 @@ import { equationEditorFlyout } from "./equationEditorFlyout";
 const css = Cypress.env('css');
 
 const selectors = {
-    optionsLabel: () => cy.get('.options-label'),
+    optionsLabel: () => cy.get('.options-label-wrapper .options-label'),
     optionsSectionWrapper: () => cy.get('[data-rbd-droppable-id="assessment-option-item-options"]'),
     optionWrapper: () => cy.get('[data-rbd-draggable-id*="option-draggable"]'),
     addOptionButton: () => cy.get('.add-option-wrapper-cls button').contains('Add option'),
@@ -140,6 +140,17 @@ const steps = {
             .should('have.text', '​​​​​​​This is a bold option');
     },
 
+    /**
+    * @param {number} index of the option input field
+    * @description this function add input to options input field which contains an image
+    */
+    addTextInputToOptionsInputFieldWithImage: (index) => {
+        optionsWrapperComponent.optionsInputField()
+            .eq(index)
+            .type('Petals')
+            .should('have.text', '​​​​​​​Petals');
+    },
+
     /**
      * @param {number} index of option
      * @description this function verifies bold text in options input fields
@@ -416,7 +427,7 @@ const tests = {
                     utilities.triggerMouseover(commonComponents.dragHandleButton());
                 });
             utilities.verifyElementVisibilityState(commonComponents.tooltipText(), 'visible')
-            cy.checkAccessibility(commonComponents.tooltipText());
+            cy.checkAccessibility(commonComponents.nextGenCreateItemWrapper());
             optionsWrapperComponent.optionWrapper()
                 .eq(0)
                 .within(() => {

package/cypress/pages/components/playbackControlsBaseComponent.js

@@ -174,10 +174,13 @@ const steps = {
             .should('be.disabled');
     },
 
-    verifyPlaybackSpeedListOptions: () => {
-        const playbackSpeedOptions = ['1x', '1.25x', '1.5x', '2x'];
+    /**
+     * Verify the playback speed list options
+     * @param {string[]} playbackSpeedOptions Array of playback speed list options
+     */
+    verifyPlaybackSpeedListOptions: (playbackSpeedOptions) => {
         playbackSpeedOptions.forEach((option, optionIndex) => {
-            utilities.verifyInnerText(utilities.getNthElement(playbackControlsBaseComponent.playbackSpeedOption(), optionIndex), option);
+            utilities.verifyInnerText(utilities.getNthElement(playbackControlsBaseComponent.playbackSpeedOption(), optionIndex), `${option}x`);
         });
     },
 
@@ -188,7 +191,7 @@ const steps = {
      */
     verifyPlaybackSpeedOptionSelectedState: (speed) => {
         playbackControlsBaseComponent.playbackSpeedOption(speed)
-            .should('have.class', 'selected-speed-option')
+            .should('have.attr', 'aria-label', `${speed} selected`);
     },
 
     /**
@@ -272,30 +275,34 @@ const tests = {
         });
     },
 
-    verifyPlaybackSpeedContents: () => {
-        it('When the user hovers overs the playback button, a list of 4 playback speed options - 1x, 1.25x, 1.5x, 2x should be displayed and by default 1x should be in selected state', () => {
+    /**
+     * Verify the contents of playback speed list and button
+     * @param {string[]} playbackSpeedOptions Array of playback speed list options
+     */
+    verifyPlaybackSpeedContents: (playbackSpeedOptions) => {
+        it(`When the user hovers overs the playback button, a list of ${playbackSpeedOptions.length} playback speed options - ${playbackSpeedOptions.join(' ')} should be displayed and by default 1x should be in selected state`, () => {
             playbackControlsBaseComponent.playbackSpeedButton()
                 .trigger('mouseover');
-            utilities.verifyElementVisibilityState(playbackControlsBaseComponent.playbackSpeedOptionsList(), 'visible');
-            utilities.verifyElementCount(playbackControlsBaseComponent.playbackSpeedOption(), 4);
-            playbackControlsBaseComponent.steps.verifyPlaybackSpeedListOptions();
+            utilities.verifyElementVisibilityState(playbackControlsBaseComponent.playbackSpeedOption(), 'visible');
+            utilities.verifyElementCount(playbackControlsBaseComponent.playbackSpeedOption(), playbackSpeedOptions.length);
+            playbackControlsBaseComponent.steps.verifyPlaybackSpeedListOptions(playbackSpeedOptions);
             playbackControlsBaseComponent.steps.verifyPlaybackSpeedOptionSelectedState('1x');
             playbackControlsBaseComponent.steps.selectPlaybackSpeed('1x');
         });
 
         it('CSS of playback speed options', { tags: 'css' }, () => {
             utilities.hoverOverElement(playbackControlsBaseComponent.playbackSpeedButton());
-            utilities.verifyCSS(playbackControlsBaseComponent.playbackSpeedButton().find('[id="playback-speed"] path'), {
+            utilities.verifyCSS(playbackControlsBaseComponent.playbackSpeedButton().find('path').eq(1), {
                 'fill': css.color.activeButtons
             });
-            utilities.verifyCSS(utilities.getNthElement(playbackControlsBaseComponent.playbackSpeedOption(), 0), {
+            utilities.verifyCSS(playbackControlsBaseComponent.playbackSpeedOption().contains('1x'), {
                 'color': css.color.liText,
                 'background-color': css.color.liTextSelectedBg,
                 'font-size': css.fontSize.small
             });
-            utilities.verifyCSS(utilities.getNthElement(playbackControlsBaseComponent.playbackSpeedOption(), 1), {
+            utilities.verifyCSS(playbackControlsBaseComponent.playbackSpeedOption().last(), {
                 'color': css.color.liText,
-                'background-color': css.color.defaultBackground,
+                'background-color': css.color.transparent,
                 'font-size': css.fontSize.small
             });
         });

package/cypress/pages/components/styleAndLayoutCustomizationAccordionComponent.js

@@ -0,0 +1,46 @@
+import utilities from "../../support/helpers/utilities";
+
+const css = Cypress.env('css');
+
+const selectors = {
+    styleAndLayoutCustomizationAccordion: () => cy.get('.style-and-layout-customization-wrapper .MuiAccordionSummary-root'),
+}
+
+const steps = {
+    expandStyleAndLayoutCustomizationAccordion: () => {
+        styleAndLayoutCustomizationAccordionComponent.styleAndLayoutCustomizationAccordion()
+            .click()
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+}
+
+const tests = {
+    verifyStyleAndLayoutCustomizationAccordionProperties: () => {
+        it('By default \'Style and layout customization\' accordion should be collapsed and by clicking on the \'Style and layout customization\' accordion, user should be able to expand the accordion', () => {
+            styleAndLayoutCustomizationAccordionComponent.styleAndLayoutCustomizationAccordion()
+                .should('have.attr', 'aria-expanded', 'false');
+            styleAndLayoutCustomizationAccordionComponent.steps.expandStyleAndLayoutCustomizationAccordion();
+        });
+
+        it('CSS of \'Style and layout customization\' accordion', { tags: 'css' }, () => {
+            utilities.verifyCSS(styleAndLayoutCustomizationAccordionComponent.styleAndLayoutCustomizationAccordion().find('.accordion_label'), {
+                'color': css.color.accordionLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(styleAndLayoutCustomizationAccordionComponent.styleAndLayoutCustomizationAccordion().find('svg'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Style and layout customization\' accordion', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(styleAndLayoutCustomizationAccordionComponent.styleAndLayoutCustomizationAccordion().parents('.style-and-layout-customization-wrapper'));
+        });
+    }
+}
+
+export const styleAndLayoutCustomizationAccordionComponent = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/components/toolSettingsComponent.js

@@ -13,6 +13,7 @@ const selectors = {
     toolLabel: () => cy.get('.tool-settings-customization-wrapper [class*="DragItemstyles__ButtonLabel"]'),
     toolDragHandleButton: () => cy.get('.tool-settings-customization-wrapper [class*="DragItemstyles__DragIconWrapper"]'),
     toolEditIcon: () => cy.get('.tool-settings-customization-wrapper [class*="DragItemstyles__ItemContainer"] .icon-pencil'),
+    okButton: () => cy.get('.action-button').eq(1)
 }
 
 const steps = {
@@ -87,6 +88,11 @@ const steps = {
     clickOnToolEditIcon: (toolIndex) => {
         utilities.getNthElement(toolSettingsComponent.toolEditIcon(), toolIndex)
             .click();
+    },
+
+    clickOnOkButton: () => {
+        toolSettingsComponent.okButton()
+            .click();
     }
 }
 

package/cypress/pages/contentBlocksPage.js

@@ -6,6 +6,7 @@ const css = Cypress.env('css');
 const selectors = {
     ...commonComponents,
     ...createQuestionBasePage,
+    ...createItemPage,
     headerLabel: () => cy.get('[class*="ContentBlocksstyles__LabelContent"]'),
     titleLabel: () => cy.get('.inline-text-property-label').eq(0),
     titleInputField: () => cy.get('.input-field input').eq(0),
@@ -591,10 +592,25 @@ const steps = {
             .within(() => {
                 utilities.verifyInnerText(createItemPage.questionTitle().eq(questionIndex), questionTitle);
                 utilities.verifyElementVisibilityState(createItemPage.questionTitle().eq(questionIndex), 'visible');
-                utilities.verifyInnerText(contentBlocksPage.contentWrapperPreviewTab().eq(questionIndex), questionInstructions);
-                utilities.verifyElementVisibilityState(contentBlocksPage.contentWrapperPreviewTab().eq(questionIndex), 'visible');
+                utilities.verifyInnerText(contentBlocksPage.contentWrapperPreviewTab(), questionInstructions);
+                utilities.verifyElementVisibilityState(contentBlocksPage.contentWrapperPreviewTab(), 'visible');
             });
     },
+
+    /**
+    * @param {number} panel denotes panel number
+    * @param {string} questionInstruction denotes question instruction
+    * @description verify question content
+    */
+    verifyContentBlockContentsPreviewPreviewTab: ({ questionInstructions, panel = 0 }) => {
+        createItemPage.panelWrapper()
+            .eq(panel)
+            .within(() => {
+                utilities.verifyElementVisibilityState(createItemPage.questionTitle(), 'notExist');
+                utilities.verifyInnerText(contentBlocksPage.contentWrapperPreviewTab(), questionInstructions);
+                utilities.verifyElementVisibilityState(contentBlocksPage.contentWrapperPreviewTab(), 'visible');
+            });
+    }
 }
 
 export const contentBlocksPage = {

package/cypress/pages/createItemPage.js

@@ -21,6 +21,7 @@ const selectors = {
     rowQuestionWrapper: () => cy.get('[class*="Widgetstyles__RowWrapper"]'),
     columnQuestionWrapper: () => cy.get('[class*="ColumnComponentstyles__WidgetsWrapper"]'),
     panelWrapper: () => cy.get('.column-tab-without-scroll'),
+    itemContainer: () => cy.get('.item-layout-columns-wrapper-without-scroll'),
     questionTitle: () => cy.get('.question-type-text'),
     sectionsTitleWrapper: () => cy.get('[class*="TabsComponentstyles__TabListWrapper"]'),
     sectionsTitleBoxWrapper: () => cy.get('[class*="TabsComponentstyles__TabListWrapper"] .ngie-tablist-box-wrapper'),
@@ -29,6 +30,7 @@ const selectors = {
     selectedSectionUnderline: () => cy.get('[class*="MuiTabs-indicator"]').eq(1),
     sectionsNumber1Label: () => cy.get('.tablist-numbered-label').eq(0),
     sectionsNumber2Label: () => cy.get('.tablist-numbered-label').eq(1),
+    noPreviewText: () => cy.get('[class*="__NoPreview"]')
 }
 
 const steps = {
@@ -166,22 +168,39 @@ const steps = {
             .click();
     },
 
+    /**
+    * @param {number} panel denotes panel number
+    * @param {number} questionNumber denotes question number
+    * @param {string} questionTitle denotes question title
+    * @param {string} questionInstruction denotes question instruction
+    * @description verify question content
+    */
+    verifyBasicQuestionContentsPreview: ({ questionIndex, questionTitle, questionInstructions, panel = 0 }) => {
+        createItemPage.panelWrapper()
+            .eq(panel)
+            .within(() => {
+                utilities.verifyInnerText(createItemPage.questionTitle().eq(questionIndex), questionTitle);
+                utilities.verifyElementVisibilityState(createItemPage.questionTitle().eq(questionIndex), 'visible');
+                utilities.verifyInnerText(questionInstructionsComponent.questionInstructionsText().eq(questionIndex), questionInstructions);
+                utilities.verifyElementVisibilityState(questionInstructionsComponent.questionInstructionsText().eq(questionIndex), 'exist');
+            });
+    },
+
     /**
      * @param {number} panel denotes panel number
-     * @param {number} questionNumber denotes question number
-     * @param {string} questionTitle denotes question title
+     * @param {number} questionIndex denotes question number
+     * @param {string} totalPoints denotes total points
      * @param {string} questionInstruction denotes question instruction
      * @description verify question content
      */
 
-    verifyBasicQuestionContentsPreview: ({ questionIndex, questionTitle, questionInstructions, panel = 0 }) => {
+    verifyBasicQuestionContentsPreviewPreviewTab: ({ questionIndex, questionInstructions, panel = 0 }) => {
         createItemPage.panelWrapper()
             .eq(panel)
             .within(() => {
-                utilities.verifyInnerText(createItemPage.questionTitle().eq(questionIndex), questionTitle);
-                utilities.verifyElementVisibilityState(createItemPage.questionTitle().eq(questionIndex), 'visible');
+                utilities.verifyElementVisibilityState(createItemPage.questionTitle(), 'notExist');
                 utilities.verifyInnerText(questionInstructionsComponent.questionInstructionsText().eq(questionIndex), questionInstructions);
-                utilities.verifyElementVisibilityState(questionInstructionsComponent.questionInstructionsText().eq(questionIndex), 'visible');
+                utilities.verifyElementVisibilityState(questionInstructionsComponent.questionInstructionsText().eq(questionIndex), 'exist');
             });
     },
 
@@ -433,9 +452,9 @@ const steps = {
 
     verifyNumberedSectionNavigationStyle: () => {
         utilities.verifyInnerText(createItemPage.sectionsNumber1Label(), '1');
-        utilities.verifyElementVisibilityState(createItemPage.sectionsNumber1Label(), 'visible');
+        utilities.verifyElementVisibilityState(createItemPage.sectionsNumber1Label(), 'exist');
         utilities.verifyInnerText(createItemPage.sectionsNumber2Label(), '2');
-        utilities.verifyElementVisibilityState(createItemPage.sectionsNumber2Label(), 'visible');
+        utilities.verifyElementVisibilityState(createItemPage.sectionsNumber2Label(), 'exist');
     },
 
     /**
@@ -504,7 +523,55 @@ const steps = {
             });
     },
 
+    /**
+     * This function verifies the Panel width is half of the item width
+     * @param {number} panelIndex index of the panel 
+     */
+    verifyPanelWidthIsHalfOfItemWidth: (panelIndex) => {
+        createItemPage.itemContainer()
+            .then(($el) => {
+                const itemWidth = $el[0].clientWidth;
+                const expectedPanelWidth = itemWidth / 2
+                createItemPage.panelWrapper()
+                    .eq(panelIndex)
+                    .then(($el) => {
+                        const panelWidth = $el[0].clientWidth;
+                        expect(expectedPanelWidth).to.be.closeTo(Math.floor(panelWidth), 1);
+                    });
+            });
+    },
 
+    verifyPanelWidthEqualToItemWidth: () => {
+        createItemPage.itemContainer()
+            .then(($el) => {
+                const itemWidth = $el[0].clientWidth;
+                createItemPage.panelWrapper()
+                    .then(($el) => {
+                        const panelWidth = $el[0].clientWidth;
+                        expect(itemWidth).to.be.eq(panelWidth);
+                    });
+            });
+    },
+
+    verifyPanelWidthAndSectionWidthEqualToItemWidth: () => {
+        createItemPage.itemContainer()
+            .then(($item) => {
+                const itemWidth = $item[0].clientWidth;
+                let panelWidth = 0;
+                let sectionWidth = 0;
+                cy.get('[class*="ColumnComponentstyles__TabsComponentWrapper"]')
+                    .then(($section) => {
+                        sectionWidth = $section[0].clientWidth;
+                    })
+                cy.get('[class*="ColumnComponentstyles__WidgetsWrapper"]')
+                    .then(($panelWidth) => {
+                        panelWidth = $panelWidth[0].clientWidth;
+                    })
+                    .then(() => {
+                        expect(panelWidth + sectionWidth).to.be.closeTo(itemWidth, 1);
+                    });
+            });
+    }
 }
 
 export const createItemPage = {

package/cypress/pages/dialogBoxBase.js

@@ -6,8 +6,8 @@ const selectors = {
     dialogBox: () => cy.get('[aria-labelledby="alert-dialog-title"]'),
     dialogBoxTitle: () => cy.get('.dialog-title'),
     dialogBoxContent: () => cy.get('[class*="dialog-content"]'),
-    buttonReject: () => cy.get('.save-action-btn-wrapper button').eq(0),
-    buttonAccept: () => cy.get('.save-action-btn-wrapper button').eq(1),
+    buttonReject: () => cy.get('[data-testid="reject-button"]'),
+    buttonAccept: () => cy.get('[data-testid="accept-button"]'),
     buttonClose: () => cy.get('[aria-label="CLOSE"]')
 }
 

package/cypress/pages/drawingResponsePage.js

@@ -59,8 +59,8 @@ const selectors = {
         }
     },
     previewTabToolbarOptionTooltip: () => cy.get('.edit-question-preview-wrapper [role="tooltip"][class*="Tooltipstyles__TooltipContent"]'),
-    previewTabLowerCanvas: () => cy.get('.edit-question-preview-wrapper .lower-canvas'),
-    previewTabUpperCanvas: () => cy.get('.edit-question-preview-wrapper .upper-canvas'),
+    previewTabLowerCanvas: () => cy.get('.question-preview-wrapper .lower-canvas'),
+    previewTabUpperCanvas: () => cy.get('.question-preview-wrapper .upper-canvas'),
     previewTabSecondaryToolbarOptionLabel: () => cy.get('.edit-question-preview-wrapper .drawing-tool__secondary-toolbar__tool-name'),
     previewTabSecondaryToolbarOption: (ariaLabel = null) => {
         if (ariaLabel) {
@@ -198,7 +198,7 @@ const selectors = {
     editTabColorPickerPopupOpacityPalette: () => cy.get('.react-colorful__last-control .react-colorful__interactive'),
     editTabColorPickerPopupOpacityPicker: () => cy.get('.react-colorful__last-control .react-colorful__pointer'),
     editTabColorPickerPopupCancelButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(0),
-    editTabColorPickerPopupOkButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(2),
+    editTabColorPickerPopupOkButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(1),
 
     //TODO: Student view: Need to remove once https://redmine.zeuslearning.com/issues/556302 is fixed
     studentAndGradingViewDrawingToolbarOption: (drawingOption = null) => {
@@ -208,7 +208,8 @@ const selectors = {
             return cy.get('.drawing-tool__button')
         }
     },
-    studentViewUpperCanvas: () => cy.get('.upper-canvas').eq(0)
+    studentViewUpperCanvas: () => cy.get('.upper-canvas').eq(0),
+    gradingViewPlayFeatureButton: () => cy.get('[class*="DrawingResponsePreviewstyles__PlayBtnWrapper"] button')
 }
 
 const steps = {
@@ -1225,6 +1226,25 @@ const steps = {
                 });
         });
     },
+
+    /**
+     * This function sets basic question and saves it
+     * @param {string} inputQuestion input for the question instruction
+     * @param {number} points for the question
+     */
+    createBasicDrawingResponseQuestion: (inputQuestion, points) => {
+        drawingResponsePage.questionInstructionsInputField()
+            .type(inputQuestion);
+        drawingResponsePage.pointsInputField()
+            .type(points);
+        drawingResponsePage.saveQuestionButton()
+            .click();
+    },
+
+    clickOnPlayButtonInGradingView: () => {
+        drawingResponsePage.gradingViewPlayFeatureButton()
+            .click();
+    }
 }
 
 const tests = {

package/cypress/pages/feedbackScalePage.js

@@ -1,11 +1,13 @@
 import { additionalSettingsPanel, commonComponents, createQuestionBasePage, questionInstructionsComponent, autoScoredScoringPreviewTab, studentViewSettingsLabelComponent } from "./components"
 import utilities from "../support/helpers/utilities";
+import { selectQuestionResourceToolPage } from "./selectQuestionResourceToolPage";
 const css = Cypress.env('css');
 
 const selectors = {
     ...questionInstructionsComponent,
     ...commonComponents,
     ...additionalSettingsPanel,
+    ...selectQuestionResourceToolPage,
     specifyFeedbackScaleOptionsLabel: () => cy.get('[class*="FeedbackScalestyles__SpecifyFeedbackLabel"]'),
     feedbackScaleStyleDropdownLabel: () => cy.get('#feedback-scale-style-dropdown-label'),
     feedbackScaleStyleDropdown: () => cy.get('#feedback-scale-style-select'),
@@ -103,6 +105,7 @@ const steps = {
     ...additionalSettingsPanel.steps,
     ...questionInstructionsComponent.steps,
     ...autoScoredScoringPreviewTab.steps,
+    ...selectQuestionResourceToolPage.steps,
     /**
      * Adds legend text to a specific option in the Legend Text accordion.
      * @param {number} optionIndex - The index of the option in the Legend Text accordion.

package/cypress/pages/graphingPage.js

@@ -1554,7 +1554,7 @@ const steps = {
     */
     selectGraphToolOptionPreviewTab: (toolOption) => {
         graphingPage.graphToolOptionPreviewTab(toolOption)
-            .click();
+            .dblclick();
     },
 
     /**
@@ -1664,6 +1664,24 @@ const steps = {
 
     verifyCorrectAnswerSectionNotExist: () => {
         utilities.verifyElementVisibilityState(utilities.getNthElement(graphingPage.graphCorrectAnswerSection(), 1), 'notExist');
+    },
+
+    /**
+    * This function sets basic question and saves it
+    * @param {string} inputQuestion input for the question instruction
+    * @param {number} points for the question
+    */
+    createBasicGraphingResponseQuestion: (inputQuestion, points) => {
+        graphingPage.questionInstructionsInputField()
+            .type(inputQuestion);
+        graphingPage.pointsInputField()
+            .type(points);
+        graphingPage.steps.selectGraphToolOptionEditTab('Line');
+        graphingPage.steps.plotPointsOnGraphEditTab([{ x: 2, xRange: 20, y: 1, yRange: 20 }, { x: 2, xRange: 20, y: -5, yRange: 20 }]);
+        graphingPage.steps.selectGraphToolOptionSpecifyCorrectAnswer('Line');
+        graphingPage.steps.plotPointsOnGraphSpecifyCorrectAnswerSection([{ x: -4, xRange: 20, y: 0, yRange: 20 }, { x: 0, xRange: 20, y: 4, yRange: 20 }]);
+        graphingPage.saveQuestionButton()
+            .click();
     }
 }
 

package/cypress/pages/gridFillPage.js

@@ -31,6 +31,7 @@ const selectors = {
     makeResponsiveCheckbox: () => cy.get('.mobile-responsive-wrapper input'),
     makeResponsiveCheckboxIcon: () => cy.get('.mobile-responsive-wrapper .MuiSwitch-thumb'),
     whatIsThisLabel: () => cy.get('.what-is-wrapper [class*="StyledLink"]'),
+    makeResponsiveHelpText: () => cy.get('[class*="WhatIsThisDescriptionWrapper"]'),
     columnsInputField: () => cy.get('[class*="GridFillstyles__RowsColWrapper"] .input-stepper-textfield').eq(0),
     columnsLabel: () => cy.get('[class*="GridFillstyles__RowsColWrapper"] [class*="GridFillstyles__CanvasInputLabelWrapper"]').eq(0),
     columnsIncreaseButton: () => cy.get('[class*="GridFillstyles__RowsColWrapper"] [aria-label="Increase count"]').eq(0),
@@ -479,10 +480,10 @@ const steps = {
                     .click()
                     .invoke('attr', 'aria-label')
                     .should('include', 'Hide cell');
-                /* utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), columnIndex)
-                     .within(() => {
-                         utilities.verifyElementVisibilityState(gridFillPage.hiddenCellIcon(), 'exist');
-                     });*/
+                utilities.getNthElement(gridFillPage.cellInCustomizeLayout(), columnIndex)
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(gridFillPage.hiddenCellIcon(), 'exist');
+                    });
             });
     },
 
@@ -787,7 +788,7 @@ const steps = {
                                     const element = $element[0];
                                     const pseudoStyle = win.getComputedStyle(element, '::after');
                                     const pseudoBackgroundColor = pseudoStyle.getPropertyValue('background-color');
-                                    expect(pseudoBackgroundColor).to.equal(css.color.gridCellSelectedStateBg);
+                                    expect(pseudoBackgroundColor).to.equal(css.color.titleContainerBorder);
                                 });
                             });
                     });
@@ -954,7 +955,11 @@ const steps = {
      * @param {number} lengthRows - The expected count of rows.
      */
     verifyRowsCountPreviewTab: (lengthRows) => {
-        utilities.verifyElementCount(gridFillPage.rowsWrapperPreviewTab(), lengthRows);
+        gridFillPage.gridWrapperPreviewTab()
+            .eq(0)
+            .within(() => {
+                utilities.verifyElementCount(gridFillPage.rowsWrapperPreviewTab(), lengthRows);
+            });
     },
 
     /**
@@ -968,6 +973,18 @@ const steps = {
             });
     },
 
+    /**
+     * @description Verifies the count of cells in a grid in the preview tab.
+     * @param {number} expectedCount - The expected count of cells in the grid.
+     */
+    getCellCountInGridPreviewTab: (expectedCount) => {
+        gridFillPage.gridWrapperPreviewTab()
+            .eq(0)
+            .within(() => {
+                utilities.verifyElementCount(gridFillPage.cellInPreviewTab(), expectedCount);
+            });
+    },
+
     expandOpenTheGridSelectorDropdown: () => {
         gridFillPage.openTheGridSelectorDropdownButton()
             .click()
@@ -2985,8 +3002,8 @@ const tests = {
             commonComponents.steps.verifyErrorMessageIsNotDisplayed();
         });
 
-        it(`\'Exact match position of cells\' label and checkbox should be displayed in the ${accordionName} accordion and the checkbox should be checked`, () => {
-            utilities.verifyInnerText(gridFillPage.matchExactPositionLabel(), 'Exact match position of cells');
+        it(`\'Match exact position of cells\' label and checkbox should be displayed in the ${accordionName} accordion and the checkbox should be checked`, () => {
+            utilities.verifyInnerText(gridFillPage.matchExactPositionLabel(), 'Match exact position of cells');
             utilities.verifyElementVisibilityState(gridFillPage.matchExactPositionLabel(), 'visible');
             utilities.verifyElementVisibilityState(gridFillPage.matchExactPositionCheckbox(), 'exist');
             gridFillPage.steps.verifyMatchExactPositionOfCellsCheckboxIsChecked();

package/cypress/pages/index.js

@@ -47,4 +47,5 @@ export * from './geoGebraToolsPage';
 export * from './matchingPage';
 export * from './brainingCampManipulativePage';
 export * from './numberLinePage';
-export * from './textSelectionPage';
+export * from './textSelectionPage';
+export * from './numberLineLabelPage';

package/cypress/pages/itemPreviewSettingsPage.js

@@ -7,6 +7,8 @@ import { scoringSectionBase } from "./components";
 import { questionInstructionsComponent } from "./components";
 import { contentBlocksPage } from "./contentBlocksPage";
 import { createQuestionBasePage } from "./components";
+import { graphingPage } from "./graphingPage";
+import { drawingResponsePage } from "./drawingResponsePage";
 
 const selectors = {
     ...createItemPage,
@@ -105,6 +107,8 @@ const steps = {
     ...scoringSectionBase.steps,
     ...questionInstructionsComponent.steps,
     ...selectQuestionResourceToolPage.steps,
+    ...graphingPage.steps,
+    ...drawingResponsePage.steps,
 
     verifyEnableSideBySidePanelsCheckboxUnchecked: () => {
         itemPreviewSettingsPage.enableSideBySidePanelsCheckbox()