itemengine-cypress-automation 1.0.337-IEI-5508-automated-tests-9e03453.0 → 1.0.338

package/cypress/pages/fillInTheGapsTextPage.js

@@ -23,7 +23,9 @@ const selectors = {
     ...figCommonStyleAndLayoutComponent,
     setForAllTextContainersLabel: () => cy.get('[data-ngie-testid="set-for-all-text-containers-checkbox"] .MuiFormControlLabel-label'),
     setForAllTextContainersCheckbox: () => cy.get('[data-ngie-testid="set-for-all-text-containers-checkbox"] input'),
-    correctAnswerSectionWithoutEnumerationWrapper: () => cy.get('.no-numeration-correct-answers-wrapper .preview-question-text-wrapper')
+    correctAnswerSectionWithoutEnumerationWrapper: () => cy.get('.no-numeration-correct-answers-wrapper .preview-question-text-wrapper'),
+    answerStatusBanner: () => cy.get('[class*="AnswerStatusWrapper"]'),
+    correctAnswerSectionWrapper: () => cy.get('[class*="label-image-with-text-correct-answer-wrapper"]'),
 }
 
 const steps = {
@@ -142,7 +144,27 @@ const steps = {
                         .should('have.attr', 'value', correctAnswer);
                 });
             });
-    }
+    },
+
+    verifyCorrectAnswerSectionNotExist: () => {
+        fillInTheGapsTextPage.correctAnswerSectionWrapper()
+            .should('not.exist');
+    },
+
+    verifyCorrectAnswerSectionExist: () => {
+        fillInTheGapsTextPage.correctAnswerSectionWrapper()
+            .should('exist');
+    },
+
+    verifyAnswerStatusBannerNotExist: () => {
+        fillInTheGapsTextPage.answerStatusBanner()
+            .should('not.exist');
+    },
+
+    verifyAnswerStatusBannerExist: () => {
+        fillInTheGapsTextPage.answerStatusBanner()
+            .should('be.visible');
+    },
 }
 
 const tests = {

package/cypress/pages/imageHighlightPage.js

@@ -1,5 +1,7 @@
 import utilities from "../support/helpers/utilities";
-import { additionalSettingsAccessibilitySectionComponent, additionalSettingsPanel, autoScoredScoringPreviewTab, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, autoScoredStudentViewSettings, backgroundImageUploadComponent, commonComponents, createQuestionBasePage, enableOuterBorderComponent, gradingViewEnumerationComponent, imageActionsComponent, imageCanvasComponent, questionInstructionsComponent, scoringSectionBaseEditTab, showAvailableOptionsToStudents, showStudentMaximumNumberOfPossibleSelections, singleMultipleSelectionModeComponent, colorPopupComponent } from "./components"
+import { additionalSettingsAccessibilitySectionComponent, additionalSettingsPanel, autoScoredScoringPreviewTab, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, autoScoredStudentViewSettings, backgroundImageUploadComponent, commonComponents, createQuestionBasePage, enableOuterBorderComponent, gradingViewEnumerationComponent, imageActionsComponent, imageCanvasComponent, questionInstructionsComponent, scoringSectionBaseEditTab, showAvailableOptionsToStudents, showStudentMaximumNumberOfPossibleSelections, singleMultipleSelectionModeComponent, colorPopupComponent } from "./components";
+import { createItemPage } from "./createItemPage";
+import { dialogBoxBase } from "./dialogBoxBase";
 const css = Cypress.env('css');
 let imageWidth = 768;
 let imageHeight = 432;
@@ -104,6 +106,8 @@ const selectors = {
     ariaLabelInputField: () => cy.get('input[placeholder*="Enter ARIA label"]'),
     inputFieldNumeration: () => cy.get('.MuiInputAdornment-root'),
     ariaLabelSectionLabel: () => cy.get('[class*="styles__LabelWrapper"]').contains('ARIA'),
+    addAlternativeAnswerButton: () => cy.get('[class*="AddAlternateAnswer"] button'),
+    correctAnswerSection: () => cy.get('[class*="CorrectAnswerTextWrapper"]'),
 }
 
 const steps = {
@@ -122,6 +126,8 @@ const steps = {
     ...showStudentMaximumNumberOfPossibleSelections.steps,
     ...additionalSettingsPanel.steps,
     ...gradingViewEnumerationComponent.steps,
+    ...createItemPage.steps,
+    ...commonComponents.steps,
 
     //Specify possible options
     verifyToolbarDisabled: () => {
@@ -518,7 +524,7 @@ const steps = {
 
     /**
    * @param {number} index of highlight region
-   * @description this functions highlights a region in set correct answer section
+   * @description this functions removes highlight for a region in set correct answer section
    */
     removeHighlightOfARegionInSetCorrectAnswerSection: (index) => {
         imageHighlightPage.specifyCorrectAnswerSectionHighlight()
@@ -1501,6 +1507,36 @@ const steps = {
         imageHighlightPage.popupBorderStyleButtons().eq(2)
             .should('have.attr', 'aria-pressed', 'true');
     },
+
+    checkAlternativeButtonDisabled: () => {
+        imageHighlightPage.addAlternativeAnswerButton()
+            .should('be.disabled');
+    },
+
+    checkAlternativeButtonEnabled: () => {
+        imageHighlightPage.addAlternativeAnswerButton()
+            .should('be.enabled');
+    },
+
+    verifyAnswerStatusBannerNotExist: () => {
+        imageHighlightPage.correctIncorrectStatusMessageText()
+            .should('not.exist');
+    },
+
+    verifyAnswerStatusBannerExist: () => {
+        imageHighlightPage.correctIncorrectStatusMessageText()
+            .should('be.visible');
+    },
+
+    verifyCorrectAnswerSectionExist: () => {
+        imageHighlightPage.correctAnswerSection()
+            .should('be.visible');
+    },
+
+    verifyCorrectAnswerSectionNotExist: () => {
+        imageHighlightPage.correctAnswerSection()
+            .should('not.exist');
+    },
 }
 
 const tests = {
@@ -1519,6 +1555,71 @@ const tests = {
     ...additionalSettingsPanel.tests,
     ...gradingViewEnumerationComponent.tests,
     ...additionalSettingsAccessibilitySectionComponent.tests,
+    //TODO need to remove once Save as you go is available for all questions
+    /**
+     * @description Verifies the behavior of the 'Add alternative answer' button, warning popups, and validation error messages
+     * in the 'Specify correct answer' section for alternative answers in auto-scored questions.
+     * @param {string|null} questionType - The type of the question (e.g., 'list ordering'). Pass `null` if not applicable.
+     * @example - verifyAutoScoredAddAlternativeAnswerButtonAndValidation();
+     */
+    verifyAutoScoredAddAlternativeAnswerButtonAndValidation: (questionType = null) => {
+        it('\'+ Add alternative answer\' button should be present', () => {
+            utilities.verifyInnerText(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton(), 'Add alternative answer');
+            utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton(), 'visible');
+            autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton()
+                .verifyPseudoClassBeforeProperty('content', '""');
+        });
+
+        it('CSS of \'Add Alternative answer\' button', { tags: 'css' }, () => {
+            utilities.verifyCSS(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton().find('p'), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.activeButtons);
+        });
+
+        it('If user has not selected correct answer in the correct accordion, then the Add alternative answer button should be in enabled state', () => {
+            utilities.verifyElementNotDisabled(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton());
+            autoScoredSpecifyCorrectAnswerSection.steps.clickOnAddAlternativeAnswerButton();
+        });
+
+        it('CSS of warning popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(dialogBoxBase.dialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(dialogBoxBase.dialogBoxContent(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(dialogBoxBase.buttonClose().find('svg'), {
+                'fill': css.color.closeIcon
+            });
+        });
+
+        it('Accessibility of warning popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dialogBoxBase.dialogBox());
+            dialogBoxBase.steps.closeWarningPopup();
+        });
+    },
+
+    //TODO need to remove once Save as you go is available for all questions
+    verifyWarningPopupAndAccordionNavigationWhenNoPointsAddedInAlternativeAccordion: () => {
+        it('When user tries to expand correct accordion when all the mandatory fields are not filled in the alternative accordion, then a warning popup should be displayed and on closing the popup, alternative 2 accordion should be in expanded state', () => {
+            autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
+                .click();
+            dialogBoxBase.steps.closeWarningPopup();
+            //TODO: Need to add error message according to question types
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'exist');
+            autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
+                .eq(1)
+                .should('have.attr', 'aria-expanded', 'true');
+        });
+    },
 
     /**
      * @param {string} scoringType scoring type 'All or nothing| Partial equal weights| Partial different weights'
@@ -1550,17 +1651,16 @@ const tests = {
 
         it(`When the user has removed all the options from the dropzone in the ${accordionName} accordion, error message should not be thrown on the \'${accordionName}\' accordion`, () => {
             imageHighlightPage.steps.removeHighlightOfARegionInSetCorrectAnswerSection(1);
-            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible')
-            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Please set a correct answer.')
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist')
             if (accordionName == 'Correct') {
                 autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
                     .within(() => {
-                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'notExist');
                     });
             } else {
                 autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
                     .within(() => {
-                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'notExist');
                     });
             };
         });

package/cypress/pages/listOrderingPage.js

@@ -3,6 +3,7 @@ import utilities from "../support/helpers/utilities";
 import { autoScoredScoringPreviewTab, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, autoScoredStudentViewSettings, commonComponents, correctIncorrectAnswerLabelComponent, createQuestionBasePage, optionsWrapperComponent, questionInstructionsComponent, randomizeOptionsComponent, scoringSectionBaseEditTab, studentViewSettingsLabelComponent, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent, enableOuterBorderComponent, styleAndLayoutCustomizationAccordionComponent } from "./components"
 import { listOrderingCommonStyleAndLayoutComponent } from "./components/listOrderingCommonStyleAndLayoutComponent";
 import { createItemPage } from "./createItemPage";
+import { dialogBoxBase } from "./dialogBoxBase";
 const options = ['sprout', 'plant', 'flower', 'seed'];
 const css = Cypress.env('css');
 
@@ -149,7 +150,8 @@ const steps = {
     ...enableOuterBorderComponent.steps,
     ...styleAndLayoutCustomizationAccordionComponent.steps,
     ...listOrderingCommonStyleAndLayoutComponent.steps,
-     ...createItemPage.steps,
+    ...createItemPage.steps,
+    ...dialogBoxBase.steps,
 
     /**
      * Verifies the border value of specify correct answer section options
@@ -251,7 +253,7 @@ const steps = {
                 break;
             case 'none':
                 dragIcon
-                    .should('not.exist');
+                    .should('not.be.visible');
                 break;
             default:
                 throw new Error('Invalid drag handle option');

package/cypress/pages/menuBarPage.js

@@ -1,66 +1,66 @@
 import { browseItemsPage, createQuestionBasePage } from "./components";
- import { createItemPage } from "./createItemPage";
- 
- const selectors = {
-     ...browseItemsPage,
-     ...createItemPage,
-     itemBankDataApiAccordion: () => cy.get('[role="button"]').contains('Item Bank'),
-     fetchItemsButton: () => cy.get('[role="button"]').contains('Fetch Items'),
-     browseItemsButton: () => cy.get('[role="button"]').contains('Browse Items'),
-     exampleRequestBody: () => cy.get('pre[class="body-param__example microlight"]'),
-     exampleResponseValue: () => cy.get('pre[class="example microlight"]'),
-     exampleResponseBody: () => cy.get('pre[class="microlight"]'),
-     responseStatus: () => cy.get('[class="response-col_status"]'),
-     responseDescription: () => cy.get('.response-col_description__inner'),
-     buttonTryItOut: () => cy.get('[class="btn try-out__btn"]'),
-     responseTextArea: () => cy.get('textarea[class="body-param__text"]'),
-     buttonExecute: () => cy.get('.execute'),
-     requestLoader: () => cy.get('.loading-container')
- }
- 
- const steps = {
-     ...browseItemsPage.steps,
-     ...createItemPage.steps,
-     ...createQuestionBasePage.steps,
-     expandItemBankDataApiAccordion: () => {
-         menuBarPage.itemBankDataApiAccordion()
-             .click()
-             .parents('[role="button"]')
-             .should('have.attr', 'aria-expanded', 'true');
-     },
- 
-     clickFetchItemsButton: () => {
-         menuBarPage.fetchItemsButton()
-             .click()
-             .parents('[role="button"]')
-             .should('have.class', 'Mui-selected');
-         cy.url()
-             .should('eq', Cypress.config().baseUrl + '/item-engine/data-api/item-bank/fetch-items');
-     },
- 
-     tryItOut: () => {
-         menuBarPage.buttonTryItOut()
-             .click();
-     },
- 
-     enterTextInSampleRequestBody: (text) => {
-         menuBarPage.responseTextArea()
-             .clear()
-             .fill(text);
-     },
- 
-     execute: () => {
-         menuBarPage.buttonExecute()
-             .click();
-     },
- 
-     navigateToBrowseItems: () => {
-         menuBarPage.browseItemsButton()
-             .click()
-     }
- }
- 
- export const menuBarPage = {
-     ...selectors,
-     steps
- }
+import { createItemPage } from "./createItemPage";
+
+const selectors = {
+    ...browseItemsPage,
+    ...createItemPage,
+    itemBankDataApiAccordion: () => cy.get('[role="button"]').contains('Item Bank'),
+    fetchItemsButton: () => cy.get('[role="button"]').contains('Fetch Items'),
+    browseItemsButton: () => cy.get('[role="button"]').contains('Browse Items'),
+    exampleRequestBody: () => cy.get('pre[class="body-param__example microlight"]'),
+    exampleResponseValue: () => cy.get('pre[class="example microlight"]'),
+    exampleResponseBody: () => cy.get('pre[class="microlight"]'),
+    responseStatus: () => cy.get('[class="response-col_status"]'),
+    responseDescription: () => cy.get('.response-col_description__inner'),
+    buttonTryItOut: () => cy.get('[class="btn try-out__btn"]'),
+    responseTextArea: () => cy.get('textarea[class="body-param__text"]'),
+    buttonExecute: () => cy.get('.execute'),
+    requestLoader: () => cy.get('.loading-container')
+}
+
+const steps = {
+    ...browseItemsPage.steps,
+    ...createItemPage.steps,
+    ...createQuestionBasePage.steps,
+    expandItemBankDataApiAccordion: () => {
+        menuBarPage.itemBankDataApiAccordion()
+            .click()
+            .parents('[role="button"]')
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    clickFetchItemsButton: () => {
+        menuBarPage.fetchItemsButton()
+            .click()
+            .parents('[role="button"]')
+            .should('have.class', 'Mui-selected');
+        cy.url()
+            .should('eq', Cypress.config().baseUrl + '/item-engine/data-api/item-bank/fetch-items');
+    },
+
+    tryItOut: () => {
+        menuBarPage.buttonTryItOut()
+            .click();
+    },
+
+    enterTextInSampleRequestBody: (text) => {
+        menuBarPage.responseTextArea()
+            .clear()
+            .fill(text);
+    },
+
+    execute: () => {
+        menuBarPage.buttonExecute()
+            .click();
+    },
+
+    navigateToBrowseItems: () => {
+        menuBarPage.browseItemsButton()
+            .click()
+    }
+}
+
+export const menuBarPage = {
+    ...selectors,
+    steps
+}

package/cypress/pages/multipleSelectionGridPage.js

@@ -184,7 +184,8 @@ const steps = {
 
     verifyCorrectAnswerSectionNotExist: () => {
         multipleSelectionGridPage.correctAnswerSection()
-            .should('not.exist');},
+            .should('not.exist');
+    },
     /**
      * Verifies the contents of option fields within the options section.
      * @param {Array<string>} optionsTextArray - An array of strings representing the expected text content for each option field.
@@ -212,6 +213,72 @@ const tests = {
     ...additionalSettingsPanel.tests,
     ...additionalSettingsAccessibilitySectionComponent.tests,
     ...styleAndLayoutCustomizationAccordionComponent.tests,
+    //TODO need to remove once Save as you go is available for all questions
+    /**
+     * @description Verifies the behavior of the 'Add alternative answer' button, warning popups, and validation error messages
+     * in the 'Specify correct answer' section for alternative answers in auto-scored questions.
+     * @param {string|null} questionType - The type of the question (e.g., 'list ordering'). Pass `null` if not applicable.
+     * @example - verifyAutoScoredAddAlternativeAnswerButtonAndValidation();
+     */
+    verifyAutoScoredAddAlternativeAnswerButtonAndValidation: (questionType = null) => {
+        it('\'+ Add alternative answer\' button should be present', () => {
+            utilities.verifyInnerText(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton(), 'Add alternative answer');
+            utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton(), 'visible');
+            autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton()
+                .verifyPseudoClassBeforeProperty('content', '""');
+        });
+
+        it('CSS of \'Add Alternative answer\' button', { tags: 'css' }, () => {
+            utilities.verifyCSS(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton().find('p'), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.activeButtons);
+        });
+
+        it('If user has not selected correct answer in the correct accordion, then the Add alternative answer button should be in enabled state', () => {
+            utilities.verifyElementNotDisabled(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton());
+            autoScoredSpecifyCorrectAnswerSection.steps.clickOnAddAlternativeAnswerButton();
+        });
+
+        it('CSS of warning popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(dialogBoxBase.dialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(dialogBoxBase.dialogBoxContent(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(dialogBoxBase.buttonClose().find('svg'), {
+                'fill': css.color.closeIcon
+            });
+        });
+
+        it('Accessibility of warning popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dialogBoxBase.dialogBox());
+            dialogBoxBase.steps.closeWarningPopup();
+        });
+    },
+
+    //TODO need to remove once Save as you go is available for all questions
+    verifyWarningPopupAndAccordionNavigationWhenNoPointsAddedInAlternativeAccordion: () => {
+        it('When user tries to expand correct accordion when all the mandatory fields are not filled in the alternative accordion, then a warning popup should be displayed and on closing the popup, alternative 2 accordion should be in expanded state', () => {
+            autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
+                .click();
+            dialogBoxBase.steps.closeWarningPopup();
+            //TODO: Need to add error message according to question types
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'exist');
+            autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
+                .eq(1)
+                .should('have.attr', 'aria-expanded', 'true');
+        });
+    },
+
     /**
      * 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.

package/cypress/pages/multipleSelectionPage.js

@@ -914,6 +914,73 @@ const tests = {
     ...ckEditorInsertTableComponent.tests,
     ...ckEditorInsertImageComponent.tests,
     ...ckEditorLinkComponent.tests,
+
+    //TODO need to remove once Save as you go is available for all questions
+    /**
+     * @description Verifies the behavior of the 'Add alternative answer' button, warning popups, and validation error messages
+     * in the 'Specify correct answer' section for alternative answers in auto-scored questions.
+     * @param {string|null} questionType - The type of the question (e.g., 'list ordering'). Pass `null` if not applicable.
+     * @example - verifyAutoScoredAddAlternativeAnswerButtonAndValidation();
+     */
+    verifyAutoScoredAddAlternativeAnswerButtonAndValidation: (questionType = null) => {
+        it('\'+ Add alternative answer\' button should be present', () => {
+            utilities.verifyInnerText(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton(), 'Add alternative answer');
+            utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton(), 'visible');
+            autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton()
+                .verifyPseudoClassBeforeProperty('content', '""');
+        });
+
+        it('CSS of \'Add Alternative answer\' button', { tags: 'css' }, () => {
+            utilities.verifyCSS(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton().find('p'), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.activeButtons);
+        });
+
+        it('If user has not selected correct answer in the correct accordion, then the Add alternative answer button should be in enabled state', () => {
+            utilities.verifyElementNotDisabled(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerButton());
+            autoScoredSpecifyCorrectAnswerSection.steps.clickOnAddAlternativeAnswerButton();
+        });
+
+        it('CSS of warning popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(dialogBoxBase.dialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(dialogBoxBase.dialogBoxContent(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(dialogBoxBase.buttonClose().find('svg'), {
+                'fill': css.color.closeIcon
+            });
+        });
+
+        it('Accessibility of warning popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dialogBoxBase.dialogBox());
+            dialogBoxBase.steps.closeWarningPopup();
+        });
+    },
+
+    //TODO need to remove once Save as you go is available for all questions
+    verifyWarningPopupAndAccordionNavigationWhenNoPointsAddedInAlternativeAccordion: () => {
+        it('When user tries to expand correct accordion when all the mandatory fields are not filled in the alternative accordion, then a warning popup should be displayed and on closing the popup, alternative 2 accordion should be in expanded state', () => {
+            autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
+                .click();
+            dialogBoxBase.steps.closeWarningPopup();
+            //TODO: Need to add error message according to question types
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'exist');
+            autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
+                .eq(1)
+                .should('have.attr', 'aria-expanded', 'true');
+        });
+    },
+
     verifyPreviewModesAndScoreWhenPointsAndCorrectAnswersIsNotSet: () => {
         it('When the user has not set correct answer option(s) and alloted points, \'Student view\' radio button should be checked, \'Grading view\' button should not be checked, 0 points should be displayed and no correct or incorrect icons should be displayed in the preview tab', () => {
             utilities.verifyInnerText(autoScoredScoringPreviewTab.studentViewRadioButtonLabel(), 'Student view');

package/cypress/pages/numberLineLabelPage.js

@@ -1,6 +1,7 @@
 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';
+import { createItemPage } from './createItemPage';
 const css = Cypress.env('css');
 const tolerance = 6.24;
 
@@ -57,6 +58,8 @@ const steps = {
     ...commonComponents.steps,
     ...layoutSectionComponent.steps,
     ...createQuestionBasePage.steps,
+    ...createItemPage.steps,
+
     navigateToLabelNumberLineTab: () => {
         numberLineLabelPage.labelNumberLineTab()
             .click();
@@ -823,7 +826,7 @@ const steps = {
                             let containerHeight = $element[0].clientHeight;
                             graphHeight = graphHeight - containerHeight - 32;
                             const originY = graphHeight / 2 - tolerance / 2;
-                            const yPixel = originY - coordinate * ((graphHeight - tolerance) / range);
+                            const yPixel = originY - y * ((graphHeight - tolerance) / range);
                             cy.get(`.ngie-accordion .ngie-jxgbox svg ellipse[cy*="${Math.floor(yPixel)}"]:visible`)
                                 .should('not.exist');
                         });

package/cypress/pages/numberLinePage.js

@@ -1,5 +1,6 @@
 import utilities from '../support/helpers/utilities';
 import { createQuestionBasePage, toolsAndControlsComponent, questionInstructionsComponent, resetPopupComponent, scoringSectionBaseEditTab, autoScoredScoringPreviewTab, autoScoredSpecifyCorrectAnswerSection, commonComponents, autoScoredScoringSectionMultiResponseType, toolSettingsComponent, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent, autoScoredStudentViewSettings, randomizeOptionsComponent, studentViewSettingsLabelComponent, defaultToolDropdown, layoutSectionComponent, numberLineCommonComponent } from './components';
+import { createItemPage } from './createItemPage';
 import { dialogBoxBase } from './dialogBoxBase';
 const css = Cypress.env('css');
 const range = 22.18;
@@ -76,6 +77,7 @@ const steps = {
     ...defaultToolDropdown.steps,
     ...numberLineCommonComponent.steps,
     ...layoutSectionComponent.steps,
+    ...createItemPage.steps,
 
     /**
      * This function selects tool options

package/cypress/pages/shortTextResponsePage.js

@@ -1,6 +1,7 @@
 import { createQuestionBasePage, autoScoredStudentViewSettings, autoScoredScoringPreviewTab, scoringSectionBaseEditTab, questionInstructionsComponent, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, commonComponents, additionalSettingsPanel, acceptedStudentInputComponent, studentViewSettingsLabelComponent, customizeSpecialCharacterComponent, studentResponseAndLayoutComponent } from "./components/";
 import { dialogBoxBase } from "./dialogBoxBase";
 import utilities from "../support/helpers/utilities";
+import { createItemPage } from "./createItemPage";
 const css = Cypress.env('css');
 
 const selectors = {
@@ -104,6 +105,7 @@ const steps = {
     ...commonComponents.steps,
     ...additionalSettingsPanel.steps,
     ...autoScoredSpecifyCorrectAnswerSection.steps,
+    ...createItemPage.steps,
 
     verifyCorrectIcon: () => {
         utilities.verifyElementVisibilityState(autoScoredScoringPreviewTab.correctIcon(), 'visible');