itemengine-cypress-automation 1.0.193-packageUpdated-b3f3d0b.0 → 1.0.193

package/cypress/pages/imageHighlightPage.js

@@ -1,21 +1,36 @@
 import utilities from "../support/helpers/utilities";
-import { autoScoredScoringPreviewTab, autoScoredStudentViewSettings, backgroundImageUploadComponent, createQuestionBasePage, imageCanvasComponent, questionInstructionsComponent, scoringSectionBaseEditTab, singleMultipleSelectionModeComponent } from "./components"
+import { autoScoredScoringPreviewTab, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, autoScoredStudentViewSettings, backgroundImageUploadComponent, commonComponents, createQuestionBasePage, enableOuterBorderComponent, imageCanvasComponent, questionInstructionsComponent, scoringSectionBaseEditTab, singleMultipleSelectionModeComponent } from "./components"
 const css = Cypress.env('css');
 let imageWidth = 768;
 let imageHeight = 432;
 
 const selectors = {
     ...questionInstructionsComponent,
+    ...autoScoredScoringSectionMultiResponseType,
+    ...autoScoredSpecifyCorrectAnswerSection,
+    ...commonComponents,
+    ...enableOuterBorderComponent,
+    ...autoScoredScoringPreviewTab,
 
     //Specify possible options
     specifyPossibleOptionsImageWrapper: () => cy.get('.drawing-tool__wrapper .drawing-tool__canvas'),
     specifyPossibleOptionsImageCanvas: () => cy.get('.drawing-tool__wrapper .upper-canvas'),
     freeformTool: () => cy.get('.drawing-tool__button-polygon'),
+    itemEraserTool: () => cy.get('.drawing-tool__button-itemEraser'),
+    selectTool: () => cy.get('.drawing-tool__button-select'),
+    undoTool: () => cy.get('.drawing-tool__button-undo'),
+    redoTool: () => cy.get('.drawing-tool__button-redo'),
+    clearAllTool: () => cy.get('.drawing-tool__button-clearAll'),
+    optionCount: () => cy.get('[class*="HighlightImagestyles__HighlightCountWrapper"]'),
     //Specify correct answer section
     specifyCorrectAnswerSectionImage: () => cy.get('.highlight-svg-responseive image'),
-    specifyCorrectAnswerSectionHighlight: () => cy.get('[class*="HighlightImageControlstyles__ShapeWrapper"] a'),
+    specifyCorrectAnswerSectionHighlight: () => cy.get('.ngie-accordion [class*="HighlightImageControlstyles__ShapeWrapper"] a'),
+    specifyCorrectAnswerSectionHighlightPolygon: () => cy.get('[class*="HighlightImageControlstyles__PolygonWrapper"]'),
+    highlightNumerationSpecifyCorrectAnswer: () => cy.get('[class*="__TspanWrapper"]:visible'),
+    partialEqualWeightsPointsPerResponseScore: () => cy.get('.alternate-points-points-per-value-span'),
     //preview tab
     imagePreviewTab: () => cy.get('[class*="question-preview-wrapper"] .highlight-svg-responseive image'),
+    imagePreviewTabWrapper: () => cy.get('[class*="question-preview-wrapper"] .highlight-svg-wrapper'),
     highlightPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="HighlightImageControlstyles__ShapeWrapper"] a'),
     highlightPolygonPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="HighlightImageControlstyles__PolygonWrapper"]'),
     checkMarkIcon: () => cy.get('.correct-option-icon [data-name*="Rectangle"]'),
