itemengine-cypress-automation 1.0.189-e2e-execution-crash-83cdbd4.0 → 1.0.190-7thMayFixes-fcaf7b8.0

package/cypress/pages/numberLineLabelPage.js

@@ -0,0 +1,1093 @@
+import constants from '../fixtures/constants';
+import utilities from '../support/helpers/utilities';
+import { createQuestionBasePage, questionInstructionsComponent, scoringSectionBaseEditTab, ckEditorToolbar, equationEditorFlyout, autoScoredScoringPreviewTab, autoScoredStudentViewSettings, numberLineCommonComponent, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, commonComponents, studentViewSettingsLabelComponent, randomizeOptionsComponent, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent, toolSettingsComponent, layoutSectionComponent } from './components';
+const css = Cypress.env('css');
+
+const selectors = {
+    ...questionInstructionsComponent,
+    ...numberLineCommonComponent,
+    ...autoScoredScoringSectionMultiResponseType,
+    ...autoScoredSpecifyCorrectAnswerSection,
+    ...commonComponents,
+    ...autoScoredStudentViewSettings,
+    ...autoScoredScoringPreviewTab,
+    ...randomizeOptionsComponent,
+    ...additionalSettingsPanel,
+    partialEqualWeightsPointsPerResponseScore: () => cy.get('.alternate-points-points-per-value-span'),
+    snapToTicksCheckbox: () => cy.get('[data-ngie-testid="snap-to-ticks-checkbox"] input'),
+    snapToTicksLabel: () => cy.get('[data-ngie-testid="snap-to-ticks-checkbox"] .MuiFormControlLabel-label'),
+    //Label section
+    labelInputField: () => cy.get('.edit-question-enter-option-form-element [role="textbox"]'),
+    addLabelButton: () => cy.get('.inline-add-option-button-wrapper button'),
+    labelNumberLineTab: () => cy.get('[data-ngie-testid="label-number-line-tab"]'),
+    labelsLabel: () => cy.get('.options-label'),
+    labelNumeration: () => cy.get('[class*="SingleOptionstyle__AdornmentDiv"]'),
+    labelWrapper: () => cy.get('.edit-mcq-option-wrapper'),
+    deleteLabelButton: () => cy.get('.ngie-button[aria-label*="Delete label"]'),
+
+    //Specify correct answer section
+    draggableLabelsSpecifyCorrectAnswer: () => cy.get('.label-tool'),
+    labelContainerSpecifyCorrectAnswer: () => cy.get('.items-container'),
+
+    //Preview tab 
+    draggableLabelsPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .label-tool'),
+    labelContainerPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .items-container'),
+
+    //Correct answer section
+    numberLineCorrectAnswerSection: () => cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox svg').eq(2),
+    numberLinePointCorrectAnswerSection: () => cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').last().find('svg ellipse[display="inline"]')
+}
+
+const steps = {
+    ...createQuestionBasePage.steps,
+    ...questionInstructionsComponent.steps,
+    ...scoringSectionBaseEditTab.steps,
+    ...ckEditorToolbar.steps,
+    ...equationEditorFlyout.steps,
+    ...autoScoredScoringPreviewTab.steps,
+    ...autoScoredStudentViewSettings.steps,
+    ...numberLineCommonComponent.steps,
+    ...autoScoredSpecifyCorrectAnswerSection.steps,
+    ...autoScoredScoringSectionMultiResponseType.steps,
+    ...randomizeOptionsComponent.steps,
+    ...additionalSettingsPanel.steps,
+    ...commonComponents.steps,
+    ...layoutSectionComponent.steps,
+    navigateToLabelNumberLineTab: () => {
+        numberLineLabelPage.labelNumberLineTab()
+            .click();
+    },
+
+    addLabel: () => {
+        numberLineLabelPage.addLabelButton()
+            .click()
+    },
+
+    /**
+     * This function is used to focus in the label input field
+     * @param {number} index of the label input field
+     */
+    focusInLabelInputField: (index) => {
+        utilities.getNthElement(numberLineLabelPage.labelInputField(), index)
+            .click();
+    },
+
+    /**
+    * @param {number} index of label input field
+    * @param {string} textContent to enter text in the label input field
+    */
+    enterTextInLabelInputField: (index, textContent) => {
+        numberLineLabelPage.labelInputField()
+            .eq(index)
+            .type(textContent)
+    },
+
+    verifySnapToTicksCheckboxChecked: () => {
+        numberLineLabelPage.snapToTicksCheckbox()
+            .should('be.checked');
+    },
+
+    uncheckSnapToTicksCheckbox: () => {
+        numberLineLabelPage.snapToTicksCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    checkSnapToTicksCheckbox: () => {
+        numberLineLabelPage.snapToTicksCheckbox()
+            .click()
+        numberLineLabelPage.steps.verifySnapToTicksCheckboxChecked();
+    },
+
+    /**
+     * This function triggers mouseover disabled delete button
+     * @param {number} index index of the delete button
+     */
+    mouseoverDisabledDeleteButton: (index) => {
+        utilities.getNthElement(numberLineLabelPage.deleteLabelButton(), index)
+            .trigger('mouseover', { force: true });
+    },
+
+    /**
+     * This function triggers mouseout disabled delete button
+     * @param {number} index index of the delete button
+     */
+    mouseoutDisabledDeleteButton: (index) => {
+        utilities.getNthElement(numberLineLabelPage.deleteLabelButton(), index)
+            .trigger('mouseout', { force: true });
+    },
+
+    /**
+   * @param {number} index of the option
+   * @description verify the enter option input field, drag handle, delete button and option numeration
+   */
+    verifyLabelsContents: (index) => {
+        numberLineLabelPage.labelWrapper()
+            .eq(index)
+            .within(() => {
+                numberLineLabelPage.labelInputField()
+                    .should('have.attr', 'data-cke-editorplaceholder', 'Enter label');
+                commonComponents.dragHandleButton()
+                    .should('exist');
+                numberLineLabelPage.deleteLabelButton()
+                    .should('be.visible');
+                numberLineLabelPage.labelNumeration()
+                    .should('have.text', index + 1);
+            });
+    },
+
+
+    /**
+   * @param {number} index of the label
+   * @description this function deletes the label
+   */
+    deleteLabel: (index) => {
+        numberLineLabelPage.deleteLabelButton()
+            .eq(index)
+            .click();
+    },
+
+    verifyDeleteLabelButtonDisabledState: () => {
+        numberLineLabelPage.deleteLabelButton()
+            .each(($element) => {
+                utilities.verifyElementDisabled(cy.wrap($element))
+            });
+    },
+
+    getLabelCount: () => {
+        return numberLineLabelPage.labelWrapper().its('length')
+    },
+
+    /**
+     * This function focuses in and out of the input field
+     * @param {string} inputFieldIndex index of input field
+     */
+    focusInAndOutOfLabelsInputField: (inputFieldIndex) => {
+        numberLineLabelPage.labelInputField()
+            .eq(inputFieldIndex)
+            .click()
+            .blur();
+    },
+
+    /**
+     * @description Verifies that the image in the Preview tab has the correct source and alt text.
+     * @param {number} index - The index of the option in the Preview tab.
+     */
+    verifyImageInLabelInputField: (index) => {
+        numberLineLabelPage.labelInputField()
+            .eq(index)
+            .find('img')
+            .should('have.attr', 'src', constants.foxImageLink)
+            .and('have.attr', 'alt', constants.foxImageAltText);
+    },
+
+    /**
+     * @description Verifies that the bold text in the Preview tab is correct.
+     * @param {number} index - The index of the option in the Preview tab.
+     */
+    verifyBoldTextInLabelInputField: (index) => {
+        numberLineLabelPage.labelInputField()
+            .eq(index)
+            .find('strong')
+            .should('have.text', 'This is a bold option');
+    },
+
+    /**
+     * @description Verifies that the equation text in the Preview tab is correct.
+     * @param {number} index - The index of the option in the Preview tab.
+     */
+    verifyEquationTextInLabelInputField: (index) => {
+        numberLineLabelPage.labelInputField()
+            .eq(index)
+            .find('[role="math"]')
+            .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
+            .contains(constants.CKEditorInputFieldEnteredEquationText);
+    },
+
+    /**
+     * This function enters text in labels input fields
+     * @param {string[]} labelsArray array of labels
+     */
+    enterTextInMultipleLabelInputFields: (labelsArray) => {
+        labelsArray.forEach((label, index) => {
+            numberLineLabelPage.labelInputField()
+                .eq(index)
+                .type(label)
+                .blur();
+            cy.log('Wait added to make sure all the labels are displayed in the label container')
+            cy.wait(200);
+            numberLineLabelPage.labelInputField()
+                .eq(index)
+                .should('have.text', label)
+        });
+    },
+
+    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) => {
+        utilities.verifyInnerText(numberLineLabelPage.partialEqualWeightsPointsPerResponseScore(), points);
+    },
+
+    //Specify correct answer section
+    /**
+     * This function clicks and drops label on the specify correct answer section line
+     * @param {string} label to be dropped on the number line
+     * @param {(horizontal|vertical)} orientation of the number line
+     * @param {number} range of the number line
+     * @param {number} coordinate of the number line to drop the label
+     */
+    clickAndDropLabelOnNumberLineSpecifyCorrectAnswer: (label, orientation, range, coordinate) => {
+        numberLineLabelPage.draggableLabelsSpecifyCorrectAnswer()
+            .contains(label)
+            .click();
+        numberLineLabelPage.numberLineSpecifyCorrectAnswer()
+            .then(($graphElement) => {
+                if (orientation === 'horizontal') {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = 180;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const xPixel = originX + coordinate * (graphWidth / range);
+                    numberLineLabelPage.numberLineSpecifyCorrectAnswer()
+                        .click(xPixel, originY, { force: true });
+                } else {
+                    numberLineLabelPage.labelContainerSpecifyCorrectAnswer()
+                        .then(($element) => {
+                            const graphWidth = 642;
+                            let graphHeight = $graphElement[0].clientHeight;
+                            let containerHeight = $element[0].clientHeight;
+                            graphHeight = graphHeight - containerHeight - 32;
+                            const originX = graphWidth / 2;
+                            const originY = graphHeight / 2;
+                            const yPixel = originY - coordinate * (graphHeight / range);
+                            numberLineLabelPage.numberLineSpecifyCorrectAnswer()
+                                .click(originX, yPixel, { force: true });
+                        });
+                }
+            });
+    },
+
+    /**
+     * This function clicks and drops the label back in the container
+     * @param {string} label to be clicked and dropped
+     */
+    clickAndDropLabelInContainerSpecifyCorrectAnswer: (label) => {
+        numberLineLabelPage.draggableLabelsSpecifyCorrectAnswer()
+            .contains(label)
+            .click();
+        numberLineLabelPage.labelContainerSpecifyCorrectAnswer()
+            .click({ force: true });
+    },
+
+    /**
+    * This function verifies plotted points on the number line on the Edit tab.
+    * @param {number} range - The range of x coordinates.
+    * @param {number[]} coordinates - An array containing x coordinates to be plotted on the graph.
+    */
+    verifyPointsPlottedOnNumberLineSpecifyCorrectAnswer: (range, coordinates) => {
+        coordinates.forEach(x => {
+            numberLineLabelPage.numberLineSpecifyCorrectAnswer()
+                .then(($graphElement) => {
+                    let graphWidth = $graphElement[0].clientWidth;
+                    const originX = graphWidth / 2;
+                    const xPixel = originX + x * (graphWidth / range);
+                    cy.get(`.ngie-accordion .ngie-jxgbox svg ellipse[cx*="${Math.floor(xPixel)}"]`)
+                        .should('exist');
+                });
+        });
+    },
+
+    /**
+    * This function verifies plotted points on the number line do not exist on the preview tab.
+    * @param {number} range - The range of x coordinates.
+    * @param {number[]} coordinates - An array containing x coordinates to be plotted on the graph.
+    */
+    verifyPointsNotExistOnNumberLineSpecifyCorrectAnswer: (range, coordinates) => {
+        coordinates.forEach(x => {
+            numberLineLabelPage.numberLineSpecifyCorrectAnswer()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const originX = graphWidth / 2;
+                    const xPixel = originX + x * (graphWidth / range);
+                    cy.get(`.ngie-accordion .ngie-jxgbox svg ellipse[cx*="${Math.floor(xPixel)}"]`)
+                        .should('not.exist');
+                });
+        });
+    },
+
+    /**
+     * @description Verifies that the image in the Preview tab has the correct source and alt text.
+     * @param {number} index - The index of the option in the Preview tab.
+     */
+    verifyImageInPreviewTab: (index) => {
+        numberLineLabelPage.draggableLabelsPreviewTab()
+            .eq(index)
+            .find('img')
+            .should('have.attr', 'src', constants.foxImageLink)
+            .and('have.attr', 'alt', constants.foxImageAltText);
+    },
+
+    /**
+     * @description Verifies that the bold text in the Preview tab is correct.
+     * @param {number} index - The index of the option in the Preview tab.
+     */
+    verifyBoldTextInPreviewTab: (index) => {
+        numberLineLabelPage.draggableLabelsPreviewTab()
+            .eq(index)
+            .find('strong')
+            .should('have.text', 'This is a bold option');
+    },
+
+    /**
+     * @description Verifies that the equation text in the Preview tab is correct.
+     * @param {number} index - The index of the option in the Preview tab.
+     */
+    verifyEquationTextInPreviewTab: (index) => {
+        numberLineLabelPage.draggableLabelsPreviewTab()
+            .eq(index)
+            .find('[role="math"]')
+            .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
+            .contains(constants.CKEditorInputFieldEnteredEquationText);
+    },
+
+    /**
+     * This function verifies the text content of label
+     * @param {number} index of the draggable label
+     * @param {string} textContent of the label
+     */
+    verifyLabelTextContentPreviewTab: (index, textContent) => {
+        utilities.verifyInnerText(utilities.getNthElement(numberLineLabelPage.draggableLabelsPreviewTab(), index), textContent)
+    },
+
+    /**
+     * Verifies draggable options in the Specify Correct Answer section of the options container.
+     * @param {Array[]} draggableOptionsArray - An array of expected text content for draggable options.
+     */
+    verifyDraggableLabelInContainerSpecifyCorrectAnswerSection: (draggableOptionsArray) => {
+        draggableOptionsArray.forEach((optionText, optionIndex) => {
+            utilities.verifyElementCount(numberLineLabelPage.draggableLabelsSpecifyCorrectAnswer(), draggableOptionsArray.length);
+            utilities.verifyTextContent(utilities.getNthElement(numberLineLabelPage.draggableLabelsSpecifyCorrectAnswer(), optionIndex), optionText);
+        });
+    },
+
+    /**
+    * @description Verifies that the image in the Preview tab has the correct source and alt text.
+    * @param {number} index - The index of the option in the Preview tab.
+    */
+    verifyImageInLabelSpecifyCorrectAnswerSection: (index) => {
+        numberLineLabelPage.draggableLabelsSpecifyCorrectAnswer()
+            .eq(index)
+            .find('img')
+            .should('have.attr', 'src', constants.foxImageLink)
+            .and('have.attr', 'alt', constants.foxImageAltText);
+    },
+
+    /**
+     * @description Verifies that the bold text in the Preview tab is correct.
+     * @param {number} index - The index of the option in the Preview tab.
+     */
+    verifyBoldTextInLabelSpecifyCorrectAnswerSection: (index) => {
+        numberLineLabelPage.draggableLabelsSpecifyCorrectAnswer()
+            .eq(index)
+            .find('strong')
+            .should('have.text', 'This is a bold option');
+    },
+
+    /**
+     * @description Verifies that the equation text in the Preview tab is correct.
+     * @param {number} index - The index of the option in the Preview tab.
+     */
+    verifyEquationTextInLabelSpecifyCorrectAnswerSection: (index) => {
+        numberLineLabelPage.draggableLabelsSpecifyCorrectAnswer()
+            .eq(index)
+            .find('[role="math"]')
+            .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
+            .contains(constants.CKEditorInputFieldEnteredEquationText);
+    },
+
+
+    //Preview tab
+    /**
+     * This function clicks and drops label on the specify correct answer section line
+     * @param {string} label to be dropped on the number line
+     * @param {(horizontal|vertical)} orientation of the number line
+     * @param {number} range of the number line
+     * @param {number} coordinate of the number line to drop the label
+     */
+    clickAndDropLabelOnNumberLinePreviewTab: (label, orientation, range, coordinate) => {
+        numberLineLabelPage.draggableLabelsPreviewTab()
+            .contains(label)
+            .click();
+        numberLineLabelPage.numberLinePreviewTab()
+            .then(($graphElement) => {
+                if (orientation === 'horizontal') {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const graphHeight = 180;
+                    const originX = graphWidth / 2;
+                    const originY = graphHeight / 2;
+                    const xPixel = originX + coordinate * (graphWidth / range);
+                    numberLineLabelPage.numberLinePreviewTab()
+                        .click(xPixel, originY, { force: true });
+                } else {
+                    numberLineLabelPage.labelContainerPreviewTab()
+                        .then(($element) => {
+                            const graphWidth = 642;
+                            let graphHeight = $graphElement[0].clientHeight;
+                            let containerHeight = $element[0].clientHeight;
+                            graphHeight = graphHeight - containerHeight - 32;
+                            const originX = graphWidth / 2;
+                            const originY = graphHeight / 2;
+                            const yPixel = originY - coordinate * (graphHeight / range);
+                            numberLineLabelPage.numberLinePreviewTab()
+                                .click(originX, yPixel, { force: true });
+                        });
+                }
+            });
+    },
+
+    /**
+   * This function verifies plotted points on the number line on the preview tab.
+   * @param {number} range - The range of x coordinates.
+   * @param {number[]} coordinates - An array containing x coordinates to be plotted on the graph.
+   */
+    verifyPointsPlottedOnNumberLinePreviewTab: (range, coordinates) => {
+        coordinates.forEach(x => {
+            numberLineLabelPage.numberLinePreviewTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const originX = graphWidth / 2;
+                    const xPixel = originX + x * (graphWidth / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cx*="${Math.floor(xPixel)}"]`)
+                        .should('exist');
+                });
+        });
+    },
+
+    /**
+   * This function verifies plotted points on the number line on the preview tab.
+   * @param {number} range - The range of x coordinates.
+   * @param {number[]} coordinates - An array containing x coordinates to be plotted on the graph.
+   */
+    verifyIncorrectResponseOnNumberLinePreviewTab: (label, range, coordinate) => {
+        numberLineLabelPage.numberLinePreviewTab()
+            .then(($graphElement) => {
+                const graphWidth = $graphElement[0].clientWidth;
+                const originX = graphWidth / 2;
+                const xPixel = originX + coordinate * (graphWidth / range);
+                cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cx*="${Math.floor(xPixel)}"]`)
+                    .should('have.css', 'stroke', css.color.incorrectAnswer);
+            });
+        numberLineLabelPage.numberLinePreviewTab()
+            .parents('.ngie-jxgbox')
+            .within(() => {
+                numberLineLabelPage.draggableLabelsSpecifyCorrectAnswer()
+                    .contains(label)
+                    .should('have.class', 'icon-incorrect-cross')
+                    //Failing due to https://redmine.zeuslearning.com/issues/571510
+                    //  .should('have.css', 'border', `1px solid ${css.color.incorrectAnswer}`)
+                    .verifyPseudoClassBeforeProperty('color', css.color.incorrectAnswer);
+            });
+    },
+
+    /**
+   * This function verifies plotted points on the number line on the preview tab.
+   * @param {number} range - The range of x coordinates.
+   * @param {number[]} coordinates - An array containing x coordinates to be plotted on the graph.
+   */
+    verifyCorrectResponseOnNumberLinePreviewTab: (label, range, coordinate) => {
+        numberLineLabelPage.numberLinePreviewTab()
+            .then(($graphElement) => {
+                const graphWidth = $graphElement[0].clientWidth;
+                const originX = graphWidth / 2;
+                const xPixel = originX + coordinate * (graphWidth / range);
+                cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cx*="${Math.floor(xPixel)}"]`)
+                    .should('have.css', 'stroke', css.color.correctAnswer);
+            });
+        numberLineLabelPage.numberLinePreviewTab()
+            .parents('.ngie-jxgbox')
+            .within(() => {
+                numberLineLabelPage.draggableLabelsSpecifyCorrectAnswer()
+                    .contains(label)
+                    .should('have.class', 'icon-correct-tick')
+                    //Failing due to https://redmine.zeuslearning.com/issues/571510
+                    //.should('have.css', 'border', `1px solid ${css.color.correctAnswer}`)
+                    .verifyPseudoClassBeforeProperty('color', css.color.correctAnswer);
+            });
+    },
+
+    /**
+    * This function verifies plotted points on the number line do not exist on the preview tab.
+    * @param {number} range - The range of x coordinates.
+    * @param {number[]} coordinates - An array containing x coordinates to be plotted on the graph.
+    */
+    verifyPointsNotExistOnNumberLinePreviewTab: (range, coordinates) => {
+        coordinates.forEach(x => {
+            numberLineLabelPage.numberLinePreviewTab()
+                .then(($graphElement) => {
+                    const graphWidth = $graphElement[0].clientWidth;
+                    const originX = graphWidth / 2;
+                    const xPixel = originX + x * (graphWidth / range);
+                    cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cx*="${Math.floor(xPixel)}"]`)
+                        .should('not.exist');
+                });
+        });
+    },
+
+    /**
+     * Verifies draggable options in the preview tab of the options container.
+     * @param {Array<string>} draggableOptionsArray - An array of expected text content for draggable options.
+     */
+    verifyDraggableLabelInContainerPreviewTab: (draggableOptionsArray) => {
+        draggableOptionsArray.forEach((optionText, optionIndex) => {
+            utilities.verifyElementCount(numberLineLabelPage.draggableLabelsPreviewTab(), draggableOptionsArray.length);
+            utilities.verifyTextContent(utilities.getNthElement(numberLineLabelPage.draggableLabelsPreviewTab(), optionIndex), optionText);
+        });
+    },
+
+    /**
+    * @param {number[]} optionArray Array of options set in set correct answer section
+    * @param {string} questionType Name of the question type
+    * @description Verify that options are randomized in preview tab
+    */
+    verifyRandomizeOptionOrder: (optionArray) => {
+        let currentOptions = [...optionArray]
+        for (let index = 0; index < currentOptions.length; index++) {
+            numberLineLabelPage.draggableLabelsPreviewTab()
+                .eq(index)
+                .then(($element) => {
+                    expect($element.text()).to.be.oneOf(currentOptions);
+                    currentOptions = currentOptions.filter((value) => value !== $element.text())
+                });
+        };
+        numberLineLabelPage.steps.verifyOptionsAreRerandomized(optionArray);
+    },
+
+    /**
+     * Verifies that options in the preview tab have been re-randomized compared to the previous order.
+     * @param {Array<string>} previousOrderOfOptions - An array representing the previous order of options.
+     */
+    verifyOptionsAreRerandomized: (previousOrderOfOptions) => {
+        numberLineLabelPage.draggableLabelsPreviewTab()
+            .should('not.have.text', '')
+            .and('not.have.text', previousOrderOfOptions.join(''));
+    },
+
+    getOptionsArray: () => {
+        const optionsArray = []
+        numberLineLabelPage.draggableLabelsPreviewTab()
+            .each(($el) => {
+                cy.wrap($el)
+                    .invoke('text')
+                    .then((text) => {
+                        optionsArray.push(text);
+                    });
+            });
+        return optionsArray;
+    },
+
+    //Correct answer section
+    /**
+   * This function verifies correct plotted points on the number line on c tab
+   * @param {Object[]} coordinates - An array containing x and y coordinates along with their ranges
+   * @param {number} range - range of x coordinate
+   */
+    verifyCorrectResponseOnNumberLineCorrectAnswerSection: (label, range, coordinate) => {
+        numberLineLabelPage.numberLineCorrectAnswerSection()
+            .then(($graphElement) => {
+                const graphWidth = $graphElement[0].clientWidth;
+                const originX = graphWidth / 2;
+                const xPixel = originX + coordinate * (graphWidth / range);
+                cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`svg ellipse[cx*="${Math.floor(xPixel)}"][display="inline"]`)
+                    .should('have.css', 'stroke', css.color.correctAnswer);
+            });
+        numberLineLabelPage.numberLineCorrectAnswerSection()
+            .parents('.ngie-jxgbox')
+            .within(() => {
+                numberLineLabelPage.draggableLabelsSpecifyCorrectAnswer()
+                    .contains(label)
+                    .should('have.class', 'icon-correct-tick')
+                    //Failing due to https://redmine.zeuslearning.com/issues/571510
+                    //.should('have.css', 'border', `1px solid ${css.color.correctAnswer}`)
+                    .verifyPseudoClassBeforeProperty('color', css.color.correctAnswer);
+            });
+    },
+
+    /**
+     * This function verifies the label in container and is disabled
+     * @param {string} label in the container
+     */
+    verifyLabelIsDisabledForGradingView: (label) => {
+        numberLineLabelPage.draggableLabelsPreviewTab()
+            .contains(label)
+            .should('have.class', 'disable-label-tool');
+    },
+
+    verifyCorrectAnswerSectionNotExist: () => {
+        utilities.verifyElementVisibilityState(numberLineLabelPage.numberLineCorrectAnswerSection(), 'notExist');
+    },
+
+    /**
+    * @param {number} points - The points to be allotted.
+    * @description - Allots points in the scoring section.
+    */
+    allotPartialDifferentWeightsPoints: (pointsArray) => {
+        pointsArray.forEach((points, index) => {
+            scoringSectionBaseEditTab.pointsInputField()
+                .eq(index)
+                .clear()
+                .type(`${points}`)
+                .should('have.value', points)
+                .blur();
+        });
+    },
+
+    //Layout
+    /**
+     * Verifies the orientation and size of the specify correct answer section.
+     * @param {number} height - The value representing the width or height of the specify correct answer section.
+     */
+    verifyVerticalNumberLineOrientationAndSizeSpecifyCorrectAnswerSection: (height) => {
+        numberLineLabelPage.labelContainerSpecifyCorrectAnswer()
+            .then(($element) => {
+                let containerHeight = $element[0].clientHeight;
+                let graphHeight = parseInt(height, 10) + parseInt(containerHeight, 10) + 32;
+                numberLineCommonComponent.numberLineSpecifyCorrectAnswer()
+                    .should('have.attr', 'height', graphHeight.toString());
+            });
+    },
+
+    /**
+     * Verifies the orientation and size of the preview tab
+     * @param {number} height - The value representing the width or height of the preview tab.
+     */
+    verifyVerticalNumberLineOrientationAndSizePreviewTab: (height) => {
+        numberLineLabelPage.labelContainerPreviewTab()
+            .then(($element) => {
+                let containerHeight = $element[0].clientHeight;
+                let graphHeight = parseInt(height, 10) + parseInt(containerHeight, 10) + 32;
+                numberLineCommonComponent.numberLinePreviewTab()
+                    .should('have.attr', 'height', graphHeight.toString());
+            });
+    },
+
+    /**
+   * Verifies the display numbers orientation in the specify correct answer section of the number line.
+   * @param {string} numberLineOrientation - The orientation of the number line ('Horizontal' or 'Vertical').
+   * @param {string} numberOrientation - The orientation of the numbers ('Below' or 'Left').
+   * @throws {Error} Thrown if the number line orientation is invalid.
+   */
+    verifyDisplayNumbersOrientationSpecifyCorrectAnswerSection: (numberLineOrientation, numberOrientation) => {
+        let property, value;
+        switch (numberLineOrientation) {
+            case 'Horizontal':
+                if (numberOrientation === 'Below') {
+                    property = 'top';
+                    value = '113px';
+                } else if (numberOrientation === 'Above') {
+                    property = 'bottom';
+                    value = '207px';
+                }
+                break;
+            case 'Vertical':
+                property = numberOrientation === 'Left of' ? 'right' : 'left';
+                value = '346px';
+                break;
+            default:
+                throw new Error('Invalid Number line orientation');
+        }
+        numberLineCommonComponent.numberLineSpecifyCorrectAnswer()
+            .parents('.ngie-jxgbox')
+            .find('.number-line-tick-font')
+            .eq(0)
+            .should('have.css', property, value);
+    },
+
+    /**
+    * Verifies the display numbers orientation in the number line section.
+    * @param {string} numberLineOrientation - The orientation of the number line ('Horizontal' or 'Vertical').
+    * @param {string} numberOrientation - The orientation of the numbers ('Below' or 'Left').
+    * @throws {Error} Thrown if the number line orientation is invalid.
+    */
+    verifyDisplayNumbersOrientationPreviewTab: (numberLineOrientation, numberOrientation) => {
+        let property, value;
+        switch (numberLineOrientation) {
+            case 'Horizontal':
+                if (numberOrientation === 'Below') {
+                    property = 'top';
+                    value = '113px';
+                } else if (numberOrientation === 'Above') {
+                    property = 'bottom';
+                    value = '207px';
+                }
+                break;
+            case 'Vertical':
+                property = numberOrientation === 'Left of' ? 'right' : 'left';
+                value = '346px';
+                break;
+            default:
+                throw new Error('Invalid Number line orientation');
+        }
+
+        numberLineCommonComponent.numberLinePreviewTab()
+            .parents('.ngie-jxgbox')
+            .find('.number-line-tick-font')
+            .eq(0)
+            .should('have.css', property, value);
+    },
+
+    /**
+     * Verifies the display numbers orientation in the number line section.
+     * @param {string} numberLineOrientation - The orientation of the number line ('Horizontal' or 'Vertical').
+     * @param {string} numberOrientation - The orientation of the numbers ('Below' or 'Left').
+     * @throws {Error} Thrown if the number line orientation is invalid.
+     */
+    verifyDisplayNumbersOrientationNumberLineSection: (numberLineOrientation, numberOrientation) => {
+        let property, value;
+        switch (numberLineOrientation) {
+            case 'Horizontal':
+                property = numberOrientation === 'Below' ? 'top' : 'bottom';
+                value = '83px';
+                break;
+            case 'Vertical':
+                property = numberOrientation === 'Left of' ? 'right' : 'left';
+                value = '346px';
+                break;
+            default:
+                throw new Error('Invalid Number line orientation');
+        }
+        layoutSectionComponent.numberLineNumberLineSection()
+            .parents('.ngie-jxgbox')
+            .find('.number-line-tick-font')
+            .eq(0)
+            .should('have.css', property, value);
+    },
+
+    //Vertical
+    /**
+    * This function verifies plotted points on the number line on the Edit tab.
+    * @param {number} range - The range of x coordinates.
+    * @param {number[]} coordinates - An array containing x coordinates to be plotted on the graph.
+    */
+    verifyVerticalPointsPlottedOnNumberLineSpecifyCorrectAnswer: (range, coordinates) => {
+        coordinates.forEach(y => {
+            numberLineLabelPage.numberLineSpecifyCorrectAnswer()
+                .then(($graphElement) => {
+                    numberLineLabelPage.labelContainerSpecifyCorrectAnswer()
+                        .then(($element) => {
+                            let graphHeight = $graphElement[0].clientHeight;
+                            let containerHeight = $element[0].clientHeight;
+                            graphHeight = graphHeight - containerHeight - 32;
+                            const originY = graphHeight / 2;
+                            const yPixel = originY - y * (graphHeight / range);
+                            cy.get(`.ngie-accordion .ngie-jxgbox svg ellipse[cy*="${Math.floor(yPixel)}"]`)
+                                .should('exist');
+                        });
+                });
+        });
+    },
+
+    /**
+    * This function verifies plotted points on the number line on the Edit tab.
+    * @param {number} range - The range of x coordinates.
+    * @param {number[]} coordinates - An array containing y coordinates that do not exist on the graph.
+    */
+    verifyVerticalPointsNotExistOnNumberLineSpecifyCorrectAnswer: (range, coordinates) => {
+        coordinates.forEach(y => {
+            numberLineLabelPage.numberLineSpecifyCorrectAnswer()
+                .then(($graphElement) => {
+                    numberLineLabelPage.labelContainerSpecifyCorrectAnswer()
+                        .then(($element) => {
+                            let graphHeight = $graphElement[0].clientHeight;
+                            let containerHeight = $element[0].clientHeight;
+                            graphHeight = graphHeight - containerHeight - 32;
+                            const originY = graphHeight / 2;
+                            const yPixel = originY - y * (graphHeight / range);
+                            cy.get(`.ngie-accordion .ngie-jxgbox svg ellipse[cy*="${Math.floor(yPixel)}"]`)
+                                .should('not.exist');
+                        });
+                });
+        });
+    },
+
+    /**
+    * This function verifies plotted points on the number line do not exist on the preview tab.
+    * @param {number} range - The range of x coordinates.
+    * @param {number[]} coordinates - An array containing x coordinates to be plotted on the graph.
+    */
+    verifyVerticalPointsNotExistOnNumberLinePreviewTab: (range, coordinates) => {
+        coordinates.forEach(y => {
+            numberLineLabelPage.numberLinePreviewTab()
+                .then(($graphElement) => {
+                    numberLineLabelPage.labelContainerPreviewTab()
+                        .then(($element) => {
+                            let graphHeight = $graphElement[0].clientHeight;
+                            let containerHeight = $element[0].clientHeight;
+                            graphHeight = graphHeight - containerHeight - 32;
+                            const originY = graphHeight / 2;
+                            const yPixel = originY - y * (graphHeight / range);
+                            cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cy*="${Math.floor(yPixel)}"]`)
+                                .should('not.exist');
+                        });
+                });
+        });
+    },
+
+    /**
+   * This function verifies plotted points on the number line on the preview tab.
+   * @param {number} range - The range of x coordinates.
+   * @param {number[]} coordinates - An array containing x coordinates to be plotted on the graph.
+   */
+    verifyVerticalPointsPlottedOnNumberLinePreviewTab: (range, coordinates) => {
+        coordinates.forEach(y => {
+            numberLineLabelPage.numberLinePreviewTab()
+                .then(($graphElement) => {
+                    numberLineLabelPage.labelContainerPreviewTab()
+                        .then(($element) => {
+                            let graphHeight = $graphElement[0].clientHeight;
+                            let containerHeight = $element[0].clientHeight;
+                            graphHeight = graphHeight - containerHeight - 32;
+                            const originY = graphHeight / 2;
+                            const yPixel = originY - y * (graphHeight / range);
+                            cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cy*="${Math.floor(yPixel)}"]`)
+                                .should('exist');
+                        });
+                });
+        });
+    },
+
+    /**
+    * This function verifies plotted points on the number line on the preview tab.
+    * @param {number} range - The range of x coordinates.
+    * @param {number[]} coordinates - An array containing x coordinates to be plotted on the graph.
+    */
+    verifyVerticalIncorrectResponseOnNumberLinePreviewTab: (label, range, coordinate) => {
+        numberLineLabelPage.numberLinePreviewTab()
+            .then(($graphElement) => {
+                numberLineLabelPage.labelContainerPreviewTab()
+                    .then(($element) => {
+                        let graphHeight = $graphElement[0].clientHeight;
+                        let containerHeight = $element[0].clientHeight;
+                        graphHeight = graphHeight - containerHeight - 32;
+                        const originY = graphHeight / 2;
+                        const yPixel = originY - coordinate * (graphHeight / range);
+                        cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cy*="${Math.floor(yPixel)}"]`)
+                            .should('have.css', 'stroke', css.color.incorrectAnswer);
+                    });
+            });
+        numberLineLabelPage.numberLinePreviewTab()
+            .parents('.ngie-jxgbox')
+            .within(() => {
+                numberLineLabelPage.draggableLabelsSpecifyCorrectAnswer()
+                    .contains(label)
+                    .should('have.class', 'icon-incorrect-cross')
+                    //Failing due to https://redmine.zeuslearning.com/issues/571510
+                    //.should('have.css', 'border', `1px solid ${css.color.incorrectAnswer}`)
+                    .verifyPseudoClassBeforeProperty('color', css.color.incorrectAnswer);
+            });
+    },
+
+    /**
+   * This function verifies plotted points on the number line on the preview tab.
+   * @param {number} range - The range of x coordinates.
+   * @param {number[]} coordinates - An array containing x coordinates to be plotted on the graph.
+   */
+    verifyVerticalCorrectResponseOnNumberLinePreviewTab: (label, range, coordinate) => {
+        numberLineLabelPage.numberLinePreviewTab()
+            .then(($graphElement) => {
+                numberLineLabelPage.labelContainerPreviewTab()
+                    .then(($element) => {
+                        let graphHeight = $graphElement[0].clientHeight;
+                        let containerHeight = $element[0].clientHeight;
+                        graphHeight = graphHeight - containerHeight - 32;
+                        const originY = graphHeight / 2;
+                        const yPixel = originY - coordinate * (graphHeight / range);
+                        cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cy*="${Math.floor(yPixel)}"]`)
+                            .should('have.css', 'stroke', css.color.correctAnswer);
+                    });
+            });
+        numberLineLabelPage.numberLinePreviewTab()
+            .parents('.ngie-jxgbox')
+            .within(() => {
+                numberLineLabelPage.draggableLabelsSpecifyCorrectAnswer()
+                    .contains(label)
+                    .should('have.class', 'icon-correct-tick')
+                    //Failing due to https://redmine.zeuslearning.com/issues/571510
+                    //.should('have.css', 'border', `1px solid ${css.color.correctAnswer}`)
+                    .verifyPseudoClassBeforeProperty('color', css.color.correctAnswer);
+            });
+    },
+
+    /**
+    * This function verifies correct plotted points on the number line on c tab
+    * @param {Object[]} coordinates - An array containing x and y coordinates along with their ranges
+    * @param {number} range - range of x coordinate
+    */
+    verifyVerticalCorrectResponseOnNumberLineCorrectAnswerSection: (label, range, coordinate) => {
+        numberLineLabelPage.numberLineCorrectAnswerSection()
+            .then(($graphElement) => {
+                let graphHeight = $graphElement[0].clientHeight;
+                const originY = graphHeight / 2;
+                const yPixel = originY - coordinate * (graphHeight / range);
+                cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(1).find(`svg ellipse[cy*="${Math.floor(yPixel)}"][display="inline"]`)
+                    .should('have.css', 'stroke', css.color.correctAnswer);
+            });
+        numberLineLabelPage.numberLineCorrectAnswerSection()
+            .parents('.ngie-jxgbox')
+            .within(() => {
+                numberLineLabelPage.draggableLabelsSpecifyCorrectAnswer()
+                    .contains(label)
+                    .should('have.class', 'icon-correct-tick')
+                    //Failing due to https://redmine.zeuslearning.com/issues/571510
+                    //.should('have.css', 'border', `1px solid ${css.color.correctAnswer}`)
+                    .verifyPseudoClassBeforeProperty('color', css.color.correctAnswer);
+            });
+    },
+
+    //Correct answer view
+    /**
+   * This function verifies plotted points on the number line on the preview tab.
+   * @param {number} label - The label to drag and drop
+   * @param {number} yPixel - x coordinates to be verified on the graph.
+   */
+    verifyVerticalCorrectResponseOnNumberLineCorrectAnswerView: (label, yPixel) => {
+        cy.get('[class*="question-preview-wrapper"] .ngie-jxgbox').eq(0).find(`svg ellipse[cy*="${Math.floor(yPixel)}"]`)
+            .should('have.css', 'stroke', css.color.correctAnswer);
+        numberLineLabelPage.numberLinePreviewTab()
+            .parents('.ngie-jxgbox')
+            .within(() => {
+                numberLineLabelPage.draggableLabelsSpecifyCorrectAnswer()
+                    .contains(label)
+                    .should('have.class', 'icon-correct-tick')
+                    //Failing due to https://redmine.zeuslearning.com/issues/571510
+                    //.should('have.css', 'border', `1px solid ${css.color.correctAnswer}`)
+                    .verifyPseudoClassBeforeProperty('color', css.color.correctAnswer);
+            });
+    },
+}
+
+const tests = {
+    ...autoScoredScoringPreviewTab.tests,
+    ...scoringSectionBaseEditTab.tests,
+    ...autoScoredScoringSectionMultiResponseType.tests,
+    ...studentViewSettingsLabelComponent.tests,
+    ...autoScoredStudentViewSettings.tests,
+    ...randomizeOptionsComponent.tests,
+    ...additionalSettingsPanel.tests,
+    ...additionalSettingsAccessibilitySectionComponent.tests,
+    ...createQuestionBasePage.tests,
+    ...commonComponents.tests,
+    ...autoScoredSpecifyCorrectAnswerSection.tests,
+    ...toolSettingsComponent.tests,
+    ...questionInstructionsComponent.tests,
+    ...layoutSectionComponent.tests,
+    ...numberLineCommonComponent.tests,
+    verifyContentsOfSpecifyCorrectAnswerSection: () => {
+        it('When user selects a scoring type then in the \'Correct\' accordion, all the contents should be displayed', () => {
+            utilities.verifyElementVisibilityState(numberLineCommonComponent.numberLineTitleCorrectAnswerSection(), 'exist');
+            utilities.verifyInnerText(numberLineCommonComponent.numberLineTitleCorrectAnswerSection(), 'Number line title');
+            utilities.verifyElementCount(numberLineLabelPage.draggableLabelsSpecifyCorrectAnswer(), 4);
+            utilities.verifyElementVisibilityState(numberLineLabelPage.numberLineSpecifyCorrectAnswer(), 'visible');
+            utilities.verifyElementVisibilityState(numberLineLabelPage.labelContainerSpecifyCorrectAnswer(), 'visible');
+        });
+    },
+
+    /**
+    * 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) => {
+        const range = 20.75;
+        it(`The user should be able to plot points on number line in the specify correct answer section ${accordionName} accordion`, () => {
+            numberLineLabelPage.steps.clickAndDropLabelOnNumberLineSpecifyCorrectAnswer('Label 2', 'horizontal', range, 9);
+            numberLineLabelPage.steps.verifyPointsPlottedOnNumberLineSpecifyCorrectAnswer(range, [9]);
+        });
+
+        it(`When the user resets the number line in the ${accordionName} accordion, \'Error: Please set a correct answer.\' error message should be thrown along with an error icon on the \'${accordionName}\' accordion`, () => {
+            numberLineLabelPage.steps.clickAndDropLabelInContainerSpecifyCorrectAnswer('Label 2');
+            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 plots on the number line then the error message should disappear', () => {
+            numberLineLabelPage.steps.clickAndDropLabelOnNumberLineSpecifyCorrectAnswer('Label 2', 'horizontal', range, 9);
+            numberLineLabelPage.steps.verifyPointsPlottedOnNumberLineSpecifyCorrectAnswer(range, [9]);
+        });
+
+        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty(accordionName);
+
+        it('Accessibility of \'Correct\' accordion contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(numberLineLabelPage.numberLineSpecifyCorrectAnswer());
+        });
+    },
+
+    /**
+    * 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";
+        it(`When "${displayNumbersOptions[0]}" is selected, labels should be displayed ${direction} number line in both the number line section and the specify correct answer section.`, () => {
+            numberLineCommonComponent.steps.verifyDisplayNumbersToggleButtonSelected(displayNumbersOptions[0]);
+            numberLineLabelPage.steps.verifyDisplayNumbersOrientationNumberLineSection(orientation, direction);
+            numberLineLabelPage.steps.verifyDisplayNumbersOrientationSpecifyCorrectAnswerSection(orientation, direction);
+        });
+
+        const oppositeDirection = (orientation === "Horizontal") ? "Above" : "Right of";
+        it(`When "${displayNumbersOptions[1]}" is selected, labels should be displayed ${oppositeDirection} number line in both the number line section and the specify correct answer section.`, () => {
+            numberLineCommonComponent.steps.selectDisplayNumbersToggleButton(displayNumbersOptions[1]);
+            numberLineLabelPage.steps.verifyDisplayNumbersOrientationNumberLineSection(orientation, oppositeDirection);
+            numberLineLabelPage.steps.verifyDisplayNumbersOrientationSpecifyCorrectAnswerSection(orientation, oppositeDirection);
+        });
+    },
+
+    /**
+    * 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";
+        it(`When ${displayNumbersOptions[0]} is selected then labels should be displayed ${direction} number line in the preview tab.`, () => {
+            numberLineCommonComponent.steps.switchToEditTab();
+            numberLineCommonComponent.steps.verifyDisplayNumbersToggleButtonSelected(displayNumbersOptions[0]);
+            numberLineCommonComponent.steps.switchToPreviewTab();
+            numberLineLabelPage.steps.verifyDisplayNumbersOrientationPreviewTab(orientation, direction);
+        });
+
+        const oppositeDirection = (orientation === "Horizontal") ? "Above" : "Right of";
+        it(`When user selects ${displayNumbersOptions[1]} then labels should be displayed ${oppositeDirection} number line in the preview tab.`, () => {
+            numberLineCommonComponent.steps.switchToEditTab();
+            numberLineCommonComponent.steps.selectDisplayNumbersToggleButton(displayNumbersOptions[1]);
+            numberLineCommonComponent.steps.switchToPreviewTab();
+            numberLineLabelPage.steps.verifyDisplayNumbersOrientationPreviewTab(orientation, oppositeDirection);
+        });
+    }
+}
+
+export const numberLineLabelPage = {
+    ...selectors,
+    steps,
+    tests
+}