@@ -38,6 +53,10 @@ const steps = {
     ...imageCanvasComponent.steps,
     ...autoScoredScoringPreviewTab.steps,
     ...autoScoredStudentViewSettings.steps,
+    ...autoScoredSpecifyCorrectAnswerSection.steps,
+    ...autoScoredScoringSectionMultiResponseType.steps,
+    ...enableOuterBorderComponent.steps,
+
     //Specify possible options
     clickOnFreeformTool: () => {
         imageHighlightPage.freeformTool()
@@ -45,6 +64,24 @@ const steps = {
             .blur();
     },
 
+    clickOnUndoTool: () => {
+        imageHighlightPage.undoTool()
+            .click();
+        steps.clickOnFreeformTool();
+    },
+
+    clickOnRedoTool: () => {
+        imageHighlightPage.redoTool()
+            .click();
+        steps.clickOnFreeformTool();
+    },
+
+    clickOnClearAllTool: () => {
+        imageHighlightPage.clearAllTool()
+            .click()
+            .blur();
+    },
+
     verifyImageUploadedInSpecifyPossibleOptionsSection: () => {
         imageHighlightPage.specifyPossibleOptionsImageWrapper()
             .should('be.visible')
@@ -76,6 +113,50 @@ const steps = {
         cy.wait(200);
     },
 
+    /**
+     * @description verify the highlight count
+     * @param {number} count shows the count of highlight
+     */
+    verifyOptionCountInHighlightImageSection: (count) => {
+        imageHighlightPage.optionCount()
+            .verifyInnerText(`Option count: ${count}`)
+    },
+
+    verifySelectedStateOfFreeformTool: () => {
+        imageHighlightPage.freeformTool()
+            .should('have.class', 'drawing-tool__button--active');
+    },
+
+    verifyUnselectedStateOfSelectTool: () => {
+        imageHighlightPage.selectTool()
+            .should('not.have.class', 'drawing-tool__button--active');
+    },
+
+    verifyUnselectedStateOfUndoTool: () => {
+        imageHighlightPage.undoTool()
+            .should('not.have.class', 'drawing-tool__button--active');
+    },
+
+    verifyUnselectedStateOfRedoTool: () => {
+        imageHighlightPage.redoTool()
+            .should('not.have.class', 'drawing-tool__button--active');
+    },
+
+    verifyUnselectedStateOfItemEraserTool: () => {
+        imageHighlightPage.itemEraserTool()
+            .should('not.have.class', 'drawing-tool__button--active');
+    },
+
+    verifySelectedStateOfItemEraserTool: () => {
+        imageHighlightPage.itemEraserTool()
+            .should('have.class', 'drawing-tool__button--active');
+    },
+
+    verifyUnselectedStateOfClearAllTool: () => {
+        imageHighlightPage.clearAllTool()
+            .should('not.have.class', 'drawing-tool__button--active');
+    },
+
     //Specify correct answer section
     verifyImageUploadedSpecifyCorrectAnswer: () => {
         utilities.verifyElementVisibilityState(imageHighlightPage.specifyCorrectAnswerSectionImage(), 'visible')
@@ -104,6 +185,16 @@ const steps = {
     /**
    * @param {number} index of highlight region
    * @description this functions highlights a region in set correct answer section
+   */
+    clickOnARegionInSpecifyCorrectAnswerSection: (index) => {
+        imageHighlightPage.specifyCorrectAnswerSectionHighlight()
+            .eq(index)
+            .click();
+    },
+
+    /**
+   * @param {number} index of highlight region
+   * @description this functions highlights a region in set correct answer section
    */
     highlightARegionInSpecifyCorrectAnswerSection: (index) => {
         imageHighlightPage.specifyCorrectAnswerSectionHighlight()
@@ -123,7 +214,119 @@ const steps = {
         steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(index);
     },
 
+    /**
+     * @param {number} index of points input field
+     * @param {number} points alloted in the points input field
+     * @description this function verifies the Options label and points input field
+     */
+    verifyPartialDifferentWeightsOptionLabelAndPoints: (index, points) => {
+        utilities.verifyInnerText(scoringSectionBaseEditTab.pointsLabel().eq(index + 1), `Option ${index + 1}`);
+        scoringSectionBaseEditTab.pointsInputField()
+            .eq(index)
+            .should('have.value', points);
+        utilities.verifyElementVisibilityState(scoringSectionBaseEditTab.pointsInputField().eq(index), 'visible');
+    },
+
+    verifyHighlightRegionNumerationSpecifyCorrectAnswer: () => {
+        imageHighlightPage.highlightNumerationSpecifyCorrectAnswer()
+            .each(($el, index) => {
+                cy.wrap($el)
+                    .should('have.text', `${index + 1}`);
+            });
+    },
+
+    verifyPointsPerResponseLabel: () => {
+        utilities.verifyInnerText(autoScoredScoringSectionMultiResponseType.pointsPerResponseLabel(), 'Points per response:\n-');
+        utilities.verifyElementVisibilityState(autoScoredScoringSectionMultiResponseType.pointsPerResponseLabel(), 'visible');
+    },
+
+    /**
+     * @param {number} points - The expected points value to be verified.
+     * @description Verifies the partial equal weights points per response score for a specific option in the specify correct answer section for a multi-response type question.
+     */
+    verifyPartialEqualWeightsPointsPerResponseScore: (points) => {
+        imageHighlightPage.partialEqualWeightsPointsPerResponseScore()
+            .should('have.text', points)
+    },
+
+    /**
+     * verify the displayed penalty points for each incorrect option
+     * @param {number} penaltyPoints displayed penalty points 
+     */
+    verifyPenaltyPointsForEachIncorrectOption: (penaltyPoints) => {
+        utilities.verifyInnerText(autoScoredScoringSectionMultiResponseType.penaltyPointsDetailsSectionAllottedPointsLabel(), `Penalty points for each incorrect answer: ${penaltyPoints}`);
+    },
+
+    /**
+     * This function erases highlight on the canvas
+     * @param {number[][]} arrayOfCoordinates coordinates of the highlight region
+     */
+    eraseAHighlightRegion: (arrayOfCoordinates) => {
+        imageHighlightPage.itemEraserTool()
+            .click();
+        imageHighlightPage.specifyPossibleOptionsImageCanvas()
+            .then(($element) => {
+                const clientWidth = $element[0].clientWidth;
+                arrayOfCoordinates.forEach((coordinates) => {
+                    imageHighlightPage.specifyPossibleOptionsImageCanvas()
+                        .click(coordinates[0] * clientWidth / 100, coordinates[1] * clientWidth / 100);
+                });
+            });
+    },
+
+    /**
+     * @param {string} fileFormat format of the uploaded file in the highlight region
+     * @description this function verifies the attribute of the image has the expected file format
+     */
+    verifyUploadedImageFormatInSetCorrectAnswerSection: (fileFormat) => {
+        imageHighlightPage.specifyCorrectAnswerSectionImage()
+            .should(($element) => {
+                const hrefAttributeValue = $element.attr('href');
+                expect(hrefAttributeValue).to.include(fileFormat);
+            });
+    },
+
+    /**
+     * @param {number} index of highlighted region
+     * @param {number[]} hotspotCoordsInPercentage co-ordinates of the highlighted image in set correct answer section
+     * @description this function verifies the co-ordinates of region highlighted in set correct answer section
+     */
+    verifyHighlightRegionsInSpecifyCorrectAnswerSection: (index, hotspotCoordsInPercentage) => {
+        let flattenedArr = hotspotCoordsInPercentage.flat();
+        imageHighlightPage.specifyCorrectAnswerSectionHighlightPolygon()
+            .eq(index)
+            .then(($element) => {
+                const pointsValue = $element.attr('points');
+                const pointsArray = pointsValue.split(',');
+                let wholeNumbersArray = pointsArray.map((point) => {
+                    return Math.floor(Number(point))
+                });
+                wholeNumbersArray.forEach((actualPointsValue, index) => {
+                    const expectedPointsValue = flattenedArr[index] * imageWidth / 100;
+                    cy.wrap(actualPointsValue).should('be.closeTo', expectedPointsValue, 2);
+                });
+            });
+        imageHighlightPage.specifyCorrectAnswerSectionHighlight()
+            .eq(index)
+            .within(() => {
+                imageHighlightPage.highlightNumerationSpecifyCorrectAnswer()
+                    .should('have.text', index + 1);
+            });
+    },
+
     //Preview tab
+    /**
+    * @param {string} fileFormat format of the uploaded file in the highlight region
+    * @description this function verifies the attribute of the image has the expected file format
+    */
+    verifyUploadedImageFormatInPreviewTab: (fileFormat) => {
+        imageHighlightPage.imagePreviewTab()
+            .should(($element) => {
+                const hrefAttributeValue = $element.attr('href');
+                expect(hrefAttributeValue).to.include(fileFormat);
+            });
+    },
+
     verifyImageUploadedPreviewTab: () => {
         utilities.verifyElementVisibilityState(imageHighlightPage.imagePreviewTab(), 'visible')
     },
@@ -228,6 +431,16 @@ const steps = {
             .click();
     },
 
+    /**
+     * @param {number} index of highlight region
+     * @description this functions highlights a region in preview tab
+     */
+    clickOnARegionInPreviewTab: (index) => {
+        imageHighlightPage.highlightPolygonPreviewTab()
+            .eq(index)
+            .click();
+    },
+
     /**
      * @param {number} index of highlight region
      * @description this functions highlights a region in preview tab
@@ -351,10 +564,103 @@ const steps = {
                 }
             });
     },
+
+    verifyOuterBorderForQuestion: () => {
+        imageHighlightPage.imagePreviewTabWrapper()
+            .should('have.css', 'border', `1px solid ${css.color.outerBorder}`)
+    },
+
+    verifyOuterBorderOfQuestionPreviewNotExists: () => {
+        imageHighlightPage.imagePreviewTabWrapper()
+            .should('have.css', 'border')
+            .and('match', /0px none/);
+    },
 }
 
 const tests = {
     ...autoScoredScoringPreviewTab.tests,
+    ...scoringSectionBaseEditTab.tests,
+    ...autoScoredScoringSectionMultiResponseType.tests,
+    ...autoScoredSpecifyCorrectAnswerSection.tests,
+    ...createQuestionBasePage.tests,
+    ...commonComponents.tests,
+    ...enableOuterBorderComponent.tests,
+    ...autoScoredStudentViewSettings.tests,
+
+    /**
+     * @param {string} scoringType scoring type 'All or nothing| Partial equal weights| Partial different weights'
+     * @description this function verifies the contents of Set correct answer section for different scoring types
+     */
+    verifyContentsOfSpecifyCorrectAnswerSection: () => {
+        it(`When user has selected a scoring type then the uploaded image with highlight regions should be displayed in the set correct answer section`, () => {
+            imageHighlightPage.steps.verifyImageUploadedInSpecifyPossibleOptionsSection();
+            imageHighlightPage.specifyCorrectAnswerSectionHighlight()
+                .should('be.visible');
+            imageHighlightPage.steps.verifyHighlightRegionNumerationSpecifyCorrectAnswer();
+            imageHighlightPage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(0);
+            imageHighlightPage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(1);
+            imageHighlightPage.steps.verifyRegionIsNotHighlightedInSetCorrectAnswerSection(2);
+        });
+    },
+
+    /**
+     * Verifies the contents and functionality of the 'Specify correct answer' accordion for multiple selection questions.
+     * @param {{'Correct' | 'Alternative'}} accordionName - The name of the accordion to be used in the validation.
+     * @example - verifySpecifyCorrectAnswerAccordionContentsAndFunctionality('Correct');
+     */
+    verifySpecifyCorrectAnswerAccordionContentsAndFunctionality: (accordionName) => {
+        it('User should be able to select and de-select highlight regions in specify correct answer section', () => {
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(1);
+            imageHighlightPage.steps.removeHighlightOfARegionInSetCorrectAnswerSection(0);
+        });
+
+        it(`When the user has removed all the options from the dropzone in the ${accordionName} accordion, \'Error: Please set a correct answer.\' error message should be thrown along with an error icon on the \'${accordionName}\' accordion`, () => {
+            imageHighlightPage.steps.removeHighlightOfARegionInSetCorrectAnswerSection(1);
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible')
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Please set a correct answer.');
+            if (accordionName == 'Correct') {
+                autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
+                    });
+            } else {
+                autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
+                    });
+            };
+        });
+
+        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredCorrectAnswerErrorMessageCSSAndA11y();
+
+        it('When the user drops an option in the dropzone, the error message should disappear', () => {
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(0);
+            imageHighlightPage.steps.highlightARegionInSpecifyCorrectAnswerSection(1);
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
+            autoScoredSpecifyCorrectAnswerSection.steps.verifySpecifyCorrectAnswerErrorIconNotExists();
+        });
+
+        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty(accordionName);
+
+        it('CSS of \'Correct\' accordion contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(imageHighlightPage.specifyCorrectAnswerSectionHighlightPolygon().eq(2), {
+                'stroke': css.color.activeButtons,
+                'stroke-width': '2px'
+            });
+            utilities.verifyCSS(imageHighlightPage.highlightNumerationSpecifyCorrectAnswer(), {
+                'fill': css.color.activeButtons,
+            });
+            utilities.verifyCSS(imageHighlightPage.specifyCorrectAnswerSectionHighlightPolygon().eq(0), {
+                'stroke': css.color.activeButtons,
+                'stroke-width': '4px'
+            });
+        });
+
+        it('Accessibility of \'Correct\' accordion contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(imageHighlightPage.specifyCorrectAnswerSectionImage());
+        });
+    }
 }
 
 export const imageHighlightPage = {

package/cypress/pages/numberLinePage.js

@@ -75,6 +75,30 @@ const steps = {
     ...numberLineCommonComponent.steps,
     ...layoutSectionComponent.steps,
 
+    /**
+     * This function selects tool options
+     * @param {string[]} toolOptionAriaLabelArray array aria-label of tool options
+     */
+    selectToolOptions: (toolOptionAriaLabelArray) => {
+        toolOptionAriaLabelArray.forEach((toolOptionAriaLabel) => {
+            toolOptionAriaLabel = toolOptionAriaLabel.toLowerCase()
+            toolsAndControlsComponent.toolOptions(toolOptionAriaLabel)
+                .click();
+        });
+    },
+
+    /**
+     * This function de-selects tool options
+     * @param {string[]} toolOptionAriaLabelArray array aria-label of tool options
+     */
+    deselectToolOptions: (toolOptionAriaLabelArray) => {
+        toolOptionAriaLabelArray.forEach((toolOptionAriaLabel) => {
+            toolOptionAriaLabel = toolOptionAriaLabel.toLowerCase()
+            toolsAndControlsComponent.toolOptions(toolOptionAriaLabel)
+                .click();
+        });
+    },
+
     /**
      * @description This function selects the tool option from graph
      * @param {string} toolOption aria label of the tool option to be selected
@@ -1113,7 +1137,7 @@ const steps = {
             const originX = graphWidth / 2;
             const originY = graphHeight / 2;
             const y1Pixel = originY - startingPoint * (graphHeight / range);
-            const rayArrowHeight = 42;
+            const rayArrowHeight = 18;
             const y2Pixel = direction === 'up' ? rayArrowHeight : graphHeight - rayArrowHeight;
             cy.get(`.ngie-accordion .ngie-jxgbox svg [stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
                 .should('be.visible');
@@ -1133,7 +1157,7 @@ const steps = {
             const originX = graphWidth / 2;
             const originY = graphHeight / 2;
             const y1Pixel = originY - startingPoint * (graphHeight / range);
-            const rayArrowHeight = 42;
+            const rayArrowHeight = 18;
             const y2Pixel = direction === 'up' ? rayArrowHeight : graphHeight - rayArrowHeight;
             cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
                 .should('be.visible');
@@ -1154,7 +1178,7 @@ const steps = {
                 const originX = graphWidth / 2;
                 const originY = graphHeight / 2;
                 const y1Pixel = originY - startingPoint * (graphHeight / range);
-                const rayArrowHeight = 42;
+                const rayArrowHeight = 18;
                 const y2Pixel = direction === "up" ? rayArrowHeight : graphHeight - rayArrowHeight;
                 cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
                     .should('have.css', 'stroke', css.color.correctAnswer);
@@ -1174,7 +1198,7 @@ const steps = {
             const originX = graphWidth / 2;
             const originY = graphHeight / 2;
             const y1Pixel = originY - startingPoint * (graphHeight / range);
-            const rayArrowHeight = 42;
+            const rayArrowHeight = 18;
             const y2Pixel = direction === "up" ? rayArrowHeight : graphHeight - rayArrowHeight;
             cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
                 .should('have.css', 'stroke', css.color.incorrectAnswer);
@@ -1194,7 +1218,7 @@ const steps = {
             const originX = graphWidth / 2;
             const originY = graphHeight / 2;
             const y1Pixel = originY - startingPoint * (graphHeight / range);
-            const rayArrowHeight = 42;
+            const rayArrowHeight = 18;
             const y2Pixel = direction === "up" ? rayArrowHeight : graphHeight - rayArrowHeight;
             cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
                 .should('not.exist');
@@ -1214,7 +1238,7 @@ const steps = {
             const originX = graphWidth / 2;
             const originY = graphHeight / 2;
             const y1Pixel = originY - startingPoint * (graphHeight / range);
-            const rayArrowHeight = 42;
+            const rayArrowHeight = 18;
             const y2Pixel = direction === "up" ? rayArrowHeight : graphHeight - rayArrowHeight;
             cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
                 .should('be.visible');
@@ -1234,7 +1258,7 @@ const steps = {
             const originX = graphWidth / 2;
             const originY = graphHeight / 2;
             const y1Pixel = originY - startingPoint * (graphHeight / range);
-            const rayArrowHeight = 42;
+            const rayArrowHeight = 18;
             const y2Pixel = direction === "up" ? rayArrowHeight : graphHeight - rayArrowHeight;
             cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`[stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
                 .should('have.css', 'stroke', css.color.correctAnswer);
@@ -1254,7 +1278,7 @@ const steps = {
             const originX = graphWidth / 2;
             const originY = graphHeight / 2;
             const y1Pixel = originY - startingPoint * (graphHeight / range);
-            const rayArrowHeight = 42;
+            const rayArrowHeight = 18;
             const y2Pixel = direction === "up" ? rayArrowHeight : graphHeight - rayArrowHeight;
             cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`svg [stroke-linecap="butt"][x1*="${Math.floor(originX)}"][y1*="${Math.floor(y1Pixel)}"][x2*="${Math.floor(originX)}"][y2*="${Math.floor(y2Pixel)}"]`)
                 .should('not.exist');
@@ -1416,10 +1440,10 @@ const tests = {
         });
     },
 
-     /**
-     * Verifies the functionality of the number line section in the edit tab.
-     * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
-     */
+    /**
+    * Verifies the functionality of the number line section in the edit tab.
+    * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
+    */
     verifyDisplayNumberSettingsFunctionalitySpecifyCorrectAnswerSection: (orientation) => {
         const displayNumbersOptions = (orientation === "Horizontal") ? ["Below line", "Above line"] : ["Left of line", "Right of line"];
         const direction = (orientation === "Horizontal") ? "Below" : "Left of";
@@ -1437,10 +1461,10 @@ const tests = {
         });
     },
 
-     /**
-     * Verifies the functionality of the number line section in the preview tab.
-     * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
-     */
+    /**
+    * Verifies the functionality of the number line section in the preview tab.
+    * @param {string} orientation - The orientation of the number line ('Horizontal' or 'Vertical').
+    */
     verifyDisplayNumberSettingsFunctionalityPreviewTab: (orientation) => {
         const displayNumbersOptions = (orientation === "Horizontal") ? ["Below line", "Above line"] : ["Left of line", "Right of line"];
         const direction = (orientation === "Horizontal") ? "Below" : "Left of";